/*
 * Studio shell concept
 * A structural visual layer: fixed service dock on desktop and a compact
 * broadcast command bar for the active sports workspace.
 */

:root {
    --dock-width: 224px;
    --studio-ink: #08111f;
    --studio-panel: #101b2c;
    --studio-panel-2: #17253a;
    --studio-line: #2d4261;
    --studio-lime: #5f98f6;
    --studio-lime-strong: #3f76cf;
    --studio-sky: #43c0df;
    --studio-coral: #f07783;
    --studio-yellow: #e0b553;
    --studio-accent-ink: #0b1622;
    --studio-white: #f7f9fa;
    --studio-muted: #a0aec0;

    --ui-page: var(--studio-ink);
    --ui-surface: var(--studio-panel);
    --ui-surface-raised: var(--studio-panel-2);
    --ui-surface-soft: #0b1626;
    --ui-border: var(--studio-line);
    --ui-border-strong: #49617f;
    --ui-text: var(--studio-white);
    --ui-text-secondary: var(--studio-muted);
    --ui-text-tertiary: #71829a;
    --ui-green: var(--studio-lime);
    --ui-green-strong: var(--studio-lime-strong);
    --ui-cyan: var(--studio-sky);
    --ui-coral: var(--studio-coral);
    --ui-amber: var(--studio-yellow);
    --ui-control: #172337;
    --ui-control-hover: #20314b;
    --ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
    --ui-shadow-hover: 0 20px 42px rgba(0, 0, 0, 0.34);
}

:root[data-theme="light"] {
    --studio-ink: #edf3fc;
    --studio-panel: #ffffff;
    --studio-panel-2: #f5f8fe;
    --studio-line: #cbd9ed;
    --studio-lime: #5688dc;
    --studio-lime-strong: #366cc3;
    --studio-sky: #287f9a;
    --studio-coral: #c85b66;
    --studio-yellow: #956f20;
    --studio-accent-ink: #0b1622;
    --studio-white: #11171d;
    --studio-muted: #52657c;

    --ui-page: var(--studio-ink);
    --ui-surface: var(--studio-panel);
    --ui-surface-raised: var(--studio-panel-2);
    --ui-surface-soft: #e7eef8;
    --ui-border: var(--studio-line);
    --ui-border-strong: #a9bbd3;
    --ui-text: var(--studio-white);
    --ui-text-secondary: var(--studio-muted);
    --ui-text-tertiary: #718096;
    --ui-green: var(--studio-lime);
    --ui-green-strong: var(--studio-lime-strong);
    --ui-cyan: var(--studio-sky);
    --ui-coral: var(--studio-coral);
    --ui-amber: var(--studio-yellow);
    --ui-control: #e6edf7;
    --ui-control-hover: #dbe5f2;
}

:root[data-accent="emerald"] {
    --studio-ink: #071510;
    --studio-panel: #0d2119;
    --studio-panel-2: #153126;
    --studio-line: #2c5141;
    --studio-lime: #43d39b;
    --studio-lime-strong: #27ad78;
    --studio-sky: #4fc3c1;
    --studio-coral: #f27f78;
    --studio-yellow: #dfb852;
    --studio-muted: #9fb9ae;
    --ui-surface-soft: #091b15;
    --ui-border-strong: #47715f;
    --ui-text-tertiary: #718c80;
    --ui-control: #14271f;
    --ui-control-hover: #1d362b;
}

:root[data-theme="light"][data-accent="emerald"] {
    --studio-ink: #edf8f3;
    --studio-panel: #ffffff;
    --studio-panel-2: #f4fbf7;
    --studio-line: #c7e2d5;
    --studio-lime: #49b687;
    --studio-lime-strong: #268c62;
    --studio-sky: #268c98;
    --studio-coral: #ce645f;
    --studio-yellow: #987729;
    --studio-muted: #526d62;
    --ui-surface-soft: #e6f3ed;
    --ui-border-strong: #a8cdbb;
    --ui-text-tertiary: #74887f;
    --ui-control: #e5f1eb;
    --ui-control-hover: #d9e9e1;
}

:root[data-accent="coral"] {
    --studio-ink: #190b10;
    --studio-panel: #251117;
    --studio-panel-2: #321820;
    --studio-line: #59303a;
    --studio-lime: #ff7b8a;
    --studio-lime-strong: #dc5869;
    --studio-sky: #76aee5;
    --studio-coral: #ff7b8a;
    --studio-yellow: #ecb15b;
    --studio-muted: #c0a3aa;
    --ui-surface-soft: #200e14;
    --ui-border-strong: #794450;
    --ui-text-tertiary: #94747c;
    --ui-control: #2b171d;
    --ui-control-hover: #3a2028;
}

:root[data-theme="light"][data-accent="coral"] {
    --studio-ink: #fff0f2;
    --studio-panel: #ffffff;
    --studio-panel-2: #fff7f8;
    --studio-line: #eccbd1;
    --studio-lime: #e87883;
    --studio-lime-strong: #c94e5d;
    --studio-sky: #397fae;
    --studio-coral: #d75d69;
    --studio-yellow: #9b7028;
    --studio-muted: #735860;
    --ui-surface-soft: #f9e7ea;
    --ui-border-strong: #d6aeb5;
    --ui-text-tertiary: #8c737a;
    --ui-control: #f8e7ea;
    --ui-control-hover: #f1dce0;
}

:root[data-accent="amber"] {
    --studio-ink: #171107;
    --studio-panel: #231a0d;
    --studio-panel-2: #302313;
    --studio-line: #544022;
    --studio-lime: #efb84d;
    --studio-lime-strong: #ca9026;
    --studio-sky: #72a9df;
    --studio-coral: #ed7a70;
    --studio-yellow: #efb84d;
    --studio-muted: #b9aa8d;
    --ui-surface-soft: #1d150a;
    --ui-border-strong: #735b33;
    --ui-text-tertiary: #8c7b5d;
    --ui-control: #2a2012;
    --ui-control-hover: #392c19;
}

:root[data-theme="light"][data-accent="amber"] {
    --studio-ink: #fbf4e7;
    --studio-panel: #ffffff;
    --studio-panel-2: #fffaf1;
    --studio-line: #ead8b9;
    --studio-lime: #d8a442;
    --studio-lime-strong: #ad7a1e;
    --studio-sky: #4878a4;
    --studio-coral: #bd5e58;
    --studio-yellow: #987126;
    --studio-muted: #6c6250;
    --ui-surface-soft: #f6ecd8;
    --ui-border-strong: #d2bd96;
    --ui-text-tertiary: #817866;
    --ui-control: #f7eddc;
    --ui-control-hover: #efe1c9;
}

:root[data-accent="violet"] {
    --studio-ink: #120d1c;
    --studio-panel: #1c142a;
    --studio-panel-2: #281d3a;
    --studio-line: #49365f;
    --studio-lime: #bd8cff;
    --studio-lime-strong: #9560dc;
    --studio-sky: #5bbfd3;
    --studio-coral: #f07c9d;
    --studio-yellow: #dfb85a;
    --studio-muted: #b4a6c7;
    --ui-surface-soft: #171020;
    --ui-border-strong: #654d80;
    --ui-text-tertiary: #89799e;
    --ui-control: #241a31;
    --ui-control-hover: #322343;
}

:root[data-theme="light"][data-accent="violet"] {
    --studio-ink: #f5effc;
    --studio-panel: #ffffff;
    --studio-panel-2: #faf7fe;
    --studio-line: #ddcdea;
    --studio-lime: #aa7de3;
    --studio-lime-strong: #8455bd;
    --studio-sky: #348397;
    --studio-coral: #c65f7d;
    --studio-yellow: #927126;
    --studio-muted: #675b75;
    --ui-surface-soft: #eee6f7;
    --ui-border-strong: #c6b2d8;
    --ui-text-tertiary: #7f748b;
    --ui-control: #f0e8f7;
    --ui-control-hover: #e6d9f1;
}

:root[data-accent="neon"] {
    --studio-ink: #080a0d;
    --studio-panel: #101419;
    --studio-panel-2: #171c22;
    --studio-line: #2b333c;
    --studio-lime: #c8f53c;
    --studio-lime-strong: #a5d614;
    --studio-sky: #39bdf8;
    --studio-coral: #ff6570;
    --studio-yellow: #f6c453;
    --studio-accent-ink: #121700;
    --studio-muted: #9aa5b0;
    --ui-surface-soft: #0c0f13;
    --ui-border-strong: #46515d;
    --ui-text-tertiary: #697581;
    --ui-control: #191f26;
    --ui-control-hover: #222a32;
}

:root[data-theme="light"][data-accent="neon"] {
    --studio-ink: #f2f4f5;
    --studio-panel: #ffffff;
    --studio-panel-2: #ffffff;
    --studio-line: #d7dde1;
    --studio-lime: #6d9200;
    --studio-lime-strong: #587700;
    --studio-sky: #0676a0;
    --studio-coral: #d83d4c;
    --studio-yellow: #9b6500;
    --studio-accent-ink: #121700;
    --studio-muted: #596570;
    --ui-surface-soft: #eceff1;
    --ui-border-strong: #b8c1c8;
    --ui-text-tertiary: #7c8791;
    --ui-control: #f0f3f4;
    --ui-control-hover: #e5e9eb;
}

body {
    background: var(--ui-page);
}

.accent-control {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid var(--ui-border);
    border-radius: 5px;
    background: var(--ui-control);
    color: var(--ui-text-secondary);
}

.accent-control:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-control-hover);
    color: var(--ui-text);
}

.accent-control i {
    color: var(--studio-lime);
}

.accent-control select {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.accent-control select option {
    background: var(--ui-surface);
    color: var(--ui-text);
}

.desktop-nav .brand-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    flex: 0 0 22px;
    place-items: center;
    justify-self: center;
    overflow: hidden;
    border: 1px solid rgba(17, 23, 29, 0.1);
    border-radius: 5px;
    background: #ffffff;
}

.desktop-nav .brand-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.desktop-nav a.active .brand-icon {
    border-color: rgba(18, 23, 0, 0.2);
}

/* Desktop app dock */
@media (min-width: 981px) {
    :root[data-nav-collapsed="true"] {
        --dock-width: 76px;
    }

    .glass-header,
    :root[data-theme="light"] .glass-header {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--dock-width);
        height: 100vh;
        height: 100dvh;
        padding: 0;
        border: 0;
        border-right: 1px solid var(--ui-border);
        background: var(--ui-surface);
        box-shadow: none;
        overflow: hidden;
        transition: width 180ms ease;
    }

    .header-content.container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        padding: 16px 13px 14px;
    }

    .dock-brand-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 28px;
        align-items: center;
        gap: 4px;
        padding: 0 3px 12px;
        border-bottom: 1px solid var(--ui-border);
    }

    .logo {
        flex: 0 0 auto;
        width: 100%;
        min-height: 48px;
        justify-content: flex-start;
        min-width: 0;
        gap: 6px;
        padding: 0;
        border: 0;
        font-size: 0.88rem;
    }

    .logo-label {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: hidden;
        line-height: 1;
        white-space: nowrap;
    }

    .logo-label .highlight {
        font-size: 0.72rem;
    }

    .desktop-nav-toggle {
        width: 28px;
        height: 30px;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--ui-border);
        border-radius: 5px;
        background: var(--ui-control);
        color: var(--ui-text-secondary);
        cursor: pointer;
    }

    .desktop-nav-toggle:hover {
        border-color: var(--ui-border-strong);
        background: var(--ui-control-hover);
        color: var(--ui-text);
    }

    .desktop-nav-toggle i {
        transition: transform 180ms ease;
    }

    .logo-icon {
        width: 34px;
        height: 34px;
        background: var(--studio-lime);
        color: var(--studio-accent-ink);
    }

    .global-search {
        order: 2;
        flex: 0 0 40px;
        width: 100%;
        height: 40px;
        margin: 0;
    }

    .global-search input {
        width: 100%;
        padding-left: 12px;
        font-size: 0.8rem;
    }

    .desktop-nav,
    :root[data-theme="light"] .desktop-nav {
        order: 3;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 3px 0;
        border: 0;
        background: transparent;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .desktop-nav a,
    :root[data-theme="light"] .desktop-nav a {
        flex: 0 0 auto;
        width: 100%;
        min-height: 38px;
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        justify-content: stretch;
        gap: 7px;
        padding: 0 10px;
        border: 1px solid transparent;
        border-radius: 5px;
        color: var(--ui-text-secondary);
        font-size: 0.81rem;
        font-weight: 760;
        text-align: left;
    }

    .desktop-nav a i {
        width: 18px;
        color: var(--ui-text-tertiary);
        font-size: 0.84rem;
        text-align: center;
    }

    .desktop-nav a:hover,
    :root[data-theme="light"] .desktop-nav a:hover {
        border-color: transparent;
        background: var(--ui-control);
        color: var(--ui-text);
    }

    .desktop-nav a:hover i {
        color: var(--ui-cyan);
    }

    .desktop-nav a.active,
    :root[data-theme="light"] .desktop-nav a.active {
        border-color: var(--studio-lime);
        background: var(--studio-lime);
        color: var(--studio-accent-ink);
    }

    .desktop-nav a.active i {
        color: var(--studio-accent-ink);
    }

    .header-actions {
        order: 4;
        flex: 0 0 auto;
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 6px;
        padding-top: 11px;
        border-top: 1px solid var(--ui-border);
    }

    .header-actions .theme-control {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .header-actions .theme-control select {
        min-width: 0;
        flex: 1;
    }

    .header-actions .accent-control {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
    }

    .header-actions .accent-control select {
        flex: 1;
    }

    .header-actions .color-assist-control {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .header-actions .color-assist-control-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .header-actions .status-pill,
    .header-actions .auth-button {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        justify-content: center;
    }

    .mobile-menu-btn {
        display: none;
    }

    main,
    .glass-footer {
        margin-left: var(--dock-width);
        transition: margin-left 180ms ease;
    }

    main {
        min-height: 100vh;
    }

    :root[data-nav-collapsed="true"] .header-content.container {
        gap: 9px;
        padding-inline: 9px;
    }

    :root[data-nav-collapsed="true"] .dock-brand-row {
        grid-template-columns: 30px 24px;
        gap: 3px;
        padding-inline: 0;
    }

    :root[data-nav-collapsed="true"] .logo {
        min-height: 42px;
    }

    :root[data-nav-collapsed="true"] .logo-icon {
        width: 30px;
        height: 30px;
    }

    :root[data-nav-collapsed="true"] .logo-label,
    :root[data-nav-collapsed="true"] .global-search,
    :root[data-nav-collapsed="true"] .header-actions {
        display: none;
    }

    :root[data-nav-collapsed="true"] .desktop-nav-toggle {
        width: 24px;
        height: 28px;
    }

    :root[data-nav-collapsed="true"] .desktop-nav-toggle i {
        transform: rotate(180deg);
    }

    :root[data-nav-collapsed="true"] .desktop-nav a,
    :root[data-nav-collapsed="true"][data-theme="light"] .desktop-nav a {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-inline: 0;
    }

    :root[data-nav-collapsed="true"] .desktop-nav a > span:not(.brand-icon) {
        display: none;
    }

    :root[data-nav-collapsed="true"] .desktop-nav a i {
        width: 22px;
        font-size: 0.95rem;
    }

    /* The sports workspace has its own horizontal command bar. */
    #sports-view.app-view.active {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 0 52px;
    }

    #sports-view > section {
        width: 100%;
    }

    .sports-command-rail,
    :root[data-theme="light"] .sports-command-rail {
        position: sticky;
        top: 0;
        z-index: 850;
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 20px;
        margin: 0;
        padding: 10px clamp(24px, 3vw, 48px);
        border: 0;
        border-bottom: 1px solid var(--ui-border);
        border-radius: 0;
        background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
        box-shadow: none;
        backdrop-filter: blur(16px);
    }

    .sports-rail-brand {
        min-width: 150px;
        min-height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .sports-rail-icon {
        width: 34px;
        height: 34px;
        border-color: color-mix(in srgb, var(--studio-lime) 45%, var(--ui-border));
        background: color-mix(in srgb, var(--studio-lime) 12%, var(--ui-surface));
        color: var(--studio-lime);
    }

    :root[data-theme="light"] .sports-rail-icon {
        color: var(--ui-green);
    }

    .sports-rail-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .sports-rail-nav a {
        min-height: 36px;
        padding: 0 12px;
        border-radius: 5px;
        white-space: nowrap;
    }

    .sports-rail-nav a.active {
        background: var(--studio-lime);
        color: var(--studio-accent-ink);
        box-shadow: none;
    }

    .sports-rail-nav a.active i {
        color: var(--studio-accent-ink);
    }

    :root[data-theme="light"] .sports-rail-nav a.active {
        background: var(--studio-lime);
        color: var(--studio-accent-ink);
    }

    .sports-rail-pulse,
    :root[data-theme="light"] .sports-rail-pulse {
        min-width: 132px;
        margin: 0;
        padding: 7px 10px;
        border-radius: 5px;
    }

    #sports-view .score-ticker-section {
        padding-top: 20px;
    }
}

/* Content canvas */
.container,
#sports-view > section .container {
    width: min(100%, 1720px);
    padding-inline: clamp(22px, 3vw, 48px);
}

#sports-view > section .container {
    padding-inline: clamp(22px, 3vw, 48px);
}

.section-padding {
    padding: 44px 0;
}

.section-header,
#sports-view .section-header {
    min-height: 62px;
    align-items: flex-end;
    margin-bottom: 22px;
    padding: 0 0 15px;
}

.section-header h2,
#sports-view .section-header h2 {
    font-size: clamp(1.45rem, 1.1rem + 0.9vw, 2.05rem);
    font-weight: 900;
}

.section-header h2 i {
    width: auto;
    margin-right: 9px;
    color: var(--studio-lime);
}

:root[data-theme="light"] .section-header h2 i {
    color: var(--ui-green);
}

.section-subtitle {
    margin-top: 6px;
    font-size: 0.86rem;
}

/* A dark scoreboard strip remains intentionally broadcast-like in both themes. */
#sports-view .score-ticker,
:root[data-theme="light"] #sports-view .score-ticker {
    min-height: 96px;
    border: 0;
    border-radius: 0;
    background: #10151a;
    box-shadow: inset 0 3px 0 var(--studio-lime);
}

#sports-view .score-ticker-updated,
:root[data-theme="light"] #sports-view .score-ticker-updated {
    color: #87939f;
}

#sports-view .score-ticker-track,
:root[data-theme="light"] #sports-view .score-ticker-track {
    color: #f7f9fa;
}

#sports-view .score-ticker-item,
:root[data-theme="light"] #sports-view .score-ticker-item {
    width: 184px;
    min-height: 70px;
    border-color: #303943;
    background: #171d23;
}

#sports-view .score-ticker-league,
:root[data-theme="light"] #sports-view .score-ticker-league {
    color: var(--studio-lime);
}

#sports-view .score-ticker-time,
:root[data-theme="light"] #sports-view .score-ticker-time {
    color: #76838f;
}

.score-ticker-team-row,
:root[data-theme="light"] .score-ticker-team-row {
    color: #f4f7f9;
}

.score-ticker-team-row.winner,
:root[data-theme="light"] .score-ticker-team-row.winner {
    color: var(--studio-lime);
}

/* Cards read like a content wall rather than floating glass panels. */
.grid-layout {
    gap: 18px 14px;
}

#sports-view .grid-layout {
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 18px;
}

#sports-view #channels .grid-layout,
#sports-view #highlights .grid-layout {
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.glass-card,
.score-card,
.standing-card,
.worldcup-highlight-card {
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

.glass-card:hover {
    border-color: var(--studio-lime);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] .glass-card:hover {
    border-color: color-mix(in srgb, var(--studio-lime) 70%, var(--ui-border));
    box-shadow: 0 16px 34px rgba(28, 39, 49, 0.12);
}

.card-content {
    min-height: 70px;
    padding: 13px 14px 15px;
}

.video-card h3,
.match-teams {
    font-size: 0.97rem;
}

.play-overlay {
    background: var(--studio-lime);
    color: var(--studio-accent-ink);
}

.category-badge {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(6, 8, 10, 0.86);
}

.spotv-auth-strip {
    border-left: 4px solid var(--studio-sky);
    border-radius: 0 6px 6px 0;
}

/* Service categories stay above the content so the dock never becomes a double sidebar. */
.tving-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.tving-layout > * {
    min-width: 0;
}

@media (min-width: 981px) {
    .tving-menu,
    :root[data-theme="light"] .tving-menu.glass-card {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 9px;
        border: 1px solid var(--ui-border);
        border-radius: 6px;
        background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .tving-menu-scroll {
        flex: 1 1 520px;
        min-width: 0;
        display: flex;
        gap: 5px;
        overflow-x: auto;
        scrollbar-width: thin;
        overscroll-behavior-inline: contain;
    }

    .tving-menu-scroll button,
    :root[data-theme="light"] .tving-menu-scroll button {
        flex: 0 0 auto;
        min-height: 36px;
        justify-content: center;
        padding: 0 12px;
        white-space: nowrap;
        text-align: center;
    }

    .tving-menu .tving-search {
        flex: 0 1 240px;
        width: clamp(180px, 19vw, 240px);
        margin: 0;
    }

    .tving-menu > .tving-cookie-box {
        flex: 0 0 auto;
        margin: 0;
    }

    .tving-menu > .tving-cookie-box[open] {
        flex-basis: 100%;
    }
}

.tving-menu-scroll button.active,
:root[data-theme="light"] .tving-menu-scroll button.active {
    background: var(--studio-lime);
    color: var(--studio-accent-ink);
    box-shadow: none;
}

.tving-menu-scroll button.active::before {
    display: none;
}

.tving-list-header {
    min-height: 46px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-border);
}

.tving-title {
    font-size: 1.18rem;
    font-weight: 900;
}

.netflix-rail {
    margin-bottom: 40px;
}

.netflix-rail-header h3 {
    font-size: 1.12rem;
}

.netflix-rail-track {
    gap: 12px;
}

/* Score and World Cup screens use denser editorial modules. */
.score-filter {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ui-border);
}

.score-filter-chip.active,
:root[data-theme="light"] .score-filter-chip.active {
    background: var(--studio-lime);
    color: var(--studio-accent-ink);
    box-shadow: none;
}

.score-filter-chip.active span {
    background: var(--studio-accent-ink);
    color: var(--studio-lime);
}

.score-mode-toggle button.active,
:root[data-theme="light"] .score-mode-toggle button.active {
    background: var(--studio-sky);
    color: #06131a;
}

.score-card.live {
    box-shadow: inset 4px 0 0 var(--studio-coral);
}

.worldcup-day.today {
    border-left: 4px solid var(--studio-lime);
    border-radius: 0;
}

.worldcup-date-nav {
    border-radius: 5px;
}

/* Footer aligns with the app canvas. */
.glass-footer {
    padding-top: 30px;
    border-top-color: var(--ui-border);
}

/* Tablet and mobile return to a top navigation shell. */
@media (max-width: 980px) {
    :root {
        --dock-width: 0px;
    }

    .glass-header,
    :root[data-theme="light"] .glass-header {
        position: sticky;
        inset: auto;
        width: 100%;
        height: auto;
        padding: 8px 0 9px;
        border-right: 0;
        border-bottom: 1px solid var(--ui-border);
        overflow: visible;
    }

    .header-content.container {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding-inline: 16px;
    }

    .logo {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-height: 36px;
        padding: 0;
        border: 0;
    }

    .dock-brand-row {
        display: contents;
    }

    .desktop-nav-toggle {
        display: none;
    }

    .global-search {
        grid-column: 1 / -1;
        grid-row: 2;
        order: initial;
        width: 100%;
        height: 38px;
    }

    .desktop-nav,
    :root[data-theme="light"] .desktop-nav {
        grid-column: 1 / -1;
        grid-row: 3;
        order: initial;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .desktop-nav a,
    :root[data-theme="light"] .desktop-nav a {
        flex: 0 0 auto;
        width: auto;
        min-height: 36px;
        display: inline-flex;
        gap: 6px;
        padding: 0 11px;
        border: 1px solid var(--ui-border);
        background: var(--ui-surface);
        font-size: 0.78rem;
    }

    .desktop-nav a i {
        width: auto;
    }

    .desktop-nav .brand-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .desktop-nav a.active,
    :root[data-theme="light"] .desktop-nav a.active {
        border-color: var(--studio-lime);
        background: var(--studio-lime);
        color: var(--studio-accent-ink);
    }

    .header-actions {
        grid-column: 2;
        grid-row: 1;
        order: initial;
        width: auto;
        display: flex;
        gap: 5px;
        padding: 0;
        border: 0;
    }

    .header-actions .accent-control {
        position: relative;
        width: 38px;
        min-width: 38px;
        padding: 0;
        justify-content: center;
    }

    .header-actions .accent-control select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    main,
    .glass-footer {
        margin-left: 0;
    }

    #sports-view.app-view.active {
        display: block;
        padding: 0 0 36px;
    }

    .sports-command-rail,
    :root[data-theme="light"] .sports-command-rail {
        position: static;
        width: 100%;
        display: flex;
        margin: 0;
        padding: 8px 14px;
        border: 0;
        border-bottom: 1px solid var(--ui-border);
        border-radius: 0;
        background: var(--ui-surface);
        overflow-x: auto;
        box-shadow: none;
    }

    .sports-rail-brand,
    .sports-rail-pulse {
        display: none;
    }

    .sports-rail-nav {
        display: flex;
        flex: 0 0 auto;
        gap: 5px;
    }

    .sports-rail-nav a {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 10px;
        border: 1px solid var(--ui-border);
        white-space: nowrap;
    }

    .sports-rail-nav a.active {
        border-color: var(--studio-lime);
        background: var(--studio-lime);
        color: var(--studio-accent-ink);
    }

    .sports-rail-nav a.active i {
        color: var(--studio-accent-ink);
    }

    .container,
    #sports-view > section .container {
        padding-inline: 16px;
    }

    .tving-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .tving-menu,
    :root[data-theme="light"] .tving-menu.glass-card {
        padding: 8px;
        border: 1px solid var(--ui-border);
        border-radius: 6px;
        background: var(--ui-surface);
    }

    .tving-menu-scroll button.active,
    :root[data-theme="light"] .tving-menu-scroll button.active {
        box-shadow: inset 0 -3px 0 var(--studio-accent-ink);
    }
}

@media (max-width: 680px) {
    .header-content.container {
        padding-inline: 14px;
    }

    .logo {
        font-size: 0.95rem;
    }

    .logo .highlight {
        display: none;
    }

    .desktop-nav a > i {
        display: none;
    }

    .desktop-nav .brand-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .section-padding {
        padding: 30px 0;
    }

    .section-header,
    #sports-view .section-header {
        min-height: auto;
        align-items: flex-start;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .section-header h2,
    #sports-view .section-header h2 {
        font-size: 1.25rem;
    }

    #sports-view .score-ticker-section {
        padding-top: 14px;
    }

    #sports-view .score-ticker {
        min-height: 82px;
    }

    #sports-view .grid-layout {
        grid-template-columns: 1fr;
    }

    #sports-view #channels .grid-layout,
    #sports-view #highlights .grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 520px) {
    .header-actions .theme-control {
        position: relative;
        width: 38px;
        min-width: 38px;
        padding: 0;
        justify-content: center;
    }

    .header-actions .theme-control select {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        opacity: 0;
    }
}

@media (max-height: 700px) and (min-width: 981px) {
    .header-content.container {
        gap: 8px;
        padding-block: 11px;
    }

    .logo {
        min-height: 42px;
        padding-bottom: 8px;
    }

    .desktop-nav a,
    :root[data-theme="light"] .desktop-nav a {
        min-height: 34px;
    }

    .header-actions {
        padding-top: 8px;
    }
}

/* Preserve the exact active-state colors used before selectable palettes. */
:root[data-accent="neon"] .logo-icon {
    color: #101600;
}

:root[data-theme="light"][data-accent="neon"] .sports-rail-nav a.active {
    background: #d8f26f;
    color: #263100;
}

:root[data-theme="light"][data-accent="neon"] .sports-rail-nav a.active i {
    color: #263100;
}

:root[data-theme="light"][data-accent="neon"] .glass-card:hover {
    border-color: #8eae21;
}