@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Inter is the primary UI face; the OS faces below cover the gap if it fails to load. */
  --app-font-sans: "Inter", "Segoe UI Variable Display", "Segoe UI Variable Text", "Bahnschrift", sans-serif;
  --bg: #080d18;
  --bg-strong: #0b0f1a;
  --card: rgba(255, 255, 255, 0.028);
  --surface-soft: rgba(255, 255, 255, 0.034);
  --surface-strong: rgba(12, 17, 28, 0.94);
  --input-bg: rgba(8, 12, 21, 0.96);
  --border: rgba(255, 255, 255, 0.1);
  --text: #eef2ff;
  --muted: #9aa4b8;
  --accent: #ff2d8d;
  --accent-dark: #ff4da6;
  --accent-soft: rgba(255, 45, 141, 0.18);
  --purple: #8d5cf6;
  --danger: #fb7185;
  --success: #20df74;
  --shadow: 0 22px 54px rgba(1, 2, 10, 0.46);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --gap: 14px;
  --grid-size: 148px;
  --grid-columns: 4;
  --pad-padding: 10px;
  --pad-gap: 10px;
  --pad-radius: 16px;
  --pad-thumb-radius: 14px;
  --pad-title-size: 13px;
  --pad-subtitle-size: 11px;
  --pad-badge-size: 10px;
  --pad-icon-size: 42px;
  --pad-thumb-height: 116px;
  --pad-extra-height: 48px;

  /* ── Motion scale ──────────────────────────────────────────────────────
     Unified animation timings + easing so transitions feel consistent across
     the whole UI instead of using ad-hoc values (0.12s/0.15s/0.18s/180ms...). */
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 220ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Focus ring ────────────────────────────────────────────────────────
     Unified keyboard-focus indicator. Sky-blue matches the accessible rings
     already used by a few components; brand pink is reserved for selection. */
  --focus-ring-color: rgba(125, 211, 252, 0.9);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

body[data-theme="dark"],
body.remote-app[data-theme="dark"] {
  --bg: #080d18;
  --bg-strong: #0b0f1a;
  --card: rgba(255, 255, 255, 0.028);
  --surface-soft: rgba(255, 255, 255, 0.034);
  --surface-strong: rgba(12, 17, 28, 0.94);
  --input-bg: rgba(8, 12, 21, 0.96);
  --border: rgba(255, 255, 255, 0.1);
  --text: #eef2ff;
  --muted: #9aa4b8;
  --accent: #ff2d8d;
  --accent-dark: #ff4da6;
  --accent-soft: rgba(255, 45, 141, 0.2);
  --shadow: 0 26px 62px rgba(1, 1, 9, 0.58);
}

* {
  box-sizing: border-box;
}



/* ════════════════════════════════════════════════════════════════════════
   Palette recolor (from override_recolor.css)
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --lvl-info-b: #38BDF8; --lvl-info-t: #7DD3FC;
  --lvl-warn-b: #FBBF24; --lvl-warn-t: #FCD34D;
  --lvl-error-b: #EF4444; --lvl-error-t: #FCA5A5;
  --c-project-b: #8B5CF6; --c-connect-b: #0EA5E9; --c-obs-b: #EC4899; --c-tiktok-b: #10B981; --c-server-b: #F59E0B;
  --c-img-b: #10B981; --c-vid-b: #0EA5E9; --c-aud-b: #8B5CF6; --c-anim-b: #F59E0B;
}

.logs-feed-entry.is-level-warn { background: rgba(245,158,11,0.04); }
.logs-feed-entry.is-level-error { background: rgba(239,68,68,0.06); }
.logs-level-chip[data-logs-level="info"] .logs-level-dot { background: #38BDF8; }
.logs-level-chip[data-logs-level="warn"] .logs-level-dot { background: #FBBF24; }
.logs-level-chip[data-logs-level="error"] .logs-level-dot { background: #EF4444; }
.logs-feed-entry.is-level-info .logs-feed-level { color: #7DD3FC; }
.logs-feed-entry.is-level-warn .logs-feed-level { color: #FCD34D; }
.logs-feed-entry.is-level-error .logs-feed-level { color: #FCA5A5; }

.logs-feed-source {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-weight: 800; font-size: 10px; letter-spacing: 0.06em;
  color: var(--logs-source-color, var(--muted));
  border: 1px solid color-mix(in oklab, var(--logs-source-color, rgba(255,255,255,.1)) 35%, transparent);
  background: color-mix(in oklab, var(--logs-source-color, rgba(255,255,255,.04)) 15%, transparent);
}

.logs-toolbar-btn.is-paused { background: rgba(245,158,11,0.15); color: #FDE68A; border-color: rgba(245,158,11,0.30); }
.logs-toolbar-btn.is-active { background: rgba(16,185,129,0.15); color: #A7F3D0; border-color: rgba(16,185,129,0.30); }
.logs-toolbar-btn.is-danger { border: 1px solid rgba(239,68,68,0.30); background: rgba(239,68,68,0.10); color: #FCA5A5; }
.logs-status-dot { background: #34D399; }

[data-media-browser-filter="image"] { color: #6EE7B7; border-color: rgba(16,185,129,0.40); background: rgba(16,185,129,0.20); }
[data-media-browser-filter="video"] { color: #7DD3FC; border-color: rgba(14,165,233,0.40); background: rgba(14,165,233,0.20); }
[data-media-browser-filter="audio"] { color: #C4B5FD; border-color: rgba(139,92,246,0.40); background: rgba(139,92,246,0.20); }
[data-media-browser-filter="animation"] { color: #FCD34D; border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.20); }
[data-media-browser-filter="image"].is-active { box-shadow: 0 0 0 1px rgba(16,185,129,0.35); }
[data-media-browser-filter="video"].is-active { box-shadow: 0 0 0 1px rgba(14,165,233,0.35); }
[data-media-browser-filter="audio"].is-active { box-shadow: 0 0 0 1px rgba(139,92,246,0.35); }
[data-media-browser-filter="animation"].is-active { box-shadow: 0 0 0 1px rgba(245,158,11,0.35); }

.media-browser-audio-row { border-left: 2px solid rgba(139,92,246,0.35); }
.media-browser-audio-row.is-playing { border-left-color: #C4B5FD; background: rgba(139,92,246,0.06); }

.pad-card[data-pad-type="audio"] .pad-type-badge { color: #C4B5FD; border-color: rgba(139,92,246,0.40); background: rgba(139,92,246,0.20); }
.pad-card[data-pad-type="video"] .pad-type-badge { color: #7DD3FC; border-color: rgba(14,165,233,0.40); background: rgba(14,165,233,0.20); }
.pad-card[data-pad-type="animation"] .pad-type-badge { color: #FCD34D; border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.20); }
.pad-card[data-pad-type="hotkey"] .pad-type-badge { color: #6EE7B7; border-color: rgba(16,185,129,0.40); background: rgba(16,185,129,0.20); }
.pad-card[data-pad-type="url"] .pad-type-badge { color: #FCD34D; border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.20); }
.pad-card[data-pad-type="program"] .pad-type-badge { color: #C4B5FD; border-color: rgba(139,92,246,0.40); background: rgba(139,92,246,0.20); }
.pad-card[data-pad-type="audio"] .pad-fallback { background: linear-gradient(135deg, rgba(139,92,246,0.30), rgba(217,70,239,0.10)); }
.pad-card[data-pad-type="video"] .pad-fallback { background: linear-gradient(135deg, rgba(14,165,233,0.30), rgba(59,130,246,0.10)); }
.pad-card[data-pad-type="animation"] .pad-fallback { background: linear-gradient(135deg, rgba(245,158,11,0.30), rgba(249,115,22,0.10)); }
.pad-card[data-pad-type="hotkey"] .pad-fallback { background: linear-gradient(135deg, rgba(16,185,129,0.30), rgba(20,184,166,0.10)); }

.media-browser-bulk-bar .media-browser-bulk-count { background: rgba(255,45,141,0.15); color: var(--accent, #FF2D8D); }
.media-browser-bulk-bar .media-browser-bulk-delete-btn { border: 1px solid rgba(255,59,92,0.30); background: rgba(255,59,92,0.10); color: #FB7185; }

.users-directory-display-btn.is-vip { color: #ff74de; }
.users-directory-display-btn.is-mod { color: #8fff7a; }
.users-directory-display-btn.is-ae { color: #9cadff; }
.users-role-pill { color: var(--muted); }
.users-role-pill.is-mod { color: #8fff7a; }
.users-role-pill.is-ae { color: #9cadff; }

.toast-item.is-success { color: #34D399; }
.toast-item.is-info { color: #38BDF8; }
.toast-item.is-danger { color: #FB7185; }