/*
 * Top Local Videos — design tokens + base layer
 *
 * Warm-dark Persian-branded aesthetic: deep aubergine background, saffron amber +
 * rose accents, cream typography. CSS logical properties throughout for RTL
 * (fa, ar, he, ur). Loaded after Bootstrap so it overrides where needed.
 */

:root {
    /* Brand palette */
    --tlv-bg: #0F0A1A;
    --tlv-bg-elevated: #1A1325;
    --tlv-bg-card: #221829;
    --tlv-bg-overlay: rgba(15, 10, 26, 0.92);
    --tlv-bg-overlay-soft: rgba(15, 10, 26, 0.55);

    --tlv-text: #F5E9D9;
    --tlv-text-muted: #B8A998;
    --tlv-text-subtle: #7A6D72;

    --tlv-accent: #F59E0B;
    --tlv-accent-hover: #FBBF24;
    --tlv-accent-soft: rgba(245, 158, 11, 0.12);
    --tlv-rose: #E11D48;
    --tlv-rose-hover: #F43F5E;
    --tlv-rose-soft: rgba(225, 29, 72, 0.12);

    --tlv-border: rgba(245, 233, 217, 0.08);
    --tlv-border-strong: rgba(245, 233, 217, 0.18);
    --tlv-border-accent: rgba(245, 158, 11, 0.35);

    --tlv-success: #10B981;
    --tlv-danger: #DC2626;
    --tlv-warning: #F59E0B;
    --tlv-info: #3B82F6;

    /* Typography stacks */
    --tlv-font-sans: 'Inter', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tlv-font-serif: 'Playfair Display', 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
    --tlv-font-persian: 'Vazirmatn', 'IRANSans', 'Tahoma', sans-serif;
    --tlv-font-arabic: 'Noto Sans Arabic', 'Vazirmatn', 'Tahoma', sans-serif;
    --tlv-font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

    --tlv-text-xs: 0.75rem;
    --tlv-text-sm: 0.875rem;
    --tlv-text-base: 1rem;
    --tlv-text-lg: 1.125rem;
    --tlv-text-xl: 1.25rem;
    --tlv-text-2xl: 1.5rem;
    --tlv-text-3xl: 1.875rem;
    --tlv-text-4xl: 2.25rem;
    --tlv-text-5xl: 3rem;
    --tlv-text-6xl: 3.75rem;

    --tlv-leading-tight: 1.2;
    --tlv-leading-snug: 1.35;
    --tlv-leading-normal: 1.55;
    --tlv-leading-relaxed: 1.7;

    /* Spacing scale */
    --tlv-space-1: 0.25rem;
    --tlv-space-2: 0.5rem;
    --tlv-space-3: 0.75rem;
    --tlv-space-4: 1rem;
    --tlv-space-5: 1.25rem;
    --tlv-space-6: 1.5rem;
    --tlv-space-8: 2rem;
    --tlv-space-10: 2.5rem;
    --tlv-space-12: 3rem;
    --tlv-space-16: 4rem;
    --tlv-space-20: 5rem;
    --tlv-space-24: 6rem;

    /* Radii */
    --tlv-radius-sm: 0.25rem;
    --tlv-radius-md: 0.5rem;
    --tlv-radius-lg: 0.75rem;
    --tlv-radius-xl: 1rem;
    --tlv-radius-2xl: 1.5rem;
    --tlv-radius-full: 9999px;

    /* Shadows */
    --tlv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tlv-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --tlv-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55);
    --tlv-shadow-xl: 0 22px 60px rgba(0, 0, 0, 0.65);
    --tlv-shadow-glow-amber: 0 0 32px rgba(245, 158, 11, 0.3);
    --tlv-shadow-glow-rose: 0 0 28px rgba(225, 29, 72, 0.28);

    /* Motion */
    --tlv-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --tlv-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --tlv-transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --tlv-topnav-height: 4.25rem;
    --tlv-container-max: 1440px;
    --tlv-content-max: 1280px;
    --tlv-narrow-max: 720px;

    /* z-index scale */
    --tlv-z-base: 1;
    --tlv-z-rail-shadow: 5;
    --tlv-z-dropdown: 100;
    --tlv-z-sticky: 200;
    --tlv-z-overlay: 500;
    --tlv-z-modal: 1000;
    --tlv-z-toast: 2000;
}

/* RTL-specific font swap */
html[dir="rtl"] {
    --tlv-font-sans: 'Vazirmatn', 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
}

html[lang="ar"], html[lang^="ar-"] {
    --tlv-font-sans: 'Noto Sans Arabic', 'Vazirmatn', system-ui, sans-serif;
}

html[lang="he"], html[lang^="he-"] {
    --tlv-font-sans: 'Heebo', 'Inter', system-ui, sans-serif;
}

/* ----- base layer ----- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background-color: var(--tlv-bg);
    /* Defends against accidental horizontal overflow on small viewports
     * (iOS Safari reports a horizontal scroll if any descendant pokes past
     * 100vw — most often via images, iframes from third parties like the
     * Google sign-in widget, or inline styles). `clip` doesn't create a
     * scrolling box, so position:sticky on the topnav still works. `hidden`
     * would break that. */
    overflow-x: clip;
}

body {
    margin: 0;
    min-block-size: 100vh;
    overflow-x: clip;
    font-family: var(--tlv-font-sans);
    font-size: var(--tlv-text-base);
    line-height: var(--tlv-leading-normal);
    color: var(--tlv-text);
    background-color: var(--tlv-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: var(--tlv-leading-tight);
    font-weight: 700;
    color: var(--tlv-text);
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

a {
    color: var(--tlv-accent);
    text-decoration: none;
    transition: color var(--tlv-transition-base);
}

a:hover {
    color: var(--tlv-accent-hover);
}

/* Responsive media — only embedded raster/video. Inline SVG icons are sized
 * by their own component CSS; including svg here makes any inline <svg> with
 * a viewBox but no width/height attributes inherit "block-size: auto" and
 * rescale to its parent's inline-size, which blows the topnav brand glyph up
 * to the full container-max width.
 */
img, video {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

::selection {
    background-color: var(--tlv-accent);
    color: var(--tlv-bg);
}

/* Scrollbar (WebKit + Firefox) */
::-webkit-scrollbar {
    inline-size: 10px;
    block-size: 10px;
}

::-webkit-scrollbar-track {
    background: var(--tlv-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--tlv-border-strong);
    border-radius: var(--tlv-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tlv-accent);
}

* {
    scrollbar-color: var(--tlv-border-strong) var(--tlv-bg);
    scrollbar-width: thin;
}

/* Focus indicator */
:focus-visible {
    outline: 2px solid var(--tlv-accent);
    outline-offset: 2px;
    border-radius: var(--tlv-radius-sm);
}

/* ----- utilities ----- */

.tlv-container {
    inline-size: 100%;
    max-inline-size: var(--tlv-container-max);
    margin-inline: auto;
    padding-inline: var(--tlv-space-6);
}

.tlv-content {
    max-inline-size: var(--tlv-content-max);
    margin-inline: auto;
}

.tlv-narrow {
    max-inline-size: var(--tlv-narrow-max);
    margin-inline: auto;
}

.tlv-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.tlv-stack > * + * {
    margin-block-start: var(--tlv-stack-gap, var(--tlv-space-4));
}

.tlv-text-muted {
    color: var(--tlv-text-muted);
}

.tlv-text-subtle {
    color: var(--tlv-text-subtle);
}

.tlv-text-accent {
    color: var(--tlv-accent);
}

.tlv-text-serif {
    font-family: var(--tlv-font-serif);
    font-feature-settings: 'liga', 'dlig';
    letter-spacing: -0.015em;
}

/* ----- buttons ----- */

.tlv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tlv-space-2);
    padding-block: var(--tlv-space-3);
    padding-inline: var(--tlv-space-5);
    font-size: var(--tlv-text-sm);
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--tlv-radius-md);
    background-color: transparent;
    color: var(--tlv-text);
    cursor: pointer;
    transition: all var(--tlv-transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.tlv-btn:hover {
    text-decoration: none;
}

.tlv-btn-primary {
    background-color: var(--tlv-accent);
    color: var(--tlv-bg);
    border-color: var(--tlv-accent);
    box-shadow: var(--tlv-shadow-glow-amber);
}

.tlv-btn-primary:hover {
    background-color: var(--tlv-accent-hover);
    border-color: var(--tlv-accent-hover);
    color: var(--tlv-bg);
    transform: translateY(-1px);
}

.tlv-btn-ghost {
    border-color: var(--tlv-border-strong);
}

.tlv-btn-ghost:hover {
    border-color: var(--tlv-accent);
    color: var(--tlv-accent);
    background-color: var(--tlv-accent-soft);
}

.tlv-btn-rose {
    background-color: var(--tlv-rose);
    color: var(--tlv-text);
    border-color: var(--tlv-rose);
}

.tlv-btn-rose:hover {
    background-color: var(--tlv-rose-hover);
    border-color: var(--tlv-rose-hover);
    color: var(--tlv-text);
}

.tlv-btn-sm {
    padding-block: var(--tlv-space-2);
    padding-inline: var(--tlv-space-3);
    font-size: var(--tlv-text-xs);
}

.tlv-btn-lg {
    padding-block: var(--tlv-space-4);
    padding-inline: var(--tlv-space-6);
    font-size: var(--tlv-text-base);
}

/* When .tlv-btn-* is applied to an <a>, the global `body.tlv-themed a` rule
 * (specificity 0,1,2) outranks `.tlv-btn-primary` (0,1,0) and forces the
 * text to amber-on-amber. Re-state the button colors with body.tlv-themed
 * scoping so anchor-styled buttons render with the intended contrast.
 */
body.tlv-themed a.tlv-btn-primary,
body.tlv-themed a.tlv-btn-primary:hover,
body.tlv-themed a.tlv-btn-primary:focus {
    color: var(--tlv-bg);
}

body.tlv-themed a.tlv-btn-ghost {
    color: var(--tlv-text);
}

body.tlv-themed a.tlv-btn-ghost:hover {
    color: var(--tlv-accent);
}

body.tlv-themed a.tlv-btn-rose,
body.tlv-themed a.tlv-btn-rose:hover {
    color: var(--tlv-text);
}

/* Google sign-in button — used on the home page CTA. Matches Google's
 * neutral "Sign in with Google" button guidelines while staying readable
 * against the dark TLV background.
 */
.tlv-btn-google {
    background-color: #ffffff;
    color: #1f1f1f;
    border-color: #dadce0;
    font-weight: 500;
}

body.tlv-themed a.tlv-btn-google,
body.tlv-themed a.tlv-btn-google:hover,
body.tlv-themed a.tlv-btn-google:focus {
    color: #1f1f1f;
}

.tlv-btn-google:hover {
    background-color: #f8f9fa;
    border-color: #c6c8cc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.tlv-btn-google .tlv-google-mark {
    inline-size: 1.1em;
    block-size: 1.1em;
    flex-shrink: 0;
}

/* Home page guest CTA */
.tlv-home-cta {
    margin-block: var(--tlv-space-8) var(--tlv-space-10);
    padding: var(--tlv-space-6);
    background-color: var(--tlv-bg-elevated);
    border: 1px solid var(--tlv-border-strong);
    border-radius: var(--tlv-radius-lg);
    max-inline-size: 32rem;
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-4);
}

.tlv-home-cta-title {
    font-size: var(--tlv-text-lg);
    font-weight: 600;
    color: var(--tlv-text);
    margin: 0;
}

.tlv-home-cta-text {
    color: var(--tlv-text-muted);
    font-size: var(--tlv-text-sm);
    margin: 0;
}

.tlv-home-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tlv-space-3);
    align-items: center;
}

.tlv-home-cta-sep {
    color: var(--tlv-text-subtle);
    font-size: var(--tlv-text-sm);
}

/* ----- cards ----- */

.tlv-card {
    background-color: var(--tlv-bg-card);
    border: 1px solid var(--tlv-border);
    border-radius: var(--tlv-radius-lg);
    overflow: hidden;
    transition: transform var(--tlv-transition-base),
                box-shadow var(--tlv-transition-base),
                border-color var(--tlv-transition-base);
}

.tlv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tlv-shadow-lg);
    border-color: var(--tlv-border-accent);
}

.tlv-card-body {
    padding: var(--tlv-space-5);
}

/* ----- inputs ----- */

.tlv-input,
.tlv-select {
    inline-size: 100%;
    padding-block: var(--tlv-space-3);
    padding-inline: var(--tlv-space-4);
    font-size: var(--tlv-text-sm);
    color: var(--tlv-text);
    background-color: var(--tlv-bg-elevated);
    border: 1px solid var(--tlv-border-strong);
    border-radius: var(--tlv-radius-md);
    transition: border-color var(--tlv-transition-base),
                box-shadow var(--tlv-transition-base);
}

.tlv-input::placeholder {
    color: var(--tlv-text-subtle);
}

.tlv-input:focus,
.tlv-select:focus {
    outline: none;
    border-color: var(--tlv-accent);
    box-shadow: 0 0 0 3px var(--tlv-accent-soft);
}

/* ----- badges + chips ----- */

.tlv-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tlv-space-1);
    padding-block: var(--tlv-space-1);
    padding-inline: var(--tlv-space-2);
    font-size: var(--tlv-text-xs);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--tlv-radius-sm);
    background-color: var(--tlv-bg-elevated);
    color: var(--tlv-text-muted);
    border: 1px solid var(--tlv-border);
}

.tlv-badge-accent {
    background-color: var(--tlv-accent-soft);
    color: var(--tlv-accent);
    border-color: var(--tlv-border-accent);
}

.tlv-badge-rose {
    background-color: var(--tlv-rose-soft);
    color: var(--tlv-rose-hover);
    border-color: rgba(225, 29, 72, 0.35);
}

/* ----- skeleton loader ----- */

.tlv-skeleton {
    background: linear-gradient(90deg,
        var(--tlv-bg-elevated) 25%,
        var(--tlv-bg-card) 50%,
        var(--tlv-bg-elevated) 75%);
    background-size: 200% 100%;
    animation: tlv-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: var(--tlv-radius-md);
}

html[dir="rtl"] .tlv-skeleton {
    animation-direction: reverse;
}

@keyframes tlv-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- divider ----- */

.tlv-divider {
    border: 0;
    block-size: 1px;
    background-color: var(--tlv-border);
    margin-block: var(--tlv-space-8);
}

/* ----- gradient utilities ----- */

.tlv-gradient-warm {
    background-image: linear-gradient(135deg, var(--tlv-accent) 0%, var(--tlv-rose) 100%);
}

.tlv-gradient-text-warm {
    background-image: linear-gradient(135deg, var(--tlv-accent) 0%, var(--tlv-rose) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----- legacy bootstrap surface tweaks -----
 * Phase 0 keeps existing Bootstrap-based pages working visually until later
 * phases replace them. These overrides re-skin the most jarring legacy surfaces
 * (cards, modals, alerts) so the warm-dark theme reads consistently.
 */

body.tlv-themed {
    background-color: var(--tlv-bg);
    color: var(--tlv-text);
}

body.tlv-themed .card {
    background-color: var(--tlv-bg-card);
    border-color: var(--tlv-border);
    color: var(--tlv-text);
}

body.tlv-themed .card-header {
    background-color: var(--tlv-bg-elevated);
    border-block-end-color: var(--tlv-border);
}

body.tlv-themed .modal-content {
    background-color: var(--tlv-bg-card);
    color: var(--tlv-text);
    border-color: var(--tlv-border-strong);
}

body.tlv-themed .form-control,
body.tlv-themed .form-select {
    background-color: var(--tlv-bg-elevated);
    border-color: var(--tlv-border-strong);
    color: var(--tlv-text);
}

body.tlv-themed .form-control:focus,
body.tlv-themed .form-select:focus {
    background-color: var(--tlv-bg-elevated);
    border-color: var(--tlv-accent);
    box-shadow: 0 0 0 3px var(--tlv-accent-soft);
    color: var(--tlv-text);
}

body.tlv-themed .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93C5FD;
}

body.tlv-themed .alert-warning {
    background-color: var(--tlv-accent-soft);
    border-color: var(--tlv-border-accent);
    color: var(--tlv-accent-hover);
}

body.tlv-themed .alert-danger {
    background-color: var(--tlv-rose-soft);
    border-color: rgba(225, 29, 72, 0.35);
    color: var(--tlv-rose-hover);
}

body.tlv-themed .alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6EE7B7;
}

body.tlv-themed .btn-close {
    filter: invert(1);
}

body.tlv-themed h1,
body.tlv-themed h2,
body.tlv-themed h3,
body.tlv-themed h4,
body.tlv-themed h5,
body.tlv-themed h6 {
    color: var(--tlv-text);
}

body.tlv-themed p,
body.tlv-themed label,
body.tlv-themed li {
    color: var(--tlv-text);
}

body.tlv-themed .text-muted,
body.tlv-themed .small {
    color: var(--tlv-text-muted) !important;
}

body.tlv-themed a,
body.tlv-themed .btn-link {
    color: var(--tlv-accent);
}

body.tlv-themed a:hover,
body.tlv-themed .btn-link:hover {
    color: var(--tlv-accent-hover);
}

body.tlv-themed .btn-primary {
    background-color: var(--tlv-accent);
    border-color: var(--tlv-accent);
    color: var(--tlv-bg);
}

body.tlv-themed .btn-primary:hover,
body.tlv-themed .btn-primary:focus {
    background-color: var(--tlv-accent-hover);
    border-color: var(--tlv-accent-hover);
    color: var(--tlv-bg);
}

body.tlv-themed .btn-secondary {
    background-color: var(--tlv-bg-elevated);
    border-color: var(--tlv-border-strong);
    color: var(--tlv-text);
}

body.tlv-themed .btn-secondary:hover {
    background-color: var(--tlv-bg-card);
    border-color: var(--tlv-border-accent);
    color: var(--tlv-text);
}

body.tlv-themed .btn-warning {
    background-color: var(--tlv-rose);
    border-color: var(--tlv-rose);
    color: var(--tlv-text);
}

body.tlv-themed .btn-warning:hover {
    background-color: var(--tlv-rose-hover);
    border-color: var(--tlv-rose-hover);
    color: var(--tlv-text);
}

body.tlv-themed .form-floating > label {
    color: var(--tlv-text-muted);
}

body.tlv-themed .form-floating > .form-control:focus ~ label,
body.tlv-themed .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--tlv-accent);
}

/* Bootstrap floating labels are full-height; with a background color set above
 * the label was covering the typed text. Keep the label transparent so the
 * caret/value stays visible.
 */
body.tlv-themed .form-floating > label::after {
    background-color: transparent !important;
}

body.tlv-themed .form-check-input {
    background-color: var(--tlv-bg-elevated);
    border-color: var(--tlv-border-strong);
}

body.tlv-themed .form-check-input:checked {
    background-color: var(--tlv-accent);
    border-color: var(--tlv-accent);
}

body.tlv-themed hr {
    border-color: var(--tlv-border);
    opacity: 1;
}

body.tlv-themed .container,
body.tlv-themed .container-fluid {
    color: var(--tlv-text);
}

body.tlv-themed .text-danger {
    color: var(--tlv-rose-hover) !important;
}

body.tlv-themed .text-success {
    color: var(--tlv-success) !important;
}

/* Account pages benefit from a bit of breathing room above the card. */
body.tlv-themed .container-fluid > .row > [class*="col-"] > section,
body.tlv-themed .container-fluid > .row > .col-12 > .card,
body.tlv-themed .container > .row > [class*="col-"] > section {
    padding-block-start: var(--tlv-space-6);
}

/* ----- browse layout (Movies / Series list pages) ----- */

.tlv-browse {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--tlv-space-8);
    padding-block-start: var(--tlv-space-4);
}

.tlv-browse-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-4);
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--tlv-topnav-height) + var(--tlv-space-4));
}

.tlv-browse-card {
    background-color: var(--tlv-bg-card);
    border: 1px solid var(--tlv-border);
    border-radius: var(--tlv-radius-lg);
    padding: var(--tlv-space-4);
}

.tlv-browse-card-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tlv-text-subtle);
    margin: 0 0 var(--tlv-space-3);
}

.tlv-browse-empty {
    color: var(--tlv-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
}

.tlv-view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background-color: var(--tlv-bg-elevated);
    border: 1px solid var(--tlv-border);
    border-radius: var(--tlv-radius-md);
}

.tlv-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--tlv-text-muted);
    background-color: transparent;
    border: 0;
    border-radius: calc(var(--tlv-radius-md) - 2px);
    cursor: pointer;
    transition: background-color var(--tlv-transition-base),
                color var(--tlv-transition-base);
}

.tlv-view-btn svg {
    inline-size: 1rem;
    block-size: 1rem;
}

.tlv-view-btn:hover {
    color: var(--tlv-text);
    background-color: rgba(245, 233, 217, 0.05);
}

.tlv-view-btn.active {
    color: var(--tlv-bg);
    background-color: var(--tlv-accent);
}

.tlv-browse-header {
    display: flex;
    align-items: baseline;
    gap: var(--tlv-space-3);
    margin-block-end: var(--tlv-space-6);
}

.tlv-browse-title {
    font-family: var(--tlv-font-serif);
    font-size: var(--tlv-text-3xl);
    font-weight: 700;
    color: var(--tlv-text);
    letter-spacing: -0.02em;
    margin: 0;
}

html[dir="rtl"] .tlv-browse-title {
    font-family: var(--tlv-font-persian);
}

.tlv-browse-count {
    color: var(--tlv-text-subtle);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.tlv-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--tlv-space-5);
}

.tlv-browse-grid--list {
    grid-template-columns: 1fr;
    gap: var(--tlv-space-3);
}

.tlv-browse-grid--list .tlv-poster-card {
    inline-size: 100%;
}

.tlv-browse-grid--list .tlv-poster-frame {
    aspect-ratio: 16 / 6;
}

.tlv-browse-empty-state {
    color: var(--tlv-text-muted);
    text-align: center;
    padding-block: var(--tlv-space-12);
}

.tlv-browse-sentinel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: var(--tlv-space-8);
    min-block-size: 2rem;
}

@media (max-width: 960px) {
    .tlv-browse {
        grid-template-columns: 1fr;
    }

    .tlv-browse-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tlv-browse-card {
        flex: 1 1 auto;
        min-inline-size: 12rem;
    }
}

/* ----- detail pages (Movie / Series / Episode) ----- */

.tlv-detail {
    margin-block-start: calc(-1 * var(--tlv-space-4));
}

.tlv-detail-hero {
    position: relative;
    min-block-size: clamp(20rem, 45vh, 32rem);
    margin-inline: calc(-1 * var(--tlv-space-6));
    margin-block-end: var(--tlv-space-8);
    background-image: var(--tlv-detail-bg-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

.tlv-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--tlv-detail-bg-img);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.2);
    transform: scale(1.1);
    z-index: -1;
}

.tlv-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--tlv-bg) 5%, rgba(15, 10, 26, 0.55) 60%, rgba(15, 10, 26, 0.85) 100%),
        linear-gradient(to right, rgba(15, 10, 26, 0.85) 0%, rgba(15, 10, 26, 0.45) 60%);
}

html[dir="rtl"] .tlv-detail-hero-overlay {
    background:
        linear-gradient(to top, var(--tlv-bg) 5%, rgba(15, 10, 26, 0.55) 60%, rgba(15, 10, 26, 0.85) 100%),
        linear-gradient(to left, rgba(15, 10, 26, 0.85) 0%, rgba(15, 10, 26, 0.45) 60%);
}

.tlv-detail-hero-content {
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--tlv-container-max);
    margin-inline: auto;
    padding: var(--tlv-space-12) var(--tlv-space-6) var(--tlv-space-8);
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: var(--tlv-space-8);
    align-items: end;
    min-block-size: inherit;
}

.tlv-detail-poster {
    aspect-ratio: 2 / 3;
    border-radius: var(--tlv-radius-lg);
    overflow: hidden;
    box-shadow: var(--tlv-shadow-xl);
    border: 1px solid var(--tlv-border-strong);
}

.tlv-detail-poster img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.tlv-detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-3);
    color: var(--tlv-text);
}

.tlv-detail-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tlv-accent);
    text-decoration: none;
}

a.tlv-detail-kicker:hover {
    color: var(--tlv-accent-hover);
}

.tlv-detail-title {
    font-family: var(--tlv-font-serif);
    font-size: clamp(1.75rem, 5vw, var(--tlv-text-5xl));
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--tlv-text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

html[dir="rtl"] .tlv-detail-title {
    font-family: var(--tlv-font-persian);
}

.tlv-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tlv-space-2);
    margin: 0;
}

.tlv-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tlv-space-3);
    margin-block-start: var(--tlv-space-2);
}

/* ---------- Rating button (thumbs + optional stars) ---------- */
.tlv-rating {
    display: inline-flex;
    flex-direction: column;
    gap: var(--tlv-space-2);
}

.tlv-rating-thumbs {
    display: inline-flex;
    align-items: center;
    gap: var(--tlv-space-2);
}

.tlv-rating-thumb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background-color: var(--tlv-surface-2, rgba(255, 255, 255, 0.06));
    color: var(--tlv-text, #f1edff);
    border: 1px solid var(--tlv-border, rgba(255, 255, 255, 0.12));
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tlv-rating-thumb:hover:not(:disabled):not(.is-readonly) {
    background-color: var(--tlv-surface-3, rgba(255, 255, 255, 0.1));
}

.tlv-rating-thumb:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tlv-rating-thumb.is-active.is-up {
    background-color: rgba(80, 200, 120, 0.18);
    border-color: rgba(80, 200, 120, 0.5);
    color: #a8e6c0;
}

.tlv-rating-thumb.is-active.is-down {
    background-color: rgba(220, 80, 80, 0.18);
    border-color: rgba(220, 80, 80, 0.5);
    color: #f5b3b3;
}

.tlv-rating-thumb.is-readonly {
    cursor: default;
    background-color: transparent;
    color: var(--tlv-text-muted, #aaa);
}

.tlv-rating-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
}

.tlv-rating-stars-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background-color: transparent;
    color: var(--tlv-text-muted, #aaa);
    border: 1px dashed var(--tlv-border, rgba(255, 255, 255, 0.18));
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tlv-rating-stars-toggle:hover {
    background-color: var(--tlv-surface-2, rgba(255, 255, 255, 0.06));
    color: var(--tlv-text, #f1edff);
}

.tlv-rating-stars-toggle.is-open {
    color: #f5c542;
    border-color: rgba(245, 197, 66, 0.5);
    border-style: solid;
}

.tlv-rating-mystars {
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
}

.tlv-rating-mystars-cta {
    font-size: 0.85em;
}

.tlv-rating-starpicker {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.tlv-rating-star,
.tlv-rating-star-clear {
    background: none;
    border: none;
    color: var(--tlv-text-muted, #888);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.12s ease, transform 0.12s ease;
}

.tlv-rating-star:hover:not(:disabled),
.tlv-rating-star-clear:hover:not(:disabled) {
    color: var(--tlv-text, #fff);
    transform: scale(1.15);
}

.tlv-rating-star.is-filled {
    color: #f5c542;
}

.tlv-rating-star-clear {
    margin-inline-start: var(--tlv-space-2);
    font-size: 0.85rem;
}

.tlv-rating-summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--tlv-text-muted, #aaa);
}

.tlv-rating-signin {
    font-size: 0.9rem;
    color: var(--tlv-accent, #b48bff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tlv-rating-signin:hover {
    color: var(--tlv-text, #fff);
}

.tlv-detail-empty,
.tlv-detail-loading {
    text-align: center;
    padding-block: var(--tlv-space-16);
    color: var(--tlv-text-muted);
}

.tlv-detail-empty .tlv-btn {
    margin-block-start: var(--tlv-space-4);
}

.tlv-detail-player {
    margin-block-end: var(--tlv-space-12);
}

.tlv-player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: var(--tlv-radius-xl);
    overflow: hidden;
    box-shadow: var(--tlv-shadow-xl);
    border: 1px solid var(--tlv-border-strong);
}

.tlv-player {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: contain;
    background-color: #000;
}

.tlv-episode-header {
    margin-block-start: var(--tlv-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-2);
}

.tlv-episode-title {
    font-family: var(--tlv-font-serif);
    font-size: var(--tlv-text-2xl);
    font-weight: 700;
    color: var(--tlv-text);
    margin: 0;
}

html[dir="rtl"] .tlv-episode-title {
    font-family: var(--tlv-font-persian);
}

.tlv-episode-desc {
    color: var(--tlv-text-muted);
    line-height: 1.65;
    max-inline-size: 70ch;
}

.tlv-seasons {
    margin-block: var(--tlv-space-12);
}

.tlv-season-tabs {
    display: flex;
    gap: var(--tlv-space-2);
    flex-wrap: wrap;
    margin-block-end: var(--tlv-space-6);
    border-block-end: 1px solid var(--tlv-border);
    padding-block-end: var(--tlv-space-2);
}

.tlv-season-tab {
    padding-block: var(--tlv-space-2);
    padding-inline: var(--tlv-space-4);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tlv-text-muted);
    background-color: transparent;
    border: 0;
    border-radius: var(--tlv-radius-md);
    cursor: pointer;
    transition: all var(--tlv-transition-base);
}

.tlv-season-tab:hover {
    color: var(--tlv-text);
    background-color: rgba(245, 158, 11, 0.06);
}

.tlv-season-tab.active {
    color: var(--tlv-accent);
    background-color: var(--tlv-accent-soft);
}

.tlv-episode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--tlv-space-4);
}

.tlv-episode-card {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-2);
    padding: 0;
    text-align: start;
    background-color: var(--tlv-bg-card);
    border: 1px solid var(--tlv-border);
    border-radius: var(--tlv-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--tlv-transition-base);
}

.tlv-episode-card:hover {
    border-color: var(--tlv-border-accent);
    transform: translateY(-2px);
    box-shadow: var(--tlv-shadow-md);
}

.tlv-episode-card.active {
    border-color: var(--tlv-accent);
    box-shadow: 0 0 0 2px var(--tlv-accent-soft);
}

.tlv-episode-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.tlv-episode-thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--tlv-transition-slow);
}

.tlv-episode-card:hover .tlv-episode-thumb img {
    transform: scale(1.05);
}

.tlv-episode-num {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding-block: 0.15rem;
    padding-inline: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tlv-bg);
    background-color: var(--tlv-accent);
    border-radius: var(--tlv-radius-sm);
}

.tlv-episode-info {
    padding: var(--tlv-space-3);
}

.tlv-episode-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tlv-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 720px) {
    .tlv-detail-hero-content {
        grid-template-columns: minmax(6rem, 8rem) 1fr;
        gap: var(--tlv-space-4);
        padding: var(--tlv-space-8) var(--tlv-space-4) var(--tlv-space-6);
    }
}

/* ----- Video.js theme overrides ----- */

.video-js.tlv-player {
    inline-size: 100%;
    block-size: 100%;
    background-color: #000;
}

.video-js.tlv-player .vjs-big-play-button {
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 9999px;
    border: 2px solid var(--tlv-accent);
    background-color: rgba(245, 158, 11, 0.85);
    line-height: 4rem;
    margin: 0;
    transform: translate(-50%, -50%);
    inset-inline-start: 50%;
    inset-block-start: 50%;
    box-shadow: var(--tlv-shadow-glow-amber);
    transition: transform var(--tlv-transition-base), background-color var(--tlv-transition-base);
}

.video-js.tlv-player:hover .vjs-big-play-button,
.video-js.tlv-player .vjs-big-play-button:focus {
    background-color: var(--tlv-accent);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-js.tlv-player .vjs-control-bar {
    background-color: rgba(15, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.video-js.tlv-player .vjs-progress-control .vjs-play-progress {
    background-color: var(--tlv-accent);
}

.video-js.tlv-player .vjs-progress-control .vjs-load-progress {
    background-color: rgba(245, 158, 11, 0.25);
}

.video-js.tlv-player .vjs-volume-level {
    background-color: var(--tlv-accent);
}

.video-js.tlv-player .vjs-icon-placeholder:before {
    color: var(--tlv-text);
}

/* HTML5 native controls fallback skin (works without Video.js init) */
.tlv-player-frame video::-webkit-media-controls-panel {
    background-color: rgba(15, 10, 26, 0.85);
}

/* ----- profile + content pages ----- */

.tlv-profile,
.tlv-doc {
    max-inline-size: var(--tlv-content-max);
    margin-inline: auto;
    padding-block: var(--tlv-space-10);
    padding-inline: var(--tlv-space-6);
}

.tlv-profile-header,
.tlv-doc-header {
    margin-block-end: var(--tlv-space-8);
}

.tlv-profile-title,
.tlv-doc-title {
    font-family: var(--tlv-font-serif);
    font-size: clamp(2rem, 4vw, var(--tlv-text-4xl));
    font-weight: 700;
    color: var(--tlv-text);
    margin-block: var(--tlv-space-2) 0;
    letter-spacing: -0.02em;
}

.tlv-profile-subtitle,
.tlv-doc-subtitle {
    color: var(--tlv-text-muted);
    margin-block-start: var(--tlv-space-2);
    font-size: var(--tlv-text-base);
}

.tlv-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: var(--tlv-space-6);
}

.tlv-profile-panel {
    padding: var(--tlv-space-6);
    background-color: var(--tlv-bg-card);
}

.tlv-profile-panel + .tlv-profile-panel {
    margin-block-start: var(--tlv-space-6);
}

.tlv-profile-grid + .tlv-profile-panel {
    margin-block-start: var(--tlv-space-6);
}

.tlv-profile-section-title {
    font-family: var(--tlv-font-serif);
    font-size: var(--tlv-text-xl);
    font-weight: 600;
    color: var(--tlv-text);
    margin-block: 0 var(--tlv-space-3);
}

/* Continue Watching strip on the profile page. Horizontally scrollable on
   narrow viewports, wraps gracefully on wider ones. */
.tlv-continue-watching-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: var(--tlv-space-4);
    overflow-x: auto;
    padding-block-end: var(--tlv-space-2);
    scroll-snap-type: x proximity;
}

.tlv-continue-watching-strip::-webkit-scrollbar { block-size: 6px; }
.tlv-continue-watching-strip::-webkit-scrollbar-thumb {
    background: var(--tlv-border);
    border-radius: 3px;
}

.tlv-continue-watching-card {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-2);
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform 120ms ease;
}

.tlv-continue-watching-card:hover {
    transform: translateY(-2px);
}

.tlv-continue-watching-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--tlv-radius);
    overflow: hidden;
    background: var(--tlv-bg-card);
}

.tlv-continue-watching-poster img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.tlv-continue-watching-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.55));
    opacity: 0;
    transition: opacity 120ms ease;
    color: white;
}

.tlv-continue-watching-card:hover .tlv-continue-watching-overlay,
.tlv-continue-watching-card:focus-visible .tlv-continue-watching-overlay {
    opacity: 1;
}

.tlv-continue-watching-play {
    inline-size: 3rem;
    block-size: 3rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.tlv-continue-watching-progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 4px;
    background: rgba(0, 0, 0, 0.55);
}

.tlv-continue-watching-progress-fill {
    block-size: 100%;
    background: var(--tlv-accent);
}

.tlv-continue-watching-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.tlv-continue-watching-title {
    font-weight: 600;
    color: var(--tlv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlv-continue-watching-subtitle {
    font-size: var(--tlv-text-sm);
    color: var(--tlv-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlv-continue-watching-meta {
    font-size: var(--tlv-text-xs);
    color: var(--tlv-text-muted);
}

/* Watch Stats card */
.tlv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--tlv-space-4);
}

.tlv-stat {
    padding: var(--tlv-space-3) var(--tlv-space-4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tlv-border);
    border-radius: var(--tlv-radius);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tlv-stat-value {
    font-family: var(--tlv-font-serif);
    font-size: var(--tlv-text-2xl);
    font-weight: 700;
    color: var(--tlv-text);
    line-height: 1.1;
}

.tlv-stat-label {
    font-size: var(--tlv-text-sm);
    color: var(--tlv-text-muted);
}

/* Watch Stats sparkline */
.tlv-sparkline {
    margin-block-start: var(--tlv-space-4);
    margin-block-end: 0;
}

.tlv-sparkline-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--tlv-text-sm);
    color: var(--tlv-text-muted);
    margin-block-end: var(--tlv-space-2);
}

.tlv-sparkline-meta {
    font-size: var(--tlv-text-xs);
}

.tlv-sparkline-svg {
    inline-size: 100%;
    block-size: 80px;
    display: block;
}

.tlv-sparkline-fill {
    fill: var(--tlv-accent);
    fill-opacity: 0.18;
    stroke: none;
}

.tlv-sparkline-line {
    fill: none;
    stroke: var(--tlv-accent);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Following Series grid */
.tlv-following-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--tlv-space-4);
}

.tlv-following-card {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-2);
}

.tlv-following-poster {
    aspect-ratio: 2 / 3;
    border-radius: var(--tlv-radius);
    overflow: hidden;
    background: var(--tlv-bg-card);
    display: block;
}

.tlv-following-poster img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 120ms ease;
}

.tlv-following-poster:hover img {
    transform: scale(1.04);
}

.tlv-following-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tlv-following-title {
    font-weight: 600;
    color: var(--tlv-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlv-following-title:hover {
    color: var(--tlv-accent);
}

.tlv-following-unfollow {
    font-size: var(--tlv-text-xs);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: start;
    color: var(--tlv-accent);
}

.tlv-following-unfollow:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Watchlist grid (mirrors .tlv-following-grid; episode entries get an overlay badge for SxxExx) */
.tlv-watchlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--tlv-space-4);
}

.tlv-watchlist-card {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-2);
}

.tlv-watchlist-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--tlv-radius);
    overflow: hidden;
    background: var(--tlv-bg-card);
    display: block;
}

.tlv-watchlist-poster img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 120ms ease;
}

.tlv-watchlist-poster:hover img {
    transform: scale(1.04);
}

.tlv-watchlist-badge {
    position: absolute;
    inset-block-start: var(--tlv-space-2);
    inset-inline-start: var(--tlv-space-2);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--tlv-radius);
    font-variant-numeric: tabular-nums;
}

.tlv-watchlist-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tlv-watchlist-title {
    font-weight: 600;
    color: var(--tlv-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlv-watchlist-title:hover {
    color: var(--tlv-accent);
}

.tlv-watchlist-remove {
    font-size: var(--tlv-text-xs);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: start;
    color: var(--tlv-accent);
}

.tlv-watchlist-remove:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Avatar / bio editor */
.tlv-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--tlv-space-4);
    margin-block-end: var(--tlv-space-4);
}

.tlv-avatar-preview {
    inline-size: 96px;
    block-size: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(180, 139, 255, 0.2), rgba(180, 139, 255, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--tlv-border, rgba(255, 255, 255, 0.12));
}

.tlv-avatar-preview img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.tlv-avatar-fallback {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tlv-accent, #b48bff);
    line-height: 1;
}

.tlv-avatar-help {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-2);
    font-size: 0.9rem;
}

.tlv-avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    align-self: flex-start;
}

/* Hide the InputFile control inside the styled label */
.tlv-avatar-upload-btn input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.tlv-text-warning {
    color: #f5b342;
    font-size: 0.85rem;
}

/* Compact shared form bits used by AvatarBioComponent + future profile forms */
.tlv-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-block-end: var(--tlv-space-3);
}

.tlv-form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tlv-text);
}

.tlv-form-help {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--tlv-text-muted, #aaa);
}

.tlv-form-actions {
    display: flex;
    align-items: center;
    gap: var(--tlv-space-3);
    margin-block-start: var(--tlv-space-2);
}

.tlv-form-status {
    font-size: 0.9rem;
}

.tlv-form-status.is-success {
    color: #a8e6c0;
}

.tlv-form-status.is-error {
    color: #f5b3b3;
}

/* For You — recommendation rail (smaller poster than watchlist for higher density) */
.tlv-foryou-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-block-end: var(--tlv-space-3);
}

.tlv-foryou-reason {
    margin: 0;
    font-size: 0.85rem;
    color: var(--tlv-text-muted, #aaa);
    font-style: italic;
}

.tlv-foryou-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--tlv-space-3);
}

.tlv-foryou-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.tlv-foryou-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--tlv-radius);
    overflow: hidden;
    background: var(--tlv-bg-card);
}

.tlv-foryou-rating {
    position: absolute;
    inset-block-start: 0.4rem;
    inset-inline-end: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding-block: 0.15rem;
    padding-inline: 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #a8e6c0;
    background-color: rgba(15, 10, 26, 0.78);
    border-radius: var(--tlv-radius);
    backdrop-filter: blur(4px);
}

.tlv-foryou-poster img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 120ms ease;
}

.tlv-foryou-card:hover .tlv-foryou-poster img {
    transform: scale(1.04);
}

.tlv-foryou-title {
    font-size: 0.85rem;
    color: var(--tlv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlv-foryou-card:hover .tlv-foryou-title {
    color: var(--tlv-accent);
}

/* Achievements */
.tlv-achievements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tlv-space-3);
    margin-block-end: var(--tlv-space-3);
}

.tlv-achievements-counter {
    font-size: 0.85rem;
    color: var(--tlv-text-muted, #aaa);
    font-variant-numeric: tabular-nums;
}

.tlv-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--tlv-space-3);
}

.tlv-achievement {
    display: flex;
    align-items: flex-start;
    gap: var(--tlv-space-3);
    padding: var(--tlv-space-3);
    background-color: var(--tlv-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--tlv-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--tlv-radius);
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.tlv-achievement.is-earned {
    opacity: 1;
    background-color: rgba(180, 139, 255, 0.08);
    border-color: rgba(180, 139, 255, 0.4);
}

.tlv-achievement-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--tlv-text-muted, #888);
    flex-shrink: 0;
}

.tlv-achievement.is-earned .tlv-achievement-icon {
    color: #f5c542;
}

.tlv-achievement-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.tlv-achievement-name {
    font-weight: 600;
    color: var(--tlv-text);
    font-size: 0.95rem;
}

.tlv-achievement-desc {
    font-size: 0.8rem;
    color: var(--tlv-text-muted, #aaa);
    line-height: 1.3;
}

.tlv-achievement-progress {
    margin-block-start: 0.4rem;
    block-size: 4px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.tlv-achievement-progress-bar {
    block-size: 100%;
    background-color: var(--tlv-accent, #b48bff);
    transition: inline-size 0.3s ease;
}

.tlv-spinner-inline {
    display: inline-block;
    inline-size: 0.85em;
    block-size: 0.85em;
    border: 2px solid currentColor;
    border-block-end-color: transparent;
    border-radius: 50%;
    animation: tlv-spin 700ms linear infinite;
    vertical-align: -2px;
}

@keyframes tlv-spin {
    to { transform: rotate(360deg); }
}

.tlv-profile-danger {
    border-color: rgba(225, 29, 72, 0.35);
}

.tlv-profile-admin {
    border-color: var(--tlv-border-accent);
}

.tlv-link-accent {
    color: var(--tlv-accent);
    text-decoration: underline;
    text-decoration-color: rgba(245, 158, 11, 0.4);
    text-underline-offset: 2px;
}

.tlv-link-accent:hover {
    color: var(--tlv-accent-hover);
}

/* ----- alerts ----- */

.tlv-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tlv-space-4);
    padding: var(--tlv-space-4) var(--tlv-space-5);
    border-radius: var(--tlv-radius-md);
    border: 1px solid;
    margin-block-end: var(--tlv-space-6);
    font-size: var(--tlv-text-sm);
}

.tlv-alert-success {
    background-color: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6EE7B7;
}

.tlv-alert-info {
    background-color: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93C5FD;
}

.tlv-alert-warning {
    background-color: rgba(245, 158, 11, 0.12);
    border-color: var(--tlv-border-accent);
    color: var(--tlv-accent-hover);
}

.tlv-alert-danger {
    background-color: rgba(225, 29, 72, 0.12);
    border-color: rgba(225, 29, 72, 0.4);
    color: #FCA5A5;
}

.tlv-alert-close {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: var(--tlv-text-xl);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
}

.tlv-alert-close:hover {
    opacity: 1;
}

/* ----- static document pages (about / contact / privacy / terms) ----- */

.tlv-doc-body {
    color: var(--tlv-text);
    font-size: var(--tlv-text-base);
    line-height: var(--tlv-leading-relaxed);
}

.tlv-doc-body h2 {
    font-family: var(--tlv-font-serif);
    font-size: var(--tlv-text-2xl);
    font-weight: 600;
    color: var(--tlv-text);
    margin-block: var(--tlv-space-8) var(--tlv-space-3);
}

.tlv-doc-body h2:first-child {
    margin-block-start: 0;
}

.tlv-doc-body p,
.tlv-doc-body ul,
.tlv-doc-body ol {
    color: var(--tlv-text-muted);
    margin-block: 0 var(--tlv-space-4);
}

.tlv-doc-body ul,
.tlv-doc-body ol {
    padding-inline-start: var(--tlv-space-6);
}

.tlv-doc-body li + li {
    margin-block-start: var(--tlv-space-2);
}

.tlv-doc-body a {
    color: var(--tlv-accent);
    text-decoration: underline;
    text-decoration-color: rgba(245, 158, 11, 0.4);
    text-underline-offset: 2px;
}

.tlv-doc-body a:hover {
    color: var(--tlv-accent-hover);
}

.tlv-doc-body strong {
    color: var(--tlv-text);
}

/* ===== Comments ===== */

.tlv-comments {
    margin-block-start: var(--tlv-space-10);
    padding-inline: var(--tlv-space-4);
    max-width: 960px;
    margin-inline: auto;
}

.tlv-comments-header h2 {
    font-family: var(--tlv-font-serif);
    font-size: var(--tlv-text-2xl);
    color: var(--tlv-text);
    margin-block-end: var(--tlv-space-4);
}

.tlv-comments-composer {
    background: var(--tlv-bg-card);
    border: 1px solid var(--tlv-border);
    border-radius: var(--tlv-radius-lg);
    padding: var(--tlv-space-4);
    margin-block-end: var(--tlv-space-6);
}

.tlv-comments-composer .ql-toolbar.ql-snow,
.tlv-comments-composer .ql-container.ql-snow {
    border-color: var(--tlv-border-strong);
}

.tlv-comments-composer .ql-toolbar.ql-snow {
    border-radius: var(--tlv-radius-md) var(--tlv-radius-md) 0 0;
    background: var(--tlv-bg-elevated);
}

.tlv-comments-composer .ql-container.ql-snow {
    border-radius: 0 0 var(--tlv-radius-md) var(--tlv-radius-md);
    background: var(--tlv-bg-elevated);
    min-height: 8rem;
    font-family: var(--tlv-font-sans);
    color: var(--tlv-text);
}

.tlv-comments-composer .ql-editor {
    min-height: 8rem;
    color: var(--tlv-text);
}

.tlv-comments-composer .ql-editor.ql-blank::before {
    color: var(--tlv-text-subtle);
    font-style: normal;
}

.tlv-comments-composer .ql-snow .ql-stroke {
    stroke: var(--tlv-text-muted);
}

.tlv-comments-composer .ql-snow .ql-fill {
    fill: var(--tlv-text-muted);
}

.tlv-comments-composer .ql-snow .ql-picker {
    color: var(--tlv-text-muted);
}

.tlv-comments-guest-fields {
    margin-block-start: var(--tlv-space-4);
    display: grid;
    gap: var(--tlv-space-3);
}

.tlv-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-1);
}

.tlv-form-row label {
    font-size: var(--tlv-text-sm);
    color: var(--tlv-text-muted);
}

.tlv-form-row input {
    background: var(--tlv-bg-elevated);
    border: 1px solid var(--tlv-border-strong);
    border-radius: var(--tlv-radius-md);
    color: var(--tlv-text);
    padding: var(--tlv-space-2) var(--tlv-space-3);
    font: inherit;
}

.tlv-form-row input:focus {
    outline: none;
    border-color: var(--tlv-border-accent);
    box-shadow: 0 0 0 2px var(--tlv-accent-soft);
}

.tlv-comments-hint {
    color: var(--tlv-text-subtle);
    font-weight: normal;
    margin-inline-start: var(--tlv-space-1);
}

.tlv-comments-turnstile {
    margin-block-start: var(--tlv-space-2);
}

.tlv-comments-composer-actions {
    display: flex;
    gap: var(--tlv-space-3);
    margin-block-start: var(--tlv-space-3);
}

.tlv-comments-error {
    color: var(--tlv-rose);
    background: var(--tlv-rose-soft);
    border: 1px solid var(--tlv-rose);
    border-radius: var(--tlv-radius-md);
    padding: var(--tlv-space-2) var(--tlv-space-3);
    margin-block-start: var(--tlv-space-3);
    font-size: var(--tlv-text-sm);
}

.tlv-comments-empty {
    padding: var(--tlv-space-6);
    text-align: center;
    color: var(--tlv-text-muted);
    background: var(--tlv-bg-card);
    border: 1px dashed var(--tlv-border);
    border-radius: var(--tlv-radius-lg);
}

.tlv-comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-4);
}

.tlv-comment {
    background: var(--tlv-bg-card);
    border: 1px solid var(--tlv-border);
    border-radius: var(--tlv-radius-lg);
    padding: var(--tlv-space-4);
}

.tlv-comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tlv-space-3);
    margin-block-end: var(--tlv-space-2);
}

.tlv-comment-author {
    font-weight: 600;
    color: var(--tlv-text);
}

.tlv-comment-time {
    font-size: var(--tlv-text-xs);
    color: var(--tlv-text-subtle);
}

.tlv-comment-body {
    color: var(--tlv-text);
    line-height: var(--tlv-leading-relaxed);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.tlv-comment-body p { margin-block: var(--tlv-space-2); }
.tlv-comment-body p:first-child { margin-block-start: 0; }
.tlv-comment-body p:last-child { margin-block-end: 0; }

.tlv-comment-body a {
    color: var(--tlv-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tlv-comment-body blockquote {
    border-inline-start: 3px solid var(--tlv-border-accent);
    padding-inline-start: var(--tlv-space-3);
    color: var(--tlv-text-muted);
    margin-inline: 0;
}

.tlv-comment-body pre,
.tlv-comment-body code {
    background: var(--tlv-bg-elevated);
    border-radius: var(--tlv-radius-sm);
    padding: 0.1em 0.4em;
    font-family: var(--tlv-font-mono);
    font-size: 0.9em;
}

.tlv-comment-body pre {
    padding: var(--tlv-space-3);
    overflow-x: auto;
}

.tlv-comment-actions {
    margin-block-start: var(--tlv-space-2);
    display: flex;
    gap: var(--tlv-space-3);
}

.tlv-btn-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--tlv-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--tlv-text-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tlv-btn-link:hover { color: var(--tlv-accent); }

.tlv-btn-link-danger { color: var(--tlv-rose); }
.tlv-btn-link-danger:hover { color: var(--tlv-rose-hover); }

.tlv-comments-load-more {
    margin-block-start: var(--tlv-space-5);
    text-align: center;
}

[dir="rtl"] .tlv-comments,
[dir="rtl"] .tlv-comments-composer,
[dir="rtl"] .tlv-comment {
    text-align: start;
}


/* ===== Live TV ===== */

.tlv-channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--tlv-space-4);
}

.tlv-channel-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--tlv-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--tlv-radius-md, 0.5rem);
    overflow: hidden;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tlv-channel-card:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.tlv-channel-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a1a2e, #0f0a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tlv-channel-logo {
    position: relative;
    z-index: 1;
    max-inline-size: 70%;
    max-block-size: 70%;
    object-fit: contain;
    /* Some channel logos are JPEG screenshots with white backgrounds — drop them onto
       the dark frame without a harsh edge. */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.tlv-channel-logo.tlv-img-broken {
    display: none;
}

.tlv-channel-logo-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
}

.tlv-channel-badge {
    position: absolute;
    z-index: 2;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0.25rem;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    backdrop-filter: blur(4px);
}

.tlv-channel-badge--live {
    background: rgba(220, 38, 38, 0.95);
}

.tlv-channel-badge--offline {
    background: rgba(107, 114, 128, 0.85);
}

.tlv-channel-badge--proxy {
    background: rgba(217, 119, 6, 0.9);
    inset-block-start: auto;
    inset-block-end: 0.5rem;
}

.tlv-channel-dot {
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: 50%;
    background: white;
    animation: tlv-live-pulse 1.5s ease-in-out infinite;
}

@keyframes tlv-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.tlv-channel-country {
    position: absolute;
    z-index: 2;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 0.25rem;
}

.tlv-channel-meta {
    padding: 0.5rem 0.75rem 0.6rem;
}

.tlv-channel-title {
    color: var(--tlv-text, #fff);
    font-size: 0.85rem;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Skeleton state during initial load */
.tlv-skeleton-card .tlv-channel-frame {
    background: linear-gradient(90deg, #1a1a2e 0%, #2a2a3e 50%, #1a1a2e 100%);
    background-size: 200% 100%;
    animation: tlv-skeleton-shimmer 1.4s linear infinite;
}

@keyframes tlv-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- Live TV detail page ----- */

.tlv-live-detail {
    max-inline-size: 64rem;
    margin: 0 auto;
    padding: var(--tlv-space-5) var(--tlv-space-4);
}

.tlv-live-detail-header {
    display: flex;
    gap: var(--tlv-space-5);
    margin-block-end: var(--tlv-space-5);
    align-items: flex-start;
}

.tlv-live-detail-logo {
    flex: 0 0 7rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--tlv-radius-md, 0.5rem);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.tlv-live-detail-logo img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

.tlv-live-detail-meta {
    flex: 1;
    min-inline-size: 0;
}

.tlv-live-detail-title {
    margin: 0.25rem 0 var(--tlv-space-3);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tlv-text, #fff);
}

.tlv-live-detail-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tlv-chip {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tlv-text, #fff);
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.tlv-chip--live {
    background: rgba(220, 38, 38, 0.9);
    color: white;
}

.tlv-chip--offline {
    background: rgba(107, 114, 128, 0.85);
    color: white;
}

/* Player frame */
.tlv-live-detail-player {
    margin-block-end: var(--tlv-space-5);
}

.tlv-live-player-wrap {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    background: #000;
    border-radius: var(--tlv-radius-md, 0.5rem);
    overflow: hidden;
    position: relative;
}

.tlv-live-player {
    inline-size: 100%;
    block-size: 100%;
    display: block;
}

.tlv-live-player--youtube {
    border: 0;
}

.tlv-live-player-blocked {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    background: #1a1a2e;
    border-radius: var(--tlv-radius-md, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    text-align: center;
    padding: var(--tlv-space-4);
}

.tlv-live-proxy-note {
    margin-block-start: var(--tlv-space-3);
    color: rgba(255, 255, 255, 0.55);
}

/* EPG widget */
.tlv-live-detail-epg {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--tlv-space-4);
}

@media (max-width: 720px) {
    .tlv-live-detail-epg {
        grid-template-columns: 1fr;
    }
    .tlv-live-detail-header {
        flex-direction: column;
    }
}

.tlv-live-epg-now,
.tlv-live-epg-next {
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--tlv-radius-md, 0.5rem);
    padding: var(--tlv-space-4);
}

.tlv-live-epg-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
    font-weight: 600;
}

.tlv-live-epg-title {
    margin: 0.4rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tlv-text, #fff);
}

.tlv-live-epg-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.tlv-live-epg-next ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.tlv-live-epg-next li {
    display: flex;
    gap: 0.75rem;
    padding: 0.3rem 0;
    font-size: 0.88rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.05);
}

.tlv-live-epg-next li:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}

.tlv-live-epg-next time {
    color: rgba(255, 255, 255, 0.55);
    flex: 0 0 3rem;
    font-variant-numeric: tabular-nums;
}

/* Sidebar toggle for "online only" */
.tlv-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--tlv-text, #fff);
    font-size: 0.9rem;
}

.tlv-toggle input[type="checkbox"] {
    accent-color: var(--tlv-accent, #FBBF24);
}