:root {
    --bg-dark: #07080b;
    --neon-blue: #00f2ff;
    --neon-purple: #8a2be2;
    --glass: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --terminal-bg: rgba(5, 8, 15, 0.9);
}

body {
    background-color: var(--bg-dark); color: #ffffff; font-family: 'Inter', sans-serif; min-height: 100vh; margin: 0;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
/* Hide the I-beam cursor on non-input text so it feels like an app, but still allow copy */
*:not(input):not(textarea):not(pre):not(code):not([contenteditable="true"]) {
    cursor: default;
}
#main-app-wrapper { padding-top: 100px; }

/* ── Mobile performance: disable heavy FX on touch/small devices ── */
@media (max-width: 1024px), (hover: none) {
    .desktop-only-fx { display: none !important; }

    /* Disable rotating conic-gradient borders — too expensive on mobile GPUs */
    .glass-item::before, .glass-item::after,
    .ch-modal-section::before, .ch-modal-section::after,
    .export-card::before, .export-card::after,
    .settings-group::before, .settings-group::after,
    .terminal-wrap::before, .terminal-wrap::after,
    .wv-page-header::before, .wv-page-header::after,
    .wv-device-card::before, .wv-device-card::after,
    .epg-page-header::before, .epg-page-header::after,
    .epg-browser::before, .epg-browser::after,
    .events-page-header::before, .events-page-header::after,
    .scores-page-header::before, .scores-page-header::after,
    .vod-page-header::before, .vod-page-header::after,
    .export-page-header::before, .export-page-header::after,
    .log-page-header::before, .log-page-header::after,
    .settings-page-header::before, .settings-page-header::after,
    .licenses-page-header::before, .licenses-page-header::after,
    .ka-page-header::before, .ka-page-header::after,
    .leagues-page-header::before, .leagues-page-header::after,
    .event-card::before, .event-card::after,
    .log-entry::before, .log-entry::after,
    .vod-poster-wrap::before, .vod-poster-wrap::after,
    .vod-detail-poster::before, .vod-detail-poster::after,
    .search-wrapper::before, .search-wrapper::after,
    .login-card::before, .login-card::after { display: none !important; }

    /* Replace with simple static borders */
    .glass-item { border: 1px solid var(--glass-border) !important; }
    .ch-modal-section, .export-card, .settings-group,
    .wv-page-header, .wv-device-card,
    .epg-page-header, .epg-browser,
    .events-page-header, .scores-page-header,
    .vod-page-header, .export-page-header,
    .log-page-header, .settings-page-header,
    .licenses-page-header,
    .ka-page-header,
    .leagues-page-header { border: 1px solid rgba(0,242,255,0.12) !important; }
    .vod-poster-wrap { border: 1px solid rgba(138,43,226,0.25) !important; }
    .vod-detail-poster img { border: 1px solid rgba(138,43,226,0.25) !important; }
    .modern-search { border: 1px solid var(--glass-border) !important; }
    .terminal-wrap { border: 1px solid rgba(0,242,255,0.2) !important; }

    /* Disable breathing glow animations */
    .epg-stat, .log-stat, .score-card, .event-card,
    .ch-modal-status-bar, .ch-modal-epg,
    .lic-usage-stats, .export-search-card,
    .epg-url-card, .epg-selected-channel,
    .epg-now, .img-container { animation: none !important; }
    .img-container-ring, .img-container-ring2 { display: none !important; }
    .img-container-inner { border: 1px solid rgba(0,242,255,0.3) !important; }
    .img-container { animation: none !important; }

    /* Simplify blurs */
    .bg-layer { filter: none; width: 100%; height: 100%; top: 0; left: 0; }
}

/* ── GPU layer hints for animated elements (desktop) ── */
.bg-layer, .bg-fx-aurora, .bg-fx-orb, .stars-layer,
.bg-fx-binary-char, .bg-fx-binary-frag {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* ── LITE MODE ──────────────────────────────────────────
   Toggled via the sun/moon icon in the navbar.  Strips ALL
   GPU-heavy background effects: stars, orbs, aurora, glows,
   binary rain, noise, and backdrop-filter blurs.  Keeps the
   UI functional and styled — just no eye-candy animations.
   Also respects prefers-reduced-motion automatically.    */
body.lite-mode {
    background: linear-gradient(160deg, #0a0e1a 0%, #0f1528 35%, #111a30 65%, #0a0e1a 100%) !important;
    background-attachment: fixed !important;
}
body.lite-mode .stars-layer,
body.lite-mode .bg-layer,
body.lite-mode .bg-fx-aurora,
body.lite-mode .bg-fx-orb,
body.lite-mode .bg-fx-noise,
body.lite-mode .bg-fx-vignette,
body.lite-mode #bg-fx-binary {
    display: none !important;
}
body.lite-mode .sleek-glass-nav,
body.lite-mode .glass-modal,
body.lite-mode .glass-item,
body.lite-mode .export-card,
body.lite-mode .settings-group,
body.lite-mode .ch-modal-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.lite-mode .glass-item::before,
body.lite-mode .glass-item::after,
body.lite-mode .ch-modal-section::before,
body.lite-mode .ch-modal-section::after,
body.lite-mode .export-card::before,
body.lite-mode .export-card::after,
body.lite-mode .settings-group::before,
body.lite-mode .settings-group::after {
    animation: none !important;
}
/* Auto-enable for users with reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .stars-layer,
    .bg-layer,
    .bg-fx-aurora,
    .bg-fx-orb,
    .bg-fx-noise,
    #bg-fx-binary {
        display: none !important;
    }
}

/* === PURE CSS PARALLAX STARS === */
.stars-layer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; pointer-events: none; }

.stars-small {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(0,242,255,0.6), transparent),
        radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(0,242,255,0.4), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(138,43,226,0.5), transparent),
        radial-gradient(1px 1px at 20% 70%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 80% 40%, rgba(0,242,255,0.5), transparent),
        radial-gradient(1px 1px at 40% 90%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 5% 55%, rgba(0,255,127,0.35), transparent),
        radial-gradient(1px 1px at 60% 35%, rgba(138,43,226,0.4), transparent),
        radial-gradient(1px 1px at 95% 65%, rgba(0,242,255,0.35), transparent),
        radial-gradient(1px 1px at 25% 95%, rgba(255,255,255,0.3), transparent);
    background-size: 250px 250px;
    animation: animStar 50s linear infinite;
}

.stars-medium {
    background-image:
        radial-gradient(1.5px 1.5px at 15% 25%, rgba(0,242,255,0.5), transparent),
        radial-gradient(2px 2px at 35% 80%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 65% 15%, rgba(138,43,226,0.4), transparent),
        radial-gradient(2px 2px at 85% 60%, rgba(0,242,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.4), transparent);
    background-size: 350px 350px;
    animation: animStar 100s linear infinite;
}

.stars-large {
    background-image:
        radial-gradient(2.5px 2.5px at 25% 35%, rgba(0,242,255,0.4), transparent),
        radial-gradient(3px 3px at 75% 75%, rgba(138,43,226,0.35), transparent),
        radial-gradient(2.5px 2.5px at 55% 85%, rgba(0,242,255,0.35), transparent);
    background-size: 500px 500px;
    animation: animStar 150s linear infinite;
}

@keyframes animStar { from { background-position: 0 0; } to { background-position: 0 -2000px; } }

/* === SUBTLE GRID OVERLAY === */
.stars-layer.stars-small::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,242,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,242,255,0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 70%);
}

/* === FIXED LIQUID BACKGROUND FX === */
.bg-layer {
    position: fixed;
    top: -20%; left: -20%;
    width: 140%; height: 140%;
    z-index: -1;
    pointer-events: none;
}

.purple-glow {
    background:
        radial-gradient(circle at 30% 40%, rgba(138, 43, 226, 0.25) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(138, 43, 226, 0.12) 0%, transparent 40%);
    animation: colorShiftPurple 12s ease-in-out infinite alternate;
}

.blue-glow {
    background:
        radial-gradient(circle at 70% 60%, rgba(0, 242, 255, 0.35) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(0, 242, 255, 0.15) 0%, transparent 45%);
    animation: colorShiftBlue 12s ease-in-out infinite alternate;
}

@keyframes colorShiftPurple {
    0%   { opacity: 0.3; transform: scale(1) translate(0, 0); }
    100% { opacity: 0.8; transform: scale(1.08) translate(3%, -2%); }
}

@keyframes colorShiftBlue {
    0%   { opacity: 0.8; transform: scale(1.05) translate(0, 0); }
    100% { opacity: 0.4; transform: scale(1) translate(-3%, 2%); }
}

/* === VIGNETTE === */
.bg-fx-vignette {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.5) 100%);
}

/* === NOISE TEXTURE === */
.bg-fx-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* === AURORA WAVES === */
.bg-fx-aurora {
    position: fixed;
    bottom: -30%;
    left: -10%;
    width: 120%;
    height: 60%;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(160deg, transparent 30%, rgba(0,242,255,0.04) 45%, rgba(138,43,226,0.03) 55%, transparent 70%),
        linear-gradient(200deg, transparent 25%, rgba(138,43,226,0.03) 40%, rgba(0,242,255,0.04) 55%, transparent 65%);
    animation: bg-fx-aurora-drift 20s ease-in-out infinite alternate;
    filter: blur(40px);
}
.bg-fx-aurora::after {
    content: '';
    position: absolute;
    top: -120%;
    left: -5%;
    width: 110%;
    height: 50%;
    background:
        linear-gradient(170deg, transparent 30%, rgba(138,43,226,0.03) 45%, rgba(0,255,127,0.02) 55%, transparent 70%);
    filter: blur(50px);
    animation: bg-fx-aurora-top 25s ease-in-out infinite alternate;
}
@keyframes bg-fx-aurora-drift {
    0%   { transform: translateX(-5%) skewY(-1deg); opacity: 0.6; }
    50%  { transform: translateX(3%) skewY(0.5deg); opacity: 1; }
    100% { transform: translateX(-3%) skewY(-0.5deg); opacity: 0.7; }
}
@keyframes bg-fx-aurora-top {
    0%   { transform: translateX(3%) skewY(0.5deg); opacity: 0.4; }
    100% { transform: translateX(-4%) skewY(-0.8deg); opacity: 0.8; }
}

/* === SCANLINES === */
.bg-fx-scanlines {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.03) 3px,
        rgba(0,0,0,0.03) 4px
    );
}



/* === FLOATING BINARY CODE === */
.bg-fx-binary {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.bg-fx-binary-char {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    opacity: 0;
    will-change: transform, opacity;
    animation: bg-fx-binary-float var(--dur) var(--delay) linear infinite;
    text-shadow: 0 0 4px currentColor;
}
.bg-fx-binary-frag {
    position: fixed;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    pointer-events: none;
    z-index: -1;
    opacity: 0.9;
    text-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
    animation: bg-fx-binary-burst 0.8s ease-out forwards;
}
@keyframes bg-fx-binary-burst {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}

/* Stream groups: vertical column of chars that float as one unit */
.bg-fx-stream-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    text-shadow: 0 0 4px currentColor;
}
.bg-fx-stream-char {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-shadow: inherit;
}

@keyframes bg-fx-binary-float {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: var(--peak); }
    90%  { opacity: var(--peak); }
    100% { transform: translateY(-100vh); opacity: 0; }
}


/* === ORB PULSES (roaming) === */
.bg-fx-orb {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    width: 300px; height: 300px;
}
.bg-fx-orb-1 {
    background: radial-gradient(circle, rgba(0,242,255,0.08) 0%, transparent 70%);
    animation: bg-fx-orb-roam-1 18s 0s ease-in-out infinite;
}
.bg-fx-orb-2 {
    background: radial-gradient(circle, rgba(138,43,226,0.07) 0%, transparent 70%);
    animation: bg-fx-orb-roam-2 22s 3s ease-in-out infinite;
}
.bg-fx-orb-3 {
    background: radial-gradient(circle, rgba(0,242,255,0.06) 0%, transparent 70%);
    animation: bg-fx-orb-roam-3 25s 7s ease-in-out infinite;
}
@keyframes bg-fx-orb-roam-1 {
    0%   { top: 15%; left: 10%;  transform: scale(0.5); opacity: 0; }
    12%  { top: 15%; left: 10%;  transform: scale(1);   opacity: 1; }
    25%  { top: 15%; left: 10%;  transform: scale(1.5); opacity: 0; }
    26%  { top: 60%; left: 75%;  transform: scale(0.5); opacity: 0; }
    38%  { top: 60%; left: 75%;  transform: scale(1);   opacity: 1; }
    50%  { top: 60%; left: 75%;  transform: scale(1.5); opacity: 0; }
    51%  { top: 30%; left: 50%;  transform: scale(0.5); opacity: 0; }
    63%  { top: 30%; left: 50%;  transform: scale(1);   opacity: 1; }
    75%  { top: 30%; left: 50%;  transform: scale(1.5); opacity: 0; }
    76%  { top: 75%; left: 20%;  transform: scale(0.5); opacity: 0; }
    88%  { top: 75%; left: 20%;  transform: scale(1);   opacity: 1; }
    100% { top: 75%; left: 20%;  transform: scale(1.5); opacity: 0; }
}
@keyframes bg-fx-orb-roam-2 {
    0%   { top: 70%; left: 65%;  transform: scale(0.5); opacity: 0; }
    12%  { top: 70%; left: 65%;  transform: scale(1);   opacity: 1; }
    25%  { top: 70%; left: 65%;  transform: scale(1.5); opacity: 0; }
    26%  { top: 20%; left: 30%;  transform: scale(0.5); opacity: 0; }
    38%  { top: 20%; left: 30%;  transform: scale(1);   opacity: 1; }
    50%  { top: 20%; left: 30%;  transform: scale(1.5); opacity: 0; }
    51%  { top: 50%; left: 85%;  transform: scale(0.5); opacity: 0; }
    63%  { top: 50%; left: 85%;  transform: scale(1);   opacity: 1; }
    75%  { top: 50%; left: 85%;  transform: scale(1.5); opacity: 0; }
    76%  { top: 10%; left: 55%;  transform: scale(0.5); opacity: 0; }
    88%  { top: 10%; left: 55%;  transform: scale(1);   opacity: 1; }
    100% { top: 10%; left: 55%;  transform: scale(1.5); opacity: 0; }
}
@keyframes bg-fx-orb-roam-3 {
    0%   { top: 40%; left: 45%;  transform: scale(0.5); opacity: 0; }
    12%  { top: 40%; left: 45%;  transform: scale(1);   opacity: 1; }
    25%  { top: 40%; left: 45%;  transform: scale(1.5); opacity: 0; }
    26%  { top: 80%; left: 10%;  transform: scale(0.5); opacity: 0; }
    38%  { top: 80%; left: 10%;  transform: scale(1);   opacity: 1; }
    50%  { top: 80%; left: 10%;  transform: scale(1.5); opacity: 0; }
    51%  { top: 15%; left: 80%;  transform: scale(0.5); opacity: 0; }
    63%  { top: 15%; left: 80%;  transform: scale(1);   opacity: 1; }
    75%  { top: 15%; left: 80%;  transform: scale(1.5); opacity: 0; }
    76%  { top: 55%; left: 35%;  transform: scale(0.5); opacity: 0; }
    88%  { top: 55%; left: 35%;  transform: scale(1);   opacity: 1; }
    100% { top: 55%; left: 35%;  transform: scale(1.5); opacity: 0; }
}

/* === UI STYLES === */
.glass-nav { background: rgba(12, 13, 18, 0.8) !important; backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); }
.text-neon { color: var(--neon-blue); text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }
.nav-link { font-weight: 600; color: rgba(255,255,255,0.7) !important; transition: 0.3s; }
.nav-link:hover { color: var(--neon-blue) !important; }
.btn-precache { background: rgba(138, 43, 226, 0.2); border: 1px solid var(--neon-purple) !important; border-radius: 8px; color: white !important; }

/* Search & Refresh */
.search-wrapper {
    position: relative;
    border-radius: 12px;
    /* The input's own border is now transparent — this wrapper carries
       the rotating neon conic-gradient ring instead, matching the rest
       of the app's "neon page chrome" treatment. */
}
.search-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: conic-gradient(
        from var(--search-angle, 0deg),
        transparent 0%,
        transparent 70%,
        rgba(0,242,255,0.5) 80%,
        rgba(138,43,226,0.4) 88%,
        rgba(0,242,255,0.6) 92%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    z-index: 1;
    animation: search-rotate 8s linear infinite;
}
.search-wrapper:focus-within::before {
    background: conic-gradient(
        from var(--search-angle, 0deg),
        transparent 0%,
        transparent 60%,
        rgba(0,242,255,0.75) 75%,
        rgba(138,43,226,0.55) 86%,
        rgba(0,242,255,0.9) 92%,
        transparent 100%
    );
}
@property --search-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes search-rotate {
    to { --search-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .search-wrapper::before { background: none; animation: none; }
    .modern-search { border-color: var(--glass-border) !important; }
}
.modern-search {
    background: var(--glass);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 15px 8px 35px;
    color: white;
    width: 250px;
    transition: box-shadow 0.3s ease;
    position: relative;
    z-index: 0;
}
.modern-search:focus {
    outline: none;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neon-blue);
    z-index: 2;
    pointer-events: none;
}

.btn-icon-neon {
    background: rgba(0, 242, 255, 0.1); color: var(--neon-blue); border: 1px solid var(--neon-blue);
    border-radius: 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    transition: 0.3s; cursor: pointer; outline: none; user-select: none;
}
.btn-icon-neon:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 15px var(--neon-blue); }
.btn-neon-action { background: var(--neon-blue); color: #000; font-weight: 700; border-radius: 8px; border: none; padding: 6px 16px; transition: 0.3s;}

.btn-icon-danger {
    background: rgba(255, 107, 107, 0.1); color: #ff6b6b; border: 1px solid #ff6b6b;
    border-radius: 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    transition: 0.3s; cursor: pointer; outline: none; user-select: none;
}
.btn-icon-danger:hover { background: #ff6b6b; color: #000; box-shadow: 0 0 15px #ff6b6b; }
.btn-icon-danger:focus, .btn-icon-neon:focus { outline: none; }

.fa-sweep { animation: sweep 0.6s ease-in-out infinite; transform-origin: bottom center; }
@keyframes sweep {
    0% { transform: rotate(-25deg); }
    50% { transform: rotate(25deg); }
    100% { transform: rotate(-25deg); }
}

/* List Items & Logos */
.glass-item { background: var(--glass); border: 1px solid transparent; border-radius: 15px; padding: 12px; margin-bottom: 10px; display: flex; align-items: center; transition: transform 0.3s cubic-bezier(.25,.8,.25,1), background 0.3s, box-shadow 0.3s; position: relative; transform: scale(1); }
.glass-item::before,
.glass-item::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    pointer-events: none;
}
.glass-item::before {
    background: conic-gradient(
        from var(--glass-border-angle, 0deg),
        transparent 0%,
        transparent 72%,
        rgba(0,242,255,0.35) 82%,
        rgba(138,43,226,0.25) 90%,
        rgba(0,242,255,0.4) 94%,
        transparent 100%
    );
    animation: glass-item-border-rotate 8s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.glass-item::after {
    background: var(--glass);
    z-index: 0;
}
.glass-item > * {
    position: relative;
    z-index: 1;
}
@property --glass-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes glass-item-border-rotate {
    to { --glass-border-angle: 360deg; }
}
/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .glass-item::before { background: none; animation: none; }
    .glass-item { border: 1px solid var(--glass-border); }
}
.glass-item:hover {
    background: rgba(255,255,255,0.07);
    transform: scale(1.015);
    box-shadow: 0 4px 20px rgba(0,242,255,0.08), 0 0 30px rgba(138,43,226,0.04);
}
.glass-item:hover::before {
    background: conic-gradient(
        from var(--glass-border-angle, 0deg),
        transparent 0%,
        transparent 65%,
        rgba(0,242,255,0.55) 78%,
        rgba(138,43,226,0.4) 88%,
        rgba(0,242,255,0.6) 94%,
        transparent 100%
    );
}
.col-icon { width: 60px; flex-shrink: 0; }
.col-info { flex: 1; padding-left: 15px; min-width: 0; }
.channel-name { margin-bottom: 4px; text-decoration: none; color: inherit; display: block; }
.ch-name-link:hover { color: #00f2ff; text-decoration: none; }
.channel-ccid { margin-bottom: 4px; }
.epg-info { margin-top: 2px; }

.col-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 14px;
}
.col-actions .cache-badge {
    margin-right: 10px;
}

/* Channel logo container — dual spinning neon lines (matches video player) */
.img-container {
    width: 48px; height: 48px; border-radius: 10px;
    position: relative;
    overflow: hidden;
    padding: 2px;
    animation: img-glow-pulse 3s ease-in-out infinite;
}

/* Blue line — clockwise */
.img-container-ring {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 80%, var(--neon-blue) 100%);
    animation: img-spin-cw 4s linear infinite;
    z-index: 0;
}

/* Orange line — counter-clockwise */
.img-container-ring2 {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 180deg, transparent 80%, #ff9900 100%);
    animation: img-spin-ccw 4s linear infinite;
    z-index: 0;
}

@keyframes img-spin-cw { to { transform: rotate(360deg); } }
@keyframes img-spin-ccw { to { transform: rotate(-360deg); } }

/* White inner box — sits on top as mask */
.img-container-inner {
    width: 100%; height: 100%;
    background: #ffffff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 3px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Glow pulse — breathing shadow */
@keyframes img-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 4px rgba(0,242,255,0.1), 0 0 8px rgba(255,153,0,0.05);
    }
    50% {
        box-shadow: 0 0 8px rgba(0,242,255,0.3), 0 0 16px rgba(255,153,0,0.15);
    }
}

.img-container:hover {
    box-shadow: 0 0 12px rgba(0,242,255,0.5), 0 0 24px rgba(255,153,0,0.25);
}

.list-img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 5px;
}
.fa-spin-fast { animation: fa-spin 0.6s infinite linear; }

/* Pagination & Dropdown */
.glass-select { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--neon-blue); color: #fff; padding: 5px 15px; border-radius: 8px; outline: none; cursor: pointer; font-size: 0.85rem; }
.glass-select option { background: #07080b; color: #fff; }
.pagination-container { display: flex; justify-content: center; align-items: center; gap: 15px; padding-bottom: 40px; }
.btn-page-nav { background: rgba(138, 43, 226, 0.15); border: 1px solid var(--neon-purple); color: #fff; padding: 10px 22px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s all ease; }
.btn-page-nav:hover:not(:disabled) { background: var(--neon-purple); box-shadow: 0 0 20px var(--neon-purple); transform: translateY(-2px); }
.btn-page-nav:disabled { opacity: 0.2; cursor: not-allowed; border-color: rgba(255,255,255,0.1); }
.page-indicator { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); padding: 10px 20px; border-radius: 12px; font-size: 0.85rem; color: var(--neon-blue); font-weight: bold; }

/* Terminal & Export */
/* Terminal wrapper handles the rotating border (no overflow clipping) */
.terminal-wrap {
    position: relative;
    border-radius: 12px;
    padding: 2px;
    overflow: hidden;
}
.terminal-wrap::before,
.terminal-wrap::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    pointer-events: none;
}
.terminal-wrap::before {
    background: conic-gradient(
        from var(--terminal-border-angle, 0deg),
        transparent 0%,
        transparent 70%,
        rgba(0,242,255,0.5) 80%,
        rgba(138,43,226,0.35) 88%,
        rgba(0,242,255,0.6) 92%,
        transparent 100%
    );
    animation: terminal-border-rotate 5s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.terminal-wrap::after {
    display: none;
}
@property --terminal-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes terminal-border-rotate {
    to { --terminal-border-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .terminal-wrap::before { background: none; animation: none; }
    .terminal-wrap { border: 1px solid rgba(0,242,255,0.3); animation: terminal-glow-fb 3s ease-in-out infinite alternate; }
    @keyframes terminal-glow-fb {
        0%   { border-color: rgba(0,242,255,0.2); box-shadow: 0 0 8px rgba(0,242,255,0.04); }
        100% { border-color: rgba(0,242,255,0.4); box-shadow: 0 0 16px rgba(0,242,255,0.08); }
    }
}

/* Terminal box scrolls inside the wrapper */
.terminal-box {
    background: var(--terminal-bg);
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    height: 70vh;
    overflow-y: auto;
    font-family: 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    position: relative;
    z-index: 1;
    z-index: 1;
}

/* === SECTION NEON DIVIDER LINE === */
.section-neon-line {
    height: 1px;
    margin-bottom: 20px;
    border: none;
    background: rgba(0,242,255,0.4);
    box-shadow: 0 0 8px rgba(0,242,255,0.3), 0 0 20px rgba(0,242,255,0.15);
    animation: section-neon-line-glow 3s ease-in-out infinite;
}
@keyframes section-neon-line-glow {
    0%, 100% {
        background: rgba(0,242,255,0.25);
        box-shadow: 0 0 6px rgba(0,242,255,0.2), 0 0 15px rgba(0,242,255,0.08);
    }
    50% {
        background: rgba(0,242,255,0.6);
        box-shadow: 0 0 12px rgba(0,242,255,0.5), 0 0 30px rgba(0,242,255,0.2);
    }
}

/* === LIVE LOGS === */

/* Page header */
.log-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.log-page-header::before,
.log-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.log-page-header::before {
    background: conic-gradient(from var(--log-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: log-hdr-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.log-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.log-page-header > * { position: relative; z-index: 1; }
@property --log-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes log-hdr-rotate { to { --log-hdr-angle: 360deg; } }
.log-page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.log-page-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.log-page-icon {
    font-size: 1.6rem;
    color: var(--neon-blue);
    text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: log-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes log-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
.log-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.log-toolbar > * { flex-shrink: 0; }

/* Stats bar */
.log-stats-bar {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,242,255,0.06);
}
.log-stat {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    background: rgba(0,242,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.25s ease;
}
.log-stat:hover {
    background: rgba(0,242,255,0.05);
    border-color: rgba(0,242,255,0.12);
}
.log-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
    display: block;
    line-height: 1.3;
}
.log-stat-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
    display: block;
}
.log-stat-err .log-stat-value { color: #ff4b6e; text-shadow: 0 0 6px rgba(255,75,110,0.4); }
.log-stat-warn .log-stat-value { color: #ffb347; text-shadow: 0 0 6px rgba(255,179,71,0.4); }
.log-stat-info .log-stat-value { color: var(--neon-blue); text-shadow: 0 0 6px rgba(0,242,255,0.4); }

/* Status indicator */
#log-pause-btn.is-paused {
    color: #ffb347;
    border-color: #ffb347;
    box-shadow: 0 0 10px rgba(255, 179, 71, 0.4);
}
.log-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7fd9ff;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 242, 255, 0.08);
    border: 1px solid rgba(0, 242, 255, 0.3);
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
    box-shadow: 0 0 8px rgba(0,242,255,0.1);
    animation: log-indicator-glow 3s ease-in-out infinite alternate;
}
@keyframes log-indicator-glow {
    0%   { box-shadow: 0 0 6px rgba(0,242,255,0.06); border-color: rgba(0,242,255,0.2); }
    100% { box-shadow: 0 0 12px rgba(0,242,255,0.15); border-color: rgba(0,242,255,0.4); }
}
.log-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00f2ff;
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.8);
    animation: log-status-pulse 1.8s ease-in-out infinite;
}
.log-status-indicator.is-paused {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.08);
    border-color: rgba(255, 179, 71, 0.45);
    text-shadow: 0 0 6px rgba(255,179,71,0.3);
    box-shadow: 0 0 8px rgba(255,179,71,0.1);
    animation: none;
}
.log-status-indicator.is-paused .log-status-dot {
    background: #ffb347;
    box-shadow: 0 0 8px rgba(255, 179, 71, 0.7);
    animation: none;
}
@keyframes log-status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Empty state */
.log-empty {
    padding: 40px 24px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-family: inherit;
    font-size: 0.85rem;
}

/* ── Log entry cards ── */
.log-entry {
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    position: relative;
    overflow: visible;
    background: rgba(255, 255, 255, 0.018);
    transition: all 0.2s ease;
    position: relative;
}
.log-entry-content {
    position: relative;
    z-index: 1;
}
/* Neon border — mask-based conic gradient (works on wide rectangles) */
.log-entry::before {
    content: ''; position: absolute; inset: -1px; border-radius: 8px; pointer-events: none;
    background: conic-gradient(from var(--log-entry-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: log-entry-rotate 5s linear infinite;
    z-index: -1;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
@property --log-entry-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes log-entry-rotate { to { --log-entry-angle: 360deg; } }
.log-entry:hover {
    box-shadow: 0 0 12px rgba(0,242,255,0.08);
}
.log-entry:hover::before {
    background: conic-gradient(from var(--log-entry-angle, 0deg), transparent 0%, transparent 60%, rgba(0,242,255,0.7) 75%, rgba(138,43,226,0.5) 85%, rgba(0,242,255,0.8) 92%, transparent 100%);
}

/* Error entries — red border */
.log-entry.log-level-error::before,
.log-entry.log-level-critical::before {
    background: conic-gradient(from var(--log-entry-angle, 0deg), transparent 0%, transparent 70%, rgba(255,75,110,0.6) 80%, rgba(255,149,0,0.4) 88%, rgba(255,75,110,0.7) 92%, transparent 100%);
}
.log-entry.log-level-error,
.log-entry.log-level-critical { background: rgba(255,75,110,0.02); }

/* Warning entries — amber border */
.log-entry.log-level-warning::before,
.log-entry.log-level-warn::before {
    background: conic-gradient(from var(--log-entry-angle, 0deg), transparent 0%, transparent 70%, rgba(255,179,71,0.6) 80%, rgba(255,107,107,0.4) 88%, rgba(255,179,71,0.7) 92%, transparent 100%);
}
.log-entry.log-level-warning,
.log-entry.log-level-warn { background: rgba(255,179,71,0.015); }

/* Info — brighter cyan */
.log-entry.log-level-info::before {
    background: conic-gradient(from var(--log-entry-angle, 0deg), transparent 0%, transparent 70%, rgba(127,217,255,0.5) 80%, rgba(0,242,255,0.4) 88%, rgba(127,217,255,0.6) 92%, transparent 100%);
}

/* Error/warning glow on hover */
.log-entry.log-level-error:hover,
.log-entry.log-level-critical:hover { box-shadow: 0 0 14px rgba(255,75,110,0.1); }
.log-entry.log-level-warning:hover,
.log-entry.log-level-warn:hover    { box-shadow: 0 0 14px rgba(255,179,71,0.1); }

/* Header row */
.log-entry-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.log-time {
    color: rgba(255,255,255,0.35);
    font-family: inherit;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.log-level-pill {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.log-level-pill-debug    { color: #7fd9ff; background: rgba(127,217,255,0.1); border-color: rgba(127,217,255,0.15); text-shadow: 0 0 4px rgba(127,217,255,0.3); }
.log-level-pill-info     { color: #00f2ff; background: rgba(0,242,255,0.1); border-color: rgba(0,242,255,0.2); text-shadow: 0 0 4px rgba(0,242,255,0.4); }
.log-level-pill-warning,
.log-level-pill-warn     { color: #ffb347; background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.2); text-shadow: 0 0 4px rgba(255,179,71,0.4); }
.log-level-pill-error,
.log-level-pill-critical { color: #ff4b6e; background: rgba(255,75,110,0.12); border-color: rgba(255,75,110,0.2); text-shadow: 0 0 4px rgba(255,75,110,0.4); }

/* Tags */
.log-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(255,255,255,0.05);
    color: #dff7ff;
    border: 1px solid rgba(255,255,255,0.08);
}
.log-tag-request  { color: #00f2ff; border-color: rgba(0,242,255,0.3); background: rgba(0,242,255,0.08); text-shadow: 0 0 4px rgba(0,242,255,0.3); }
.log-tag-response { color: #00ff7f; border-color: rgba(0,255,127,0.3); background: rgba(0,255,127,0.08); text-shadow: 0 0 4px rgba(0,255,127,0.3); }

.log-action {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-size: 0.8rem;
}

/* Summary row */
.log-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
}
.log-method {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.log-method-get    { background: rgba(0,242,255,0.12); color: #00f2ff; border-color: rgba(0,242,255,0.2); text-shadow: 0 0 4px rgba(0,242,255,0.3); }
.log-method-post   { background: rgba(0,255,127,0.12); color: #00ff7f; border-color: rgba(0,255,127,0.2); text-shadow: 0 0 4px rgba(0,255,127,0.3); }
.log-method-put    { background: rgba(255,179,71,0.12); color: #ffb347; border-color: rgba(255,179,71,0.2); text-shadow: 0 0 4px rgba(255,179,71,0.3); }
.log-method-delete { background: rgba(255,75,110,0.12); color: #ff4b6e; border-color: rgba(255,75,110,0.2); text-shadow: 0 0 4px rgba(255,75,110,0.3); }
.log-method-patch,
.log-method-head,
.log-method-options { background: rgba(255,255,255,0.08); color: #dff7ff; }

.log-url {
    color: rgba(255,255,255,0.65);
    font-size: 0.75rem;
    word-break: break-all;
}
.log-status {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 5px;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.log-status-ok     { background: rgba(0,255,127,0.12); color: #00ff7f; border-color: rgba(0,255,127,0.2); text-shadow: 0 0 4px rgba(0,255,127,0.3); }
.log-status-redir  { background: rgba(127,217,255,0.12); color: #7fd9ff; border-color: rgba(127,217,255,0.2); text-shadow: 0 0 4px rgba(127,217,255,0.3); }
.log-status-client { background: rgba(255,179,71,0.12); color: #ffb347; border-color: rgba(255,179,71,0.2); text-shadow: 0 0 4px rgba(255,179,71,0.3); }
.log-status-server { background: rgba(255,75,110,0.12); color: #ff4b6e; border-color: rgba(255,75,110,0.2); text-shadow: 0 0 4px rgba(255,75,110,0.3); }

/* Collapsible sections */
.log-section {
    margin: 6px 0 2px 8px;
    border-left: 1px solid rgba(0,242,255,0.1);
    padding-left: 12px;
}
.log-section > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    user-select: none;
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s;
}
.log-section > summary::-webkit-details-marker { display: none; }
.log-section > summary:hover { color: var(--neon-blue); text-shadow: 0 0 6px rgba(0,242,255,0.3); }
.log-caret {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
    width: 10px;
    text-align: center;
}
.log-section[open] .log-caret { transform: rotate(90deg); }
.log-section-label { font-weight: 700; }
.log-section-count {
    margin-left: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0,242,255,0.08);
    border: 1px solid rgba(0,242,255,0.15);
    color: var(--neon-blue);
    font-size: 0.6rem;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}

/* Key-value grid */
.log-kv {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 2px 14px;
    margin: 6px 0 8px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(0,242,255,0.05);
    border-radius: 8px;
}
.log-kv-row { display: contents; }
.log-kv-key {
    color: var(--neon-blue);
    font-size: 0.73rem;
    white-space: nowrap;
    padding: 3px 0;
    text-shadow: 0 0 4px rgba(0,242,255,0.2);
}
.log-kv-val {
    color: rgba(255,255,255,0.7);
    font-size: 0.73rem;
    word-break: break-word;
    padding: 3px 0;
}
.log-kv-val.is-truncated {
    color: rgba(255,255,255,0.45);
    font-style: italic;
    cursor: help;
    border-bottom: 1px dotted rgba(0,242,255,0.2);
}

.log-extra {
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.55);
    padding: 10px 12px;
    margin: 6px 0 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);
    font-size: 0.73rem;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 640px) {
    .log-kv { grid-template-columns: 1fr; }
    .log-kv-key { padding-bottom: 0; }
    .log-kv-val { padding-top: 0; margin-bottom: 4px; }
    .log-page-title-row { flex-direction: column; align-items: flex-start; }
    .log-stats-bar { flex-wrap: wrap; }
    .log-stat { min-width: 60px; }
}

/* ── Connection log entries ── */
.log-conn { border-left-color: rgba(0,242,255,0.2); }

.conn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.conn-type {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.68rem;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.conn-type-chunk    { background: rgba(0,255,127,0.1); color: #00ff7f; border-color: rgba(0,255,127,0.2); }
.conn-type-init     { background: rgba(127,217,255,0.1); color: #7fd9ff; border-color: rgba(127,217,255,0.2); }
.conn-type-manifest { background: rgba(0,242,255,0.1); color: #00f2ff; border-color: rgba(0,242,255,0.2); }
.conn-type-stats    { background: rgba(255,179,71,0.1); color: #ffb347; border-color: rgba(255,179,71,0.2); }
.conn-type-logs     { background: rgba(154,166,178,0.1); color: #9aa6b2; border-color: rgba(154,166,178,0.15); }
.conn-type-epg      { background: rgba(127,217,255,0.08); color: #7fd9ff; border-color: rgba(127,217,255,0.15); }
.conn-type-api      { background: rgba(255,255,255,0.05); color: #dff7ff; border-color: rgba(255,255,255,0.08); }

.conn-ccid {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--neon-blue);
    background: rgba(0,242,255,0.08);
    border: 1px solid rgba(0,242,255,0.25);
    padding: 1px 8px;
    border-radius: 5px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}

.conn-path {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conn-qs {
    margin: 4px 0 2px 32px;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
    word-break: break-all;
    line-height: 1.4;
    padding-left: 12px;
    border-left: 2px solid rgba(0,242,255,0.1);
}

.conn-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
    padding-left: 32px;
}
.conn-ip, .conn-client {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.3);
    display: inline-flex;
    align-items: center;
}
.conn-ip i, .conn-client i {
    width: 14px;
    text-align: center;
    opacity: 0.5;
}
#export-content { color: #00f2ff; font-weight: 500; text-shadow: 0 0 2px rgba(0, 242, 255, 0.2); }
pre { color: #d1d1d1; font-family: 'Courier New', monospace; font-size: 0.9rem; margin: 0; }

/* === DATABASE EXPORT === */
/* Export page header */
.export-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.export-page-header::before,
.export-page-header::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    pointer-events: none;
}
.export-page-header::before {
    background: conic-gradient(
        from var(--export-hdr-angle, 0deg),
        transparent 0%,
        transparent 70%,
        rgba(0,242,255,0.5) 80%,
        rgba(138,43,226,0.35) 88%,
        rgba(0,242,255,0.6) 92%,
        transparent 100%
    );
    animation: export-hdr-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.export-page-header::after {
    background: rgba(0,0,0,0.2);
    z-index: 0;
}
.export-page-header > * {
    position: relative;
    z-index: 1;
}
@property --export-hdr-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes export-hdr-rotate {
    to { --export-hdr-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .export-page-header::before { background: none; animation: none; }
    .export-page-header { border: 1px solid rgba(0,242,255,0.18); }
}
.export-page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.export-page-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.export-page-icon {
    font-size: 1.6rem;
    color: var(--neon-blue);
    text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: export-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes export-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
.export-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.export-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,242,255,0.06);
}
@media (min-width: 1100px) {
    .export-stats-grid { grid-template-columns: repeat(8, 1fr); }
}
.export-stat-card {
    text-align: center;
    padding: 10px 6px;
    background: rgba(0,242,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.25s ease;
}
.export-stat-card:hover {
    background: rgba(0,242,255,0.05);
    border-color: rgba(0,242,255,0.12);
    transform: translateY(-1px);
}
.export-stat-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
    display: block;
    line-height: 1.3;
}
.export-stat-lbl {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
    display: block;
}
.export-stat-card-warn .export-stat-val {
    color: #ffb347;
    text-shadow: 0 0 6px rgba(255,179,71,0.4);
}
.export-stat-card-archive {
    background: rgba(255,0,110,0.03);
    border-color: rgba(255,0,110,0.08);
}
.export-stat-card-archive:hover {
    background: rgba(255,0,110,0.06);
    border-color: rgba(255,0,110,0.18);
}
.export-stat-card-archive .export-stat-val {
    color: #ff79b8;
    text-shadow: 0 0 6px rgba(255,0,110,0.4);
}

/* ── Date filter bar ── */
.export-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,242,255,0.08);
    border-radius: 10px;
}
.export-filter-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.export-preset-chip {
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.export-preset-chip:hover {
    background: rgba(0,242,255,0.08);
    color: #fff;
    border-color: rgba(0,242,255,0.25);
}
.export-preset-chip.active {
    background: rgba(0,242,255,0.18);
    color: #fff;
    border-color: rgba(0,242,255,0.55);
    box-shadow: 0 0 10px rgba(0,242,255,0.25);
}
.export-filter-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.export-filter-label {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
}
.export-date-input {
    width: auto !important;
    min-width: 150px;
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    color-scheme: dark;
}
.export-filter-meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    margin-left: 8px;
}

/* ── Charts grid ── */
.export-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 18px 0;
}
@media (min-width: 900px) {
    .export-charts-grid { grid-template-columns: repeat(2, 1fr); }
    .export-chart-wide { grid-column: 1 / -1; }
}
.export-chart-card {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
}
.export-chart-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.export-chart-sub {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    margin-left: 8px;
    text-transform: none;
    letter-spacing: 0;
}
.export-chart-body {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.export-chart-empty {
    text-align: center;
    color: rgba(255,255,255,0.3);
    padding: 30px 10px;
    font-style: italic;
}

/* ── Daily activity SVG ── */
.export-svg {
    width: 100%;
    height: auto;
    max-height: 260px;
}
.export-grid-line {
    stroke: rgba(255,255,255,0.06);
    stroke-width: 1;
}
.export-axis-label {
    fill: rgba(255,255,255,0.4);
    font-size: 10px;
    font-family: 'Inter', sans-serif;
}
.export-bar-records {
    fill: #00f2ff;
    filter: drop-shadow(0 0 4px rgba(0,242,255,0.5));
    transition: opacity 0.2s ease;
}
.export-bar-channels {
    fill: #ff006e;
    filter: drop-shadow(0 0 4px rgba(255,0,110,0.5));
    transition: opacity 0.2s ease;
}
.export-day-group:hover .export-bar-records,
.export-day-group:hover .export-bar-channels {
    opacity: 0.75;
}
.export-chart-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 8px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
}
.export-legend-item { display: flex; align-items: center; gap: 6px; }
.export-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.export-legend-swatch.swatch-records { background: #00f2ff; box-shadow: 0 0 6px rgba(0,242,255,0.5); }
.export-legend-swatch.swatch-channels { background: #ff006e; box-shadow: 0 0 6px rgba(255,0,110,0.5); }

/* ── Top channels horizontal bar list ── */
.export-bar-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.export-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 130px) 1fr;
    gap: 10px;
    align-items: center;
}
.export-bar-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.export-bar-track {
    height: 16px;
    background: rgba(0,242,255,0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.export-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #00f2ff 0%, #ff006e 100%);
    box-shadow: 0 0 8px rgba(0,242,255,0.45);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.export-bar-value {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
    z-index: 1;
}

/* ── Donut chart ── */
.export-donut-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}
.export-donut-svg {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}
.export-donut-total {
    fill: #fff;
    font-size: 22px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}
.export-donut-total-lbl {
    fill: rgba(255,255,255,0.4);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}
.export-donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    /* Match the project-wide neon scrollbar style */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,242,255,0.2) transparent;
    padding-right: 4px;
}
.export-donut-legend::-webkit-scrollbar { width: 4px; }
.export-donut-legend::-webkit-scrollbar-track { background: transparent; }
.export-donut-legend::-webkit-scrollbar-thumb {
    background: rgba(0,242,255,0.2);
    border-radius: 4px;
}
.export-donut-legend::-webkit-scrollbar-thumb:hover {
    background: rgba(0,242,255,0.4);
}
.export-donut-legend-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 0.74rem;
    padding: 2px 0;
}
.export-donut-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.export-donut-label {
    color: rgba(255,255,255,0.65);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.export-donut-value {
    color: #fff;
    font-weight: 700;
}
.export-donut-pct {
    color: rgba(255,255,255,0.4);
    font-weight: 500;
    margin-left: 4px;
}

/* ── Downloads strip ── */
.export-downloads-card {
    padding: 18px 20px;
    margin-bottom: 20px;
    /* .glass-item is display:flex;align-items:center by default — without
       overriding, the title and grid would sit side-by-side as flex items
       on the same row.  Stack them vertically instead. */
    flex-direction: column;
    align-items: stretch;
}
.export-downloads-grid {
    width: 100%;
}
.export-downloads-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,242,255,0.08);
    display: flex;
    align-items: center;
}
.export-downloads-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.export-download-btn {
    flex: 1 1 180px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 10px;
    background: rgba(0,242,255,0.04);
    border: 1px solid rgba(0,242,255,0.12);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
}
.export-download-btn:hover {
    background: rgba(0,242,255,0.12);
    border-color: rgba(0,242,255,0.45);
    box-shadow: 0 0 14px rgba(0,242,255,0.25);
    transform: translateY(-2px);
}
.export-download-btn i {
    font-size: 1.3rem;
    color: #00f2ff;
    margin-bottom: 2px;
}
.export-download-label {
    font-size: 0.78rem;
    font-weight: 700;
}
.export-download-sub {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Section divider ── */
.export-section-divider {
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,242,255,0.1);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
}

.export-search-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(0,242,255,0.08) !important;
    animation: export-search-glow 3s ease-in-out infinite alternate;
}
@keyframes export-search-glow {
    0%   { border-color: rgba(0,242,255,0.06) !important; box-shadow: 0 0 6px rgba(0,242,255,0.02); }
    100% { border-color: rgba(0,242,255,0.18) !important; box-shadow: 0 0 14px rgba(0,242,255,0.06); }
}
.export-search-card .glass-input:focus {
    border-color: rgba(0,242,255,0.4) !important;
    box-shadow: 0 0 12px rgba(0,242,255,0.12) !important;
}
.export-empty {
    text-align: center;
    padding: 50px 20px;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

.export-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.export-card {
    background: var(--glass);
    border: 1px solid transparent;
    border-radius: 14px;
    overflow: visible;
    position: relative;
    transition: box-shadow 0.3s ease;
}
/* Rotating neon border on export cards */
.export-card::before,
.export-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    pointer-events: none;
}
.export-card::before {
    background: conic-gradient(
        from var(--export-border-angle, 0deg),
        transparent 0%, transparent 72%,
        rgba(0,242,255,0.35) 82%, rgba(138,43,226,0.25) 90%,
        rgba(0,242,255,0.4) 94%, transparent 100%
    );
    animation: export-border-rotate 8s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.export-card::after {
    background: var(--glass);
    z-index: 0;
}
.export-card > * { position: relative; z-index: 1; }
.export-card:hover {
    box-shadow: 0 4px 20px rgba(0,242,255,0.06);
}
.export-card:hover::before {
    background: conic-gradient(
        from var(--export-border-angle, 0deg),
        transparent 0%, transparent 65%,
        rgba(0,242,255,0.55) 78%, rgba(138,43,226,0.4) 88%,
        rgba(0,242,255,0.6) 94%, transparent 100%
    );
}
@property --export-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes export-border-rotate {
    to { --export-border-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .export-card::before { background: none; animation: none; }
    .export-card { border: 1px solid var(--glass-border); }
}

/* Card header: logo + name + expiry badge */
.export-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    flex-wrap: wrap;
}
.export-card-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(138,43,226,0.3);
    padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(138,43,226,0.12);
}
.export-card-titles { min-width: 0; flex: 1 1 auto; }
.export-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 0 6px rgba(0,242,255,0.15);
}
.export-card-ccid {
    font-size: 0.72rem;
    color: var(--neon-blue);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 3px;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.export-card-badges { flex-shrink: 0; margin-left: auto; }

/* Expiry badge — state-driven colours, icons, pulse effects */
.export-exp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 10px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: box-shadow 0.3s ease;
}
.export-exp-icon  { font-size: 1rem; flex-shrink: 0; align-self: center; }
.export-exp-text  { display: flex; flex-direction: column; min-width: 0; }
.export-exp-title {
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.export-exp-countdown {
    font-size: 0.68rem;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    margin-top: 2px;
    white-space: nowrap;
}

.export-exp-badge.exp-good {
    color: #00ff7f;
    background: rgba(0, 255, 127, 0.08);
    border-color: rgba(0, 255, 127, 0.35);
    box-shadow: 0 0 12px rgba(0, 255, 127, 0.15);
}
.export-exp-badge.exp-ok {
    color: #7fd9ff;
    background: rgba(127, 217, 255, 0.08);
    border-color: rgba(127, 217, 255, 0.3);
}
.export-exp-badge.exp-warning {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.1);
    border-color: rgba(255, 179, 71, 0.5);
    box-shadow: 0 0 14px rgba(255, 179, 71, 0.2);
    animation: exp-pulse-warn 2s ease-in-out infinite;
}
.export-exp-badge.exp-critical {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.55);
    box-shadow: 0 0 16px rgba(255, 107, 107, 0.3);
    animation: exp-pulse-crit 1.2s ease-in-out infinite;
}
.export-exp-badge.exp-expired {
    color: #ff4b6e;
    background: rgba(255, 75, 110, 0.12);
    border-color: rgba(255, 75, 110, 0.5);
    box-shadow: 0 0 18px rgba(255, 75, 110, 0.3);
    animation: exp-pulse-crit 1s ease-in-out infinite;
}
.export-exp-badge.exp-unknown {
    color: #6b7380;
    background: rgba(107, 115, 128, 0.08);
    border-color: rgba(107, 115, 128, 0.3);
}
.export-exp-badge.exp-archive {
    color: #ff79b8;
    background: rgba(255, 0, 110, 0.08);
    border-color: rgba(255, 0, 110, 0.3);
}

@keyframes exp-pulse-warn {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 179, 71, 0.15); }
    50%      { box-shadow: 0 0 22px rgba(255, 179, 71, 0.4); }
}
@keyframes exp-pulse-crit {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 107, 107, 0.2); }
    50%      { box-shadow: 0 0 26px rgba(255, 107, 107, 0.55); }
}

/* CDN label chip (used inside both the chip row and the URL section) */
.export-cdn-chip {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    color: var(--neon-blue);
    flex-shrink: 0;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
    box-shadow: 0 0 6px rgba(0,242,255,0.08);
}

/* Raw JSON modal viewer */
.raw-json-box {
    max-height: 70vh;
    margin: 0 16px 16px;
    border-radius: 12px;
    overflow-y: auto;
}
.raw-json-pre {
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 4px;
    margin: 0;
}

/* Stream URLs collapsible section (above keys) */
.export-urls-section {
    border-top: 1px solid rgba(0,242,255,0.05);
}
.export-urls-body {
    padding: 0 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.export-url-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}
.export-url-row:hover {
    background: rgba(0,242,255,0.02);
    border-color: rgba(0,242,255,0.1);
}
.export-url-val {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.65);
    word-break: break-all;
    line-height: 1.4;
    min-width: 0;
}

/* Collapsible keys section */
.export-keys-section {
    border-top: 1px solid rgba(0,242,255,0.05);
}
.export-keys-toggle {
    list-style: none;
    cursor: pointer;
    padding: 10px 18px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    user-select: none;
    transition: color 0.2s;
}
.export-keys-toggle::-webkit-details-marker { display: none; }
.export-keys-toggle:hover { color: var(--neon-blue); text-shadow: 0 0 6px rgba(0,242,255,0.3); }
.export-keys-caret {
    transition: transform 0.2s ease;
    width: 12px;
    text-align: center;
}
.export-keys-section[open] .export-keys-caret { transform: rotate(90deg); }
.export-keys-count {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0,242,255,0.08);
    border: 1px solid rgba(0,242,255,0.15);
    color: var(--neon-blue);
    font-size: 0.6rem;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.export-keys-body {
    padding: 0 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.export-key-row {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}
.export-key-row:hover {
    background: rgba(0,242,255,0.015);
    border-color: rgba(0,242,255,0.1);
    box-shadow: 0 0 8px rgba(0,242,255,0.03);
}
.export-key-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.export-codec {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 5px;
}
.export-tier {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid transparent;
}
.export-tier.tier-4k    { color: #ffc107; background: rgba(255,193,7,0.1); border-color: rgba(255,193,7,0.3); text-shadow: 0 0 4px rgba(255,193,7,0.3); box-shadow: 0 0 6px rgba(255,193,7,0.1); }
.export-tier.tier-1080  { color: #00ff7f; background: rgba(0,255,127,0.08); border-color: rgba(0,255,127,0.25); text-shadow: 0 0 4px rgba(0,255,127,0.3); box-shadow: 0 0 6px rgba(0,255,127,0.08); }
.export-tier.tier-720   { color: #00ff7f; background: rgba(0,255,127,0.06); border-color: rgba(0,255,127,0.2); text-shadow: 0 0 4px rgba(0,255,127,0.25); }
.export-tier.tier-sd    { color: var(--neon-blue); background: rgba(0,242,255,0.06); border-color: rgba(0,242,255,0.2); }
.export-tier.tier-audio { color: #a855f7; background: rgba(168,85,247,0.08); border-color: rgba(168,85,247,0.25); text-shadow: 0 0 4px rgba(168,85,247,0.3); box-shadow: 0 0 6px rgba(168,85,247,0.1); }

.export-key-val {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.72rem;
    word-break: break-all;
    line-height: 1.5;
}
.export-kid  { color: var(--neon-blue); text-shadow: 0 0 4px rgba(0,242,255,0.2); }
.export-key-sep { color: rgba(255,255,255,0.2); margin: 0 2px; }
.export-kval { color: rgba(255,255,255,0.7); }

.export-card-footer {
    padding: 10px 18px;
    border-top: 1px solid rgba(0,242,255,0.05);
    color: rgba(255,255,255,0.3);
    font-size: 0.72rem;
}

/* Raw JSON toggle at bottom */
.export-raw-section {}
.export-raw-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #7fd9ff;
    font-weight: 600;
}
.export-raw-toggle::-webkit-details-marker { display: none; }
.export-raw-toggle:hover { color: #00f2ff; }

@media (max-width: 540px) {
    .export-card-header { gap: 10px; }
    .export-card-badges { margin-left: 0; width: 100%; }
}

.pulse-bg { animation: glowPulse 3s infinite alternate; }
@keyframes glowPulse {
    0% { box-shadow: inset 0 0 10px rgba(0, 242, 255, 0.05); border-color: rgba(0, 242, 255, 0.3); }
    100% { box-shadow: inset 0 0 30px rgba(0, 242, 255, 0.2); border-color: rgba(0, 242, 255, 0.8); }
}

/* Flexible Modal Inputs */
.glass-modal { background: rgba(12, 13, 18, 0.98); border: 1px solid var(--glass-border); border-radius: 20px; color: white; }

/* === LOGIN PAGE === */
.login-wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    z-index: 1000;
    padding: 20px;
}
.login-card {
    max-width: 420px;
    width: 100%;
    position: relative;
    border-radius: 20px;
    padding: 2px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.6), 0 0 80px rgba(0,242,255,0.06);
}
/* Dual spinning neon border — blue CW + orange CCW */
.login-card::before {
    content: ''; position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 75%, var(--neon-blue) 100%);
    animation: login-spin-cw 4s linear infinite;
    z-index: 0;
}
.login-card::after {
    content: ''; position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 180deg, transparent 75%, #ff9900 100%);
    animation: login-spin-ccw 4s linear infinite;
    z-index: 0;
}
@keyframes login-spin-cw { to { transform: rotate(360deg); } }
@keyframes login-spin-ccw { to { transform: rotate(-360deg); } }

.login-card-inner {
    position: relative;
    z-index: 1;
    background: rgba(10, 12, 18, 0.97);
    border-radius: 18px;
    padding: 36px 32px;
    text-align: center;
    backdrop-filter: blur(20px);
}
.login-logo-wrap {
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 4px 8px;
}
.login-logo {
    height: 44px;
    width: auto;
    position: relative;
    filter: brightness(1.1);
    animation:
        login-logo-glow 3s ease-in-out infinite,
        login-logo-shadow 3s ease-in-out infinite,
        login-logo-glitch 8s step-end infinite;
}
.login-logo:hover {
    filter: brightness(1.4) drop-shadow(0 0 14px rgba(0,242,255,0.7));
    animation-play-state: paused, paused, paused;
}

/* Neon glow pulse */
@keyframes login-logo-glow {
    0%, 100% {
        filter: brightness(1.05) drop-shadow(0 0 4px rgba(0,242,255,0.25));
    }
    50% {
        filter: brightness(1.25) drop-shadow(0 0 12px rgba(0,242,255,0.55)) drop-shadow(0 0 22px rgba(0,242,255,0.18));
    }
}

/* Drop shadow breathing — expands and contracts */
@keyframes login-logo-shadow {
    0%, 100% {
        -webkit-filter: drop-shadow(0 0 3px rgba(0,242,255,0.18));
    }
    50% {
        -webkit-filter: drop-shadow(0 0 14px rgba(0,242,255,0.45)) drop-shadow(0 4px 28px rgba(138,43,226,0.2));
    }
}

/* Glitch effect — occasional subtle RGB split */
@keyframes login-logo-glitch {
    0%, 92%, 94%, 96%, 98%, 100% {
        transform: translate(0, 0);
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(0,242,255,0.35));
    }
    92.5% {
        transform: translate(-2px, 0);
        filter: brightness(1.3) drop-shadow(2px 0 0 rgba(0,242,255,0.65)) drop-shadow(-2px 0 0 rgba(138,43,226,0.65));
    }
    93% {
        transform: translate(2px, 1px);
        filter: brightness(1.4) drop-shadow(-2px 0 0 rgba(255,71,87,0.45)) drop-shadow(2px 0 0 rgba(0,242,255,0.55));
    }
    93.5% {
        transform: translate(0, -1px);
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(0,242,255,0.35));
    }
    95% {
        transform: translate(1px, 0);
        filter: brightness(1.5) drop-shadow(-1px 0 0 rgba(0,242,255,0.75)) drop-shadow(1px 0 0 rgba(138,43,226,0.55));
    }
    95.5% {
        transform: translate(-1px, 1px);
        filter: brightness(0.9) drop-shadow(1px 0 0 rgba(255,71,87,0.35));
    }
    97% {
        transform: translate(0, 0);
        filter: brightness(1.6) drop-shadow(0 0 8px rgba(0,242,255,0.85));
    }
    97.5% {
        transform: translate(0, 0);
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(0,242,255,0.35));
    }
}

/* Holographic shimmer — diagonal light sweep across the logo */
.login-logo-wrap::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(0,242,255,0.10) 40%,
        rgba(255,255,255,0.18) 50%,
        rgba(138,43,226,0.10) 60%,
        transparent 65%,
        transparent 100%
    );
    animation: login-logo-shimmer 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes login-logo-shimmer {
    0%, 70%, 100% { left: -100%; opacity: 0; }
    75% { opacity: 1; }
    90% { left: 200%; opacity: 1; }
    95% { opacity: 0; }
}
.login-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,242,255,0.4), rgba(138,43,226,0.3), transparent);
    margin-bottom: 20px;
    animation: login-divider-glow 3s ease-in-out infinite;
}
@keyframes login-divider-glow {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
.login-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.login-subtitle {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 24px;
}
.login-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0,242,255,0.6);
    margin-bottom: 4px;
    display: block;
}
.login-input {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(0,242,255,0.12) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input:focus {
    border-color: rgba(0,242,255,0.4) !important;
    box-shadow: 0 0 12px rgba(0,242,255,0.1) !important;
    outline: none;
}
.login-input::placeholder { color: rgba(255,255,255,0.2); }
.login-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0,242,255,0.5);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,242,255,0.1), rgba(138,43,226,0.1));
    color: #00f2ff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.login-btn:hover {
    background: linear-gradient(135deg, rgba(0,242,255,0.2), rgba(138,43,226,0.2));
    box-shadow: 0 0 20px rgba(0,242,255,0.2), 0 0 40px rgba(138,43,226,0.1);
    transform: translateY(-1px);
}
.login-btn:active {
    transform: translateY(0);
    box-shadow: 0 0 10px rgba(0,242,255,0.15);
}
.login-error {
    display: none;
    margin-top: 14px;
    padding: 8px 12px;
    background: rgba(255,75,110,0.08);
    border: 1px solid rgba(255,75,110,0.3);
    border-radius: 8px;
    color: #ff4b6e;
    font-size: 0.78rem;
    font-weight: 600;
}
@media (max-width: 480px) {
    .login-card-inner { padding: 28px 20px; }
    .login-title { font-size: 1.1rem; }
    .login-logo { height: 28px; }
}
.glass-input { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; font-family: monospace; }
.key-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-border); border-radius: 10px; }
.custom-badge { background: rgba(0, 242, 255, 0.1); border: 1px solid var(--neon-blue); color: var(--neon-blue); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem;}

.btn-glass-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 8px;
    padding: 6px 16px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-glass-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Schedule EPG — now playing + up next in each channel row */
.epg-info {
    margin-top: 6px;
}

/* Now-playing row */
.sched-epg-now { margin-bottom: 4px; }

.sched-epg-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sched-epg-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff2a2a;
    box-shadow: 0 0 8px #ff2a2a;
    animation: sched-epg-blink 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.sched-epg-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ff4b6e;
    background: rgba(255, 75, 110, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.sched-epg-label-next {
    color: #7fd9ff;
    background: rgba(127, 217, 255, 0.1);
}

.sched-epg-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sched-epg-time {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.sched-epg-remaining {
    font-size: 0.62rem;
    font-weight: 700;
    color: #ffb347;
    background: rgba(255, 179, 71, 0.1);
    border: 1px solid rgba(255, 179, 71, 0.3);
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* "View All" button inline with the schedule row */
.sched-epg-viewall {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neon-blue);
    background: rgba(0, 242, 255, 0.08);
    border: 1px solid rgba(0, 242, 255, 0.3);
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
}
.sched-epg-viewall:hover {
    background: rgba(0, 242, 255, 0.2);
    border-color: rgba(0, 242, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

/* Up-next section */
.sched-epg-next {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.sched-epg-next .sched-epg-title { color: #b0c7d4; }


@keyframes sched-epg-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* Keep the old .live-dot for events page / epg page hero card */
.live-dot {
    height: 8px; width: 8px; background-color: #ff2a2a; border-radius: 50%;
    display: inline-block; margin-right: 6px; box-shadow: 0 0 8px #ff2a2a;
    animation: sched-epg-blink 1.5s ease-in-out infinite; flex-shrink: 0;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; } 
}

.status-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 242, 255, 0.1);
    border: 1px solid rgba(0, 242, 255, 0.3);
    color: var(--neon-blue);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 8px;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.1);
}

.status-dot {
    height: 6px;
    width: 6px;
    background-color: var(--neon-blue);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 8px var(--neon-blue);
    animation: blink 2s infinite;
}

.section-subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 800;
    display: flex;
    align-items: center;
}

.section-subtitle i {
    color: var(--neon-purple);
    margin-right: 8px;
    font-size: 1rem;
}

/* Navbar Colored Glass Buttons */
.btn-nav-glass {
    border-radius: 8px;
    color: white !important;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: center;
    white-space: nowrap; 
}

.btn-nav-glass:hover { transform: translateY(-2px); }

.nav-neon-green { background: rgba(0, 255, 127, 0.1); border: 1px solid rgba(0, 255, 127, 0.4) !important; }
.nav-neon-green:hover { background: rgba(0, 255, 127, 0.2); border-color: #00ff7f !important; box-shadow: 0 0 10px rgba(0, 255, 127, 0.4); text-shadow: 0 0 5px rgba(0, 255, 127, 0.8); }

.nav-neon-orange { background: rgba(255, 153, 0, 0.1); border: 1px solid rgba(255, 153, 0, 0.4) !important; }
.nav-neon-orange:hover { background: rgba(255, 153, 0, 0.2); border-color: #ff9900 !important; box-shadow: 0 0 10px rgba(255, 153, 0, 0.4); text-shadow: 0 0 5px rgba(255, 153, 0, 0.8); }

.nav-neon-pink { background: rgba(255, 0, 255, 0.1); border: 1px solid rgba(255, 0, 255, 0.4) !important; }
.nav-neon-pink:hover { background: rgba(255, 0, 255, 0.2); border-color: #ff00ff !important; box-shadow: 0 0 10px rgba(255, 0, 255, 0.4); text-shadow: 0 0 5px rgba(255, 0, 255, 0.8); }

.nav-neon-yellow { background: rgba(255, 204, 0, 0.1); border: 1px solid rgba(255, 204, 0, 0.4) !important; }
.nav-neon-yellow:hover { background: rgba(255, 204, 0, 0.2); border-color: #ffcc00 !important; box-shadow: 0 0 10px rgba(255, 204, 0, 0.4); text-shadow: 0 0 5px rgba(255, 204, 0, 0.8); }

.nav-neon-blue { background: rgba(0, 242, 255, 0.1); border: 1px solid rgba(0, 242, 255, 0.4) !important; }
.nav-neon-blue:hover { background: rgba(0, 242, 255, 0.2); border-color: #00f2ff !important; box-shadow: 0 0 10px rgba(0, 242, 255, 0.4); text-shadow: 0 0 5px rgba(0, 242, 255, 0.8); }

.nav-neon-purple { background: rgba(138, 43, 226, 0.15); border: 1px solid rgba(138, 43, 226, 0.4) !important; }
.nav-neon-purple:hover { background: rgba(138, 43, 226, 0.25); border-color: #8a2be2 !important; box-shadow: 0 0 10px rgba(138, 43, 226, 0.4); text-shadow: 0 0 5px rgba(138, 43, 226, 0.8); }

.nav-neon-cyan { background: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.4) !important; }
.nav-neon-cyan:hover { background: rgba(0, 255, 255, 0.2); border-color: #00ffff !important; box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); text-shadow: 0 0 5px rgba(0, 255, 255, 0.8); }

/* Events Section Styles */
.category-header { 
    margin-top: 30px; border-bottom: 2px solid var(--glass-border); padding-bottom: 10px; 
    margin-bottom: 20px; font-size: 1.5rem; color: #fff; font-weight: 800; 
    text-transform: uppercase; letter-spacing: 2px; 
}
.category-header .highlight { color: var(--neon-blue); text-shadow: 0 0 8px var(--neon-blue); }

/* Events page header */
.events-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.events-page-header::before, .events-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.events-page-header::before {
    background: conic-gradient(from var(--evt-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: evt-hdr-rotate 6s linear infinite; z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.events-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.events-page-header > * { position: relative; z-index: 1; }
@property --evt-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes evt-hdr-rotate { to { --evt-hdr-angle: 360deg; } }
.events-page-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.events-page-title { display: flex; align-items: center; gap: 14px; }
.events-page-icon {
    font-size: 1.6rem; color: var(--neon-blue); text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: evt-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes evt-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
.events-toolbar { display: flex; align-items: center; gap: 8px; }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .events-page-header::before { background: none; animation: none; }
    .events-page-header { border: 1px solid rgba(0,242,255,0.15); }
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

.event-card {
    background: var(--glass);
    border: 1px solid transparent;
    border-radius: 14px;
    overflow: visible;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.event-card::before,
.event-card::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.event-card::before {
    background: conic-gradient(from var(--evt-card-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.4) 80%, rgba(138,43,226,0.25) 88%, rgba(0,242,255,0.5) 92%, transparent 100%);
    animation: evt-card-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.event-card::after { background: var(--glass); border-radius: 14px; z-index: 0; }
.event-card > * { position: relative; z-index: 1; }
@property --evt-card-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes evt-card-rotate { to { --evt-card-angle: 360deg; } }
.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(0,242,255,0.12);
}
.event-card:hover::before {
    background: conic-gradient(from var(--evt-card-angle, 0deg), transparent 0%, transparent 60%, rgba(0,242,255,0.6) 75%, rgba(138,43,226,0.4) 85%, rgba(0,242,255,0.7) 92%, transparent 100%);
}

.event-poster-container {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #07080b;
    position: relative;
    border-radius: 14px 14px 0 0;
}
.event-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.event-card:hover .event-poster { transform: scale(1.05); }

.event-info {
    padding: 14px 16px 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-info-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.event-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 0 6px rgba(0,242,255,0.1);
    /* Clamp long titles to two lines so every card in a row has the same
       footer baseline. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-time {
    font-size: 0.82rem;
    color: #aaa;
    display: flex;
    align-items: center;
    margin: 0;
}
.event-time i { width: 14px; text-align: center; }

.event-actions {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(0,242,255,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.event-ccid {
    font-size: 0.72rem;
    background: rgba(0,242,255,0.06);
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--neon-blue);
    border: 1px solid rgba(0,242,255,0.3);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: default;
    transition: all 0.25s ease;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
    box-shadow: 0 0 6px rgba(0,242,255,0.06);
}
.event-ccid:hover {
    background: rgba(0,242,255,0.15);
    border-color: rgba(0,242,255,0.6);
    box-shadow: 0 0 12px rgba(0,242,255,0.2);
}

.event-action-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Reusable green play-button modifier so the main list and the events grid
   share the exact same visual. */
.btn-icon-play {
    color: #00ff7f !important;
    border-color: #00ff7f !important;
}
.btn-icon-play:hover {
    background: rgba(0, 255, 127, 0.15) !important;
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.45) !important;
}

/* === EPG PAGE === */

/* URL card — title/subtitle stacked on top, full-width input + copy button below.
   Override .glass-item's default `display: flex; align-items: center` so the
   title block stacks above the input row instead of sitting beside it. */
.epg-url-card {
    padding: 18px 20px 20px;
    width: 100%;
    display: block;
    align-items: initial;
    border: 1px solid rgba(0,242,255,0.08) !important;
    animation: epg-url-glow 3s ease-in-out infinite alternate;
}
@keyframes epg-url-glow {
    0%   { border-color: rgba(0,242,255,0.06) !important; box-shadow: 0 0 6px rgba(0,242,255,0.02); }
    100% { border-color: rgba(0,242,255,0.18) !important; box-shadow: 0 0 14px rgba(0,242,255,0.06); }
}
.epg-url-titles {
    margin-bottom: 14px;
}
.epg-url-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-shadow: 0 0 6px rgba(0,242,255,0.15);
    display: flex;
    align-items: center;
}
.epg-url-subtitle {
    font-size: 0.8rem;
    color: #9aa6b2;
    margin-top: 6px;
    line-height: 1.4;
}
.epg-url-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    width: 100%;
}
.epg-url-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    font-family: 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    font-size: 0.82rem;
    height: 46px;
    padding: 0 14px;
    color: #dff7ff !important;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(0, 242, 255, 0.3);
}
.epg-url-input:focus {
    border-color: rgba(0, 242, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 242, 255, 0.1);
}
.epg-url-copy {
    flex-shrink: 0;
    height: 46px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-weight: 600;
}
@media (max-width: 540px) {
    .epg-url-row { flex-direction: column; }
    .epg-url-copy { width: 100%; }
}

/* Selected-channel header (logo + name + stats chips) */
.epg-selected-channel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 20px 0 18px;
    background: rgba(0,242,255,0.03);
    border: 1px solid rgba(0,242,255,0.12);
    border-radius: 12px;
    flex-wrap: wrap;
    animation: epg-selected-glow 3s ease-in-out infinite alternate;
}
@keyframes epg-selected-glow {
    0%   { border-color: rgba(0,242,255,0.08); box-shadow: 0 0 8px rgba(0,242,255,0.03); }
    100% { border-color: rgba(0,242,255,0.25); box-shadow: 0 0 18px rgba(0,242,255,0.07); }
}
.epg-selected-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(138,43,226,0.3);
    padding: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(138,43,226,0.15);
    animation: epg-logo-bob 2.8s ease-in-out infinite;
    will-change: transform;
}
@keyframes epg-logo-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.epg-selected-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.epg-selected-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 0 6px rgba(0,242,255,0.15);
}
.epg-selected-ccid {
    font-size: 0.72rem;
    color: var(--neon-blue);
    margin-top: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.epg-selected-channel .epg-channel-stats {
    margin-left: auto;
}
@media (max-width: 640px) {
    .epg-selected-channel .epg-channel-stats { margin-left: 0; width: 100%; }
}

/* EPG page header */
.epg-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.epg-page-header::before,
.epg-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.epg-page-header::before {
    background: conic-gradient(from var(--epg-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: epg-hdr-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.epg-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.epg-page-header > * { position: relative; z-index: 1; }
@property --epg-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes epg-hdr-rotate { to { --epg-hdr-angle: 360deg; } }
.epg-page-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.epg-page-title { display: flex; align-items: center; gap: 14px; }
.epg-page-icon {
    font-size: 1.6rem; color: var(--neon-blue); text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: epg-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes epg-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}

.epg-stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.epg-stat {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,242,255,0.06);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.25s ease;
    animation: epg-stat-glow 4s ease-in-out infinite alternate;
}
.epg-stat:hover {
    border-color: rgba(0,242,255,0.2);
    box-shadow: 0 0 16px rgba(0,242,255,0.06), inset 0 0 15px rgba(0,242,255,0.015);
}
@keyframes epg-stat-glow {
    0%   { border-color: rgba(0,242,255,0.04); box-shadow: 0 0 4px rgba(0,242,255,0.02); }
    100% { border-color: rgba(0,242,255,0.12); box-shadow: 0 0 10px rgba(0,242,255,0.04); }
}
.epg-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neon-blue);
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.epg-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px rgba(0,242,255,0.15);
}
.epg-stat-good { color: #00ff7f; text-shadow: 0 0 6px rgba(0,255,127,0.4); }
.epg-stat-warn { color: #ffb347; text-shadow: 0 0 6px rgba(255,179,71,0.4); }
.epg-stat-bad  { color: #ff4b6e; text-shadow: 0 0 6px rgba(255,75,110,0.4); }

/* Guide browser card — generous padding and clear vertical rhythm.
   Override .glass-item's default `display: flex; align-items: center` so the
   intro / picker / selected-channel / guide blocks stack vertically instead of
   sitting on a single horizontal row. */
.epg-browser {
    padding: 22px 24px 24px;
    display: block;
    align-items: initial;
    border: 1px solid transparent !important;
    position: relative;
    overflow: visible;
}
.epg-browser::before,
.epg-browser::after {
    content: ''; position: absolute; inset: -1px; border-radius: 15px; pointer-events: none;
}
.epg-browser::before {
    background: conic-gradient(from var(--epg-browser-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.4) 80%, rgba(138,43,226,0.3) 88%, rgba(0,242,255,0.5) 92%, transparent 100%);
    animation: epg-browser-rotate 7s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.epg-browser::after { background: var(--glass); z-index: 0; border-radius: 15px; }
.epg-browser > * {
    width: 100%;
    position: relative;
    z-index: 1;
}
@property --epg-browser-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes epg-browser-rotate { to { --epg-browser-angle: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .epg-browser::before { background: none; animation: none; }
    .epg-browser { border: 1px solid var(--glass-border) !important; }
}

/* Intro block: title + description, its own line, real breathing room below. */
.epg-browser-intro {
    margin-bottom: 20px;
}
.epg-browser-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    text-shadow: 0 0 6px rgba(0,242,255,0.15);
}
.epg-browser-subtitle {
    font-size: 0.82rem;
    color: #9aa6b2;
    margin-top: 6px;
    line-height: 1.45;
    max-width: 560px;
}

/* Two-column labeled field grid — filter on the left, select on the right.
   Stacks on narrower viewports so nothing squeezes. */
.epg-picker-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr);
    gap: 14px 18px;
    margin-bottom: 6px;
}
.epg-picker-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.epg-field-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon-blue);
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.epg-field-control {
    height: 44px;
    padding: 0 14px;
    width: 100%;
    font-size: 0.88rem;
}
select.epg-field-control {
    /* Native select rendering keeps the caret; just make sure padding/size
       match the text input next to it. */
    padding-right: 34px;
    cursor: pointer;
}
.epg-field-control:focus {
    border-color: rgba(0,242,255,0.5) !important;
    box-shadow: 0 0 12px rgba(0,242,255,0.12);
    outline: none;
}

@media (max-width: 720px) {
    .epg-picker-grid { grid-template-columns: 1fr; }
}

.epg-channel-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.epg-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--neon-blue);
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
    box-shadow: 0 0 6px rgba(0,242,255,0.06);
}
.epg-chip-warn {
    color: #ffb347;
    background: rgba(255,179,71,0.08);
    border-color: rgba(255,179,71,0.3);
    text-shadow: 0 0 4px rgba(255,179,71,0.3);
    box-shadow: 0 0 6px rgba(255,179,71,0.08);
}

/* Guide body */
.epg-guide {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.epg-empty {
    text-align: center;
    padding: 50px 20px;
    color: #8a96a3;
}
.epg-empty i { display: block; }

/* Hero "now playing" card */
.epg-now {
    background: linear-gradient(135deg, rgba(0,242,255,0.06), rgba(0,255,127,0.03));
    border: 1px solid rgba(0,242,255,0.25);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 0 20px rgba(0,242,255,0.08);
    animation: epg-now-glow 3s ease-in-out infinite alternate;
}
@keyframes epg-now-glow {
    0%   { border-color: rgba(0,242,255,0.2); box-shadow: 0 0 14px rgba(0,242,255,0.06); }
    100% { border-color: rgba(0,242,255,0.4); box-shadow: 0 0 28px rgba(0,242,255,0.12); }
}
.epg-now-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.epg-now-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 30, 60, 0.9);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px rgba(255, 30, 60, 0.45);
}
/* Reuse .live-dot already defined under .event-live-badge — shared blink. */
.epg-now-time {
    font-size: 0.82rem;
    color: var(--neon-blue);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.epg-now-remaining {
    margin-left: auto;
    font-size: 0.72rem;
    color: #ffb347;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255,179,71,0.08);
    border: 1px solid rgba(255,179,71,0.3);
    text-shadow: 0 0 4px rgba(255,179,71,0.3);
    box-shadow: 0 0 6px rgba(255,179,71,0.08);
}
.epg-now-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(0,242,255,0.15);
}
.epg-now-desc {
    font-size: 0.88rem;
    color: #c5d5e0;
    line-height: 1.4;
    margin-bottom: 10px;
}
.epg-now-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.epg-now-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue, #00f2ff), #00ff7f);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
    transition: width 0.3s ease;
}

/* Scrollable day-grouped timeline */
.epg-timeline {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.epg-day-group { display: flex; flex-direction: column; }
.epg-day-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(7,8,11,0.95);
    backdrop-filter: blur(6px);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon-blue);
    padding: 8px 6px;
    border-bottom: 1px solid rgba(0,242,255,0.15);
    margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
}
.epg-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 14px;
    padding: 10px 12px 10px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.02);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}
.epg-row + .epg-row { margin-top: 4px; }
.epg-row:hover { background: rgba(0,242,255,0.03); border-color: rgba(0,242,255,0.08); border-left-color: rgba(0,242,255,0.4); }

.epg-row-past {
    opacity: 0.4;
    border-left-color: rgba(255,255,255,0.06);
}
.epg-row-now {
    background: rgba(0,242,255,0.05);
    border: 1px solid rgba(0,242,255,0.15);
    border-left: 3px solid var(--neon-blue);
    box-shadow: 0 0 12px rgba(0,242,255,0.05), inset 0 0 15px rgba(0,242,255,0.02);
}
.epg-row-now:hover {
    border-color: rgba(0,242,255,0.25);
    box-shadow: 0 0 18px rgba(0,242,255,0.08);
}
.epg-row-upcoming {
    border-left-color: rgba(0,242,255,0.15);
}

.epg-row-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.epg-row-start {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}
.epg-row-dur {
    font-size: 0.7rem;
    color: var(--neon-blue);
    margin-top: 2px;
    text-shadow: 0 0 4px rgba(0,242,255,0.25);
}
.epg-row-body { min-width: 0; }
.epg-row-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.epg-row-desc {
    font-size: 0.78rem;
    color: #9aa6b2;
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.epg-row-now .epg-row-title { color: var(--neon-blue); text-shadow: 0 0 6px rgba(0,242,255,0.3); }

@media (max-width: 640px) {
    .epg-row { grid-template-columns: 58px 1fr; gap: 10px; }
    .epg-row-start { font-size: 0.85rem; }
    .epg-now-title { font-size: 1.05rem; }
}

/* === ACTIVE STREAM INDICATOR === */
.live-stream-icon {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7rem;
    vertical-align: middle;
}
.live-stream-on {
    color: #00f2ff;
    opacity: 0.85;
}
.live-stream-off {
    color: #ff4444;
    opacity: 0.5;
}
.stream-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 8px;
}
.stream-online {
    background: #00ff7f;
    box-shadow: 0 0 8px #00ff7f, 0 0 16px rgba(0, 255, 127, 0.3);
    animation: stream-pulse-on 2s ease-in-out infinite;
}
.stream-offline {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}
@keyframes stream-pulse-on {
    0%, 100% { box-shadow: 0 0 6px #00ff7f, 0 0 12px rgba(0, 255, 127, 0.2); }
    50%      { box-shadow: 0 0 12px #00ff7f, 0 0 24px rgba(0, 255, 127, 0.4); }
}

/* Stream viewers modal content */
.stream-viewers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stream-viewer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0, 255, 127, 0.04);
    border: 1px solid rgba(0, 255, 127, 0.15);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}
.stream-viewer-card:hover {
    border-color: rgba(0, 255, 127, 0.4);
}
.stream-viewer-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 255, 127, 0.1);
    border: 1px solid rgba(0, 255, 127, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00ff7f;
    font-size: 0.85rem;
}
.stream-viewer-info {
    flex: 1;
    min-width: 0;
}
.stream-viewer-ip {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    font-family: monospace;
}
.stream-viewer-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}
.stream-viewer-type {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.stream-type-m3u8 {
    color: var(--neon-blue);
    background: rgba(0, 242, 255, 0.1);
    border: 1px solid rgba(0, 242, 255, 0.3);
}
.stream-type-ts {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.1);
    border: 1px solid rgba(255, 179, 71, 0.3);
}
.stream-type-hls {
    color: #b388ff;
    background: rgba(179, 136, 255, 0.1);
    border: 1px solid rgba(179, 136, 255, 0.3);
}
.stream-no-viewers {
    text-align: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

/* === TASK PROGRESS UI === */
.progress-bar-outer {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-blue), #00ff7f);
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
    transition: width 0.5s ease;
}
.progress-bar-done {
    background: linear-gradient(90deg, #00ff7f, #00ff7f);
    box-shadow: 0 0 8px rgba(0, 255, 127, 0.4);
}
.progress-bar-retry {
    background: linear-gradient(90deg, #ffb347, #ffa500);
    box-shadow: 0 0 8px rgba(255, 179, 71, 0.4);
}
.task-stat {
    text-align: center;
    min-width: 60px;
}
.task-stat-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.task-stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
}
.task-step {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.task-step-active {
    background: rgba(0, 242, 255, 0.06);
    border: 1px solid rgba(0, 242, 255, 0.2);
    color: var(--neon-blue);
}
.task-step-done {
    background: rgba(0, 255, 127, 0.06);
    border: 1px solid rgba(0, 255, 127, 0.2);
    color: #00ff7f;
}
.task-step-fail {
    background: rgba(255, 107, 107, 0.06);
    border: 1px solid rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

/* Task live log feed */
.task-log-feed {
    max-height: 400px;
    overflow-y: auto;
    background: var(--terminal-bg);
    border: 1px solid rgba(0, 242, 255, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.72rem;
    line-height: 1.5;
}
.task-log-feed::-webkit-scrollbar { width: 4px; }
.task-log-feed::-webkit-scrollbar-thumb { background: rgba(0, 242, 255, 0.2); border-radius: 4px; }
.task-log-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-line-info { color: rgba(255, 255, 255, 0.5); }
.log-line-ok { color: #00ff7f; }
.log-line-warn { color: #ffb347; }
.log-line-err { color: #ff6b6b; }

/* === WIDEVINE STATUS === */

/* Page header */
.wv-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
    position: relative;
}
/* Rotating neon border on header */
.wv-page-header::before,
.wv-page-header::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    pointer-events: none;
}
.wv-page-header::before {
    background: conic-gradient(
        from var(--wv-hdr-angle, 0deg),
        transparent 0%, transparent 70%,
        rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%,
        rgba(0,242,255,0.6) 92%, transparent 100%
    );
    animation: wv-hdr-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.wv-page-header::after {
    background: rgba(0,0,0,0.2);
    z-index: 0;
}
.wv-page-header > * {
    position: relative;
    z-index: 1;
}
@property --wv-hdr-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes wv-hdr-rotate {
    to { --wv-hdr-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .wv-page-header::before { background: none; animation: none; }
    .wv-page-header { border: 1px solid rgba(0,242,255,0.15); animation: wv-header-glow-fb 3s ease-in-out infinite alternate; }
    @keyframes wv-header-glow-fb {
        0%   { border-color: rgba(0,242,255,0.06); box-shadow: 0 0 8px rgba(0,242,255,0.03); }
        100% { border-color: rgba(0,242,255,0.18); box-shadow: 0 0 16px rgba(0,242,255,0.06); }
    }
}
.wv-page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.wv-page-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wv-page-icon {
    font-size: 1.6rem;
    color: var(--neon-blue);
    text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: wv-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes wv-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
.wv-page-info {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(0,242,255,0.02);
    border: 1px solid rgba(0,242,255,0.06);
    border-radius: 8px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}
.wv-page-info code {
    color: var(--neon-blue);
    background: rgba(0,242,255,0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
}
.wv-info-revoked {
    color: #ff6b6b;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255,107,107,0.3);
}

/* Stats row */
.wv-page-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,242,255,0.06);
}
.wv-stat-card {
    text-align: center;
    padding: 10px 6px;
    background: rgba(0,242,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.25s ease;
}
.wv-stat-card:hover {
    background: rgba(0,242,255,0.05);
    border-color: rgba(0,242,255,0.12);
}
.wv-stat-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
    display: block;
    line-height: 1.3;
}
.wv-stat-lbl {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
    display: block;
}
.wv-stat-ok .wv-stat-val { color: #00ff7f; text-shadow: 0 0 6px rgba(0,255,127,0.4); }
.wv-stat-danger .wv-stat-val { color: #ff6b6b; text-shadow: 0 0 6px rgba(255,107,107,0.4); }
.wv-stat-keys .wv-stat-val { color: var(--neon-blue); text-shadow: 0 0 6px rgba(0,242,255,0.4); }

/* Level sections */
.wv-level-section { margin-bottom: 20px; }
.wv-level-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px 12px 0 0;
    font-weight: 700;
    font-size: 0.9rem;
}
.wv-header-ok .wv-level-header {
    background: rgba(0,255,127,0.06);
    border: 1px solid rgba(0,255,127,0.2);
    color: #00ff7f;
    text-shadow: 0 0 6px rgba(0,255,127,0.3);
}
.wv-header-revoked .wv-level-header {
    background: rgba(255,107,107,0.06);
    border: 1px solid rgba(255,107,107,0.2);
    color: #ff6b6b;
    text-shadow: 0 0 6px rgba(255,107,107,0.3);
}
.wv-level-title { font-size: 1.15rem; }
.wv-level-status { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.wv-no-devices {
    padding: 30px;
    text-align: center;
    color: rgba(255,255,255,0.25);
    border: 1px solid rgba(0,242,255,0.06);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--glass);
    font-size: 0.82rem;
}

/* Device cards — rotating neon border colored by status */
.wv-device-card {
    border: 1px solid transparent;
    border-top: none;
    padding: 16px 18px;
    background: var(--glass);
    transition: box-shadow 0.25s ease;
    position: relative;
}
.wv-device-card:last-child { border-radius: 0 0 12px 12px; }
.wv-device-card > * { position: relative; z-index: 1; }

/* Rotating border pseudo-elements */
.wv-device-card::before,
.wv-device-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
}
.wv-device-card::before {
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.wv-device-card::after {
    background: var(--glass);
    z-index: 0;
}

/* Active = green rotating border */
.wv-dev-active::before {
    background: conic-gradient(
        from var(--wv-border-angle, 0deg),
        transparent 0%, transparent 70%,
        rgba(0,255,127,0.5) 80%, rgba(0,242,255,0.3) 88%,
        rgba(0,255,127,0.6) 92%, transparent 100%
    );
    animation: wv-border-rotate 6s linear infinite;
}
.wv-dev-active:hover { box-shadow: 0 0 14px rgba(0,255,127,0.06); }

/* Standby = cyan rotating border */
.wv-dev-standby::before {
    background: conic-gradient(
        from var(--wv-border-angle, 0deg),
        transparent 0%, transparent 70%,
        rgba(0,242,255,0.4) 80%, rgba(138,43,226,0.3) 88%,
        rgba(0,242,255,0.5) 92%, transparent 100%
    );
    animation: wv-border-rotate 8s linear infinite;
}
.wv-dev-standby:hover { box-shadow: 0 0 14px rgba(0,242,255,0.06); }

/* Revoked = red rotating border */
.wv-dev-revoked { opacity: 0.6; }
.wv-dev-revoked::before {
    background: conic-gradient(
        from var(--wv-border-angle, 0deg),
        transparent 0%, transparent 70%,
        rgba(255,107,107,0.5) 80%, rgba(255,179,71,0.3) 88%,
        rgba(255,107,107,0.6) 92%, transparent 100%
    );
    animation: wv-border-rotate 4s linear infinite;
}
.wv-dev-revoked:hover { box-shadow: 0 0 14px rgba(255,107,107,0.06); }

@property --wv-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes wv-border-rotate {
    to { --wv-border-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .wv-device-card::before { background: none; animation: none; }
    .wv-dev-active  { border: 1px solid rgba(0,255,127,0.3); border-top: none; }
    .wv-dev-standby { border: 1px solid rgba(0,242,255,0.2); border-top: none; }
    .wv-dev-revoked { border: 1px solid rgba(255,107,107,0.3); border-top: none; }
}
.wv-dev-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.wv-dev-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    font-family: monospace;
    text-shadow: 0 0 4px rgba(0,242,255,0.15);
}
.wv-dev-badge {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 12px;
    border-radius: 999px;
}
.wv-badge-active { color: #00ff7f; background: rgba(0,255,127,0.08); border: 1px solid rgba(0,255,127,0.3); text-shadow: 0 0 4px rgba(0,255,127,0.3); box-shadow: 0 0 6px rgba(0,255,127,0.1); }
.wv-badge-standby { color: var(--neon-blue); background: rgba(0,242,255,0.06); border: 1px solid rgba(0,242,255,0.2); text-shadow: 0 0 4px rgba(0,242,255,0.3); }
.wv-badge-revoked { color: #ff6b6b; background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.3); text-shadow: 0 0 4px rgba(255,107,107,0.3); box-shadow: 0 0 6px rgba(255,107,107,0.1); }

/* Device field grid */
.wv-dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 6px;
}
.wv-dev-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 6px;
    transition: all 0.2s ease;
}
.wv-dev-field:hover {
    background: rgba(0,242,255,0.02);
    border-color: rgba(0,242,255,0.08);
}
.wv-field-label {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.3);
}
.wv-field-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
}
.wv-val-yes { color: #00ff7f; text-shadow: 0 0 4px rgba(0,255,127,0.3); }
.wv-val-no  { color: #ff6b6b; text-shadow: 0 0 4px rgba(255,107,107,0.3); }
.wv-val-highlight { color: var(--neon-blue); text-shadow: 0 0 4px rgba(0,242,255,0.3); font-weight: 800; }
.wv-val-keys { color: #00ff7f; font-weight: 800; text-shadow: 0 0 6px rgba(0,255,127,0.3); }

.wv-build-info {
    margin-top: 10px;
    padding: 8px 10px;
    border-top: 1px solid rgba(0,242,255,0.05);
    background: rgba(0,0,0,0.1);
    border-radius: 0 0 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 767.98px) {
    .wv-dev-grid { grid-template-columns: repeat(2, 1fr); }
    .wv-page-stats { grid-template-columns: repeat(2, 1fr); }
    .wv-page-title-row { flex-direction: column; align-items: flex-start; }
    .wv-page-header { padding: 12px 14px; }
    .wv-page-info { font-size: 0.72rem; padding: 8px 10px; }
    .wv-page-info code { font-size: 0.65rem; }
    .wv-device-card { padding: 12px 10px; }
    .wv-level-header { padding: 10px 12px; font-size: 0.82rem; }
    .wv-level-title { font-size: 1rem; }
    .wv-level-status { font-size: 0.65rem; }
    .wv-field-value {
        font-size: 0.72rem;
        word-break: break-all;
        overflow-wrap: anywhere;
    }
    .wv-build-info { font-size: 0.68rem; word-break: break-all; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
    .wv-dev-grid { grid-template-columns: 1fr; }
    .wv-page-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .wv-stat-val { font-size: 1rem; }
    .wv-stat-lbl { font-size: 0.55rem; }
    .wv-device-card { padding: 10px 8px; }
    .wv-dev-field { padding: 5px 6px; }
    .wv-field-label { font-size: 0.5rem; }
    .wv-field-value { font-size: 0.68rem; }
    .wv-level-header { flex-wrap: wrap; padding: 8px 10px; }
}

/* === KEY ARCHIVE === */

/* ── Header (rotating neon border) ── */
.ka-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.ka-page-header::before,
.ka-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.ka-page-header::before {
    background: conic-gradient(from var(--ka-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: ka-hdr-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.ka-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.ka-page-header > * { position: relative; z-index: 1; }
@property --ka-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ka-hdr-rotate { to { --ka-hdr-angle: 360deg; } }
.ka-page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.ka-page-title { display: flex; align-items: center; gap: 14px; }
.ka-page-icon {
    font-size: 1.6rem;
    color: var(--neon-blue);
    text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: ka-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes ka-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}

/* ── Stats strip ── */
.ka-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,242,255,0.06);
}
.ka-stat-card {
    background: rgba(0,242,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
    transition: all 0.25s ease;
}
.ka-stat-card:hover { background: rgba(0,242,255,0.05); border-color: rgba(0,242,255,0.12); }
.ka-stat-card.ka-stat-highlight { border-color: rgba(255,180,0,0.25); background: rgba(255,180,0,0.04); }
.ka-stat-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
    display: block;
    line-height: 1.3;
}
.ka-stat-highlight .ka-stat-val { color: #ffb400; text-shadow: 0 0 6px rgba(255,180,0,0.3); }
.ka-stat-lbl {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 3px;
    display: block;
}

/* ── Dashboard: charts + cross-refs side by side ── */
.ka-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.ka-dash-left, .ka-dash-right {
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── Chart tabs ── */
.ka-chart-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.ka-chart-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid transparent;
}
.ka-chart-tab:hover { color: rgba(255,255,255,0.7); background: rgba(0,242,255,0.03); }
.ka-chart-tab.active {
    color: #00f2ff;
    border-bottom-color: #00f2ff;
    background: rgba(0,242,255,0.04);
}
.ka-chart-panel {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
    max-height: 320px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,242,255,0.15) transparent;
}
.ka-chart-panel::-webkit-scrollbar { width: 4px; }
.ka-chart-panel::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.15); border-radius: 4px; }

/* ── Bar chart (pure CSS) ── */
.ka-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.ka-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr 40px;
    align-items: center;
    gap: 10px;
}
.ka-bar-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ka-bar-label img {
    width: 20px; height: 20px; border-radius: 4px; background: #fff;
    object-fit: contain; padding: 1px; flex-shrink: 0;
}
.ka-bar-track {
    height: 18px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.ka-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(0,242,255,0.3), rgba(0,242,255,0.6));
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    min-width: 2px;
    box-shadow: 0 0 8px rgba(0,242,255,0.15);
}
.ka-bar-fill-alt { background: linear-gradient(90deg, rgba(180,110,255,0.3), rgba(180,110,255,0.6)); box-shadow: 0 0 8px rgba(180,110,255,0.15); }
.ka-bar-fill-amber { background: linear-gradient(90deg, rgba(255,180,0,0.3), rgba(255,180,0,0.6)); box-shadow: 0 0 8px rgba(255,180,0,0.15); }
.ka-bar-fill-green { background: linear-gradient(90deg, rgba(0,220,130,0.3), rgba(0,220,130,0.6)); box-shadow: 0 0 8px rgba(0,220,130,0.15); }
.ka-bar-val {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Donut chart (SVG) ── */
.ka-donut-wrap { display: flex; align-items: center; gap: 20px; justify-content: center; padding: 10px 0; }
.ka-donut-svg { flex-shrink: 0; }
.ka-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.ka-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: rgba(255,255,255,0.7); }
.ka-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ka-legend-val { margin-left: auto; font-weight: 700; color: rgba(255,255,255,0.5); font-size: 0.72rem; min-width: 24px; text-align: right; }

/* ── Timeline sparkline ── */
.ka-timeline-chart { padding: 10px 0; }
.ka-timeline-svg { width: 100%; height: 120px; display: block; }
.ka-timeline-bar { fill: rgba(0,242,255,0.35); transition: fill 0.15s; }
.ka-timeline-bar:hover { fill: rgba(0,242,255,0.7); }
.ka-timeline-label { fill: rgba(255,255,255,0.3); font-size: 9px; font-family: inherit; }
.ka-timeline-empty { text-anchor: middle; fill: rgba(255,255,255,0.2); font-size: 12px; }

/* ── Cross-references panel ── */
.ka-xref-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.ka-xref-title { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; }
.ka-xref-count {
    font-size: 0.68rem; font-weight: 700; background: rgba(0,242,255,0.12);
    color: #00f2ff; padding: 2px 8px; border-radius: 10px;
}
.ka-xref-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    max-height: 320px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,242,255,0.15) transparent;
}
.ka-xref-list::-webkit-scrollbar { width: 4px; }
.ka-xref-list::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.15); border-radius: 4px; }
.ka-xref-empty {
    text-align: center; padding: 30px 10px; color: rgba(255,255,255,0.2); font-size: 0.82rem;
}
.ka-xref-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid #00f2ff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: border-color 0.15s;
}
.ka-xref-card:hover { border-color: rgba(0,242,255,0.15); }
.ka-xref-card.ka-xref-key { border-left-color: #00f2ff; }
.ka-xref-card.ka-xref-pssh { border-left-color: #b46eff; }
.ka-xref-card.ka-xref-same { border-left-color: #ffb400; }
.ka-xref-badge {
    display: inline-block;
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: #00f2ff;
    background: rgba(0,242,255,0.10); padding: 2px 7px; border-radius: 3px;
    margin-bottom: 5px;
}
.ka-xref-badge-pssh { color: #b46eff; background: rgba(180,110,255,0.10); }
.ka-xref-badge-same { color: #ffb400; background: rgba(255,180,0,0.10); }
.ka-xref-detail { font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: 3px; line-height: 1.5; }
.ka-xref-detail code {
    color: #00f2ff; background: rgba(0,242,255,0.06);
    padding: 1px 4px; border-radius: 3px; font-size: 0.72rem;
}
.ka-xref-channels {
    display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 5px;
    overflow-x: auto; padding-bottom: 3px;
    scrollbar-width: thin; scrollbar-color: rgba(0,242,255,0.15) transparent;
}
.ka-xref-channels::-webkit-scrollbar { height: 3px; }
.ka-xref-channels::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.15); border-radius: 3px; }
.ka-xref-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0,242,255,0.05); border: 1px solid rgba(0,242,255,0.10);
    border-radius: 6px; padding: 3px 8px 3px 3px;
    font-size: 0.72rem; color: rgba(255,255,255,0.75);
    flex-shrink: 0; white-space: nowrap;
}
.ka-xref-chip-logo { width: 20px; height: 20px; object-fit: contain; background: #fff; border-radius: 4px; padding: 1px; flex-shrink: 0; }
.ka-xref-chip-name { font-weight: 600; }
.ka-xref-chip-ccid { color: rgba(255,255,255,0.3); font-size: 0.65rem; }

/* ── Search bar ── */
.ka-search-bar {
    padding: 10px 14px !important;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Channel cards ── */
.ka-channel-card { border-radius: 12px; overflow: hidden; }
.ka-channel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; cursor: pointer; transition: background 0.15s; user-select: none;
}
.ka-channel-header:hover { background: rgba(0,242,255,0.04); }
.ka-channel-info { display: flex; align-items: center; gap: 10px; }
.ka-channel-logo {
    width: 36px; height: 36px; object-fit: contain; background: #fff;
    border-radius: 8px; border: 1px solid rgba(0,242,255,0.15); padding: 2px; flex-shrink: 0;
}
.ka-channel-name { font-weight: 600; font-size: 0.9rem; color: #fff; display: block; }
.ka-channel-ccid { font-size: 0.68rem; color: rgba(255,255,255,0.3); font-family: monospace; display: block; margin-top: 1px; }
.ka-channel-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ka-badge-count {
    font-size: 0.68rem; background: rgba(0,242,255,0.10); color: #00f2ff;
    padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.ka-badge-time { font-size: 0.68rem; color: rgba(255,255,255,0.3); }
.ka-badge-urls {
    font-size: 0.68rem; background: rgba(180,110,255,0.10); color: #b46eff;
    padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.ka-badge-urls i { font-size: 0.6rem; margin-right: 2px; }
.ka-expand-icon { color: rgba(255,255,255,0.2); transition: transform 0.2s; font-size: 0.75rem; }
.ka-expanded .ka-expand-icon { transform: rotate(180deg); }
.ka-channel-body { display: none; padding: 0 14px 12px; overflow-x: auto; }
.ka-expanded .ka-channel-body { display: block; }

/* ── Streaming URLs ── */
.ka-urls-section {
    margin-bottom: 12px;
    border: 1px solid rgba(180,110,255,0.10);
    border-radius: 8px;
    overflow: hidden;
}
.ka-urls-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #b46eff; padding: 7px 12px;
    background: rgba(180,110,255,0.04);
    border-bottom: 1px solid rgba(180,110,255,0.08);
}
.ka-urls-list {
    max-height: 140px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(180,110,255,0.15) transparent;
}
.ka-urls-list::-webkit-scrollbar { width: 3px; }
.ka-urls-list::-webkit-scrollbar-thumb { background: rgba(180,110,255,0.15); border-radius: 3px; }
.ka-url-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    transition: background 0.1s;
}
.ka-url-row:last-child { border-bottom: none; }
.ka-url-row:hover { background: rgba(180,110,255,0.03); }
.ka-url-cdn {
    font-size: 0.65rem; font-weight: 600; color: #b46eff;
    flex-shrink: 0; min-width: 100px; max-width: 160px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ka-url-val {
    font-size: 0.68rem; color: rgba(255,255,255,0.35);
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: help;
}

/* ── Key table ── */
.ka-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ka-table thead th {
    text-align: left; color: rgba(255,255,255,0.35); font-weight: 600;
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
.ka-table tbody td {
    padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.65); vertical-align: middle;
}
.ka-table tbody tr:hover { background: rgba(0,242,255,0.03); }
.ka-row-xref { background: rgba(0,242,255,0.02); }
.ka-cell-key { font-family: 'JetBrains Mono','Fira Code',monospace; word-break: break-all; }
.ka-kid { color: #00f2ff; font-size: 0.74rem; }
.ka-key-sep { color: rgba(255,255,255,0.15); margin: 0 1px; }
.ka-keyval { color: rgba(255,255,255,0.45); font-size: 0.74rem; }
.ka-pssh { color: rgba(255,255,255,0.35); font-size: 0.7rem; cursor: help; }
.ka-cell-time { white-space: nowrap; font-size: 0.7rem; color: rgba(255,255,255,0.3); }
.ka-tier {
    display: inline-block; font-size: 0.6rem; font-weight: 600;
    padding: 1px 5px; border-radius: 3px; background: rgba(0,242,255,0.08);
    color: #00f2ff; margin: 1px 2px;
}
.ka-xref-indicator { color: #ffb400; font-size: 0.65rem; margin-left: 4px; filter: drop-shadow(0 0 3px rgba(255,180,0,0.4)); }

/* ── Responsive ── */
@media (max-width: 992px) {
    .ka-dashboard { grid-template-columns: 1fr; }
    .ka-dash-right { max-height: 280px; }
    .ka-xref-list { max-height: 220px; }
}
@media (max-width: 768px) {
    .ka-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .ka-page-title-row { flex-direction: column; align-items: flex-start; }
    .ka-bar-row { grid-template-columns: 80px 1fr 32px; }
}
@media (max-width: 480px) {
    .ka-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ka-dashboard { gap: 10px; }
}

/* === LICENSE MANAGEMENT === */
.license-list { display: flex; flex-direction: column; gap: 10px; }
.license-card {
    flex-direction: column !important;
    gap: 12px;
    padding: 16px !important;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}
.lic-key-section { width: 100%; min-width: 0; }
.license-card > * { min-width: 0; max-width: 100%; }
.lic-key-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 4px;
}
.lic-key-value {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lic-key-value code {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--neon-blue);
    background: rgba(0, 242, 255, 0.06);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 242, 255, 0.15);
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-all;
}
.lic-info-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.lic-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lic-info-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.3);
}
.lic-info-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}
.lic-status {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}
.lic-active { color: #00ff7f; background: rgba(0,255,127,0.1); border: 1px solid rgba(0,255,127,0.3); }
.lic-expired { color: #ffb347; background: rgba(255,179,71,0.1); border: 1px solid rgba(255,179,71,0.3); }
.lic-revoked { color: #ff6b6b; background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.3); }
/* Usage Statistics */
.lic-usage-stats {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,242,255,0.08);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    min-width: 0;
    overflow: hidden;
    animation: lic-usage-glow 3s ease-in-out infinite alternate;
}
@keyframes lic-usage-glow {
    0%   { border-color: rgba(0,242,255,0.06); box-shadow: 0 0 6px rgba(0,242,255,0.03); }
    100% { border-color: rgba(0,242,255,0.18); box-shadow: 0 0 14px rgba(0,242,255,0.07); }
}
.lic-usage-stats-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,242,255,0.08);
}
.lic-usage-stats-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--neon-blue);
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
}
.lic-usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.lic-usage-stat {
    text-align: center;
    padding: 8px 4px;
    background: rgba(0,242,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.25s ease;
}
.lic-usage-stat:hover {
    background: rgba(0,242,255,0.05);
    border-color: rgba(0,242,255,0.12);
}
.lic-usage-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
    line-height: 1.3;
}
.lic-usage-stat-time {
    font-size: 0.7rem;
    font-weight: 600;
}
.lic-usage-stat-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
}
.lic-usage-channels-details { margin-top: 4px; }
.lic-usage-channels-summary {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
}
.lic-usage-channels-summary::-webkit-details-marker { display: none; }
.lic-usage-channels-summary::before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.55rem;
    margin-right: 6px;
    transition: transform 0.2s;
    display: inline-block;
}
details[open] > .lic-usage-channels-summary::before { transform: rotate(90deg); }
.lic-usage-channels-list { padding: 8px 0; }
.lic-usage-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    min-width: 0;
    max-width: 100%;
}
.lic-usage-channel-info {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
.lic-usage-channel-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.lic-usage-channel-meta {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}
.lic-usage-bar {
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.lic-usage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue), #00ff7f);
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0,242,255,0.3);
    transition: width 0.4s ease;
}
.lic-usage-channel-more {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    padding: 6px 0 2px;
    font-style: italic;
}

/* Channel Usage Preview + Button */
.lic-usage-channels-preview { margin-top: 4px; }
.lic-channels-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px; padding: 5px 12px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
    background: rgba(0,242,255,0.08); border: 1px solid rgba(0,242,255,0.2);
    color: var(--neon); transition: all 0.2s;
}
.lic-channels-btn:hover { background: rgba(0,242,255,0.15); box-shadow: 0 0 10px rgba(0,242,255,0.15); }

/* ─── Channel Usage Modal (CUM) ─── */
.cum-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s;
}
.cum-overlay.cum-visible { opacity: 1; }
.cum-modal {
    background: var(--glass, rgba(15,18,30,0.95));
    border: 1px solid rgba(0,242,255,0.15);
    border-radius: 16px; width: 94vw; max-width: 820px;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 0 40px rgba(0,242,255,0.1), 0 8px 32px rgba(0,0,0,0.6);
    padding: 0;
}
.cum-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 20px 24px 16px; border-bottom: 1px solid rgba(0,242,255,0.1);
    position: sticky; top: 0; background: inherit; z-index: 1; border-radius: 16px 16px 0 0;
}
.cum-title { font-size: 1.1rem; font-weight: 700; color: #fff; }
.cum-subtitle { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 4px; }
.cum-subtitle code { color: var(--neon); font-size: 0.72rem; }
.cum-close {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5); width: 32px; height: 32px; border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.cum-close:hover { background: rgba(255,71,87,0.2); color: #ff4757; border-color: rgba(255,71,87,0.3); }

/* Summary cards */
.cum-summary-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    padding: 16px 24px;
}
.cum-summary-card {
    text-align: center; padding: 14px 8px;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.cum-summary-value { font-size: 1.4rem; font-weight: 800; color: #fff; }
.cum-summary-label { font-size: 0.68rem; color: rgba(255,255,255,0.4); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Charts row */
.cum-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 24px 16px; }
.cum-chart-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 14px;
}
.cum-chart-title { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.cum-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 70px; }
.cum-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cum-bar-track { width: 100%; height: 55px; background: rgba(255,255,255,0.04); border-radius: 3px; display: flex; align-items: flex-end; }
.cum-bar-fill { width: 100%; background: linear-gradient(180deg, var(--neon), rgba(0,242,255,0.3)); border-radius: 3px; min-height: 2px; transition: height 0.4s ease; }
.cum-bar-fill-alt { background: linear-gradient(180deg, #a855f7, rgba(168,85,247,0.3)); }
.cum-bar-label { font-size: 0.6rem; color: rgba(255,255,255,0.35); }

/* Sections */
.cum-section { padding: 0 24px 16px; }
.cum-section:last-child { padding-bottom: 24px; }
.cum-section-title { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.cum-section-count { font-size: 0.65rem; background: rgba(0,242,255,0.12); color: var(--neon); padding: 1px 7px; border-radius: 8px; }

/* Channel list */
.cum-channel-list { display: flex; flex-direction: column; gap: 2px; }
.cum-channel-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; transition: background 0.15s;
}
.cum-channel-row:hover { background: rgba(0,242,255,0.04); }
.cum-rank {
    width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 800; color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04); flex-shrink: 0;
}
.cum-rank-1 { background: rgba(255,215,0,0.15); color: #ffd700; }
.cum-rank-2 { background: rgba(192,192,192,0.12); color: #c0c0c0; }
.cum-rank-3 { background: rgba(205,127,50,0.12); color: #cd7f32; }
.cum-channel-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: #fff; padding: 2px; flex-shrink: 0; }
.cum-channel-info { flex: 1; min-width: 0; }
.cum-channel-name { font-size: 0.8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cum-channel-meta {
    display: flex; gap: 12px; margin-top: 2px; font-size: 0.62rem; color: rgba(255,255,255,0.3);
}
.cum-channel-meta span { white-space: nowrap; }
.cum-channel-meta i { margin-right: 3px; font-size: 0.55rem; color: rgba(0,242,255,0.4); }
.cum-channel-stats { text-align: right; flex-shrink: 0; }
.cum-channel-hits { font-size: 0.85rem; font-weight: 800; color: var(--neon); }
.cum-channel-hits-label { font-size: 0.55rem; color: rgba(255,255,255,0.3); text-transform: uppercase; }
.cum-channel-bar-wrap { width: 80px; flex-shrink: 0; }
.cum-channel-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.cum-channel-bar-fill { height: 100%; background: linear-gradient(90deg, var(--neon), #00ff7f); border-radius: 2px; box-shadow: 0 0 4px rgba(0,242,255,0.3); transition: width 0.4s; }
.cum-channel-pct { font-size: 0.55rem; color: rgba(255,255,255,0.25); text-align: right; margin-top: 2px; }

/* IP list in modal */
.cum-ip-list { display: flex; flex-direction: column; gap: 2px; }
.cum-ip-row {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center;
    padding: 6px 10px; border-radius: 6px; font-size: 0.72rem;
}
.cum-ip-row:hover { background: rgba(255,255,255,0.03); }
.cum-ip-addr { color: rgba(255,255,255,0.7); font-weight: 600; }
.cum-ip-addr i { color: rgba(0,242,255,0.4); font-size: 0.6rem; }
.cum-ip-stat { color: var(--neon); font-weight: 700; white-space: nowrap; }
.cum-ip-date { color: rgba(255,255,255,0.3); font-size: 0.65rem; white-space: nowrap; }
.cum-ip-more { font-size: 0.65rem; color: rgba(255,255,255,0.25); padding: 6px 10px; font-style: italic; }

@media (max-width: 600px) {
    .cum-modal { width: 100vw; max-height: 95vh; border-radius: 12px 12px 0 0; }
    .cum-summary-row { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px; }
    .cum-charts-row { grid-template-columns: 1fr; padding: 0 16px 12px; }
    .cum-section { padding: 0 16px 12px; }
    .cum-header { padding: 16px; }
    .cum-channel-bar-wrap { display: none; }
    .cum-channel-meta { flex-wrap: wrap; gap: 6px; }
    .cum-ip-row { grid-template-columns: 1fr 1fr; gap: 4px; }
    .cum-ip-date { font-size: 0.6rem; }
}

.lic-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-lic {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.btn-lic-revoke { color: #ffb347; border-color: rgba(255,179,71,0.4); background: rgba(255,179,71,0.08); }
.btn-lic-revoke:hover { background: rgba(255,179,71,0.2); }
.btn-lic-activate { color: #00ff7f; border-color: rgba(0,255,127,0.4); background: rgba(0,255,127,0.08); }
.btn-lic-activate:hover { background: rgba(0,255,127,0.2); }
.btn-lic-delete { color: #ff6b6b; border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); }
.btn-lic-delete:hover { background: rgba(255,107,107,0.2); }
.btn-lic-edit { color: var(--neon-blue); border-color: rgba(0,242,255,0.4); background: rgba(0,242,255,0.08); }
.btn-lic-edit:hover { background: rgba(0,242,255,0.2); }
.btn-lic-clear { color: #a78bfa; border-color: rgba(167,139,250,0.4); background: rgba(167,139,250,0.08); }
.btn-lic-clear:hover { background: rgba(167,139,250,0.2); }
.btn-lic-sm { font-size: 0.62rem; padding: 2px 8px; margin-left: 8px; }

/* Flagged license */
.lic-flagged { border-color: rgba(255,107,107,0.5) !important; box-shadow: 0 0 15px rgba(255,107,107,0.1); }
.lic-flag-banner {
    background: rgba(255,107,107,0.1);
    border: 1px solid rgba(255,107,107,0.3);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ff6b6b;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    animation: exp-pulse-crit 2s ease-in-out infinite;
}

/* IP count coloring */
.lic-ip-over { color: #ff6b6b !important; font-weight: 700; }
.lic-ip-ok { color: #00ff7f !important; }

/* IP whitelist chips */
.lic-whitelist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.lic-wl-chip {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 6px;
    background: rgba(0,242,255,0.08);
    border: 1px solid rgba(0,242,255,0.25);
    color: #7fd9ff;
    font-family: monospace;
}

/* IP activity details */
.lic-ip-details {
    width: 100%;
}
.lic-ip-summary {
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7b8d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 0;
    user-select: none;
    list-style: none;
}
.lic-ip-summary::-webkit-details-marker { display: none; }
.lic-ip-summary::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    transition: transform 0.2s;
    display: inline-block;
}
details[open] > .lic-ip-summary::before { transform: rotate(90deg); }

.lic-ip-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    max-height: 200px;
    overflow-y: auto;
    min-width: 0;
}
.lic-ip-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    min-width: 0;
}
.lic-ip-addr {
    font-family: monospace;
    color: #7fd9ff;
    font-weight: 600;
    min-width: 0;
}
.lic-ip-hits {
    color: #a78bfa;
    font-weight: 700;
    min-width: 0;
    white-space: nowrap;
}
.lic-ip-last {
    color: #6b7b8d;
    font-size: 0.7rem;
}
.lic-ip-empty {
    padding: 10px;
    text-align: center;
    color: #6b7b8d;
    font-size: 0.78rem;
}

@media (max-width: 767.98px) {
    .license-card { padding: 12px !important; }
    .lic-key-value code {
        font-size: 0.72rem; letter-spacing: 0.5px;
        word-break: break-all; overflow-wrap: break-word;
        min-width: 0;
    }
    .lic-key-value { flex-wrap: wrap; }
    .lic-info-row {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .lic-usage-stats { padding: 10px; }
    .lic-usage-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .lic-usage-stat-value { font-size: 0.9rem; }
    .lic-usage-stat { padding: 6px 2px; overflow: hidden; }
    .lic-usage-stat-value { font-size: 0.85rem; word-break: break-all; }
    .lic-usage-stat-time { font-size: 0.55rem; word-break: break-word; }
    .lic-usage-stat-label { font-size: 0.52rem; }
    .lic-usage-channel { gap: 6px; }
    .lic-usage-channel-info { gap: 4px; }
    .lic-usage-channel-name { font-size: 0.68rem; }
    .lic-usage-channel-meta { font-size: 0.6rem; flex-shrink: 0; }
    .lic-usage-bar { width: 40px; }
    .lic-usage-channels-preview { overflow: hidden; }
    .lic-actions { gap: 6px; }
    .btn-lic { font-size: 0.62rem; padding: 4px 8px; }
    .lic-ip-row {
        flex-direction: column; align-items: flex-start;
        gap: 2px; padding: 8px 10px;
    }
    .lic-ip-addr { min-width: auto; font-size: 0.7rem; }
    .lic-ip-hits { min-width: auto; font-size: 0.68rem; }
    .lic-ip-last { font-size: 0.62rem; }
    .lic-flag-banner { font-size: 0.7rem; flex-direction: column; align-items: flex-start; }
    .lic-whitelist { gap: 4px; }
    .lic-wl-chip { font-size: 0.62rem; padding: 2px 6px; }
    .lic-channels-btn { font-size: 0.65rem; padding: 4px 10px; }
    .licenses-page-title-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .licenses-toolbar { width: 100%; justify-content: flex-end; }
}

/* === CHANNEL CACHE STATUS BADGES === */
.cache-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    width: 210px;
    max-width: 210px;
    text-align: center;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cache-badge i { font-size: 0.58rem; }

.cache-valid {
    color: #00ff7f;
    background: rgba(0, 255, 127, 0.1);
    border-color: rgba(0, 255, 127, 0.35);
}
.cache-expiring {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.1);
    border-color: rgba(255, 179, 71, 0.45);
    animation: cache-badge-pulse-warn 2s ease-in-out infinite;
}
.cache-expired {
    color: #ff4b6e;
    background: rgba(255, 75, 110, 0.1);
    border-color: rgba(255, 75, 110, 0.45);
    animation: cache-badge-pulse-crit 1.5s ease-in-out infinite;
}
.cache-none {
    color: #b388ff;
    background: rgba(179, 136, 255, 0.1);
    border-color: rgba(179, 136, 255, 0.4);
}

@keyframes cache-badge-pulse-warn {
    0%, 100% { box-shadow: none; }
    50%      { box-shadow: 0 0 8px rgba(255, 179, 71, 0.35); }
}
@keyframes cache-badge-pulse-crit {
    0%, 100% { box-shadow: none; }
    50%      { box-shadow: 0 0 10px rgba(255, 75, 110, 0.4); }
}

/* Playlist download dropdown — opens downward instead of the default upward. */
.playlist-dropdown {
    min-width: 240px;
    bottom: auto !important;
    top: calc(100% + 6px) !important;
}
.playlist-dropdown-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7fd9ff;
    padding: 8px 12px 6px;
    border-bottom: 1px solid rgba(0, 242, 255, 0.12);
    margin-bottom: 4px;
}

/* === EVENTS TAB BAR === */
.events-tab-bar {
    display: flex; gap: 0; margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
    overflow-x: auto; background: rgba(0,0,0,0.15);
    scrollbar-width: thin; scrollbar-color: rgba(0,242,255,0.15) transparent;
    -webkit-overflow-scrolling: touch;
}
.events-tab-bar::-webkit-scrollbar { height: 3px; }
.events-tab-bar::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.15); border-radius: 3px; }
.events-tab {
    background: none; border: none; white-space: nowrap;
    color: rgba(255,255,255,0.4); font-size: 0.72rem; font-weight: 600;
    padding: 10px 14px; cursor: pointer; transition: all 0.15s;
    text-transform: uppercase; letter-spacing: 0.3px;
    border-bottom: 2px solid transparent;
    position: relative;
}
.events-tab:hover { color: rgba(255,255,255,0.7); background: rgba(0,242,255,0.03); }
.events-tab.active {
    color: #00f2ff; border-bottom-color: #00f2ff;
    background: rgba(0,242,255,0.05);
}
.events-tab-badge {
    display: inline-block; font-size: 0.58rem; font-weight: 700;
    background: rgba(0,242,255,0.15); color: #00f2ff;
    padding: 1px 5px; border-radius: 8px; margin-left: 4px;
    min-width: 16px; text-align: center; line-height: 1.4;
}
.events-tab.active .events-tab-badge {
    background: rgba(0,242,255,0.25);
}

/* === LEAGUES PAGE === */
.leagues-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.leagues-page-header::before,
.leagues-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.leagues-page-header::before {
    background: conic-gradient(from var(--lg-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: lg-hdr-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.leagues-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.leagues-page-header > * { position: relative; z-index: 1; }
@property --lg-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lg-hdr-rotate { to { --lg-hdr-angle: 360deg; } }
.leagues-page-title-row {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.leagues-page-title { display: flex; align-items: center; gap: 14px; }
.leagues-page-icon {
    font-size: 1.6rem; color: var(--neon-blue);
    text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: lg-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes lg-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}

/* === LEAGUES CONTENT === */
.leagues-stats {
    display: flex; gap: 10px; margin-bottom: 16px;
}
.leagues-stat {
    background: rgba(0,242,255,0.03); border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px; padding: 10px 20px; text-align: center;
}
.leagues-stat-val {
    display: block; font-size: 1.4rem; font-weight: 800;
    color: #fff; text-shadow: 0 0 6px rgba(0,242,255,0.3);
}
.leagues-stat-lbl {
    display: block; font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: rgba(255,255,255,0.35); margin-top: 2px;
}
.league-sport-card { border-radius: 12px; overflow: hidden; }
.league-sport-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.league-sport-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 700; color: #fff;
}
.league-sport-icon { font-size: 1.1rem; }
.league-sport-count {
    font-size: 0.68rem; font-weight: 600;
    color: rgba(255,255,255,0.3); margin-left: auto;
}
.league-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1px; background: rgba(255,255,255,0.03);
}
.league-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; background: rgba(0,0,0,0.15);
    transition: background 0.15s;
}
.league-card:hover { background: rgba(0,242,255,0.04); }
.league-card-icon {
    width: 32px; height: 32px; display: flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03); border-radius: 8px;
    font-size: 0.9rem; flex-shrink: 0;
}
.league-card-info { display: flex; flex-direction: column; min-width: 0; }
.league-card-name {
    font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.league-card-desc {
    font-size: 0.68rem; color: rgba(255,255,255,0.35);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .league-grid { grid-template-columns: 1fr; }
    .leagues-stats { flex-direction: row; }
}

/* === EVENT STATUS PILLS === */
/* Colour-coded status under the event time, computed in JS from start/end. */
.event-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-top: 4px;
    width: fit-content;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.25s ease;
}
.event-status i { font-size: 0.75rem; }

.event-status-live {
    color: #ff4b6e;
    background: rgba(255, 75, 110, 0.12);
    border-color: rgba(255, 75, 110, 0.55);
    box-shadow: 0 0 12px rgba(255, 75, 110, 0.25);
    animation: event-pulse 2s ease-in-out infinite;
}
.event-status-soon {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.12);
    border-color: rgba(255, 179, 71, 0.55);
}
.event-status-today {
    color: #00f2ff;
    background: rgba(0, 242, 255, 0.10);
    border-color: rgba(0, 242, 255, 0.55);
}
.event-status-week {
    color: #7fd9ff;
    background: rgba(127, 217, 255, 0.08);
    border-color: rgba(127, 217, 255, 0.35);
}
.event-status-future {
    color: #9aa6b2;
    background: rgba(154, 166, 178, 0.08);
    border-color: rgba(154, 166, 178, 0.3);
}
.event-status-ended {
    color: #6b7380;
    background: rgba(107, 115, 128, 0.08);
    border-color: rgba(107, 115, 128, 0.3);
}

@keyframes event-pulse {
    0%, 100% { box-shadow: 0 0 8px  rgba(255, 75, 110, 0.25); }
    50%      { box-shadow: 0 0 18px rgba(255, 75, 110, 0.55); }
}

/* Corner "LIVE" badge overlaid on the poster when airing. */
.event-live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    background: rgba(255, 30, 60, 0.9);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 12px rgba(255, 30, 60, 0.5);
    z-index: 2;
    text-transform: uppercase;
}
.event-live-badge .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    animation: live-blink 1.2s ease-in-out infinite;
}
@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* === EVENT CARD INLINE SCORE BAR === */
.event-score-bar:empty { display: none; }
.event-score-inline {
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
}
.event-score-inline.esb-live {
    background: rgba(255, 30, 60, 0.08);
    border: 1px solid rgba(255, 30, 60, 0.3);
}
.event-score-inline.esb-final {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.esb-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
}
.esb-live .esb-status { color: #ff4b6e; }
.esb-clock {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--neon-blue);
    font-variant-numeric: tabular-nums;
}
.esb-teams { display: flex; flex-direction: column; gap: 2px; }
.esb-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.esb-team {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}
.esb-record {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.25);
}
.esb-pts {
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.esb-winner .esb-team { color: #fff; }
.esb-winner .esb-pts { color: var(--neon-blue); }
.esb-live .esb-winner .esb-pts { color: #ff4b6e; }

/* === VOD (MOVIES & TV SHOWS) === */
/* VOD page header */
.vod-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.vod-page-header::before,
.vod-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.vod-page-header::before {
    background: conic-gradient(from var(--vod-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: vod-hdr-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.vod-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.vod-page-header > * { position: relative; z-index: 1; }
@property --vod-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes vod-hdr-rotate { to { --vod-hdr-angle: 360deg; } }
.vod-page-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.vod-page-title { display: flex; align-items: center; gap: 14px; }
.vod-page-icon {
    font-size: 1.6rem; color: var(--neon-blue); text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: vod-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes vod-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
.vod-toolbar { display: flex; align-items: center; gap: 8px; }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .vod-page-header::before { background: none; animation: none; }
    .vod-page-header { border: 1px solid rgba(0,242,255,0.15); }
}

.vod-category { margin-bottom: 28px; }
.vod-category:first-child { margin-top: 18px; }
.vod-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,242,255,0.08);
}
.vod-category-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 0 6px rgba(0,242,255,0.15);
}
.vod-category-count {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--neon-blue);
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    padding: 2px 9px;
    border-radius: 999px;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
    box-shadow: 0 0 6px rgba(0,242,255,0.06);
}

.vod-viewall-btn {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neon-blue);
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.vod-viewall-btn:hover {
    background: rgba(0,242,255,0.15);
    border-color: rgba(0,242,255,0.5);
    box-shadow: 0 0 12px rgba(0,242,255,0.15);
    color: #fff;
}

.vod-scroll-wrap {
    position: relative;
}
.vod-scroll-arrow {
    position: absolute;
    top: 0;
    bottom: 40px;
    width: 36px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
}
.vod-scroll-wrap:hover .vod-scroll-arrow { opacity: 1; }
.vod-arrow-left {
    left: 0;
    background: linear-gradient(to right, rgba(7,8,11,0.9) 40%, transparent);
    padding-right: 8px;
}
.vod-arrow-right {
    right: 0;
    background: linear-gradient(to left, rgba(7,8,11,0.9) 40%, transparent);
    padding-left: 8px;
}
.vod-scroll-arrow:hover { color: var(--neon-blue); text-shadow: 0 0 8px rgba(0,242,255,0.5); }

.vod-scroll-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.vod-scroll-row::-webkit-scrollbar { height: 4px; }
.vod-scroll-row::-webkit-scrollbar-track { background: transparent; }
.vod-scroll-row::-webkit-scrollbar-thumb { background: rgba(0, 242, 255, 0.2); border-radius: 4px; }
.vod-scroll-row::-webkit-scrollbar-thumb:hover { background: rgba(0, 242, 255, 0.4); }

.vod-card {
    flex-shrink: 0;
    width: 150px;
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform 0.25s ease;
}
.vod-card:hover { transform: translateY(-4px) scale(1.02); }

.vod-poster-wrap {
    position: relative;
    width: 150px;
    height: 225px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.4);
    border: 1px solid transparent;
    box-shadow: 0 0 6px rgba(138,43,226,0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* Rotating neon conic-gradient ring — same pattern as page headers /
   .glass-item but kept inside the poster (inset:0) so we don't fight the
   overflow:hidden that clips the image into the rounded corners. */
.vod-poster-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--vod-poster-angle, 0deg),
        transparent 0%,
        transparent 70%,
        rgba(0,242,255,0.5) 80%,
        rgba(138,43,226,0.4) 88%,
        rgba(0,242,255,0.6) 92%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    z-index: 2;
    animation: vod-poster-rotate 8s linear infinite;
}
@property --vod-poster-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes vod-poster-rotate {
    to { --vod-poster-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .vod-poster-wrap::before { background: none; animation: none; }
    .vod-poster-wrap { border-color: rgba(138,43,226,0.25); }
}
.vod-card:hover .vod-poster-wrap {
    box-shadow: 0 6px 24px rgba(0,242,255,0.18), 0 0 14px rgba(138,43,226,0.1);
}
.vod-card:hover .vod-poster-wrap::before {
    background: conic-gradient(
        from var(--vod-poster-angle, 0deg),
        transparent 0%,
        transparent 60%,
        rgba(0,242,255,0.7) 75%,
        rgba(138,43,226,0.55) 85%,
        rgba(0,242,255,0.85) 92%,
        transparent 100%
    );
}
.vod-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}
.vod-rating {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}
.vod-meta {
    padding: 8px 2px 0;
}
.vod-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
}
.vod-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2px;
}
.vod-genres {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}
.vod-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.vod-badge {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}
.vod-badge-included {
    color: #00ff7f;
    background: rgba(0,255,127,0.08);
    border: 1px solid rgba(0,255,127,0.25);
    text-shadow: 0 0 4px rgba(0,255,127,0.3);
}
.vod-badge-rent {
    color: #ffb347;
    background: rgba(255,179,71,0.08);
    border: 1px solid rgba(255,179,71,0.25);
    text-shadow: 0 0 4px rgba(255,179,71,0.3);
}
.vod-badge-live {
    color: var(--neon-blue);
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.2);
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.vod-badge-unsub {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 6px;
    color: #6b7b8d;
    background: rgba(107, 123, 141, 0.08);
    border: 1px solid rgba(107, 123, 141, 0.25);
}

/* Episode-level cache badges */
.vod-ep-cache-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    display: inline-block;
    transition: all 0.3s;
}
.vod-ep-cache-valid {
    color: #00ff7f;
    background: rgba(0,255,127,0.06);
    border: 1px solid rgba(0,255,127,0.25);
    text-shadow: 0 0 4px rgba(0,255,127,0.3);
}
.vod-ep-cache-expiring {
    color: #ffb347;
    background: rgba(255,179,71,0.06);
    border: 1px solid rgba(255,179,71,0.3);
    text-shadow: 0 0 4px rgba(255,179,71,0.3);
    animation: exp-pulse-warn 2s ease-in-out infinite;
}
.vod-ep-cache-expired {
    color: #ff6b6b;
    background: rgba(255,107,107,0.06);
    border: 1px solid rgba(255,107,107,0.3);
    text-shadow: 0 0 4px rgba(255,107,107,0.3);
}
.vod-ep-cache-none {
    color: #a855f7;
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.25);
    text-shadow: 0 0 4px rgba(168,85,247,0.3);
}
.vod-ep-cache-keys {
    opacity: 0.7;
    font-weight: 600;
}

/* VOD per-item cache status bar */
.vod-cache-status-bar {
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s;
}
.vod-cache-top {
    font-weight: 700;
    margin-bottom: 2px;
}
.vod-cache-bottom {
    font-size: 0.68rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.vod-cache-keys {
    font-weight: 700;
}
.vod-cache-sep {
    opacity: 0.4;
}
.vod-item-cache-valid {
    color: #00ff7f;
    background: rgba(0, 255, 127, 0.06);
    border: 1px solid rgba(0, 255, 127, 0.25);
}
.vod-item-cache-expiring {
    color: #ffb347;
    background: rgba(255, 179, 71, 0.06);
    border: 1px solid rgba(255, 179, 71, 0.3);
    animation: exp-pulse-warn 2s ease-in-out infinite;
}
.vod-item-cache-expired {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.06);
    border: 1px solid rgba(255, 107, 107, 0.3);
}
.vod-item-cache-none {
    color: #b388ff;
    background: rgba(179, 136, 255, 0.06);
    border: 1px solid rgba(179, 136, 255, 0.25);
}

/* VOD detail modal */
.vod-detail {
    display: flex;
    gap: 24px;
}
.vod-detail-poster {
    flex-shrink: 0;
    width: 200px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(138,43,226,0.1), 0 8px 24px rgba(0,0,0,0.3);
}
.vod-detail-poster img {
    width: 100%;
    display: block;
    border-radius: inherit;
    border: 1px solid transparent;
    position: relative;
    z-index: 0;
}
/* Rotating neon ring — same pattern as .vod-poster-wrap */
.vod-detail-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--vod-detail-poster-angle, 0deg),
        transparent 0%,
        transparent 70%,
        rgba(0,242,255,0.5) 80%,
        rgba(138,43,226,0.4) 88%,
        rgba(0,242,255,0.6) 92%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    z-index: 2;
    animation: vod-detail-poster-rotate 8s linear infinite;
}
@property --vod-detail-poster-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes vod-detail-poster-rotate {
    to { --vod-detail-poster-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .vod-detail-poster::before { background: none; animation: none; }
    .vod-detail-poster img { border-color: rgba(138,43,226,0.25); }
}
.vod-detail-info {
    flex: 1;
    min-width: 0;
}
.vod-detail-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(0,242,255,0.15);
}
.vod-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}
.vod-detail-rating {
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    color: var(--neon-blue);
    padding: 2px 9px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.72rem;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
    box-shadow: 0 0 6px rgba(0,242,255,0.06);
}
.vod-detail-genres {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.vod-detail-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.vod-detail-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

/* VOD Season / Episode browser */
.vod-season-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,242,255,0.06);
}
.vod-season-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neon-blue);
    flex-shrink: 0;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.vod-season-select {
    min-width: 140px;
}
.vod-episodes-list {
    margin-top: 14px;
    max-height: 45vh;
    overflow-y: auto;
    padding-right: 4px;
}
.vod-episode {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.02);
    margin-bottom: 4px;
    transition: all 0.2s ease;
}
.vod-episode:hover {
    background: rgba(0,242,255,0.02);
    border-color: rgba(0,242,255,0.08);
    box-shadow: 0 0 8px rgba(0,242,255,0.03);
}
.vod-ep-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--neon-blue);
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.2);
    border-radius: 8px;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.vod-ep-info {
    flex: 1;
    min-width: 0;
}
.vod-ep-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.vod-ep-meta {
    display: flex;
    gap: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 4px;
}
.vod-ep-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* VOD episode auth button */
.vod-ep-actions { margin-top: 6px; }
.vod-ep-auth-btn {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neon-blue);
    background: rgba(0,242,255,0.06);
    border: 1px solid rgba(0,242,255,0.25);
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    text-shadow: 0 0 4px rgba(0,242,255,0.2);
}
.vod-ep-auth-btn:hover {
    background: rgba(0,242,255,0.15);
    border-color: rgba(0,242,255,0.5);
    box-shadow: 0 0 8px rgba(0,242,255,0.12);
}
.vod-ep-auth-btn:disabled { opacity: 0.5; cursor: wait; }
.vod-ep-auth-result { margin-top: 4px; }

/* VOD "View All" wide modal */
.vod-viewall-modal {
    max-width: 1400px;
}
.vod-viewall-modal .modal-content {
    background: rgba(10, 11, 16, 0.92) !important;
    backdrop-filter: blur(20px);
}

/* VOD "View All" grid */
.vod-grid-full {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
}
.vod-grid-full .vod-card {
    width: auto;
}
.vod-grid-full .vod-poster-wrap {
    width: 100%;
    height: 0;
    padding-bottom: 150%;
    position: relative;
}
.vod-grid-full .vod-poster {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 767.98px) {
    .vod-card { width: 130px; }
    .vod-poster-wrap { width: 130px; height: 195px; }
    .vod-scroll-row { gap: 10px; }
    .vod-title { font-size: 0.72rem; }
    .vod-category-title { font-size: 0.78rem; }
    .vod-scroll-arrow { display: none; }
    .vod-detail { flex-direction: column; gap: 16px; }
    .vod-detail-poster { width: 140px; }
    .vod-detail-title { font-size: 1.1rem; }
    .vod-detail-desc { font-size: 0.8rem; }
    .vod-grid-full { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
}

/* === SPORTS SCORES PAGE === */

/* Scores page header */
.scores-page-header {
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}
.scores-page-header::before, .scores-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.scores-page-header::before {
    background: conic-gradient(from var(--scores-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: scores-hdr-rotate 6s linear infinite; z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.scores-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.scores-page-header > * { position: relative; z-index: 1; }
@property --scores-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes scores-hdr-rotate { to { --scores-hdr-angle: 360deg; } }
.scores-page-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.scores-page-title { display: flex; align-items: center; gap: 14px; }
.scores-page-icon {
    font-size: 1.6rem; color: var(--neon-blue); text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: scores-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes scores-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .scores-page-header::before { background: none; animation: none; }
    .scores-page-header { border: 1px solid rgba(0,242,255,0.15); }
}

/* Section headers */
.scores-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.8);
    margin-bottom: 14px;
    text-shadow: 0 0 4px rgba(0,242,255,0.15);
}
.scores-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2a2a;
    box-shadow: 0 0 10px rgba(255,42,42,0.6);
    animation: sched-epg-blink 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* Score cards */
.score-card {
    background: var(--glass);
    border: 1px solid rgba(0,242,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.25s ease;
    animation: score-card-glow 4s ease-in-out infinite alternate;
}
.score-card:hover {
    border-color: rgba(0,242,255,0.2);
    box-shadow: 0 4px 18px rgba(0,242,255,0.08);
}
@keyframes score-card-glow {
    0%   { border-color: rgba(0,242,255,0.04); box-shadow: 0 0 4px rgba(0,242,255,0.02); }
    100% { border-color: rgba(0,242,255,0.1); box-shadow: 0 0 10px rgba(0,242,255,0.04); }
}

/* Live score cards — red glow */
.score-card-live {
    border-color: rgba(255,30,60,0.3);
    box-shadow: 0 0 12px rgba(255,30,60,0.08);
    animation: score-card-live-glow 2s ease-in-out infinite alternate;
}
.score-card-live:hover {
    border-color: rgba(255,30,60,0.5);
    box-shadow: 0 0 22px rgba(255,30,60,0.15);
}
@keyframes score-card-live-glow {
    0%   { border-color: rgba(255,30,60,0.2); box-shadow: 0 0 8px rgba(255,30,60,0.06); }
    100% { border-color: rgba(255,30,60,0.4); box-shadow: 0 0 16px rgba(255,30,60,0.12); }
}

.score-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,242,255,0.05);
}
.score-card-live .score-card-status { color: #ff4b6e; text-shadow: 0 0 4px rgba(255,75,110,0.3); border-bottom-color: rgba(255,30,60,0.1); }
.score-card-clock {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--neon-blue);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.score-card-teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.score-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.score-card-row:hover { background: rgba(0,242,255,0.02); }
.score-card-team {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    min-width: 0;
    flex-shrink: 1;
}
.score-card-record {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
}
.score-card-pts {
    font-size: 1.3rem;
    font-weight: 800;
    color: rgba(255,255,255,0.5);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}
.score-card-winner .score-card-team { color: #fff; }
.score-card-winner .score-card-pts { color: var(--neon-blue); text-shadow: 0 0 8px rgba(0,242,255,0.4); }
.score-card-live .score-card-winner .score-card-pts { color: #ff4b6e; text-shadow: 0 0 8px rgba(255,75,110,0.5); }

@media (max-width: 767.98px) {
    .scores-grid { grid-template-columns: 1fr; gap: 10px; }
    .score-card { padding: 12px 14px; }
    .score-card-team { font-size: 0.88rem; }
    .score-card-pts { font-size: 1.15rem; }
    .events-page-title-row, .scores-page-title-row { flex-direction: column; align-items: flex-start; }
}

/* === KEYGEN EASTER EGG THEME === */
.keygen-modal {
    background: #000 !important;
    border: 2px solid #0f0 !important;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.4), inset 0 0 15px rgba(0, 255, 0, 0.2) !important;
    color: #0f0 !important;
    font-family: 'Courier New', Courier, monospace !important;
    border-radius: 0 !important;
}

.keygen-title {
    color: #0f0;
    font-weight: 900;
    text-shadow: 2px 2px 0 #000, 0 0 8px #0f0;
    letter-spacing: 3px;
}

.keygen-art pre {
    color: #0f0;
    font-size: 0.65rem;
    line-height: 1.1;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    margin: 0;
    overflow: hidden;
}

.keygen-scroll-container {
    width: 100%;
    overflow: hidden;
    background: #001a00;
    border-top: 1px dashed #0f0;
    border-bottom: 1px dashed #0f0;
    padding: 6px 0;
    white-space: nowrap;
}

.keygen-scroll-text {
    display: inline-block;
    padding-left: 100%;
    animation: keygen-scroll 15s linear infinite;
    font-weight: bold;
    font-size: 0.9rem;
}

@keyframes keygen-scroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.key-display {
    background: #000;
    border: 1px solid #0f0;
    padding: 12px;
    font-size: 0.85rem; 
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #0f0;
    word-break: break-all; 
}

.btn-keygen {
    background: #000;
    border: 1px solid #0f0;
    color: #0f0;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 2px;
    transition: 0.2s;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-keygen:hover {
    background: #0f0 !important; 
    color: #000 !important; 
    box-shadow: 0 0 20px #0f0;
}

/* Easter Egg Footer Typing Effect */
.typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--neon-blue);
    margin-left: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--neon-blue);
    vertical-align: bottom;
    animation: typing-loop 5s steps(16, end) infinite, blink-cursor 0.75s step-end infinite;
}

@keyframes typing-loop {
    0%, 15% { width: 0ch; }
    40%, 60% { width: 16ch; }
    85%, 100% { width: 0ch; }
}

@keyframes blink-cursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--neon-blue); }
}

/* === NEDRY EASTER EGG THEME === */
#nedry-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    display: none;
    pointer-events: none; 
    transition: top 0.4s ease-in-out, left 0.4s ease-in-out;
}

.nedry {
    position: relative;
    top: 0;
    left: 0;
}

.nedry-body {
    position: relative;
    top: 0;
    left: 0;
}

.nedry-head {
    position: absolute;
    top: 35px;
    left: 140px;
}

.nedry-hand{
    position: absolute;
    top: 155px;
    left: 265px;
    animation: handFrames linear 0.7s infinite;
    transform-origin: 50% 100%;
}

@keyframes handFrames{
    0% { transform:  rotate(-10deg) ; }
    50% { transform:  rotate(14deg) ; }
    100% { transform:  rotate(-10deg) ; }
}

/* === VIDEO PLAYER & NEON BORDER FX === */
.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 3px; /* This creates the thickness of the neon line */
}

.shadow-neon { box-shadow: 0 0 20px rgba(0, 242, 255, 0.15); }

/* The glowing spinning line (Blue - Clockwise) */
.video-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 80%, var(--neon-blue) 100%);
    animation: spin-cw 4s linear infinite;
    z-index: 0;
    opacity: 0; /* Hidden until the video is actually playing */
    transition: opacity 0.5s ease-in-out;
}

/* The glowing spinning line (Orange - Counter-Clockwise) */
.video-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 180deg, transparent 80%, #ff9900 100%);
    animation: spin-ccw 4s linear infinite;
    z-index: 0;
    opacity: 0; /* Hidden until the video is actually playing */
    transition: opacity 0.5s ease-in-out;
}

/* Trigger class added by JavaScript */
.video-container.is-playing::before,
.video-container.is-playing::after {
    opacity: 1;
}

@keyframes spin-cw {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-ccw {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* The video acts as a mask, covering the center of the spinning gradient */
#video-player {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    object-fit: contain;
}

/* === PLAYER CONTROL BAR (quality / audio pickers) === */
.player-controls {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    background: rgba(7, 8, 11, 0.85);
    border-top: 1px solid rgba(0, 242, 255, 0.15);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: relative;
    z-index: 2;
}

.player-controls-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Each button + its dropdown share a positioning context so the menu can
   anchor directly above the button. */
.player-menu-wrap {
    position: relative;
    display: inline-block;
}

.btn-player-menu {
    background: rgba(0, 0, 0, 0.55);
    color: #dff7ff;
    border: 1px solid rgba(0, 242, 255, 0.35);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.btn-player-menu:hover:not(:disabled),
.btn-player-menu:focus:not(:disabled),
.btn-player-menu[aria-expanded="true"] {
    color: #fff;
    border-color: var(--neon-blue, #00f2ff);
    box-shadow: 0 0 12px rgba(0, 242, 255, 0.35);
    background: rgba(0, 0, 0, 0.7);
    outline: none;
}

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

.btn-player-menu .label {
    font-weight: 600;
}

.btn-player-menu .value {
    font-weight: 400;
    font-size: 0.8rem;
    color: #7fd9ff !important;
}

.btn-player-menu .caret-up {
    font-size: 0.75rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.btn-player-menu[aria-expanded="true"] .caret-up {
    transform: rotate(180deg);
    opacity: 1;
}

/* Opens upward from the button so it can never be clipped by the bottom of
   the modal. Hidden by default; .show is toggled by script.js. */
.player-dropdown {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    background: rgba(10, 12, 18, 0.97);
    border: 1px solid rgba(0, 242, 255, 0.3);
    border-radius: 10px;
    padding: 6px;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 242, 255, 0.15);
    backdrop-filter: blur(12px);
    z-index: 1080;
}

.player-dropdown.show {
    display: block;
    animation: player-dropdown-in 0.12s ease-out;
}

@keyframes player-dropdown-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.player-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #dff7ff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.player-dropdown-item + .player-dropdown-item {
    margin-top: 2px;
}

.player-dropdown-item:hover,
.player-dropdown-item:focus {
    background: rgba(0, 242, 255, 0.12);
    color: #fff;
    outline: none;
}

.player-dropdown-item.active,
.player-dropdown-item.active:hover {
    background: rgba(0, 242, 255, 0.22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 242, 255, 0.5);
}

/* === NAV BRAND LOGO === */
.nav-brand-logo {
    height: 28px;
    width: auto;
    position: relative;
    filter: brightness(1.1);
    animation:
        nav-logo-glow 3s ease-in-out infinite,
        nav-logo-shadow 3s ease-in-out infinite,
        nav-logo-glitch 8s step-end infinite;
}
.nav-brand-logo:hover {
    filter: brightness(1.4) drop-shadow(0 0 10px rgba(0,242,255,0.6));
    animation-play-state: paused, paused, paused;
}

/* Neon glow pulse — synced with nav border */
@keyframes nav-logo-glow {
    0%, 100% {
        filter: brightness(1.05) drop-shadow(0 0 3px rgba(0,242,255,0.2));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(0,242,255,0.5)) drop-shadow(0 0 16px rgba(0,242,255,0.15));
    }
}

/* Drop shadow breathing — expands and contracts */
@keyframes nav-logo-shadow {
    0%, 100% {
        text-shadow: none;
        -webkit-filter: drop-shadow(0 0 2px rgba(0,242,255,0.15));
    }
    50% {
        -webkit-filter: drop-shadow(0 0 10px rgba(0,242,255,0.4)) drop-shadow(0 2px 20px rgba(138,43,226,0.15));
    }
}

/* Glitch effect — occasional subtle RGB split */
@keyframes nav-logo-glitch {
    0%, 92%, 94%, 96%, 98%, 100% {
        transform: translate(0, 0);
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(0,242,255,0.3));
    }
    92.5% {
        transform: translate(-2px, 0);
        filter: brightness(1.3) drop-shadow(2px 0 0 rgba(0,242,255,0.6)) drop-shadow(-2px 0 0 rgba(138,43,226,0.6));
    }
    93% {
        transform: translate(2px, 1px);
        filter: brightness(1.4) drop-shadow(-2px 0 0 rgba(255,71,87,0.4)) drop-shadow(2px 0 0 rgba(0,242,255,0.5));
    }
    93.5% {
        transform: translate(0, -1px);
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(0,242,255,0.3));
    }
    95% {
        transform: translate(1px, 0);
        filter: brightness(1.5) drop-shadow(-1px 0 0 rgba(0,242,255,0.7)) drop-shadow(1px 0 0 rgba(138,43,226,0.5));
    }
    95.5% {
        transform: translate(-1px, 1px);
        filter: brightness(0.9) drop-shadow(1px 0 0 rgba(255,71,87,0.3));
    }
    97% {
        transform: translate(0, 0);
        filter: brightness(1.6) drop-shadow(0 0 6px rgba(0,242,255,0.8));
    }
    97.5% {
        transform: translate(0, 0);
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(0,242,255,0.3));
    }
}

/* Holographic shimmer — diagonal light sweep */
.navbar-brand {
    position: relative;
    overflow: hidden;
}
.navbar-brand::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(0,242,255,0.08) 40%,
        rgba(255,255,255,0.12) 50%,
        rgba(138,43,226,0.08) 60%,
        transparent 65%,
        transparent 100%
    );
    animation: nav-logo-shimmer 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes nav-logo-shimmer {
    0%, 70%, 100% { left: -100%; opacity: 0; }
    75% { opacity: 1; }
    90% { left: 200%; opacity: 1; }
    95% { opacity: 0; }
}

@media (max-width: 768px) {
    .nav-brand-logo { height: 22px; }
}

/* === SLEEK NAV REDESIGN === */
.sleek-glass-nav {
    z-index: 1030;
    background: rgba(7, 8, 11, 0.85) !important;
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(0, 242, 255, 0.5);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 8px rgba(0, 242, 255, 0.4), 0 2px 20px rgba(0, 242, 255, 0.2);
    animation: nav-border-glow 3s ease-in-out infinite;
    padding-top: 10px;
    padding-bottom: 10px;
}

@keyframes nav-border-glow {
    0%, 100% {
        border-bottom-color: rgba(0, 242, 255, 0.3);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 242, 255, 0.2), 0 2px 15px rgba(0, 242, 255, 0.1);
    }
    50% {
        border-bottom-color: rgba(0, 242, 255, 0.7);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 12px rgba(0, 242, 255, 0.5), 0 2px 30px rgba(0, 242, 255, 0.3);
    }
}

/* === SERVER STATS BAR (standalone element below the navbar) === */
.nav-stats-bar {
    background: rgba(7, 8, 11, 0.9);
    border-bottom: 1px solid rgba(0, 242, 255, 0.5);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 242, 255, 0.4), 0 2px 20px rgba(0, 242, 255, 0.2);
    animation: nav-stats-border-glow 3s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1019;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,242,255,0.25) transparent;
}
.nav-stats-bar::-webkit-scrollbar { height: 3px; }
.nav-stats-bar::-webkit-scrollbar-track { background: transparent; }
.nav-stats-bar::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.25); border-radius: 3px; }
.nav-stats-bar::-webkit-scrollbar-thumb:hover { background: rgba(0,242,255,0.5); }
@keyframes nav-stats-border-glow {
    0%, 100% {
        border-bottom-color: rgba(0, 242, 255, 0.3);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(0, 242, 255, 0.2), 0 2px 15px rgba(0, 242, 255, 0.1);
    }
    50% {
        border-bottom-color: rgba(0, 242, 255, 0.7);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 12px rgba(0, 242, 255, 0.5), 0 2px 30px rgba(0, 242, 255, 0.3);
    }
}
.nav-stats-bar.is-loaded { opacity: 1; }

.nav-stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 16px 8px;
    /* Break out of the .container so the bar can center across the full viewport width. */
    max-width: none;
    width: max-content;
    margin: 0 auto;
}

.nav-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-bottom: 6px;
}
.nav-stat > i {
    font-size: 0.7rem;
    color: rgba(0, 242, 255, 0.5);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.nav-stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}
.nav-stat-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: #dff7ff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 28px;
}

.nav-stat-divider {
    width: 1px;
    height: 18px;
    background: rgba(0, 242, 255, 0.3);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0, 242, 255, 0.2), 0 0 15px rgba(0, 242, 255, 0.1);
    animation: stat-divider-glow 3s ease-in-out infinite;
}

@keyframes stat-divider-glow {
    0%, 100% {
        background: rgba(0, 242, 255, 0.2);
        box-shadow: 0 0 4px rgba(0, 242, 255, 0.1), 0 0 10px rgba(0, 242, 255, 0.05);
    }
    50% {
        background: rgba(0, 242, 255, 0.6);
        box-shadow: 0 0 8px rgba(0, 242, 255, 0.4), 0 0 20px rgba(0, 242, 255, 0.2);
    }
}

/* Pulsing alert when keys are expiring soon. */
.nav-stat-alert {
    color: #ff6b6b !important;
    animation: nav-stat-alert-pulse 1.5s ease-in-out infinite;
}
@keyframes nav-stat-alert-pulse {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 107, 107, 0.3); }
    50%      { text-shadow: 0 0 12px rgba(255, 107, 107, 0.8); }
}

/* Widevine health status glow effects */
/* Account health indicator */
.nav-stat-acct-healthy {
    color: #00ff7f !important;
    animation: nav-stat-acct-healthy-glow 2.5s ease-in-out infinite;
}
@keyframes nav-stat-acct-healthy-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(0, 255, 127, 0.3), 0 0 10px rgba(0, 255, 127, 0.1); }
    50%      { text-shadow: 0 0 8px rgba(0, 255, 127, 0.6), 0 0 18px rgba(0, 255, 127, 0.3); }
}
.nav-stat-acct-degraded {
    color: #ffb347 !important;
    animation: nav-stat-acct-degraded-glow 2s ease-in-out infinite;
}
@keyframes nav-stat-acct-degraded-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 179, 71, 0.3), 0 0 10px rgba(255, 179, 71, 0.1); }
    50%      { text-shadow: 0 0 8px rgba(255, 179, 71, 0.6), 0 0 18px rgba(255, 179, 71, 0.3); }
}
.nav-stat-acct-down {
    color: #ff4757 !important;
    animation: nav-stat-acct-down-glow 1.5s ease-in-out infinite;
}
@keyframes nav-stat-acct-down-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 71, 87, 0.3), 0 0 10px rgba(255, 71, 87, 0.15); }
    50%      { text-shadow: 0 0 10px rgba(255, 71, 87, 0.7), 0 0 20px rgba(255, 71, 87, 0.35); }
}

/* Widevine health indicator */
.nav-stat-wv-healthy {
    color: #00ff7f !important;
    animation: nav-stat-wv-healthy-glow 2.5s ease-in-out infinite;
}
@keyframes nav-stat-wv-healthy-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(0, 255, 127, 0.3), 0 0 10px rgba(0, 255, 127, 0.1); }
    50%      { text-shadow: 0 0 8px rgba(0, 255, 127, 0.6), 0 0 18px rgba(0, 255, 127, 0.3); }
}
.nav-stat-wv-degraded {
    color: #ffb347 !important;
    animation: nav-stat-wv-degraded-glow 2s ease-in-out infinite;
}
@keyframes nav-stat-wv-degraded-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 179, 71, 0.3), 0 0 10px rgba(255, 179, 71, 0.1); }
    50%      { text-shadow: 0 0 8px rgba(255, 179, 71, 0.6), 0 0 18px rgba(255, 179, 71, 0.3); }
}
.nav-stat-wv-revoked {
    color: #ff4757 !important;
    animation: nav-stat-wv-revoked-glow 1.5s ease-in-out infinite;
}
@keyframes nav-stat-wv-revoked-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 71, 87, 0.3), 0 0 10px rgba(255, 71, 87, 0.15); }
    50%      { text-shadow: 0 0 10px rgba(255, 71, 87, 0.7), 0 0 20px rgba(255, 71, 87, 0.35); }
}

/* Tiny utilisation bar under each stat. */
.nav-stat-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.nav-stat-bar-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
    transition: width 0.8s ease, background 0.4s ease;
}
.nav-stat-bar-fill.bar-ok   { background: linear-gradient(90deg, #00f2ff, #00ff7f); box-shadow: 0 0 6px rgba(0, 255, 127, 0.4); }
.nav-stat-bar-fill.bar-warn { background: linear-gradient(90deg, #ffb347, #ff9500); box-shadow: 0 0 6px rgba(255, 179, 71, 0.4); }
.nav-stat-bar-fill.bar-crit { background: linear-gradient(90deg, #ff6b6b, #ff2a2a); box-shadow: 0 0 6px rgba(255, 42, 42, 0.5); animation: nav-bar-pulse 1.5s ease-in-out infinite; }

@keyframes nav-bar-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 42, 42, 0.4); }
    50%      { box-shadow: 0 0 12px rgba(255, 42, 42, 0.8); }
}

/* On tablets the stats wrap and center. */
@media (min-width: 768px) and (max-width: 991px) {
    .nav-stats-inner {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0 6px;
    }
    .nav-stat-divider { display: none; }
}

/* Minimalist Glowing Text Links */
.sleek-link {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 600;
    margin: 0 12px;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sleek-link:hover, .sleek-link.active {
    color: var(--neon-blue) !important;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.4);
}

/* Animated Underline Effect */
.sleek-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--neon-blue);
    transition: all 0.3s ease;
    box-shadow: 0 0 8px var(--neon-blue);
    transform: translateX(-50%);
}

.sleek-link:hover::after {
    width: 100%;
}

/* Suppress underline on dropdown toggle links */
.sleek-link-nodash::after { display: none !important; }

/* Tool Dropdown Button */
.sleek-btn-outline {
    background: rgba(0, 242, 255, 0.05);
    border: 1px solid rgba(0, 242, 255, 0.3);
    border-radius: 8px;
    padding: 8px 16px !important;
    color: var(--neon-blue) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.sleek-btn-outline:hover {
    background: rgba(0, 242, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}

/* Redesigned Logout Button */
.sleek-btn-danger {
    background: rgba(255, 42, 42, 0.05);
    border: 1px solid rgba(255, 42, 42, 0.4);
    border-radius: 8px;
    padding: 8px 16px !important;
    color: #ff2a2a !important;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.sleek-btn-danger:hover {
    background: rgba(255, 42, 42, 0.2);
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.3);
    color: #ff6b6b !important;
}

/* Glass Dropdown Menu */
.glass-dropdown {
    background: rgba(12, 13, 18, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    min-width: 200px;
}

.glass-dropdown .dropdown-item {
    color: rgba(255,255,255,0.8);
    transition: 0.2s;
    font-weight: 500;
    font-size: 0.9rem;
}

.glass-dropdown .dropdown-item:hover {
    background: rgba(0, 242, 255, 0.1);
    color: #fff;
    padding-left: 28px; /* Slight indent on hover */
}

/* === MOBILE OPTIMIZATION === */
@media (max-width: 767.98px) {

    /* --- Global spacing --- */
    .container { padding-left: 12px; padding-right: 12px; }
    .container.py-4 { padding-top: 16px !important; }

    /* --- Navbar --- */
    .sleek-glass-nav { padding-top: 6px; padding-bottom: 6px; }
    .sleek-glass-nav .container { padding-left: 10px; padding-right: 10px; }
    .navbar-brand { font-size: 1rem; }

    /* Collapsed mobile menu styling */
    .navbar-collapse {
        background: rgba(7, 8, 11, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 242, 255, 0.15);
        border-radius: 12px;
        margin-top: 8px;
        padding: 12px 16px;
    }
    .navbar-collapse .navbar-nav {
        gap: 4px;
    }
    .navbar-collapse .nav-item {
        text-align: center;
    }
    .sleek-link {
        margin: 0;
        padding: 10px 0;
        font-size: 0.9rem;
        display: block;
    }
    .sleek-btn-outline,
    .sleek-btn-danger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        margin: 4px 0 !important;
        padding: 10px 16px !important;
    }
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 4px;
    }

    /* --- Stats bar --- */
    .nav-stats-inner {
        gap: 8px 14px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 10px 6px;
        width: auto;
    }
    .nav-stat {
        gap: 4px;
        min-width: 0;
    }
    .nav-stat > i { display: none; }
    .nav-stat-label { font-size: 0.52rem; letter-spacing: 0.06em; }
    .nav-stat-value { font-size: 0.68rem; min-width: 20px; }
    .nav-stat-divider { height: 14px; }

    /* --- Section headers --- */
    section header.d-flex,
    #section-main > header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    section header .d-flex,
    #section-main > header > .d-flex {
        width: 100%;
        justify-content: space-between;
    }
    .search-wrapper {
        flex-grow: 1;
        margin-right: 8px !important;
    }
    .modern-search {
        width: 100%;
        font-size: 0.85rem;
        padding: 7px 12px 7px 32px;
    }
    .search-icon { left: 10px; font-size: 0.8rem; }
    h1.h3 { font-size: 1.2rem; }
    .status-badge { font-size: 0.7rem; padding: 3px 10px; }
    .section-subtitle { font-size: 0.75rem; letter-spacing: 1.5px; }

    /* Rows per page select */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-wrap: wrap;
        gap: 8px;
    }
    .glass-select { font-size: 0.78rem; padding: 4px 10px; }

    /* --- Channel list cards --- */
    .glass-item {
        flex-wrap: wrap;
        padding: 10px;
        border-radius: 12px;
        margin-bottom: 8px;
    }
    .col-icon { width: 44px; }
    .img-container {
        width: 40px;
        height: 40px;
    }
    .img-container-inner {
        border-radius: 7px;
        padding: 2px;
    }
    .col-info {
        width: calc(100% - 54px);
        flex: none;
        padding-left: 10px;
        margin-bottom: 0;
    }
    .channel-name { font-size: 0.88rem; }
    .channel-ccid { font-size: 0.72rem; }

    /* EPG now/next text in channel rows */
    .sched-epg-row { gap: 4px; flex-wrap: wrap; }
    .sched-epg-title { font-size: 0.72rem; }
    .sched-epg-time { font-size: 0.62rem; }
    .sched-epg-label { font-size: 0.52rem; padding: 1px 5px; }
    .sched-epg-viewall { font-size: 0.52rem; padding: 1px 6px; }

    /* Action buttons row */
    .col-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding-top: 10px;
        margin-top: 8px;
        margin-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .col-actions .cache-badge {
        width: 100% !important;
        max-width: 100% !important;
        order: -1;
        margin-right: 0;
        margin-bottom: 6px;
        font-size: 0.62rem;
        text-align: center;
        justify-content: center;
    }
    .col-actions .btn-icon-neon,
    .col-actions .btn-icon-danger,
    .col-actions .ch-action-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 0.78rem;
        margin: 0 !important;
        flex-shrink: 0;
    }
    .col-actions .stream-indicator {
        margin-left: 4px;
    }

    /* --- Pagination --- */
    .pagination-container {
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 24px;
    }
    .btn-page-nav {
        padding: 8px 14px;
        font-size: 0.78rem;
        border-radius: 10px;
    }
    .page-indicator {
        width: 100%;
        text-align: center;
        order: -1;
        padding: 8px 14px;
        font-size: 0.8rem;
        margin-bottom: 2px;
    }

    /* --- Events --- */
    .event-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .event-info { padding: 12px 14px 10px; gap: 10px; }

    /* --- Logs --- */
    .terminal-box { height: 60vh; font-size: 0.74rem; padding: 8px; }
    #section-logs .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
    }
    .log-toolbar { width: 100%; justify-content: flex-end; }
    #log-type-select { flex: 1; font-size: 0.78rem; }
    .log-status-indicator { margin-left: 8px; font-size: 0.6rem; padding: 2px 8px; }

    /* --- EPG page --- */
    .epg-stats-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .epg-stat { padding: 10px 12px; }
    .epg-stat-label { font-size: 0.58rem; }
    .epg-stat-value { font-size: 0.82rem; }
    .epg-url-card { padding: 14px; }
    .epg-url-row { flex-direction: column; gap: 8px; }
    .epg-url-copy { width: 100%; height: 40px; }
    .epg-url-input { font-size: 0.78rem; }
    .epg-picker-grid { grid-template-columns: 1fr; }
    .epg-guide { max-height: 50vh; }
    .epg-now { padding: 12px 14px; }
    .epg-now-title { font-size: 1rem; }
    .epg-now-header { gap: 6px; }
    .epg-now-remaining { margin-left: 0; margin-top: 4px; }
    .epg-row { grid-template-columns: 50px 1fr; gap: 8px; padding: 10px 12px; }
    .epg-row-start { font-size: 0.82rem; }
    .epg-selected-logo { width: 48px; height: 48px; padding: 4px; border-radius: 10px; }
    .epg-selected-name { font-size: 0.9rem; }

    /* --- Export page --- */
    .export-cards { gap: 10px; }
    .export-card-header { gap: 8px; }
    .export-card-badges { margin-left: 0; width: 100%; }

    /* --- Modals --- */
    .glass-modal { border-radius: 14px; }
    .modal-dialog { margin: 10px; }
    .modal-body { padding: 14px; }

    /* --- Login --- */
    .login-card-inner { padding: 24px 16px; }
    .login-title { font-size: 1.1rem; }
    .login-input { font-size: 0.85rem; }

    /* --- Player modal --- */
    #playerModal .modal-dialog { margin: 6px; }
    .player-controls { padding: 8px 10px; }
    .player-controls-group { flex-wrap: wrap; gap: 6px; }
    .btn-player-menu { font-size: 0.78rem; padding: 6px 10px; }
    .btn-player-menu .label { display: none; }
    .btn-player-menu .value { margin-left: 0; }

    /* --- Footer --- */
    footer p { font-size: 0.7rem !important; }

    /* --- Playlist dropdown --- */
    .playlist-dropdown { min-width: 200px; }

    /* --- Nav links on mobile (fix stacking) --- */
    .sleek-link {
        display: flex !important;
        margin: 0;
        padding: 10px 0;
        font-size: 0.9rem;
    }

    /* --- Scores page --- */
    .scores-grid { grid-template-columns: 1fr; gap: 10px; }
    .score-card { padding: 12px 14px; }
    .score-card-team { font-size: 0.88rem; }
    .score-card-pts { font-size: 1.15rem; }

    /* --- VOD --- */
    .vod-card { width: 130px; }
    .vod-poster-wrap { width: 130px; height: 195px; }
    .vod-scroll-row { gap: 10px; }
    .vod-scroll-arrow { display: none; }
    .vod-title { font-size: 0.72rem; }
    .vod-category-title { font-size: 0.78rem; }
    .vod-detail { flex-direction: column; gap: 16px; }
    .vod-detail-poster { width: 140px; }
    .vod-detail-title { font-size: 1.1rem; }
    .vod-detail-desc { font-size: 0.8rem; }
    .vod-grid-full { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .vod-season-bar { flex-wrap: wrap; }
    .vod-episodes-list { max-height: 40vh; }
    .vod-ep-actions { flex-wrap: wrap; }

    /* --- Licenses --- */
    .lic-key-value code { font-size: 0.85rem; letter-spacing: 1px; }
    .lic-info-row { gap: 12px; }
    .lic-actions { flex-wrap: wrap; }

    /* --- Stream viewers modal --- */
    .stream-viewer-card { gap: 8px; padding: 10px 12px; }
    .stream-viewer-ip { font-size: 0.8rem; }

    /* --- Task progress --- */
    .task-log-feed { max-height: 250px; font-size: 0.65rem; }
    .task-stat-value { font-size: 1rem; }

    /* --- Event score inline --- */
    .event-score-inline { padding: 6px 10px; }
    .esb-team { font-size: 0.72rem; }
    .esb-pts { font-size: 0.85rem; }

    /* --- Misc --- */
    .typing-text { display: none; }

    /* --- Settings responsive --- */
    .settings-tab-nav { gap: 2px; padding: 4px; }
    .settings-tab { padding: 7px 12px; font-size: 0.75rem; }
    .settings-field { flex-direction: column; align-items: stretch; }
    .settings-field-control { max-width: 100%; }
    .settings-dict-row { flex-wrap: wrap; }
    .settings-dict-key, .settings-dict-val { min-width: 0; flex: 1 1 100%; }
    .settings-dict-arrow { display: none; }
    .settings-account-fields { flex-direction: column; }
    .settings-account-field { min-width: 100%; }
}

/* ─── Settings Page Header ─── */
.settings-page-header {
    background: rgba(0,0,0,0.2); border: 1px solid transparent; border-radius: 14px;
    padding: 16px 20px; margin-bottom: 16px; position: relative;
}
.settings-page-header::before, .settings-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.settings-page-header::before {
    background: conic-gradient(from var(--set-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: set-hdr-rotate 6s linear infinite; z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.settings-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.settings-page-header > * { position: relative; z-index: 1; }
@property --set-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes set-hdr-rotate { to { --set-hdr-angle: 360deg; } }
.settings-page-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.settings-page-title { display: flex; align-items: center; gap: 14px; }
.settings-page-icon {
    font-size: 1.6rem; color: var(--neon-blue); text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: set-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes set-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .settings-page-header::before { background: none; animation: none; }
    .settings-page-header { border: 1px solid rgba(0,242,255,0.15); }
}

/* ─── Licenses Page Header ─── */
.licenses-page-header {
    background: rgba(0,0,0,0.2); border: 1px solid transparent; border-radius: 14px;
    padding: 16px 20px; margin-bottom: 16px; position: relative;
}
.licenses-page-header::before, .licenses-page-header::after {
    content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
}
.licenses-page-header::before {
    background: conic-gradient(from var(--lic-hdr-angle, 0deg), transparent 0%, transparent 70%, rgba(0,242,255,0.5) 80%, rgba(138,43,226,0.35) 88%, rgba(0,242,255,0.6) 92%, transparent 100%);
    animation: lic-hdr-rotate 6s linear infinite; z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.licenses-page-header::after { background: rgba(0,0,0,0.2); z-index: 0; }
.licenses-page-header > * { position: relative; z-index: 1; }
@property --lic-hdr-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lic-hdr-rotate { to { --lic-hdr-angle: 360deg; } }
.licenses-page-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.licenses-page-title { display: flex; align-items: center; gap: 14px; }
.licenses-page-icon {
    font-size: 1.6rem; color: var(--neon-blue); text-shadow: 0 0 12px rgba(0,242,255,0.5);
    animation: lic-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes lic-icon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(0,242,255,0.3); }
    50%      { text-shadow: 0 0 18px rgba(0,242,255,0.6), 0 0 30px rgba(0,242,255,0.2); }
}
.licenses-toolbar { display: flex; align-items: center; gap: 8px; }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .licenses-page-header::before { background: none; animation: none; }
    .licenses-page-header { border: 1px solid rgba(0,242,255,0.15); }
}

/* ═══════════════════════════════════════════════
   SETTINGS PAGE
   ═══════════════════════════════════════════════ */

/* Tab navigation */
.settings-tab-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--glass);
    border: 1px solid rgba(0,242,255,0.08);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 0 10px rgba(0,242,255,0.04);
    animation: settings-nav-glow 3s ease-in-out infinite alternate;
}
@keyframes settings-nav-glow {
    0%   { border-color: rgba(0,242,255,0.06); box-shadow: 0 0 6px rgba(0,242,255,0.02); }
    100% { border-color: rgba(0,242,255,0.18); box-shadow: 0 0 14px rgba(0,242,255,0.06); }
}
.settings-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #6b7b8d;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.settings-tab:hover {
    color: #c0d0e0;
    background: rgba(255, 255, 255, 0.04);
}
.settings-tab.active {
    color: #fff;
    background: rgba(0, 242, 255, 0.1);
    border-color: var(--neon-blue);
    box-shadow: 0 0 12px rgba(0, 242, 255, 0.15);
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
}
.settings-tab.active i {
    color: var(--neon-blue);
    text-shadow: 0 0 8px rgba(0,242,255,0.5);
}

/* Select dropdown for settings */
.settings-select {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 242, 255, 0.3) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    appearance: auto;
}
.settings-select option {
    background: #07080b;
    color: #fff;
}
.settings-select:focus {
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 12px rgba(0, 242, 255, 0.25);
}
.settings-select:hover {
    border-color: rgba(0, 242, 255, 0.5) !important;
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.1);
}

.settings-group {
    background: var(--glass);
    border: 1px solid transparent;
    border-radius: 14px;
    margin-bottom: 16px;
    transition: box-shadow 0.3s ease;
    position: relative;
}
.settings-group:hover {
    box-shadow: 0 0 18px rgba(0,242,255,0.06), inset 0 0 20px rgba(0,242,255,0.015);
}
/* Rotating neon border */
.settings-group::before,
.settings-group::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    pointer-events: none;
}
.settings-group::before {
    background: conic-gradient(
        from var(--settings-border-angle, 0deg),
        transparent 0%,
        transparent 70%,
        rgba(0,242,255,0.5) 80%,
        rgba(138,43,226,0.35) 88%,
        rgba(0,242,255,0.6) 92%,
        transparent 100%
    );
    animation: settings-border-rotate 6s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.settings-group::after {
    background: var(--glass);
    z-index: 0;
}
.settings-group > * {
    position: relative;
    z-index: 1;
}
@property --settings-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes settings-border-rotate {
    to { --settings-border-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .settings-group::before { background: none; animation: none; }
    .settings-group { border: 1px solid var(--glass-border); animation: settings-group-glow-fb 3s ease-in-out infinite alternate; }
    @keyframes settings-group-glow-fb {
        0%   { border-color: rgba(0,242,255,0.06); box-shadow: 0 0 6px rgba(0,242,255,0.02); }
        100% { border-color: rgba(0,242,255,0.18); box-shadow: 0 0 14px rgba(0,242,255,0.06); }
    }
}

.settings-group-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(0,242,255,0.06);
}
.settings-group-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 0 8px rgba(0,242,255,0.2);
}
.settings-group-title i {
    color: var(--neon-blue);
    text-shadow: 0 0 8px rgba(0,242,255,0.4);
}
.settings-group-desc {
    font-size: 0.78rem;
    color: #8a9bb0;
    line-height: 1.5;
}

.settings-group-body {
    padding: 4px 0;
}

.settings-field {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}
.settings-field:last-child {
    border-bottom: none;
}
.settings-field:hover {
    background: rgba(0, 242, 255, 0.015);
}
.settings-field:hover .settings-field-label {
    text-shadow: 0 0 6px rgba(0,242,255,0.2);
}

.settings-field-info {
    flex: 1 1 40%;
    min-width: 200px;
}
.settings-field-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e0e8f0;
    margin-bottom: 4px;
    text-shadow: 0 0 4px rgba(0,242,255,0.1);
}
.settings-field-desc {
    font-size: 0.75rem;
    color: #6b7b8d;
    line-height: 1.5;
}

.settings-field-control {
    flex: 1 1 55%;
    max-width: 550px;
}

.settings-input {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.settings-input:focus {
    border-color: rgba(0,242,255,0.4) !important;
    box-shadow: 0 0 10px rgba(0,242,255,0.12) !important;
}

/* Toggle switch */
.settings-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.settings-toggle input {
    display: none;
}
.settings-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.settings-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #6b7b8d;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.settings-toggle input:checked + .settings-toggle-slider {
    background: rgba(0, 242, 255, 0.15);
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0,242,255,0.15);
}
.settings-toggle input:checked + .settings-toggle-slider::after {
    transform: translateX(20px);
    background: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.5), 0 0 20px rgba(0, 242, 255, 0.2);
}
.settings-toggle-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #8a9bb0;
}
.settings-toggle input:checked ~ .settings-toggle-label {
    color: var(--neon-blue);
}

/* String with eye toggle */
.settings-str-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.settings-str-wrap input {
    padding-right: 40px !important;
}
.settings-eye-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #6b7b8d;
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
    transition: color 0.2s;
}
.settings-eye-btn:hover {
    color: var(--neon-blue);
}

/* List items */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-list-input {
    flex: 1;
}
.settings-list-remove {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    border-radius: 8px !important;
    font-size: 0.75rem;
}
.settings-add-btn {
    background: rgba(0, 242, 255, 0.06);
    border: 1px dashed rgba(0, 242, 255, 0.3);
    color: var(--neon-blue);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
    width: 100%;
    text-align: center;
}
.settings-add-btn:hover {
    background: rgba(0, 242, 255, 0.12);
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0,242,255,0.1);
    text-shadow: 0 0 6px rgba(0,242,255,0.3);
}

/* Dict rows */
.settings-dict {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-dict-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-dict-key {
    flex: 1 1 45%;
}
.settings-dict-arrow {
    color: rgba(0,242,255,0.3);
    font-size: 0.8rem;
    flex-shrink: 0;
    text-shadow: 0 0 4px rgba(0,242,255,0.2);
}
.settings-dict-val {
    flex: 1 1 35%;
}

/* Full-width and stacked field layouts */
.settings-field-full {
    display: block !important;
}
.settings-field-control-full {
    max-width: 100% !important;
    flex: none !important;
}
.settings-field-stacked .settings-field-info {
    margin-bottom: 12px;
}
.settings-field-stacked .settings-field-control {
    margin-top: 0;
}

.settings-accounts-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.settings-accounts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.settings-account-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0,242,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.settings-account-card:hover {
    border-color: rgba(0,242,255,0.15);
    box-shadow: 0 0 12px rgba(0,242,255,0.04);
}
.settings-account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.settings-account-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-account-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--neon-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Account status badges */
.settings-account-status {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.03em;
    transition: all 0.3s;
}
.settings-account-status.checking {
    color: #7fd9ff;
    background: rgba(127, 217, 255, 0.08);
}
.settings-account-status.status-ok {
    color: #00ff7f;
    background: rgba(0, 255, 127, 0.1);
    border: 1px solid rgba(0, 255, 127, 0.3);
}
.settings-account-status.status-dead {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    animation: exp-pulse-crit 1.5s ease-in-out infinite;
}

.settings-account-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
}
.settings-account-field {
    flex: 1 1 30%;
    min-width: 180px;
}
.settings-account-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    color: #6b7b8d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Account subscription info */
.settings-account-info {
    border-top: 1px solid rgba(0,242,255,0.06);
    padding: 12px 14px;
}
.acct-info-row {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.acct-info-stat {
    flex: 1 1 auto; min-width: 100px;
    background: rgba(0,242,255,0.03); border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px; padding: 6px 10px; text-align: center;
}
.acct-info-label {
    display: block; font-size: 0.58rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: rgba(255,255,255,0.3); margin-bottom: 2px;
}
.acct-info-value {
    display: block; font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.7);
}
.acct-info-active { color: #00dc82; }
.acct-info-warn { color: #ffb400; }
.acct-info-highlight { color: #00f2ff; }
.acct-info-packages { margin-bottom: 8px; }
.acct-info-pkg-label {
    display: block; font-size: 0.62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: rgba(255,255,255,0.3); margin-bottom: 6px;
}
.acct-info-pkg-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.acct-info-pkg {
    font-size: 0.68rem; padding: 2px 8px; border-radius: 4px;
    background: rgba(0,242,255,0.06); border: 1px solid rgba(0,242,255,0.10);
    color: rgba(255,255,255,0.65); white-space: nowrap;
}
.acct-info-ents-details { margin-top: 4px; }
.acct-info-ents-summary {
    font-size: 0.68rem; color: rgba(255,255,255,0.35); cursor: pointer;
    padding: 4px 0; user-select: none;
}
.acct-info-ents-summary:hover { color: rgba(255,255,255,0.6); }
.acct-info-ents-grid {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
    max-height: 120px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(0,242,255,0.15) transparent;
}
.acct-info-ents-grid::-webkit-scrollbar { width: 3px; }
.acct-info-ents-grid::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.15); border-radius: 3px; }
.acct-info-ent {
    font-size: 0.62rem; padding: 1px 6px; border-radius: 3px;
    background: rgba(180,110,255,0.06); border: 1px solid rgba(180,110,255,0.10);
    color: rgba(180,110,255,0.7); font-family: 'JetBrains Mono','Fira Code',monospace;
}
.acct-info-channels-note {
    font-size: 0.68rem; color: rgba(255,255,255,0.3); margin-top: 8px;
    padding: 6px 10px; background: rgba(255,255,255,0.02);
    border-radius: 4px; border: 1px solid rgba(255,255,255,0.04);
}

/* Restart overlay */
.settings-restart-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}
.settings-restart-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

/* ─────────────────────────────────────────────
   Cache Management Panel
   ───────────────────────────────────────────── */
.cache-store-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s;
}
.cache-store-card:last-child { border-bottom: none; }
.cache-store-card:hover { background: rgba(0,242,255,0.03); }

.cache-store-info { flex: 1; min-width: 0; }

.cache-store-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cache-store-icon {
    color: var(--neon);
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}
.cache-store-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}
.cache-store-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
    padding-left: 28px;
}
.cache-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.cache-badge-active {
    background: rgba(0,242,255,0.15);
    color: var(--neon);
    border: 1px solid rgba(0,242,255,0.25);
}
.cache-badge-empty {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.08);
}
.cache-store-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cache-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.cache-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.cache-btn-flush {
    background: rgba(255,107,107,0.1);
    border-color: rgba(255,107,107,0.3);
    color: #ff6b6b;
}
.cache-btn-flush:hover:not(:disabled) {
    background: rgba(255,107,107,0.2);
    box-shadow: 0 0 12px rgba(255,107,107,0.15);
}
.cache-btn-rebuild {
    background: rgba(0,242,255,0.1);
    border-color: rgba(0,242,255,0.3);
    color: var(--neon);
}
.cache-btn-rebuild:hover:not(:disabled) {
    background: rgba(0,242,255,0.2);
    box-shadow: 0 0 12px rgba(0,242,255,0.15);
}
.cache-btn-success {
    background: rgba(46,213,115,0.15) !important;
    border-color: rgba(46,213,115,0.4) !important;
    color: #2ed573 !important;
}
.cache-btn-error {
    background: rgba(255,71,87,0.15) !important;
    border-color: rgba(255,71,87,0.4) !important;
    color: #ff4757 !important;
}

@media (max-width: 600px) {
    .cache-store-card { flex-direction: column; align-items: stretch; }
    .cache-store-actions { justify-content: flex-end; }
    .cache-store-desc { padding-left: 0; }
}

/* ─────────────────────────────────────────────
   Channel Detail Modal — Redesign
   ───────────────────────────────────────────── */

/* Hero header */
.ch-modal-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 16px;
    margin: -16px -16px 16px;
    border-bottom: 1px solid rgba(0,242,255,0.12);
    background: linear-gradient(135deg, rgba(0,242,255,0.04) 0%, rgba(138,43,226,0.03) 50%, transparent 100%);
    border-radius: 16px 16px 0 0;
    position: relative;
    overflow: hidden;
}
.ch-modal-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,242,255,0.5), rgba(138,43,226,0.3), transparent);
    animation: ch-modal-hero-glow 4s ease-in-out infinite;
}
@keyframes ch-modal-hero-glow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
.ch-modal-logo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid rgba(0,242,255,0.25);
    flex-shrink: 0;
    padding: 6px;
    box-shadow: 0 0 12px rgba(0,242,255,0.15), 0 0 30px rgba(0,242,255,0.06);
    animation: ch-modal-logo-float 3s ease-in-out infinite;
}
@keyframes ch-modal-logo-float {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 12px rgba(0,242,255,0.15), 0 0 30px rgba(0,242,255,0.06); }
    50%      { transform: translateY(-6px); box-shadow: 0 0 18px rgba(0,242,255,0.3), 0 0 40px rgba(0,242,255,0.12); }
}
.ch-modal-hero-info {
    flex: 1;
    min-width: 0;
}
.ch-modal-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10px rgba(0,242,255,0.3);
}
.ch-modal-ccid {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    font-family: monospace;
    margin-top: 2px;
}
.ch-modal-hero-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ch-modal-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease, transform 0.2s ease;
    font-size: 1rem;
    outline: none;
    background: transparent;
}
.ch-modal-btn-play {
    background: rgba(0,255,127,0.08);
    border-color: rgba(0,255,127,0.5);
    color: #00ff7f;
    box-shadow: 0 0 8px rgba(0,255,127,0.12);
    animation: ch-modal-btn-play-glow 3s ease-in-out infinite;
}
.ch-modal-btn-play:hover {
    background: rgba(0,255,127,0.2);
    box-shadow: 0 0 20px rgba(0,255,127,0.45);
    color: #00ff7f;
    transform: scale(1.08);
}
@keyframes ch-modal-btn-play-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(0,255,127,0.1); }
    50%      { box-shadow: 0 0 14px rgba(0,255,127,0.3); }
}
.ch-modal-btn-refresh {
    background: rgba(255,165,0,0.08);
    border-color: rgba(255,165,0,0.5);
    color: #ffa500;
    box-shadow: 0 0 8px rgba(255,165,0,0.1);
}
.ch-modal-btn-refresh:hover {
    background: rgba(255,165,0,0.2);
    box-shadow: 0 0 20px rgba(255,165,0,0.35);
    color: #ffa500;
    transform: scale(1.08);
}
.ch-modal-btn-copy {
    background: rgba(0,242,255,0.08);
    border-color: rgba(0,242,255,0.5);
    color: var(--neon-blue);
    box-shadow: 0 0 8px rgba(0,242,255,0.1);
}
.ch-modal-btn-copy:hover {
    background: rgba(0,242,255,0.2);
    box-shadow: 0 0 20px rgba(0,242,255,0.35);
    color: var(--neon-blue);
    transform: scale(1.08);
}
.ch-modal-btn-download {
    background: rgba(168,85,247,0.08);
    border-color: rgba(168,85,247,0.5);
    color: #a855f7;
    box-shadow: 0 0 8px rgba(168,85,247,0.1);
}
.ch-modal-btn-download:hover {
    background: rgba(168,85,247,0.2);
    box-shadow: 0 0 20px rgba(168,85,247,0.35);
    color: #a855f7;
    transform: scale(1.08);
}

.ch-modal-btn-qualities {
    color: #b46eff;
    border-color: rgba(180, 110, 255, 0.45);
    background: rgba(180, 110, 255, 0.08);
}
.ch-modal-btn-qualities:hover {
    color: #d7b7ff;
    border-color: #b46eff;
    background: rgba(180, 110, 255, 0.18);
    box-shadow: 0 0 14px rgba(180, 110, 255, 0.3);
}

/* Stream quality/link browser */
.quality-links-loading,
.quality-links-empty {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(255,255,255,0.58);
    text-align: center;
}
.quality-links-empty > i { font-size: 2rem; color: #b46eff; }
.quality-links-error > i { color: #ff5e7a; }
.quality-links-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(0,242,255,0.16);
    border-radius: 10px;
    background: rgba(0,242,255,0.045);
    color: #dffbff;
    font-size: 0.82rem;
    font-weight: 600;
}
.quality-adaptive-btn,
.quality-url-btn {
    border: 1px solid rgba(0,242,255,0.32);
    border-radius: 7px;
    color: #00f2ff;
    background: rgba(0,242,255,0.07);
    cursor: pointer;
    transition: all .2s ease;
}
.quality-adaptive-btn { padding: 7px 11px; font-size: 0.72rem; }
.quality-adaptive-copy {
    min-width: 0;
    flex: 1 1 430px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.quality-adaptive-input { max-width: 430px; }
.quality-adaptive-btn:hover,
.quality-url-btn:hover {
    background: rgba(0,242,255,0.16);
    border-color: #00f2ff;
    box-shadow: 0 0 10px rgba(0,242,255,0.18);
}
.quality-links-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 12px;
}
.quality-link-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(180,110,255,0.18);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(14,18,27,0.88), rgba(7,9,15,0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.quality-link-head,
.quality-link-meta,
.quality-url-row { display: flex; align-items: center; }
.quality-link-head { justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.quality-resolution { color: #fff; font-size: 1.02rem; font-weight: 800; }
.quality-codec {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 5px;
    color: #00dc82;
    background: rgba(0,220,130,.09);
    border: 1px solid rgba(0,220,130,.22);
    font-size: .62rem;
    font-weight: 800;
}
.quality-bandwidth { color: #b46eff; font-size: .78rem; font-weight: 700; }
.quality-link-meta { flex-wrap: wrap; gap: 6px 12px; margin-bottom: 11px; color: #8e9ba8; font-size: .68rem; }
.quality-fps { color: #d2b6ff; }
.quality-fps i { margin-right: 4px; color: #b46eff; }
.quality-track { color: #a9d8c2; }
.quality-track i { margin-right: 4px; color: #00dc82; }
.quality-url-row {
    gap: 7px;
    margin-top: 7px;
    padding: 7px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
}
.quality-url-type { width: 26px; flex: 0 0 26px; color: #00f2ff; font-size: .62rem; font-weight: 800; }
.quality-url-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 27px;
    padding: 0 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #91a4b6 !important;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    outline: none;
    font-family: 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    font-size: .62rem;
}
.quality-url-input:focus {
    color: #dffbff !important;
    border-color: rgba(0,242,255,.28);
    background: rgba(0,242,255,.045);
}
.quality-url-btn {
    width: 29px;
    height: 27px;
    flex: 0 0 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .66rem;
}
.quality-play-btn { color: #00ff7f; border-color: rgba(0,255,127,.32); }
.quality-copy-success {
    color: #00ff7f !important;
    border-color: rgba(0,255,127,.65) !important;
    background: rgba(0,255,127,.14) !important;
    box-shadow: 0 0 12px rgba(0,255,127,.22) !important;
}
@media (max-width: 600px) {
    .quality-links-summary { align-items: stretch; flex-direction: column; }
    .quality-adaptive-copy { flex: 1 1 auto; width: 100%; }
    .quality-adaptive-input { max-width: none; }
    .quality-adaptive-btn { white-space: nowrap; }
    .quality-links-list { grid-template-columns: 1fr; }
    .quality-url-input { max-width: 155px; }
}
.ch-modal-btn-success {
    background: rgba(0,255,127,0.15) !important;
    border-color: rgba(0,255,127,0.5) !important;
    color: #00ff7f !important;
    box-shadow: 0 0 14px rgba(0,255,127,0.25) !important;
}

/* Channel modal — mobile responsive */
@media (max-width: 576px) {
    .ch-modal-hero {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px 12px;
    }
    .ch-modal-logo {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    .ch-modal-name { font-size: 0.95rem; }
    .ch-modal-ccid { font-size: 0.7rem; }
    .ch-modal-hero-actions {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }
    .ch-modal-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 0.85rem;
        flex: 1;
        max-width: 52px;
    }
}
@media (max-width: 400px) {
    .ch-modal-hero-actions { gap: 4px; }
    .ch-modal-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.78rem;
    }
}

/* EPG Now Playing */
.ch-modal-epg {
    background: rgba(0,242,255,0.03);
    border: 1px solid rgba(0,242,255,0.1);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 0 15px rgba(0,242,255,0.05), inset 0 0 20px rgba(0,242,255,0.02);
    animation: ch-modal-epg-glow 4s ease-in-out infinite alternate;
}
@keyframes ch-modal-epg-glow {
    0%   { border-color: rgba(0,242,255,0.08); box-shadow: 0 0 10px rgba(0,242,255,0.03), inset 0 0 15px rgba(0,242,255,0.01); }
    100% { border-color: rgba(0,242,255,0.2); box-shadow: 0 0 20px rgba(0,242,255,0.08), inset 0 0 25px rgba(0,242,255,0.03); }
}
.ch-modal-epg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.ch-modal-epg-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff4757;
    text-transform: uppercase;
}
.ch-modal-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff4757;
    display: inline-block;
    animation: ch-modal-pulse 1.5s ease-in-out infinite;
}
@keyframes ch-modal-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,71,87,0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(255,71,87,0.25); }
}
.ch-modal-epg-time {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-family: monospace;
}
.ch-modal-epg-remaining {
    font-size: 0.7rem;
    color: var(--neon-blue);
    font-weight: 600;
    margin-left: auto;
}
.ch-modal-epg-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch-modal-epg-progress {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.ch-modal-epg-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue), #00ff7f);
    border-radius: 2px;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(0,242,255,0.4), 0 0 12px rgba(0,255,127,0.2);
}
.ch-modal-epg-next {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ch-modal-epg-next-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.ch-modal-epg-next-title {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Status bar */
.ch-modal-status-bar {
    display: flex;
    gap: 0;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(0,242,255,0.08);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(0,242,255,0.04);
    animation: ch-modal-status-glow 3s ease-in-out infinite alternate;
}
@keyframes ch-modal-status-glow {
    0% {
        border-color: rgba(0,242,255,0.07);
        box-shadow: 0 0 8px rgba(0,242,255,0.04), inset 0 0 10px rgba(0,242,255,0.015);
    }
    100% {
        border-color: rgba(0,242,255,0.28);
        box-shadow: 0 0 22px rgba(0,242,255,0.12), inset 0 0 20px rgba(0,242,255,0.05);
    }
}
.ch-modal-status-item {
    flex: 1;
    padding: 10px 14px;
    text-align: center;
    border-right: 1px solid rgba(0,242,255,0.06);
}
.ch-modal-status-item:last-child {
    border-right: none;
}
.ch-modal-status-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 4px;
}
.ch-modal-status-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
}
.ch-modal-status-active { color: #00ff7f; text-shadow: 0 0 6px rgba(0,255,127,0.4), 0 0 14px rgba(0,255,127,0.15); }
.ch-modal-status-expired { color: #ff4757; text-shadow: 0 0 6px rgba(255,71,87,0.4), 0 0 14px rgba(255,71,87,0.15); }
.ch-modal-status-expiring { color: #ffc107; text-shadow: 0 0 6px rgba(255,193,7,0.4), 0 0 14px rgba(255,193,7,0.15); }

/* Sections */
.ch-modal-section {
    margin-bottom: 18px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(0,242,255,0.06);
    border-radius: 14px;
    padding: 16px;
    position: relative;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.ch-modal-section:hover {
    border-color: rgba(0,242,255,0.15);
    box-shadow: 0 0 20px rgba(0,242,255,0.06), inset 0 0 30px rgba(0,242,255,0.02);
}
/* Rotating neon border trace */
.ch-modal-section::before,
.ch-modal-section::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    pointer-events: none;
}
.ch-modal-section::before {
    background: conic-gradient(
        from var(--ch-border-angle, 0deg),
        transparent 0%,
        transparent 70%,
        rgba(0,242,255,0.5) 80%,
        rgba(138,43,226,0.35) 88%,
        rgba(0,242,255,0.6) 92%,
        transparent 100%
    );
    animation: ch-modal-border-rotate 5s linear infinite;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
.ch-modal-section::after {
    background: rgba(0,0,0,0.18);
    z-index: 0;
}
.ch-modal-section > * {
    position: relative;
    z-index: 1;
}
@property --ch-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes ch-modal-border-rotate {
    to { --ch-border-angle: 360deg; }
}
/* Fallback for browsers that don't support @property (Firefox/Safari):
   Use a simple pulsing border glow instead of the rotating trace. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .ch-modal-section::before {
        background: none;
        animation: none;
        border: 1px solid rgba(0,242,255,0.15);
    }
    .ch-modal-section {
        animation: ch-modal-section-pulse 3s ease-in-out infinite alternate;
    }
    @keyframes ch-modal-section-pulse {
        0%   { border-color: rgba(0,242,255,0.06); box-shadow: 0 0 8px rgba(0,242,255,0.03); }
        100% { border-color: rgba(0,242,255,0.2); box-shadow: 0 0 18px rgba(0,242,255,0.08); }
    }
}
.ch-modal-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--neon-blue);
    text-shadow: 0 0 8px rgba(0,242,255,0.4);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,242,255,0.08);
    display: flex;
    align-items: center;
}

/* Manifest rows */
.ch-modal-manifest {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.25s ease;
}
.ch-modal-manifest:hover {
    background: rgba(0,242,255,0.03);
    border-color: rgba(0,242,255,0.12);
    box-shadow: 0 0 10px rgba(0,242,255,0.04);
}
.ch-modal-manifest-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
}
.ch-modal-manifest-label i {
    width: 14px;
    text-align: center;
    color: rgba(0,242,255,0.5);
}

/* Key cards */
.ch-modal-key-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.ch-modal-key-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--neon-blue), rgba(138,43,226,0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ch-modal-key-card:hover {
    border-color: rgba(0,242,255,0.18);
    box-shadow: 0 0 16px rgba(0,242,255,0.06), inset 0 0 20px rgba(0,242,255,0.015);
    background: rgba(0,242,255,0.015);
    transform: translateX(2px);
}
.ch-modal-key-card:hover::after {
    opacity: 1;
}
.ch-modal-key-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ch-modal-key-tiers {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.ch-modal-tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(0,242,255,0.1);
    border: 1px solid rgba(0,242,255,0.25);
    color: var(--neon-blue);
    box-shadow: 0 0 6px rgba(0,242,255,0.12);
    text-shadow: 0 0 4px rgba(0,242,255,0.3);
}
.ch-modal-tier-4k {
    background: rgba(255,193,7,0.12);
    border-color: rgba(255,193,7,0.35);
    color: #ffc107;
    box-shadow: 0 0 6px rgba(255,193,7,0.15);
    text-shadow: 0 0 4px rgba(255,193,7,0.3);
}
.ch-modal-tier-hd {
    background: rgba(0,255,127,0.08);
    border-color: rgba(0,255,127,0.25);
    color: #00ff7f;
    box-shadow: 0 0 6px rgba(0,255,127,0.12);
    text-shadow: 0 0 4px rgba(0,255,127,0.3);
}
.ch-modal-tier-audio {
    background: rgba(168,85,247,0.1);
    border-color: rgba(168,85,247,0.3);
    color: #a855f7;
    box-shadow: 0 0 6px rgba(168,85,247,0.15);
    text-shadow: 0 0 4px rgba(168,85,247,0.3);
}
.ch-modal-key-codec {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    background: none;
}
.ch-modal-key-field {
    margin-bottom: 8px;
}
.ch-modal-key-field:last-child {
    margin-bottom: 0;
}
.ch-modal-key-field label {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    display: block;
}
.ch-modal-key-pssh .glass-input {
    font-size: 0.7rem !important;
    opacity: 0.7;
}

/* Empty state */
.ch-modal-empty {
    text-align: center;
    padding: 16px;
    color: rgba(255,255,255,0.3);
    font-size: 0.82rem;
    background: rgba(0,0,0,0.15);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 8px;
}

/* Error state */
.ch-modal-error {
    text-align: center;
    padding: 24px 16px;
    margin-bottom: 10px;
}
.ch-modal-error > i {
    font-size: 2.2rem;
    color: #ff4757;
    margin-bottom: 12px;
    display: block;
}
.ch-modal-error-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ff4757;
    margin-bottom: 8px;
}
.ch-modal-error-msg {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
    line-height: 1.5;
}
.ch-modal-cooldown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,193,7,0.08);
    border: 1px solid rgba(255,193,7,0.25);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffc107;
    margin-bottom: 10px;
}
.ch-modal-error-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
}
/* ─── Auto Scan History Modal ─── */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.auto-scan-modal {
    background: #1a1a2e; border: 1px solid rgba(0,242,255,0.15);
    border-radius: 16px; width: 90%; max-width: 620px; max-height: 80vh;
    display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal-header h3 { margin: 0; font-size: 1.1rem; color: #00f2ff; }
.modal-close {
    background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer;
    padding: 4px 8px; border-radius: 6px; transition: all 0.2s;
}
.modal-close:hover { color: #ff4444; background: rgba(255,68,68,0.1); }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.modal-footer {
    padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: flex-end;
}
.auto-scan-entries { display: flex; flex-direction: column; gap: 10px; }
.scan-entry {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 12px 14px;
}
.scan-entry-latest { border-color: rgba(0,242,255,0.2); }
.scan-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.scan-entry-date { font-size: 0.85rem; color: #ccc; }
.scan-entry-date i { color: #00f2ff; margin-right: 4px; }
.scan-entry-status { font-size: 0.8rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.scan-status-found { color: #00ff7f; background: rgba(0,255,127,0.1); }
.scan-status-none { color: #888; background: rgba(255,255,255,0.05); }
.scan-status-error { color: #ff4444; background: rgba(255,68,68,0.1); }
.scan-entry-details { display: flex; gap: 16px; font-size: 0.8rem; color: #777; }
.scan-entry-details i { color: #555; margin-right: 3px; }
.scan-tag { font-size: 0.65rem; padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.scan-tag-manual { background: rgba(0,242,255,0.15); color: #00f2ff; }
.scan-new-channels { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05); }
.scan-channel-item { font-size: 0.78rem; color: #aaa; padding: 2px 0; }
.scan-channel-ccid { color: #00f2ff; font-family: monospace; margin-right: 6px; }
.scan-error-msg { margin-top: 6px; font-size: 0.78rem; color: #ff6666; font-style: italic; }
.settings-extra-link {
    color: #00f2ff;
    font-size: 0.75rem;
    margin-left: 10px;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.8;
}
.settings-extra-link:hover {
    opacity: 1;
    text-decoration: underline;
}
.modal-footer .settings-extra-link {
    font-size: 0.85rem;
    margin-left: 0;
}

/* ── Manual Add-Channel modal fields ── */
.add-ch-field { margin-bottom: 14px; }
.add-ch-field > label {
    display: block; font-size: 0.78rem; color: #9aa;
    margin-bottom: 5px; font-weight: 600; letter-spacing: .02em;
}
.add-ch-field .glass-input,
.add-ch-field .glass-select { width: 100%; }