/* VoiceFame desktop v2 ("Theater" direction).
   Everything is scoped under bodyhtml[data-ui="v2"] so the current UI is untouched unless
   the v2 flag is on (localStorage 'vf-ui' = 'v2', or ?ui=v2). */

html[data-ui="v2"] body {
  --v2-bg: #07090F;
  --v2-glass: rgba(8,10,16,0.28);
  --v2-glass-solid: rgba(20,25,36,0.7);
  --v2-line: rgba(255,255,255,0.08);
  --v2-line-2: rgba(255,255,255,0.12);
  --v2-tx: #E8ECF1;
  --v2-tx2: #B4BAC4;
  --v2-tx3: #8A92A3;
  --v2-gold: #E0B341;
  --v2-live: #D93A3F;
  --v2-viz1: #B450C8;
  --v2-viz2: #3C64C8;
  --v2-aura1: #5B2A86;
  --v2-aura2: #1F4FA8;
  background: var(--v2-bg);
  font-family: 'Montserrat', system-ui, sans-serif;
}
html[data-ui="v2"] body.light {
  --v2-bg: #F5F6FA;
  --v2-glass: rgba(255,255,255,0.55);
  --v2-glass-solid: rgba(255,255,255,0.85);
  --v2-line: rgba(26,30,44,0.08);
  --v2-line-2: rgba(26,30,44,0.14);
  --v2-tx: #1A1E2C;
  --v2-tx2: #515972;
  --v2-tx3: #6E768C;
  --v2-gold: #94680A;
}

/* ── Page frame + aura (the visualizer as room light) ── */
html[data-ui="v2"] .v2-page { position: relative; max-width: 1360px; margin: 0 auto; padding: 18px 40px 48px; box-sizing: border-box; color: var(--v2-tx); }
html[data-ui="v2"] .v2-aura-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
html[data-ui="v2"] .v2-aura { position: absolute; border-radius: 50%; animation: v2Aura 2.6s ease-in-out infinite; will-change: opacity; }
html[data-ui="v2"] .v2-aura.a1 { left: -6%; width: 80%; top: 0; height: 900px; background: radial-gradient(closest-side, rgba(91,42,134,.55), rgba(91,42,134,0)); }
html[data-ui="v2"] .v2-aura.a2 { left: 25%; width: 70%; top: 160px; height: 800px; background: radial-gradient(closest-side, rgba(31,79,168,.45), rgba(31,79,168,0)); animation-delay: .8s; }
html[data-ui="v2"] body.light .v2-aura { animation: none; opacity: .28; }
html[data-ui="v2"] .v2-page > * { position: relative; z-index: 1; }
@keyframes v2Aura { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* ── Top row: browse pills (left) + icon switch (right) ── */
html[data-ui="v2"] .v2-toprow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
html[data-ui="v2"] .v2-title { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
html[data-ui="v2"] .v2-pills, html[data-ui="v2"] .v2-icons { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--v2-glass-solid); border: 1px solid var(--v2-line); }
html[data-ui="v2"] .v2-pill { height: 40px; padding: 0 16px; border-radius: 10px; border: none; background: transparent; color: var(--v2-tx2); font: 700 13px 'Montserrat', sans-serif; display: flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
html[data-ui="v2"] .v2-pill.on, html[data-ui="v2"] .v2-ic.on { background: var(--v2-tx); color: var(--v2-bg); }
html[data-ui="v2"] .v2-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #F05A5F; }
html[data-ui="v2"] .v2-ic { position: relative; width: 52px; height: 40px; border-radius: 10px; border: none; background: transparent; color: var(--v2-tx2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
html[data-ui="v2"] .v2-ic svg, html[data-ui="v2"] .v2-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] .v2-ic .badge { position: absolute; top: 3px; right: 4px; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--accent); color: #0B0F19; font: 900 9px 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: center; }

/* ── Stage ── */
html[data-ui="v2"] .v2-stage { position: relative; isolation: isolate; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--v2-line); }
html[data-ui="v2"] .v2-stage-media { position: absolute; inset: 0; z-index: 1; transition: right .35s ease, bottom .35s ease; }
html[data-ui="v2"] .v2-stage-media iframe, html[data-ui="v2"] .v2-stage-media video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
html[data-ui="v2"] .v2-scrim { position: absolute; left: 0; top: 0; z-index: 3; padding: 18px 26px; background: rgba(0,0,0,0.55); border-bottom-right-radius: 18px; color: #E8ECF1; pointer-events: none; }
html[data-ui="v2"] .v2-scrim .k { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #E0B341; }
html[data-ui="v2"] .v2-scrim .t { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin-top: 4px; }

/* ── Right slider (see-through overlay with an edge handle) ── */
html[data-ui="v2"] .v2-slider { position: absolute; top: 14px; right: 14px; bottom: 14px; width: 360px; z-index: 6; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(10,12,19,0.78); border: 1px solid rgba(255,255,255,0.12); box-sizing: border-box; transition: transform .35s ease; color: #E8ECF1; }
html[data-ui="v2"] .v2-slider.off { transform: translateX(374px); }
html[data-ui="v2"] .v2-handle { position: absolute; left: -40px; top: 50%; margin-top: -48px; width: 40px; height: 96px; border-radius: 14px 0 0 14px; border: 1px solid var(--v2-line-2); border-right: none; background: rgba(10,12,19,0.82); color: #E8ECF1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
html[data-ui="v2"] .v2-handle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
html[data-ui="v2"] .v2-slider.off .v2-handle svg { transform: rotate(180deg); }
html[data-ui="v2"] .v2-cap { height: 28px; padding: 0 4px 0 8px; display: flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: rgba(232,236,241,.75); }
html[data-ui="v2"] .v2-slider-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }

/* ── Bottom tray (category overlay) ── */
html[data-ui="v2"] .v2-tray { position: absolute; left: 14px; right: 388px; bottom: 14px; z-index: 5; padding: 12px; border-radius: 18px; background: rgba(10,12,19,0.78); border: 1px solid rgba(255,255,255,0.12); box-sizing: border-box; transition: transform .35s ease, right .35s ease; color: #E8ECF1; }
html[data-ui="v2"] .v2-stage.slider-off .v2-tray { right: 14px; }
html[data-ui="v2"] .v2-tray.off { transform: translateY(calc(100% + 14px)); }
html[data-ui="v2"] .v2-tray-tab { position: absolute; left: 50%; top: -30px; margin-left: -56px; min-width: 112px; height: 30px; padding: 0 12px; border-radius: 14px 14px 0 0; border: 1px solid var(--v2-line-2); border-bottom: none; background: rgba(10,12,19,0.82); color: #E8ECF1; display: flex; align-items: center; justify-content: center; gap: 6px; font: 800 10px 'Montserrat', sans-serif; letter-spacing: .12em; cursor: pointer; text-transform: uppercase; }
html[data-ui="v2"] .v2-tray-tab svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
html[data-ui="v2"] .v2-tray.off .v2-tray-tab svg { transform: rotate(180deg); }
html[data-ui="v2"] .v2-tray-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
html[data-ui="v2"] .v2-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; color: inherit; text-decoration: none; background: none; border: none; padding: 0; font-family: inherit; text-align: left; }
html[data-ui="v2"] .v2-card .art { aspect-ratio: 16 / 9; border-radius: 10px; background: #1B2130 center / cover no-repeat; border: 1px solid rgba(255,255,255,.08); }
html[data-ui="v2"] .v2-card .nm { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Rows inside overlays ── */
html[data-ui="v2"] .v2-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 10px; border-radius: 12px; border: none; background: transparent; color: #E8ECF1; font-family: 'Montserrat', sans-serif; text-align: left; cursor: pointer; flex-shrink: 0; width: 100%; box-sizing: border-box; }
html[data-ui="v2"] .v2-row:hover { background: rgba(255,255,255,.06); }
html[data-ui="v2"] .v2-row.on { background: rgba(255,255,255,.12); }
html[data-ui="v2"] .v2-row.on .ttl { color: var(--accent); }
html[data-ui="v2"] .v2-row .num { width: 24px; text-align: center; font-weight: 900; color: #8A92A3; flex-shrink: 0; }
html[data-ui="v2"] .v2-row .thumb { width: 74px; height: 42px; border-radius: 8px; background: #1B2130 center / cover no-repeat; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; box-sizing: border-box; }
html[data-ui="v2"] .v2-row .thumb.sq { width: 42px; }
html[data-ui="v2"] .v2-row .thumb.round { width: 42px; border-radius: 50%; }
html[data-ui="v2"] .v2-row .txt { flex: 1; min-width: 0; }
html[data-ui="v2"] .v2-row .ttl { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2-row .sub { display: block; font-size: 12px; color: rgba(232,236,241,.6); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2-row .meta { font-size: 11px; font-weight: 700; color: #8A92A3; flex-shrink: 0; }
html[data-ui="v2"] .v2-group { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--accent); padding: 10px 10px 2px; }
html[data-ui="v2"] .v2-seg { display: flex; gap: 6px; padding: 0 4px 4px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
html[data-ui="v2"] .v2-seg::-webkit-scrollbar { display: none; }
html[data-ui="v2"] .v2-seg:empty { display: none; }
html[data-ui="v2"] .v2-seg button { flex-shrink: 0; white-space: nowrap; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #B4BAC4; font: 800 11px 'Montserrat', sans-serif; cursor: pointer; }
html[data-ui="v2"] .v2-seg button.on { background: #E8ECF1; color: #0B0F19; border-color: #E8ECF1; }

/* ── Creator block (bottom of the slider) ── */
html[data-ui="v2"] .v2-creator { flex-shrink: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 10px; }
html[data-ui="v2"] .v2-creator .who { display: flex; align-items: center; gap: 10px; }
html[data-ui="v2"] .v2-avatar { width: 38px; height: 38px; border-radius: 50%; background: #3A2E5C center / cover; border: 2px solid #E0B341; flex-shrink: 0; box-sizing: border-box; }
html[data-ui="v2"] .v2-creator .nm { font-size: 14px; font-weight: 800; color: #E0B341; }
html[data-ui="v2"] .v2-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
html[data-ui="v2"] .v2-act { height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #E8ECF1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
html[data-ui="v2"] .v2-act.on { border-color: var(--accent); color: var(--accent); }
html[data-ui="v2"] .v2-act svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] .v2-follow { height: 32px; padding: 0 14px; border-radius: 16px; border: none; background: #E8ECF1; color: #0B0F19; font: 800 12px 'Montserrat', sans-serif; cursor: pointer; }
html[data-ui="v2"] .v2-follow.on { background: transparent; color: #E8ECF1; border: 1px solid rgba(255,255,255,.25); }

/* ── Control deck ── */
html[data-ui="v2"] .v2-deck { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
html[data-ui="v2"] .v2-time { font-size: 12px; color: var(--v2-tx2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
html[data-ui="v2"] .v2-wave { flex: 1; height: 44px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
html[data-ui="v2"] .v2-wave span { flex: 1; border-radius: 2px; background: rgba(255,255,255,.16); }
html[data-ui="v2"] body.light .v2-wave span { background: rgba(26,30,44,.14); }
html[data-ui="v2"] .v2-wave span.p1 { background: var(--v2-viz1); } html[data-ui="v2"] .v2-wave span.p2 { background: var(--accent); } html[data-ui="v2"] .v2-wave span.p3 { background: var(--v2-viz2); }
html[data-ui="v2"] .v2-iconbtn { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--v2-tx); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
html[data-ui="v2"] .v2-iconbtn.dim { color: var(--v2-tx2); }
html[data-ui="v2"] .v2-iconbtn.on { color: var(--accent); }
html[data-ui="v2"] .v2-play { width: 50px; height: 50px; border-radius: 50%; border: none; background: #FFFFFF; color: #0B0F19; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
html[data-ui="v2"] .v2-play svg { width: 18px; height: 18px; fill: currentColor; }
html[data-ui="v2"] .v2-ch { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: var(--v2-glass-solid); border: 1px solid var(--v2-line); flex-shrink: 0; }
html[data-ui="v2"] .v2-ch span { font-size: 11px; color: var(--v2-tx3); padding: 0 6px; }
html[data-ui="v2"] .v2-ch button { width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent; color: var(--v2-tx2); font: 800 12px 'Montserrat', sans-serif; cursor: pointer; }
html[data-ui="v2"] .v2-ch button.on { background: var(--accent); color: #0B0F19; }

/* Gold pill (TIP / BET / GIFT) that unfolds inline */
html[data-ui="v2"] .v2-gold { height: 44px; padding: 0 18px; border-radius: 22px; border: none; background: #E0B341; color: #0B0F19; font: 800 13px 'Montserrat', sans-serif; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; }
html[data-ui="v2"] .v2-gold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] .v2-goldgroup { height: 44px; padding: 0 4px 0 14px; border-radius: 22px; background: rgba(224,179,65,.14); border: 1px solid rgba(224,179,65,.5); display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
html[data-ui="v2"] .v2-goldgroup .lbl { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #E0B341; margin-right: 6px; }
html[data-ui="v2"] .v2-goldgroup button { height: 34px; min-width: 44px; padding: 0 10px; border-radius: 17px; border: none; background: #E0B341; color: #0B0F19; font: 800 13px 'Montserrat', sans-serif; cursor: pointer; }
html[data-ui="v2"] .v2-goldgroup button.x { min-width: 34px; width: 34px; background: transparent; color: #E0B341; }
/* Bet panel (desktop-app.js openBetPanel) — classic sports BET buttons and
   Theater's BET pill. Not scoped to data-ui="v2": classic desktop uses it too. */
.vf-betpop { --bp-tx: #E8ECF1; --bp-tx3: #8A92A3; --bp-line: rgba(255,255,255,.08); --bp-line2: rgba(255,255,255,.12); --bp-gold: #E0B341;
  position: fixed; z-index: 100000; width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 16px; border-radius: 18px; background: #141924; border: 1px solid var(--bp-line2); box-shadow: 0 18px 48px rgba(0,0,0,.45); color: var(--bp-tx); font-family: 'Montserrat', system-ui, sans-serif; text-align: left; }
body.light .vf-betpop { --bp-tx: #1A1E2C; --bp-tx3: #6E768C; --bp-line: rgba(26,30,44,.08); --bp-line2: rgba(26,30,44,.14); background: #fff; box-shadow: 0 18px 48px rgba(26,30,44,.18); }
.vf-betpop .hd { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.vf-betpop .hd .x { width: 30px; height: 30px; border: none; border-radius: 15px; background: transparent; color: var(--bp-tx3); font-size: 22px; line-height: 1; cursor: pointer; }
.vf-betpop .sub { font-size: 12px; color: var(--bp-tx3); margin: 2px 0 12px; }
.vf-betpop .row { display: flex; gap: 6px; margin-bottom: 8px; }
.vf-betpop .row button { flex: 1 1 0; min-width: 0; height: 38px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--bp-line2); background: rgba(255,255,255,.04); color: var(--bp-tx); font: 700 13px 'Montserrat', sans-serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-betpop .row button.on { background: var(--bp-gold); border-color: var(--bp-gold); color: #0B0F19; }
.vf-betpop .cust { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vf-betpop .cust input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--bp-line2); background: rgba(255,255,255,.04); color: var(--bp-tx); font: 600 13px 'Montserrat', sans-serif; }
.vf-betpop .cust span { font-size: 12px; color: var(--bp-tx3); white-space: nowrap; text-align: right; line-height: 1.35; }
.vf-betpop .mode { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); margin-bottom: 10px; }
body.light .vf-betpop .mode { background: #F0F1F5; }
.vf-betpop .mode button { flex: 1; height: 32px; border: none; border-radius: 10px; background: transparent; color: var(--bp-tx3); font: 700 12.5px 'Montserrat', sans-serif; cursor: pointer; }
.vf-betpop .mode button.on { background: #222936; color: var(--bp-tx); }
body.light .vf-betpop .mode button.on { background: #fff; box-shadow: 0 1px 3px rgba(26,30,44,.12); }
.vf-betpop .stat { width: 100%; height: 38px; margin-bottom: 8px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--bp-line2); background: rgba(255,255,255,.04); color: var(--bp-tx); font: 600 13px 'Montserrat', sans-serif; }
.vf-betpop .stat option, .vf-betpop .stat optgroup { background: #141924; color: #E8ECF1; }
body.light .vf-betpop .stat option, body.light .vf-betpop .stat optgroup { background: #fff; color: #1A1E2C; }
.vf-betpop .row.ou input { flex: 1.3 1 0; min-width: 0; height: 38px; padding: 0 12px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--bp-line2); background: rgba(255,255,255,.04); color: var(--bp-tx); font: 600 13px 'Montserrat', sans-serif; }
.vf-betpop .mode button:disabled { opacity: .5; cursor: default; line-height: 1.1; }
.vf-betpop .mode button small { display: block; font-size: 9.5px; font-weight: 600; }
.vf-betpop .note { padding: 10px 2px 12px; color: var(--bp-tx3); font-size: 12.5px; }
.vf-betpop .row button.over-max { opacity: .4; }
.vf-betpop .go { width: 100%; min-height: 44px; border: none; border-radius: 22px; background: var(--bp-gold); color: #0B0F19; font: 800 14px/1.3 'Montserrat', sans-serif; cursor: pointer; padding: 8px 16px; }
.vf-betpop .go:disabled, .vf-betpop .orow button:disabled { opacity: .55; cursor: default; }
.vf-betpop .open:empty { display: none; }
.vf-betpop .open { margin-top: 14px; max-height: 190px; overflow-y: auto; }
.vf-betpop .oh { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--bp-tx3); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vf-betpop .oh .boxlink { flex-shrink: 0; border: none; background: none; padding: 2px 0; color: var(--accent, #0C9B8D); font: 700 11.5px 'Montserrat', sans-serif; letter-spacing: 0; cursor: pointer; }
.vf-betpop .orow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--bp-line); font-size: 13px; }
.vf-betpop .orow button { flex-shrink: 0; max-width: 55%; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--bp-gold); background: transparent; color: var(--bp-gold); font: 700 12px 'Montserrat', sans-serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.light .vf-betpop .row button:not(.on), body.light .vf-betpop .cust input { background: #F5F6FA; }
body.light .vf-betpop .orow button { border-color: #94680A; color: #94680A; }
/* Games with a top team (desktop-app.js _vfTopChip / m.top) — classic + Theater */
.vf-topchip { display: inline-block; margin-left: 5px; color: #E0B341; font-size: 12px; line-height: 1; vertical-align: middle; }
body.light .vf-topchip { color: #B8860B; }
.vf-top-game { box-shadow: inset 0 0 0 1.5px #E0B341 !important; }

/* My bets window (desktop-app.js openMyBets) — classic + Theater */
.vf-mybets { --bp-tx: #E8ECF1; --bp-tx3: #8A92A3; --bp-line: rgba(255,255,255,.08); --bp-line2: rgba(255,255,255,.12); position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; font-family: 'Montserrat', system-ui, sans-serif; }
body.light .vf-mybets { --bp-tx: #1A1E2C; --bp-tx3: #6E768C; --bp-line: rgba(26,30,44,.08); --bp-line2: rgba(26,30,44,.14); background: rgba(26,30,44,.35); }
.vf-mybets .box { width: 480px; max-width: 100%; max-height: min(640px, 100%); display: flex; flex-direction: column; border-radius: 18px; background: #141924; border: 1px solid var(--bp-line2); box-shadow: 0 24px 64px rgba(0,0,0,.45); color: var(--bp-tx); overflow: hidden; }
body.light .vf-mybets .box { background: #fff; }
.vf-mybets .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--bp-line); }
.vf-mybets .hd b { font-size: 17px; }
.vf-mybets .sub { font-size: 12px; color: var(--bp-tx3); margin-top: 3px; }
.vf-mybets .x { width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 16px; background: transparent; color: var(--bp-tx3); font-size: 22px; line-height: 1; cursor: pointer; }
.vf-mybets .list { overflow-y: auto; padding: 4px 20px 12px; }
.vf-mybets .f { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 4px; position: sticky; top: 0; background: #141924; z-index: 1; }
body.light .vf-mybets .f { background: #fff; }
.vf-mybets .f button { white-space: nowrap; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--bp-line2); background: transparent; color: var(--bp-tx3); font: 700 12px 'Montserrat', sans-serif; cursor: pointer; }
.vf-mybets .f .sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--bp-line2); }
.vf-mybets .f button.st.on { background: var(--bp-tx); border-color: var(--bp-tx); color: #141924; }
body.light .vf-mybets .f button.st.on { color: #fff; }
.vf-mybets .f button span { opacity: .65; font-weight: 600; margin-left: 2px; }
.vf-mybets .f button.on { background: var(--accent, #0C9B8D); border-color: var(--accent, #0C9B8D); color: #fff; }
.vf-mybets .empty { padding: 30px 6px; text-align: center; color: var(--bp-tx3); font-size: 13px; }
.vf-mybets .row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--bp-line); }
.vf-mybets .row:last-child { border-bottom: none; }
.vf-mybets .l { min-width: 0; }
.vf-mybets .g { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-mybets .m { font-size: 12px; color: var(--bp-tx3); margin-top: 3px; }
.vf-mybets .s { font-size: 12px; font-weight: 700; margin-top: 4px; }
.vf-mybets .s.dim { color: var(--bp-tx3); } .vf-mybets .s.gold { color: #E0B341; } .vf-mybets .s.acc { color: var(--accent, #0C9B8D); }
.vf-mybets .s.win { color: #22C55E; } .vf-mybets .s.loss { color: #EF4444; }
body.light .vf-mybets .s.gold { color: #94680A; }
.vf-mybets .r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.vf-mybets .a { font-size: 14px; font-weight: 700; }
.vf-mybets .r button { height: 30px; padding: 0 14px; border-radius: 15px; border: 1px solid var(--bp-line2); background: transparent; color: var(--bp-tx); font: 700 12px 'Montserrat', sans-serif; cursor: pointer; }
.vf-mybets .r button:disabled { opacity: .55; cursor: default; }
/* Box score window (desktop-app.js openBoxScore) — builds on .vf-mybets */
/* Box score is a side panel on the right, not a modal: no dimming, the page
   (and the game) stay visible and usable around it. */
.vf-mybets.vf-box, .vf-mybets.vf-side { inset: 76px 20px 20px auto; width: 460px; max-width: calc(100vw - 40px); padding: 0; background: none; backdrop-filter: none; align-items: flex-start; justify-content: flex-end; pointer-events: none; }
body.light .vf-mybets.vf-box, body.light .vf-mybets.vf-side { background: none; }
.vf-box .box, .vf-side .box { width: 100%; max-height: 100%; pointer-events: auto; box-shadow: 0 18px 48px rgba(0,0,0,.5); }
.vf-box .hd b { font-size: 17px; }
.vf-box .bs { font-size: 14px; margin-top: 4px; }
.vf-box .bs b { font-size: 18px; margin: 0 2px; }
.vf-box .sub.live { color: #EF4444; font-weight: 700; }
.vf-box .tabs { display: flex; gap: 8px; padding: 12px 0 4px; position: sticky; top: 0; background: inherit; z-index: 2; }
.vf-box .list { background: #141924; }
body.light .vf-box .list { background: #fff; }
.vf-box .tabs button { flex: 1 1 0; min-width: 0; height: 36px; border-radius: 18px; border: 1px solid var(--bp-line2); background: transparent; color: var(--bp-tx); font: 700 13px 'Montserrat', sans-serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-box .tabs button.on { background: var(--accent, #0C9B8D); border-color: var(--accent, #0C9B8D); color: #fff; }
.vf-box .grp { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-tx3); margin: 14px 0 6px; }
.vf-box .tw { overflow-x: auto; border: 1px solid var(--bp-line2); border-radius: 12px; }
.vf-box table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vf-box th, .vf-box td { padding: 7px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--bp-line); }
.vf-box thead th { font-size: 10.5px; font-weight: 700; color: var(--bp-tx3); background: rgba(255,255,255,.03); }
.vf-box th:first-child { text-align: left; font-weight: 600; position: sticky; left: 0; background: #141924; }
body.light .vf-box th:first-child { background: #fff; }
.vf-box th i { font-style: normal; font-size: 10px; color: var(--bp-tx3); margin-left: 4px; }
.vf-box tr.sub th:first-child { color: var(--bp-tx3); }
.vf-box tbody tr:last-child th, .vf-box tbody tr:last-child td { border-bottom: none; }
.vf-boxbtn { height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--border, rgba(255,255,255,.14)); background: transparent; color: var(--tx, #E8ECF1); font: 700 13px 'Montserrat', sans-serif; display: flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; }
.vf-boxbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Wallet, My Shop, Send, Refer: right-side panels like Box score / My bets — no dimmed
   overlay, the page (and a playing game) stay visible. Desktop widths only. */
@media (min-width: 900px) {
  body .vf-wallet-overlay { display: none !important; }
  body .vf-wallet-drawer { top: 76px; right: 20px; bottom: 20px; height: auto; border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 48px rgba(0,0,0,.5); }
  body .vf-wallet-drawer:not(.open) { transform: translateX(calc(100% + 40px)); }
  body #shopMgrModal, body #sendCeedModal, body #referralModal { background: none !important; backdrop-filter: none !important; pointer-events: none; align-items: flex-start; justify-content: flex-end; padding: 76px 20px 20px; }
  body #shopMgrModal .vf-auth-modal, body #sendCeedModal .vf-auth-modal, body #referralModal .vf-auth-modal { pointer-events: auto; width: 460px; max-width: 460px !important; max-height: calc(100vh - 96px) !important; overflow-y: auto; box-shadow: 0 18px 48px rgba(0,0,0,.5); }
}

/* Where to watch chips (desktop-app.js _vfWatchChips) */
.vf-watch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vf-watch .h { font-size: 11px; font-weight: 700; color: var(--tx3, #8A92A3); margin-right: 2px; }
.vf-watch .c { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,.14)); color: var(--tx, #E8ECF1); font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vf-watch a.c:hover { border-color: var(--accent, #0C9B8D); }
.vf-watch .c svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.vf-watch .c.plain { color: var(--tx3, #8A92A3); }
.vf-box .hd .vf-watch { margin-top: 8px; }
#v2SpWatch:not(:empty) { padding: 2px 4px 10px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; }
#v2SpWatch .vf-watch .c { color: #E8ECF1; border-color: rgba(255,255,255,.16); }
#v2SpWatch .vf-watch .h { color: rgba(232,236,241,.55); }

.vf-watch-mini { display: inline-flex; align-items: center; max-width: 100%; height: 18px; padding: 0 7px; border-radius: 9px; border: 1px solid var(--border, rgba(255,255,255,.16)); color: var(--tx2, #B4BAC4); font-size: 10px; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.vf-watch-mini:hover { border-color: var(--accent, #0C9B8D); }
.vf-watch-mini.plain { cursor: default; color: var(--tx3, #8A92A3); }
#v2SpList .vf-watch-mini, .v2-card .vf-watch-mini { color: rgba(232,236,241,.75); border-color: rgba(255,255,255,.16); }

/* Finished game: grey FINAL 4–1 (desktop-app.js _vfFinalTxt) */
.vf-finalbadge { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--tx2, #B4BAC4); background: transparent; border: 1px solid var(--border, rgba(255,255,255,.18)); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.vf-final-txt { color: var(--tx3, #8A92A3); font-weight: 800; }

/* Half-time badge on game cards (m.ht from sports-proxy.php) */
.vf-htbadge { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #0B0F19; background: #E0B341; padding: 2px 6px; border-radius: 4px; }
.vf-ht-txt { color: #E0B341; font-weight: 800; }
body.light .vf-ht-txt { color: #94680A; }

/* Half-time break overlay over the stream (desktop-app.js _vfHTEnter) */
.vf-ht { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #000; }
.vf-ht .bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(10,12,18,.92); flex-shrink: 0; font-family: 'Montserrat', system-ui, sans-serif; }
.vf-ht .tag { padding: 3px 8px; border-radius: 6px; background: #E0B341; color: #0B0F19; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.vf-ht .cd { flex: 1; min-width: 0; font-size: 13px; color: #B4BAC4; }
.vf-ht .bar button { height: 32px; padding: 0 16px; border: none; border-radius: 16px; background: #fff; color: #0B0F19; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; }
.vf-ht .yt { flex: 1; min-height: 0; position: relative; }
.vf-ht .yt iframe, .vf-ht .yt > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Classic desktop sports player's BET pill — same look as Theater's .v2-gold */
.vf-betbtn { height: 44px; padding: 0 18px; border-radius: 22px; border: none; background: #E0B341; color: #0B0F19; font: 800 13px 'Montserrat', sans-serif; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; }
.vf-betbtn:hover { filter: brightness(1.06); }
.vf-betbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Equalizer bars (active tab / playing row) */
html[data-ui="v2"] .v2-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
html[data-ui="v2"] .v2-eq i { width: 3px; height: 100%; transform-origin: bottom; animation: v2Eq .9s ease-in-out infinite; }
html[data-ui="v2"] .v2-eq i:nth-child(1) { background: var(--accent); } html[data-ui="v2"] .v2-eq i:nth-child(2) { background: var(--v2-viz1); animation-delay: .2s; }
html[data-ui="v2"] .v2-eq i:nth-child(3) { background: var(--accent); animation-delay: .4s; } html[data-ui="v2"] .v2-eq i:nth-child(4) { background: var(--v2-viz2); animation-delay: .1s; }
@keyframes v2Eq { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* Elegant scroll */
html[data-ui="v2"] .v2-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; scroll-behavior: smooth; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%); }
html[data-ui="v2"] .v2-scroll::-webkit-scrollbar { width: 4px; } html[data-ui="v2"] .v2-scroll::-webkit-scrollbar-track { background: transparent; }
html[data-ui="v2"] .v2-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
html[data-ui="v2"] .v2-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }

@media (prefers-reduced-motion: reduce) { html[data-ui="v2"] .v2-aura, html[data-ui="v2"] .v2-eq i { animation: none; } html[data-ui="v2"] .v2-slider, html[data-ui="v2"] .v2-tray { transition: none; } }

/* v1 player pieces living inside the v2 stage */
html[data-ui="v2"] .v2-stage #vidHeroWrap, html[data-ui="v2"] .v2-stage #vidHeroViz { position: absolute; inset: 0; }
html[data-ui="v2"] .v2-stage .mv-playgate { background: radial-gradient(circle at 40% 50%, rgba(0,0,0,.2), #000 70%) !important; }
html[data-ui="v2"] .v2-stage .v2-scrim { z-index: 3; }

/* ── Music stage (v1 ids, v2 look) ── */
html[data-ui="v2"] #v2Music #vizHero { cursor: pointer; background: #05070C; }
html[data-ui="v2"] #v2Music #lyricsArtBg { position: absolute; inset: -40px; background: #3A2E5C center / cover no-repeat; filter: blur(70px) brightness(.55) saturate(1.3); opacity: .9; transition: background-image .5s; }
html[data-ui="v2"] #v2Music #lyricsDisplay { position: absolute; inset: 0; right: 388px; padding: 96px 48px 120px; display: flex; flex-direction: column; justify-content: center; z-index: 1; transition: right .35s ease; }
html[data-ui="v2"] #v2Music .v2-stage.slider-off #lyricsDisplay { right: 0; }
html[data-ui="v2"] #v2Music #lyricsContent { font: 700 24px/1.45 'Montserrat', sans-serif; color: rgba(232,236,241,.55); white-space: pre-line; letter-spacing: -.01em; }
html[data-ui="v2"] #v2Music #lyricsContent .v2-transcript { font-size: 22px; font-weight: 700; color: #FFFFFF; max-width: 760px; }
html[data-ui="v2"] #v2Music #vizOverlay { position: absolute; inset: 0; right: 388px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; transition: opacity .3s, right .35s ease; }
html[data-ui="v2"] #v2Music .v2-stage.slider-off #vizOverlay { right: 0; }
html[data-ui="v2"] #v2Music #vizPlayBtn { width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; }
html[data-ui="v2"] #v2Music #vizPlayBtn svg { width: 28px; height: 28px; fill: currentColor; }
html[data-ui="v2"] #v2Music #vizCanvas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px; z-index: 1; opacity: .45; }
html[data-ui="v2"] #v2Music .v2-scrim { top: auto; bottom: 0; border-radius: 0 18px 0 0; }
/* Lyrics | Comments as icons, top-left of the stage */
html[data-ui="v2"] #v2Music #relModeToggle.v2-lc { position: absolute; top: 16px; left: 16px; z-index: 5; display: flex !important; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); }
html[data-ui="v2"] #v2Music #relModeToggle button { position: relative; width: 44px; height: 34px; border-radius: 999px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; }
html[data-ui="v2"] #v2Music #relModeToggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] #v2Music #relCommentCountBadge { position: absolute; top: -4px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #E0B341; color: #0B0F19; font: 900 9px 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: center; }
html[data-ui="v2"] #v2Music #relCommentsOverlay { position: absolute; inset: 64px 388px 0 0; z-index: 4; flex-direction: column; justify-content: flex-end; transition: opacity .22s ease, right .35s ease; }
html[data-ui="v2"] #v2Music .v2-stage.slider-off #relCommentsOverlay { right: 0; }
html[data-ui="v2"] #v2Music .v2-cm { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 18%, rgba(0,0,0,.7)); padding: 30px 28px 18px; display: flex; flex-direction: column; max-height: 100%; box-sizing: border-box; }
html[data-ui="v2"] #v2Music .v2-cm-h { font-size: 12px; font-weight: 800; color: rgba(232,236,241,.7); padding-bottom: 8px; }
html[data-ui="v2"] #v2Music #relCommentsList { display: flex; flex-direction: column; gap: 10px; max-height: 260px; padding: 4px 0 10px; }
html[data-ui="v2"] #v2Music #relCommentInputRow { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
/* The new deck replaces the bottom music bar on this page */
html[data-ui="v2"] body[data-v2-tab="music"] #musicBar { display: none !important; }
html[data-ui="v2"] #v2Music .v2-deck input[type=range] { flex-shrink: 0; }

/* ── Sports score bug ── */
html[data-ui="v2"] .v2-scorebug { position: absolute; left: 16px; top: 16px; z-index: 3; display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); color: #E8ECF1; pointer-events: none; }
html[data-ui="v2"] .v2-scorebug:empty { display: none; }
html[data-ui="v2"] .v2-scorebug .tm { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; font-weight: 800; max-width: 220px; }
html[data-ui="v2"] .v2-scorebug .tm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2-scorebug .tm img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
html[data-ui="v2"] .v2-scorebug .vs { display: flex; align-items: center; font-size: 11px; font-weight: 800; color: rgba(232,236,241,.5); }
html[data-ui="v2"] .v2-scorebug .st { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; background: rgba(255,255,255,.06); }
html[data-ui="v2"] .v2-scorebug .st .k { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: rgba(232,236,241,.6); }
html[data-ui="v2"] .v2-scorebug .st .s { font-size: 11px; font-weight: 900; letter-spacing: .06em; }
html[data-ui="v2"] .v2-wait { position: absolute; inset: 0; right: 388px; bottom: 150px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #E8ECF1; pointer-events: none; text-align: center; }
html[data-ui="v2"] .v2-wait[hidden] { display: none; }
html[data-ui="v2"] .v2-wait .k { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--accent); }
html[data-ui="v2"] .v2-wait .t { font-size: 44px; font-weight: 900; letter-spacing: -.02em; }
html[data-ui="v2"] .v2-wait .s { font-size: 13px; color: rgba(232,236,241,.65); }

/* ── Live: vertical player framed by its own light ── */
html[data-ui="v2"] .v2-glow { position: absolute; left: 10%; top: 5%; width: 55%; height: 90%; border-radius: 40%; background: #5B2A86 center / cover; filter: blur(90px) saturate(1.4); opacity: .75; z-index: 0; }
html[data-ui="v2"] .v2-vert-wrap { position: absolute; inset: 0 388px 214px 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 18px; transition: right .35s ease, bottom .35s ease; padding: 16px 0; box-sizing: border-box; }
html[data-ui="v2"] .v2-vert-wrap.roomy-r { right: 0; } html[data-ui="v2"] .v2-vert-wrap.roomy-b { bottom: 0; }
html[data-ui="v2"] .v2-vert { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #05070C; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
html[data-ui="v2"] .v2-vert iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html[data-ui="v2"] .v2-vert-top { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; gap: 6px; pointer-events: none; }
html[data-ui="v2"] .v2-vert-top .b { height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .08em; display: flex; align-items: center; gap: 5px; }
html[data-ui="v2"] .v2-vert-top .b:empty { display: none; }
html[data-ui="v2"] .v2-vert-top .b.live { background: #D93A3F; }
html[data-ui="v2"] .v2-vert-top .b svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; }
html[data-ui="v2"] .v2-vert-bot { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.85)); display: flex; align-items: center; gap: 8px; pointer-events: none; color: #fff; }
html[data-ui="v2"] .v2-vert-bot .c { display: block; font-size: 12px; font-weight: 800; color: #E0B341; }
html[data-ui="v2"] .v2-vert-bot .t { display: block; font-size: 11px; color: rgba(232,236,241,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.35); color: #E8ECF1; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
html[data-ui="v2"] .v2-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] .v2-floaters { position: absolute; right: 6px; bottom: 70px; width: 70px; height: 70%; pointer-events: none; }
html[data-ui="v2"] .v2-float { position: absolute; bottom: 0; font-size: 30px; animation: v2Float 2.8s ease-out forwards; }
@keyframes v2Float { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-420px) scale(1.15); opacity: 0; } }
html[data-ui="v2"] .v2-cliprow { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
html[data-ui="v2"] .v2-cliprow::-webkit-scrollbar { display: none; }
html[data-ui="v2"] .v2-clip { position: relative; width: 84px; aspect-ratio: 9 / 16; flex-shrink: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #1B2130 center / cover no-repeat; padding: 0; cursor: pointer; overflow: hidden; scroll-snap-align: start; }
html[data-ui="v2"] .v2-clip.on { border: 2px solid var(--accent); }
html[data-ui="v2"] .v2-clip .tg { position: absolute; left: 5px; top: 5px; height: 16px; padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font: 900 8px 'Montserrat', sans-serif; display: flex; align-items: center; }
html[data-ui="v2"] .v2-clip .tg.live { background: #D93A3F; }
html[data-ui="v2"] .v2-clip .nm { position: absolute; left: 6px; right: 6px; bottom: 6px; color: #E8ECF1; font: 700 9px/1.25 'Montserrat', sans-serif; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html[data-ui="v2"] #v2Live .v2-tray { padding-top: 14px; }
html[data-ui="v2"] .v2-golive { height: 40px; padding: 0 16px; border-radius: 20px; background: #D93A3F; color: #fff; font: 800 13px 'Montserrat', sans-serif; display: flex; align-items: center; gap: 8px; text-decoration: none; }
html[data-ui="v2"] .v2-golive span { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
html[data-ui="v2"] .v2-livebadge { height: 26px; padding: 0 10px; border-radius: 13px; background: #D93A3F; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .12em; display: flex; align-items: center; flex-shrink: 0; }
html[data-ui="v2"] .v2-msg { font-size: 13px; line-height: 1.45; padding: 2px 4px; color: #E8ECF1; }
html[data-ui="v2"] .v2-msg b { color: var(--accent); }
html[data-ui="v2"] .v2-msg.gift { padding: 8px 10px; border-radius: 12px; background: rgba(224,179,65,.12); border: 1px solid rgba(224,179,65,.4); }
html[data-ui="v2"] .v2-msg.gift b { color: #E0B341; }
html[data-ui="v2"] .v2-compose { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
html[data-ui="v2"] .v2-compose input { flex: 1; min-width: 0; height: 38px; box-sizing: border-box; border-radius: 19px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.3); color: #E8ECF1; padding: 0 14px; font: 500 13px 'Montserrat', sans-serif; }
html[data-ui="v2"] .v2-compose button { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--accent); color: #0B0F19; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
html[data-ui="v2"] .v2-compose button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
html[data-ui="v2"] .v2-q { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); color: #E8ECF1; }
html[data-ui="v2"] .v2-q button { width: 40px; flex-shrink: 0; border-radius: 10px; border: none; background: rgba(255,255,255,.06); color: #B4BAC4; font: 900 11px 'Montserrat', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
html[data-ui="v2"] .v2-q button.on { color: var(--accent); }

/* ── Seeds: v1 feed, v2 skin ── */
html[data-ui="v2"] .v2-seeds-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; max-width: 1080px; margin: 0 auto; }
html[data-ui="v2"] .v2-seeds-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
html[data-ui="v2"] .v2-card2 { border-radius: 20px; background: rgba(20,25,36,.62); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 16px; color: #E8ECF1; display: flex; flex-direction: column; gap: 8px; }
html[data-ui="v2"] .v2-h { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #B4BAC4; }
html[data-ui="v2"] .v2-tag { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; border: none; background: transparent; color: #E8ECF1; font: 800 13px 'Montserrat', sans-serif; text-align: left; cursor: pointer; overflow: hidden; }
html[data-ui="v2"] .v2-tag:hover { background: rgba(255,255,255,.06); }
html[data-ui="v2"] .v2-tag .bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .18; }
html[data-ui="v2"] .v2-tag .n { position: relative; width: 16px; font-size: 12px; font-weight: 900; color: #8A92A3; }
html[data-ui="v2"] .v2-tag .t { position: relative; flex: 1; }
html[data-ui="v2"] #v2Seeds #seedTrending, html[data-ui="v2"] #v2Seeds #seedFilters { display: none !important; }
html[data-ui="v2"] #v2Seeds #seedCompose, html[data-ui="v2"] #v2Seeds #seedsFeed > div[onclick], html[data-ui="v2"] #v2Seeds #seedsFeed > .vf-seed-card {
  background: rgba(20,25,36,.62) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 20px !important; box-shadow: none !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #E8ECF1; }
html[data-ui="v2"] #v2Seeds #seedCompose { padding: 16px !important; margin-bottom: 14px !important; }
html[data-ui="v2"] #v2Seeds #seedText { font-size: 15px !important; color: #E8ECF1 !important; }
html[data-ui="v2"] #v2Seeds #seedPlantBtn { height: 38px; padding: 0 20px !important; border-radius: 19px !important; color: #0B0F19 !important; font-weight: 800 !important; }
html[data-ui="v2"] #v2Seeds #seedsFeed > div[onclick] { padding: 16px !important; margin-bottom: 12px !important; }
html[data-ui="v2"] #v2SdHost > div { max-width: none !important; margin: 0 !important; }

/* ── Dashboard: v1 sections, regrouped ── */
html[data-ui="v2"] .v2-dhero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; padding: 20px; border-radius: 22px; background: rgba(20,25,36,.62); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #E8ECF1; }
html[data-ui="v2"] #v2DbHeroL { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html[data-ui="v2"] #v2DbHeroL > * { margin: 0 !important; }
html[data-ui="v2"] #v2DbHeroL #vfHandleRow { background: rgba(0,0,0,.3) !important; border-color: rgba(255,255,255,.1) !important; }
html[data-ui="v2"] #v2DbHeroL .vf-upload-area { height: 64px; border-radius: 14px !important; border: 1px solid rgba(255,255,255,.1) !important; background: rgba(255,255,255,.04) !important; color: #E8ECF1; }
html[data-ui="v2"] .v2-balance { border-radius: 18px; padding: 18px; background: linear-gradient(150deg, rgba(224,179,65,.22), rgba(12,155,141,.12)); border: 1px solid rgba(224,179,65,.35); display: flex; flex-direction: column; gap: 12px; }
html[data-ui="v2"] .v2-balance .amt { font-size: 40px; font-weight: 900; letter-spacing: -.03em; color: #E0B341; }
html[data-ui="v2"] .v2-balance .spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: auto; }
html[data-ui="v2"] .v2-balance .spark i { flex: 1; border-radius: 2px; transform-origin: bottom; animation: v2Eq .9s ease-in-out infinite; }
html[data-ui="v2"] .v2-btn { height: 36px; padding: 0 14px; border-radius: 10px; border: none; background: #E8ECF1; color: #0B0F19; font: 800 12px 'Montserrat', sans-serif; cursor: pointer; }
html[data-ui="v2"] .v2-btn.gold { background: #E0B341; } html[data-ui="v2"] .v2-btn.ghost { background: transparent; color: #E8ECF1; border: 1px solid rgba(255,255,255,.2); }
html[data-ui="v2"] #v2DbNav .v2-ic { width: 48px; }
html[data-ui="v2"] #v2DbNav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] .v2-dsec { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; align-items: start; color: #E8ECF1; }
html[data-ui="v2"] .v2-dsec[hidden] { display: none; }
html[data-ui="v2"] .v2-dsec > div:not(:empty) { margin: 0 !important; padding: 16px; border-radius: 20px; background: rgba(20,25,36,.62); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); min-width: 0; }
html[data-ui="v2"] .v2-dsec > div:empty { display: none; }
html[data-ui="v2"] .v2-dsec .vf-section-hdr { margin-top: 0 !important; }
html[data-ui="v2"] #v2DbHeroL > div:first-child > div:last-child { display: none; } /* v1 balance — the gold card shows it */

/* ── Top bar: like mobile, only the profile chip stays (everything else is in the Dashboard) ── */
html[data-ui="v2"] #headerActions > :not(:last-child) { display: none !important; }
html[data-ui="v2"] #headerActions > div:last-child { position: relative; }
html[data-ui="v2"] #headerActions > div.v2-unread::after { content: ''; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #A3E635; box-shadow: 0 0 0 2px #0B0F19; }
/* Dashboard tiles */
html[data-ui="v2"] .v2-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
html[data-ui="v2"] .v2-tile { position: relative; height: 70px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #E8ECF1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-family: 'Montserrat', sans-serif; padding: 0 4px; }
html[data-ui="v2"] .v2-tile:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }
html[data-ui="v2"] .v2-tile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] .v2-tile .l { font-size: 11px; font-weight: 700; }
html[data-ui="v2"] .v2-tile .v { font-size: 10px; font-weight: 800; color: #E0B341; margin-top: -3px; }
html[data-ui="v2"] .v2-tile .lv { width: 12px; height: 12px; border-radius: 50%; background: #F05A5F; box-shadow: 0 0 0 4px rgba(240,90,95,.25); margin: 4px 0; }
html[data-ui="v2"] .v2-tile.out { color: #F05A5F; }
html[data-ui="v2"] .v2-tile .cnt { position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #F05A5F; color: #fff; font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
html[data-ui="v2"] .v2-tile .cnt[hidden] { display: none; }
/* Podcasts live inside Music (Music > Podcasts), so no separate header tab */
html[data-ui="v2"] #mainTabs .vf-tab[data-tab="podcast"] { display: none !important; }

/* ── Light theme (ceed.fi preference) ──
   The stage and everything floating on it stay dark; page-level surfaces go light. */
html[data-ui="v2"] body.light .v2-card2,
html[data-ui="v2"] body.light .v2-dhero,
html[data-ui="v2"] body.light .v2-dsec > div:not(:empty),
html[data-ui="v2"] body.light #v2Seeds #seedCompose,
html[data-ui="v2"] body.light #v2Seeds #seedsFeed > div[onclick] {
  background: rgba(255,255,255,.82) !important; border-color: rgba(26,30,44,.08) !important; color: #1A1E2C !important;
  box-shadow: 0 8px 30px rgba(26,30,44,.06) !important; }
html[data-ui="v2"] body.light .v2-h { color: #515972; }
html[data-ui="v2"] body.light .v2-tag { color: #1A1E2C; }
html[data-ui="v2"] body.light .v2-tag:hover { background: rgba(26,30,44,.05); }
html[data-ui="v2"] body.light #v2Seeds #seedText { color: #1A1E2C !important; }
html[data-ui="v2"] body.light .v2-tile { background: rgba(255,255,255,.7); border-color: rgba(26,30,44,.1); color: #1A1E2C; }
html[data-ui="v2"] body.light .v2-tile:hover { background: #fff; border-color: rgba(26,30,44,.2); }
html[data-ui="v2"] body.light .v2-tile .v { color: #94680A; }
html[data-ui="v2"] body.light .v2-balance { background: linear-gradient(150deg, rgba(224,179,65,.28), rgba(12,155,141,.12)); border-color: rgba(148,104,10,.35); }
html[data-ui="v2"] body.light .v2-balance .amt, html[data-ui="v2"] body.light .v2-balance .v2-h { color: #94680A !important; }
html[data-ui="v2"] body.light .v2-btn.ghost { color: #1A1E2C; border-color: rgba(26,30,44,.2); }
html[data-ui="v2"] body.light #v2DbHeroL #vfHandleRow { background: rgba(26,30,44,.04) !important; border-color: rgba(26,30,44,.1) !important; }
html[data-ui="v2"] body.light .v2-title { color: #1A1E2C; }
html[data-ui="v2"] body.light .v2-pill { color: #515972; }
html[data-ui="v2"] body.light .v2-pill.on, html[data-ui="v2"] body.light .v2-ic.on { background: #1A1E2C; color: #FFFFFF; }
html[data-ui="v2"] body.light .v2-ic { color: #515972; }
html[data-ui="v2"] body.light .v2-iconbtn { color: #1A1E2C; }
html[data-ui="v2"] body.light .v2-iconbtn.dim { color: #515972; }
html[data-ui="v2"] body.light .v2-play { background: #1A1E2C; color: #FFFFFF; }
html[data-ui="v2"] body.light .v2-gold, html[data-ui="v2"] body.light .v2-goldgroup button:not(.x) { background: #E0B341; color: #1A1E2C; }
/* Light: keep the visualizer colours in the deck (the grey base rule above outranks the colour classes) */
html[data-ui="v2"] body.light .v2-wave span.p1 { background: var(--v2-viz1); }
html[data-ui="v2"] body.light .v2-wave span.p2 { background: var(--accent); }
html[data-ui="v2"] body.light .v2-wave span.p3 { background: var(--v2-viz2); }
html[data-ui="v2"] body.light .v2-card2 b { color: #1A1E2C !important; }

/* The hero glow (v1's startHeroViz pulse) around the video stage. v1 paints
   it on #vidHeroViz, which is clipped inside the v2 stage, so draw it on the
   stage from the colour variables startHeroViz publishes on :root. */
html[data-ui="v2"] .v2-stagewrap { position: relative; isolation: isolate; }
html[data-ui="v2"] .v2-stagewrap > .v2-glow2 { position: absolute; inset: 0; border-radius: 22px; z-index: -1; pointer-events: none;
  box-shadow: -14px 20px 50px rgba(180,80,200,.42), -28px 44px 120px rgba(180,80,200,.24), 30px 60px 170px rgba(60,100,200,.24);
  animation: v2Glow 2.6s ease-in-out infinite; will-change: opacity; }
@keyframes v2Glow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"] .v2-stagewrap > .v2-glow2 { animation: none; opacity: .8; } }
html[data-ui="v2"] .v2-stage #vidHeroViz { box-shadow: none !important; }

/* v1 card checkout inside the player: solid backdrop (no blur over the video) */
html[data-ui="v2"] #sliderStripeOverlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(5,7,12,.94) !important; z-index: 20; }
html[data-ui="v2"] .v2-stage.v2-checkout .v2-tray, html[data-ui="v2"] .v2-stage.v2-checkout .v2-handle { visibility: hidden; }

/* ── Music lyric layer (v2 look over v1's #lyricsContent) ── */
html[data-ui="v2"] #v2Music #lyricsDisplay { opacity: 0 !important; pointer-events: none !important; }
html[data-ui="v2"] #v2Music .v2-lyrics { position: absolute; top: 70px; bottom: 130px; left: 48px; right: 418px; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 12px; color: #FFFFFF; transition: right .35s ease, opacity .2s ease; pointer-events: none; }
html[data-ui="v2"] #v2Music .v2-stage.slider-off .v2-lyrics { right: 48px; }
html[data-ui="v2"] #v2Music .v2-lyrics.lines > div { font-weight: 800; letter-spacing: -.01em; line-height: 1.25; transition: all .3s ease; }
html[data-ui="v2"] #v2Music .v2-lyrics.lines .l0 { font-size: 38px; font-weight: 900; color: #FFFFFF; }
html[data-ui="v2"] #v2Music .v2-lyrics.lines .l1 { font-size: 26px; color: rgba(232,236,241,.42); }
html[data-ui="v2"] #v2Music .v2-lyrics.lines .l2 { font-size: 22px; color: rgba(232,236,241,.26); }
html[data-ui="v2"] #v2Music .v2-lyrics.lines .l3, html[data-ui="v2"] #v2Music .v2-lyrics.lines .l4 { font-size: 20px; color: rgba(232,236,241,.14); }
html[data-ui="v2"] #v2Music .v2-lyrics.para > div { font-size: 22px; font-weight: 700; line-height: 1.5; color: #FFFFFF; max-width: 760px; }
html[data-ui="v2"] #v2Music .v2-lyrics.msg { align-items: flex-start; }
html[data-ui="v2"] #v2Music .v2-lyrics.msg .m1 { font-size: 24px; font-weight: 800; color: rgba(232,236,241,.8); }
html[data-ui="v2"] #v2Music .v2-lyrics.msg .m2 { font-size: 13px; font-weight: 500; color: rgba(232,236,241,.5); max-width: 420px; }
html[data-ui="v2"] #v2Music .v2-lyr-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 22px; border: none; background: #FFFFFF; color: #0B0F19; font: 800 14px 'Montserrat', sans-serif; cursor: pointer; }
/* Play lives in the deck; clicking the stage still toggles. The centre button only covered the lyrics. */
html[data-ui="v2"] #v2Music #vizOverlay { display: none !important; }
html[data-ui="v2"] .v2-scorebug.v2-hide { display: none; }
/* Lyrics centred in the open stage area (left of the panel, or full width when it's slid away) */
html[data-ui="v2"] #v2Music .v2-lyrics, html[data-ui="v2"] #v2Music .v2-lyrics.msg { align-items: center; text-align: center; }
html[data-ui="v2"] #v2Music .v2-lyrics.msg .m2 { margin: 0 auto; }
html[data-ui="v2"] #v2Music .v2-lyrics.para > div { margin: 0 auto; }
/* Lyrics sit in the lower-middle of the stage (above the title card), not the top half */
html[data-ui="v2"] #v2Music .v2-lyrics { top: 42%; bottom: 120px; justify-content: center; overflow: hidden; }
html[data-ui="v2"] #v2Music .v2-lyrics.para { top: 22%; }
/* Saved song lyrics keep their line breaks; long ones scroll (centred while they fit) */
html[data-ui="v2"] #v2Music .v2-lyrics.para { justify-content: safe center; overflow-y: auto; pointer-events: auto; scrollbar-width: none; }
html[data-ui="v2"] #v2Music .v2-lyrics.para > div { white-space: pre-line; }
/* Heard lyrics: newest line anchored at the bottom so it is never clipped; older lines fade up */
html[data-ui="v2"] #v2Music .v2-lyrics.lines { justify-content: flex-end; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
html[data-ui="v2"] #v2Music .v2-lyrics.lines > div { max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
html[data-ui="v2"] #v2Music .v2-lyrics.lines .l0 { font-size: 34px; }
/* Tab opened while music plays: the stage waits instead of auto-starting a stream */
html[data-ui="v2"] .v2-musichold { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #fff; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 70%); }
html[data-ui="v2"] .v2-musichold .m1 { font: 800 24px var(--font, Montserrat, sans-serif); }
html[data-ui="v2"] .v2-musichold .m2 { font: 500 13px var(--font, Montserrat, sans-serif); color: rgba(255,255,255,.6); }
html[data-ui="v2"] .v2-musichold { right: 418px; transition: right .35s ease; }
html[data-ui="v2"] .v2-stage.slider-off .v2-musichold { right: 0; }
/* Heard lyrics sit a little higher on the stage */
html[data-ui="v2"] #v2Music .v2-lyrics.lines { top: 18%; bottom: 280px; }
/* Autoplay blocked → v1 puts a "Tap to play" button in #vizOverlay; v2 hides that overlay, so let it through then */
html[data-ui="v2"] #v2Music #vizOverlay:has(button) { display: flex !important; position: absolute; inset: 0; z-index: 4; align-items: center; justify-content: center; background: transparent; pointer-events: none; }
html[data-ui="v2"] #v2Music #vizOverlay:has(button) button { pointer-events: auto; }
html[data-ui="v2"] #v2Music .v2-stage:not(.slider-off) #vizOverlay:has(button) { right: 370px; }
/* Timeline comment pins — glowing dot at the comment's second; hover reveals it */
html[data-ui="v2"] .v2-wavewrap { position: relative; flex: 1; min-width: 0; display: flex; }
html[data-ui="v2"] .v2-wavewrap .v2-wave { width: 100%; }
html[data-ui="v2"] .v2-pins { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
html[data-ui="v2"] .v2-pin { position: absolute; top: -3px; width: 18px; height: 18px; margin-left: -9px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; z-index: 2; }
html[data-ui="v2"] .v2-pin::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #E0B341; box-shadow: 0 0 6px 1px rgba(224,179,65,.85); }
html[data-ui="v2"] .v2-pin::after { content: ""; position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(224,179,65,.55), rgba(224,179,65,0) 70%); animation: v2PinGlow 2.2s ease-in-out infinite; }
@keyframes v2PinGlow { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } }
html[data-ui="v2"] .v2-pin .tip { position: absolute; bottom: 22px; left: 50%; transform: translate(-50%, 4px); width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 12px; background: #141924; border: 1px solid rgba(224,179,65,.35); box-shadow: 0 8px 24px rgba(0,0,0,.45); color: #E8ECF1; text-align: left; font: 500 12px/1.4 Montserrat, sans-serif; white-space: normal; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; }
html[data-ui="v2"] .v2-pin.l .tip { left: -4px; transform: translate(0, 4px); }
html[data-ui="v2"] .v2-pin.r .tip { left: auto; right: -4px; transform: translate(0, 4px); }
html[data-ui="v2"] .v2-pin:hover .tip, html[data-ui="v2"] .v2-pin:focus-visible .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html[data-ui="v2"] .v2-pin.l:hover .tip, html[data-ui="v2"] .v2-pin.l:focus-visible .tip, html[data-ui="v2"] .v2-pin.r:hover .tip, html[data-ui="v2"] .v2-pin.r:focus-visible .tip { transform: translate(0, 0); }
html[data-ui="v2"] .v2-pin .tip b { font-weight: 800; color: #fff; margin-right: 6px; }
html[data-ui="v2"] .v2-pin .tip i { font-style: normal; font-weight: 700; color: #E0B341; font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .v2-pin .tip > span { display: block; margin-top: 4px; color: rgba(232,236,241,.85); }
html[data-ui="v2"] .v2-pin:hover { z-index: 3; }
/* Comment box next to the lyrics/comments toggle (top-left of the stage) */
html[data-ui="v2"] #v2Music #relCommentInputRow { position: absolute; top: 16px; left: 128px; right: 404px; z-index: 5; max-width: 520px; height: 42px; box-sizing: border-box; padding: 3px 3px 3px 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(0,0,0,.5); display: flex; align-items: center; gap: 6px; transition: right .35s ease; }
html[data-ui="v2"] #v2Music .v2-stage.slider-off #relCommentInputRow { right: 16px; }
html[data-ui="v2"] #v2Music #relCommentInput { flex: 1; min-width: 0; height: 34px; border: 0 !important; background: transparent !important; padding: 0 12px !important; color: #fff; font: 500 13px Montserrat, sans-serif !important; outline: none; }
html[data-ui="v2"] #v2Music #relCommentInput::placeholder { color: rgba(255,255,255,.5); }
html[data-ui="v2"] #v2Music #relPostBtn { height: 34px; padding: 0 16px !important; border-radius: 999px !important; font: 800 12px Montserrat, sans-serif !important; }
html[data-ui="v2"] #v2Music #relCommentInputRow > div { padding: 0 14px; font-size: 12px !important; }
/* The list ends above the title card */
html[data-ui="v2"] #v2Music .v2-cm { padding-bottom: 96px; }
/* Music: the comment box only shows in Comments view */
html[data-ui="v2"] #v2Music #relCommentInputRow.v2-hide { display: none; }
/* Videos: comment count on the Comments icon, timestamp chips in the list */
html[data-ui="v2"] .v2-ic .v2-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #E0B341; color: #0B0F19; font: 900 9px Montserrat, sans-serif; display: flex; align-items: center; justify-content: center; }
html[data-ui="v2"] .v2-ic .v2-badge[hidden] { display: none; }
html[data-ui="v2"] .v2-at { appearance: none; border: 0; padding: 1px 7px; border-radius: 999px; background: rgba(224,179,65,.16); color: #E0B341; font: 700 11px Montserrat, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
html[data-ui="v2"] .v2-at:hover { background: rgba(224,179,65,.3); }
/* Sports: third-party stream ad heads-up (top-left, where the score card sat) */
html[data-ui="v2"] .v2-adnote { position: absolute; top: 16px; left: 16px; z-index: 6; max-width: min(520px, calc(100% - 440px)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: rgba(11,15,25,.88); border: 1px solid rgba(255,255,255,.14); color: #E8ECF1; font: 500 12px/1.4 Montserrat, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: opacity .35s ease; }
html[data-ui="v2"] .v2-stage.slider-off .v2-adnote { max-width: min(520px, calc(100% - 32px)); }
html[data-ui="v2"] .v2-adnote.out { opacity: 0; }
html[data-ui="v2"] .v2-adnote svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #E0B341; stroke-width: 2; stroke-linecap: round; }
html[data-ui="v2"] .v2-adnote span { flex: 1; min-width: 0; }
html[data-ui="v2"] .v2-adnote button { appearance: none; border: 0; cursor: pointer; font: 700 11px Montserrat, sans-serif; flex-shrink: 0; }
html[data-ui="v2"] .v2-adnote .ok { padding: 6px 12px; border-radius: 999px; background: #E0B341; color: #0B0F19; }
html[data-ui="v2"] .v2-adnote .ok:not(.set) { background: rgba(255,255,255,.1); color: #E8ECF1; }
html[data-ui="v2"] .v2-adnote .x { width: 26px; height: 26px; border-radius: 50%; background: transparent; color: rgba(255,255,255,.6); }
html[data-ui="v2"] .v2-adnote .x:hover { color: #fff; background: rgba(255,255,255,.1); }
/* Sports Multiview: up to 4 live games in a grid over the stage */
html[data-ui="v2"] .v2-mv { position: absolute; top: 0; left: 0; bottom: 0; right: 388px; z-index: 4; display: grid; gap: 4px; padding: 4px; box-sizing: border-box; background: #05070B; transition: right .35s ease; }
html[data-ui="v2"] .v2-stage.slider-off .v2-mv { right: 0; }
html[data-ui="v2"] .v2-mv:fullscreen { right: 0; }
html[data-ui="v2"] .v2-mv.s1 { grid-template-columns: 1fr; }
html[data-ui="v2"] .v2-mv.s2 { grid-template-columns: 1fr 1fr; }
html[data-ui="v2"] .v2-mv.s3, html[data-ui="v2"] .v2-mv.s4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
html[data-ui="v2"] .v2-mvt { position: relative; min-width: 0; min-height: 0; border-radius: 10px; overflow: hidden; background: #000; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; }
html[data-ui="v2"] .v2-mvt.focus { outline-color: #E0B341; }
html[data-ui="v2"] .v2-mvt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html[data-ui="v2"] .v2-mvh { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 6px 6px 14px 10px; background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,0)); cursor: pointer; opacity: .85; transition: opacity .2s; }
html[data-ui="v2"] .v2-mvt:hover .v2-mvh, html[data-ui="v2"] .v2-mvt.focus .v2-mvh { opacity: 1; }
html[data-ui="v2"] .v2-mvh .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font: 700 12px Montserrat, sans-serif; }
html[data-ui="v2"] .v2-mvh button { appearance: none; border: 0; flex-shrink: 0; height: 28px; min-width: 28px; padding: 0 6px; border-radius: 14px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.85); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font: 700 10px Montserrat, sans-serif; letter-spacing: .04em; }
html[data-ui="v2"] .v2-mvh button:hover { background: rgba(255,255,255,.18); color: #fff; }
html[data-ui="v2"] .v2-mvh button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui="v2"] .v2-mvh .snd { padding: 0 9px; }
html[data-ui="v2"] .v2-mvh .snd.on { background: #E0B341; color: #0B0F19; }
html[data-ui="v2"] .v2-mvadd { appearance: none; border: 2px dashed rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.03); color: rgba(232,236,241,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 700 13px Montserrat, sans-serif; min-height: 0; }
html[data-ui="v2"] .v2-mvadd:hover { border-color: rgba(224,179,65,.6); color: #fff; background: rgba(224,179,65,.06); }
html[data-ui="v2"] .v2-mvadd .pl { font-size: 30px; line-height: 1; color: #E0B341; }
html[data-ui="v2"] .v2-mvbtn { appearance: none; flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--v2-tx2, #B4BAC4); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: 800 12px Montserrat, sans-serif; }
html[data-ui="v2"] .v2-mvbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html[data-ui="v2"] .v2-mvbtn:hover { color: #fff; border-color: rgba(255,255,255,.35); }
html[data-ui="v2"] .v2-mvbtn.on { background: #E0B341; border-color: #E0B341; color: #0B0F19; }
html[data-ui="v2"] body.light .v2-mvbtn:not(.on) { color: #4A5163; border-color: rgba(26,30,44,.2); }
html[data-ui="v2"] .v2-mvtag { position: absolute; top: 8px; right: 54px; padding: 2px 8px; border-radius: 999px; background: rgba(224,179,65,.16); color: #E0B341; font: 800 9px Montserrat, sans-serif; letter-spacing: .08em; }
html[data-ui="v2"] .v2-mvtag.in { background: #E0B341; color: #0B0F19; }
/* Multiview: leave room for the panel's slide handle; no browse tray over the tiles */
html[data-ui="v2"] .v2-stage:not(.slider-off) .v2-mv { right: 432px; }
html[data-ui="v2"] .v2-stage.v2-mvon .v2-tray { display: none; }
/* Focus ring drawn above the stream frame (an outline sits under it) */
html[data-ui="v2"] .v2-mvt::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 2px solid transparent; border-radius: 10px; pointer-events: none; transition: border-color .2s; }
html[data-ui="v2"] .v2-mvt.focus::after { border-color: #E0B341; }
html[data-ui="v2"] .v2-mvt:fullscreen { border-radius: 0; outline: none; }
html[data-ui="v2"] .v2-mvt:fullscreen::after { border-color: transparent; }
/* Follow is a vector icon (person+ / person✓) */
html[data-ui="v2"] .v2-follow { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; flex-shrink: 0; }
html[data-ui="v2"] .v2-follow .vf-fi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Open bets panel uses text buttons (Accept / Cancel), not the 40px icon size above */
html[data-ui="v2"] #v2SpList .v2-follow { width: auto; padding: 0 14px; white-space: nowrap; }
/* Dashboard quick actions: icon-only tiles (names in tooltips) */
html[data-ui="v2"] .v2-tile { height: 56px; gap: 0; }
html[data-ui="v2"] .v2-tile svg { width: 22px; height: 22px; }
html[data-ui="v2"] .v2-tile.live { color: #F05A5F; }
/* Creator card: upcoming shows with tickets */
html[data-ui="v2"] .v2-shows { display: flex; flex-direction: column; gap: 6px; }
html[data-ui="v2"] .v2-shows[hidden] { display: none; }
html[data-ui="v2"] .v2-shows-h { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: rgba(232,236,241,.55); }
html[data-ui="v2"] .v2-shows-h .more { appearance: none; border: 0; background: none; padding: 0; color: #E0B341; font: 800 10px Montserrat, sans-serif; letter-spacing: .06em; cursor: pointer; }
html[data-ui="v2"] .v2-show { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.04); }
html[data-ui="v2"] .v2-show .dt { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(224,179,65,.12); color: #E8ECF1; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 900 15px/1 Montserrat, sans-serif; }
html[data-ui="v2"] .v2-show .dt b { font-size: 9px; letter-spacing: .1em; color: #E0B341; margin-bottom: 2px; }
html[data-ui="v2"] .v2-show .tx { flex: 1; min-width: 0; }
html[data-ui="v2"] .v2-show .nm2 { display: block; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v2"] .v2-show .sub { display: block; font-size: 10px; color: rgba(232,236,241,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
html[data-ui="v2"] .v2-show .tk { appearance: none; flex-shrink: 0; height: 30px; padding: 0 11px; border: 0; border-radius: 15px; background: #E0B341; color: #0B0F19; font: 900 11px Montserrat, sans-serif; cursor: pointer; }
html[data-ui="v2"] .v2-show .tk:disabled { background: rgba(255,255,255,.1); color: rgba(232,236,241,.6); cursor: default; }
html[data-ui="v2"] .v2-show a.nm2 { color: inherit; text-decoration: none; }
html[data-ui="v2"] .v2-show a.nm2:hover { text-decoration: underline; }
/* "Set up blocking" (Movies deck) — opens js/vf-adguard.js */
html[data-ui="v2"] .v2-agbtn { appearance: none; flex-shrink: 0; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; border: 1px solid rgba(224,179,65,.45); background: rgba(224,179,65,.12); color: #E0B341; display: inline-flex; align-items: center; gap: 6px; font: 700 12px Montserrat, sans-serif; cursor: pointer; white-space: nowrap; }
html[data-ui="v2"] .v2-agbtn:hover { background: rgba(224,179,65,.22); }
html[data-ui="v2"][data-theme="light"] .v2-agbtn { color: #8A6A12; border-color: rgba(138,106,18,.4); }
html[data-ui="v2"] .v2-agbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Multiview host: the hero player (stage media) is pinned over tile 1 and keeps
   playing; the grid goes see-through there and lets clicks reach it. */
html[data-ui="v2"] .v2-stage.v2-mvhost .v2-mv { background: transparent; pointer-events: none; }
html[data-ui="v2"] .v2-stage.v2-mvhost .v2-mv > * { pointer-events: auto; }
html[data-ui="v2"] .v2-stage.v2-mvhost .v2-mvt.host { background: transparent; pointer-events: none; }
html[data-ui="v2"] .v2-stage.v2-mvhost .v2-mvt.host .v2-mvh { pointer-events: auto; }
html[data-ui="v2"] .v2-stage.v2-mvhost #videoHero { z-index: 2; }
html[data-ui="v2"] .v2-stage.v2-mvhost #videoHero:fullscreen { border-radius: 0; }
/* Multiview parked while another tab shows — js/desktop-v2.js mvPill */
.v2-mvpill { position: fixed; left: 24px; bottom: 24px; z-index: 900; display: flex; align-items: center; border-radius: 24px; background: #E0B341; color: #0B0F19; box-shadow: 0 10px 28px rgba(0,0,0,.4); font: 700 13px Montserrat, sans-serif; }
.v2-mvpill button { appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.v2-mvpill .go { padding: 0 8px 0 16px; }
.v2-mvpill .x { width: 44px; justify-content: center; border-left: 1px solid rgba(11,15,25,.18); }
.v2-mvpill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Mini player paused by Multiview sound — js/desktop-v2.js mvMiniPaused */
.v2-minipaused { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: rgba(5,7,11,.55); cursor: pointer; }
.v2-minipaused span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #E0B341; color: #0B0F19; font: 800 13px Montserrat, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.v2-minipaused svg { width: 16px; height: 16px; fill: currentColor; }
.v2-minipaused:hover span { filter: brightness(1.08); }
.v2-mvpill .snd { width: 44px; justify-content: center; border-left: 1px solid rgba(11,15,25,.18); }
.v2-mvpill .snd[aria-pressed="false"] { opacity: .75; }
/* Pill speaker long-press: pick the game to hear — js/desktop-v2.js mvPillPick */
.v2-mvpill { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.v2-mvpick { position: fixed; z-index: 901; min-width: 260px; max-width: min(380px, calc(100vw - 32px)); padding: 6px; border-radius: 14px; background: #141A26; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 40px rgba(0,0,0,.5); font: 600 13px Montserrat, sans-serif; color: #E8ECF1; }
.v2-mvpick .h { padding: 6px 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A92A3; }
.v2-mvpick button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.v2-mvpick button:hover, .v2-mvpick button:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.v2-mvpick button.on { color: #E0B341; }
.v2-mvpick button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-mvpick svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* One-time "hold the speaker" hint — js/desktop-v2.js mvHoldHint */
.v2-mvhint { position: fixed; z-index: 902; max-width: calc(100vw - 24px); padding: 9px 14px; border-radius: 12px; background: #141A26; color: #E8ECF1; border: 1px solid rgba(224,179,65,.5); box-shadow: 0 10px 28px rgba(0,0,0,.45); font: 600 13px Montserrat, sans-serif; cursor: pointer; transition: opacity .35s; }
.v2-mvhint::after { content: ''; position: absolute; top: 100%; left: var(--arrow-x, 50%); margin-left: -7px; border: 7px solid transparent; border-top-color: rgba(224,179,65,.5); }
.v2-mvhint.out { opacity: 0; }
/* Multiview speaker in the Sports bar (tap: mute/unmute · hold/right-click: pick a game) */
html[data-ui="v2"] .v2-mvsnd[hidden] { display: none; }
html[data-ui="v2"] .v2-mvsnd { -webkit-user-select: none; user-select: none; }
html[data-ui="v2"] .v2-mvsnd.on { background: #E0B341; color: #0B0F19; }
.v2-mvhint.side { padding: 8px 13px; }
.v2-mvhint.side::after { top: 50%; left: 100%; margin: -7px 0 0 0; border-top-color: transparent; border-left-color: rgba(224,179,65,.5); }
/* Pill hold hint: the label says it for a few seconds, ▸ points at the ringed speaker */
.v2-mvpill.hinting .go span::after { content: ' \25B8'; }
.v2-mvpill.hinting .snd { box-shadow: inset 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.35); border-radius: 10px; } /* inset: flush with the pill edge */
/* Sports bar hold hint: the Multiview button says it, ◂ at the ringed speaker */
html[data-ui="v2"] .v2-mvbtn.hinting { white-space: nowrap; }
html[data-ui="v2"] .v2-mvbtn.hinting .hint { font-weight: 700; }
html[data-ui="v2"] .v2-mvsnd.hinting { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.35); }
/* Tile hold hint: "Muted" reads "Hold to choose", ringed white */
html[data-ui="v2"] .v2-mvh .snd { -webkit-user-select: none; user-select: none; }
html[data-ui="v2"] .v2-mvh .snd.hinting { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.35); }

/* My Queue: Clear all (two-click confirm turns it red) */
html[data-ui="v2"] .v2-seg .v2-mq-clear { margin-left: auto; }
html[data-ui="v2"] .v2-seg .v2-mq-clear.armed { border-color: #e5484d; color: #ff6b6b; }