/* ===========================================================================
   StreamForge app UI — matches the marketing site's design language.
   Dark #09090B, single pink accent, glassmorphism, Geist. Runs in Electron
   and (via sf-shim.js) in the browser as the web version.

   Design system
   -------------
   Radius:   cards 18px (--r-lg), controls 11px (--r-md), chips 9px (--r-sm)
   Spacing:  4 / 8 / 12 / 16 / 20 / 24 / 32 (loosely, via --sp-*)
   Motion:   transform/opacity only, --ease spring-ish curve,
             entrance stagger on card grids, all gated by
             prefers-reduced-motion.
   Accent:   ONE accent. accent.js live-overrides --accent-rgb + --pink-*
             so never hardcode pink where an accent var exists.
   =========================================================================== */

:root {
  --bg: #09090b;
  --bg-2: #111113;
  --bg-3: #17171b;
  --card: rgba(255, 255, 255, 0.03);
  --card-2: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #fafafa;
  --muted: #a1a1aa;
  --faint: #82828c; /* AA-friendlier than the old #71717a for tiny labels */

  --pink: #f9025b;
  --pink-2: #ff1f6e;
  --pink-3: #ff4d88;
  --pink-4: #ff80a9;
  --accent-rgb: 249, 2, 91; /* accent as an r,g,b triple; overridden live by accent.js */
  --pink-grad: linear-gradient(135deg, #ff4d88 0%, #f9025b 60%, #ff1f6e 100%);
  --pink-glow: 0 8px 32px rgba(var(--accent-rgb), 0.32);

  --r-lg: 18px;
  --r-md: 11px;
  --r-sm: 9px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* layered, background-tinted shadows (single top-left light source) */
  --shadow-1: 0 1px 2px rgba(3, 3, 6, 0.4), 0 4px 14px rgba(3, 3, 6, 0.25);
  --shadow-2: 0 2px 6px rgba(3, 3, 6, 0.45), 0 14px 38px rgba(3, 3, 6, 0.38);
  --shadow-3: 0 8px 24px rgba(3, 3, 6, 0.5), 0 40px 120px rgba(3, 3, 6, 0.62);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* refraction line on glass */

  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.28);

  --twitch: #9146ff;
  --youtube: #ff0033;
  --tiktok: #25f4ee;
  --kick: #53fc18;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* iOS-flavoured springs: gentle overshoot for entrances, snappier for taps */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);      /* arrive-and-bounce */
  --spring-snap: cubic-bezier(0.22, 1.4, 0.36, 1);  /* quick settle */
  --spring-soft: cubic-bezier(0.4, 1.3, 0.5, 1);    /* subtle overshoot */
  --dur-1: 0.15s;
  --dur-2: 0.25s;
  --dur-3: 0.4s;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --z-topbar: 10;
  --z-gate: 60;
  --z-modal: 100;
  --z-grain: 300;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; }

/* ambient accent glow behind everything — slow breathing drift */
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  width: 900px; height: 620px; top: -320px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 70%);
  filter: blur(60px);
  animation: ambient 9s ease-in-out infinite;
}
@keyframes ambient {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

/* film grain — breaks digital flatness; sits above everything, ignores input */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.028; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* keyboard focus — always visible, never colour-only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- scrollbars ----------
   Thumb/track contrast is a RESCUE affordance, not decoration: scrollbar drag keeps
   working when wheel input dies, so every scroller's bar must be findable on the
   near-black UI. webkit pseudo-elements ONLY — one standard scrollbar-width/-color
   property anywhere makes Chromium ignore ALL ::-webkit-scrollbar styling. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); background-clip: padding-box; }

/* ---------- scroll failsafe (main content scroller) ----------
   The app shell is fixed at 100vh, so .panel-col is the ONLY scroller for page
   content — if a compositor wheel-wedge ever eats wheel deltas (the recurring
   "can't scroll" report), the user has no page-level fallback. Scrollbar DRAG
   uses a different code path than the wheel animation and keeps working through
   the wedge, so we make this scrollbar always-present (reserved gutter) and give
   the thumb real contrast: an obvious, grabbable bar on the right that always
   scrolls, no matter what the wheel is doing. See renderer/app.js scroll watchdog
   and main.js disable-smooth-scrolling for the wheel-side mitigations. */
.panel-col {
  /* NB: do NOT set scrollbar-width/scrollbar-color here. In Chromium (this app is
     Electron) the moment a standard scrollbar-* property is set, the ::-webkit-scrollbar
     styling below is IGNORED and you get a thin thumb on a transparent track — which
     against the dark UI reads as "no scrollbar at all". Keep only the gutter reservation
     and let the webkit rules paint the prominent bar. */
  scrollbar-gutter: stable;
}
.panel-col::-webkit-scrollbar { width: 15px; }
/* Track at 0.15 on purpose: an always-visible pill means "bar present, nothing to
   scroll" is visually distinct from "bar missing" (the two states used to be
   indistinguishable, which made no-overflow panes read as broken). */
.panel-col::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.15); border-radius: 999px; }
.panel-col::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  min-height: 44px;                                       /* always big enough to grab */
}
.panel-col::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.46); background-clip: padding-box; }
.panel-col::-webkit-scrollbar-thumb:active { background: var(--accent, rgba(255,255,255,0.6)); background-clip: padding-box; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255, 255, 255, 0.05); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* hovers fire constantly — 150ms reads instant, 250ms reads laggy */
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.btn .ph { font-size: 15px; }
.btn:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-sm { padding: 7px 11px; font-size: 12px; }
.btn.full { width: 100%; }
.btn-primary {
  position: relative; overflow: hidden;
  background: var(--pink-grad); color: #fff; border-color: transparent;
  box-shadow: var(--pink-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-160%); transition: transform 0.6s var(--ease);
}
.btn-primary:hover::after { transform: translateX(160%); }
.btn-ghost { background: transparent; box-shadow: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  background: none; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); border-color: var(--border); }
.icon-btn:active { transform: scale(0.92); }
.note { margin-left: 10px; color: var(--kick); font-size: 12px; }

/* ---------- inputs ---------- */
input[type="text"], input[type="number"], input[type="password"], select {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 9px 11px; font-size: 13px; font-family: inherit;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
input::placeholder { color: var(--faint); }
input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, select:hover { border-color: var(--border-strong); }
input:focus, select:focus { outline: none; border-color: var(--pink); box-shadow: var(--focus-ring); }
input[readonly] { color: var(--muted); }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* selects get a proper chevron instead of the OS arrow */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select option { background: var(--bg-2); color: var(--text); }

/* modern custom checkbox (rounded square + animated tick). Toggle switches hide
   their own input (.switch input) so this styling only shows on real checkboxes. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; cursor: pointer; flex: none;
  width: 20px; height: 20px; border-radius: 6px; vertical-align: -4px;
  border: 1.5px solid var(--border-strong, rgba(255, 255, 255, 0.28));
  background: var(--card, rgba(255, 255, 255, 0.05));
  display: inline-grid; place-content: center; margin: 0;
  transition: background var(--dur-1, .15s) var(--ease), border-color var(--dur-1, .15s) var(--ease), transform .09s var(--ease);
}
input[type="checkbox"]::before {
  /* never enter from scale(0) — nothing real appears from nothing */
  content: ""; width: 12px; height: 12px; transform: scale(0.45); opacity: 0; transform-origin: center; background: #fff;
  transition: transform .16s var(--spring, cubic-bezier(.34, 1.56, .64, 1)), opacity .12s var(--ease);
  clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 22%, 85% 8%, 40% 72%);
}
input[type="checkbox"]:checked { background: var(--pink-grad); border-color: transparent; box-shadow: 0 2px 9px rgba(var(--accent-rgb), 0.4); }
input[type="checkbox"]:checked::before { transform: scale(1); opacity: 1; }
input[type="checkbox"]:active { transform: scale(0.9); }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* modern rounded colour swatch (all colour pickers) */
input[type="color"] {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0; border: 0;
  background: none; border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transition: transform .09s var(--ease), box-shadow .15s var(--ease);
}
input[type="color"]:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.36); }
input[type="color"]:active { transform: scale(0.94); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 9px; }
input[type="color"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- searchable gift dropdown (combobox) ---------- */
.gift-combo { position: relative; flex: 1 1 auto; min-width: 110px; }
.gift-combo .gc-input { width: 100%; }
.gc-menu {
  position: absolute; z-index: 80; top: calc(100% + 4px); left: 0; right: 0; min-width: 150px;
  max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 5px;
  background: var(--bg-2, #14161c); border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.gift-combo.up .gc-menu { top: auto; bottom: calc(100% + 4px); }
.gc-menu[hidden] { display: none; }
.gc-opt { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .1s ease; }
.gc-opt:hover, .gc-opt.active { background: rgba(var(--accent-rgb), 0.16); }
.gc-opt.sel { color: var(--pink); font-weight: 600; }
.gc-opt { display: flex; align-items: center; gap: 10px; }
.gc-opt .gc-dia { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--mono, monospace); }
.gc-opt .gc-dia::after { content: ' 💎'; font-size: 9px; }
.gc-empty { padding: 8px 10px; font-size: 11.5px; color: var(--muted); }
.gc-menu::-webkit-scrollbar { width: 9px; }
.gc-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.gc-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.42); background-clip: padding-box; }
.sound-item .s-giftcombo, .sound-item .gf-giftcombo { flex: 0 0 158px; width: 158px; min-width: 0; }

/* Sound queue settings block (top of the Sounds tab) */
.sound-queue { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px;
  padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07); }
.sq-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sq-row > label:not(.switch) { font-size: 12.5px; font-weight: 600; }
.sq-row .muted { flex: 1 1 240px; min-width: 200px; margin: 0; }
.sq-num { width: 72px; padding: 5px 8px; border-radius: 8px; text-align: center;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink, #fff); font-size: 13px; font-weight: 600; }

/* ---------- virtual microphone (feed the sound mix into games as a mic input) ---------- */
.vmic { margin: 4px 0 16px; padding: 15px 16px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--edge-hi); }
.vmic-head { display: flex; align-items: center; gap: 14px; }
.vmic-ttl { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.vmic-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: rgba(var(--accent-rgb), 1); font-size: 19px; }
.vmic-name { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.vmic-ttl .muted { margin: 2px 0 0; }
.vmic-caption { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 11px; border-radius: var(--r-md);
  font-size: 12px; line-height: 1.5; color: var(--muted);
  background: rgba(139, 92, 246, 0.09); border: 1px solid rgba(139, 92, 246, 0.22); }
.vmic-caption i { font-size: 15px; line-height: 1.4; flex: none; color: #b794f6; }
.vmic-caption b { color: var(--text, #fff); font-weight: 650; }
.vmic-body { display: flex; flex-direction: column; gap: 12px; margin-top: 15px;
  padding-top: 15px; border-top: 1px solid var(--border); }
.vmic-body[hidden] { display: none; }
.vmic-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vmic-row > label:not(.switch) { font-size: 12.5px; font-weight: 600; flex: none; }
.vmic-row .muted { flex: 1 1 220px; min-width: 180px; margin: 0; }
.vmic-sel { flex: 1 1 240px; min-width: 200px; padding: 7px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink, #fff); font-size: 13px; }
.vmic-sel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: rgba(var(--accent-rgb), 0.5); }
.vmic-range { flex: 1 1 160px; min-width: 140px; accent-color: rgba(var(--accent-rgb), 1); }
#vmicPitchVal { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.vmic-status { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.5;
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); color: var(--muted); }
.vmic-status i { font-size: 15px; line-height: 1.45; flex: none; }
.vmic-status span { flex: 1 1 260px; min-width: 200px; }
.vmic-status.ok { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.28); color: #b8f0d8; }
.vmic-status.ok i { color: #34d399; }
.vmic-status.warn { background: rgba(251, 191, 36, 0.07); border-color: rgba(251, 191, 36, 0.26); color: #f3d9a6; }
.vmic-status.warn i { color: #fbbf24; }
.vmic-status b { color: var(--text, #fff); font-weight: 650; }
.vmic-actions { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.vmic-link { color: rgba(var(--accent-rgb), 1); font-size: 12px; text-decoration: none; opacity: 0.85; }
.vmic-link:hover { opacity: 1; text-decoration: underline; }
.vmic-hint { flex-basis: 100%; margin-top: 2px; font-size: 12px; color: var(--muted); }
.vmic-hint.err { color: #f5b5b5; }
.vmic-hint b { color: var(--text, #fff); }
.vmic-spin { display: inline-block; animation: vmic-spin 0.9s linear infinite; }
@keyframes vmic-spin { to { transform: rotate(360deg); } }

/* ---------- brand + lightning motion ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.brand-mark {
  position: relative; overflow: visible; width: 34px; height: 30px; border-radius: 0;
  display: grid; place-items: center; background: none; color: #fff; font-size: 17px;
  transition: transform 0.3s var(--ease); animation: none;
}
.brand-mark i { position: relative; z-index: 2; animation: boltFlicker 6s steps(1, end) infinite; }
/* branded SF mark — transparent, no tile/box */
.brand-mark::after { display: none; }
.brand-mark img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 9px rgba(var(--accent-rgb), 0.5)); }

/* ---- iOS-notification-style "What's new" banners (dashboard) ---- */
.ios-notes { display: flex; flex-direction: column; gap: 10px; }
.ios-notes.has-notes { margin-bottom: 20px; }
.ios-notes-clear { align-self: flex-end; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--muted); padding: 2px 4px; margin-bottom: -2px; }
.ios-notes-clear:hover { color: var(--text); }
.ios-note { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 3px 12px;
  align-items: start; padding: 12px 14px; border-radius: 20px;
  background: rgba(32, 32, 37, 0.72); border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5);
  animation: iosNoteIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.ios-note-ic { grid-row: 1 / 4; width: 40px; height: 40px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; background: #08080b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.ios-note-ic img { width: 100%; height: 100%; object-fit: cover; }
.ios-note-head { grid-column: 2; display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ios-note-app { font-weight: 700; }
.ios-note-time { margin-left: auto; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.4); }
.ios-note-title { grid-column: 2; font-weight: 650; font-size: 14px; color: #fff; margin-top: 2px; }
.ios-note-body { grid-column: 2; font-size: 13px; line-height: 1.38; color: rgba(255, 255, 255, 0.74); margin-top: 1px; }
.ios-note-x { position: absolute; top: 9px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center; font-size: 12px;
  background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55);
  opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; }
.ios-note:hover .ios-note-x { opacity: 1; }
.ios-note-x:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ios-note.leaving { animation: iosNoteOut 0.24s var(--ease) forwards; }
@keyframes iosNoteIn { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: none; } }
/* spatial consistency: it dropped in from the top, so it leaves back the same way
   (exits slightly faster than entry — the system responds snappier than it arrives) */
@keyframes iosNoteOut { to { opacity: 0; transform: translateY(-10px) scale(0.98); } }
/* loading-screen hero logo */
.ls-logo { display: block; width: min(360px, 68vw); height: auto;
  filter: drop-shadow(0 6px 26px rgba(var(--accent-rgb), 0.45)); }
.brand-mark::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  transform: translateX(-130%); animation: boltSheen 4.5s var(--ease) infinite;
}
.brand:hover .brand-mark { transform: scale(1.1) rotate(-8deg); }
@keyframes boltPulse { 0%, 100% { box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35); } 50% { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.65), 0 4px 24px rgba(var(--accent-rgb), 0.5); } }
@keyframes boltFlicker { 0%, 89%, 93%, 100% { opacity: 1; } 91% { opacity: 0.35; } 95% { opacity: 0.7; } }
@keyframes boltSheen { 0%, 55% { transform: translateX(-130%); } 78%, 100% { transform: translateX(130%); } }

/* ---------- gate (iPhone-style lock screen) ----------
   Structural + behavioural rules only. The lock-screen VISUALS (.lockscreen
   and .ls-* elements) are defined in the "lock screen visuals" section below. */
.gate { position: fixed; inset: 0; z-index: var(--z-gate); touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }

/* ---------- app shell ---------- */
.app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; animation: appIn 0.6s var(--spring-soft); }
@keyframes appIn { from { opacity: 0; transform: scale(0.975); } to { opacity: 1; transform: none; } }

/* iPhone unlock motion. While dragging, the lock screen tracks the finger
   (no transition). On release past threshold the WHOLE screen slides straight
   up and off the top — continuing seamlessly from the drag position — revealing
   the app behind it with a whisper of zoom. Same as the iOS swipe-up. */
.gate { transition: transform 0.72s cubic-bezier(0.32, 0.72, 0, 1); }
.gate.dragging { cursor: grabbing; }
/* iPhone unlock → home: the lock screen slides up while FADING out, and the
   home screen zooms in from slightly enlarged while fading in. */
.gate.unlocking { animation: gateUnlock 0.62s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
@keyframes gateUnlock { from { opacity: 1; } to { opacity: 0; } }
.app.unlocking { animation: appUnlock 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; transform-origin: 50% 50%; }
@keyframes appUnlock { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gate.unlocking, .app.unlocking { animation: none; } }
.topbar {
  position: relative; z-index: var(--z-topbar);
  height: 60px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(9, 9, 11, 0.6); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--edge-hi);
  /* Frameless window: the topbar IS the title bar. Draggable everywhere except its
     interactive children; right padding clears the native window-control overlay. */
  -webkit-app-region: drag;
  padding-right: 155px;
}
/* The WHOLE top bar drags the window — including brand and status pills. Only the
   things you actually operate (search field, volume slider, buttons) stay clickable. */
.topbar .topbar-search, .topbar .vol, .topbar button, .topbar input { -webkit-app-region: no-drag; }
/* update strip sits above the topbar at the very window top — keep it clear of the controls */
.update-bar { padding-right: 155px !important; }
.pills { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--muted);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  animation: pillIn 0.5s var(--spring) backwards;
}
.pill:nth-child(2) { animation-delay: 0.06s; }
.pill:nth-child(3) { animation-delay: 0.12s; }
.pill:nth-child(4) { animation-delay: 0.18s; }
.pill:nth-child(n+5) { animation-delay: 0.24s; }
@keyframes pillIn { from { opacity: 0; transform: translateY(-10px) scale(0.9); } to { opacity: 1; transform: none; } }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background var(--dur-2) var(--ease); }
.pill .pill-ic { font-size: 14px; line-height: 1; color: var(--faint); transition: color var(--dur-2) var(--ease); }
.pill .pill-ic-txt { font-size: 12px; font-weight: 900; font-style: normal; }
.pill .pill-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 999px;
  background: rgba(34, 197, 94, 0.16); color: #4ade80; line-height: 1; }
.pill .pill-tag-wait { background: rgba(251, 191, 36, 0.14); color: #fbbf24; letter-spacing: 0; padding: 2px 5px; }
.pill .pill-tag-err { background: none; color: #f87171; font-size: 13px; padding: 0; }
.pill.live { color: var(--text); }
.pill.live .dot { animation: livePulse 2.2s ease-in-out infinite; }
/* Chat connected but the channel isn't broadcasting — calm solid green, no pulse/tag. */
.pill.connected { color: var(--text); }
.pill.connected .dot { background: #34d399; }
/* live pills glow in their platform's brand colour */
.pill[data-platform="twitch"].live { border-color: rgba(145, 70, 255, 0.5); background: rgba(145, 70, 255, 0.08); }
.pill[data-platform="twitch"].live .dot { background: #9146ff; --pulse: 145, 70, 255; }
.pill[data-platform="twitch"].live .pill-ic { color: #a970ff; }
.pill[data-platform="youtube"].live { border-color: rgba(255, 0, 0, 0.45); background: rgba(255, 0, 0, 0.07); }
.pill[data-platform="youtube"].live .dot { background: #ff4444; --pulse: 255, 68, 68; }
.pill[data-platform="youtube"].live .pill-ic { color: #ff4444; }
.pill[data-platform="tiktok"].live { border-color: rgba(254, 44, 85, 0.5); background: rgba(254, 44, 85, 0.08); }
.pill[data-platform="tiktok"].live .dot { background: #fe2c55; --pulse: 254, 44, 85; }
.pill[data-platform="tiktok"].live .pill-ic { color: #fe2c55; }
.pill[data-platform="kick"].live { border-color: rgba(83, 252, 24, 0.45); background: rgba(83, 252, 24, 0.07); }
.pill[data-platform="kick"].live .dot { background: #53fc18; --pulse: 83, 252, 24; }
.pill[data-platform="kick"].live .pill-ic { color: #53fc18; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(var(--pulse, 34, 197, 94), 0.8); }
  50% { box-shadow: 0 0 12px rgba(var(--pulse, 34, 197, 94), 0.9), 0 0 20px rgba(var(--pulse, 34, 197, 94), 0.5); }
}
.pill.connecting, .pill.reconnecting { border-color: rgba(251, 191, 36, 0.35); }
.pill.connecting .dot, .pill.reconnecting .dot { background: #fbbf24; --pulse: 251, 191, 36; animation: livePulse 1.1s ease-in-out infinite; }
.pill.error { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.06); }
.pill.error .dot { background: #f87171; box-shadow: 0 0 8px #f87171; }
.pill.stub .dot { background: var(--pink-3); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.vol { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.vol .ph { font-size: 17px; }
.vol input { width: 110px; }

/* Top-bar overlay search — a pill that opens a results dropdown; click/Enter jumps to an overlay. */
.topbar-search {
  position: relative; display: flex; align-items: center; gap: 7px;
  width: 210px; max-width: 34vw; padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.topbar-search:focus-within { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.07); }
.topbar-search > i { font-size: 15px; color: var(--faint); flex: none; }
.topbar-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--text); font-size: 13px; font-family: inherit;
}
.topbar-search input::placeholder { color: var(--faint); }
.topbar-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.topbar-search-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 328px; max-width: 80vw;
  max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; z-index: 40; padding: 6px;
  background: rgba(16, 16, 22, 0.98); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), var(--edge-hi);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.topbar-search-results[hidden] { display: none; }
.tsr-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tsr-item + .tsr-item { margin-top: 1px; }
.tsr-item > i { font-size: 15px; color: rgb(var(--accent-rgb)); flex: none; }
.tsr-item .tsr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.tsr-item .tsr-cat { flex: none; font-size: 10.5px; font-weight: 600; color: var(--faint); }
.tsr-item.active, .tsr-item:hover { background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.34); color: var(--text); }
.tsr-soon { flex: none; font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 4px; color: var(--faint); border: 1px solid var(--border); text-transform: uppercase; }
.tsr-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--faint); }
/* "Recently searched" header shown when the box is focused but empty */
.tsr-head {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.tsr-head > i { font-size: 12px; }
.tsr-clear {
  margin-left: auto; border: none; background: transparent; cursor: pointer; padding: 2px 6px;
  border-radius: 6px; font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint);
}
.tsr-clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
/* result-type chip (Section / Overlay / Setting) when there's no badge */
.tsr-type { flex: none; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; color: var(--faint); background: rgba(255, 255, 255, 0.05); }
.tsr-t-section { color: #9ec5ff; background: rgba(80, 140, 255, 0.16); }
.tsr-t-overlay { color: var(--pink-3, #f9a8d4); background: rgba(var(--accent-rgb), 0.16); }
.tsr-t-setting { color: #8ff0cd; background: rgba(16, 185, 129, 0.16); }
/* flash a jumped-to heading so it's obvious where the search landed you */
.sf-jump { animation: sfJump 1.7s var(--ease); border-radius: 6px; }
@keyframes sfJump { 0% { background: rgba(var(--accent-rgb), 0.22); } 100% { background: transparent; } }
@media (max-width: 720px) { .topbar-search { width: 150px; } }

/* range inputs */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--pink-2); border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.05); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.85); }
input[type="range"]:focus-visible { outline-offset: 4px; }

/* ---------- layout ---------- */
.shell { flex: 1; min-height: 0; display: flex; }
/* grid-template-rows: minmax(0, 1fr) is LOAD-BEARING (root cause of the "can't
   scroll on some pages" bug, CDP-measured 2026-08-12): with the default implicit
   auto row, the feed column's min-content height stretched the row past .layout's
   own bounded height (223px on a quiet app, THOUSANDS of px once live chat grows),
   and .panel-col stretched with it — its bottom (content + the lower scrollbar end)
   hung invisibly below the window, and any page whose content fit inside that
   inflated height had nothing to scroll at all. minmax(0,1fr) pins the row to the
   layout's height no matter what the columns' contents want. */
.layout { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); }
.panel-col, .feed-col { min-height: 0; }
/* NOTE: scroll-behavior must stay 'auto' AND every programmatic scrollTo/scrollBy on this
   container must pass behavior:'auto' (instant). Any smooth animation here — CSS or JS —
   intermittently wheel-locks the scroller in Chromium after it gets interrupted. */
/* overscroll-behavior:contain — an edge-hit wheel gesture must never chain its latch
   to the unscrollable body (a documented Chromium wheel-death: the latch sticks and
   the wheel goes dead until the gesture debounce expires). Top-level scrollers only;
   inner lists intentionally still chain into the panel. */
/* overflow-y: SCROLL (not auto) — the track must be painted at all times so the
   failsafe drag bar is there the moment a wheel wedge hits (see the scroll failsafe
   block up top). With scrollbar-gutter:stable the layout doesn't shift either way. */
.panel-col { display: flex; flex-direction: column; min-width: 0; overflow-y: scroll; scroll-behavior: auto; overscroll-behavior: contain; }
.feed-col { border-left: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; background: rgba(9, 9, 11, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.col-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.col-head h2 { font-size: 12px; margin: 0; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); font-weight: 600; }
@media (prefers-reduced-transparency: reduce) { .feed-col { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (max-width: 1180px) { .layout { grid-template-columns: 1fr; } .feed-col { display: none; } }
/* Feed settings panel (toggled by the gear in the feed header). The compound
   .feed-settings.hidden selector outranks .feed-settings so hiding actually wins. */
.feed-settings { flex: none; display: flex; flex-direction: column; gap: 10px; margin: 12px 14px 0; padding: 12px 14px; background: rgba(127, 127, 127, 0.06); border: 1px solid var(--border); border-radius: 12px; }
.feed-settings.hidden { display: none; }
.feed-settings .fs-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.feed-settings .fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.feed-settings .fs-cur { border-top: 1px solid var(--border); padding-top: 10px; }
.feed-settings .fs-note { margin-top: 2px; }
#feedSettingsBtn.active { color: var(--pink); }

/* ---------- feed ---------- */
.feed { list-style: none; margin: 0; padding: 10px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
/* split mode — paid events (gifts/bits/donations/subs) get their own panel above the chat feed */
/* Gift/donation panel sits above the chat with a draggable SPLITTER between them, so the
   streamer sets the chat-to-gifts ratio. Its height is set by the splitter (feed.js) and the
   list scrolls inside, so it never overtakes the chat. Can also pop out into its own window. */
.feed-paid-wrap { flex: none; height: 200px; min-height: 64px; display: flex; flex-direction: column; margin: 10px 10px 0;
  border: 1px solid rgba(250, 204, 21, 0.26); border-radius: 12px; background: rgba(250, 204, 21, 0.05); overflow: hidden; }
.feed-paid-wrap.hidden { display: none; }
.feed-paid-wrap .fp-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #facc15; }
.feed-paid-wrap .fp-head i { font-size: 14px; }
.feed-paid-wrap .fp-pop { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; border-radius: 6px; border: 1px solid rgba(250, 204, 21, 0.3); background: rgba(250, 204, 21, 0.08);
  color: #facc15; cursor: pointer; padding: 0; }
.feed-paid-wrap .fp-pop:hover { background: rgba(250, 204, 21, 0.18); }
.feed-paid-wrap .fp-pop i { font-size: 13px; }
.feed-paid-wrap .feed-paid { flex: 1; min-height: 0; overflow-y: auto; padding-top: 2px; overscroll-behavior: contain; }
/* draggable splitter that sets the chat / gifts ratio */
.feed-split { flex: none; height: 12px; margin: 3px 10px 1px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; }
.feed-split.hidden { display: none; }
.feed-split::before { content: ''; width: 48px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); transition: background .15s; }
.feed-split:hover::before { background: rgba(250, 204, 21, 0.55); }
body.feed-dragging { user-select: none; cursor: ns-resize; }
/* donations-only pop-out (feed.html?only=paid): hide chat + controls, let the panel fill */
body.feed-only-paid .feed-controls, body.feed-only-paid #feed, body.feed-only-paid #viewerBar,
body.feed-only-paid #feedSplit, body.feed-only-paid .fp-pop { display: none !important; }
body.feed-only-paid .feed-paid-wrap { flex: 1; height: auto !important; margin: 10px; }
.feed-paid-wrap .feed-paid .empty-note { padding: 4px 4px 8px; font-size: 12px; color: var(--faint); list-style: none; }
.feed li {
  padding: 10px 13px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--border);
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  animation: rowin 0.5s var(--spring);
}
.feed li.evt-paid {
  background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.55); /* not colour-only: left bar marks paid events */
}
@keyframes rowin { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
.feed:empty::before {
  content: "Quiet in here… events show up live, or fire one from Simulate.";
  display: block; margin: 24px 14px; padding: 22px 16px; text-align: center;
  color: var(--faint); font-size: 12.5px; font-style: italic;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
.tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 7px; border-radius: 6px; display: inline-flex; align-items: center; }
.tag .ph { font-size: 14px; line-height: 1; }
.tag.spotify { background: rgba(30, 215, 96, 0.16); color: #1ed760; }
.tag.twitch { background: rgba(145, 70, 255, 0.22); color: #c9b4ff; }
.tag.youtube { background: rgba(255, 0, 51, 0.2); color: #ff8ea0; }
.tag.tiktok { background: rgba(37, 244, 238, 0.15); color: #8ff7f3; }
.tag.kick { background: rgba(83, 252, 24, 0.15); color: #aef98a; }
.feed .who { font-weight: 700; }
.feed .txt { color: var(--text); }
.chat-emote { height: 1.4em; width: auto; vertical-align: -0.3em; margin: 0 1px; }
.feed .meta { color: var(--muted); }

/* ---------- platform logo: real brand mark in a brand-coloured circle ---------- */
.plogo {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.plogo svg { width: 13px; height: 13px; display: block; }
.plogo-txt { font-size: 14px; font-weight: 800; line-height: 1; }
.plogo-other { background: var(--bg-2); color: var(--muted); font-size: 8.5px; font-weight: 700; text-transform: uppercase; }
.feed-popout[data-feed-style="compact"] .plogo,
.feed-popout[data-feed-style="chat"] .plogo,
.feed-popout[data-feed-style="minimal"] .plogo { width: 18px; height: 18px; }
.feed-popout[data-feed-style="compact"] .plogo svg,
.feed-popout[data-feed-style="chat"] .plogo svg,
.feed-popout[data-feed-style="minimal"] .plogo svg { width: 11px; height: 11px; }
.feed-popout[data-feed-style="bold"] .plogo { width: 26px; height: 26px; }
.feed-popout[data-feed-style="bold"] .plogo svg { width: 15px; height: 15px; }

/* ---------- chat avatars (profile photos) ---------- */
.cav {
  flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1; text-transform: uppercase;
  user-select: none; align-self: center;
}
.cav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cav-fb { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.14); }

/* ---------- chat role / level badges ---------- */
.feed .badges { display: inline-flex; align-items: center; gap: 3px; }
.feed .badges:empty { display: none; }
.cbadge {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  height: 17px; min-width: 17px; padding: 0 4px; border-radius: 5px;
  font-size: 10px; font-weight: 800; line-height: 1; color: #fff;
  justify-content: center;
}
.cbadge .ph { font-size: 12px; line-height: 1; }
/* real platform badge art (TikTok gifter/grade + top-gifter, Twitch mod/VIP/sub) */
.cbadge-img { background: none; border: 0; padding: 0; height: 18px; min-width: 0; gap: 3px; }
.cbadge-img img { height: 18px; width: auto; display: block; border-radius: 3px; }
.cbadge-lvl { font-size: 10.5px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; padding-right: 1px; }
/* default chip colours (fallback / Simulate) */
.cb-host { background: linear-gradient(135deg, #f59e0b, #f43f5e); }
.cb-mod { background: #2bb673; }
.cb-vip { background: #e0489b; }
.cb-gift { background: linear-gradient(135deg, #f43f5e, #f59e0b); }
.cb-sub { background: #7a5cff; }
.cb-member { background: #7a5cff; }
.cb-og { background: #14b8a6; }
.cb-verify { background: #1d9bf0; }
.cb-level { background: rgba(255, 255, 255, 0.1); color: var(--text); border: 1px solid var(--border-strong); }
/* chips tinted to each platform's REAL badge colours */
.pf-twitch.cb-host { background: #e91916; }
.pf-twitch.cb-mod { background: #00ad03; }
.pf-twitch.cb-vip { background: #e005b9; }
.pf-twitch.cb-sub, .pf-twitch.cb-member { background: #6441a5; }
.pf-twitch.cb-verify { background: #9147ff; }
.pf-youtube.cb-host { background: #ffb300; color: #1a1a1a; }
.pf-youtube.cb-mod { background: #5f84f1; }
.pf-youtube.cb-sub, .pf-youtube.cb-member { background: #2ba640; }
.pf-youtube.cb-verify { background: #717171; }
.pf-kick.cbadge { background: #53fc18; color: #0b2b06; }
.pf-tiktok.cb-mod { background: #25f4ee; color: #013b39; }
.pf-tiktok.cb-verify { background: #20a4f3; }
.pf-tiktok.cb-gift { background: #fe2c55; }
.feed .money { color: var(--pink-4); font-weight: 600; font-family: var(--mono); font-size: 12.5px; }
.feed .snd { color: var(--pink-3); font-size: 12px; margin-left: auto; }
.feed .sim { color: var(--faint); font-size: 11px; }

/* ---------- tabs ---------- */
.tabs { flex: none; display: flex; border-bottom: 1px solid var(--border); padding: 0 6px; }
.tab { flex: 1; background: none; border: none; color: var(--muted); padding: 13px 8px; cursor: pointer; font-size: 12.5px; font-family: inherit; border-bottom: 2px solid transparent; transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--pink); }

/* iOS segmented control — the sound-picker sub-tabs */
.modal-card nav.tabs.sub {
  display: flex; gap: 4px; margin: 14px 18px 2px; padding: 4px;
  border: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-radius: 13px; background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--edge-hi);
}

/* vertical left nav rail — grouped rows + a sliding accent pill on the active item */
.sidenav {
  position: relative;
  flex: none; width: 176px; flex-direction: column; gap: 2px; padding: 12px 10px 16px;
  border-bottom: none; border-right: 1px solid var(--border);
  background: rgba(9, 9, 11, 0.4); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  overflow-y: auto; overscroll-behavior: contain;
}
.sidenav::-webkit-scrollbar { width: 0; }
/* group headers split the long list into scannable clusters */
.nav-sec {
  flex: none; margin: 14px 8px 4px; font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint);
  animation: navItemIn 0.5s var(--ease) backwards;
}
.nav-sec:first-child { margin-top: 2px; }
/* the pill that GLIDES to the active row (positioned from JS via offsetTop) */
.nav-glider {
  position: absolute; left: 10px; right: 10px; top: 0; height: 0; z-index: 0;
  border-radius: 11px; opacity: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.6));
  box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  /* nav switches are constant — the glide confirms, it doesn't perform (and a CSS
     transition retargets mid-flight, so rapid tab-hopping stays fluid) */
  transition: top 0.32s var(--spring-snap), height 0.22s var(--ease), opacity var(--dur-2) var(--ease);
}
.sidenav .tab {
  position: relative; z-index: 1;
  flex: none; display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 9px 10px; border: none; border-radius: 11px;
  font-size: 12px; font-weight: 500; text-align: left; line-height: 1.2;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
              transform var(--dur-2) var(--spring-snap);
  /* nav populate: each item springs in from the left, staggered (delays set from JS) */
  animation: navItemIn 0.55s var(--spring) backwards;
}
@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-22px) scale(0.94); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.sidenav .tab i { flex: none; width: 21px; font-size: 18px; text-align: center;
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--spring-snap); }
.sidenav .tab span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidenav .tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); transform: translateX(2px); }
.sidenav .tab:hover i { transform: scale(1.1); }
.sidenav .tab:active { transform: scale(0.97); transition-duration: 0.09s; }
/* accent notch on the rail edge doubles down on the active marker */
.sidenav .tab::before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 3px; height: 0;
  border-radius: 0 3px 3px 0; background: rgb(var(--accent-rgb));
  transform: translateY(-50%);
  transition: height 0.42s var(--spring), opacity var(--dur-2) var(--ease);
  opacity: 0;
}
.sidenav .tab.active::before { height: 22px; opacity: 1; box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7); }
.sidenav .tab.active i { animation: notchPop 0.45s var(--spring); }
@keyframes notchPop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* active row rides ON the glider: white text on the accent pill, no bg of its own
   (the .no-glider fallback below covers environments where app.js never booted) */
.sidenav .tab.active {
  color: #fff; font-weight: 700; background: none; transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.sidenav .tab.active i { color: #fff; transform: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.sidenav.no-glider .tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.6));
  box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
@media (prefers-reduced-transparency: reduce) { .sidenav { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.stab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none; color: var(--muted); padding: 8px 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: 9px;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--spring-soft),
              box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--spring-snap);
}
.stab .ph { font-size: 15px; }
.stab:hover { color: var(--text); }
.stab:active { transform: scale(0.95); }
.stab.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(var(--accent-rgb), 0.35);
  animation: segPop 0.34s var(--spring);
}
@keyframes segPop { 0% { transform: scale(0.92); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Pane switching is the most frequent action in the app (tens of times a day) —
   motion here must be near-instant confirmation, not a performance. Short strong
   ease-out, small offset, no scale. */
.tabpane { display: none; padding: 44px 48px 72px; max-width: 1100px; margin: 0 auto; width: 100%; animation: paneIn 0.26s var(--ease); }
.tabpane.active { display: block; }
.stabpane { display: none; padding: 16px; animation: paneIn 0.2s var(--ease); }
.stabpane.active { display: block; }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tabpane h3, .pane-head h3 { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.tabpane > h3 + p.muted, .tabpane > p.muted.small { margin-bottom: 8px; max-width: 64ch; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.sub-h { display: flex; align-items: center; gap: 8px; margin: 30px 0 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.sub-h::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: rgba(var(--accent-rgb), 0.6); flex: none; }

/* entrance stagger — card grids cascade in when a pane opens / a list renders */
.stat, .rule-item, .sound-item, .conn-card, .overlay-card, .feat-card,
.au-card, .persona-card, .plat-row, .tts-panel, .au-panel, .sub-panel {
  animation: cardIn 0.55s var(--spring-soft) backwards;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.stat:nth-child(2), .rule-item:nth-child(2), .sound-item:nth-child(2), .conn-card:nth-child(2),
.overlay-card:nth-child(2), .feat-card:nth-child(2), .au-card:nth-child(2), .persona-card:nth-child(2),
.plat-row:nth-child(2), .tts-panel:nth-child(2), .au-panel:nth-child(2), .sub-panel:nth-child(2) { animation-delay: 0.045s; }
.stat:nth-child(3), .rule-item:nth-child(3), .sound-item:nth-child(3), .conn-card:nth-child(3),
.overlay-card:nth-child(3), .feat-card:nth-child(3), .au-card:nth-child(3), .persona-card:nth-child(3),
.plat-row:nth-child(3), .sub-panel:nth-child(3) { animation-delay: 0.09s; }
.stat:nth-child(4), .rule-item:nth-child(4), .sound-item:nth-child(4), .conn-card:nth-child(4),
.overlay-card:nth-child(4), .feat-card:nth-child(4), .au-card:nth-child(4), .persona-card:nth-child(4),
.plat-row:nth-child(4) { animation-delay: 0.135s; }
.rule-item:nth-child(5), .sound-item:nth-child(5), .feat-card:nth-child(5), .au-card:nth-child(5),
.persona-card:nth-child(5) { animation-delay: 0.18s; }
.rule-item:nth-child(6), .sound-item:nth-child(6), .feat-card:nth-child(6), .au-card:nth-child(6),
.persona-card:nth-child(6) { animation-delay: 0.225s; }
.rule-item:nth-child(n+7), .sound-item:nth-child(n+7), .feat-card:nth-child(n+7),
.persona-card:nth-child(n+7) { animation-delay: 0.26s; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 13px; margin: 16px 0; }
.tabpane .form, .tabpane .quick { max-width: 680px; }
.tabpane #fireSim, .tabpane #saveSettings { max-width: 680px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.checks label {
  flex-direction: row; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border);
  padding: 7px 11px; border-radius: var(--r-md); color: var(--text); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.checks label:hover { border-color: var(--border-strong); background: var(--card-2); }
.checks input { width: auto; accent-color: var(--pink); }

/* ---------- dashboard ---------- */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.dash-hero-main { min-width: 0; }
.dash-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.dash-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dash-live-dot.on { background: #34d399; animation: dashPulse 2s var(--ease) infinite; }
@keyframes dashPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
.dash-title { margin: 10px 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.dash-sub { margin: 0; color: var(--muted); font-size: 13.5px; }
.dash-hero-side { display: flex; align-items: center; gap: 16px; }
.dash-timer { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.dash-timer-n { font-family: var(--mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dash-timer-l { margin-top: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.dash-empty { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; padding: 18px 16px; color: var(--muted); font-size: 13px; background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.dash-empty i { font-size: 18px; color: var(--faint); flex: none; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4px; }
.stat {
  position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.stat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--edge-hi); }
.stat::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12), transparent 70%);
  opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none;
}
.stat:hover { border-color: rgba(var(--accent-rgb), 0.25); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.stat:hover::after { opacity: 1; }
.stat-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px; font-size: 18px; color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); }
.stat-primary { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.03)); border-color: rgba(var(--accent-rgb), 0.28); }
.stat-primary .stat-ic { color: #fff; background: rgba(var(--accent-rgb), 0.22); border-color: rgba(var(--accent-rgb), 0.4); }
.stat .n { font-size: 30px; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .n.money, .stat-primary .n { color: var(--pink-4); }
.stat .l { font-size: 10.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 5px; }
.plat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plat-row { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; font-size: 13px; transition: border-color var(--dur-2) var(--ease); }
.plat-row:hover { border-color: var(--border-strong); }
.plat-row .grow { flex: 1; color: var(--muted); }
.plat-row .money { color: var(--pink-4); font-family: var(--mono); }

/* ============ Revenue source breakdown ============ */
.rev { display: flex; flex-direction: column; gap: 15px; margin-top: 4px; }
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rev-head .sub-h { margin: 0; }
.rev-sub { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.rev-total { text-align: right; flex: none; }
.rev-total-n { display: block; font-family: var(--mono); font-size: 23px; font-weight: 700; color: var(--pink-4);
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1.05; }
.rev-total-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--faint); }

/* live cumulative earnings sparkline */
.rev-graph-wrap { position: relative; height: 76px; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--border); }
.rev-graph { width: 100%; height: 100%; display: block; }
.rev-graph-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; color: var(--faint); }

/* stacked balance bar */
.rev-bar { position: relative; display: flex; height: 32px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); box-shadow: var(--edge-hi), inset 0 0 0 1px var(--border); isolation: isolate; }
.rev-seg { position: relative; height: 100%; min-width: 0; cursor: pointer; background: var(--seg);
  transition: width 0.9s var(--ease), filter var(--dur-2) var(--ease), transform var(--dur-2) var(--spring-soft); transform-origin: center; }
.rev-seg + .rev-seg { box-shadow: inset 1.5px 0 0 rgba(9, 9, 11, 0.35); }
.rev-seg:hover { filter: brightness(1.16) saturate(1.08); box-shadow: 0 0 20px 3px var(--seg-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.28); transform: scaleY(1.14); z-index: 2; }
.rev-seg.sel { box-shadow: 0 0 22px 4px var(--seg-glow), inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); z-index: 3; }
.rev-bar.has-sel .rev-seg:not(.sel) { filter: grayscale(0.55) brightness(0.55); }
.rev-seg-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  white-space: nowrap; overflow: hidden; opacity: 0; transition: opacity var(--dur-2); pointer-events: none; }
.rev-seg[data-wide="1"] .rev-seg-label { opacity: 0.96; }

/* hover tooltip (fixed-positioned, follows the cursor) */
.rev-tip { position: fixed; z-index: 120; min-width: 186px; padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(17, 17, 21, 0.97); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  backdrop-filter: blur(12px); pointer-events: none; font-size: 12px; transform: translate(-50%, -100%); }
.rev-tip[hidden] { display: none; }
.rev-tip-h { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.rev-tip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--seg); box-shadow: 0 0 8px var(--seg); }
.rev-tip-big { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--pink-4); margin: 2px 0 8px; }
.rev-tip-row { display: flex; justify-content: space-between; gap: 18px; padding: 2.5px 0; color: var(--muted); }
.rev-tip-row b { color: var(--text); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.rev-up { color: #34d399; } .rev-down { color: #fb7185; }

/* breakdown table */
.rev-table { display: flex; flex-direction: column; gap: 3px; }
.rev-tr { display: grid; grid-template-columns: 12px 104px 1fr 78px 40px 60px; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.rev-tr:hover { background: var(--card); border-color: var(--border); }
.rev-tr.sel { background: rgba(var(--accent-rgb), 0.09); border-color: rgba(var(--accent-rgb), 0.32); }
.rev-tr-dot { width: 11px; height: 11px; border-radius: 3.5px; background: var(--seg); box-shadow: 0 0 9px var(--seg-glow); }
.rev-tr-name { display: flex; align-items: center; gap: 8px; font-weight: 600; text-transform: capitalize; font-size: 13px; white-space: nowrap; }
.rev-tr-name i { color: var(--seg); font-size: 16px; }
.rev-tr-barwrap { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rev-tr-bar { display: block; height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, var(--seg), var(--seg-glow)); transition: width 0.9s var(--ease); }
.rev-tr-money { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--pink-4); font-variant-numeric: tabular-nums; }
.rev-tr-pct { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rev-tr-trend { text-align: right; font-family: var(--mono); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .rev-tr { grid-template-columns: 12px 1fr 70px 38px 54px; gap: 8px; }
  .rev-tr-barwrap { display: none; }
}
.dash-board { list-style: none; margin: 0; padding: 0; counter-reset: d; }
.dash-board li { display: flex; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); animation: rowin 0.35s var(--ease) backwards; }
.dash-board li:nth-child(2) { animation-delay: 0.04s; }
.dash-board li:nth-child(3) { animation-delay: 0.08s; }
.dash-board li:nth-child(n+4) { animation-delay: 0.12s; }
.dash-board li::before { counter-increment: d; content: counter(d); width: 21px; height: 21px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--muted); flex: none; }
.dash-board li:nth-child(1)::before { background: var(--pink-grad); color: #fff; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
.dash-board .name { flex: 1; }
.dash-board .score { color: var(--pink-4); font-weight: 600; font-family: var(--mono); }

/* ---------- friends & leagues ---------- */
.friends-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; }
.fr-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--edge-hi); }
.founders-feed-card { margin-top: 10px; }
.ff-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
  background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .3); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.ff-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; font-size: 13px; }
.ff-share { display: flex; flex-direction: column; gap: 8px; }
.ff-share textarea, .ff-share input { width: 100%; box-sizing: border-box; font: inherit; }
.ff-share textarea { resize: vertical; min-height: 46px; }
.ff-share-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.founders-feed-card.ff-locked .ff-share, .founders-feed-card.ff-locked .ff-toggle { opacity: .5; }
.fr-prof-head { display: flex; align-items: center; gap: 14px; }
.fr-avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 26px; color: #fff; background: var(--pink-grad); box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); overflow: hidden; }
.fr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fr-prof-id { min-width: 0; flex: 1; }
.fr-name-input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 11px; color: var(--text); font-size: 16px; font-weight: 600; }
.fr-name-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); box-shadow: var(--focus-ring); }
.fr-prof-sub { display: block; margin-top: 5px; }
.fr-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.fr-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.fr-stat-ic { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; font-size: 15px; color: var(--pink-4); background: rgba(var(--accent-rgb), 0.12); margin-bottom: 8px; }
.fr-stat-n { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fr-stat-l { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-top: 3px; }
.fr-priv-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 8px; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; gap: 2px; width: 100%; }
.seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.seg-btn:active { transform: scale(0.96); transition-duration: 0.08s; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--pink-grad); color: #fff; box-shadow: 0 2px 8px -2px rgba(var(--accent-rgb), 0.5); }
#frPrivacyHint { margin-top: 10px; }
#frResetSeason { margin-top: 6px; }
.fr-create, .fr-join { display: flex; gap: 8px; margin-bottom: 10px; }
.fr-create input, .fr-join input, .fr-create select { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 11px; color: var(--text); font-size: 13px; }
.fr-create input { flex: 1; min-width: 0; }
.fr-join input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--mono); }
.fr-create input:focus, .fr-join input:focus, .fr-create select:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); box-shadow: var(--focus-ring); }
.fr-league-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.fr-league { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.fr-league-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.fr-league-name { font-weight: 700; font-size: 15px; }
.fr-league-meta { margin-top: 2px; }
.fr-league-code { display: flex; align-items: center; gap: 6px; flex: none; }
.fr-league-code code { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--pink-4); background: rgba(var(--accent-rgb), 0.1); padding: 3px 8px; border-radius: 7px; }
.fr-standings { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; }
.fr-row.me { background: rgba(var(--accent-rgb), 0.08); }
.fr-rank { width: 20px; text-align: center; font-weight: 700; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.fr-row:first-child .fr-rank { color: #ffd166; }
.fr-mav { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--bg-3); display: inline-grid; place-items: center; color: var(--muted); font-size: 14px; overflow: hidden; }
.fr-mname { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pink-4); background: rgba(var(--accent-rgb), 0.14); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.fr-mval { font-family: var(--mono); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); flex: none; }
@media (max-width: 900px) { .friends-grid { grid-template-columns: 1fr; } }

/* ---------- cards (automations / connections / overlays) ---------- */
.rule-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.rule-item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px;
  box-shadow: var(--edge-hi);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.rule-item:hover { border-color: rgba(var(--accent-rgb), 0.28); box-shadow: var(--shadow-2), 0 0 34px rgba(var(--accent-rgb), 0.12); transform: translateY(-2px); }
.rule-top { display: flex; align-items: center; gap: 11px; }
.rule-name { font-weight: 700; flex: 1; letter-spacing: -0.01em; }
.rule-summary { color: var(--muted); font-size: 12.5px; margin-top: 7px; line-height: 1.5; }
.rule-actions { display: flex; gap: 7px; margin-top: 12px; }

/* shared empty state — a composed invitation, not a shrug */
.empty {
  color: var(--muted); font-style: normal; font-size: 13px; line-height: 1.55;
  padding: 26px 20px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.015);
  grid-column: 1 / -1;
  animation: cardIn 0.4s var(--ease) backwards;
}

/* soundboard rows */
.sound-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sound-item {
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 13px;
  box-shadow: var(--edge-hi);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.sound-item:hover { border-color: rgba(var(--accent-rgb), 0.28); background: var(--card-2); }
.sound-item .s-kind { flex: 0 0 172px; width: 172px; }
.sound-item .s-param { flex: 0 0 120px; width: 120px; }
.s-range { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.s-range input { width: 62px; text-align: center; font-size: 13px; padding-left: 6px; padding-right: 6px; -moz-appearance: textfield; appearance: textfield; }
/* hide the number spinners so the typed value is fully readable in the narrow field */
.s-range input::-webkit-outer-spin-button, .s-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.s-range input::placeholder { color: var(--faint); }
.s-range .s-range-dash { color: var(--muted); font-size: 13px; }
.sound-item .s-gift { flex: 0 0 138px; width: 138px; }
.sound-item .s-gift-custom { flex: 0 0 120px; width: 120px; }
.sound-item .s-pick { flex: 1; min-width: 0; justify-content: flex-start; overflow: hidden; }
.sound-item .s-pick .s-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-item .s-vol { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.sound-item .s-vol input[type=range] { width: 78px; }
.sound-item .s-prev, .sound-item .s-del { flex: none; }
.sound-item .s-hk { flex: 0 0 128px; width: 128px; font-family: var(--mono, monospace); font-size: 11px; }
.sound-item .gf-gift { flex: 0 0 150px; width: 150px; }
.sound-item .gf-pick { flex: 1; min-width: 0; justify-content: flex-start; overflow: hidden; }
.sound-item .gf-pick .gf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-item .gf-official { flex: 0 0 auto; white-space: nowrap; }
.sound-item .gf-official.active { border-color: rgba(var(--sf-accent-rgb, 249, 2, 91), .65); color: var(--accent, #f9025b); box-shadow: 0 0 12px -4px rgba(var(--sf-accent-rgb, 249, 2, 91), .6); }
.sound-item .gf-official[disabled] { opacity: .4; cursor: not-allowed; }
.btn.danger { border-color: rgba(240, 82, 82, .6); color: #ff6b6b; box-shadow: 0 0 12px -4px rgba(240, 82, 82, .55); }
.oc-board { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--sf-hairline, rgba(255,255,255,.08)); }
.oc-board:first-of-type { border-top: none; margin-top: 6px; }

/* Founder stream profiles */
.sp-sections-head { margin: 4px 0 2px; }
.sp-sections { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 6px; }
.sp-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.sp-import { margin: 12px 0; }
.sp-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(127,127,127,.08); }
.sp-item.on { background: rgba(var(--sf-accent-rgb, 249,2,91), .12); box-shadow: inset 0 0 0 1px rgba(var(--sf-accent-rgb, 249,2,91), .4); }
.sp-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; }
.sp-toggle input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent, #f9025b); }
.sp-item-main { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sp-code { font-family: var(--sf-font-mono, monospace); font-size: 12px; letter-spacing: .06em; color: var(--accent, #f9025b); background: rgba(127,127,127,.12); padding: 1px 7px; border-radius: 6px; }
.sp-item-actions { display: flex; gap: 3px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.sp-item-actions .btn { padding: 4px 7px; }
.sp-item-actions .btn.on { color: var(--accent, #f9025b); }
.sp-gallery { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sp-gal-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(127,127,127,.06); border: 1px solid var(--sf-hairline, rgba(255,255,255,.07)); }

/* What's new / patch notes */
.wn-link { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--accent, #f9025b); font: inherit; position: relative; }
.wn-link:hover { text-decoration: underline; }
.wn-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #f9025b); margin-left: 5px; vertical-align: middle; box-shadow: 0 0 6px rgba(249,2,91,.7); }
.wn-dot.hidden { display: none; }
.patch-body { max-height: 60vh; }
.patch-rel { padding: 4px 0 12px; border-bottom: 1px solid var(--border); }
.patch-rel:last-child { border-bottom: none; }
.patch-rel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.patch-ver { font-family: var(--sf-font-mono, monospace); font-weight: 700; color: var(--accent, #f9025b); background: rgba(249,2,91,.12); padding: 2px 8px; border-radius: 6px; font-size: 13px; }
.patch-title { font-weight: 600; }
.patch-date { margin-left: auto; }
.patch-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.patch-list li { font-size: 13.5px; line-height: 1.45; }

/* ---- Analytics hub ---- */
.ana-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.ana-tile { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 14px; background: var(--sf-panel, rgba(127,127,127,.08)); border: 1px solid var(--sf-hairline, rgba(255,255,255,.07)); }
.ana-tile > i { font-size: 22px; color: var(--accent, #f9025b); flex: none; }
.ana-tile-val { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ana-tile-lbl { font-size: 11px; color: var(--sf-ink-dim, #9a9aa5); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.ana-card { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--sf-panel, rgba(127,127,127,.06)); border: 1px solid var(--sf-hairline, rgba(255,255,255,.07)); }
.ana-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ana-card-head h4 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.ana-card-head h4 i { color: var(--accent, #f9025b); }
.ana-range { display: flex; gap: 4px; }
.ana-range .btn.active { color: var(--accent, #f9025b); border-color: rgba(var(--sf-accent-rgb, 249,2,91), .5); }
.ana-graph { width: 100%; height: 130px; display: block; }

.ana-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.ana-hsq { width: 11px; height: 11px; border-radius: 3px; background: rgba(var(--sf-accent-rgb, 249,2,91), .07); }
.ana-hsq.pad { background: transparent; }
.ana-hsq.i0 { background: rgba(255,255,255,.05); }
.ana-hsq.i1 { background: rgba(var(--sf-accent-rgb, 249,2,91), .28); }
.ana-hsq.i2 { background: rgba(var(--sf-accent-rgb, 249,2,91), .5); }
.ana-hsq.i3 { background: rgba(var(--sf-accent-rgb, 249,2,91), .72); }
.ana-hsq.i4 { background: rgba(var(--sf-accent-rgb, 249,2,91), .95); }
.ana-legend { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.ana-legend .ana-hsq { width: 11px; height: 11px; }
.ana-legend-note { margin-left: 6px; }

.ana-best-window { margin-bottom: 10px; }
.ana-best-window i { color: #ffd75e; }
.ana-best-grid { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.ana-bg-row { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 2px; align-items: center; min-width: 460px; }
.ana-bg-lbl { font-size: 10px; color: var(--sf-ink-dim, #9a9aa5); text-align: right; padding-right: 4px; }
.ana-bg-h { font-size: 9px; color: var(--sf-ink-dim, #9a9aa5); text-align: center; }
.ana-bg-c { height: 15px; border-radius: 3px; background: rgba(var(--sf-accent-rgb, 249,2,91), var(--a, 0)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }

.ana-platforms { display: flex; flex-direction: column; gap: 8px; }
.ana-plat { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; }
.ana-plat-name { font-weight: 600; text-transform: capitalize; }
.ana-plat-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ana-plat-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent, #f9025b), var(--accent-2, #ff7ab8)); }
.ana-plat-val { font-size: 12px; color: var(--sf-ink-dim, #9a9aa5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ana-foot { margin-top: 4px; }
.ana-foot i { color: var(--accent, #f9025b); }
.sound-item .gf-mode { flex: 0 0 130px; width: 130px; }
.sound-item .gf-test { flex: none; }
#giftFxCount { transition: color 0.2s var(--ease); }
#giftFxCount.gf-bump { color: rgb(var(--accent-rgb)); animation: gfbump 0.5s var(--spring); }
@keyframes gfbump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* troll tab */
.troll-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; }
.troll-presets .tp-lbl { margin-right: 2px; }
.troll-screen-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin: 14px 0 10px; box-shadow: var(--edge-hi); }
.troll-screen-row .tsr-title { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.troll-screen-row .tsr-title .ph { color: rgb(var(--accent-rgb)); font-size: 17px; }
.troll-obs { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; margin: 4px 0 4px; }
.troll-obs .muted { flex: none; }
.troll-obs input { flex: 1; min-width: 0; font-family: var(--mono, monospace); font-size: 12px; }
.troll-obs .btn { flex: none; }
/* Troll rows are all fixed-width cells (no flexible one to absorb shrink), so in a
   non-maximized window they overflowed the card — controls slid past the border and
   the trailing ×combo/test/delete became unreachable. Let the row wrap instead. */
.troll-item { flex-wrap: wrap; row-gap: 8px; }
.troll-item .t-eff { flex: 0 0 190px; width: 190px; }
.troll-item .t-dur { flex: 0 0 62px; width: 62px; }
.troll-item .s-param { flex: 0 0 108px; width: 108px; }
.troll-item .s-gift { flex: 0 0 128px; width: 128px; }
.troll-item .s-gift-custom { flex: 0 0 108px; width: 108px; }
.troll-item .t-keys { flex: 0 0 150px; width: 150px; font-family: var(--mono, monospace); font-size: 12px; }
.troll-item .t-rep-l { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.troll-item .t-rep { flex: none; width: 52px; }
.troll-item .t-test { flex: none; }
.troll-item .t-combo-l { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.troll-item .t-combo { accent-color: var(--pink); }

/* subathon / giftathon */
.sub-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; margin-top: 14px; align-items: start; }
@media (max-width: 900px) { .sub-grid { grid-template-columns: 1fr; } }
.sub-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--edge-hi); }
.sub-clock-panel { text-align: center; }
.sub-clock { font-size: 58px; font-weight: 800; font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; transition: color 0.3s var(--ease); }
.sub-clock.low { color: #ff5470; animation: clockUrgent 1s ease-in-out infinite; }
@keyframes clockUrgent { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.sub-state { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color var(--dur-2) var(--ease); }
.sub-state.live { color: #53fc18; }
.sub-controls { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.sub-adjust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sub-url { margin-top: 16px; }
.sub-rules { display: flex; flex-direction: column; gap: 8px; }
.sub-rule { display: flex; align-items: center; gap: 10px; }
.sub-rule .sr-label { flex: 0 0 120px; font-weight: 600; }
.sub-rule .sr-secs { flex: 0 0 72px; width: 72px; }
.sub-rule .sr-unit { flex: none; white-space: nowrap; }
.sub-rule .sr-per { flex: 0 0 118px; width: 118px; }
.sub-rule .sr-hint { flex: 1; text-align: right; }
/* tiered sub row: T1/T2/T3 boxes all on ONE row — everything compacts to fit */
.sub-rule.sr-tiered { gap: 6px; }
.sub-rule.sr-tiered .sr-label { flex-basis: 92px; }
.sub-rule.sr-tiered .sr-secs,
.sub-rule.sr-tiered .sr-secs2,
.sub-rule.sr-tiered .sr-secs3 { flex: 0 0 58px; width: 58px; min-width: 58px; padding-left: 6px; padding-right: 2px; }
.sub-rule.sr-tiered .sr-per { flex: 0 0 100px; width: 100px; }
.sub-rule.sr-tiered .sr-hint { display: none; } /* the tier titles carry the unit info */

/* linked subathons */
.sub-link { grid-column: 1 / -1; margin-top: 26px; padding: 22px; }
.link-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pill-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.pill-badge.on { color: #53fc18; border-color: rgba(83,252,24,.4); }
.link-body { margin-top: 12px; }
.link-body.hidden { display: none; }
.link-name { display: block; max-width: 320px; margin-bottom: 12px; }
.link-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-or { color: var(--faint); font-size: 12px; }
.link-code-in { width: 150px; text-transform: uppercase; letter-spacing: .18em; font-family: var(--mono, monospace); font-weight: 700; }
.link-invite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-code { font-family: var(--mono, monospace); font-size: 20px; font-weight: 800; letter-spacing: .24em; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 5px 14px; }
.link-leave { margin-left: auto; }
.link-members { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.link-member { display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; animation: rowin 0.35s var(--ease) backwards; }
.link-member .ph-user-circle { font-size: 20px; color: var(--muted); }
.link-member .lm-name { font-weight: 600; }
.link-member .lm-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; }
.link-member .lm-tag.host { background: rgba(var(--accent-rgb), .16); color: rgb(var(--accent-rgb)); }
.link-member .lm-tag.you { background: rgba(255,255,255,.08); color: var(--muted); }
.link-member .lm-remove { margin-left: auto; }
.link-msg { margin-top: 10px; font-size: 12.5px; color: var(--muted); min-height: 16px; }
.link-msg.err { color: #ff6b81; }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.14); border-radius: 999px; cursor: pointer; pointer-events: none; transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.slider::before {
  content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-2) var(--ease), width var(--dur-1) var(--ease);
}
.switch input:checked + .slider { background: var(--pink-grad); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35); }
.switch input:checked + .slider::before { transform: translateX(17px); }
/* squish while held — feels physical */
.switch input:active + .slider::before { width: 21px; }
.switch input:active:checked + .slider::before { transform: translateX(13px); }
.switch input:focus-visible + .slider { box-shadow: var(--focus-ring); }

.conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.conn-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px;
  box-shadow: var(--edge-hi);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.conn-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), 0.22); box-shadow: var(--shadow-1); }
.conn-head { display: flex; align-items: center; gap: 9px; font-weight: 700; margin-bottom: 11px; }
.conn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn-status { margin-top: 10px; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.twitch { background: var(--twitch); box-shadow: 0 0 8px rgba(145, 70, 255, 0.5); }
.dot.youtube { background: var(--youtube); box-shadow: 0 0 8px rgba(255, 0, 51, 0.5); }
.dot.tiktok { background: var(--tiktok); box-shadow: 0 0 8px rgba(37, 244, 238, 0.5); }
.dot.kick { background: var(--kick); box-shadow: 0 0 8px rgba(83, 252, 24, 0.5); }
.badge { font-size: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--muted); padding: 2px 7px; border-radius: 999px; }
.device-code { margin-top: 11px; background: var(--bg); border: 1px dashed var(--pink); border-radius: var(--r-md); padding: 12px; font-size: 13px; animation: cardIn 0.35s var(--ease); }
.device-code b { font-size: 20px; letter-spacing: 3px; color: var(--pink-4); font-family: var(--mono); }

/* ---------- overlays tab ---------- */
.overlay-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 4px; }
.overlay-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px;
  box-shadow: var(--edge-hi);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.overlay-card:hover { border-color: rgba(var(--accent-rgb), 0.22); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.overlay-card .oc-head { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.overlay-card .url-row { display: flex; gap: 7px; }
.overlay-card .url-row input { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.overlay-card .oc-config { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.overlay-card .oc-config label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); }
/* a toggle setting reads like an iOS settings row: label left, switch right */
.overlay-card .oc-config label:has(.switch) { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
/* entrance: role multi-select spans both config columns */
.overlay-card .oc-roles { grid-column: 1 / -1; }
/* full-width config elements: explanatory paragraphs and anything tagged .oc-span
   (e.g. the Gift Menu item rows — squeezed into one grid column, their caption box
   collapsed to a few px and typed text was unreadable) */
.overlay-card .oc-config p, .overlay-card .oc-config .oc-span { grid-column: 1 / -1; }
.overlay-card .oc-roles-h { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.overlay-card .oc-roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
.overlay-card .oc-role { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 11.5px; color: var(--text); cursor: pointer; }
.overlay-card .oc-role input[type="checkbox"] { width: 18px; height: 18px; }
.overlay-card .oc-style { margin-top: 12px; }
.overlay-card .oc-style label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); }

/* overlay video export — live progress (encoder download %, then recording %) */
.oc-export-prog { margin-top: 9px; }
.oc-export-note { font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.oc-export-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.oc-export-fill { height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), .55));
  transition: width .25s ease; }
.oc-export-fill.indet { width: 34%; transition: none; animation: ocExportIndet 1.15s ease-in-out infinite alternate; }
@keyframes ocExportIndet { from { margin-left: -8%; } to { margin-left: 74%; } }

/* appearance customizer (accent / outline / glow / radius) */
.oc-fx { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.fx-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.fx-head-sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fx-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); }
.fx-field b { color: var(--text); font-variant-numeric: tabular-nums; }
.fx-field input[type="number"] { width: 100%; }
.fx-field input[type="range"] { width: 100%; accent-color: var(--pink); }
.fx-colorfield .fx-color { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.fx-color input[type="color"] { width: 46px; height: 30px; border-radius: 10px; flex: none; }
.fx-reset { margin-top: 10px; }

/* ---------- integrations (Key Light + Stream Deck) ---------- */
.integ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 8px; }
.integ-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 16px 18px; }
.integ-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.integ-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.integ-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; }
.integ-ic.kl { background: linear-gradient(135deg, #f5b301, #ff6a00); }
.integ-ic.sd { background: linear-gradient(135deg, #3d3d46, #6b6b78); }
.integ-ic.gv { background: linear-gradient(135deg, #7b5cff, #17c3ff); }
.integ-ic.http { background: linear-gradient(135deg, #17b978, #0a8f6a); }
.integ-ic.grp { background: linear-gradient(135deg, var(--pink, #f9025b), #7b5cff); }
.integ-wide { grid-column: 1 / -1; }
.grp-item .kl-row1 .grp-nm { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; }
.grp-members { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; min-height: 20px; align-items: center; }
.grp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--bg-3, #23232b); border: 1px solid var(--border); font-size: 12px; }
.grp-chip i { font-size: 13px; color: var(--muted); }
.grp-chip .grp-rm { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.grp-chip .grp-rm:hover { color: #ff5a76; }
.grp-add-row { display: flex; gap: 8px; }
.grp-add-row .grp-pick { flex: 1; min-width: 0; font-size: 12.5px; }
.gv-react { margin: 2px 0 8px; font-size: 12px; }
.gv-colwrap input[type="color"] { width: 100%; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; }
.hd-item .kl-meta { flex: 1; }
.hd-nm { font-weight: 600; font-size: 13px; }
.hd-fields { grid-template-columns: 1fr 1fr auto; }
.hd-f { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.hd-f input, .hd-f select { font-family: var(--mono); font-size: 11.5px; }
.hd-mwrap { min-width: 84px; }
.integ-actions { display: flex; gap: 6px; }
.kl-add { display: flex; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.kl-add .kl-ip { flex: 0 0 140px; font-family: var(--mono); font-size: 12.5px; }
.kl-add .kl-name { flex: 1; min-width: 120px; }
.kl-msg { min-height: 16px; font-size: 11.5px; margin: 2px 0 6px; }
.kl-msg.ok { color: #35c56a; }
.kl-msg.err { color: #ff5a76; }
.kl-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kl-empty { padding: 14px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.kl-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--bg-2); }
.kl-row1 { display: flex; align-items: center; gap: 10px; }
.kl-meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.kl-nm { font-size: 13.5px; }
.kl-state { flex: none; font-variant-numeric: tabular-nums; }
.kl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.kl-slider { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.kl-slider input[type="range"] { width: 100%; accent-color: var(--pink); }
.sd-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sd-cmd { display: flex; align-items: center; gap: 9px; }
.sd-ic { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); }
.sd-label { flex: 0 0 40%; font-size: 12.5px; }
.sd-url { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.xsmall { font-size: 10.5px; }
.kl-react { margin: 2px 0 8px; font-size: 12px; }
.sd-custom-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sd-binds { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sd-empty { padding: 12px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.sd-bind { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--bg-2); }
.sd-bind-top { display: flex; align-items: center; gap: 8px; }
.sd-bind-top .sd-bl { flex: 1; min-width: 0; font-weight: 600; }
.sd-bind-top .sd-ba { flex: 0 0 42%; }
.sd-params { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0; }
.sd-params:empty { display: none; }
.sd-pf { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.sd-pf input, .sd-pf select { min-width: 120px; }
.sd-bind .url-row { display: flex; gap: 7px; }
.sd-bind .url-row .sd-url { flex: 1; }

/* overlays tab: config on the left, a live browser-source preview on the right */
.overlay-workspace { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.15fr); gap: 16px; margin-top: 4px; align-items: start; }
.overlay-workspace .overlay-list { grid-template-columns: 1fr; margin-top: 0; }
.overlay-preview-panel {
  position: sticky; top: 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px; box-shadow: var(--edge-hi);
}
.opv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.opv-title { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.opv-title .ph { color: var(--pink); }
.opv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-xs { font-size: 11px; padding: 4px 9px; border-radius: 8px; line-height: 1.1; }
.opv-stage {
  position: relative; width: 100%; min-height: 120px; border-radius: var(--r-md, 12px); overflow: hidden;
  border: 1px solid var(--border); background-color: #14161c;
  transition: height 0.28s var(--ease, cubic-bezier(0.16,1,0.3,1));
  /* checkerboard so transparent overlays are visible, like OBS */
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%),
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
/* iframe renders at true 1920x1080 and is CSS-scaled to fit (set in JS) so the
   whole overlay canvas + widget anchoring is visible, exactly like OBS. */
/* pointer-events:none (STATIC — never toggled): the preview is display-only, and wheel
   over an out-of-process iframe bypasses the parent's scroll + lockout detector
   entirely. Dead to input, it scrolls .panel-col like any other pixel. */
.opv-stage iframe { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0; background: transparent; transform-origin: top left; pointer-events: none; }
.opv-foot { margin-top: 8px; }
@media (max-width: 1080px) { .overlay-workspace { grid-template-columns: 1fr; } .overlay-preview-panel { position: static; } }

/* ---------- iOS-style game control panel (under the live preview) ---------- */
.opv-controls { margin-top: 12px; }
.opv-controls.hidden { display: none; }
.ios-card {
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(180deg, rgba(48,48,52,.72), rgba(26,26,30,.86));
  border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 15px;
  box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
}
.ios-card-title { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin: 0 2px 12px; display: flex; align-items: center; gap: 7px; }
.ios-card-title .ph { color: #34d15b; font-size: 15px; }
.ios-row { display: flex; gap: 10px; align-items: stretch; }
.ios-row + .ios-row { margin-top: 10px; }
.ios-btn { flex: 1; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  font-size: 15px; color: #fff; padding: 13px 14px; border-radius: 15px; letter-spacing: .01em;
  background: rgba(120,120,128,.24); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .09s ease, filter .15s ease, background .15s ease, box-shadow .15s ease; }
.ios-btn .ph { font-size: 17px; }
.ios-btn:active { transform: scale(.97); }
.ios-btn-primary { background: linear-gradient(180deg, #38d15f, #22b84c); box-shadow: 0 7px 18px rgba(34,184,76,.36); }
.ios-btn-primary:hover { filter: brightness(1.06); }
.ios-btn-danger { color: #ff7369; background: rgba(255,90,80,.14); }
.ios-btn-danger:hover { background: rgba(255,90,80,.22); }
/* iOS stepper — segmented add/remove-time control */
.ios-stepper { display: flex; align-items: stretch; flex: 1; border-radius: 15px; overflow: hidden;
  background: rgba(120,120,128,.24); }
.ios-step-btn { appearance: none; border: 0; cursor: pointer; background: transparent; color: #fff; font: inherit;
  font-size: 15px; font-weight: 700; min-width: 62px; padding: 12px 14px; display: grid; place-items: center;
  transition: background .12s ease, transform .09s ease; }
.ios-step-btn:hover { background: rgba(255,255,255,.10); }
.ios-step-btn:active { background: rgba(255,255,255,.16); transform: scale(.96); }
.ios-stepper-label { flex: 1; display: grid; place-items: center; text-align: center; line-height: 1.15;
  font-size: 13px; font-weight: 600; color: #fff; border-left: 1px solid rgba(255,255,255,.14);
  border-right: 1px solid rgba(255,255,255,.14); padding: 0 6px; }
.ios-stepper-label small { display: block; font-size: 10px; font-weight: 500; color: rgba(255,255,255,.5); margin-top: 2px; }
.ios-pulse { animation: iosPulse .45s ease; }
@keyframes iosPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }

/* ---------- simulate ---------- */
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

/* ---------- action editor ---------- */
.actions-block { margin-top: 6px; }
.action-list { display: flex; flex-direction: column; gap: 11px; margin-top: 10px; }
.action-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; animation: cardIn 0.3s var(--ease); transition: border-color var(--dur-2) var(--ease); }
.action-row:hover { border-color: var(--border-strong); }
.action-row .ar-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.action-row .ar-head select { flex: 1; }
.action-row .ar-fields { display: flex; flex-direction: column; gap: 9px; }
.action-row .ar-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); }
.action-row .del { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 18px; border-radius: 7px; padding: 2px 6px; transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
.action-row .del:hover { color: var(--youtube); background: rgba(255, 0, 51, 0.08); }
.action-row .del:active { transform: scale(0.9); }
.sound-pick { display: flex; align-items: center; gap: 8px; }
.sound-label { flex: 1; font-size: 13px; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); display: flex; align-items: center; justify-content: center; animation: scrimIn 0.28s var(--ease); }
/* the scrim MATERIALIZES — blur arrives with the opacity so the glass reads as a
   real surface forming, not a flat fade over an already-frosted screen */
@keyframes scrimIn {
  from { opacity: 0; backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); }
  to { opacity: 1; backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  width: 480px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-3), 0 0 60px rgba(var(--accent-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform-origin: center bottom;
  /* iOS sheet: rises from the bottom edge and settles with a spring */
  animation: sheetUp 0.5s var(--spring);
}
@keyframes sheetUp { from { opacity: 0; transform: translateY(64px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* CSS-only closing state — app.js just toggles .hidden, but if a .closing class
   is ever set before removal this degrades the dismissal into a downward slide.
   Harmless no-op otherwise. */
.modal.closing { animation: fade 0.2s var(--ease) reverse forwards; }
.modal.closing .modal-card { animation: sheetDown 0.28s var(--ease) forwards; }
@keyframes sheetDown { to { opacity: 0; transform: translateY(48px) scale(0.96); } }
.modal-card.wide { width: 620px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.modal-body { overflow-y: auto; padding: 18px; overscroll-behavior: contain; }
.modal-body .form { margin-top: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 18px; border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.015); }
.modal-card .form { padding: 0 18px; }
.modal-card nav.tabs { padding: 0 10px; }

.sound-results { list-style: none; margin: 12px 0 0; padding: 0; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sound-results li { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--border); animation: rowin 0.3s var(--ease) backwards; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.sound-results li:hover { border-color: var(--border-strong); background: var(--card-2); }
.sound-results li:nth-child(2) { animation-delay: 0.03s; }
.sound-results li:nth-child(3) { animation-delay: 0.06s; }
.sound-results li:nth-child(4) { animation-delay: 0.09s; }
.sound-results li:nth-child(n+5) { animation-delay: 0.12s; }
.sound-results .s-title { flex: 1; font-size: 13px; }

/* ---------- auctions ---------- */
.au-head-actions { display: flex; gap: 8px; }
.au-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.au-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--edge-hi); transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.au-card:hover { transform: translateY(-2px); }
.au-card::after { content: ""; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),0.16), transparent 70%); opacity: 0; transition: opacity 0.3s var(--ease); }
.au-card.live::after, .au-card.pink::after { opacity: 1; }
.au-card-v { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-card-l { font-size: 10.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 5px; }
.au-card.live { border-color: rgba(52,211,153,0.4); } .au-card.live .au-card-v { color: #34d399; }
.au-card.warn { border-color: rgba(251,191,36,0.4); } .au-card.warn .au-card-v { color: #fbbf24; }
.au-card.pink { border-color: rgba(var(--accent-rgb),0.35); } .au-card.pink .au-card-v { color: var(--pink-4); }
.au-card.off .au-card-v { color: var(--muted); }

.au-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px; margin-bottom: 20px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--edge-hi); }
.au-flow > i { color: var(--faint); font-size: 16px; }
.au-step { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.au-n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--pink-grad); color: #fff; box-shadow: 0 0 12px -2px rgba(var(--accent-rgb), 0.5); }

.au-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.au-controls .is-off { opacity: 0.4; pointer-events: none; }
/* ±time button group (sits inline with pause/resume) */
.au-time { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.au-time.is-off { opacity: 0.4; pointer-events: none; }
.au-time .btn { min-width: 0; padding: 6px 9px; }
/* giveaway overlay accent picker row */
.gvw-accent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.gvw-accent-lbl { font-size: 12.5px; font-weight: 600; }
.gvw-accent-row input[type="color"] { width: 42px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: none; cursor: pointer; }

.au-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.au-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--edge-hi); }
.au-panel .sub-h:first-child { margin-top: 0; }
.inline-check { flex-direction: row !important; align-items: center; gap: 9px; color: var(--text) !important; font-size: 13px; cursor: pointer; }
.inline-check input { width: auto; accent-color: var(--pink); }

.au-mappings { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 12px; }
.au-map-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); animation: rowin 0.3s var(--ease); }
.au-map-name { flex: 1; font-weight: 600; text-transform: capitalize; }
.au-map-val { color: var(--pink-4); font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.au-map-row .del { background: none; border: none; color: var(--faint); font-size: 18px; cursor: pointer; border-radius: 7px; padding: 2px 6px; transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.au-map-row .del:hover { color: var(--youtube); background: rgba(255, 0, 51, 0.08); }
.au-map-add { display: grid; grid-template-columns: 1fr 100px auto; gap: 8px; margin-bottom: 16px; }

.au-live-top { display: flex; gap: 18px; align-items: center; }
.au-timer-box { text-align: center; flex: none; }
.au-timer { font-family: var(--mono); font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color 0.3s var(--ease); }
.au-timer.urgent { color: var(--pink-4); text-shadow: 0 0 26px rgba(var(--accent-rgb), 0.5); animation: auPulse 1s ease-in-out infinite; }
@keyframes auPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.au-timer-l { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.au-leader-box { flex: 1; min-width: 0; }
.au-leader-box .k { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; }
.au-leader-box .k b { color: var(--text); font-family: var(--mono); }
.au-leader { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--pink-4); margin: 3px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-progress { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 16px 0 4px; }
.au-progress span { position: relative; display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--pink-4)); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5); transition: width 0.6s var(--ease); overflow: hidden; }
.au-progress span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-100%); animation: barSheen 2.6s var(--ease) infinite;
}
@keyframes barSheen { 0%, 40% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }

.au-history-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.au-history { width: 100%; border-collapse: collapse; font-size: 13px; }
.au-history th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); text-align: left; padding: 9px 12px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); border-bottom: 1px solid var(--border); }
.au-history td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.au-history tr:last-child td { border-bottom: none; }
.au-history tbody tr { animation: rowin 0.35s var(--ease); }
.au-history tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.au-h-user { font-weight: 600; }
.au-h-val { color: #34d399; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.au-h-tot { color: var(--pink-4); font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.au-h-ts { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
.au-empty td { color: var(--faint); font-style: italic; text-align: center; padding: 18px; }

@media (max-width: 1180px) { .au-grid { grid-template-columns: 1fr; } }

/* ---------- text-to-speech ---------- */
.pane-head-actions { display: flex; align-items: center; gap: 14px; }
.pane-head-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ph-spin { display: inline-block; animation: vmic-spin 0.8s linear infinite; }

/* Auto-update progress banner (top of the app while a chosen update downloads) */
.update-bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb, 249,2,91), 0.16), rgba(var(--accent-rgb, 249,2,91), 0.06));
  border-bottom: 1px solid rgba(var(--accent-rgb, 249,2,91), 0.35); color: var(--text); }
.update-bar.hidden { display: none; }
.update-bar-ic { font-size: 22px; color: var(--accent, #f9025b); flex: 0 0 auto; }
.update-bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.update-bar-msg { font-size: 13px; font-weight: 600; }
.update-bar-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
.update-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--accent, #f9025b); transition: width 0.25s ease; }
.update-bar-pct { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; min-width: 42px; text-align: right; }
.update-bar.is-indeterminate .update-bar-fill { width: 35% !important; animation: update-indet 1.1s ease-in-out infinite; }
@keyframes update-indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* Version stamp at the bottom of Settings */
.app-version { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12px; letter-spacing: 0.02em; }
.tts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tts-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--edge-hi); }
.tts-panel .sub-h:first-child { margin-top: 0; }
.rng { gap: 8px !important; }
.rng > span { display: flex; align-items: center; justify-content: space-between; }
.rng output { color: var(--pink-3); font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rng input[type="range"] { width: 100%; accent-color: var(--pink); cursor: pointer; }
.tts-tpl input { font-family: var(--mono, monospace); font-size: 12px; }
.tts-panel code { background: var(--panel-2, rgba(255,255,255,0.05)); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 11px; font-family: var(--mono); color: var(--pink-3); }
.link-sm { color: var(--pink-3); text-decoration: none; font-size: 11px; font-weight: 500; }
.link-sm:hover { text-decoration: underline; }
.inline-check.sub { margin-left: 22px; font-size: 12px; color: var(--muted) !important; }
.tts-roles { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 4px; padding-left: 22px; }
.tts-roles .inline-check { font-size: 12px; }
.tts-try { display: flex; gap: 8px; margin: 4px 0 14px; }
.tts-try input { flex: 1; min-width: 0; }
.tts-try .btn { flex: none; white-space: nowrap; }
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.persona-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.persona-card:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); transform: translateY(-1px); }
.persona-card:active { transform: scale(0.98); }
.persona-card.active { border-color: var(--pink); background: rgba(var(--accent-rgb), 0.12); box-shadow: 0 0 0 1px var(--pink) inset, 0 0 18px -4px rgba(var(--accent-rgb), 0.4); }
.pc-emoji { font-size: 20px; line-height: 1; }
.pc-name { font-size: 13px; font-weight: 600; }
.pc-desc { font-size: 11px; color: var(--muted); line-height: 1.35; }
@media (max-width: 1180px) { .tts-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- music (Spotify) ---------- */
.sp-status { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 12px; }
.sp-status .ok { color: #1ed760; margin-right: 4px; }
.sp-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.sp-redirect { display: flex; align-items: center; gap: 8px; }
.sp-redirect code { flex: 1; min-width: 0; overflow-x: auto; background: var(--panel-2, rgba(255,255,255,0.05)); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; font-family: var(--mono); color: var(--pink-3); white-space: nowrap; }
.sp-log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.sp-req { display: flex; align-items: baseline; gap: 6px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; animation: rowin 0.3s var(--ease); }
.sp-req:first-child { border-top: 0; }
.sp-req .ph { color: #1ed760; font-size: 15px; }
.sp-req.err .ph { color: #ef4444; }
.sp-req .u { font-weight: 600; }
.sp-req .d { color: var(--muted); }
.evt-song .txt { color: #1ed760; }

/* ---------- overlay picker ---------- */
/* catalog-first selection: while browsing, the editor/preview workspace steps aside */
.tabpane[data-pane="overlays"].browsing .overlay-workspace { display: none; }
.ovg-search { max-width: 380px; margin: 0 0 18px; padding: 9px 12px; border-radius: 10px; }
.ov-desc { font-size: 11px; color: var(--muted); line-height: 1.45; }

/* ---------- features catalog ---------- */
.feat-group { margin-bottom: 26px; }
.feat-group .sub-h { display: flex; align-items: center; gap: 8px; }
.feat-group .sub-h i { font-size: 15px; color: var(--pink-4); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.feat-card {
  position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 118px;
  box-shadow: var(--edge-hi);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.feat-card.live:hover { border-color: rgba(var(--accent-rgb), 0.3); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.feat-card.soon { opacity: 0.72; }
.feat-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.feat-name { font-size: 15px; font-weight: 700; flex: 1; letter-spacing: -0.01em; }
.feat-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.fbadge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px; border: 1px solid transparent;
}
.fbadge.live { color: #34d399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); }
.fbadge.soon { color: var(--faint); background: rgba(255, 255, 255, 0.04); border-color: var(--border); }
.fbadge.new { color: #fff; background: var(--pink-grad); }
.fbadge.hot { color: #fff; background: var(--pink-grad); box-shadow: 0 0 12px -3px rgba(var(--accent-rgb), 0.5); }
.fbadge.pro { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.4); }

/* ---------- overlays tab: overview catalog (categorized feature cards) ---------- */
.ov-overview { margin: 2px 0 24px; min-width: 0; }
.ov-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ov-head-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.ov-head-title i { font-size: 15px; color: var(--pink-4); }
.ov-head-sub { font-size: 12px; color: var(--faint); }
.ov-group { margin-bottom: 20px; animation: cardIn 0.55s var(--spring-soft) backwards; }
.ov-overview > .ov-group:nth-of-type(2) { animation-delay: 0.04s; }
.ov-overview > .ov-group:nth-of-type(3) { animation-delay: 0.08s; }
.ov-overview > .ov-group:nth-of-type(4) { animation-delay: 0.12s; }
.ov-overview > .ov-group:nth-of-type(5) { animation-delay: 0.16s; }
.ov-overview > .ov-group:nth-of-type(6) { animation-delay: 0.2s; }
.ov-overview > .ov-group:nth-of-type(7) { animation-delay: 0.24s; }
.ov-overview > .ov-group:nth-of-type(n + 8) { animation-delay: 0.28s; }
.ov-group-head { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.ov-group-head h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.ov-group-ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 14px; color: var(--pink-4);
  background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow: var(--edge-hi);
}
.ov-count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--faint);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
}
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; min-width: 0; }
.ov-card {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; text-align: left;
  font-family: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 11px 12px; cursor: pointer; box-shadow: var(--edge-hi);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.ov-card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--edge-hi); }
.ov-card.is-live:hover { border-color: rgba(var(--accent-rgb), 0.35); transform: translateY(-2px); box-shadow: var(--shadow-1), var(--edge-hi); }
.ov-card.is-soon { opacity: 0.6; }
.ov-card.is-soon:hover { opacity: 0.85; border-color: rgba(255, 255, 255, 0.14); }
.ov-card.active {
  opacity: 1; border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.07);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3), 0 8px 26px -10px rgba(var(--accent-rgb), 0.5), var(--edge-hi);
}
.ov-ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 15px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.ov-card.is-live .ov-ic { color: var(--pink-4); }
.ov-card.active .ov-ic { color: #fff; background: var(--pink-grad); border-color: transparent; box-shadow: 0 0 12px -3px rgba(var(--accent-rgb), 0.6); }
.ov-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ov-name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.ov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ov-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: 999px; border: 1px solid transparent;
}
.ov-status.live { color: #34d399; background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); }
.ov-status.live i { font-size: 6px; animation: ovPulse 2.2s ease-in-out infinite; }
.ov-status.soon { color: var(--faint); background: rgba(255, 255, 255, 0.04); border-color: var(--border); }
@keyframes ovPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ov-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
}
.ov-badge.new { color: var(--pink-3); background: rgba(var(--accent-rgb), 0.07); border-color: rgba(var(--accent-rgb), 0.45); }
.ov-badge.hot { color: #fff; background: rgb(var(--accent-rgb)); box-shadow: 0 0 10px -2px rgba(var(--accent-rgb), 0.6); }
.ov-badge.insane { color: #fff; background: var(--pink-grad); animation: ovInsane 2.4s ease-in-out infinite; }
@keyframes ovInsane {
  0%, 100% { box-shadow: 0 0 10px -2px rgba(var(--accent-rgb), 0.55); }
  50% { box-shadow: 0 0 18px -1px rgba(var(--accent-rgb), 0.95); }
}
.ov-badge.event { color: #fff; background: var(--pink-grad); }
.ov-badge.topx { color: #1a1305; background: linear-gradient(135deg, #fde68a, #f59e0b 70%, #d97706); box-shadow: 0 0 12px -4px rgba(245, 158, 11, 0.7); }
.ov-badge.pro { color: #fbbf24; background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.45); }
.ov-note { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--pink-4); animation: cardIn 0.3s var(--ease); }
.ov-note i { font-size: 12px; }

/* Empty legacy overview container must not reserve space */
.ov-overview:empty { display: none; margin: 0; }

/* Overlay catalog flyout dropdown (anchored to the left-nav "Overlays" item) */
/* Inline overlay catalog: an accordion sub-section of the left nav that expands
   directly under the "Overlays" tab and pushes the tabs below it down. */
.ov-subnav {
  flex: none; width: 100%; overflow: hidden; text-align: left;
  max-height: 0; opacity: 0;
  margin: 0; border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  transition: max-height 0.28s var(--ease), opacity 0.2s var(--ease),
              margin 0.28s var(--ease), padding 0.28s var(--ease);
  padding: 0 5px;
}
.ov-subnav.open {
  max-height: 1600px; opacity: 1;
  margin: 2px 0 4px; padding: 6px 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
/* rotate a small caret hint on the Overlays tab while expanded */
.sidenav .tab.ov-expanded { background: rgba(var(--accent-rgb), 0.1); }
/* Overlay-section search — filters the inline list live; matches name, category & badge. */
.ovf-search {
  display: flex; align-items: center; gap: 6px;
  margin: 1px 3px 6px; padding: 6px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border);
}
.ovf-search:focus-within { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); }
.ovf-search > i { font-size: 13px; color: var(--faint); flex: none; }
.ovf-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--text); font-size: 11.5px; font-weight: 600; font-family: inherit;
}
.ovf-search input::placeholder { color: var(--faint); }
.ovf-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ovf-search-x { flex: none; display: inline-flex; align-items: center; padding: 2px; border: 0; background: transparent; color: var(--faint); cursor: pointer; border-radius: 5px; }
.ovf-search-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.ovf-search-x i { font-size: 12px; }
.ovf-empty { padding: 12px 8px; font-size: 11px; color: var(--faint); text-align: center; line-height: 1.4; }
.ovf-group { margin-bottom: 4px; }
.ovf-group:last-child { margin-bottom: 0; }
.ovf-cat { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); padding: 7px 5px 3px; line-height: 1.2; }
.ovf-cat i { font-size: 12px; color: rgb(var(--accent-rgb)); flex: none; }
.ovf-cat span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovf-item { position: relative; display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.ovf-item:hover { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.3); color: var(--text); }
.ovf-item.active { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.5); color: #fff; }
.ovf-item.is-soon { opacity: 0.5; }
.ovf-item.is-soon:hover { opacity: 0.85; }
.ovf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovf-soon { font-size: 8px; font-weight: 700; color: var(--faint); text-transform: uppercase; flex: none; }
.ovf-badge { font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; letter-spacing: 0.02em; flex: none; }
.ovf-badge.hot { color: #fff; background: rgb(var(--accent-rgb)); }
.ovf-badge.new { color: var(--pink-3); border: 1px solid rgba(var(--accent-rgb), 0.45); }
.ovf-badge.insane { color: #fff; background: var(--pink-grad); }
.ovf-badge.event { color: #fff; background: var(--pink-grad); }
.ovf-badge.topx { color: #1a1305; background: linear-gradient(135deg, #fde68a, #f59e0b 70%, #d97706); }
.ovf-badge.pro { color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.45); }

/* ---------- feed header actions + pop-out window ---------- */
.ch-actions { display: flex; gap: 8px; }
body.feed-popout { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.feed-topbar { justify-content: space-between; gap: 14px; height: 48px; padding-right: 140px; }
.feed-topbar .aot, .feed-topbar .switch { -webkit-app-region: no-drag; }
.feed-topbar .brand span:last-child { font-size: 15px; }
.aot { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); margin-left: auto; cursor: pointer; }
body.feed-popout #feed { flex: 1; }

/* ---- pop-out feed: live viewer counts per platform ---- */
.viewer-bar { display: flex; flex-wrap: wrap; gap: 6px; flex: none; padding: 7px 14px; border-bottom: 1px solid var(--border); background: rgba(9, 9, 11, 0.35); }
.viewer-bar[hidden] { display: none; }
.vc-pill, .vc-total {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--muted);
}
.vc-pill i, .vc-total i { font-size: 13px; }
.vc-pill b, .vc-total b { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.vc-pill.twitch { background: rgba(145, 70, 255, 0.16); border-color: rgba(145, 70, 255, 0.32); color: #c9b4ff; }
.vc-pill.youtube { background: rgba(255, 0, 51, 0.14); border-color: rgba(255, 0, 51, 0.3); color: #ff8ea0; }
.vc-pill.tiktok { background: rgba(37, 244, 238, 0.12); border-color: rgba(37, 244, 238, 0.28); color: #8ff7f3; }
.vc-pill.kick { background: rgba(83, 252, 24, 0.12); border-color: rgba(83, 252, 24, 0.28); color: #aef98a; }
.vc-total { margin-left: auto; background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.32); color: var(--text); }

/* ---- pop-out feed: controls bar ---- */
.feed-controls { display: flex; gap: 14px; align-items: center; flex: none; padding: 6px 14px; border-bottom: 1px solid var(--border); background: rgba(9, 9, 11, 0.5); }
.feed-controls label { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.feed-controls select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 12px; padding: 3px 7px; text-transform: none; letter-spacing: 0; }
.feed-controls select:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); box-shadow: var(--focus-ring); }

/* ---- direction: chat-feed anchors newest to the bottom + rises up ---- */
.feed-popout[data-feed-dir="bottom"] .feed > li:first-child { margin-top: auto; }
.feed-popout[data-feed-dir="bottom"] .feed li { animation: rowinUp 0.5s var(--spring); }
@keyframes rowinUp { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---- pop-out feed: visual styles (scoped so the main feed is untouched) ---- */
/* compact — dense, borderless rows */
.feed-popout[data-feed-style="compact"] .feed { gap: 2px; padding: 6px 8px; }
.feed-popout[data-feed-style="compact"] .feed li { padding: 4px 8px; border: 0; background: none; border-radius: 6px; gap: 6px; font-size: 12.5px; }
.feed-popout[data-feed-style="compact"] .feed li:hover { background: var(--card); }
.feed-popout[data-feed-style="compact"] .feed li.evt-paid { background: rgba(var(--accent-rgb), 0.07); }
/* chat — messenger-style tight lines, accent names */
.feed-popout[data-feed-style="chat"] .feed { gap: 1px; padding: 8px 10px; }
.feed-popout[data-feed-style="chat"] .feed li { padding: 5px 6px; border: 0; background: none; border-radius: 8px; align-items: baseline; gap: 7px; line-height: 1.45; }
.feed-popout[data-feed-style="chat"] .feed li:hover { background: rgba(255, 255, 255, 0.03); }
.feed-popout[data-feed-style="chat"] .feed li.evt-paid { background: rgba(var(--accent-rgb), 0.08); box-shadow: none; padding: 6px 8px; }
.feed-popout[data-feed-style="chat"] .feed .who { color: var(--pink-4); }
.feed-popout[data-feed-style="chat"] .tag { padding: 2px 5px; }
/* bold — larger, high-contrast for on-stream capture */
.feed-popout[data-feed-style="bold"] .feed li { padding: 12px 15px; font-size: 15px; }
.feed-popout[data-feed-style="bold"] .feed .who { font-size: 15.5px; }
.feed-popout[data-feed-style="bold"] .feed .money { font-size: 14px; }
/* minimal — plain lines, hairline separators */
.feed-popout[data-feed-style="minimal"] .feed { gap: 0; padding: 6px 12px; }
.feed-popout[data-feed-style="minimal"] .feed li { padding: 7px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; border-radius: 0; }
.feed-popout[data-feed-style="minimal"] .feed li.evt-paid { box-shadow: none; background: none; }
/* smaller avatars in the tight pop-out styles; bigger in bold */
.feed-popout[data-feed-style="compact"] .cav,
.feed-popout[data-feed-style="chat"] .cav,
.feed-popout[data-feed-style="minimal"] .cav { width: 21px; height: 21px; font-size: 10px; }
.feed-popout[data-feed-style="bold"] .cav { width: 32px; height: 32px; font-size: 14px; }

/* ---------- accent colour (Settings > Appearance) ---------- */
.setting-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--edge-hi);
}
.ab-label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ab-label i { font-size: 15px; color: var(--pink-4); }
.ab-swatches { display: flex; gap: 8px; }
.ab-sw { width: 22px; height: 22px; border-radius: 7px; cursor: pointer; padding: 0; border: 2px solid transparent;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.ab-sw:hover { transform: translateY(-1px) scale(1.06); }
.ab-sw:active { transform: scale(0.94); }
.ab-sw.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }
.ab-custom { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ab-custom input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none; cursor: pointer; }

/* ---------- plan / subscription ---------- */
.tab[data-tab="plan"] { position: relative; }
.tab.nudge::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.plan-current { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.plan-badge { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 5px 11px;
  border-radius: 999px; background: var(--card-2); color: var(--muted); border: 1px solid var(--border-strong); }
.plan-badge.basic { background: linear-gradient(135deg, #7ec8ff, #3d8ef0 60%, #2b6fd4); color: #08243f; border-color: transparent; box-shadow: 0 8px 26px rgba(61,142,240,.35); }
.plan-badge.pro { background: var(--pink-grad); color: #fff; border-color: transparent; box-shadow: var(--pink-glow); }
.plan-badge.founder { background: linear-gradient(135deg, #ffd76a, #f5a623 60%, #e6890f); color: #2a1c00; border-color: transparent; box-shadow: 0 8px 26px rgba(245,166,35,.35); }
.plan-current-txt { flex: 1; min-width: 0; }
.plan-current-txt > div:first-child { font-weight: 700; font-size: 14.5px; }

.plan-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; }
.plan-int { border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.plan-int.on { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.plan-save { font-size: 10.5px; font-weight: 700; color: #3ddc84; background: rgba(61,220,132,.12);
  border-radius: 999px; padding: 2px 7px; }

.plan-promo { display: flex; align-items: center; gap: 9px; max-width: 760px; margin: 0 0 14px;
  padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--text);
  background: linear-gradient(100deg, rgba(var(--accent-rgb, 249,2,91), .16), rgba(var(--accent-rgb, 249,2,91), .06));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 249,2,91), .35); }
.plan-promo i { color: var(--accent, #f9025b); font-size: 17px; flex: none; }
.plan-promo code { font-family: var(--sf-font-mono, ui-monospace, monospace); font-weight: 700;
  letter-spacing: .04em; color: var(--accent, #f9025b); background: rgba(var(--accent-rgb, 249,2,91), .14);
  border-radius: 6px; padding: 1px 7px; }
.plan-promo.hidden { display: none; }

.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; }
.plan-cards.flash .plan-card.featured { animation: planFlash 1s var(--ease, ease) 1; }
@keyframes planFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } 30% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .5); } }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.plan-card.featured { border-color: rgba(var(--accent-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), var(--card)); box-shadow: 0 14px 40px -20px rgba(var(--accent-rgb), .5); }
.plan-card.current { outline: 1px solid var(--border-strong); }
.plan-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.plan-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--pink-grad); border-radius: 999px; padding: 3px 9px; }
.plan-price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plan-price .per { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.plan-tagline { margin: -2px 0 2px; }
.plan-feats { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text); }
.plan-feats li .ph { color: var(--pink-3); font-size: 15px; margin-top: 1px; flex: none; }
.plan-card.featured .plan-feats li .ph { color: var(--pink); }
.btn-block { width: 100%; justify-content: center; margin-top: auto; }
@media (max-width: 900px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plan-cards { grid-template-columns: 1fr; } }

/* ---------- reduced motion ---------- */
/* ---------- first-run guided tour ---------- */
/* One spotlight ring springs between targets; the huge box-shadow is the dim layer
   with the ring as its cutout. Transitions (not keyframes) so rapid Next-clicks
   retarget smoothly mid-flight. */
.tour-ring {
  position: fixed; z-index: 260; pointer-events: none; opacity: 0;
  border: 2px solid rgba(var(--accent-rgb), 0.9); border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(5, 5, 8, 0.62), 0 0 24px rgba(var(--accent-rgb), 0.55),
    inset 0 0 18px rgba(var(--accent-rgb), 0.18);
  transition: top 0.45s var(--spring-snap), left 0.45s var(--spring-snap),
    width 0.45s var(--spring-snap), height 0.45s var(--spring-snap), opacity var(--dur-2) var(--ease);
}
.tour-tip {
  position: fixed; z-index: 261; width: 330px; max-width: calc(100vw - 24px);
  background: rgba(18, 18, 24, 0.97); border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--r-lg); padding: 16px 16px 13px;
  box-shadow: var(--shadow-3), 0 0 40px rgba(var(--accent-rgb), 0.12), var(--edge-hi);
  transition: top 0.45s var(--spring-snap), left 0.45s var(--spring-snap);
}
.tour-tip.pop { animation: tourPop 0.24s var(--ease); }
@keyframes tourPop { from { opacity: 0.4; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.tour-tip .tour-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent;
  color: var(--faint); cursor: pointer; }
.tour-tip .tour-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.tour-tip .tour-t { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; padding-right: 22px; }
.tour-tip .tour-b { font-size: 13px; line-height: 1.55; color: var(--muted); }
.tour-tip .tour-f { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.tour-tip .tour-c { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.tour-tip .tour-btns { display: inline-flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .tour-ring, .tour-tip { transition: none; } .tour-tip.pop { animation: none; } }

/* Every pressable confirms the press — instant, subtle. Users never consciously
   notice any one of these; in aggregate the app feels like it's listening. */
.ov-card:active, .ovf-item:active, .tsr-item:active, .persona-card:active,
.stab:active, .badge-card[data-clickable]:active {
  transform: scale(0.98) !important; transition-duration: 0.08s !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .panel-col { scroll-behavior: auto; }
  .btn:hover, .btn-primary:hover, .card:hover, .stat:hover, .rule-item:hover, .conn-card:hover,
  .overlay-card:hover, .feat-card.live:hover, .au-card:hover, .persona-card:hover,
  .ab-sw:hover, .brand:hover .brand-mark { transform: none; }
  .ov-card:active, .ovf-item:active, .tsr-item:active, .persona-card:active, .stab:active,
  .seg-btn:active, .badge-pinbtn:active:not([disabled]) { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .modal, .modal-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body::after { display: none; }
}

/* ---------- dashboard: creator live TikTok rank ---------- */
.dash-rank {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  margin: 2px 0 20px; padding: 15px 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03) 72%);
  box-shadow: var(--edge-hi);
  animation: cardIn 0.5s var(--spring-soft) backwards;
}
.dash-rank.hidden { display: none; }
.dash-rank .dr-num {
  flex: none; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: rgb(var(--accent-rgb)); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.45);
}
.dash-rank .dr-num span { font-size: 46px; }
.dash-rank .dr-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dash-rank .dr-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dash-rank .dr-badge {
  flex: none; padding: 3px 9px; border-radius: 999px;
  background: rgb(var(--accent-rgb)); color: #0a0a0f;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.dash-rank .dr-board {
  font-size: 15px; font-weight: 700; color: #fafafa;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-rank .dr-meta { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); }
.dash-rank .dr-cd { color: rgb(var(--accent-rgb)); }
.dash-rank .dr-need { font-size: 11.5px; font-weight: 600; color: rgb(var(--accent-rgb)); margin-top: 1px; }
.dash-rank .dr-need:empty { display: none; }
/* Off the board the position holds at "99+", so the moving "to get on" gap carries the
   liveness — flash it on every change, and pulse a small live dot beside the number so the
   card reads as actively tracking rather than frozen. */
.dash-rank .dr-need-live { animation: drNeedPulse 0.7s ease both; }
@keyframes drNeedPulse {
  0%   { color: #fff; text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9); }
  100% { color: rgb(var(--accent-rgb)); text-shadow: none; }
}
.dash-rank.is-offboard .dr-num { position: relative; overflow: visible; }
.dash-rank.is-offboard .dr-num::after {
  content: ""; position: absolute; top: 3px; right: -11px;
  width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--accent-rgb));
  animation: drLiveDot 1.6s ease-out infinite;
}
@keyframes drLiveDot {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-rank .dr-need-live { animation: none; }
  .dash-rank.is-offboard .dr-num::after { animation: none; }
}
.dash-rank .dr-others { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dash-rank .dr-chip {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3);
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--muted);
}
.dash-rank .dr-tag {
  position: absolute; top: 10px; right: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
}

/* League card (TikTok gift-gallery ranking league) */
.dash-league {
  --lg-color: rgb(var(--accent-rgb));
  position: relative; display: flex; align-items: center; gap: 18px;
  margin: 2px 0 20px; padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--lg-color) 45%, transparent);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--lg-color) 18%, transparent), transparent 72%);
  box-shadow: var(--edge-hi);
  animation: cardIn 0.5s var(--spring-soft) backwards;
}
.dash-league.hidden { display: none; }
.dash-league .dl-badge {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 16px;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--lg-color) 55%, transparent), color-mix(in srgb, var(--lg-color) 12%, transparent) 72%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lg-color) 65%, transparent), 0 6px 22px color-mix(in srgb, var(--lg-color) 40%, transparent);
}
.dash-league .dl-group { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: #fff; text-transform: uppercase; }
.dash-league .dl-roman { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.dash-league .dl-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dash-league .dl-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dash-league .dl-label { font-size: 16px; font-weight: 800; color: #fafafa; }
.dash-league .dl-gifts { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); }
.dash-league .dl-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dash-league .dl-fill { height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lg-color) 60%, transparent), var(--lg-color));
  transition: width 0.6s var(--spring-soft); }
.dash-league .dl-next { font-size: 11px; font-weight: 600; color: var(--muted); }
.dash-league .dr-tag {
  position: absolute; top: 10px; right: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
}

/* Campaigns card (live TikTok event/goal campaigns) */
.dash-campaign {
  margin: 2px 0 20px; padding: 13px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.10), transparent 72%);
  box-shadow: var(--edge-hi);
  animation: cardIn 0.5s var(--spring-soft) backwards;
}
.dash-campaign.hidden { display: none; }
.dash-campaign .dc-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.dash-campaign .dc-head i { color: rgb(var(--accent-rgb)); font-size: 14px; }
.dash-campaign .dc-list { display: flex; flex-direction: column; gap: 10px; }

/* EulerStream API quota meter (semantic gauge: green > 30%, amber 10–30%, red < 10%) */
.dash-quota {
  margin: 2px 0 20px; padding: 13px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.07), transparent 72%);
  box-shadow: var(--edge-hi);
  animation: cardIn 0.5s var(--spring-soft) backwards;
}
.dash-quota.hidden { display: none; }
.dash-quota .dq-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.dash-quota .dq-head i { color: rgb(var(--accent-rgb)); font-size: 14px; }
.dash-quota .dq-day {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 700; color: var(--ink, #eef); font-variant-numeric: tabular-nums;
}
.dash-quota .dq-bar { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(var(--accent-rgb), 0.12); }
.dash-quota .dq-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #2fbf74, #57e39b); transition: width 0.6s var(--spring-soft);
}
.dash-quota .dq-fill[data-level="low"]  { background: linear-gradient(90deg, #f5a524, #ffcf5c); }
.dash-quota .dq-fill[data-level="crit"] { background: linear-gradient(90deg, #ff4d6a, #ff8098); }
.dash-quota .dq-sub {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.dash-campaign .cp-row { display: flex; align-items: flex-start; gap: 11px; }
.dash-campaign .cp-ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3);
  color: rgb(var(--accent-rgb)); font-size: 15px;
}
.dash-campaign .cp-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dash-campaign .cp-top { display: flex; align-items: baseline; gap: 8px; }
.dash-campaign .cp-name { font-size: 13.5px; font-weight: 700; color: #fafafa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-campaign .cp-pos { font-family: var(--mono); font-size: 12px; font-weight: 800; color: rgb(var(--accent-rgb)); }
.dash-campaign .cp-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dash-campaign .cp-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.6), rgb(var(--accent-rgb))); transition: width 0.5s var(--spring-soft); }
.dash-campaign .cp-num { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--muted); }
.dash-campaign .cp-sub { font-size: 11px; font-weight: 500; color: var(--muted); }
.dash-campaign .cp-gap { font-size: 11px; }

/* ---- Founders pane ---- */
.founder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.founder-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.2s ease; }
.founder-card:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.founder-card > i { font-size: 20px; line-height: 1; color: rgb(var(--accent-rgb)); flex: none; margin-top: 1px; }
.founder-card > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.founder-card b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.founder-card span { font-size: 12px; line-height: 1.45; color: var(--muted); }
.founder-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), 0.28);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.02)); }
.founder-hero-badge { flex: none; width: 52px; height: 52px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 27px; color: #10121a;
  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.55));
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.4); }
.founder-hero-txt h2 { margin: 0 0 3px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.founder-hero-txt p { margin: 0; font-size: 13px; }
.founder-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.founder-cta.hidden { display: none; }
.founder-cta-amt { font-size: 22px; font-weight: 750; color: var(--text); }
.founder-cta .btn { flex: none; }
/* ---- Refer & earn ---- */
.ref-panel { margin-top: 6px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.ref-link-row { display: flex; gap: 8px; }
.ref-link-input { flex: 1; min-width: 0; background: rgba(0,0,0,0.28); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13.5px; padding: 10px 12px; font-family: inherit; }
.ref-link-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); }
.ref-copy-btn, #refCopy { flex: none; }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ref-stat { padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.ref-stat-num { font-size: 24px; font-weight: 750; color: var(--text); line-height: 1; }
.ref-stat-lbl { font-size: 11.5px; color: var(--muted); }
.ref-milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ref-ms { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.ref-ms i { font-size: 17px; color: var(--muted); flex: none; }
.ref-ms.is-done { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.08); }
.ref-ms.is-done i { color: rgb(var(--accent-rgb)); }
.ref-ms-n { font-weight: 750; font-size: 14px; color: var(--text); }
.ref-ms-r { font-size: 12px; color: var(--muted); }
.ref-ms.is-done .ref-ms-r { color: var(--text); }
.ref-redeem { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
.ref-redeem-row { display: flex; gap: 8px; }
.ref-code-input { width: 130px; text-transform: uppercase; letter-spacing: 0.14em; text-align: center; background: rgba(0,0,0,0.28); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; font-weight: 650; padding: 9px 10px; font-family: inherit; }
.ref-code-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); }
.ref-ok { color: #4ade80 !important; }
/* ---- Partner agencies ---- */
.agency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.agency-card { display: flex; gap: 13px; align-items: center; padding: 14px 16px; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.2s ease, transform 0.2s ease; }
a.agency-card:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-1px); }
.agency-card.agency-invite { border-style: dashed; background: transparent; }
.agency-logo { flex: none; width: 46px; height: 46px; border-radius: 11px; overflow: hidden; display: flex;
  align-items: center; justify-content: center; font-size: 19px; font-weight: 750; color: rgb(var(--accent-rgb));
  background: rgba(var(--accent-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22); }
.agency-logo img { width: 100%; height: 100%; object-fit: cover; }
.agency-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agency-txt b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.agency-txt span { font-size: 12px; line-height: 1.45; color: var(--muted); }
.agency-tag { margin-top: 4px; align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 10.5px !important;
  font-weight: 600; color: rgb(var(--accent-rgb)) !important; background: rgba(var(--accent-rgb), 0.12); }

/* ---- Account / cloud sync ---- */
.acct-authtabs { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 2px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); }
.acct-authtab { padding: 7px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.acct-authtab.on { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

/* Death counter card (Overlays tab) */
.dc-controls { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.dc-controls .dc-count { min-width: 64px; text-align: center; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pink); }
.hotkey-input { cursor: pointer; font-family: var(--mono, monospace); font-size: 12.5px; }
.hotkey-input:focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25); }

/* Founder bio page editor (Account tab) */
.bio-links-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.bio-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bio-link-row { display: flex; gap: 8px; align-items: center; }
.bio-link-row .bl-label { flex: 0 0 150px; }
.bio-link-row .bl-url { flex: 1; min-width: 0; }
.bio-link-row .btn { flex: none; }
.bio-link-row .bl-en { flex: none; }
.bio-link-row.off .bl-label, .bio-link-row.off .bl-url, .bio-link-row.off .bl-img { opacity: .4; }
.bio-link-row .bl-img.has { color: var(--pink); }
#bioUrlRow a { color: var(--pink); text-decoration: none; font-weight: 600; }
#bioUrlRow a:hover { text-decoration: underline; }
.acct-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.acct-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--border-strong); background: var(--bg-2); }
.acct-avatar-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: 20px; color: #fff; background: var(--pink-grad); border-color: transparent; }
.acct-id { flex: 1; min-width: 0; }
.acct-name { font-weight: 700; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sync { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.acct-sync-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); opacity: .5;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04); }
.sync-dot.pending { background: #f5a623; opacity: 1; box-shadow: 0 0 0 3px rgba(245, 166, 35, .18); }
.sync-dot.on { background: #23c552; opacity: 1; box-shadow: 0 0 0 3px rgba(35, 197, 82, .2);
  animation: syncPulse 2.4s ease-in-out infinite; }
@keyframes syncPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(35, 197, 82, .2); } 50% { box-shadow: 0 0 0 6px rgba(35, 197, 82, .05); } }
@media (prefers-reduced-motion: reduce) { .sync-dot.on { animation: none; } }
.note.ok { color: #23c552; }
.note.err { color: #ff5470; }
.method-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.method-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.method-ic { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--card-2); color: var(--text); font-size: 17px; border: 1px solid var(--border); }
.method-row.linked .method-ic { color: rgb(var(--accent-rgb)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28); }
.method-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; }
.method-state { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.method-row.linked .method-state { color: #23c552; }
.method-pwform { margin-top: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.method-pwform .form { margin: 0 0 10px; }
/* Coming soon */
.soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.soon-card { position: relative; display: flex; gap: 12px; padding: 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.soon-card.featured { grid-column: 1 / -1; background:
  radial-gradient(120% 140% at 100% 0%, rgba(var(--accent-rgb), 0.10), transparent 55%), var(--card);
  border-color: rgba(var(--accent-rgb), 0.28); }
.soon-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: rgb(var(--accent-rgb));
  background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.28); }
.soon-ic { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 22px; color: rgb(var(--accent-rgb));
  background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.20); }
.soon-card.featured .soon-ic { width: 52px; height: 52px; font-size: 26px; }
.soon-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.soon-body b { font-size: 14.5px; font-weight: 700; }
.soon-body span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.soon-stores { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.soon-store { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text);
  padding: 4px 10px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--border); }
.oc-hint { margin: 6px 0 2px; line-height: 1.5; }

/* ---- Owner admin (Founder comp list, Plan tab) — only rendered for owners ---- */
.owners-admin { margin-top: 22px; padding: 16px; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), var(--card)); }
.owners-head { display: flex; align-items: center; gap: 10px; }
.owners-head .sub-h { margin: 0; }
.pill-founder { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text); padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.10); }
.owners-add { display: flex; gap: 8px; margin: 12px 0 6px; }
.owners-add input { flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px; font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--card-2); border: 1px solid var(--border); }
.owners-add input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }
.owners-msg { margin: 4px 0; color: var(--muted); }
.owners-msg.ok { color: #22c55e; }
.owners-msg.bad { color: #f87171; }
.owners-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.owner-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px;
  background: var(--card-2); border: 1px solid var(--border); }
.owner-row code { font-size: 12.5px; color: var(--text); word-break: break-all; }
.owner-row .pill { margin-left: auto; font-size: 10px; padding: 2px 8px; }
.owner-rm { margin-left: auto; color: var(--muted); padding: 3px 7px; font-size: 12px; line-height: 1; }
.owner-rm:hover { color: #f87171; }
.btn-xs { padding: 3px 7px; font-size: 12px; }

/* ---- Owner admin: all-users list ---- */
.owners-users { margin-top: 0; padding-top: 0; border-top: none; }
.owners-search { width: 100%; padding: 8px 11px; border-radius: 9px; font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--card-2); border: 1px solid var(--border); margin: 8px 0 10px; }
.owners-search:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }
.owners-users-list { max-height: 340px; overflow-y: auto; }
.user-row { gap: 10px; }
.user-row { flex-wrap: wrap; row-gap: 8px; }
.user-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1 1 180px; }
.user-meta b { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-sub { display: flex; align-items: center; gap: 4px; color: #7dd3fc; margin-top: 1px; }
.user-sub i { font-size: 12px; }
.user-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.user-row .btn { margin-left: 0; flex: none; }

/* ---- Badges tab ---- */
.badges-summary { display: flex; align-items: center; gap: 14px; margin: 6px 0 20px; }
.badges-count { font-size: 15px; color: var(--muted); white-space: nowrap; }
.badges-count b { font-size: 22px; color: var(--text); }
.badges-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.badges-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #c8894b, #f5c451, #7ee0ff); transition: width .5s var(--ease); }
.badge-cat { margin-bottom: 18px; }
.badge-cat .sub-h { margin-bottom: 10px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.badge-card { display: flex; gap: 12px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); position: relative; overflow: hidden; }
.badge-card.locked { opacity: .62; }
.badge-card.earned { border-color: color-mix(in srgb, var(--bt) 45%, var(--border)); }
.badge-card.earned::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--bt) 14%, transparent), transparent 60%); }
.badge-ic { flex: none; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.badge-ic .bsvg { width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.badge-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-info b { font-size: 13.5px; color: var(--text); }
.badge-info .muted { font-size: 11.5px; line-height: 1.35; }
.badge-info .xsmall { font-size: 10.5px; margin-top: 2px; }
.badge-earned { font-size: 11px; font-weight: 600; color: var(--bt); display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.badge-prog { height: 5px; border-radius: 999px; background: var(--card-2); overflow: hidden; margin-top: 6px; }
.badge-prog span { display: block; height: 100%; border-radius: 999px; background: var(--bt); }
.badge-card.pinned { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.badge-pinbtn { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
  color: var(--muted); background: var(--card-2); border: 1px solid var(--border);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s var(--ease); }
.badge-pinbtn:active:not([disabled]) { transform: scale(0.92); transition-duration: 0.08s; }
.badge-pinbtn:hover:not([disabled]) { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.badge-pinbtn.on { color: #fff; background: var(--accent); border-color: transparent; }
.badge-pinbtn[disabled] { opacity: .35; cursor: not-allowed; }
/* showcase strip in the summary */
.badges-showcase { margin-top: 14px; }
.bsh-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.bsh-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-height: 30px; }
.bsh-pin { position: relative; width: 56px; height: 56px; }
.bsh-pin .bsvg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.bsh-unpin { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; font-size: 11px;
  display: flex; align-items: center; justify-content: center; background: #e5484d; color: #fff; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.bsh-unpin:hover { background: #ff5a5f; }

/* badge unlock toast */
#badgeToasts { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.badge-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 14px;
  background: rgba(20,20,26,.96); border: 1px solid color-mix(in srgb, var(--bt, #f5c451) 55%, var(--border));
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--bt, #f5c451) 30%, transparent);
  transform: translateX(140%); opacity: 0; transition: transform .4s var(--spring, cubic-bezier(.2,1.3,.4,1)), opacity .4s ease; }
.badge-toast.in { transform: translateX(0); opacity: 1; }
.badge-toast .badge-ic { width: 46px; height: 46px; font-size: 24px; }
.badge-toast-txt { display: flex; flex-direction: column; }
.badge-toast-txt b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--bt, #f5c451); }
.badge-toast-txt span { font-size: 15px; font-weight: 700; color: #fff; }

/* ---- Admin tab ---- */
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.admin-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  position: relative; overflow: hidden; }
.admin-stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.15)); }
.admin-stat-num { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); line-height: 1.1; }
.admin-stat-lbl { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.admin-stat-lbl i { font-size: 13px; color: rgba(var(--accent-rgb), 0.9); }
.admin-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.admin-sim-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.admin-sim-row input { flex: 1; min-width: 120px; }
.admin-sim-row input[type="number"] { flex: 0 0 90px; min-width: 70px; }
.admin-sim-row .btn { flex: none; }
.admin-card .owners-head { margin-top: 0; }
.user-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.85), rgba(var(--accent-rgb), 0.45));
  border: 1px solid rgba(var(--accent-rgb), 0.35); }
.user-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan-pill { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted); background: var(--card-2); }
.plan-pill.is-comped { color: #f0abfc; border-color: rgba(240, 171, 252, 0.35); background: rgba(240, 171, 252, 0.08); }
.plan-pill.is-timed { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.35); background: rgba(125, 211, 252, 0.08); }
.comp-timed { flex: none; padding: 5px 8px; border-radius: 8px; font-size: 12px; font-family: inherit;
  color: var(--muted); background: var(--card-2); border: 1px solid var(--border); cursor: pointer; }
.comp-timed:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }
.comp-timed:hover { color: var(--text); }
.comp-custom { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.comp-days { width: 92px; padding: 5px 8px; border-radius: 8px; font-size: 12px; font-family: inherit;
  color: var(--text); background: var(--card-2); border: 1px solid var(--border); }
.comp-days:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }
.plan-pill.is-founder { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }
.plan-pill.is-pro { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.user-row { padding: 9px 12px; transition: border-color 0.15s, background 0.15s; }
.user-row:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.owners-users-list { max-height: 460px; }

/* ---- Owner admin: remote support editor ---- */
.owners-support { margin-top: 0; padding-top: 0; border-top: none; }
.support-quick { border: 1px solid var(--border); border-radius: 10px; background: var(--card-2); padding: 10px 12px; margin: 10px 0 4px; }
.support-quick-head { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.support-quick-head i { color: rgba(var(--accent-rgb), 0.9); }
.support-quick-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.support-widget { flex: 1 1 160px; min-width: 140px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--card); border: 1px solid var(--border); }
.support-widget:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }
.support-danger { color: #f87171; }
.support-danger:hover { border-color: rgba(248, 113, 113, 0.5); }
.support-head-btns { display: flex; gap: 6px; }
.support-sections { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.support-sec { border: 1px solid var(--border); border-radius: 9px; background: var(--card-2); padding: 0; }
.support-sec summary { cursor: pointer; padding: 8px 12px; font-size: 13px; user-select: none; display: flex; align-items: baseline; gap: 8px; }
.support-sec[open] summary { border-bottom: 1px solid var(--border); }
.support-json { width: 100%; min-height: 180px; max-height: 420px; resize: vertical; border: none; outline: none;
  background: transparent; color: var(--text); font: 12px/1.5 'Cascadia Code', Consolas, monospace; padding: 10px 12px; box-sizing: border-box; }
.support-sec-btns { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); }

/* ===================== Connections (modern platform cards) ===================== */
.connx-sub { max-width: 72ch; margin: -6px 0 22px; }
.connx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 18px; width: 100%; }
@media (max-width: 980px) { .connx-grid { grid-template-columns: 1fr; } }
.connx-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 42%), var(--card);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--edge-hi);
  animation: cardIn 0.55s var(--spring-soft) backwards;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.connx-card:nth-child(2) { animation-delay: 0.05s; }
.connx-card:nth-child(3) { animation-delay: 0.1s; }
.connx-card:nth-child(4) { animation-delay: 0.15s; }
.connx-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
/* brand glow along the top edge */
.connx-card::before { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 2px; border-radius: 2px; opacity: 0.85; }
.connx-card[data-platform="tiktok"]::before { background: linear-gradient(90deg, transparent, var(--tiktok), #fe2c55, transparent); }
.connx-card[data-platform="twitch"]::before { background: linear-gradient(90deg, transparent, var(--twitch), transparent); }
.connx-card[data-platform="youtube"]::before { background: linear-gradient(90deg, transparent, var(--youtube), transparent); }
.connx-card[data-platform="kick"]::before { background: linear-gradient(90deg, transparent, var(--kick), transparent); }
.connx-card[data-platform="tiktok"]:hover { border-color: rgba(254, 44, 85, 0.35); }
.connx-card[data-platform="twitch"]:hover { border-color: rgba(145, 70, 255, 0.4); }
.connx-card[data-platform="youtube"]:hover { border-color: rgba(255, 0, 51, 0.35); }
.connx-card[data-platform="kick"]:hover { border-color: rgba(83, 252, 24, 0.3); }

.connx-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
/* Full-colour brand tiles: each platform's real mark on its brand surface. */
.connx-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; font-size: 24px; }
.connx-ic svg { width: 26px; height: 26px; display: block; }
.connx-card[data-platform="tiktok"] .connx-ic { background: #010101; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.connx-card[data-platform="twitch"] .connx-ic { background: #9146ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 4px 14px rgba(145, 70, 255, 0.35); }
.connx-card[data-platform="youtube"] .connx-ic { background: #ff0033; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 4px 14px rgba(255, 0, 51, 0.3); }
.connx-card[data-platform="kick"] .connx-ic { background: #0e0e10; box-shadow: inset 0 0 0 1px rgba(83, 252, 24, 0.35), 0 4px 14px rgba(83, 252, 24, 0.18); }
.connx-meta { min-width: 0; }
.connx-meta h4 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.connx-meta p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

.connx-state {
  margin-left: auto; flex: none; padding: 4px 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--muted);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.connx-state[data-state="live"] { background: rgba(58, 210, 159, 0.12); border-color: rgba(58, 210, 159, 0.4); color: #3ad29f; }
.connx-state[data-state="connected"] { background: rgba(58, 210, 159, 0.07); border-color: rgba(58, 210, 159, 0.26); color: #8fdcc2; }
.connx-state[data-state="connecting"], .connx-state[data-state="reconnecting"] { background: rgba(240, 180, 41, 0.1); border-color: rgba(240, 180, 41, 0.36); color: #f0b429; }
.connx-state[data-state="error"] { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.38); color: #f87171; }

.connx-body { padding: 16px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.connx-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 8px; }
.connx-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.connx-row input { flex: 1 1 160px; min-width: 0; padding: 10px 13px; font-size: 14px; }
.connx-note {
  margin-top: 11px; padding: 8px 12px; border-radius: 9px; font-size: 12px; line-height: 1.45;
  background: rgba(240, 180, 41, 0.09); border: 1px solid rgba(240, 180, 41, 0.28); color: #f0b429;
}
.connx-note.blocked { background: rgba(248, 113, 113, 0.09); border-color: rgba(248, 113, 113, 0.32); color: #f87171; }
.connx-msg { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted); font-family: var(--mono); min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connx-foot { display: flex; align-items: center; gap: 7px; margin-top: 20px; }