/* ════════════════════════════════════════════════════════════════
   ClipHunter UI V2 — feature-flagged dashboard refresh.
   Activated by `body.ui-v2` (set by app-v2-shim.js when the flag is on).
   Every selector here is scoped under .ui-v2 so it can sit alongside
   app.css without affecting the legacy UI for users who haven't opted in.

   Visual identity: Variant A (muted teal, matte surfaces, Inter +
   JetBrains Mono, no neon glow). Layout: Variant C (hover-expand
   sidebar, compact single-row event cards, big right-aligned hype
   number). Density tighter than Variant A.
   ════════════════════════════════════════════════════════════════ */

/* ── Color + font tokens (override the legacy palette) ────────── */
body.ui-v2{
  /* Surfaces — neutral slate, no green tint */
  --bg:        #0c0e12;
  --bg2:       #14161c;
  --bg3:       #1c1f27;
  --bg-hover:  #232732;
  /* Text */
  --text:      #e7e9ee;
  --muted:     #8b93a1;
  --text-dim:  #626a78;
  /* Accent — indigo/violet, used sparingly */
  --teal:      #6d5efc;
  --purple:    #8b7dff;
  --purple2:   #8b7dff;
  --amber:     #f5a524;
  --red:       #ef4d57;
  --green:     #19c37d;
  /* Borders — neutral */
  --border:    #20242c;
  --border2:   #2b303a;
  /* v2-only tokens */
  --v2-accent-bright: #8b7dff;
  --v2-border-strong: #2b303a;
  /* Hype ramp — single indigo→violet hue by intensity (no rainbow) */
  --v2-hype-low:  #6b7280;
  --v2-hype-mid:  #6d5efc;
  --v2-hype-high: #8b7dff;
  --v2-hype-max:  #b08bff;
  /* Fonts — Space Grotesk display, JetBrains Mono for live data only */
  --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  background:#0c0e12;
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size:1rem;
}

/* ── Light mode — higher specificity than body.ui-v2 so it wins. Token-driven
   surfaces/text/accents flip here; any remaining hardcoded colors in this file
   get audited in the light-mode polish pass. ── */
html[data-mode="light"] body.ui-v2{
  --bg:        #f6f7f9;
  --bg2:       #ffffff;
  --bg3:       #eef0f4;
  --bg-hover:  #e7eaef;
  --text:      #15171c;
  --muted:     #5e6470;
  --text-dim:  #8a909c;
  --teal:      #5a4de0;
  --purple:    #6d5efc;
  --purple2:   #6d5efc;
  --border:    #e6e8ec;
  --border2:   #d6d9e0;
  --v2-accent-bright: #6d5efc;
  --v2-border-strong: #d6d9e0;
  --v2-hype-low:  #9aa0ab;
  --v2-hype-mid:  #5a4de0;
  --v2-hype-high: #6d5efc;
  --v2-hype-max:  #8b6cf0;
  background:#f6f7f9;
}

/* Force Inter as the body font on every text-bearing element. Input/button/
   select don't inherit font-family from body by default, so they need explicit
   rules. Mono elements get JetBrains Mono via the targeted block below. */
body.ui-v2,
body.ui-v2 button,
body.ui-v2 input,
body.ui-v2 select,
body.ui-v2 textarea,
body.ui-v2 a,
body.ui-v2 div,
body.ui-v2 span,
body.ui-v2 p,
body.ui-v2 h1,
body.ui-v2 h2,
body.ui-v2 h3,
body.ui-v2 h4,
body.ui-v2 label{font-family:'Space Grotesk', system-ui, -apple-system, sans-serif !important}

/* Monospaced elements — stats values, sliders readout, badges, code-style
   metadata. JetBrains Mono is the chosen typeface from Variant A. */
body.ui-v2 .hstat-val,
body.ui-v2 .hslider-val,
body.ui-v2 .hslider-group .val,
body.ui-v2 .max-ch-input,
body.ui-v2 .hype-num-input,
body.ui-v2 .ev-meta,
body.ui-v2 .ev-game,
body.ui-v2 .ev-time,
body.ui-v2 .ev-tag,
body.ui-v2 .ev-badge,
body.ui-v2 .clip-lnk,
body.ui-v2 .ev-btn,
body.ui-v2 .clip-err,
body.ui-v2 .badge,
body.ui-v2 .ch-v,
body.ui-v2 .v2-num,
body.ui-v2 .bc-score-num,
body.ui-v2 .bc-time,
body.ui-v2 .bc-game,
body.ui-v2 .bc-rank,
body.ui-v2 .sniper-views,
body.ui-v2 .mtab-badge,
body.ui-v2 .trending-toolbar,
body.ui-v2 #am-countdown{font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important}

/* Kill the neon glow box-shadows from the legacy buttons */
body.ui-v2 .btn{box-shadow:none !important}
body.ui-v2 .btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
body.ui-v2 .btn-primary:hover{background:var(--v2-accent-bright);border-color:var(--v2-accent-bright)}

/* ── Header ──────────────────────────────────────────────────── */
body.ui-v2 header{padding:12px 22px;gap:24px;border-bottom:1px solid var(--border);display:flex;align-items:center}
body.ui-v2 .logo{font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
body.ui-v2 .logo-icon{width:24px;height:24px}
body.ui-v2 .logo span,body.ui-v2 .logo b{color:transparent;-webkit-text-fill-color:transparent}

/* Stats grouped on the left, sliders pushed to the right within
   header-center. The 5th child of .header-center is the first
   .hslider-group (after the 4 .hstat); margin-left:auto on it
   absorbs all the remaining horizontal space, anchoring it (and
   the rest of the sliders) to the far right side of header-center. */
body.ui-v2 .header-center{gap:22px;display:flex;align-items:center;flex:1}
body.ui-v2 .header-center > div:nth-of-type(5){margin-left:auto}
body.ui-v2 .hstat{min-width:auto;text-align:left;display:flex;flex-direction:column;gap:1px}
body.ui-v2 .hstat-val{font-size:1.0625rem;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.1;font-family:var(--mono)}
body.ui-v2 .hstat-lbl{font-size:0.6875rem;color:var(--text-dim);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
body.ui-v2 #s-mon{color:var(--teal)}

body.ui-v2 .hslider-group{font-size:0.875rem;color:var(--muted);gap:7px}
body.ui-v2 .hslider-group input[type=range]{width:80px;accent-color:var(--teal)}
body.ui-v2 .hslider-val{font-family:var(--mono);color:var(--text);font-size:0.875rem}
body.ui-v2 .hslider-val.spike{color:var(--text)}
body.ui-v2 .hype-num-input,body.ui-v2 .max-ch-input{background:var(--bg2);border:1px solid var(--border2);color:var(--text);font-family:var(--mono)}
body.ui-v2 .hype-num-input:focus,body.ui-v2 .max-ch-input:focus{border-color:var(--teal)}

body.ui-v2 .account-btn{padding:4px 11px 4px 4px;border:1px solid var(--v2-border-strong);border-radius:8px;font-size:0.875rem;background:transparent}
body.ui-v2 .account-btn:hover{background:var(--bg2)}
body.ui-v2 .acct-avatar{width:22px;height:22px}
body.ui-v2 .acct-name{font-weight:500;font-size:0.875rem}
body.ui-v2 .badge{font-size:0.6875rem;font-family:var(--mono);padding:2px 6px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
body.ui-v2 .badge.free{color:var(--text-dim);background:var(--bg2)}
body.ui-v2 .badge.pro{color:var(--green);background:rgba(16,185,129,0.1)}
body.ui-v2 .badge.admin{color:var(--amber);background:rgba(245,158,11,0.1)}

body.ui-v2 .auto-btn{padding:5px 12px;font-size:0.875rem;font-weight:500;border:1px solid var(--v2-border-strong);background:transparent;color:var(--text);border-radius:5px;transition:all .15s}
body.ui-v2 .auto-btn:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-1px)}
/* Auto button is now in the secondary toolbar via the v2 shim. When active
   it gets a subtle pulsing glow + filled teal so the user can spot at a
   glance that hunting is running. Replaces the separate '🔴 Auto' indicator
   that used to live next to it (now hidden in v2 — see below). */
body.ui-v2 .auto-btn.active,
body.ui-v2 #auto-btn.active{background:var(--teal) !important;border-color:var(--teal) !important;color:#fff !important;
  box-shadow:none !important;animation:none}
/* The redundant "🔴 Auto" indicator that lived next to the auto button is
   hidden in v2 — the glow above conveys the same information without the
   visual noise. */
body.ui-v2 #auto-ind{display:none !important}

/* ── App layout — sidebar collapses to 54px, expands on hover ── */
body.ui-v2 .app{display:grid !important;grid-template-columns:54px 1fr !important;position:relative}
body.ui-v2 .sidebar{
  background:var(--bg);
  border-right:1px solid var(--border);
  overflow:hidden;
  width:54px;
  transition:width .18s ease, background .18s ease;
  display:flex;flex-direction:column;
  flex-shrink:0;
  position:relative;
  z-index:5;
}
body.ui-v2 .sidebar:hover{width:288px;background:var(--bg2);box-shadow:6px 0 24px rgba(0,0,0,0.35)}

/* Side tabs: vertical icon strip */
body.ui-v2 .sidebar-tabs{display:flex;flex-direction:column;padding:8px 0;gap:2px;border-bottom:1px solid var(--border);background:transparent}
body.ui-v2 .stab{
  display:flex;align-items:center;gap:12px;
  padding:9px 17px;
  font-size:0.9375rem;font-weight:500;
  color:var(--muted);background:transparent;
  cursor:pointer;white-space:nowrap;
  border:none;border-left:2px solid transparent;
  transition:color .15s ease, background .15s ease, padding-left .15s ease, border-color .15s ease;
  text-align:left;
  font-family:var(--sans);
  border-radius:0;
  letter-spacing:0;
  text-transform:none;
}
body.ui-v2 .stab .v2-icon{width:20px;text-align:center;flex-shrink:0;font-size:1.0625rem;transition:transform .15s ease;display:inline-block}
body.ui-v2 .stab:hover .v2-icon{transform:scale(1.12)}
body.ui-v2 .stab .v2-lbl{opacity:0;transition:opacity .15s;font-weight:500}
body.ui-v2 .sidebar:hover .stab .v2-lbl{opacity:1}
body.ui-v2 .stab.active{color:var(--text);background:rgba(109,94,252,0.06);border-left-color:var(--teal)}
body.ui-v2 .stab:hover:not(.active){color:var(--text);background:var(--bg3)}
body.ui-v2 .sidebar:hover .stab:hover:not(.active){padding-left:21px}

/* Panels — keep the channel list visible (avatars centered when collapsed),
   hide only the auxiliary content (search box, toolbar, monitored-count
   header, prefs sections) until the sidebar expands on hover. */
body.ui-v2 .panel{padding:0}
body.ui-v2 .panel > *:not(.ch-list){opacity:0;pointer-events:none;transition:opacity .15s ease}
body.ui-v2 .sidebar:hover .panel > *:not(.ch-list){opacity:1;pointer-events:auto}
/* Monitored panel header has no class, so .panel > div selectors above catch
   it too. ch-list stays visible always. */
body.ui-v2 .ch-list{opacity:1 !important;pointer-events:auto !important}
body.ui-v2 .trending-search{padding:10px 14px 6px;background:transparent}
body.ui-v2 .trending-search .si,body.ui-v2 .trending-search input.si{background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:0.875rem;font-family:var(--sans);padding:7px 11px}
body.ui-v2 .trending-search .si:focus{border-color:var(--teal)}
body.ui-v2 .trending-toolbar{padding:5px 17px 6px;font-size:0.75rem;color:var(--text-dim);font-family:var(--mono);letter-spacing:.4px;text-transform:uppercase}
body.ui-v2 .trending-toolbar .btn{font-size:0.75rem;padding:3px 7px;border-radius:4px}

/* Channel rows — avatars centered when collapsed, full row on hover */
body.ui-v2 .ch-list{padding:2px 0 12px;background:transparent}
body.ui-v2 .ch-item{
  display:flex;align-items:center;
  padding:5px 0;
  border-radius:6px;cursor:pointer;
  white-space:nowrap;justify-content:center;
  transition:background .15s ease, transform .15s ease, padding .15s ease;
  background:transparent !important;
}
body.ui-v2 .ch-item:hover{background:var(--bg-hover) !important}
body.ui-v2 .ch-item .add-btn{display:none}
body.ui-v2 .ch-item .ch-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;border:1.5px solid transparent;background:var(--bg3);font-size:0.75rem;font-weight:600;color:var(--muted)}
body.ui-v2 .ch-item.monitored .ch-av,
body.ui-v2 .ch-item .ch-av-wrap .ch-av{border-color:var(--teal)}
body.ui-v2 .ch-item .ch-av-wrap{position:relative}
body.ui-v2 .ch-item .ch-av-wrap .live-dot{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;background:var(--green);border-radius:50%;border:2px solid var(--bg2)}
body.ui-v2 .ch-item .ch-inf{display:none;flex:1;min-width:0}
body.ui-v2 .ch-item .ch-r{display:none}
/* Hide every child of .ch-item except the avatar (and avatar-wrap) when the
   sidebar is collapsed. The Monitored panel renders fav/remove buttons inside
   an inline-styled <div> with no class, so we need a generic *:not selector
   with !important to beat the inline display:flex. */
body.ui-v2 .ch-item > *:not(.ch-av):not(.ch-av-wrap){display:none !important}
body.ui-v2 .sidebar:hover .ch-item > *:not(.ch-av):not(.ch-av-wrap){display:flex !important}
body.ui-v2 .sidebar:hover .ch-item .ch-inf{flex-direction:column}
body.ui-v2 .sidebar:hover .ch-item .ch-r{flex-direction:column;align-items:flex-end;gap:2px}
body.ui-v2 .ch-item .ch-name{font-size:0.875rem;font-weight:500;color:var(--text)}
body.ui-v2 .ch-item .ch-game{font-size:0.75rem;color:var(--text-dim);margin-top:1px}
body.ui-v2 .ch-item .ch-v{font-family:var(--mono);font-size:0.75rem;color:var(--text-dim)}
/* Hover-expanded: full row */
body.ui-v2 .sidebar:hover .ch-item{justify-content:flex-start;padding:6px 8px;gap:10px}
body.ui-v2 .sidebar:hover .ch-item:hover{transform:translateX(3px)}
body.ui-v2 .sidebar:hover .ch-item .add-btn{display:flex;width:20px;height:20px;font-size:0.8125rem;border-radius:4px}
body.ui-v2 .sidebar:hover .ch-item .ch-inf{display:flex;flex-direction:column}
body.ui-v2 .sidebar:hover .ch-item .ch-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px}

/* ── Main column ─────────────────────────────────────────────── */
body.ui-v2 .main{display:flex;flex-direction:column;min-height:0}
body.ui-v2 .main-tabs{padding:10px 22px 0;gap:26px;border-bottom:1px solid var(--border);align-items:center;background:transparent;display:flex}
body.ui-v2 .mtab{
  padding-bottom:12px;font-size:0.9375rem;font-weight:500;
  color:var(--muted);background:transparent;
  cursor:pointer;border:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease, transform .15s ease;
  text-transform:none;letter-spacing:0;
  font-family:var(--sans);
  display:inline-flex;align-items:center;gap:6px;
  border-radius:0;
}
body.ui-v2 .mtab.active{color:var(--text);border-bottom-color:var(--teal);background:transparent}
body.ui-v2 .mtab:hover:not(.active){color:var(--text);transform:translateY(-1px);background:transparent}
body.ui-v2 .mtab-badge{font-size:0.75rem;background:var(--bg2);padding:1px 6px;border-radius:8px;color:var(--muted);font-family:var(--mono);margin-left:0}
body.ui-v2 .mtab:hover .mtab-badge{background:var(--bg3)}
/* SVG icons that appear INSIDE main tabs (e.g. the Twitch glyph the shim
   inserts before "VOD Reviewer"). Without explicit sizing they render at
   the SVG's default which is way too large for the tab strip. */
body.ui-v2 .mtab svg{width:14px;height:14px;flex-shrink:0;display:inline-block;vertical-align:middle;margin-right:2px}
body.ui-v2 .mtab .ic-twitch,
body.ui-v2 .mtab:hover .ic-twitch{color:#9146ff}

body.ui-v2 .main-tab-right{display:flex;gap:6px;align-items:center;padding-bottom:8px}
body.ui-v2 .main-tab-right .btn,
body.ui-v2 .main-tab-right .mtab{
  font-size:0.8125rem !important;padding:6px 12px !important;
  background:transparent;border:1px solid var(--v2-border-strong);color:var(--muted);
  border-radius:5px;cursor:pointer;font-family:var(--sans);font-weight:500;
  transition:all .15s ease;
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:0;border-bottom:1px solid var(--v2-border-strong) !important;
}
body.ui-v2 .main-tab-right .btn:hover,
body.ui-v2 .main-tab-right .mtab:hover{color:var(--text);border-color:var(--teal) !important;transform:translateY(-1px)}
body.ui-v2 .main-tab-right svg{width:13px;height:13px;flex-shrink:0}
/* Discord brand blue on the SVG regardless of button hover state. */
body.ui-v2 .main-tab-right .ic-discord,
body.ui-v2 .main-tab-right .mtab:hover .ic-discord{color:#5865F2}

/* Full-width feed: the content area fills the main column edge-to-edge and
   expands/contracts with the sidebar (54px collapsed → 288px pinned via the
   .app grid). Each card is a grid (auto 1fr auto auto) so the channel info
   column absorbs the extra width while HYPE + action buttons stay pinned to
   the right edge. */
body.ui-v2 .content-area{padding:12px 22px;gap:7px;width:100%;box-sizing:border-box}

/* ── Pinned-sidebar mode ──────────────────────────────────────────
   When body.sidebar-pinned is set (user picked 'Always expanded' in
   settings), the sidebar stays at full width and all the hover-only
   reveals show by default. Overrides the collapse rules above. */
body.ui-v2.sidebar-pinned .app{grid-template-columns:288px 1fr !important}
body.ui-v2.sidebar-pinned .sidebar{width:288px !important;background:var(--bg2) !important;box-shadow:none !important}
body.ui-v2.sidebar-pinned .panel > *{opacity:1 !important;pointer-events:auto !important}
body.ui-v2.sidebar-pinned .stab .v2-lbl{opacity:1 !important}
body.ui-v2.sidebar-pinned .ch-item{justify-content:flex-start !important;padding:6px 8px !important;gap:10px}
body.ui-v2.sidebar-pinned .ch-item > *:not(.ch-av):not(.ch-av-wrap){display:flex !important}
body.ui-v2.sidebar-pinned .ch-item .ch-inf{flex-direction:column}
body.ui-v2.sidebar-pinned .ch-item .ch-r{flex-direction:column;align-items:flex-end;gap:2px}
body.ui-v2.sidebar-pinned .ch-item .add-btn{display:flex !important;width:20px;height:20px;border-radius:4px}

/* ── Event cards (single-row, big hype number on right) ──────── */
/* Feed rows, not boxed cards: a single hairline divider + whitespace does the
   separating. Hovering lifts the row with a subtle surface, not a glowing border. */
body.ui-v2 .ev-card{
  background:transparent;
  border:none !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0;
  padding:16px 22px;
  display:grid !important;
  grid-template-columns:auto 1fr auto auto !important;
  gap:16px;
  align-items:center;
  transition:background .12s ease;
}
body.ui-v2 .ev-card:hover{background:var(--bg2)}
body.ui-v2 .ev-card.fav-card{border-bottom-color:var(--border) !important}

body.ui-v2 .ev-card .ev-av{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg3);
  font-size:0.8125rem;font-weight:600;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
  /* Reset legacy grid placement */
  grid-column:1;grid-row:1;
}
body.ui-v2 .ev-mid{display:flex;flex-direction:column;gap:3px;min-width:0;grid-column:2;grid-row:1}
body.ui-v2 .ev-row1{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
body.ui-v2 .ev-name{font-size:1rem;font-weight:600;color:var(--text)}
body.ui-v2 .ev-game{font-size:0.8125rem;color:var(--muted);font-family:var(--sans);text-transform:none;margin-left:0}
body.ui-v2 .ev-meta{font-size:0.75rem;color:var(--text-dim);font-family:var(--mono)}

/* Quiet neutral chips — they carry info (SPIKE 5×, FUNNY) without competing
   with the accent. Only EXTREME earns a colored treatment. */
body.ui-v2 .ev-badge,
body.ui-v2 .ev-tag{
  font-family:var(--sans);font-size:0.6875rem;font-weight:500;
  padding:2px 8px;border-radius:6px;
  letter-spacing:.2px;text-transform:none;
  background:var(--bg3);color:var(--muted);border:1px solid var(--border);
  display:inline-flex;align-items:center;gap:4px;
}
body.ui-v2 .ev-badge.extreme{color:var(--red);background:rgba(239,77,87,0.08);border-color:rgba(239,77,87,0.3)}

body.ui-v2 .ev-hype{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0;padding:0 4px;grid-column:3;grid-row:1}
body.ui-v2 .ev-hype .v2-num{font-family:var(--mono);font-size:1.25rem;font-weight:700;line-height:1}
body.ui-v2 .ev-hype .v2-lbl{font-size:0.625rem;color:var(--text-dim);letter-spacing:.6px;text-transform:uppercase;font-family:var(--sans)}

body.ui-v2 .ev-actions{display:flex;gap:5px;flex-shrink:0;grid-column:4;grid-row:1;align-items:center}
/* Secondary actions are quiet ghosts; only Watch (.primary) wears the accent. */
body.ui-v2 .clip-lnk,body.ui-v2 .ev-btn{
  font-family:var(--sans);font-size:0.8125rem;font-weight:500;
  letter-spacing:0;
  padding:6px 12px;
  background:transparent;border:1px solid var(--border2);
  color:var(--muted);
  border-radius:7px;cursor:pointer;
  text-transform:none;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
  transition:all .15s ease;
}
body.ui-v2 .clip-lnk:hover,body.ui-v2 .ev-btn:hover{border-color:var(--border2);color:var(--text);background:var(--bg-hover);transform:none}
body.ui-v2 .clip-lnk.primary,body.ui-v2 .ev-btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
body.ui-v2 .clip-lnk.primary:hover,body.ui-v2 .ev-btn.primary:hover{background:var(--v2-accent-bright);border-color:var(--v2-accent-bright);color:#fff}
body.ui-v2 .clip-lnk svg,body.ui-v2 .ev-btn svg{width:13px;height:13px;flex-shrink:0}
/* Monochrome line icons that replaced the old emoji */
body.ui-v2 .v2-ic{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0}
body.ui-v2 .stab .v2-icon{display:inline-flex;align-items:center;justify-content:center}
body.ui-v2 .stab .v2-icon .v2-ic{width:18px;height:18px}
body.ui-v2 .ev-fav-btn .v2-ic,body.ui-v2 .ev-bl-btn .v2-ic{width:13px;height:13px}
body.ui-v2 .fav-btn .v2-ic,body.ui-v2 .bl-btn .v2-ic,body.ui-v2 .add-btn .v2-ic{width:13px;height:13px}
body.ui-v2 .ic-twitch{color:#9146ff}
body.ui-v2 .ev-btn:hover .ic-twitch,body.ui-v2 .clip-lnk:hover .ic-twitch{color:inherit}
body.ui-v2 .clip-err{font-family:var(--mono);font-size:0.75rem;font-weight:700;color:var(--red);padding:6px 11px;border:1px solid rgba(239,68,68,0.35);border-radius:5px;background:rgba(239,68,68,0.06)}
body.ui-v2 .clip-lnk.dis{opacity:.5;border-color:var(--border)}

/* Quick-action buttons (⭐ 🚫) on each card */
body.ui-v2 .ev-card-actions{display:inline-flex;gap:4px;align-items:center;margin-left:6px}
body.ui-v2 .ev-fav-btn,body.ui-v2 .ev-bl-btn{width:20px;height:20px;border-radius:4px;border:1px solid var(--v2-border-strong);background:transparent;color:var(--text-dim);font-size:0.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.6;transition:all .15s ease}
body.ui-v2 .ev-fav-btn:hover{border-color:var(--amber);color:var(--amber);opacity:1}
body.ui-v2 .ev-bl-btn:hover{border-color:var(--red);color:var(--red);opacity:1}
body.ui-v2 .ev-fav-btn.active{background:rgba(245,158,11,0.15);border-color:var(--amber);color:var(--amber);opacity:1}
body.ui-v2 .ev-bl-btn.active{background:rgba(239,68,68,0.15);border-color:var(--red);color:var(--red);opacity:1}

/* Inline clip player below event card */
body.ui-v2 .clip-player-host{grid-column:1 / -1;grid-row:2;margin-top:10px}

/* ── Modals — inherit the new tokens, light touch-ups ─────────── */
body.ui-v2 .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:22px;font-family:var(--sans)}
body.ui-v2 .modal h3{font-weight:600;letter-spacing:-.01em;color:var(--text)}
body.ui-v2 .modal label{font-family:var(--sans);color:var(--muted)}
body.ui-v2 .modal input[type=text],
body.ui-v2 .modal input[type=email],
body.ui-v2 .modal input[type=number],
body.ui-v2 .modal textarea,
body.ui-v2 .modal select{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--sans);border-radius:5px}
body.ui-v2 .modal input:focus,body.ui-v2 .modal textarea:focus,body.ui-v2 .modal select:focus{border-color:var(--teal)}

/* ── Auto-mode banner ─────────────────────────────────────────── */
body.ui-v2 #automode-banner{background:rgba(109,94,252,0.06);border:1px solid var(--border2);border-radius:6px;padding:10px 16px;margin:10px 22px;display:flex;align-items:center;gap:10px}
/* Force one consistent typeface + size across every span in the banner.
   The legacy markup has inline styles mixing mono + sans + different sizes.
   Override unconditionally so it reads as a single sentence. */
body.ui-v2 #automode-banner,
body.ui-v2 #automode-banner span,
body.ui-v2 #automode-banner b,
body.ui-v2 #automode-banner strong{
  font-family:'Inter', system-ui, sans-serif !important;
  font-size:0.875rem !important;
  color:var(--text) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:400 !important;
}
body.ui-v2 #automode-banner b,
body.ui-v2 #automode-banner strong{font-weight:600 !important}
/* The countdown gets the mono treatment (just the time itself) so it's
   visually distinct from the prose. */
body.ui-v2 #am-countdown,
body.ui-v2 #automode-banner #am-countdown{
  font-family:'JetBrains Mono', monospace !important;
  font-size:0.8125rem !important;
  color:var(--teal) !important;
}
body.ui-v2 #automode-banner .btn{font-size:0.8125rem !important;padding:5px 11px !important;border-radius:4px}

/* ── Notification toasts ──────────────────────────────────────── */
body.ui-v2 .notif{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:11px 14px;font-family:var(--sans);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
body.ui-v2 .notif.ext{border-color:rgba(239,68,68,0.4)}
body.ui-v2 .notif.info{border-color:rgba(109,94,252,0.4)}
body.ui-v2 .notif-title{font-weight:600;font-size:0.9375rem;color:var(--text)}
body.ui-v2 .notif-body{font-size:0.875rem;color:var(--muted);margin-top:2px;line-height:1.5}

/* ── Empty states ─────────────────────────────────────────────── */
body.ui-v2 .empty{padding:60px 24px;text-align:center;color:var(--muted)}
body.ui-v2 .empty-ico{font-size:3.125rem;margin-bottom:14px;opacity:.4}
body.ui-v2 .empty h3{font-family:var(--mono);font-size:1rem;letter-spacing:1px;color:var(--text-dim);margin-bottom:8px;font-weight:600}
body.ui-v2 .empty p{font-size:0.9375rem;color:var(--text-dim);line-height:1.55;max-width:380px;margin:0 auto}

/* ── Tag-clip cards (Funny / Win / Favs) inherit new buttons ──── */
body.ui-v2 .bc-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:11px 14px}
body.ui-v2 .bc-card:hover{border-color:var(--v2-border-strong);box-shadow:none}
body.ui-v2 .bc-rank{font-family:var(--mono);color:var(--text-dim);font-weight:700}
body.ui-v2 .bc-ch{font-size:0.9375rem;font-weight:600;color:var(--text)}
body.ui-v2 .bc-game,body.ui-v2 .bc-time{font-family:var(--mono);font-size:0.75rem;color:var(--text-dim)}
body.ui-v2 .bc-score-num{font-family:var(--mono);font-size:1.25rem;font-weight:700}
body.ui-v2 .bc-score-lbl{font-size:0.625rem;color:var(--text-dim);letter-spacing:.6px;text-transform:uppercase;font-family:var(--sans)}

/* ── Sniper cards inherit new buttons ─────────────────────────── */
body.ui-v2 .sniper-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px}
body.ui-v2 .sniper-card:hover{border-color:var(--v2-border-strong)}
body.ui-v2 .sniper-title{font-size:0.9375rem;font-weight:500;color:var(--text)}
body.ui-v2 .sniper-meta{font-size:0.8125rem;color:var(--muted)}
body.ui-v2 .sniper-views{font-family:var(--mono);font-size:0.8125rem;color:var(--teal);font-weight:600}

/* ── Settings modal — accent for active theme/size ────────────── */
body.ui-v2 .theme-chip{transition:transform .15s ease}
body.ui-v2 .theme-chip:hover{transform:scale(1.08)}
body.ui-v2 .theme-chip.active{outline:2px solid var(--teal);outline-offset:2px}

/* ── Discord modal schedule layout — already fixed in v1, keep it ── */
body.ui-v2 .modal label.discord-schedule-toggle{font-family:var(--sans)}
body.ui-v2 .modal label.discord-schedule-toggle input{accent-color:var(--teal)}