/**
 * TiviGlass IPTV - Sky Glass inspired theme
 *
 * Kept filename for compatibility with index.html.
 * Loaded AFTER style.css / player.css / settings.css.
 *
 * Goal: Sky Glass-like colour system, glass panels, soft gradients,
 * remote-friendly focus glow, polished cards/buttons.
 */

:root {
    /* ========= Core background - Deep, rich dark theme (overrides style.css) ========= */
    --bg-primary: #040810;
    --bg-secondary: #08121e;
    --bg-tertiary: #0c1a2a;
    --bg-elevated: rgba(16, 30, 50, 0.85);

    /* ========= Premium accents (overrides / additions) ========= */
    --accent-blue: var(--accent-cyan);
    --accent-cyan-glow: rgba(var(--accent-cyan-rgb), 0.28);
    --ribbon-gradient: linear-gradient(90deg, var(--accent-cyan) 0%, #9966ff 50%, var(--accent-pink) 100%);

    /* ========= Motion - Snappy for Fire Stick ========= */
    --ease-out-sky: ease-out;
    --ease-inout-sky: ease-in-out;
    --motion-fast: 120ms;
    --motion-med: 180ms;

    /* ========= Borders (override) ========= */
    --border-active: rgba(255, 255, 255, 0.2);

    /* ========= Shadows - Premium dual-layer (overrides style.css) ========= */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.38), 0 4px 10px rgba(0, 0, 0, 0.18);
    --shadow-glow: 0 0 0 2.5px rgba(var(--accent-cyan-rgb), 0.65), 0 0 12px 3px rgba(var(--accent-cyan-rgb), 0.3);
    --shadow-glow-strong: 0 0 0 2.5px var(--accent-cyan), 0 0 16px rgba(var(--accent-cyan-rgb), 0.35);

    /* ========= Selection surfaces ========= */
    --select-bg: rgba(255, 255, 255, 0.94);
    --select-fg: rgba(0, 0, 0, 0.92);
    --select-bg-soft: rgba(255, 255, 255, 0.12);
    --select-bg-hover: rgba(255, 255, 255, 0.08);

    /* ========= Glass blur - DISABLED for Fire Stick ========= */
    --glass-blur: 0px;
}

/* ============================================
   Global polish
   ============================================ */
html,
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Text shadow only on headings and labels for subtle depth without GPU overhead */
h1,
h2,
h3,
h4,
h5,
h6,
.nav-label,
.panel-title,
.settings-title,
.vod-title,
.hero-title,
.hero-channel {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Sky Glass background
   ============================================ */
.bg-gradient {
    background:
        radial-gradient(1100px 700px at 12% 12%, rgba(111, 75, 255, 0.4) 0%, rgba(111, 75, 255, 0) 60%),
        radial-gradient(
            900px 650px at 75% 18%,
            rgba(var(--accent-cyan-rgb), 0.26) 0%,
            rgba(var(--accent-cyan-rgb), 0) 55%
        ),
        radial-gradient(900px 650px at 35% 82%, rgba(255, 43, 138, 0.18) 0%, rgba(255, 43, 138, 0) 60%),
        linear-gradient(135deg, #050617 0%, #090b24 32%, #0b1640 62%, #2b1aa1 100%);
}

.bg-pattern {
    opacity: 0.18;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0 2px, rgba(255, 255, 255, 0) 42px),
        radial-gradient(circle at 32% 55%, rgba(255, 255, 255, 0.14) 0 2px, rgba(255, 255, 255, 0) 56px),
        radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.12) 0 2px, rgba(255, 255, 255, 0) 58px),
        radial-gradient(circle at 82% 66%, rgba(255, 255, 255, 0.1) 0 2px, rgba(255, 255, 255, 0) 64px),
        radial-gradient(circle at 55% 85%, rgba(255, 255, 255, 0.1) 0 2px, rgba(255, 255, 255, 0) 58px);
    background-size: 100% 100%;
    filter: none;
}

/* ============================================
   Glass surface polish (global)
   ============================================ */
.sidebar,
.categories-panel,
.channels-panel,
.preview-info,
.preview-epg,
.vod-categories,
.vod-info,
.modal-content,
.toast,
.settings-menu,
.settings-content,
.search-input,
.tab-btn,
.btn-secondary {
    background: linear-gradient(170deg, rgba(12, 22, 44, 0.94) 0%, rgba(8, 18, 38, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar {
    background: linear-gradient(180deg, rgba(10, 18, 38, 0.96) 0%, rgba(6, 14, 32, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.07);
}

/* Panels look more “Sky” with slightly higher blur */
.sidebar,
.categories-panel,
.channels-panel,
.preview-info,
.preview-epg,
.vod-categories,
.vod-info,
.modal-content,
.toast,
.settings-menu,
.settings-content {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sidebar,
.categories-panel,
.channels-panel,
.preview-info,
.preview-epg,
.vod-categories,
.vod-info,
.modal-content,
.toast,
.settings-menu,
.settings-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 14, 42, 0.95) !important;
}

.bg-pattern {
    display: none !important;
}

/* ============================================
  PERFORMANCE PROFILE - Sky Glass theme optimizations
  ============================================ */

/* Disable all Glass blur */
:root {
    --glass-blur: 0px !important;
}

/* Disable all gradient backgrounds */
.bg-gradient {
    background: linear-gradient(180deg, #040712 0%, #081225 48%, #0b1834 100%) !important;
}

/* Disable hero parallax and filters */
.hero-bg {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    background: linear-gradient(135deg, #050617 0%, #0b1640 100%) !important;
}

.hero-content {
    transform: none !important;
    will-change: auto !important;
}

.hero-vignette {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%) !important;
}

/* Disable bokeh animations completely */
.bg-pattern::before,
.bg-pattern::after {
    display: none !important;
}

/* Disable transform scales on focus/hover */
.vod-card.focused,
.vod-card:hover,
.quick-channel.focused,
.channel-item.focused,
.category-item.focused,
.osd-strip-item.focused {
    transform: none !important;
    box-shadow: none !important;
}

/* Use simple border for focus indication */
.vod-card.focused,
.channel-item.focused,
.category-item.focused,
.nav-item.focused,
.quick-channel.focused,
.osd-strip-item.focused {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.65) !important;
}

/* Disable complex shadows */
.vod-card,
.hero-badge,
.osd-logo-fallback,
.osd-strip-fallback {
    box-shadow: none !important;
}

/* Simplify button gradients */
.btn-primary {
    background: var(--accent-cyan) !important;
}

/* Disable drop-shadow filters */
.logo-tivi,
.logo-glass,
.osd-logo,
.osd-strip-logo {
    filter: none !important;
}

/* Disable ribbon shimmer animation */
.nav-item.active::after,
.nav-item.focused::after,
.tab-btn.active::after,
.tab-btn.focused::after {
    animation: none !important;
    background: var(--accent-cyan) !important;
}

/* Simplify text shadows */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.hero-channel,
.nav-label {
    text-shadow: none !important;
}

/* Disable hero badge blur */
.hero-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Layout Mode: Sky — see html.layout-sky block below (L1103+) for canonical rules */

/* ============================================
   TV: Hero mini preview slot (top-right)
   Driven by body.tv-preview-mode
   ============================================ */

.tv-preview-slot {
    position: absolute;
    /* Match native mini-player: 10px from right, aligned with info box top + 10px gap */
    top: 10px;
    right: 10px;
    /* Native: 160px tall, 284px wide (16:9) — matches ExoPlayer preview rect */
    width: 284px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.65);
    box-shadow: var(--shadow-md);
    display: none;
}

body.tv-preview-mode .tv-preview-slot {
    display: block;
}

/* Make TV hero feel more “Sky” (more breathing room, larger hero) */
.layout-sky .tv-container {
    grid-template-columns: 560px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        'cats cats'
        'list hero';
    gap: 16px;
}

/* Top category bar (Sky-style pills) */
.layout-sky .categories-panel {
    grid-area: cats;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.layout-sky .categories-panel .panel-title {
    padding: 0 14px 0 8px;
    border-bottom: 0;
    white-space: nowrap;
}

.layout-sky .category-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.layout-sky .category-list::-webkit-scrollbar {
    display: none;
}

.layout-sky .category-item {
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
}

.layout-sky .category-item.active {
    background: linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.22), rgba(111, 75, 255, 0.16));
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.96);
}

.layout-sky .channels-panel {
    grid-area: list;
}

.layout-sky .preview-panel {
    grid-area: hero;
}

/* VOD (Movies/Shows): Sky-style top pills */
.layout-sky .vod-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        'cats'
        'content';
    gap: 16px;
}

.layout-sky .vod-categories {
    grid-area: cats;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.layout-sky .vod-categories .panel-title {
    padding: 0 14px 0 8px;
    border-bottom: 0;
    white-space: nowrap;
}

.layout-sky .vod-categories .category-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.layout-sky .vod-categories .category-list::-webkit-scrollbar {
    display: none;
}

.layout-sky .vod-content {
    grid-area: content;
}

.layout-sky .vod-grid {
    /* Uses CSS variables from style.css for consistent sizing */
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--vod-card-min-width, 140px), var(--vod-card-max-width, 180px))
    );
    gap: var(--vod-card-gap, 12px);
}

@media (max-width: 1280px) {
    .layout-sky .tv-container {
        grid-template-columns: 480px 1fr;
    }
}

/* Subtle “edge light” on cards */
.categories-panel,
.channels-panel,
.preview-info,
.preview-epg,
.vod-categories,
.vod-info,
.settings-menu,
.settings-content {
    position: relative;
}
.categories-panel::before,
.channels-panel::before,
.preview-info::before,
.preview-epg::before,
.vod-categories::before,
.vod-info::before,
.settings-menu::before,
.settings-content::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(var(--accent-cyan-rgb), 0.12) 0%,
        rgba(111, 75, 255, 0.08) 35%,
        rgba(var(--accent-pink-rgb), 0.06) 65%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0.5;
    mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    padding: 1px;
    box-sizing: border-box;
}

/* ============================================
   Focus / selection (remote-friendly)
   ============================================ */
:is(
    .nav-item,
    .category-item,
    .channel-item,
    .quick-btn,
    .quick-channel,
    .tab-btn,
    .vod-card,
    .settings-item,
    .settings-nav-item,
    .btn,
    .osd-btn,
    .search-input,
    .hero-btn
) {
    transition:
        transform var(--motion-med) var(--ease-out-sky),
        box-shadow var(--motion-med) var(--ease-out-sky),
        background-color var(--motion-med) var(--ease-out-sky),
        border-color var(--motion-med) var(--ease-out-sky),
        opacity var(--motion-med) var(--ease-out-sky),
        filter var(--motion-med) var(--ease-out-sky);
}

:is(
    .nav-item,
    .category-item,
    .channel-item,
    .quick-btn,
    .quick-channel,
    .tab-btn,
    .vod-card,
    .settings-item,
    .settings-nav-item,
    .btn,
    .osd-btn,
    .search-input
).focused {
    outline: var(--focus-width, 2.5px) solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow: var(
        --focus-glow,
        0 0 0 2.5px rgba(var(--accent-cyan-rgb), 0.65),
        0 0 10px 2px rgba(var(--accent-cyan-rgb), 0.35)
    );
    background: rgba(var(--accent-cyan-rgb), 0.1);
}

/* VOD card focus: keep scale smaller than global focus */
.vod-card.focused {
    border-color: var(--accent-cyan);
}

/* Hover = softer glow (mouse) */
:is(.nav-item, .category-item, .channel-item, .tab-btn, .settings-item, .settings-nav-item):hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Active states - Clean, simple */
.nav-item.active,
.category-item.active {
    background: rgba(var(--accent-cyan-rgb), 0.12);
    border: 2px solid rgba(var(--accent-cyan-rgb), 0.4);
    color: var(--text-primary);
}

.channel-item.active {
    background: rgba(var(--accent-cyan-rgb), 0.08);
    border-color: rgba(var(--accent-cyan-rgb), 0.3);
}

.tab-btn.active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: rgba(0, 0, 0, 0.9);
    font-weight: 600;
}

/* ============================================
   Sky ribbon highlight (sidebar + tabs)
   ============================================ */
.nav-item,
.tab-btn {
    position: relative;
    overflow: hidden;
}

/* DISABLED: Remove ribbon underlines from nav items - cleaner look */
.nav-item.active::after,
.nav-item.focused::after,
.tab-btn.active::after,
.tab-btn.focused::after {
    display: none !important;
    content: none !important;
}

.nav-item.focused::after,
.tab-btn.focused::after {
    display: none !important;
}

.nav-item.active::after,
.tab-btn.active::after {
    display: none !important;
}

/* Make active items feel more "Sky": gentle gradient wash + crisp border */
.nav-item.active,
.category-item.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.tab-btn.active {
    border-color: rgba(255, 255, 255, 0.22);
}

/* ============================================
   Buttons and badges - Clean, no filters
   ============================================ */
.btn-primary {
    background: var(--accent-cyan);
    color: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--accent-cyan);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary.focused {
    background: var(--accent-cyan-bright, #40d8ff);
    border-color: var(--accent-cyan-bright, #40d8ff);
}

.btn-secondary:hover,
.btn-secondary.focused {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.vod-rating {
    background: var(--accent-cyan);
    color: rgba(0, 0, 0, 0.9);
    font-weight: 700;
}

/* ============================================
   Stronger focus for tiles/cards - simple border
   ============================================ */
.vod-card.focused,
.quick-channel.focused,
.channel-item.focused,
.category-item.focused {
    border-color: var(--accent-cyan);
    background: rgba(var(--accent-cyan-rgb), 0.08);
    box-shadow: var(
        --focus-glow,
        0 0 0 2.5px rgba(var(--accent-cyan-rgb), 0.65),
        0 0 10px 2px rgba(var(--accent-cyan-rgb), 0.35)
    );
}

.vod-card.focused {
    border-color: var(--accent-cyan);
}

/* ============================================
   Cards / media tiles - clean, no heavy effects
   ============================================ */
.vod-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}
.vod-card:hover {
    border-color: rgba(var(--accent-cyan-rgb), 0.3);
    background: rgba(var(--accent-cyan-rgb), 0.05);
}
.vod-card.focused {
    border-color: var(--accent-cyan);
    background: rgba(var(--accent-cyan-rgb), 0.06);
    box-shadow: var(
        --focus-glow,
        0 0 0 2.5px rgba(var(--accent-cyan-rgb), 0.65),
        0 0 10px 2px rgba(var(--accent-cyan-rgb), 0.35)
    );
}

/* ============================================
   Sidebar logo polish - Sky Glass gradient
   ============================================ */
.logo-tivi {
    background: linear-gradient(135deg, #00b0ff 0%, #6f4bff 50%, #ff2b8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: none;
}
.logo-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(200, 220, 255, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: none;
}

/* ============================================
   Animated bokeh drift
   Fire Stick: disabled (filters/animations can be expensive)
   ============================================ */
html.layout-sky .bg-pattern::before,
html.layout-sky .bg-pattern::after {
    content: none !important;
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .bg-pattern::before,
    .bg-pattern::after,
    .nav-item.active::after,
    .nav-item.focused::after,
    .tab-btn.active::after,
    .tab-btn.focused::after {
        animation: none !important;
    }

    .hero-bg {
        transform: none !important;
    }

    .hero-content {
        transform: none !important;
    }
}

/* ============================================
   Hero panel (Sky Glass-style)
   ============================================ */
.preview-video {
    position: relative;
    border-radius: var(--radius-xl, 20px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 520px at 20% 25%, rgba(111, 75, 255, 0.35) 0%, rgba(111, 75, 255, 0) 60%),
        radial-gradient(
            820px 520px at 75% 18%,
            rgba(var(--accent-cyan-rgb), 0.26) 0%,
            rgba(var(--accent-cyan-rgb), 0) 60%
        ),
        radial-gradient(860px 560px at 38% 85%, rgba(255, 43, 138, 0.18) 0%, rgba(255, 43, 138, 0) 62%),
        linear-gradient(135deg, #050617 0%, #090b24 40%, #0b1640 78%, rgba(111, 75, 255, 0.55) 100%);
    background-size: cover;
    background-position: center;
    /* Parallax (GPU-only). Values are driven by App motion (CSS vars). */
    will-change: transform;
    transform: translate3d(var(--hero-parallax-x, 0px), var(--hero-parallax-y, 0px), 0) scale(1.05);
    filter: saturate(1.08) contrast(1.06);
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 48%, rgba(0, 0, 0, 0.1) 100%),
        radial-gradient(800px 420px at 28% 70%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 68%);
}

.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(14px, 2.2vw, 22px);
    color: var(--text-primary);
    will-change: transform;
    transform: translate3d(var(--hero-parallax-x2, 0px), var(--hero-parallax-y2, 0px), 0);
}

.hero-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: none;
}

.hero-clock {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: none;
}

.hero-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.hero-identity {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    min-width: 0;
}

.hero-logo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    backdrop-filter: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.hero-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    display: none;
}

.hero-logo-fallback {
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.92);
}

.hero-text {
    min-width: 0;
}

.hero-channel {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56ch;
}

.hero-title {
    margin-top: 4px;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.45),
        0 8px 28px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54ch;
}

.hero-subtitle {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    max-width: 64ch;
    letter-spacing: 0.005em;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--radius-full, 999px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 14px;
    min-width: 130px;
    justify-content: center;
    transition:
        background var(--motion-fast),
        border-color var(--motion-fast);
}

.hero-btn-primary {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: rgba(0, 0, 0, 0.9);
}

.hero-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.hero-btn.focused {
    border-color: var(--accent-cyan);
    background: rgba(var(--accent-cyan-rgb), 0.15);
}

.hero-btn-primary.focused {
    background: var(--accent-cyan-bright, #40d8ff);
    border-color: var(--accent-cyan-bright, #40d8ff);
}

.hero-btn-icon {
    font-size: 14px;
    transform: translateY(-1px);
}

.hero-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
}

/* ============================================
   Now / Next cards (Preview info)
   ============================================ */
.preview-info {
    padding: var(--spacing-lg);
}

.preview-now-next {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--spacing-md);
}

.nn-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
    backdrop-filter: none;
    min-width: 0;
}

.nn-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.nn-title {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.94);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nn-time {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.nn-progress {
    margin-top: 10px;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
}

.nn-progress > div {
    height: 100%;
    width: 0%;
    background: var(--ribbon-gradient);
    transition: width 0.6s linear;
}

.nn-note {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1280px) {
    .preview-now-next {
        grid-template-columns: 1fr;
    }
    .hero-actions {
        align-items: flex-start;
    }
    .hero-main {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================
   SKY GLASS LAYOUT OVERRIDES (FINAL)
   These rules use !important and high specificity
   to guarantee they override base style.css
   ============================================ */

/* Force app to stack vertically (nav on top) */
html.layout-sky .app {
    flex-direction: column !important;
}

/* Transform sidebar into horizontal top nav bar */
html.layout-sky .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 66px !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 22px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(7, 13, 30, 0.99) 0%, rgba(5, 10, 24, 0.98) 100%) !important;
    box-shadow:
        inset 0 -1px 0 rgba(var(--accent-cyan-rgb), 0.12),
        0 10px 24px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1000 !important;
}

html.layout-sky .sidebar-header {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    padding-right: 12px !important;
    border-bottom: none !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
}

/* Top-bar clock (shown next to the TiviGlass logo) */
.tg-header-time {
    display: none;
}

html.layout-sky .tg-header-time {
    display: block !important;
    margin-left: 12px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

html.layout-sky .sidebar-header .logo {
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* Nav menu as horizontal pill row */
html.layout-sky .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    gap: 12px !important;
    padding: 9px 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    --pill-gap: 12px;
    --pill-padding-x: 20px;
    --pill-padding-y: 10px;
    --pill-font-size: 14px;
    --pill-content-gap: 10px;
}

html.layout-sky .nav-menu::-webkit-scrollbar {
    display: none !important;
}

/* Some Android/Fire OS WebView builds draw a system focus frame (often yellow)
   around scroll containers like the top nav bar. Suppress it on containers;
   focus styling is handled on the individual .nav-item pills instead. */
html.layout-sky .sidebar:focus,
html.layout-sky .sidebar:focus-visible,
html.layout-sky .nav-menu:focus,
html.layout-sky .nav-menu:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Shared pill visuals */
html.layout-sky .tg-pill {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--pill-content-gap, 8px) !important;
    min-height: var(--pill-min-height, 46px) !important;
    padding: var(--pill-padding-y) var(--pill-padding-x) !important;
    margin: 0 !important;
    border-radius: var(--pill-radius, 999px) !important;
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.12), transparent 72%),
        linear-gradient(180deg, rgba(24, 38, 64, 0.9) 0%, rgba(12, 20, 38, 0.96) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
    font-size: var(--pill-font-size) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast) !important;
    box-shadow: var(--control-shadow-soft) !important;
}

/* Remove ribbon/side bars on top nav pills */
html.layout-sky .nav-item::before,
html.layout-sky .nav-item::after {
    display: none !important;
    content: none !important;
}

html.layout-sky .tg-pill:hover {
    background:
        linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.3) 0%, rgba(80, 230, 255, 0.2) 100%),
        linear-gradient(180deg, rgba(20, 34, 58, 0.96) 0%, rgba(10, 18, 34, 1) 100%) !important;
    border-color: rgba(var(--accent-cyan-rgb), 0.28) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px) !important;
}

html.layout-sky .tg-pill.focused,
html.layout-sky .tg-pill:focus,
html.layout-sky .tg-pill:focus-visible {
    background: var(--control-surface-primary) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--control-focus-shadow) !important;
    outline: var(--focus-width, 2.5px) solid var(--accent-cyan) !important;
    outline-offset: 1px;
    transform: translateY(-1px) !important;
}

html.layout-sky .tg-pill.active {
    background: var(--control-surface-active) !important;
    border-color: var(--control-border-accent) !important;
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    box-shadow: var(--control-shadow) !important;
}

html.layout-sky .tg-pill.active.focused,
html.layout-sky .tg-pill.active:focus,
html.layout-sky .tg-pill.active:focus-visible {
    background: var(--control-surface-primary-hover) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--control-focus-shadow) !important;
    outline: var(--focus-width, 2.5px) solid var(--accent-cyan) !important;
    outline-offset: 1px;
    transform: translateY(-1px) !important;
}

/* Series season selector: reuse the same pill component + spacing */
html.layout-sky .season-selector {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 24px !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: rgba(10, 20, 40, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    --pill-gap: 5px;
    --pill-padding-x: 16px;
    --pill-padding-y: 8px;
    --pill-font-size: 12px;
}

html.layout-sky .tv-categories-row,
html.layout-sky .vod-categories-row,
html.layout-sky .season-selector {
    position: relative !important;
}

html.layout-sky .tv-categories-row::before,
html.layout-sky .tv-categories-row::after,
html.layout-sky .vod-categories-row::before,
html.layout-sky .vod-categories-row::after,
html.layout-sky .season-selector::before,
html.layout-sky .season-selector::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 2;
}

html.layout-sky .tv-categories-row::before,
html.layout-sky .vod-categories-row::before,
html.layout-sky .season-selector::before {
    left: 0;
    background: linear-gradient(90deg, rgba(10, 20, 40, 0.98) 0%, rgba(10, 20, 40, 0) 100%);
}

html.layout-sky .tv-categories-row::after,
html.layout-sky .vod-categories-row::after,
html.layout-sky .season-selector::after {
    right: 0;
    background: linear-gradient(270deg, rgba(10, 20, 40, 0.98) 0%, rgba(10, 20, 40, 0) 100%);
}

html.layout-sky .season-selector::-webkit-scrollbar {
    display: none;
}

html.layout-sky .season-selector .season-tabs {
    gap: var(--pill-gap) !important;
    overflow: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html.layout-sky .season-selector .season-tabs::-webkit-scrollbar {
    display: none;
}

html.layout-sky .season-selector {
    --pill-padding-x: 18px;
    --pill-padding-y: 9px;
    --pill-font-size: 13px;
}

html.layout-sky .nav-label {
    font-size: 16px !important;
    letter-spacing: 0.01em !important;
}

html.layout-sky .nav-icon {
    width: 20px !important;
    height: 20px !important;
}

/* .nav-footer removed — no HTML element uses this class */

/* Main content below the nav bar */
html.layout-sky .main-content {
    margin-top: 62px !important;
    width: 100% !important;
    height: calc(100% - 62px) !important;
}

/* When the app collapses the top bar, remove the reserved space */
html.layout-sky #app.sidebar-collapsed .main-content,
#app.sidebar-collapsed .main-content {
    margin-top: 0 !important;
    height: 100% !important;
    top: 0 !important;
}

html.layout-sky .content-section {
    padding: 16px 24px !important;
}

html.layout-sky #app.sidebar-collapsed .content-section,
#app.sidebar-collapsed .content-section {
    padding: 6px !important;
}

/* TV Section: 2-column layout with categories as top pills */
html.layout-sky .tv-container {
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
        'cats cats'
        'list hero' !important;
    gap: 12px !important;
    height: 100% !important;
}

html.layout-sky .categories-panel {
    grid-area: cats !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.layout-sky .categories-panel .panel-title {
    padding: 0 12px 0 4px !important;
    border-bottom: none !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    white-space: nowrap !important;
}

html.layout-sky .category-list {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    gap: 6px !important;
    padding: 2px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
}

html.layout-sky .category-list::-webkit-scrollbar {
    display: none !important;
}

html.layout-sky .channels-panel {
    grid-area: list !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.layout-sky .preview-panel {
    grid-area: hero !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* VOD sections: similar treatment */
html.layout-sky .vod-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
        'cats'
        'content' !important;
    gap: 12px !important;
}

html.layout-sky .vod-categories {
    grid-area: cats !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.layout-sky .vod-content {
    grid-area: content !important;
}

/* ============================================
   SKY GLASS EPG GRID LAYOUT
   Full TV Guide like the Sky Glass photo
   ============================================ */

/* Main container */
html.layout-sky .tv-container.sky-epg-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* Top bar: Info + Preview side by side.
   Uses display:block (NOT grid) so toggling the absolutely-positioned
   preview slot can never shift the info panel. */
html.layout-sky .sky-top-bar {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    /* Always reserve mini-preview space on the right so the hero info
     never shifts when body.tv-preview-mode toggles on/off. */
    padding: 16px calc(24px + 284px + 22px) 16px 24px !important;
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.12), transparent 28%),
        linear-gradient(180deg, rgba(10, 20, 40, 0.96) 0%, rgba(10, 20, 40, 0.78) 100%) !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 -1px 0 rgba(var(--accent-cyan-rgb), 0.08) !important;
}

/* ============================================
   VOD HERO (Movies/Shows) - match TV top bar
   ============================================ */
html.layout-sky .sky-top-bar.vod-top-bar {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    overflow: hidden !important;
    align-items: stretch !important;
    padding: 18px calc(24px + 284px + 22px) 12px 24px !important;
}

html.layout-sky .sky-top-bar.vod-top-bar .sky-info-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 12px !important;
}

html.layout-sky .sky-top-bar.vod-top-bar .sky-info-header {
    flex: 0 0 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

html.layout-sky .sky-top-bar.vod-top-bar .sky-program-info {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

html.layout-sky .sky-top-bar.vod-top-bar .sky-program-title {
    -webkit-line-clamp: 1 !important;
}

html.layout-sky .sky-top-bar.vod-top-bar .sky-program-meta {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

html.layout-sky .sky-top-bar.vod-top-bar .sky-program-desc {
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
}

/* Full-height poster in VOD hero (left column) */
html.layout-sky .sky-top-bar.vod-top-bar .vod-hero-poster {
    width: 120px !important;
    height: 100% !important;
    border-radius: 10px !important;
}

html.layout-sky .sky-top-bar.vod-top-bar .vod-hero-poster-img {
    object-fit: cover !important;
}

/* Make VOD hero poster behave like the TV logo block */
html.layout-sky .vod-hero-poster {
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

html.layout-sky .vod-hero-poster-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Info panel (left side of top bar) — pinned to TOP so content
   length never shifts the logo / programme name vertically. */
html.layout-sky .sky-info-panel {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* pin to top, not center */
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding-top: 2px !important; /* tiny breathing room from top edge */
}

html.layout-sky .sky-info-header {
    display: flex !important;
    align-items: flex-start !important; /* logo aligns with first line of title */
    gap: 12px !important;
    flex: 0 0 auto !important;
    padding-top: 2px !important; /* nudge logo to align with title baseline */
}

html.layout-sky .sky-brand {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: -0.02em !important;
}

html.layout-sky .sky-channel-logo {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
}

/* Avoid showing a broken-image placeholder when no logo is set */
html.layout-sky img.sky-channel-logo:not([src]),
html.layout-sky img.sky-channel-logo[src=''] {
    display: none !important;
}

html.layout-sky .sky-channel-logo-fallback {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

html.layout-sky .sky-program-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* stack from top */
    gap: 4px !important;
    overflow: hidden !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html.layout-sky .sky-program-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

html.layout-sky .sky-program-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    flex-shrink: 0 !important;
}

html.layout-sky .sky-program-meta:empty {
    display: none !important;
}

html.layout-sky .sky-meta-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

html.layout-sky .sky-program-desc {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    /* Keep lines readable; prevents text feeling like it spans the whole TV */
    max-width: 96ch !important;
}

html.layout-sky .sky-preview-slot {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
}

html.layout-sky .sky-preview-slot video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html.layout-sky .sky-preview-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 1 !important;
}

/* Categories bar - intentionally left visible, styled later in this file */

/* EPG Container */
html.layout-sky .sky-epg-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Time header row */
html.layout-sky .sky-time-header {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    align-items: center !important;
    background: rgba(30, 50, 80, 0.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 6px 16px !important;
}

html.layout-sky .sky-time-label {
    grid-column: 1 !important;
}

html.layout-sky .sky-time-slots {
    grid-column: 2 !important;
}

html.layout-sky .sky-time-label {
    padding-left: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

html.layout-sky .sky-time-slots {
    display: flex !important;
    grid-column: 2 !important;
    gap: 0 !important;
    padding: 0 !important;
}

html.layout-sky .sky-time-slot {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.layout-sky .sky-time-slot .sky-time-slot-pill {
    /* Inactive slots: keep compact like a header label */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background: transparent !important;
    border: 0 !important;
}

html.layout-sky .sky-time-slot:first-child {
    border-left: none !important;
}

html.layout-sky .sky-time-slot + .sky-time-slot {
    margin-left: -1px !important;
}

/* EPG Grid */
html.layout-sky .sky-epg-grid {
    flex: 1 !important;
    min-height: 0 !important;
    height: 0 !important; /* Must not be 'auto' — flex:1 needs a definite base so the grid is constrained by its parent, enabling channel-list scroll */
    overflow: hidden !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure channel list has height in flex container */
html.layout-sky .channel-list.sky-channel-list {
    min-height: 0 !important;
    height: 0 !important; /* Same trick: flex:1 fills available space, height:0 prevents content-sizing so overflow-y:auto works */
    flex: 1 !important;
}

html.layout-sky .channel-list.sky-channel-list {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* NOTE: padding-top/bottom are set dynamically by virtual scroll JS — do NOT use !important here */
    margin: 0 !important;
    list-style: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

html.layout-sky .channel-list.sky-channel-list::-webkit-scrollbar {
    display: none !important;
}

/* Channel row - Sky Glass EPG style */
html.layout-sky .channel-item.sky-channel-row {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    align-items: center !important;
    height: var(--sky-epg-row-h, 40px) !important;
    min-height: var(--sky-epg-row-h, 40px) !important;
    max-height: var(--sky-epg-row-h, 40px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
    padding: 0 24px !important;
    margin: 0 !important;
    gap: 0 !important;
    position: relative !important;
    box-shadow: none !important;
    contain: layout style paint !important;
    transition: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Logo column (channel rows only) */
html.layout-sky .channel-item.sky-channel-row .sky-channel-logo {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
}

html.layout-sky .channel-item.sky-channel-row .sky-channel-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html.layout-sky .channel-item.sky-channel-row .sky-channel-logo-fallback {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html.layout-sky .channel-item.sky-channel-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.04) !important;
}

html.layout-sky .channel-item.sky-channel-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

html.layout-sky .channel-item.sky-channel-row.active {
    background: rgba(var(--accent-cyan-rgb), 0.08) !important;
}

/* Current-time (now) vertical line across the whole EPG */
html.layout-sky .sky-now-line {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: transparent !important;
    z-index: 6 !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

html.layout-sky .sky-now-line::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--sky-now-dot-top, 34px) !important;
    bottom: 0 !important;
    background: rgba(var(--accent-cyan-rgb), 0.92) !important;
    box-shadow:
        0 0 14px rgba(var(--accent-cyan-rgb), 0.45),
        0 0 4px rgba(var(--accent-cyan-rgb), 0.25) !important;
}

html.layout-sky .sky-now-line::before {
    content: '' !important;
    position: absolute !important;
    top: var(--sky-now-dot-top, 34px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: rgba(var(--accent-cyan-rgb), 1) !important;
    box-shadow:
        0 0 0 2.5px rgba(6, 16, 40, 0.8),
        0 0 18px rgba(var(--accent-cyan-rgb), 0.5) !important;
}

/* Channel name */
html.layout-sky .sky-channel-name {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    min-width: 0 !important;
}

html.layout-sky .sky-channel-name-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html.layout-sky .channel-item:not(.last-watched) .sky-channel-name .last-watched-badge {
    display: none !important;
}

html.layout-sky .channel-item.last-watched .sky-channel-name .last-watched-badge {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    opacity: 0.9 !important;
    color: rgba(var(--accent-cyan-rgb), 0.98) !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

html.layout-sky .sky-channel-name .last-watched-badge .last-watched-label {
    display: none !important;
}

html.layout-sky .channel-item.last-watched .sky-channel-name .last-watched-badge .last-watched-label {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    opacity: 0.96 !important;
    color: inherit !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* Keep badge close to channel name (avoid pushing it to the far right of the name column). */
html.layout-sky .sky-channel-name-text {
    flex: 0 1 auto !important;
}

/* Channel number */
html.layout-sky .sky-channel-num {
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* EPG programme cells — base structural styles (visuals refined in PROFESSIONAL POLISH section below) */
html.layout-sky .sky-epg-programs {
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
}

html.layout-sky .sky-epg-divider {
    position: absolute !important;
    width: 1px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

html.layout-sky .sky-epg-program {
    position: absolute !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: none !important;
    z-index: 2 !important;
}

html.layout-sky .sky-epg-empty {
    position: absolute !important;
    top: 6px !important;
    bottom: 6px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.2) !important;
    font-size: 11px !important;
    font-style: italic !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 10px !important;
    z-index: 0 !important;
}

html.layout-sky .sky-time-slot.slot-active {
    background: transparent !important;
}

html.layout-sky .sky-time-slot.slot-active .sky-time-slot-pill {
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 700 !important;
}

/* Hide old layout elements */
html.layout-sky .categories-panel,
html.layout-sky .channels-panel,
html.layout-sky .preview-panel,
html.layout-sky .channels-header,
html.layout-sky .channels-filters {
    display: none !important;
}

/* Firestick optimizations */
@media (max-width: 1280px) {
    html.layout-sky .sky-top-bar {
        padding: 12px calc(16px + 240px + 16px) 12px 16px !important;
    }

    html.layout-sky .sky-top-bar.vod-top-bar {
        padding: 12px calc(16px + 240px + 16px) 12px 16px !important;
    }

    html.layout-sky .sky-program-title {
        font-size: 20px !important;
    }

    html.layout-sky .channel-item.sky-channel-row {
        grid-template-columns: 170px 1fr !important;
        height: var(--sky-epg-row-h, 40px) !important;
        min-height: var(--sky-epg-row-h, 40px) !important;
        max-height: var(--sky-epg-row-h, 40px) !important;
        padding: 0 16px !important;
    }

    html.layout-sky .sky-time-header {
        grid-template-columns: 170px 1fr !important;
    }

    html.layout-sky .channel-item.sky-channel-row .sky-channel-logo {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    html.layout-sky .sky-epg-program {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   SKY GLASS EPG POLISH (v2)
   Make the guide closer to the reference photo
   ============================================ */

/* Edge-to-edge TV section like Sky Glass */
html.layout-sky #section-tv.content-section {
    padding: 0 !important;
}

/* Edge-to-edge Movies/Shows like TV */
html.layout-sky #section-movies.content-section,
html.layout-sky #section-shows.content-section {
    padding: 0 !important;
}

html.layout-sky #section-tv,
html.layout-sky #main-content,
html.layout-sky .main-content {
    min-height: 0 !important;
}

html.layout-sky #section-tv {
    height: 100% !important;
}

html.layout-sky .tv-container.sky-epg-layout {
    height: 100% !important;
    min-height: 0 !important;
}

html.layout-sky .sky-epg-container,
html.layout-sky .sky-epg-grid,
html.layout-sky .channel-list.sky-channel-list {
    min-height: 0 !important;
}

/* Remove reliance on fonts we don't ship */
html.layout-sky .sky-brand {
    font-family:
        'Outfit',
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
}

/* Cleaner top bar */
html.layout-sky .sky-top-bar {
    /* Always reserve mini-preview space so the hero info never shifts when
     body.tv-preview-mode toggles on/off. */
    padding: 18px calc(24px + 284px + 22px) 12px 24px !important;
    background: linear-gradient(
        180deg,
        rgba(6, 22, 60, 0.94) 0%,
        rgba(6, 20, 52, 0.8) 60%,
        rgba(6, 18, 48, 0.72) 100%
    ) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* FAVOURITES / All channels strip (you asked for this) */
html.layout-sky .sky-categories-bar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 4px 24px !important;
    background: linear-gradient(180deg, rgba(6, 22, 60, 0.72) 0%, rgba(6, 20, 52, 0.68) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html.layout-sky .sky-cat-label {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    color: rgba(255, 255, 255, 0.72) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html.layout-sky .sky-categories-bar .category-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

html.layout-sky .sky-categories-bar .category-list::-webkit-scrollbar {
    display: none !important;
}

html.layout-sky .sky-categories-bar .category-item {
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

html.layout-sky .sky-categories-bar .category-item.active {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
}

/* Guide background + cleaner separators */
html.layout-sky .sky-epg-container {
    background: linear-gradient(
        180deg,
        rgba(6, 18, 52, 0.94) 0%,
        rgba(4, 14, 42, 0.88) 40%,
        rgba(4, 12, 38, 0.82) 100%
    ) !important;
}

html.layout-sky .sky-time-slot {
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.layout-sky .sky-epg-grid {
    scrollbar-width: none !important;
}

html.layout-sky .sky-epg-grid::-webkit-scrollbar {
    display: none !important;
}

html.layout-sky .channel-item.sky-channel-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

html.layout-sky .channel-item.sky-channel-row.focused,
html.layout-sky .channel-item.sky-channel-row.active.focused,
html.layout-sky .channel-item.sky-channel-row[data-focusable].focused {
    /* The active programme tile already carries the selection state.
     Keep the row itself neutral so we do not draw the old full-width
     cyan rectangle around the guide lane. */
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

html.layout-sky .channel-item.sky-channel-row:nth-child(even).focused,
html.layout-sky .channel-item.sky-channel-row:nth-child(even).active.focused,
html.layout-sky .channel-item.sky-channel-row:nth-child(even)[data-focusable].focused {
    background: rgba(255, 255, 255, 0.04) !important;
}

html.layout-sky .channel-item.sky-channel-row.focused::before,
html.layout-sky .channel-item.sky-channel-row.active.focused::before,
html.layout-sky .channel-item.sky-channel-row[data-focusable].focused::before {
    content: none !important;
}

html.layout-sky .channel-item.sky-channel-row.active {
    background: rgba(var(--accent-cyan-rgb), 0.08) !important;
}

/* Empty list message: make it not look broken */
html.layout-sky .sky-channel-list .empty-message {
    width: min(100%, 640px) !important;
    margin: 24px auto !important;
    padding: 34px 30px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.12), transparent 44%),
        linear-gradient(180deg, rgba(16, 28, 48, 0.82) 0%, rgba(10, 18, 34, 0.88) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.layout-sky .sky-channel-list .empty-message p:first-child {
    color: #ffffff !important;
}

html.layout-sky .sky-channel-list .empty-message .hint {
    color: rgba(255, 255, 255, 0.68) !important;
}
@media (max-width: 1280px) {
    html.layout-sky .channel-item.sky-channel-row {
        height: var(--sky-epg-row-h, 40px) !important;
        min-height: var(--sky-epg-row-h, 40px) !important;
        max-height: var(--sky-epg-row-h, 40px) !important;
    }
}
/* ============================================
   Theme Consistency - Sky Glass throughout
   ============================================ */

/* Unified focus for all interactive elements - refined glow ring */
html.layout-sky .focused,
html.layout-sky [data-focusable]:focus {
    outline: var(--focus-width, 2.5px) solid var(--accent-cyan) !important;
    outline-offset: 1px;
    border-color: var(--accent-cyan) !important;
    box-shadow: var(
        --focus-glow,
        0 0 0 2.5px rgba(var(--accent-cyan-rgb), 0.65),
        0 0 10px 2px rgba(var(--accent-cyan-rgb), 0.35)
    ) !important;
}

/* Buttons - Clean, simple */
html.layout-sky .btn,
html.layout-sky .modal-btn,
html.layout-sky .settings-btn,
html.layout-sky .apps-form-btn,
html.layout-sky #theme-confirm-bar button {
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.12), transparent 70%),
        linear-gradient(180deg, rgba(28, 42, 68, 0.9) 0%, rgba(14, 22, 40, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    font-size: 15px;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    box-shadow: var(--control-shadow);
}

html.layout-sky .btn:hover,
html.layout-sky .modal-btn:hover,
html.layout-sky .settings-btn:hover,
html.layout-sky .apps-form-btn:hover,
html.layout-sky #theme-confirm-bar button:hover {
    background:
        linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.22) 0%, rgba(80, 230, 255, 0.14) 100%),
        linear-gradient(180deg, rgba(34, 50, 78, 0.94) 0%, rgba(18, 28, 50, 1) 100%);
    border-color: rgba(var(--accent-cyan-rgb), 0.24);
    transform: translateY(-1px);
}

html.layout-sky .btn.focused,
html.layout-sky .modal-btn.focused,
html.layout-sky .settings-btn.focused,
html.layout-sky .apps-form-btn.focused,
html.layout-sky #theme-confirm-bar button.focused {
    background: var(--control-surface-focus) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--control-focus-shadow) !important;
    outline: var(--focus-width, 2.5px) solid var(--accent-cyan) !important;
    outline-offset: 1px;
    transform: translateY(-1px) !important;
}

html.layout-sky .btn-primary,
html.layout-sky .primary-btn {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-cyan-bright, #40d8ff) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

html.layout-sky .btn-primary.focused,
html.layout-sky .primary-btn.focused {
    background: var(--control-surface-primary-hover) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: rgba(0, 0, 0, 0.9) !important;
    box-shadow: var(--control-focus-shadow) !important;
}

/* Inputs - Clean, simple */
html.layout-sky input,
html.layout-sky .search-input,
html.layout-sky textarea,
html.layout-sky select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

html.layout-sky input:focus,
html.layout-sky .search-input:focus,
html.layout-sky textarea:focus,
html.layout-sky select:focus,
html.layout-sky input.focused,
html.layout-sky .search-input.focused {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-cyan);
}

/* Cards and panels - consistent glass effect */
html.layout-sky .card,
html.layout-sky .panel,
html.layout-sky .modal-content,
html.layout-sky .vod-preview,
html.layout-sky .preview-panel {
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.14), transparent 32%),
        linear-gradient(180deg, rgba(18, 30, 54, 0.99) 0%, rgba(8, 18, 34, 0.995) 100%);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.14);
    border-radius: 28px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

html.layout-sky .modal-overlay.ctx-panel-left .modal-content {
    position: absolute;
    inset: 0 auto 0 0;
    width: 312px;
    max-width: 312px;
    max-height: none;
    min-height: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0 14px 14px 0 !important;
    padding: 24px 16px 16px;
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.1), transparent 34%),
        linear-gradient(180deg, rgba(15, 28, 52, 0.985) 0%, rgba(7, 16, 32, 0.995) 100%) !important;
    box-shadow:
        18px 0 36px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

html.layout-sky .ctx-panel-left .ctx-panel-actions .btn {
    padding: 11px 14px !important;
    min-height: 48px !important;
    height: auto !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    border-width: 1px !important;
}

html.layout-sky .ctx-panel-left .ctx-panel-actions .btn.primary,
html.layout-sky .ctx-panel-left .ctx-panel-actions .btn.secondary,
html.layout-sky .ctx-panel-left .ctx-panel-actions .btn.danger {
    border-radius: 12px !important;
}

html.layout-sky .ctx-panel-left .ctx-panel-actions .btn.focused,
html.layout-sky .ctx-panel-left .ctx-panel-actions .btn.primary.focused,
html.layout-sky .ctx-panel-left .ctx-panel-actions .btn.secondary.focused,
html.layout-sky .ctx-panel-left .ctx-panel-actions .btn.danger.focused {
    transform: none !important;
    box-shadow:
        inset 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.78),
        0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
}

/* Settings items */
html.layout-sky .settings-item,
html.layout-sky .settings-nav-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all var(--transition-fast);
}

html.layout-sky .settings-item.focused,
html.layout-sky .settings-nav-item.focused {
    background: rgba(var(--accent-cyan-rgb), 0.1);
    border-color: rgba(var(--accent-cyan-rgb), 0.45);
    box-shadow: var(
        --focus-glow,
        0 0 0 2.5px rgba(var(--accent-cyan-rgb), 0.65),
        0 0 10px 2px rgba(var(--accent-cyan-rgb), 0.35)
    ) !important;
    outline: var(--focus-width, 2.5px) solid var(--accent-cyan) !important;
    outline-offset: 1px;
}

html.layout-sky .settings-item:hover,
html.layout-sky .settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

html.layout-sky .settings-item.active,
html.layout-sky .settings-nav-item.active {
    background: linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.15), rgba(111, 75, 255, 0.12));
    border-left: 3px solid rgba(var(--accent-cyan-rgb), 0.8);
}

/* Scrollbar styling - subtle Sky theme */
html.layout-sky ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

html.layout-sky ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

html.layout-sky ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--accent-cyan-rgb), 0.35), rgba(111, 75, 255, 0.25));
    border-radius: 3px;
}

html.layout-sky ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-cyan-rgb), 0.45);
}

/* Toast notifications */
html.layout-sky .toast {
    background: var(--overlay-bg);
    border: var(--overlay-border);
    border-radius: var(--toast-radius);
    box-shadow: var(--overlay-shadow);
}

html.layout-sky .toast.success {
    border-left: 4px solid var(--accent-cyan);
}

html.layout-sky .toast.error {
    border-left: 4px solid var(--accent-pink);
}

/* Loading spinner/indicator - Clean spinner without colorful center */
html.layout-sky .loading-spinner {
    border: 2.5px solid rgba(255, 255, 255, 0.08) !important;
    border-top-color: var(--accent-cyan) !important;
    border-right-color: rgba(var(--accent-cyan-rgb), 0.35) !important;
    background: transparent !important;
}

/* Loader bar (for progress bars, not spinners) */
html.layout-sky .loader-bar {
    background: var(--accent-cyan);
}

/* VOD item focus improvements */
html.layout-sky .vod-item.focused {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px var(--accent-cyan);
}

/* ============================================
   SIDEBAR COLLAPSED + LAYOUT-SKY FIXES
   When nav is hidden, remove the top margin/height adjustments
   ============================================ */
html.layout-sky.sidebar-collapsed .main-content,
.layout-sky.sidebar-collapsed .main-content,
html.sidebar-collapsed .main-content,
.sidebar-collapsed .main-content,
body.sidebar-collapsed .main-content {
    margin-top: 0 !important;
    height: 100% !important;
    top: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

html.layout-sky.sidebar-collapsed .content-section,
.layout-sky.sidebar-collapsed .content-section,
html.sidebar-collapsed .content-section,
.sidebar-collapsed .content-section,
body.sidebar-collapsed .content-section {
    padding: 6px !important;
    top: 0 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* ============================================
   VOD LAYOUT FIXES - Reduce gaps, show titles
   ============================================ */

/* Tighter gap between carousel, categories, and grid */
html.layout-sky .vod-container.vod-fullwidth,
.layout-sky .vod-container.vod-fullwidth,
.sidebar-collapsed .vod-container.vod-fullwidth,
.vod-container.vod-fullwidth {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Reduce padding on categories row - grid RIGHT under it */
html.layout-sky .vod-categories-row,
.layout-sky .vod-categories-row,
.vod-categories-row {
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 24px !important;
    --pill-gap: 5px;
    --pill-padding-x: 18px;
    --pill-padding-y: 9px;
    --pill-font-size: 13px;
    background: rgba(10, 20, 40, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html.layout-sky .vod-categories-row .category-list-horizontal,
.layout-sky .vod-categories-row .category-list-horizontal,
.vod-categories-row .category-list-horizontal {
    height: auto;
}

html.layout-sky .vod-categories-row + .vod-grid,
.layout-sky .vod-categories-row + .vod-grid,
.vod-categories-row + .vod-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Taller carousel to show titles */
html.layout-sky .trending-carousel,
.layout-sky .trending-carousel,
.trending-carousel {
    grid-column: 1 / -1 !important;
    height: auto !important;
    min-height: 230px !important;
    margin-bottom: 4px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Ensure trending item titles are visible */
html.layout-sky .trending-item,
.layout-sky .trending-item,
.trending-item {
    overflow: hidden !important;
    height: auto !important;
}

html.layout-sky .trending-item-info,
.layout-sky .trending-item-info,
.trending-item-info {
    display: block !important;
    padding: 5px 7px 6px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.92) 100%) !important;
    min-height: 28px !important;
}

html.layout-sky .trending-item-title,
.layout-sky .trending-item-title,
.trending-item-title {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

/* Make the grid take more vertical space - NO gap above it */
html.layout-sky .vod-grid,
.layout-sky .vod-grid,
.vod-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
html.layout-sky .vod-grid,
.layout-sky .vod-grid,
.vod-grid {
    min-height: 220px !important;
}

/* ============================================
   TV GUIDE SECTION STYLES
   Full EPG view like TiviMate
   ============================================ */

/* TV Categories Row (matches VOD style) */
.tv-categories-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 0;
    padding: 8px 24px !important;
    --pill-gap: 5px;
    --pill-padding-x: 18px;
    --pill-padding-y: 9px;
    --pill-font-size: 13px;
    background: linear-gradient(180deg, rgba(9, 18, 36, 0.92) 0%, rgba(8, 16, 32, 0.82) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0; /* Prevent shrinking during layout changes */
}

.tv-categories-row .category-list-horizontal {
    height: auto;
}

.tv-categories-row::-webkit-scrollbar {
    display: none;
}

/* Normalize padding/gap so TV + Movies/Shows match exactly */
html.layout-sky .tv-categories-row,
html.layout-sky .vod-categories-row {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 24px !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: rgba(10, 20, 40, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    --pill-gap: 5px;
    --pill-padding-x: 18px;
    --pill-padding-y: 9px;
    --pill-font-size: 13px;
}

html.layout-sky .tv-categories-row::-webkit-scrollbar,
html.layout-sky .vod-categories-row::-webkit-scrollbar {
    display: none;
}

html.layout-sky .tv-categories-row .category-list-horizontal,
html.layout-sky .vod-categories-row .category-list-horizontal {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Smooth layout transitions for Sky EPG components */
html.layout-sky .sky-top-bar {
    transition: none !important;
    will-change: auto !important;
}

html.layout-sky .sky-epg-container {
    transition: none !important;
    flex: 1 1 auto;
    min-height: 0;
}

html.layout-sky .sky-epg-grid {
    transition: none !important;
}

/* Prevent resize jank when top bar visibility changes */
html.layout-sky .tv-container.sky-epg-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important; /* Prevent overflow during transitions */
}

/* TV GUIDE block removed – .tvguide-* classes are unused (no matching HTML elements) */

/* =====================================================
   PROFESSIONAL POLISH — TV Grid (layout-sky)
   Keep the grid/timeline behavior; just refine alignment and visuals.
   ===================================================== */

html.layout-sky {
    --sky-epg-col-name: 200px;
    --sky-epg-pad-x: 24px;
    --sky-epg-row-h: 40px;
    --sky-epg-header-h: 34px;
    --epg-row-h: 40px;
    --epg-program-inset: 2px;
    --epg-channel-pad-y: 3px;
    --epg-channel-pad-x: 8px;
}

html.layout-sky .sky-time-header {
    grid-template-columns: var(--sky-epg-col-name) 1fr !important;
    height: var(--sky-epg-header-h) !important;
    min-height: var(--sky-epg-header-h) !important;
    padding: 0 var(--sky-epg-pad-x) !important;
    background: linear-gradient(180deg, rgba(8, 28, 72, 0.8) 0%, rgba(8, 24, 64, 0.72) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
    position: relative !important;
    z-index: 3 !important;
}

html.layout-sky .sky-time-label {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.86) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}

html.layout-sky .sky-time-slot .sky-time-slot-pill {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    letter-spacing: 0.02em !important;
}

html.layout-sky .channel-item.sky-channel-row {
    grid-template-columns: var(--sky-epg-col-name) 1fr !important;
    min-height: var(--sky-epg-row-h) !important;
    padding: 0 var(--sky-epg-pad-x) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.layout-sky .channel-item.sky-channel-row .sky-channel-logo,
html.layout-sky .channel-item.sky-channel-row .sky-channel-num {
    display: none !important;
}

html.layout-sky .sky-channel-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    padding-left: 8px !important;
}

html.layout-sky .sky-epg-programs {
    padding: 3px 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
}

html.layout-sky .sky-epg-divider {
    display: none !important;
}

html.layout-sky .sky-epg-program {
    top: 3px !important;
    bottom: 3px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.035) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    overflow: hidden !important;
    position: absolute !important;
    /* Horizontal gap between adjacent cells */
    margin-left: 2px !important;
    margin-right: 2px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

/* Programme title layout inside programme blocks */
html.layout-sky .sky-epg-program-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

/* --- Currently airing programme --- */
html.layout-sky .sky-epg-program.sky-epg-current {
    background: linear-gradient(
        180deg,
        rgba(var(--accent-cyan-rgb), 0.14) 0%,
        rgba(var(--accent-cyan-rgb), 0.08) 100%
    ) !important;
    border-color: rgba(var(--accent-cyan-rgb), 0.28) !important;
    box-shadow:
        0 1px 6px rgba(var(--accent-cyan-rgb), 0.15),
        inset 0 1px 0 rgba(var(--accent-cyan-rgb), 0.08) !important;
}

html.layout-sky .sky-epg-program.sky-epg-current::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    border-radius: 10px 0 0 10px !important;
    background: rgba(var(--accent-cyan-rgb), 0.95) !important;
    box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.3) !important;
}

/* Progress bar at the bottom of the current programme */
html.layout-sky .sky-epg-progress {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    border-radius: 0 0 10px 10px !important;
    background: linear-gradient(
        90deg,
        rgba(var(--accent-cyan-rgb), 0.95),
        rgba(var(--accent-cyan-rgb), 0.55)
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Placeholder cells — subtle, not broken-looking */
html.layout-sky .sky-epg-program.sky-epg-placeholder {
    font-weight: 500 !important;
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}

html.layout-sky .channel-item.sky-channel-row:hover .sky-epg-program,
html.layout-sky .channel-item.sky-channel-row.focused .sky-epg-program {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.055) 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Keep current highlight visible even on focused row */
html.layout-sky .channel-item.sky-channel-row.focused .sky-epg-program.sky-epg-current {
    background: linear-gradient(
        180deg,
        rgba(var(--accent-cyan-rgb), 0.18) 0%,
        rgba(var(--accent-cyan-rgb), 0.1) 100%
    ) !important;
    border-color: rgba(var(--accent-cyan-rgb), 0.35) !important;
}

/* Active EPG slot (LEFT/RIGHT cursor on focused row) */
html.layout-sky .channel-item.sky-channel-row.focused .sky-epg-program.epg-slot-active {
    /* Solid cyan selector (matches sidebar/category selector) */
    background: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--text-inverse) !important;
    font-weight: 800 !important;
    box-shadow: var(--focus-glow-strong) !important;
    text-shadow: none !important;
    z-index: 5 !important;
}

html.layout-sky .channel-item.sky-channel-row.focused .sky-epg-program.epg-slot-active .sky-epg-progress {
    background: rgba(4, 8, 16, 0.32) !important;
}

@media (max-width: 1280px) {
    html.layout-sky {
        --sky-epg-col-name: 170px;
        --sky-epg-pad-x: 16px;
        --sky-epg-row-h: 46px;
        --sky-epg-header-h: 34px;
    }
    html.layout-sky .sky-time-label {
        font-size: 12px !important;
        letter-spacing: 0.05em !important;
    }
    html.layout-sky .sky-epg-program {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
}

/* ============================================\n   FINAL OVERRIDES - Must be at end to win\n   ============================================ */

/* Movies/Shows now use TV layout classes - make vod-grid fill remaining space */
html.layout-sky .tv-container.vod-fullwidth {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
}

html.layout-sky .tv-container.vod-fullwidth .vod-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 8px 24px !important;
}

/* Grid sits right under pills */
html.layout-sky .vod-grid,
.layout-sky .vod-grid,
.vod-grid,
#movie-grid,
#show-grid {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* Movies/Shows: 7 columns, evenly spaced (TV-friendly) */
html.layout-sky .tv-container.vod-fullwidth .vod-grid,
.layout-sky .tv-container.vod-fullwidth .vod-grid,
html.layout-sky #movie-grid,
html.layout-sky #show-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 22px !important;
    justify-content: stretch !important;
}

html.layout-sky .tv-container.vod-fullwidth .vod-grid .vod-item,
.layout-sky .tv-container.vod-fullwidth .vod-grid .vod-item,
html.layout-sky #movie-grid .vod-item,
html.layout-sky #show-grid .vod-item {
    max-width: none !important;
    width: 100% !important;
}

/* Responsive fallback: allow auto-fill on smaller widths */
@media (max-width: 1180px) {
    html.layout-sky .tv-container.vod-fullwidth .vod-grid,
    .layout-sky .tv-container.vod-fullwidth .vod-grid,
    html.layout-sky #movie-grid,
    html.layout-sky #show-grid {
        grid-template-columns: repeat(
            auto-fill,
            minmax(var(--vod-card-min-width), var(--vod-card-max-width))
        ) !important;
        gap: var(--vod-card-gap) !important;
        justify-content: start !important;
    }

    html.layout-sky .tv-container.vod-fullwidth .vod-grid .vod-item,
    .layout-sky .tv-container.vod-fullwidth .vod-grid .vod-item,
    html.layout-sky #movie-grid .vod-item,
    html.layout-sky #show-grid .vod-item {
        max-width: var(--vod-card-max-width) !important;
        width: auto !important;
    }
}

/* ============================================================
   CSS-only theme fallback via data-theme attribute
   These use !important so they override ANY other :root / `:root`
   custom-property declaration, including inline styles without
   the important flag.  SettingsApplier additionally sets these
   inline with !important, but this CSS guarantees the values
   even if the JS timing is delayed or inline setProperty fails.
   ============================================================ */
html[data-theme='cyan-red'],
html[data-theme='cyan-red'].layout-sky {
    --accent-cyan: #00d4d4 !important;
    --accent-cyan-rgb: 0, 212, 212 !important;
    --accent-cyan-dim: rgba(0, 212, 212, 0.15) !important;
    --accent-cyan-glow: rgba(0, 212, 212, 0.3) !important;
    --accent-cyan-bright: rgb(77, 233, 233) !important;
    --accent-pink: #ff5a7e !important;
    --accent-pink-rgb: 255, 90, 126 !important;
    --accent-pink-dim: rgba(255, 90, 126, 0.15) !important;
    --surface-active: rgba(0, 212, 212, 0.12) !important;
    --surface-selected: rgba(0, 212, 212, 0.18) !important;
    --shadow-glow: 0 0 0 2.5px rgba(0, 212, 212, 0.5), 0 0 12px rgba(0, 212, 212, 0.18) !important;
    --shadow-glow-strong: 0 0 0 2.5px #00d4d4, 0 0 20px rgba(0, 212, 212, 0.3) !important;
    --focus-ring-offset: 0 0 0 4px rgba(0, 212, 212, 0.2) !important;
    --focus-glow: 0 0 0 2.5px #00d4d4, 0 0 14px rgba(0, 212, 212, 0.35) !important;
    --focus-glow-strong:
        0 0 0 2.5px #00d4d4, 0 0 20px rgba(0, 212, 212, 0.4), 0 0 40px rgba(0, 212, 212, 0.12) !important;
}

html[data-theme='blue-orange'],
html[data-theme='blue-orange'].layout-sky {
    --accent-cyan: #3b8bff !important;
    --accent-cyan-rgb: 59, 139, 255 !important;
    --accent-cyan-dim: rgba(59, 139, 255, 0.15) !important;
    --accent-cyan-glow: rgba(59, 139, 255, 0.3) !important;
    --accent-cyan-bright: rgb(117, 172, 255) !important;
    --accent-pink: #ffb347 !important;
    --accent-pink-rgb: 255, 179, 71 !important;
    --accent-pink-dim: rgba(255, 179, 71, 0.15) !important;
    --surface-active: rgba(59, 139, 255, 0.12) !important;
    --surface-selected: rgba(59, 139, 255, 0.18) !important;
    --shadow-glow: 0 0 0 2.5px rgba(59, 139, 255, 0.5), 0 0 12px rgba(59, 139, 255, 0.18) !important;
    --shadow-glow-strong: 0 0 0 2.5px #3b8bff, 0 0 20px rgba(59, 139, 255, 0.3) !important;
    --focus-ring-offset: 0 0 0 4px rgba(59, 139, 255, 0.2) !important;
    --focus-glow: 0 0 0 2.5px #3b8bff, 0 0 14px rgba(59, 139, 255, 0.35) !important;
    --focus-glow-strong:
        0 0 0 2.5px #3b8bff, 0 0 20px rgba(59, 139, 255, 0.4), 0 0 40px rgba(59, 139, 255, 0.12) !important;
}

html[data-theme='green-purple'],
html[data-theme='green-purple'].layout-sky {
    --accent-cyan: #2ee8a5 !important;
    --accent-cyan-rgb: 46, 232, 165 !important;
    --accent-cyan-dim: rgba(46, 232, 165, 0.15) !important;
    --accent-cyan-glow: rgba(46, 232, 165, 0.3) !important;
    --accent-cyan-bright: rgb(104, 239, 191) !important;
    --accent-pink: #f76e9a !important;
    --accent-pink-rgb: 247, 110, 154 !important;
    --accent-pink-dim: rgba(247, 110, 154, 0.15) !important;
    --surface-active: rgba(46, 232, 165, 0.12) !important;
    --surface-selected: rgba(46, 232, 165, 0.18) !important;
    --shadow-glow: 0 0 0 2.5px rgba(46, 232, 165, 0.5), 0 0 12px rgba(46, 232, 165, 0.18) !important;
    --shadow-glow-strong: 0 0 0 2.5px #2ee8a5, 0 0 20px rgba(46, 232, 165, 0.3) !important;
    --focus-ring-offset: 0 0 0 4px rgba(46, 232, 165, 0.2) !important;
    --focus-glow: 0 0 0 2.5px #2ee8a5, 0 0 14px rgba(46, 232, 165, 0.35) !important;
    --focus-glow-strong:
        0 0 0 2.5px #2ee8a5, 0 0 20px rgba(46, 232, 165, 0.4), 0 0 40px rgba(46, 232, 165, 0.12) !important;
}

html[data-theme='purple-yellow'],
html[data-theme='purple-yellow'].layout-sky {
    --accent-cyan: #b388ff !important;
    --accent-cyan-rgb: 179, 136, 255 !important;
    --accent-cyan-dim: rgba(179, 136, 255, 0.15) !important;
    --accent-cyan-glow: rgba(179, 136, 255, 0.3) !important;
    --accent-cyan-bright: rgb(205, 177, 255) !important;
    --accent-pink: #ffd054 !important;
    --accent-pink-rgb: 255, 208, 84 !important;
    --accent-pink-dim: rgba(255, 208, 84, 0.15) !important;
    --surface-active: rgba(179, 136, 255, 0.12) !important;
    --surface-selected: rgba(179, 136, 255, 0.18) !important;
    --shadow-glow: 0 0 0 2.5px rgba(179, 136, 255, 0.5), 0 0 12px rgba(179, 136, 255, 0.18) !important;
    --shadow-glow-strong: 0 0 0 2.5px #b388ff, 0 0 20px rgba(179, 136, 255, 0.3) !important;
    --focus-ring-offset: 0 0 0 4px rgba(179, 136, 255, 0.2) !important;
    --focus-glow: 0 0 0 2.5px #b388ff, 0 0 14px rgba(179, 136, 255, 0.35) !important;
    --focus-glow-strong:
        0 0 0 2.5px #b388ff, 0 0 20px rgba(179, 136, 255, 0.4), 0 0 40px rgba(179, 136, 255, 0.12) !important;
}