/* ==========================================================================
   LIVE WIRE — style-v5.css
   Sports App Version 5 — full visual redesign.
   Forked from style.css (which stays untouched for admin.html). Every
   selector below targets the exact ids/classes already used by index.html
   and app.js — nothing renamed, only reskinned. See the plan file for the
   full safety audit this was built against.
   ========================================================================== */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; --r-pill: 999px;

    --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms;
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-io: cubic-bezier(.65,0,.35,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);

    --rail-w: 252px; --rail-w-collapsed: 80px;
    --tabbar-h: 64px; --topbar-h: 72px; --datestrip-h: 60px;

    /* status */
    --live: #FF3363; --live-2: #FF7A59; --soon: #FFC24B; --soon-2: #FFA23E;
    --finished: #6B7094; --success: #22E0A0; --warn: #FFB020;

    /* glass — baseline (desktop/phone); reduced further under body.is-tv below */
    --glass-blur-sm: 14px; --glass-blur-md: 22px; --glass-blur-lg: 34px;
    --glass-sat: 165%;
    --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%);
    --glass-hairline: rgba(255,255,255,.08);

    --sh-sm: 0 2px 10px rgba(0,0,0,.35);
    --sh-md: 0 8px 28px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.3);
    --sh-lg: 0 20px 60px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);

    --pad-card: 14px; --gap-rail: 16px; --card-h: 224px;
}

/* ----- Depth themes: Void / Eclipse / Twilight (all dark, indigo undertone) ----- */
body[data-theme="oled"] {  /* Void */
    --bg-0:#020204; --bg-1:#06060c; --bg-2:#0a0a15; --bg-3:#10101f; --bg-4:#17172c; --bg-5:#1f1f3d;
    --glass: rgba(18,18,34,.52); --glass-strong: rgba(22,22,40,.72);
    --border-soft: rgba(255,255,255,.06); --border-mid: rgba(255,255,255,.11); --border-strong: rgba(255,255,255,.18);
    --text-1:#F5F6FF; --text-2:#B9BCDD; --text-3:#7E82A8; --text-4:#565A7C;
}
body[data-theme="dark"] {  /* Eclipse */
    --bg-0:#08080f; --bg-1:#0d0d18; --bg-2:#131322; --bg-3:#191930; --bg-4:#212140; --bg-5:#2b2b54;
    --glass: rgba(26,26,46,.54); --glass-strong: rgba(30,30,52,.74);
    --border-soft: rgba(255,255,255,.07); --border-mid: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.19);
    --text-1:#F6F7FF; --text-2:#C0C3E4; --text-3:#8589AF; --text-4:#5C6086;
}
body[data-theme="dim"] {  /* Twilight */
    --bg-0:#12121e; --bg-1:#17172a; --bg-2:#1e1e36; --bg-3:#262645; --bg-4:#2f2f56; --bg-5:#3a3a68;
    --glass: rgba(38,38,66,.56); --glass-strong: rgba(42,42,72,.76);
    --border-soft: rgba(255,255,255,.08); --border-mid: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.22);
    --text-1:#F8F8FF; --text-2:#C9CCEA; --text-3:#9296BC; --text-4:#686C94;
}

/* ----- Accent hues — jewel-tone gradient pairs ----- */
body[data-accent="blue"]   { --accent:#4F6DFF; --accent-2:#8B5CFF; --accent-rgb:79,109,255; }
body[data-accent="red"]    { --accent:#FF3B5C; --accent-2:#FF7A45; --accent-rgb:255,59,92; }
body[data-accent="white"]  { --accent:#EDEFFC; --accent-2:#B9C4FF; --accent-rgb:237,239,252; }
body[data-accent="cyan"]   { --accent:#00D9FF; --accent-2:#00A3FF; --accent-rgb:0,217,255; }
body[data-accent="green"]  { --accent:#1FE08A; --accent-2:#00C2A8; --accent-rgb:31,224,138; }
body[data-accent="orange"] { --accent:#FF9A2E; --accent-2:#FF5F6D; --accent-rgb:255,154,46; }
body[data-accent="void"]   { --accent:#B45CFF; --accent-2:#6D28D9; --accent-rgb:180,92,255; }

body { --accent-glow: 0 0 32px rgba(var(--accent-rgb),.35); --accent-bg: rgba(var(--accent-rgb),.14);
       --aurora-a: rgba(var(--accent-rgb),.22); --aurora-b: rgba(var(--accent-rgb),.08); }

/* Android WebView is the weakest GPU target in the fleet — cut blur cost there, never raise it */
body.is-tv { --glass-blur-sm: 6px; --glass-blur-md: 10px; --glass-blur-lg: 14px; }

/* ============================================================
   BASE / RESET
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The `hidden` attribute must always win over any class's `display` rule below —
   without this, an author rule like `.live-empty { display: flex }` ties the UA
   stylesheet's `[hidden] { display: none }` on specificity and wins by source
   order, silently showing elements app.js has explicitly hidden. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    margin: 0; font-family: var(--font-body); background: var(--bg-0); color: var(--text-1);
    overflow-x: hidden; font-size: 15px; line-height: 1.4;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(var(--accent-rgb),.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* `reduce-motion` only gates the ambient background (the "Animated Background"
   setting, off by default to save battery) — it is NOT a general accessibility
   prefers-reduced-motion switch, so it must not touch unrelated animations like
   the live ticker marquee, live-pulse dots, or card transitions. A wildcard
   `body.reduce-motion *` rule here previously froze nearly every animation in
   the app by default. */
body.reduce-motion .bg-orb, body.reduce-motion .bg-grain { animation: none; }
body.reduce-motion #bgCanvas { display: none; }

/* ============================================================
   FOCUS SYSTEM — real :focus/:focus-visible only (D-pad relies on this)
   ============================================================ */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
body.is-tv button:focus-visible, body.is-tv a:focus-visible, body.is-tv [tabindex="0"]:focus-visible,
body.is-tv input:focus-visible, body.is-tv select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--accent), 0 0 22px rgba(var(--accent-rgb),.55);
    transform: translateY(-1px) scale(1.015);
    transition: box-shadow var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring);
    z-index: 2; position: relative;
}
body.is-tv .rail-item:focus-visible, body.is-tv .tab-btn:focus-visible { transform: none; }

/* ============================================================
   AMBIENT BACKDROP
   ============================================================ */
.bg-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-0); }
.bg-grain {
    position: absolute; inset: -20%; opacity: .035; mix-blend-mode: overlay;
    background-image: radial-gradient(rgba(255,255,255,.9) 0.6px, transparent 0.6px);
    background-size: 3px 3px;
}
.bg-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.bg-orb-1 { width: 46vw; height: 46vw; top: -14vw; left: -10vw; background: radial-gradient(circle, var(--aurora-a), transparent 70%); animation: orbDrift1 26s ease-in-out infinite; }
.bg-orb-2 { width: 38vw; height: 38vw; bottom: -12vw; right: -8vw; background: radial-gradient(circle, var(--aurora-b), transparent 70%); animation: orbDrift2 32s ease-in-out infinite; }
.bg-orb-3 { width: 28vw; height: 28vw; top: 30%; right: 12%; background: radial-gradient(circle, rgba(var(--accent-rgb),.10), transparent 70%); animation: orbDrift3 22s ease-in-out infinite; }
.bg-orb-4 { width: 20vw; height: 20vw; bottom: 20%; left: 18%; background: radial-gradient(circle, rgba(var(--accent-rgb),.08), transparent 70%); animation: orbDrift2 28s ease-in-out infinite reverse; }
#bgCanvas { position: absolute; inset: 0; opacity: .6; }
@keyframes orbDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4vw,3vw)} }
@keyframes orbDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-3vw,-4vw)} }
@keyframes orbDrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-2vw,2vw) scale(1.1)} }

/* ============================================================
   LOGIN GATE
   ============================================================ */
.login-gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.login-card {
    width: 100%; max-width: 420px; padding: 36px 32px; border-radius: var(--r-2xl);
    background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
    border: 1px solid var(--border-mid); box-shadow: var(--sh-lg);
    animation: loginIn var(--dur-slow) var(--ease-out);
    position: relative; overflow: hidden;
}
.login-card::before { content: ''; position: absolute; inset: 0; background: var(--glass-sheen); pointer-events: none; }
.login-card.login-shake { animation: shake .4s; }
@keyframes loginIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.login-brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-logo-wrap { width: 52px; height: 52px; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.login-logo { width: 100%; height: 100%; object-fit: cover; }
.login-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0; letter-spacing: -.02em; background: linear-gradient(120deg, var(--text-1), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-sub { margin: 2px 0 0; font-size: .82rem; color: var(--text-3); }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 20px; color: var(--text-4); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-label { font-size: .74rem; font-weight: 600; color: var(--text-3); }
.login-input-wrap { position: relative; }
.login-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-4); }
.login-input {
    width: 100%; padding: 13px 14px 13px 42px; border-radius: var(--r-md); border: 1px solid var(--border-soft);
    background: var(--bg-2); color: var(--text-1); font-size: .92rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.login-input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.2); }
.login-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255,51,99,.12); border: 1px solid rgba(255,51,99,.3); color: #FF9BAF; font-size: .82rem; }
.login-error svg { width: 18px; height: 18px; flex-shrink: 0; }
.login-btn {
    margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; border: none; border-radius: var(--r-md); font-weight: 700; font-size: .95rem;
    color: #0b0b12; background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: var(--accent-glow); transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
.login-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }
.login-btn svg { width: 18px; height: 18px; }
.login-foot { text-align: center; margin-top: 18px; font-size: .74rem; color: var(--text-4); }
.login-foot kbd { display: inline-block; padding: 2px 6px; background: var(--bg-3); border: 1px solid var(--border-mid); border-radius: 4px; font-family: ui-monospace, monospace; font-size: .68rem; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

/* ----- Rail (left nav) ----- */
.rail {
    display: flex; flex-direction: column; padding: 20px 14px; gap: 4px;
    background: var(--glass); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
    border-right: 1px solid var(--border-soft); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail-brand { display: flex; align-items: center; gap: 12px; padding: 8px 10px 20px; }
.rail-logo-img { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.rail-logo-text { display: flex; flex-direction: column; min-width: 0; }
.rail-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.15; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(120deg, var(--text-1), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rail-sub { font-size: .68rem; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-section { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rail-item {
    display: flex; align-items: center; gap: 13px; padding: 11px 12px; border: none; background: transparent;
    border-radius: var(--r-md); color: var(--text-3); font-size: .86rem; font-weight: 600; text-align: left;
    transition: background var(--dur-fast), color var(--dur-fast);
    position: relative; overflow: hidden;
}
.rail-item:hover { background: var(--bg-2); color: var(--text-1); }
.rail-item.active { color: var(--text-1); background: linear-gradient(90deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.02)); }
.rail-item.active::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px rgba(var(--accent-rgb),.6); }
.rail-icon { width: 20px; height: 20px; flex-shrink: 0; }
.rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-live-icon { display: flex; align-items: center; justify-content: center; }
.rail-badge { margin-left: auto; padding: 1px 7px; border-radius: var(--r-pill); background: linear-gradient(120deg, var(--live), var(--live-2)); color: #fff; font-size: .68rem; font-weight: 800; }
.rail-bottom { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.rail-cp { color: var(--accent); }
.rail-logout { color: var(--text-4); }
.rail-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px 2px; }
.rail-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-display); color: #0b0b12; flex-shrink: 0; }
.rail-user-info { display: flex; flex-direction: column; min-width: 0; }
.rail-user-name { font-size: .82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user-meta { font-size: .68rem; color: var(--text-4); }
.rail-user-dot { margin: 0 4px; }
.rail-user-meta .warn { color: var(--soon); }

/* live pulse dot (shared by rail/tab-bar/ticker) */
.live-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); position: relative; }
.live-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--live); animation: livePulseRing 1.6s ease-out infinite; }
.live-pulse-sm { width: 6px; height: 6px; }
@keyframes livePulseRing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: 5px; animation: pulseWhite 1.4s ease-in-out infinite; }
@keyframes pulseWhite { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ----- Main column ----- */
.main { display: flex; flex-direction: column; min-width: 0; }

/* ----- Live ticker (marquee) ----- */
.live-ticker { display: flex; align-items: center; gap: 14px; padding: 8px 20px; background: linear-gradient(90deg, rgba(var(--accent-rgb),.10), transparent 60%); border-bottom: 1px solid var(--border-soft); }
.live-ticker-label { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: linear-gradient(120deg, var(--live), var(--live-2)); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; flex-shrink: 0; }
.live-ticker-clip { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.live-ticker-track { display: inline-flex; gap: 32px; white-space: nowrap; animation: tickerScroll 40s linear infinite; }
.live-ticker-item { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2); }
.live-ticker-item strong { color: var(--text-1); font-weight: 700; }
.live-ticker-item .dot { color: var(--live); font-size: .6rem; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----- Topbar ----- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 0 24px; height: var(--topbar-h); flex-shrink: 0; }
.tb-menu { display: none; width: 38px; height: 38px; border: none; border-radius: var(--r-sm); background: var(--bg-2); align-items: center; justify-content: center; }
.tb-menu svg { width: 20px; height: 20px; }
.tb-view-title { min-width: 0; }
.tb-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.tb-subtitle { font-size: .78rem; color: var(--text-3); }
.tb-date-pills { display: flex; align-items: center; gap: 8px; margin-left: 8px; flex: 1; min-width: 0; }
.ds-arrow { width: 30px; height: 30px; border: 1px solid var(--border-soft); background: var(--bg-2); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); }
.ds-arrow svg { width: 16px; height: 16px; }
.ds-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ds-pills::-webkit-scrollbar { display: none; }
.date-pill { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 4px 12px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--bg-2); color: var(--text-3); min-width: 46px; }
.date-pill.active { background: linear-gradient(150deg, rgba(var(--accent-rgb),.28), rgba(var(--accent-rgb),.08)); border-color: rgba(var(--accent-rgb),.4); color: var(--text-1); }
.dp-day { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.dp-num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.1; }
.tb-actions { display: flex; align-items: center; gap: 10px; }
.tb-search { position: relative; display: flex; align-items: center; }
.tb-search-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
.tb-search-input { width: 220px; padding: 9px 30px 9px 34px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .84rem; transition: width var(--dur-base) var(--ease-out), border-color var(--dur-fast); }
.tb-search-input:focus-visible { width: 280px; border-color: var(--accent); }
.tb-search-clear { position: absolute; right: 8px; width: 20px; height: 20px; border: none; background: none; color: var(--text-4); font-size: 1.1rem; line-height: 1; }
.tb-icon-btn { width: 38px; height: 38px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: transform var(--dur-fast); flex-shrink: 0; }
.tb-icon-btn svg { width: 18px; height: 18px; }
.tb-icon-btn:active { transform: rotate(180deg); }

/* ----- Date strip ----- */
.date-strip { display: flex; align-items: center; gap: 16px; padding: 0 24px 14px; min-height: var(--datestrip-h); flex-shrink: 0; }
.ds-stats { display: flex; gap: 14px; font-size: .78rem; color: var(--text-3); }
.ds-status-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-finished-toggle { margin-left: auto; }
.ds-switch { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-3); cursor: pointer; }
.ds-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-switch-slider { width: 34px; height: 19px; border-radius: var(--r-pill); background: var(--bg-3); border: 1px solid var(--border-soft); position: relative; transition: background var(--dur-base); }
.ds-switch-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-3); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.ds-switch input:checked + .ds-switch-slider { background: rgba(var(--accent-rgb),.35); }
.ds-switch input:checked + .ds-switch-slider::after { transform: translateX(15px); background: var(--accent); }
.ds-switch input:focus-visible + .ds-switch-slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: var(--bg-2); color: var(--text-3); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.filter-chip.active { background: linear-gradient(120deg, rgba(var(--accent-rgb),.3), rgba(var(--accent-rgb),.12)); border-color: rgba(var(--accent-rgb),.5); color: var(--text-1); }

/* ============================================================
   VIEWPORT / VIEWS
   ============================================================ */
.viewport { flex: 1; padding: 4px 0 20px; }
.view { padding: 0 24px; animation: viewIn var(--dur-base) var(--ease-out); }
.view[hidden] { display: none; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ----- Hero / Spotlight ----- */
.hero { margin-bottom: 22px; }
.hero[hidden] { display: none; }
.hero-inner { position: relative; }
.hero-spotlight { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.hero-spotlight-side { display: flex; flex-direction: column; gap: 12px; }

.hero-slide {
    position: relative; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 20px;
    min-height: 300px; padding: 32px; border-radius: var(--r-2xl); overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--sc-rgb,var(--accent-rgb)),.28), transparent 60%),
        linear-gradient(150deg, var(--bg-3), var(--bg-1));
    border: 1px solid var(--border-mid); box-shadow: var(--sh-lg);
}
.hero-slide::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: linear-gradient(120deg, rgba(var(--sc-rgb,var(--accent-rgb)),.7), transparent 40%, transparent 60%, rgba(var(--sc-rgb,var(--accent-rgb)),.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.hero-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; z-index: 1; }
.hero-meta { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--text-2); }
.hero-status-tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 12px; border-radius: var(--r-pill); font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.hero-status-tag.live { background: linear-gradient(120deg, var(--live), var(--live-2)); color: #fff; box-shadow: 0 0 20px rgba(255,51,99,.4); }
.hero-status-tag.live .live-pulse { background: #fff; }
.hero-status-tag.live .live-pulse::after { border-color: #fff; }
.hero-status-tag.soon { background: linear-gradient(120deg, var(--soon), var(--soon-2)); color: #201400; }
.hero-status-tag.ft { background: var(--bg-4); color: var(--text-3); }
.hero-status-tag.upcoming { background: rgba(var(--sc-rgb,var(--accent-rgb)),.2); color: var(--text-1); }
.hero-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -.01em; }
.hero-vs { color: var(--text-4); font-weight: 500; font-size: .8em; margin: 0 4px; }
.hero-time { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-2); }
.hero-time svg { width: 16px; height: 16px; color: var(--text-4); }
.hero-actions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.hero-watch-btn { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border: none; border-radius: var(--r-md); font-weight: 700; font-size: .88rem; color: #0b0b12; background: linear-gradient(120deg, var(--sc,var(--accent)), var(--accent-2)); box-shadow: 0 6px 22px rgba(var(--sc-rgb,var(--accent-rgb)),.4); }
.hero-watch-btn svg { width: 16px; height: 16px; fill: currentColor; }
.hero-action-btn { display: flex; align-items: center; gap: 7px; padding: 12px 18px; border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--glass); color: var(--text-2); font-weight: 600; font-size: .86rem; }
.hero-action-btn svg { width: 16px; height: 16px; }
.hero-action-btn.is-faved { color: var(--accent); border-color: rgba(var(--accent-rgb),.5); }
.hero-art { display: flex; align-items: center; justify-content: center; z-index: 1; }
.hero-teams { display: flex; align-items: center; gap: 18px; }
.hero-team-block { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 110px; }
.hero-team-logo { width: 68px; height: 68px; border-radius: var(--r-lg); background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; overflow: hidden; box-shadow: var(--sh-sm); }
.hero-team-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.hero-team-name { font-size: .82rem; font-weight: 700; text-align: center; }
.hero-vs-cell { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-4); }
.hero-single { font-size: 4.5rem; }

/* Secondary spotlight cards */
.hero-spotlight-card {
    display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--r-xl);
    background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--border-soft);
    box-shadow: var(--sh-sm); position: relative; overflow: hidden; flex: 1;
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.hero-spotlight-card:hover { border-color: rgba(var(--sc-rgb,var(--accent-rgb)),.5); transform: translateY(-2px); }
.hero-spotlight-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--sc,var(--accent)), var(--accent-2)); }
.hero-side-teams { display: flex; align-items: center; gap: 8px; }
.hero-side-logo { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: .9rem; }
.hero-side-logo img { width: 100%; height: 100%; object-fit: contain; }
.hero-side-vs { font-size: .68rem; color: var(--text-4); font-weight: 700; }
.hero-side-icon { font-size: 1.4rem; }
.hero-side-title { font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.25; }
.hero-side-meta { font-size: .72rem; color: var(--text-3); }

/* ----- Quick chips (sport filter row) ----- */
.quick-chips-row { margin-bottom: 16px; }
.quick-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.quick-chips::-webkit-scrollbar { display: none; }
.chip-count { opacity: .7; font-size: .84em; margin-left: 2px; }

/* ----- Rails + cards ----- */
.rails { display: flex; flex-direction: column; gap: 28px; }
.rail-section-block { min-width: 0; }
.rail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rail-head-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: rgba(var(--sc-rgb,var(--accent-rgb)),.16); color: var(--sc,var(--accent)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rail-head-icon svg { width: 17px; height: 17px; }
.rail-head-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-head-count { font-size: .74rem; color: var(--text-4); font-weight: 600; }
.rail-head-action { font-size: .78rem; color: var(--accent); font-weight: 600; flex-shrink: 0; }
/* 4-up wrapping grid — cards fill their cell and wrap to new rows underneath
   instead of a horizontally-scrolling row. */
.rail-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-rail); padding: 4px 4px 10px; }
.fav-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-rail); }

.ev-card {
    /* Fixed height, not min-height: a flex row/grid row default-stretches every
       card to match its tallest sibling, so one card with wrapped 2-line team
       names was inflating the whole row's height uniformly. Width comes from
       the grid cell (see .rail-row/.fav-list above), not a fixed px value. */
    height: var(--card-h); overflow: hidden; position: relative;
    display: flex; flex-direction: column; gap: 8px; padding: var(--pad-card);
    border-radius: var(--r-lg); background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--border-soft); box-shadow: var(--sh-sm);
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.ev-card:hover { transform: translateY(-3px); border-color: rgba(var(--sc-rgb),.45); box-shadow: var(--sh-md); }
.ev-card::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--sc,var(--accent)), transparent); opacity: .8; }
.ev-card-live { border-color: rgba(255,51,99,.4); background: linear-gradient(165deg, rgba(255,51,99,.08), var(--bg-2)); }
.ev-card-live::before { background: linear-gradient(90deg, var(--live), var(--live-2)); background-size: 200% 100%; animation: liveWireSweep 2.4s linear infinite; height: 3px; box-shadow: 0 0 10px rgba(255,51,99,.6); }
.ev-card-soon::before { background: linear-gradient(90deg, var(--soon), transparent); }
@keyframes liveWireSweep { from { background-position: 0% 0; } to { background-position: 200% 0; } }

.ev-fav-btn, .ev-remind-btn {
    position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.32); backdrop-filter: blur(6px); color: var(--text-2); display: flex; align-items: center; justify-content: center;
    transition: color var(--dur-fast), background var(--dur-fast);
}
.ev-remind-btn { right: 48px; }
.ev-fav-btn svg, .ev-remind-btn svg { width: 15px; height: 15px; }
.ev-fav-btn.is-faved, .ev-remind-btn.is-reminded { color: var(--live); background: rgba(255,51,99,.18); }
.ev-fav-btn:hover, .ev-remind-btn:hover { background: rgba(0,0,0,.5); }

.ev-league-row { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-3); font-weight: 600; }
.ev-league-row img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.ev-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ev-status-area { min-height: 22px; }
.ev-status-live, .ev-status-badge.ev-status-live { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); background: linear-gradient(120deg, var(--live), var(--live-2)); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .03em; }
.ev-status-soon { padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255,194,75,.18); color: var(--soon); font-size: .66rem; font-weight: 800; }
.ev-status-ft, .ev-status-badge.ev-status-ft { padding: 3px 9px; border-radius: var(--r-pill); background: var(--bg-4); color: var(--text-4); font-size: .66rem; font-weight: 700; }
.ev-status-ppd { padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: var(--text-3); font-size: .66rem; font-weight: 700; }
.ev-time-block { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); }
.ev-time-num { font-size: 1rem; font-weight: 700; }
.ev-time-ampm { font-size: .62rem; color: var(--text-4); font-weight: 700; }
.ev-card-time { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-3); }

.ev-vs-layout { display: flex; align-items: center; justify-content: space-between; flex: 1; }
.ev-team-side { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 44%; }
.ev-team-logo, .ev-team-ph { width: 54px; height: 54px; border-radius: var(--r-md); background: var(--bg-3); display: flex; align-items: center; justify-content: center; object-fit: contain; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; overflow: hidden; flex-shrink: 0; }
.ev-team-logo { padding: 6px; }
/* 2-line clamp instead of single-line ellipsis — full names like "Manchester
   United" were truncating to a few characters at card width. */
.ev-team-label { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.22; width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev-vs-center { color: var(--text-4); font-weight: 700; font-size: .78rem; flex-shrink: 0; padding: 0 6px; }
.ev-single-layout { display: flex; align-items: center; gap: 12px; flex: 1; }
.ev-single-icon { font-size: 2rem; flex-shrink: 0; }
.ev-single-info { min-width: 0; }
.ev-single-name { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev-single-venue { font-size: .72rem; color: var(--text-4); margin-top: 2px; }

.ev-channels-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.ch-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--bg-3); font-size: .68rem; color: var(--text-3); }
.ch-pill-playable { background: rgba(var(--accent-rgb),.16); color: var(--text-1); }
.ch-flag { display: flex; align-items: center; }
.ch-flag-img, .ch-flag-emoji { display: inline-block; }
.ch-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-more { padding: 3px 8px; border-radius: var(--r-pill); background: var(--bg-4); color: var(--text-4); font-size: .68rem; }

/* ----- Sport grid ----- */
.sport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.sport-card {
    display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--border-soft);
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.sport-card:hover { transform: translateY(-2px); border-color: rgba(var(--sc-rgb),.45); }
.sport-card-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(var(--sc-rgb),.16); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.sport-card-name { font-weight: 700; font-size: .9rem; }
.sport-card-count { font-size: .74rem; color: var(--text-4); }

/* ----- Scores view ----- */
.sc-body { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.sc-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-team-logo { width: 26px; height: 26px; border-radius: 50%; font-size: .78rem; }
.sc-team-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.sc-team-name.sc-score-winner { color: var(--text-1); }
.sc-score { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-3); }
.sc-score.sc-score-winner { color: var(--text-1); }
.sc-live-badge { margin-left: 8px; }
.ev-comp-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.ev-comp-logo-fallback { display: flex; align-items: center; justify-content: center; font-size: .8rem; }

/* ----- Live view / Favorites / Search shared empty states ----- */
.state-msg, .live-empty, .fav-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 60px 20px; gap: 10px; color: var(--text-3);
}
.state-msg-icon, .fav-empty .icon { font-size: 2.6rem; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.16), transparent 70%); margin-bottom: 4px; }
.state-msg-icon-sm { font-size: 1.8rem; width: 56px; height: 56px; }
.state-msg-title, .fav-empty h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0; color: var(--text-1); }
.state-msg-sub, .fav-empty p { font-size: .84rem; margin: 0; max-width: 320px; }
.loader-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--bg-4); border-top-color: var(--accent); animation: spin .9s linear infinite; margin-bottom: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Search view ----- */
.search-hero { padding: 20px 0 24px; }
.search-big-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.search-big-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-4); }
.search-big-input { width: 100%; padding: 16px 20px 16px 50px; border-radius: var(--r-xl); border: 1px solid var(--border-mid); background: var(--glass); backdrop-filter: blur(var(--glass-blur-sm)); font-size: 1rem; }
.search-big-input:focus-visible { border-color: var(--accent); }
.search-hist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; max-width: 560px; margin-left: auto; margin-right: auto; }
.search-hist-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--border-soft); color: var(--text-2); font-size: .82rem; }
.search-hist-pill svg { width: 14px; height: 14px; color: var(--text-4); }

/* ----- Skeletons ----- */
.skel-rail { display: flex; flex-direction: column; gap: 28px; }
.skel-row-head { width: 160px; height: 20px; border-radius: var(--r-sm); margin-bottom: 12px; background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 37%, var(--bg-3) 63%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.skel-row-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-rail); }
.skel-card { height: var(--card-h); border-radius: var(--r-lg); background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 37%, var(--bg-3) 63%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================
   TAB BAR (mobile)
   ============================================================ */
.tab-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--tabbar-h); z-index: 40;
    background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat));
    border-top: 1px solid var(--border-soft); align-items: center; justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom); }
.tab-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; color: var(--text-4); font-size: .64rem; font-weight: 600; flex: 1; padding: 6px 0; }
.tab-btn.active { color: var(--accent); }
.tab-live-icon { display: flex; }

/* ============================================================
   OVERLAYS (modal / channel browser / settings / shortcuts) — shared shell
   ============================================================ */
.modal, .settings, .shortcuts, .qe-panel { position: fixed; inset: 0; z-index: 60; }
.modal-backdrop, .settings-backdrop, .shortcuts-backdrop, .qe-backdrop, .ch-browser-backdrop {
    position: absolute; inset: 0; background: rgba(2,2,6,.68); backdrop-filter: blur(6px);
}
.modal { display: flex; align-items: flex-end; justify-content: center; }
.modal-sheet {
    position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
    background: var(--bg-1); border-radius: var(--r-2xl) var(--r-2xl) 0 0; border: 1px solid var(--border-mid); border-bottom: none;
    box-shadow: var(--sh-lg); animation: panelInUp var(--dur-slow) var(--ease-out);
}
@media (min-width: 640px) { .modal { align-items: center; } .modal-sheet { border-radius: var(--r-2xl); border-bottom: 1px solid var(--border-mid); margin: 0 20px; } }
@keyframes panelInUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-handle { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--border-strong); margin: 10px auto; }
.modal-hero { position: relative; padding: 18px 24px 22px; background: radial-gradient(120% 100% at 0% 0%, rgba(var(--sc-rgb,var(--accent-rgb)),.24), transparent 60%); }
.modal-hero-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.modal-league-info { display: flex; align-items: center; gap: 8px; }
.modal-league-info img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.modal-league-text { display: flex; flex-direction: column; }
.modal-league-name { font-weight: 700; font-size: .92rem; }
.modal-sport-name { font-size: .72rem; color: var(--text-4); }
.modal-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-close svg { width: 17px; height: 17px; }
.modal-matchup { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 0; }
.modal-team { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 40%; }
.modal-team-badge { width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--bg-3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.modal-team-badge img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.modal-team-name { font-weight: 700; font-size: .92rem; text-align: center; }
.modal-vs { font-family: var(--font-display); font-weight: 700; color: var(--text-4); }
.modal-event-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; text-align: center; padding: 16px 0; }
.modal-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px 0; }
.meta-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); font-size: .78rem; color: var(--text-2); }
.meta-tag svg { width: 14px; height: 14px; color: var(--text-4); }
.modal-actions { display: flex; gap: 10px; padding: 16px 24px 0; flex-wrap: wrap; }
.modal-action-btn { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-2); font-size: .84rem; font-weight: 600; }
.modal-action-btn svg { width: 16px; height: 16px; }
.modal-action-btn.is-active { color: var(--accent); border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.12); }
.modal-player-section { padding: 16px 24px 0; }
.modal-player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-player-label { font-weight: 700; font-size: .88rem; }
.modal-player-close { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.modal-player-close svg { width: 15px; height: 15px; }
.modal-player-wrap { border-radius: var(--r-md); overflow: hidden; background: #000; }
.modal-player-url { display: flex; gap: 8px; margin-top: 8px; }
.modal-player-url-input { flex: 1; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .74rem; color: var(--text-3); }
.modal-player-copy { padding: 8px 14px; border-radius: var(--r-sm); border: none; background: var(--bg-3); font-size: .78rem; font-weight: 600; }
.modal-ch-section { padding: 20px 24px 28px; }
.modal-ch-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; margin-bottom: 12px; }
.modal-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.modal-ch-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--border-soft); opacity: .55; }
.modal-ch-item.modal-ch-playable { opacity: 1; }
.modal-ch-item.modal-ch-playable:hover { border-color: rgba(var(--accent-rgb),.5); background: var(--bg-3); }
.modal-ch-flag { display: flex; }
.modal-ch-details { flex: 1; min-width: 0; }
.modal-ch-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-ch-play-icon { color: var(--accent); display: flex; }
.modal-ch-country { font-size: .68rem; color: var(--text-4); }

/* ----- Channel browser + Multi-view picker (share .ch-browser shell) ----- */
.ch-browser, .mv-picker-shell { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity var(--dur-base), visibility var(--dur-base); }
.ch-browser.ch-open { visibility: visible; opacity: 1; }
.ch-browser-panel {
    position: relative; width: 100%; max-width: 900px; max-height: 86vh; margin: 20px;
    display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-2xl);
    background: var(--bg-1); border: 1px solid var(--border-mid); box-shadow: var(--sh-lg);
    transform: scale(.97) translateY(10px); transition: transform var(--dur-base) var(--ease-out);
}
.ch-browser.ch-open .ch-browser-panel { transform: none; }
.ch-browser-header { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.ch-browser-back, .ch-browser-close, .mv-grid-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ch-browser-back svg, .ch-browser-close svg, .mv-grid-close svg { width: 16px; height: 16px; }
.ch-browser-title-wrap { flex: 1; min-width: 0; }
.ch-browser-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.ch-browser-subtitle { display: block; font-size: .78rem; color: var(--text-4); }
.ch-browser-search-row { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.ch-browser-search-row svg { width: 18px; height: 18px; color: var(--text-4); flex-shrink: 0; }
.ch-browser-search { flex: 1; border: none; background: none; font-size: .9rem; color: var(--text-1); }
.ch-browser-body { flex: 1; overflow-y: auto; padding: 18px 22px 24px; }
.ch-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ch-cat-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--border-soft); }
.ch-cat-btn svg { width: 24px; height: 24px; color: var(--accent); }
.ch-channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ch-channel-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--border-soft); }
.ch-channel-tile.ch-playing { border-color: var(--accent); background: rgba(var(--accent-rgb),.12); }
.ch-channel-logo, .ch-channel-logo-placeholder { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: contain; background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--text-4); }
.ch-channel-logo-placeholder svg { width: 20px; height: 20px; }
.ch-channel-name { font-size: .78rem; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ch-browser-loading, .ch-browser-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px 20px; color: var(--text-3); font-size: .88rem; }
.ch-browser-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--bg-4); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.ch-browser-player-section { padding: 16px 22px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.ch-browser-player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ch-browser-player-label { font-weight: 700; font-size: .88rem; }
.ch-browser-player-actions { display: flex; align-items: center; gap: 8px; }
.ch-browser-stream-url { width: 160px; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .72rem; color: var(--text-3); }
.ch-browser-copy-btn { padding: 7px 12px; border-radius: var(--r-sm); border: none; background: var(--bg-3); font-size: .76rem; font-weight: 600; }
.ch-browser-player-close { width: 28px; height: 28px; border: none; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.ch-browser-player-close svg { width: 14px; height: 14px; }
.ch-browser-player-wrap { border-radius: var(--r-md); overflow: hidden; background: #000; }
.ext-player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ext-player-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: var(--r-sm); background: var(--bg-3); font-size: .8rem; font-weight: 600; }

/* ----- Multi-view picker + grid ----- */
.mv-tabs { display: flex; gap: 8px; padding: 14px 22px 0; flex-shrink: 0; }
.mv-tab { padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .82rem; font-weight: 600; color: var(--text-3); }
.mv-tab.active { background: linear-gradient(120deg, rgba(var(--accent-rgb),.3), rgba(var(--accent-rgb),.12)); color: var(--text-1); border-color: rgba(var(--accent-rgb),.5); }
.mv-conn-banner { margin: 10px 22px 0; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255,194,75,.14); color: var(--soon); font-size: .82rem; }
.mv-conn-banner:empty { display: none; }
.mv-picker-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.mv-selected-count { font-size: .82rem; color: var(--text-3); }
.mv-start-btn { padding: 11px 22px; border: none; border-radius: var(--r-md); font-weight: 700; font-size: .88rem; color: #0b0b12; background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.mv-start-btn:disabled { opacity: .4; background: var(--bg-4); color: var(--text-4); }
.mv-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mv-tile-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-1); border: 2px solid var(--border-mid); }
.ch-channel-tile.is-active .mv-tile-check, .ch-cat-btn.is-active .mv-tile-check { background: var(--accent); border-color: var(--accent); }

.mv-grid-overlay { position: fixed; inset: 0; z-index: 70; background: var(--bg-0); display: flex; flex-direction: column; }
.mv-grid-overlay[hidden] { display: none; }
.mv-grid-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border-soft); }
.mv-grid-title { font-family: var(--font-display); font-weight: 700; }
.mv-grid-tiles { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; padding: 6px; }
.mv-tile { position: relative; background: #000; border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.mv-tile-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.mv-tile-name { font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-tile-mute-btn, .mv-tile-close-btn { width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; flex-shrink: 0; }
.mv-tile-player { width: 100%; height: 100%; }
.mv-tile-player.focused { outline: 3px solid var(--accent); outline-offset: -3px; }
.mv-tile-error { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-3); font-size: .82rem; text-align: center; padding: 10px; }

/* ============================================================
   SETTINGS PANEL
   ============================================================ */
.settings { display: flex; align-items: center; justify-content: flex-end; visibility: hidden; opacity: 0; transition: opacity var(--dur-base), visibility var(--dur-base); }
.settings.open { visibility: visible; opacity: 1; }
.settings-sheet {
    position: relative; width: 100%; max-width: 420px; height: 100%; overflow-y: auto;
    background: var(--bg-1); border-left: 1px solid var(--border-mid); box-shadow: var(--sh-lg);
    transform: translateX(20px); transition: transform var(--dur-base) var(--ease-out);
}
.settings.open .settings-sheet { transform: none; }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--border-soft); }
.settings-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0; letter-spacing: -.01em; }
.settings-subtitle { font-size: .8rem; color: var(--text-3); margin: 2px 0 0; }
.settings-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.settings-close svg { width: 16px; height: 16px; }
.settings-body { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 26px; }
.settings-group-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-4); margin-bottom: 10px; }
.settings-theme-row { display: flex; gap: 8px; }
.theme-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .74rem; font-weight: 600; color: var(--text-3); }
.theme-btn span { width: 100%; height: 20px; border-radius: var(--r-sm); }
.theme-btn-oled span { background: #020204; }
.theme-btn-dark span { background: #131322; }
.theme-btn-dim span { background: #262645; }
.theme-btn.active { border-color: var(--accent); color: var(--text-1); }
.settings-accent-row { display: flex; gap: 10px; flex-wrap: wrap; }
.accent-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: var(--ac); position: relative; }
.accent-btn.active { border-color: var(--text-1); box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--ac); }
.settings-group { display: flex; flex-direction: column; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.settings-toggle-row { border-radius: var(--r-md); padding: 12px 12px; }
.settings-toggle-row:focus-visible { background: var(--bg-2); }
.settings-row-title { font-size: .88rem; font-weight: 600; }
.settings-row-sub { font-size: .74rem; color: var(--text-4); margin-top: 2px; max-width: 260px; }
.settings-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.settings-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.settings-switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--bg-3); border: 1px solid var(--border-soft); transition: background var(--dur-base); }
.settings-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.settings-switch input:checked + span { background: rgba(var(--accent-rgb),.4); }
.settings-switch input:checked + span::after { transform: translateX(18px); background: var(--accent); }
.settings-select { width: 100%; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .86rem; }
.settings-about { padding-top: 6px; border-top: 1px solid var(--border-soft); }
.settings-about-row { display: flex; align-items: center; gap: 14px; }
.settings-about-logo { width: 44px; height: 44px; border-radius: var(--r-md); object-fit: cover; }
.settings-about-name { font-weight: 700; font-family: var(--font-display); }
.settings-about-sub { font-size: .78rem; color: var(--text-3); }
.settings-about-ver { font-size: .72rem; color: var(--text-4); margin-top: 2px; }

/* ----- Shortcuts overlay ----- */
.shortcuts { display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity var(--dur-base), visibility var(--dur-base); }
.shortcuts.open { visibility: visible; opacity: 1; }
.shortcuts-sheet { position: relative; width: 100%; max-width: 720px; margin: 20px; max-height: 86vh; overflow-y: auto; background: var(--bg-1); border-radius: var(--r-2xl); border: 1px solid var(--border-mid); box-shadow: var(--sh-lg); }
.shortcuts-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--border-soft); }
.shortcuts-header h2 { font-family: var(--font-display); margin: 0; font-size: 1.2rem; }
.shortcuts-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.shortcuts-close svg { width: 16px; height: 16px; }
.shortcuts-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 26px 30px; }
.shortcuts-col h3 { font-family: var(--font-display); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-4); margin: 0 0 12px; }
.shortcut-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .84rem; color: var(--text-2); }
.shortcut-row kbd, .rkey { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 8px; border-radius: var(--r-xs); background: var(--bg-3); border: 1px solid var(--border-mid); font-family: ui-monospace, monospace; font-size: .74rem; font-weight: 700; }

/* ============================================================
   MINI PLAYER
   ============================================================ */
.mini-player { position: fixed; bottom: 20px; right: 20px; width: 320px; z-index: 55; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1); border: 1px solid var(--border-mid); box-shadow: var(--sh-lg); animation: miniIn var(--dur-slow) var(--ease-out); }
.mini-player[hidden] { display: none; }
@keyframes miniIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.mini-player-handle { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: move; }
.mini-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: livePulseRing 1.6s ease-out infinite; flex-shrink: 0; }
.mini-player-title { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mini-player-wrap { background: #000; aspect-ratio: 16/9; }
.mini-player-actions { display: flex; gap: 6px; padding: 8px 10px; }
.mini-btn { width: 30px; height: 30px; border: none; border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.mini-btn svg { width: 15px; height: 15px; }

/* ============================================================
   TOASTS
   ============================================================ */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { padding: 10px 20px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--border-mid); box-shadow: var(--sh-md); font-size: .84rem; font-weight: 600; animation: toastIn var(--dur-base) var(--ease-out); }
.toast.toast-out { animation: toastOut var(--dur-base) var(--ease-io) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(20px); } }

/* ============================================================
   QUICK EDIT (mod/admin drawer)
   ============================================================ */
.qe-panel { display: flex; align-items: center; justify-content: flex-end; visibility: hidden; opacity: 0; transition: opacity var(--dur-base), visibility var(--dur-base); }
.qe-panel.qe-open { visibility: visible; opacity: 1; }
.qe-drawer { position: relative; width: 100%; max-width: 460px; height: 100%; overflow-y: auto; background: var(--bg-1); border-left: 1px solid var(--border-mid); }
.qe-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.qe-header-left { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.qe-header-left svg { width: 18px; height: 18px; color: var(--accent); }
.qe-header-actions { display: flex; align-items: center; gap: 10px; }
.qe-full-cp-link { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--accent); }
.qe-full-cp-link svg { width: 14px; height: 14px; }
.qe-close-btn { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.qe-body { padding: 18px 22px; }
.qe-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.qe-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qe-label { font-size: .74rem; font-weight: 600; color: var(--text-3); }
.qe-input { padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .86rem; }
.qe-type-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.qe-type-btn { flex: 1; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .82rem; font-weight: 600; color: var(--text-3); }
.qe-type-btn.active { border-color: var(--accent); color: var(--text-1); background: rgba(var(--accent-rgb),.14); }
.qe-section-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-4); margin: 18px 0 10px; }
.qe-ch-list { display: flex; flex-direction: column; gap: 6px; }
.qe-ch-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg-2); }
.qe-ch-name { flex: 1; font-size: .82rem; }
.qe-ch-remove { width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--bg-3); color: var(--live); }
.qe-ch-add-row { display: flex; gap: 8px; margin-top: 10px; position: relative; }
.qe-ch-search { flex: 1; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .82rem; }
.qe-ch-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 200px; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--border-mid); border-radius: var(--r-sm); z-index: 5; }
.qe-ch-opt { display: block; width: 100%; text-align: left; padding: 8px 12px; font-size: .82rem; border: none; background: none; }
.qe-ch-opt:hover { background: var(--bg-3); }
.qe-ch-empty { padding: 14px; text-align: center; color: var(--text-4); font-size: .82rem; }
.qe-msg { padding: 10px 14px; border-radius: var(--r-sm); font-size: .82rem; margin-bottom: 12px; }
.qe-msg-ok { background: rgba(34,224,160,.14); color: var(--success); }
.qe-msg-err { background: rgba(255,51,99,.14); color: var(--live); }
.qe-loading { padding: 30px; text-align: center; color: var(--text-4); }
.qe-footer { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-soft); }
.qe-cancel-btn { flex: 1; padding: 11px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--bg-2); font-weight: 600; }
.qe-save-btn { flex: 1; padding: 11px; border-radius: var(--r-md); border: none; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #0b0b12; font-weight: 700; }
.qe-hidden { opacity: .5; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1100px) {
    body { font-size: 14.5px; }
    :root { --rail-w: 220px; }
    .hero-slide { padding: 24px; min-height: 260px; }
    .hero-spotlight { grid-template-columns: 1fr; }
    .hero-spotlight-side { flex-direction: row; }
}

@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .rail-row, .fav-list { grid-template-columns: repeat(3, 1fr); }
    .rail {
        position: fixed; left: 0; top: 0; width: 280px; height: 100vh; z-index: 80;
        transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
        border-right: 1px solid var(--border-mid);
    }
    .rail.open { transform: none; }
    .tb-menu { display: flex; }
    .tab-bar { display: flex; }
    .main { padding-bottom: var(--tabbar-h); }
    .hero-teams { gap: 10px; }
    .hero-team-block { width: 84px; }
    .hero-team-logo { width: 52px; height: 52px; }
    .modal-sheet, .ch-browser-panel, .settings-sheet, .qe-drawer { border-radius: 0 !important; height: 100vh; max-height: 100vh; margin: 0 !important; max-width: 100%; }
    .settings-sheet, .qe-drawer { width: 100%; }
}

@media (max-width: 600px) {
    .tb-view-title { display: none; }
    .tb-search-input { width: 100%; }
    .tb-date-pills { flex: 1; }
    .rail-row, .fav-list { grid-template-columns: repeat(2, 1fr); }
    .hero-slide { grid-template-columns: 1fr; }
    .hero-art { order: -1; }
    .shortcuts-body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .login-card { padding: 26px 20px; }
    .topbar { padding: 0 14px; gap: 8px; height: 60px; }
    .date-strip { padding: 0 14px 10px; }
    .view { padding: 0 14px; }
    .hero-slide { padding: 18px; min-height: 220px; }
    .hero-title { font-size: 1.4rem; }
    .ev-card { --card-h: 208px; }
    .sport-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
    .tab-bar { height: 56px; padding-bottom: max(env(safe-area-inset-bottom), 4px); }
    .rail-row, .fav-list { gap: 10px; }
}

@media (pointer: coarse) and (hover: none) {
    .tab-btn, .rail-item, .date-pill, .ds-arrow, .tb-icon-btn { min-height: 44px; min-width: 44px; touch-action: manipulation; }
    .ev-card, .sport-card, .ch-cat-btn, .ch-channel-tile { touch-action: manipulation; }
}

/* ----- TV rail collapse (desktop/TV only, driven by tvNavOpen) ----- */
@media (min-width: 901px) {
    /* Redefine the same --rail-w the grid track already reads (line ~190), so the
       collapsed/expanded rail width and the grid column never drift apart. */
    body.is-tv { --rail-w: var(--rail-w-collapsed); }
    body.is-tv .rail .rail-label, body.is-tv .rail .rail-sub, body.is-tv .rail .rail-user-info { display: none; }
    /* --rail-w must be set on body (an ancestor of both .app and .rail) so it
       reaches .app's grid-template-columns too — setting it on .rail itself
       (a descendant of .app) would not cascade back up to the grid track.
       .rail.open and body.nav-open are always toggled together by the same
       click handler in app.js, so body.is-tv.nav-open alone covers this. */
    body.is-tv.nav-open { --rail-w: 280px; }
    body.is-tv .rail.open .rail-label, body.is-tv .rail.open .rail-sub, body.is-tv .rail.open .rail-user-info,
    body.is-tv.nav-open .rail .rail-label, body.is-tv.nav-open .rail .rail-sub, body.is-tv.nav-open .rail .rail-user-info { display: block; }
    body.is-tv .app { transition: none; }
    /* TVs are viewed from further away — cards get a little taller, not smaller. */
    body.is-tv .ev-card { --card-h: 252px; }
}

/* ============================================================
   ADDITIONAL COMPONENTS (favorites tabs, quality picker, misc states)
   ============================================================ */
.ds-switch-text { font-weight: 600; }
.ev-vs-text { font-weight: 700; }
.login-brand-text { display: flex; flex-direction: column; min-width: 0; }
.ev-card-hidden { opacity: .4; filter: grayscale(.6); }
.is-hidden { color: var(--live) !important; border-color: rgba(255,51,99,.5) !important; }

.fav-tabs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.fav-tabs::-webkit-scrollbar { display: none; }
.fav-tab { flex-shrink: 0; padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: var(--bg-2); color: var(--text-3); font-size: .84rem; font-weight: 600; }
.fav-tab.active { background: linear-gradient(120deg, rgba(var(--accent-rgb),.3), rgba(var(--accent-rgb),.12)); color: var(--text-1); border-color: rgba(var(--accent-rgb),.5); }

.quality-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 4px 0; }
.quality-btn { padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-2); font-size: .82rem; font-weight: 600; color: var(--text-2); }
.quality-btn:hover { border-color: rgba(var(--accent-rgb),.5); color: var(--text-1); }

.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--bg-4); border-top-color: var(--accent); animation: spin .9s linear infinite; display: inline-block; }

.qe-form { display: flex; flex-direction: column; }
.qe-label-row { display: flex; align-items: center; justify-content: space-between; }
.qe-error { padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255,51,99,.14); color: var(--live); font-size: .82rem; margin-bottom: 12px; }
.skel-row { display: flex; flex-direction: column; }

.mv-grid-tiles.mv-grid-count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.mv-grid-tiles.mv-grid-count-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.mv-grid-tiles.mv-grid-count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mv-grid-tiles.mv-grid-count-3 .mv-tile:first-child { grid-column: 1 / -1; }
.mv-grid-tiles.mv-grid-count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }