/* ═══════════════════════════════════════════════════════════════════════
   tvOS Apple TV Dark Theme — Cinematic Override (Complete)
   All colors match TVTheme.swift cinematic palette exactly
   Generated 2026-03-15
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Variable Overrides (ALL from :root) ─────────────────────────── */
:root {
    /* Brand */
    --color-primary: #E11D48 !important;
    --color-primary-hover: #BE123C !important;
    --color-primary-light: rgba(225,29,72,0.12) !important;
    --color-primary-lighter: rgba(225,29,72,0.06) !important;

    /* Accent */
    --color-accent: #E11D48 !important;
    --color-accent-hover: #BE123C !important;
    --color-accent-light: rgba(225,29,72,0.12) !important;
    --color-accent-dark: #9F1239 !important;

    /* Semantic */
    --color-success: #10B981 !important;
    --color-success-dark: #059669 !important;
    --color-success-light: rgba(16,185,129,0.12) !important;
    --color-error: #EF4444 !important;
    --color-error-dark: #DC2626 !important;
    --color-error-light: rgba(239,68,68,0.12) !important;
    --color-warning: #F59E0B !important;
    --color-warning-dark: #D97706 !important;
    --color-warning-light: rgba(245,158,11,0.12) !important;
    --color-info: #3B82F6 !important;
    --color-info-light: rgba(59,130,246,0.12) !important;

    /* Surfaces — tvOS Cinematic */
    --color-bg: #08060C !important;
    --color-bg-hover: #1E1A2A !important;
    --color-bg-dark: #110E18 !important;
    --color-bg-darker: #14111E !important;
    --color-card: #14111E !important;
    --color-input: #1E1A2A !important;

    /* Text */
    --color-text: #F8FAFC !important;
    --color-text-secondary: #94A3B8 !important;
    --color-text-muted: #64748B !important;
    --color-text-disabled: #475569 !important;
    --color-text-inverse: #F8FAFC !important;

    /* Header */
    --color-header: #110E18 !important;
    --color-header-text: #F8FAFC !important;
    --color-header-dim: rgba(255,255,255,0.5) !important;

    /* Borders — Glass */
    --border-color: rgba(255,255,255,0.06) !important;
    --border-color-dark: rgba(255,255,255,0.08) !important;

    /* Glass system */
    --glass-fill: rgba(255,255,255,0.04) !important;
    --glass-border: rgba(255,255,255,0.06) !important;
    --glass-highlight: rgba(255,255,255,0.08) !important;
    --glass-heavy: rgba(255,255,255,0.12) !important;
    --glass-bg: rgba(255,255,255,0.04) !important;

    /* Surfaces (alternate names used in some sections) */
    --color-surface: #14111E !important;
    --color-border: rgba(255,255,255,0.06) !important;
    --color-border-light: rgba(255,255,255,0.04) !important;
    --color-bg-card: #14111E !important;

    /* Text aliases */
    --text-primary: #F8FAFC !important;
    --text-secondary: #94A3B8 !important;
    --text-tertiary: #64748B !important;
    --color-muted: #64748B !important;

    /* Shadows — dark glow style */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3) !important;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4) !important;
    --shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5) !important;
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6) !important;
    --shadow-xl: 0 12px 40px rgba(0,0,0,0.7) !important;

    /* Radii — tvOS feel */
    --radius: 5px !important;
    --radius-md: 8px !important;
    --radius-lg: 12px !important;
    --radius-xl: 16px !important;
    --radius-pill: 100px !important;
}

/* ── Global ──────────────────────────────────────────────────────────── */
body {
    background: #08060C !important;
    color: #F8FAFC !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ── Scrollbar — Thin Dark ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15) !important; }
* { scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,0.08) transparent !important; }

/* ── Selection ───────────────────────────────────────────────────────── */
::selection { background: rgba(225,29,72,0.3) !important; color: #F8FAFC !important; }

/* ── Focus/Selection State ───────────────────────────────────────────── */
*:focus-visible { outline: 2px solid #E11D48 !important; outline-offset: 2px !important; }

/* ── Links ───────────────────────────────────────────────────────────── */
a { color: #E11D48; transition: color 200ms ease; }
a:hover { color: #BE123C; }
.sidebar-item, .navbar-brand, .media-crumb { text-decoration: none !important; }

/* ── Select dropdowns ────────────────────────────────────────────────── */
select option { background: #14111E; color: #F8FAFC; }

/* ═══════════════════════════════════════════════════════════════════════
   Login Screen
   ═══════════════════════════════════════════════════════════════════════ */
.login-view {
    background: linear-gradient(135deg, #08060C 0%, #14111E 40%, #1E1A2A 60%, #08060C 100%) !important;
}
.login-container {
    background: rgba(20,17,30,0.85) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 16px 64px rgba(0,0,0,0.6), 0 0 80px rgba(225,29,72,0.05) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 48px 44px 36px !important;
}
.login-brand { color: #F8FAFC !important; }
.login-brand svg { color: #E11D48 !important; }
.login-brand h1 { color: #F8FAFC !important; font-size: 28px !important; font-weight: 800 !important; }
.login-brand p { color: #64748B !important; }
.login-form input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #F8FAFC !important;
}
.login-form input::placeholder { color: #475569 !important; }
.login-form input:focus { border-color: #E11D48 !important; box-shadow: 0 0 0 3px rgba(225,29,72,0.20) !important; }
.login-form .btn-block {
    background: linear-gradient(135deg, #E11D48, #BE123C) !important;
    color: #F8FAFC !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(225,29,72,0.30) !important;
}
.login-form .btn-block:hover { transform: scale(1.02); box-shadow: 0 6px 24px rgba(225,29,72,0.40) !important; }
.login-error { color: #EF4444 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Navbar
   ═══════════════════════════════════════════════════════════════════════ */
.navbar {
    background: #110E18 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
.navbar-toggle { color: rgba(255,255,255,0.5) !important; }
.navbar-toggle:hover { background: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.navbar-brand { color: #F8FAFC !important; }
.navbar-brand svg { color: #E11D48 !important; }
.navbar-brand span { color: #F8FAFC !important; font-weight: 700 !important; }
.navbar-status { background: rgba(255,255,255,0.06) !important; color: #94A3B8 !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.navbar-status.protection-on { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
.navbar-status.protection-on svg { color: #10B981 !important; }
.navbar-status.protection-off { background: rgba(239,68,68,0.15) !important; color: #EF4444 !important; }
.navbar-status.protection-off svg { color: #EF4444 !important; }
.avatar-sm { background: linear-gradient(135deg, #E11D48, #BE123C) !important; color: #F8FAFC !important; }

/* ── User Dropdown ───────────────────────────────────────────────────── */
.user-dropdown { background: #1E1A2A !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important; }
.dropdown-header { color: #F8FAFC !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.dropdown-divider { background: rgba(255,255,255,0.06) !important; }
.dropdown-item { color: #F8FAFC !important; background: none !important; }
.dropdown-item:hover { background: rgba(255,255,255,0.06) !important; }
.dropdown-item svg { color: #64748B !important; }
.dropdown-danger { color: #EF4444 !important; }
.dropdown-danger svg { color: #EF4444 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar { background: #110E18 !important; border-right: 1px solid rgba(255,255,255,0.04) !important; }
.sidebar-nav { background: transparent !important; }
.sidebar-section-label { color: #475569 !important; font-size: 10px !important; letter-spacing: 0.8px !important; }
.sidebar-item { color: #94A3B8 !important; border-radius: 7px !important; transition: all 200ms cubic-bezier(0.4,0,0.2,1) !important; }
.sidebar-item svg { color: #64748B !important; opacity: 0.7 !important; }
.sidebar-item:hover { background: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.sidebar-item:hover svg { color: #F8FAFC !important; opacity: 1 !important; }
.sidebar-item.active { background: rgba(225,29,72,0.12) !important; color: #E11D48 !important; font-weight: 600 !important; }
.sidebar-item.active svg { color: #E11D48 !important; opacity: 1 !important; }
.sidebar-divider { background: rgba(255,255,255,0.04) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Main Content Area
   ═══════════════════════════════════════════════════════════════════════ */
.content { background: #08060C !important; color: #F8FAFC !important; }

/* ── Page Header ─────────────────────────────────────────────────────── */
.page-header h2 { color: #F8FAFC !important; }
.preload-status { color: #64748B !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════ */
.btn-primary { background: linear-gradient(135deg, #E11D48, #BE123C) !important; color: #F8FAFC !important; border: none !important; box-shadow: 0 2px 8px rgba(225,29,72,0.25) !important; }
.btn-primary:hover { box-shadow: 0 4px 16px rgba(225,29,72,0.35) !important; transform: translateY(-1px); }
.btn-secondary { background: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; border-color: rgba(255,255,255,0.10) !important; }
.btn-secondary:hover { border-color: #E11D48 !important; color: #E11D48 !important; background: rgba(255,255,255,0.10) !important; }
.btn-danger { background: #EF4444 !important; color: #F8FAFC !important; }
.btn-danger:hover { background: #DC2626 !important; }
.btn-ghost { color: #94A3B8 !important; background: transparent !important; border-color: rgba(255,255,255,0.06) !important; }
.btn-ghost:hover { background: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.btn-accent { background: #E11D48 !important; color: #F8FAFC !important; }
.btn-accent:hover { background: #BE123C !important; }
.icon-btn { color: #94A3B8 !important; background: none !important; }
.icon-btn:hover { background: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.btn-danger-outline { background: transparent !important; color: #EF4444 !important; border-color: #EF4444 !important; }
.btn-danger-outline:hover { background: #EF4444 !important; color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Stats Cards
   ═══════════════════════════════════════════════════════════════════════ */
.stat-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.stat-card:hover { transform: translateY(-2px) scale(1.01) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; }
.stat-value { color: #F8FAFC !important; }
.stat-label { color: #94A3B8 !important; }
.stat-sub { color: #475569 !important; }
.stat-icon.blue { background: rgba(59,130,246,0.12) !important; color: #3B82F6 !important; }
.stat-icon.green { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
.stat-icon.orange { background: rgba(245,158,11,0.12) !important; color: #F59E0B !important; }
.stat-icon.red { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; }
.stat-icon.purple { background: rgba(139,92,246,0.12) !important; color: #8B5CF6 !important; }

/* ── Financial Cards ─────────────────────────────────────────────────── */
.fin-card { background: #14111E !important; }
.fin-revenue { border-left-color: #10B981 !important; }
.fin-cost { border-left-color: #F59E0B !important; }
.fin-profit { border-left-color: #E11D48 !important; }

/* ── Section Labels ──────────────────────────────────────────────────── */
.section-label { color: #475569 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Alert Banners
   ═══════════════════════════════════════════════════════════════════════ */
.alert-warning { background: rgba(245,158,11,0.08) !important; color: #F59E0B !important; border-color: rgba(245,158,11,0.2) !important; }
.alert-danger { background: rgba(239,68,68,0.08) !important; color: #EF4444 !important; border-color: rgba(239,68,68,0.2) !important; }

/* ── Expiration Colors ───────────────────────────────────────────────── */
.exp-expired { color: #EF4444 !important; }
.exp-critical { color: #EF4444 !important; }
.exp-warning { color: #F59E0B !important; }
.exp-ok { color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Actions Dropdown/Menu
   ═══════════════════════════════════════════════════════════════════════ */
.actions-menu { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important; }
.actions-menu button { color: #F8FAFC !important; background: none !important; }
.actions-menu button:hover { background: rgba(255,255,255,0.06) !important; }
.actions-divider { background: rgba(255,255,255,0.06) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Dashboard Cards
   ═══════════════════════════════════════════════════════════════════════ */
.dash-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.dash-card-header h3 { color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════════════════════ */
.table-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.data-table th { color: #475569 !important; border-bottom-color: rgba(255,255,255,0.06) !important; background: #14111E !important; }
.data-table td { border-bottom-color: rgba(255,255,255,0.04) !important; color: #94A3B8 !important; }
.data-table tr:hover td { background: rgba(255,255,255,0.04) !important; }
.data-table .cell-primary { color: #F8FAFC !important; }
.data-table .cell-mono { color: #94A3B8 !important; }
/* Generic table overrides */
table th { background: #110E18 !important; color: #94A3B8 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
table td { border-bottom: 1px solid rgba(255,255,255,0.04) !important; color: #F8FAFC !important; }
table tr:hover td { background: rgba(255,255,255,0.03) !important; }
table tbody tr { transition: background 150ms ease !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════════════════════ */
.badge-success { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
.badge-error { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; }
.badge-warning { background: rgba(245,158,11,0.12) !important; color: #F59E0B !important; }
.badge-info { background: rgba(59,130,246,0.12) !important; color: #3B82F6 !important; }
.badge-neutral { background: rgba(255,255,255,0.06) !important; color: #64748B !important; }
.badge-accent { background: rgba(225,29,72,0.12) !important; color: #E11D48 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Modals
   ═══════════════════════════════════════════════════════════════════════ */
.modal-backdrop { background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.modal-dialog { background: #1E1A2A !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 16px 64px rgba(0,0,0,0.7) !important; }
.modal-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
.modal-header h3 { color: #F8FAFC !important; }
.modal-close { color: #64748B !important; }
.modal-close:hover { background: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.modal-body { color: #F8FAFC !important; }
.modal-footer { border-top-color: rgba(255,255,255,0.06) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Forms / Inputs
   ═══════════════════════════════════════════════════════════════════════ */
.form-group label { color: #94A3B8 !important; }
.form-group input, .form-group select, .form-group textarea {
    background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #E11D48 !important; box-shadow: 0 0 0 3px rgba(225,29,72,0.15) !important;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #475569 !important; }
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748B'/%3E%3C/svg%3E") !important;
}
/* Generic input overrides */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="url"],
input[type="date"], textarea, select {
    background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    color: #F8FAFC !important; border-radius: 7px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: #E11D48 !important; box-shadow: 0 0 0 3px rgba(225,29,72,0.15) !important; outline: none !important;
}
input::placeholder, textarea::placeholder { color: #475569 !important; }
label { color: #94A3B8 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Toast
   ═══════════════════════════════════════════════════════════════════════ */
.toast { background: #1E1A2A !important; color: #F8FAFC !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; }
.toast.success { background: #10B981 !important; border-color: #059669 !important; }
.toast.error { background: #EF4444 !important; border-color: #DC2626 !important; }
.toast.warning { background: #F59E0B !important; color: #08060C !important; border-color: #D97706 !important; }
.toast-notification { background: rgba(20,17,30,0.92) !important; border-color: rgba(255,255,255,0.1) !important; color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Empty State / Loading
   ═══════════════════════════════════════════════════════════════════════ */
.empty-state { color: #475569 !important; }
.empty-state svg { color: #475569 !important; }
.spinner { border-color: rgba(255,255,255,0.08) !important; border-top-color: #E11D48 !important; }
.loading-text { color: #94A3B8 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Utility Text Classes
   ═══════════════════════════════════════════════════════════════════════ */
.text-primary { color: #F8FAFC !important; }
.text-secondary { color: #94A3B8 !important; }
.text-muted { color: #64748B !important; }
.text-accent { color: #E11D48 !important; }
.text-success { color: #10B981 !important; }
.text-danger { color: #EF4444 !important; }
.text-error { color: #EF4444 !important; }
.text-warning { color: #F59E0B !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Package Search/Filters
   ═══════════════════════════════════════════════════════════════════════ */
.pkg-search { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.pkg-search:focus { border-color: #E11D48 !important; }
.pkg-search::placeholder { color: #475569 !important; }
.pkg-selected-count { color: #E11D48 !important; }
.pkg-check { color: #94A3B8 !important; }
.pkg-check:hover { background: rgba(255,255,255,0.04) !important; }
.pkg-check input[type="checkbox"] { accent-color: #E11D48 !important; }

/* ── Package Detail ──────────────────────────────────────────────────── */
.pkg-row:hover { background: rgba(255,255,255,0.04) !important; }
.pkg-row.expanded { background: rgba(255,255,255,0.04) !important; }
.pkg-detail-row { background: #0D0B14 !important; }
.pkg-detail-section-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
.pkg-cat-item { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.pkg-cat-name { color: #94A3B8 !important; }
.pkg-cat-count { color: #E11D48 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Subscriber Toolbar
   ═══════════════════════════════════════════════════════════════════════ */
.sub-search { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.sub-search:focus { border-color: #E11D48 !important; }
.sub-search::placeholder { color: #475569 !important; }
.sub-filter { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748B'/%3E%3C/svg%3E") !important;
}
.sub-filter:focus { border-color: #E11D48 !important; }
.sub-count { color: #64748B !important; }
.sub-row.selected td { background: rgba(225,29,72,0.08) !important; }
.sub-username { color: #F8FAFC !important; }
.sub-account { color: #64748B !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Detail Panel
   ═══════════════════════════════════════════════════════════════════════ */
.detail-panel-inner { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.detail-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
.detail-title h3 { color: #F8FAFC !important; }
.detail-section { border-bottom-color: rgba(255,255,255,0.04) !important; }
.detail-section-label { color: #475569 !important; }
.detail-label { color: #64748B !important; }
.detail-value { color: #F8FAFC !important; }
.detail-section-danger { background: rgba(239,68,68,0.08) !important; }

/* ── Connection Items ────────────────────────────────────────────────── */
.conn-item { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; }
.conn-item-label { color: #94A3B8 !important; }
.conn-url { color: #64748B !important; background: rgba(255,255,255,0.04) !important; }

/* ── Device Items ────────────────────────────────────────────────────── */
.device-item { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; }
.device-name { color: #F8FAFC !important; }
.device-meta { color: #64748B !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Downloads Progress
   ═══════════════════════════════════════════════════════════════════════ */
.dl-progress-bar { background: rgba(255,255,255,0.06) !important; }
.dl-progress-fill { background: #E11D48 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Media Browser
   ═══════════════════════════════════════════════════════════════════════ */
.media-breadcrumb { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.media-crumb { color: #E11D48 !important; }
.media-row:hover { background: rgba(255,255,255,0.04) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Package Editor
   ═══════════════════════════════════════════════════════════════════════ */
.pkg-header input { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.pkg-header input:focus { border-color: #E11D48 !important; }
.pkg-summary { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.pkg-summary-item { color: #94A3B8 !important; }
.pkg-summary-item strong { color: #E11D48 !important; }
.pkg-tabs { border-bottom-color: rgba(255,255,255,0.06) !important; }
.pkg-tab { color: #64748B !important; }
.pkg-tab:hover { color: #F8FAFC !important; }
.pkg-tab.active { color: #E11D48 !important; border-bottom-color: #E11D48 !important; }
.pkg-region-pill { border-color: rgba(255,255,255,0.08) !important; background: #14111E !important; color: #94A3B8 !important; }
.pkg-region-pill:hover { border-color: #E11D48 !important; color: #E11D48 !important; }
.pkg-region-pill.active { background: #E11D48 !important; border-color: #E11D48 !important; color: #F8FAFC !important; }
.pkg-region-pill.active .pkg-region-cnt { background: rgba(255,255,255,0.25) !important; color: #F8FAFC !important; }
.pkg-adult-pill { border-color: #EF4444 !important; color: #EF4444 !important; }
.pkg-adult-pill:hover { background: rgba(239,68,68,0.12) !important; }
.pkg-adult-pill.active { background: #EF4444 !important; border-color: #EF4444 !important; color: #F8FAFC !important; }
.pkg-region-cnt { background: rgba(255,255,255,0.06) !important; color: #64748B !important; }
.pkg-cat-item:hover { border-color: rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.04) !important; }
.pkg-cat-item.selected { border-color: #E11D48 !important; background: rgba(225,29,72,0.08) !important; }
.pkg-cat-item input[type="checkbox"] { accent-color: #E11D48 !important; }
.pkg-cat-name { color: #F8FAFC !important; }
.pkg-cat-count { background: rgba(255,255,255,0.06) !important; color: #64748B !important; }
.pkg-epg-badge { color: #E11D48 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Content Library — Poster Grid
   ═══════════════════════════════════════════════════════════════════════ */
.poster-card {
    background: #14111E !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 5px !important;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.poster-card:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 32px rgba(225,29,72,0.30) !important;
    border-color: #E11D48 !important;
}
.poster-img-wrap { background: #110E18 !important; }
.poster-title { color: #F8FAFC !important; }
.poster-meta { color: #64748B !important; }
.poster-badge { background: rgba(0,0,0,0.8) !important; color: #F8FAFC !important; }
.poster-placeholder { color: #475569 !important; }
.poster-info { color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Season / Episode
   ═══════════════════════════════════════════════════════════════════════ */
.season-group { color: #F8FAFC !important; }
.season-header { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.season-header:hover { background: rgba(255,255,255,0.06) !important; }
.episode-row { border-bottom-color: rgba(255,255,255,0.04) !important; color: #F8FAFC !important; }
.episode-num { color: #E11D48 !important; }
.episode-title { color: #F8FAFC !important; }
.episode-size { color: #64748B !important; }

/* ── Recording Cards ─────────────────────────────────────────────────── */
.rec-channel-header { color: #F8FAFC !important; }
.rec-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.rec-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }

/* ── Series Detail ───────────────────────────────────────────────────── */
.series-detail-poster { border-radius: 8px !important; }
.series-detail-info h2 { color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Proxy Status Banner
   ═══════════════════════════════════════════════════════════════════════ */
.proxy-status-banner.status-protected { background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.04) 100%) !important; border-color: rgba(16,185,129,0.2) !important; }
.proxy-status-banner.status-exposed { background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.04) 100%) !important; border-color: rgba(239,68,68,0.2) !important; }
.status-protected .proxy-status-title { color: #10B981 !important; }
.status-exposed .proxy-status-title { color: #EF4444 !important; }
.proxy-status-desc { color: #94A3B8 !important; }
.proxy-badge.badge-ok { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
.proxy-badge.badge-fail { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; }
.proxy-badge.badge-warn { background: rgba(245,158,11,0.12) !important; color: #F59E0B !important; }

/* ═══════════════════════════════════════════════════════════════════════
   User Dashboard (non-admin subscriber view)
   ═══════════════════════════════════════════════════════════════════════ */
.ud-container { background: #08060C !important; }
.ud-header { background: #110E18 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.ud-header-left { color: #F8FAFC !important; }
.ud-title { color: #F8FAFC !important; }
.ud-subtitle { color: #64748B !important; }
.ud-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.ud-card-header { border-bottom-color: rgba(255,255,255,0.04) !important; }
.ud-card-header h2 { color: #F8FAFC !important; }
.ud-badge-success { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
.ud-badge-warning { background: rgba(245,158,11,0.12) !important; color: #F59E0B !important; }
.ud-badge-error { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; }
.ud-badge-accent { background: rgba(225,29,72,0.12) !important; color: #E11D48 !important; }
.ud-badge-info { background: rgba(59,130,246,0.12) !important; color: #3B82F6 !important; }
.ud-badge-neutral { background: rgba(255,255,255,0.06) !important; color: #64748B !important; }
.ud-info-label { color: #64748B !important; }
.ud-info-value { color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Content View — Dark overrides
   ═══════════════════════════════════════════════════════════════════════ */
.content-card {
    background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; border-radius: 5px !important;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.content-card:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 32px rgba(225,29,72,0.30) !important;
    border-color: #E11D48 !important;
}
.content-card-info { color: #F8FAFC !important; }
.content-card-title { color: #F8FAFC !important; }
.content-card-meta { color: #64748B !important; }
.content-search { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.content-search:focus { border-color: #E11D48 !important; }
.content-search::placeholder { color: #475569 !important; }
.content-header h2 { color: #F8FAFC !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Detail View (Movie/Series/Episode)
   ═══════════════════════════════════════════════════════════════════════ */
.detail-hero-gradient { background: linear-gradient(to top, #08060C 0%, rgba(8,6,12,0.85) 35%, rgba(8,6,12,0.3) 100%) !important; }
.detail-content { background: #08060C !important; }
.detail-title { color: #F8FAFC !important; }
.detail-overview { color: rgba(255,255,255,0.75) !important; }
.detail-tagline { color: rgba(255,255,255,0.35) !important; }
.detail-section-title { color: rgba(255,255,255,0.4) !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.detail-info-label { color: #64748B !important; }
.detail-info-value { color: #94A3B8 !important; }
.detail-cast-photo { border-color: rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.04) !important; }
.detail-cast-placeholder { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; }
.detail-cast-name { color: #F8FAFC !important; }
.detail-cast-character { color: #64748B !important; }
.detail-rating-badge { background: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.detail-rating-badge .label { color: rgba(255,255,255,0.45) !important; }

/* ── Action Buttons ──────────────────────────────────────────────────── */
.detail-action-btn { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.detail-action-btn:hover { background: rgba(255,255,255,0.12) !important; }
.detail-action-btn.play-green { background: #10B981 !important; color: #F8FAFC !important; border-color: #10B981 !important; }
.detail-action-btn.play-green:hover { background: #059669 !important; }

/* ── Version Picker / Season Tabs ────────────────────────────────────── */
.version-picker { color: #94A3B8 !important; }
.version-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; color: #94A3B8 !important; }
.version-btn:hover, .version-btn.active { background: rgba(225,29,72,0.12) !important; border-color: #E11D48 !important; color: #E11D48 !important; }
.season-tab { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; color: #94A3B8 !important; }
.season-tab:hover, .season-tab.active { background: rgba(225,29,72,0.12) !important; border-color: #E11D48 !important; color: #E11D48 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Episode Cards
   ═══════════════════════════════════════════════════════════════════════ */
.ep-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; }
.ep-card:hover { border-color: rgba(255,255,255,0.15) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; }
.ep-card-title { color: #F8FAFC !important; }
.ep-card-meta { color: #64748B !important; }
.ep-card-progress { background: rgba(255,255,255,0.08) !important; }
.ep-card-progress-fill { background: #E11D48 !important; }
.episode-progress-fill { background: #E11D48 !important; }
.ep-card-thumb { background: rgba(255,255,255,0.03) !important; }
.ep-card-thumb-placeholder { background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06)) !important; }

/* ── Episode Detail Overlay ──────────────────────────────────────────── */
.episode-detail-overlay { background: rgba(0,0,0,0.88) !important; }
.episode-detail-card { background: #14111E !important; border-color: rgba(255,255,255,0.1) !important; }
.episode-detail-ep-label { color: #E11D48 !important; }
.episode-detail-title { color: #F8FAFC !important; }
.episode-detail-series-name { color: rgba(255,255,255,0.45) !important; }
.episode-detail-progress { background: rgba(255,255,255,0.1) !important; }
.episode-detail-progress-fill { background: #E11D48 !important; }
.episode-detail-synopsis p { color: rgba(255,255,255,0.7) !important; }
.episode-detail-section-label { color: rgba(255,255,255,0.4) !important; }
.episode-detail-crew { color: rgba(255,255,255,0.5) !important; }
.episode-detail-meta-line { color: rgba(255,255,255,0.45) !important; }
.episode-detail-still { background: rgba(255,255,255,0.04) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Home Content Rows
   ═══════════════════════════════════════════════════════════════════════ */
.home-row-title { color: #F8FAFC !important; }
.home-row-title svg { color: #E11D48 !important; }
.home-card {
    background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; border-radius: 5px !important;
}
.home-card:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 8px 24px rgba(225,29,72,0.25) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
.home-card-title { color: #F8FAFC !important; }
.home-card-meta { color: #64748B !important; }
.home-card-progress { background: rgba(255,255,255,0.08) !important; }
.home-card-progress-fill { background: #10B981 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Season Cards
   ═══════════════════════════════════════════════════════════════════════ */
.season-card-poster { background: rgba(255,255,255,0.06) !important; }
.season-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important; }
.season-card-progress { background: rgba(255,255,255,0.1) !important; }
.season-card-progress-fill { background: #10B981 !important; }
.season-header-banner { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; }
.season-header-label { color: #F8FAFC !important; }
.season-header-count { color: #64748B !important; }
.season-cards-label { color: rgba(255,255,255,0.5) !important; }
.season-back-btn { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; color: #94A3B8 !important; }
.season-back-btn:hover { background: rgba(255,255,255,0.12) !important; color: #F8FAFC !important; }

/* ── Continue Watching ───────────────────────────────────────────────── */
.series-continue-card { background: rgba(16,185,129,0.06) !important; border-color: rgba(16,185,129,0.15) !important; }
.series-continue-label { color: #10B981 !important; }
.series-continue-title { color: #F8FAFC !important; }
.series-continue-progress { background: rgba(255,255,255,0.08) !important; }
.series-continue-bar { background: #10B981 !important; }
.series-continue-remaining { color: rgba(255,255,255,0.4) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Person Modal
   ═══════════════════════════════════════════════════════════════════════ */
.person-modal { background: rgba(8,6,12,0.97) !important; }
.person-name { color: #F8FAFC !important; }
.person-known-for { color: #E11D48 !important; }
.person-meta { color: rgba(255,255,255,0.45) !important; }
.person-bio { color: rgba(255,255,255,0.65) !important; }
.person-photo { border-color: rgba(255,255,255,0.1) !important; }
.person-photo-placeholder { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; }
.person-film-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; }
.person-film-card:hover { border-color: rgba(255,255,255,0.15) !important; }
.person-film-card.clickable:hover { border-color: #E11D48 !important; box-shadow: 0 4px 16px rgba(225,29,72,0.15) !important; }
.person-film-card .film-title { color: #F8FAFC !important; }
.person-film-card .film-character { color: rgba(255,255,255,0.4) !important; }
.person-film-card .film-meta { color: rgba(255,255,255,0.3) !important; }
.person-close { background: rgba(255,255,255,0.1) !important; color: #F8FAFC !important; }
.person-close:hover { background: rgba(255,255,255,0.25) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════════════════════════════════ */
.pagination-btn { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.pagination-btn:hover:not(:disabled) { border-color: #E11D48 !important; color: #E11D48 !important; }
.pagination-info { color: #64748B !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Profile Page
   ═══════════════════════════════════════════════════════════════════════ */
.profile-section-header h3 { color: #F8FAFC !important; }
.profile-account-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.profile-account-name { color: #F8FAFC !important; }
.profile-account-role { color: #64748B !important; }
.profile-account-date { color: #475569 !important; }
.profile-password-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.profile-password-card h4 { color: #F8FAFC !important; }
.profile-password-row .profile-input { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.profile-card { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.profile-card:hover { border-color: #E11D48 !important; box-shadow: 0 4px 16px rgba(225,29,72,0.15) !important; }
.profile-card-default { border-color: #E11D48 !important; }
.profile-card-name { color: #F8FAFC !important; }
.profile-card-detail { color: #94A3B8 !important; }
.profile-card-detail svg { color: #64748B !important; }
.profile-card-actions { border-top-color: rgba(255,255,255,0.06) !important; }
.avatar-label { color: #64748B !important; }
.profile-avatar-upload { border-color: rgba(255,255,255,0.08) !important; color: #64748B !important; }
.profile-avatar-upload:hover { border-color: #E11D48 !important; color: #E11D48 !important; }
.profile-avatar-pick img { border-color: transparent !important; }
.profile-avatar-pick:hover img { border-color: #64748B !important; }
.profile-avatar-pick.selected img { border-color: #E11D48 !important; box-shadow: 0 0 0 2px #E11D48 !important; }
.profile-edit-grid { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Channels LineUp Builder
   ═══════════════════════════════════════════════════════════════════════ */
.lineup-panel { background: #14111E !important; border-color: rgba(255,255,255,0.06) !important; }
.lineup-panel-selected { border-color: #E11D48 !important; }
.lineup-panel-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
.lineup-panel-header h4 { color: #F8FAFC !important; }
.lineup-filters { border-bottom-color: rgba(255,255,255,0.06) !important; }
.lineup-filters input, .lineup-filters select { background: #1E1A2A !important; border-color: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.lineup-ch { border-bottom-color: rgba(255,255,255,0.04) !important; }
.lineup-ch:hover { background: rgba(255,255,255,0.04) !important; }
.lineup-ch-icon { background: rgba(255,255,255,0.04) !important; }
.lineup-ch-name { color: #F8FAFC !important; }
.lineup-ch-meta { color: #64748B !important; }
.lineup-ch-add { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
.lineup-ch-add:hover { background: #10B981 !important; color: #F8FAFC !important; }
.lineup-ch-remove { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; }
.lineup-ch-remove:hover { background: #EF4444 !important; color: #F8FAFC !important; }
.lineup-ch-in { background: rgba(225,29,72,0.03) !important; }
.lineup-empty { color: #475569 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Live TV Card Override
   ═══════════════════════════════════════════════════════════════════════ */
.livetv-card {
    background: #14111E !important; border-color: rgba(255,255,255,0.06) !important;
}
.livetv-card:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 32px rgba(225,29,72,0.30) !important;
    border-color: #E11D48 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Player (tvOS cinematic style)
   ═══════════════════════════════════════════════════════════════════════ */
.web-player { background: #000 !important; }
.player-header { background: linear-gradient(180deg, rgba(8,6,12,0.95) 0%, transparent 100%) !important; }
.player-title { color: #F8FAFC !important; font-weight: 700 !important; }
.player-subtitle { color: #94A3B8 !important; }
.player-controls { background: linear-gradient(0deg, rgba(8,6,12,0.95) 0%, transparent 100%) !important; }
.player-btn { color: #F8FAFC !important; }
.player-btn:hover { color: #E11D48 !important; transform: scale(1.1); }
.player-progress-played { background: #E11D48 !important; }
.player-time { color: #94A3B8 !important; }
.player-source-badge { background: rgba(225,29,72,0.15) !important; color: #E11D48 !important; }
.player-panel { background: rgba(20,17,30,0.95) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
.player-panel-header { color: #F8FAFC !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.player-settings-content { background: rgba(20,17,30,0.95) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.player-recording-badge { background: rgba(239,68,68,0.20) !important; color: #EF4444 !important; }
.player-error-box { background: rgba(20,17,30,0.95) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.player-error-btn.primary { background: linear-gradient(135deg, #E11D48, #BE123C) !important; color: #F8FAFC !important; }
.player-error-btn.secondary { background: rgba(255,255,255,0.08) !important; color: #F8FAFC !important; }
.player-go-live-btn { background: rgba(239,68,68,0.15) !important; color: #FF3B30 !important; }
.player-version-select { background: rgba(255,255,255,0.06) !important; color: #F8FAFC !important; border: 1px solid rgba(255,255,255,0.08) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Progress Bars (generic)
   ═══════════════════════════════════════════════════════════════════════ */
progress { background: rgba(255,255,255,0.06) !important; }
progress::-webkit-progress-bar { background: rgba(255,255,255,0.06) !important; border-radius: 4px !important; }
progress::-webkit-progress-value { background: #E11D48 !important; border-radius: 4px !important; }
progress::-moz-progress-bar { background: #E11D48 !important; border-radius: 4px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Category filter pills
   ═══════════════════════════════════════════════════════════════════════ */
.category-pill, .filter-pill, .chip, .filter-chip {
    background: #14111E !important; border-color: rgba(255,255,255,0.08) !important; color: #94A3B8 !important;
}
.category-pill:hover, .filter-pill:hover, .chip:hover, .filter-chip:hover {
    border-color: #E11D48 !important; color: #E11D48 !important;
}
.category-pill.active, .filter-pill.active, .chip.active, .filter-chip.active {
    background: #E11D48 !important; border-color: #E11D48 !important; color: #F8FAFC !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Downloads / EPG / Recordings / Favorites
   ═══════════════════════════════════════════════════════════════════════ */
.download-item, .download-card { background: #14111E !important; border: 1px solid rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.download-item:hover, .download-card:hover { border-color: rgba(225,29,72,0.20) !important; background: #1E1A2A !important; }
.epg-grid, .epg-container { background: #08060C !important; }
.epg-program, .epg-item { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.epg-program:hover, .epg-item:hover { background: rgba(225,29,72,0.10) !important; border-color: rgba(225,29,72,0.25) !important; }
.epg-now, .epg-program.now { border-color: #E11D48 !important; background: rgba(225,29,72,0.08) !important; }
.epg-time { color: #64748B !important; }
.recording-card, .recording-item { background: #14111E !important; border: 1px solid rgba(255,255,255,0.06) !important; color: #F8FAFC !important; }
.recording-card:hover, .recording-item:hover { border-color: rgba(225,29,72,0.20) !important; }
.favorite-btn, .fav-btn { color: #64748B !important; }
.favorite-btn:hover, .fav-btn:hover, .favorite-btn.active, .fav-btn.active { color: #E11D48 !important; }
.live-badge, .live-indicator { background: rgba(255,59,48,0.15) !important; color: #FF3B30 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Tooltips / Toggle switches
   ═══════════════════════════════════════════════════════════════════════ */
.tooltip { background: #1E1A2A !important; color: #F8FAFC !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.toggle, .switch { background: rgba(255,255,255,0.12) !important; }
.toggle.active, .switch.active { background: #E11D48 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Responsive sidebar (mobile)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sidebar { background: #110E18 !important; box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important; }
    .sidebar.open { box-shadow: 4px 0 32px rgba(0,0,0,0.8) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Catch-all overrides — ensure nothing leaks light
   ═══════════════════════════════════════════════════════════════════════ */
article, section, aside, main, header, footer, nav { color: #F8FAFC !important; }
.card, .panel, [class*="card"], [class*="panel"] { color: #F8FAFC; }
div[class*="card"], div[class*="panel"], div[class*="section"],
div[class*="container"], div[class*="wrapper"], div[class*="box"] { color: inherit; }
.content *, .sidebar * { scrollbar-color: rgba(255,255,255,0.12) transparent; }

/* Source/server/proxy/chart cards */
.source-card, .server-card, .proxy-card, .chart-container, .chart-card {
    background: #14111E !important; border: 1px solid rgba(255,255,255,0.06) !important; color: #F8FAFC !important;
}
.source-card:hover, .server-card:hover, .proxy-card:hover { border-color: rgba(225,29,72,0.20) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HIDE ALL ADMIN/RESELLER SECTIONS
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-section-label { display: none !important; }
.sidebar-item[data-section="dashboard"],
.sidebar-item[data-section="subscribers"],
.sidebar-item[data-section="bouquets"],
.sidebar-item[data-section="resellers"],
.sidebar-item[data-section="connections"],
.sidebar-item[data-section="activity"],
.sidebar-item[data-section="transactions"],
.sidebar-item[data-section="reports"],
.sidebar-item[data-section="pricing"],
.sidebar-item[data-section="sources"],
.sidebar-item[data-section="proxies"],
.sidebar-item[data-section="announcements"],
.sidebar-item[data-section="auto-renewals"],
.sidebar-item[data-section="api-tokens"],
.sidebar-item[data-section="torrent-settings"],
.sidebar-item[data-section="profile"],
.sidebar-item[data-section*="reseller"] { display: none !important; }

/* Hide MY ACCOUNT section label and items added by _setupSidebar */
.sidebar-nav .sidebar-divider ~ .sidebar-section-label,
.sidebar-nav a[data-section*="reseller"],
.sidebar-nav a[data-section="profile"] { display: none !important; }

/* ── HIDE P2P FROM SOURCE FILTERS AND BADGES ── */
option[value="p2p"] { display: none !important; }
.source-badge.p2p { display: none !important; }
.version-source-icon.p2p { display: none !important; }
.version-source:has(.version-source-icon.p2p) { display: none !important; }
.player-source-badge[data-source="p2p"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   tvOS LAYOUT: TOP TAB BAR (no sidebar)
   The tvOS app uses horizontal top tabs, NOT a sidebar
   ═══════════════════════════════════════════════════════════════════ */

/* Convert grid layout from sidebar+content to single column */
.app-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}

/* Hide the sidebar completely */
.sidebar {
    display: none !important;
}

/* Navbar becomes the tab bar — extends full width */
.navbar {
    display: flex !important;
    align-items: center !important;
    background: #110E18 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 0 40px !important;
    height: 48px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    grid-area: unset !important;
}

/* Content area takes full width */
.content {
    grid-area: unset !important;
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Inject tvOS-style tab buttons into navbar-center */
.navbar-center {
    display: flex !important;
    gap: 4px !important;
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 16px !important;
}


/* ═══ tvOS TAB BAR ═══ */
.tvos-tab {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.tvos-tab:hover {
    background: rgba(255,255,255,0.08);
    color: #F8FAFC;
}
.tvos-tab.active {
    background: #E11D48 !important;
    color: #fff !important;
    font-weight: 600;
}

/* Profile button in navbar */
.tvos-profile-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(225,29,72,0.12);
    border: 2px solid rgba(225,29,72,0.4);
    color: #E11D48;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}
.tvos-profile-btn:hover {
    border-color: #E11D48;
    box-shadow: 0 0 12px rgba(225,29,72,0.3);
    transform: scale(1.1);
}

/* Navbar center holds tabs */
.navbar-center {
    display: flex !important;
    gap: 4px !important;
    flex: 1 !important;
    margin-left: 16px !important;
    overflow-x: auto !important;
}
.navbar-center::-webkit-scrollbar { display: none; }


/* Force hide user/reseller dashboards — only our tvOS profile picker */
#user-dashboard, #reseller-dashboard, .ud-container, .rd-container { display: none !important; }