/* ============================================
   SIX PLAY — REDESIGN V2 (Polish Layer)
   Loaded after style.css. Refines visuals globally.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============ EXPANDED DESIGN TOKENS ============ */
:root {
    /* Brand palette */
    --brand-red:        #e50914;
    --brand-red-bright: #ff1f2d;
    --brand-red-deep:   #b00710;
    --brand-amber:      #f5c518;
    --brand-green:      #21d07a;
    --brand-blue:       #4f9eff;

    /* Surfaces (refined dark theme) */
    --bg-0: #060608;        /* page background */
    --bg-1: #0c0c10;        /* sections */
    --bg-2: #14141a;        /* cards */
    --bg-3: #1c1c24;        /* elevated */
    --bg-4: #26262f;        /* hover */
    --surface-glass: rgba(14,14,20,0.72);
    --surface-glass-strong: rgba(10,10,15,0.86);

    /* Text scale */
    --tx-1: #ffffff;
    --tx-2: rgba(255,255,255,0.78);
    --tx-3: rgba(255,255,255,0.56);
    --tx-4: rgba(255,255,255,0.34);

    /* Borders */
    --bd-1: rgba(255,255,255,0.06);
    --bd-2: rgba(255,255,255,0.12);
    --bd-3: rgba(255,255,255,0.20);
    --bd-brand: rgba(229,9,20,0.40);

    /* Gradients */
    --grad-brand: linear-gradient(135deg, #ff1f2d 0%, #e50914 50%, #b00710 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(229,9,20,0.18), rgba(229,9,20,0.04));
    --grad-fade-bottom: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 70%, #060608 100%);
    --grad-fade-top: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, transparent 100%);
    --grad-card-hover: linear-gradient(180deg, rgba(229,9,20,0.12) 0%, transparent 60%);
    --grad-hero: radial-gradient(ellipse at 30% 20%, rgba(229,9,20,0.18), transparent 60%),
                 radial-gradient(ellipse at 80% 80%, rgba(79,158,255,0.10), transparent 60%);

    /* Elevation */
    --elev-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
    --elev-2: 0 4px 12px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.35);
    --elev-3: 0 10px 30px rgba(0,0,0,0.55), 0 20px 60px rgba(0,0,0,0.45);
    --elev-brand: 0 8px 30px rgba(229,9,20,0.35), 0 2px 8px rgba(229,9,20,0.25);

    /* Radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 140ms;
    --t-normal: 220ms;
    --t-slow: 380ms;

    /* Layout */
    --nav-h: 64px;
    --nav-h-mobile: 56px;
    --bottom-nav-h: 60px;
    --container-pad: clamp(16px, 4vw, 56px);
}

/* ============ TYPOGRAPHY ============ */
body, html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-0) !important;
    color: var(--tx-1);
    letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--tx-1);
}
h1 { font-size: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(22px, 2.6vw, 34px); }
h3 { font-size: clamp(18px, 2vw, 24px); }

/* Section headings used on dashboards */
.section-title, .home-section__title, .row-title {
    font-size: clamp(18px, 2vw, 24px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    color: var(--tx-1) !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-title::before, .home-section__title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 22px;
    background: var(--grad-brand);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(229,9,20,0.6);
}

/* ============ NAVBAR (modernized glass) ============ */
.navbar {
    background: var(--surface-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--bd-1) !important;
    height: var(--nav-h) !important;
    transition: background var(--t-normal) var(--ease-out),
                border-color var(--t-normal) var(--ease-out) !important;
}
.navbar.scrolled {
    background: var(--surface-glass-strong) !important;
    border-bottom-color: var(--bd-2) !important;
}
.navbar-logo, .navbar h1 a, .logo {
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    font-size: 22px !important;
}
.navbar-nav a, .navbar a {
    font-weight: 500;
    color: var(--tx-2);
    transition: color var(--t-fast) var(--ease-out);
    position: relative;
}
.navbar-nav a:hover, .navbar a:hover { color: var(--tx-1); }
.navbar-nav a.active, .navbar a.active {
    color: var(--tx-1);
    font-weight: 600;
}
.navbar-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 0; right: 0;
    height: 2px;
    background: var(--grad-brand);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--brand-red);
}

/* ============ BUTTONS ============ */
.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    padding: 12px 22px;
    border-radius: var(--r-md);
    transition: all var(--t-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-primary {
    background: var(--grad-brand) !important;
    color: #fff !important;
    box-shadow: var(--elev-brand) !important;
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 12px 36px rgba(229,9,20,0.45), 0 4px 12px rgba(229,9,20,0.3) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary, .btn-outline {
    background: rgba(255,255,255,0.08) !important;
    color: var(--tx-1) !important;
    border-color: var(--bd-2) !important;
    backdrop-filter: blur(10px);
}
.btn-secondary:hover, .btn-outline:hover {
    background: rgba(255,255,255,0.14) !important;
    border-color: var(--bd-3) !important;
    transform: translateY(-1px);
}
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* Ripple-ish shine */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-out);
}
.btn:hover::before { transform: translateX(100%); }

/* ============ CARDS / POSTERS ============ */
.card, .poster-card {
    border-radius: var(--r-md) !important;
    overflow: hidden;
    background: var(--bg-2) !important;
    border: 1px solid var(--bd-1);
    transition: transform var(--t-normal) var(--ease-out),
                box-shadow var(--t-normal) var(--ease-out),
                border-color var(--t-normal) var(--ease-out) !important;
    position: relative;
    isolation: isolate;
}
.card:hover, .poster-card:hover {
    transform: translateY(-4px) scale(1.025);
    box-shadow: var(--elev-3), 0 0 0 1px var(--bd-brand);
    border-color: var(--bd-brand);
    z-index: 10;
}
.card-image, .poster-image {
    position: relative;
    aspect-ratio: 2/3;
    background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
    overflow: hidden;
}
.card-image img, .poster-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.card:hover .card-image img,
.poster-card:hover .poster-image img {
    transform: scale(1.08);
}
.card-image::after, .poster-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.card-info, .poster-info {
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.card-title, .poster-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tx-1) !important;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
}
.card-meta, .poster-meta {
    font-size: 11px !important;
    color: var(--tx-3) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-meta .rating, .poster-meta .rating {
    color: var(--brand-amber);
    font-weight: 600;
}

/* Live badge on cards */
.live-badge, .card .badge-live {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--brand-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(229,9,20,0.5);
    z-index: 2;
}
.live-badge::before {
    content: '';
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* ============ CONTENT ROWS ============ */
.content-row, .home-row, .row-scroll {
    position: relative;
    padding: 0 var(--container-pad);
    margin-bottom: 40px;
}
.content-row__header, .row-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.content-row__scroll, .row-scroll-inner, .home-row__scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 0 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 48px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 48px), transparent 100%);
}
.content-row__scroll::-webkit-scrollbar,
.row-scroll-inner::-webkit-scrollbar,
.home-row__scroll::-webkit-scrollbar { display: none; }
.content-row__scroll > *, .home-row__scroll > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

/* Row nav arrows — refined */
.home-row__arrow, .row-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--bd-2) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all var(--t-fast) var(--ease-out) !important;
    opacity: 0;
}
.content-row:hover .home-row__arrow,
.content-row:hover .row-arrow,
.home-row:hover .home-row__arrow { opacity: 1; }
.home-row__arrow:hover, .row-arrow:hover {
    background: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    transform: translateY(-50%) scale(1.1);
}
.home-row__arrow--left, .row-arrow.left { left: 8px; }
.home-row__arrow--right, .row-arrow.right { right: 8px; }
@media (max-width: 768px) {
    .home-row__arrow, .row-arrow { display: none !important; }
}

/* ============ HERO (cinematic) ============ */
.home-hero, .hero, .lp-hero {
    position: relative;
    min-height: clamp(420px, 75vh, 720px);
    overflow: hidden;
    isolation: isolate;
}
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-hero);
    z-index: 1;
    pointer-events: none;
}
.home-hero__bg, .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.home-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 50%, transparent 100%),
        linear-gradient(180deg, transparent 30%, rgba(6,6,8,0.85) 80%, var(--bg-0) 100%);
    z-index: 1;
}
.home-hero__content, .hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 0 var(--container-pad);
    padding-top: clamp(60px, 12vh, 120px);
}
.home-hero__title, .hero-title {
    font-size: clamp(36px, 5.5vw, 68px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 18px !important;
    text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.home-hero__desc, .hero-desc {
    font-size: clamp(15px, 1.4vw, 18px) !important;
    color: var(--tx-2) !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
    max-width: 540px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.home-hero__actions, .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============ CATEGORY TABS / CHIPS ============ */
.category-tabs, .quick-tabs, .home-quick {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 16px var(--container-pad);
    scrollbar-width: none;
    position: sticky;
    top: var(--nav-h);
    background: var(--surface-glass-strong);
    backdrop-filter: blur(20px);
    z-index: 50;
    border-bottom: 1px solid var(--bd-1);
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab, .quick-tab, .home-quick__chip {
    flex-shrink: 0;
    padding: 8px 18px !important;
    border-radius: var(--r-pill) !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--bd-1) !important;
    color: var(--tx-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all var(--t-fast) var(--ease-out) !important;
    white-space: nowrap;
    cursor: pointer;
}
.category-tab:hover, .quick-tab:hover, .home-quick__chip:hover {
    background: rgba(255,255,255,0.10) !important;
    color: var(--tx-1) !important;
    border-color: var(--bd-2) !important;
}
.category-tab.active, .quick-tab.active, .home-quick__chip.active,
.category-tab[aria-current="true"] {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--elev-brand) !important;
    font-weight: 600 !important;
}

/* Genre pills — neutralize hardcoded inline gradients */
.genre-pill {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--bd-1) !important;
    color: var(--tx-2) !important;
    padding: 6px 14px !important;
    border-radius: var(--r-pill) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: all var(--t-fast) var(--ease-out);
}
.genre-pill:hover {
    background: var(--grad-brand-soft) !important;
    border-color: var(--bd-brand) !important;
    color: var(--tx-1) !important;
}

/* ============ POSTER GRID ============ */
.poster-grid, .category-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 18vw, 200px), 1fr)) !important;
    gap: clamp(12px, 1.8vw, 22px) !important;
    padding: 24px var(--container-pad) !important;
}

/* ============ BOTTOM NAV (mobile) ============ */
.bottom-nav {
    background: var(--surface-glass-strong) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 1px solid var(--bd-1) !important;
    height: var(--bottom-nav-h);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
.bottom-nav__item {
    transition: color var(--t-fast) var(--ease-out);
}
.bottom-nav__item.active {
    color: var(--brand-red) !important;
}
.bottom-nav__item.active svg, .bottom-nav__item.active i {
    filter: drop-shadow(0 0 6px var(--brand-red));
}

/* ============ FORMS ============ */
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
    background: var(--bg-2) !important;
    border: 1px solid var(--bd-2) !important;
    color: var(--tx-1) !important;
    padding: 12px 16px !important;
    border-radius: var(--r-md) !important;
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    width: 100%;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 0 3px rgba(229,9,20,0.18) !important;
}
.form-control::placeholder, input::placeholder { color: var(--tx-4); }

/* ============ AUTH PAGES ============ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at top, rgba(229,9,20,0.16), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(79,158,255,0.08), transparent 60%),
        var(--bg-0) !important;
    padding: 24px;
}
.auth-container {
    background: var(--surface-glass-strong) !important;
    backdrop-filter: blur(24px);
    border: 1px solid var(--bd-1);
    border-radius: var(--r-xl) !important;
    padding: 40px 32px !important;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--elev-3);
}
.auth-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    text-align: center;
    margin-bottom: 8px !important;
}
.auth-footer {
    text-align: center;
    color: var(--tx-3);
    font-size: 14px;
    margin-top: 24px;
}
.auth-footer a { color: var(--brand-red); font-weight: 600; }

/* ============ EMPTY / LOADING STATES ============ */
.empty-state {
    text-align: center;
    padding: 80px 24px;
    color: var(--tx-3);
}
.empty-state h3 {
    font-size: 22px;
    color: var(--tx-1);
    margin-bottom: 12px;
}
.skeleton {
    background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-md);
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============ SCROLLBARS (desktop) ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ============ SPORTS PAGE — responsive fix ============ */
.sports-content {
    display: grid !important;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr) !important;
    gap: 28px !important;
    padding: 24px var(--container-pad) !important;
    align-items: start;
}
.sidebar-group, .sports-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    background: var(--bg-1) !important;
    border: 1px solid var(--bd-1) !important;
    border-radius: var(--r-lg) !important;
    padding: 16px !important;
    max-height: calc(100vh - var(--nav-h) - 32px);
    overflow-y: auto;
}
.sidebar-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    border-radius: var(--r-md) !important;
    color: var(--tx-2) !important;
    font-size: 13px !important;
    transition: all var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.sidebar-channel:hover {
    background: var(--bg-3) !important;
    color: var(--tx-1) !important;
}
.sidebar-channel.active {
    background: var(--grad-brand-soft) !important;
    color: var(--tx-1) !important;
    border-left: 3px solid var(--brand-red);
}
.channel-match {
    background: var(--bg-2) !important;
    border: 1px solid var(--bd-1) !important;
    border-radius: var(--r-lg) !important;
    padding: 16px !important;
    transition: all var(--t-fast) var(--ease-out);
}
.channel-match:hover {
    border-color: var(--bd-brand) !important;
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
}
.sports-hero {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(229,9,20,0.20), transparent 60%),
        radial-gradient(ellipse at 70% 100%, rgba(33,208,122,0.10), transparent 60%),
        var(--bg-0) !important;
    border-bottom: 1px solid var(--bd-1);
    padding: clamp(40px, 8vw, 80px) var(--container-pad) !important;
}

@media (max-width: 1024px) {
    .sports-content {
        grid-template-columns: 1fr !important;
    }
    .sidebar-group, .sports-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        flex-direction: row;
    }
    .sidebar-channel {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ============ WATCH PAGE — refined episode UI ============ */
.s-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.s-pill {
    padding: 8px 16px !important;
    border-radius: var(--r-pill) !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--bd-1) !important;
    color: var(--tx-2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.s-pill:hover {
    background: rgba(255,255,255,0.10) !important;
    color: var(--tx-1) !important;
}
.s-pill.on {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--elev-brand) !important;
}
.e-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 10px !important;
}
.e-grid .ep-card, .e-grid > * {
    background: var(--bg-2) !important;
    border: 1px solid var(--bd-1) !important;
    border-radius: var(--r-md) !important;
    padding: 12px !important;
    transition: all var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.e-grid .ep-card:hover, .e-grid > *:hover {
    background: var(--bg-3) !important;
    border-color: var(--bd-brand) !important;
    transform: translateY(-2px);
}

/* ============ DASHBOARD — trending card refinements ============ */
.home-trending__card, .trending-card {
    position: relative;
    border-radius: var(--r-lg) !important;
    overflow: hidden;
    background: var(--bg-2);
    transition: transform var(--t-normal) var(--ease-out),
                box-shadow var(--t-normal) var(--ease-out);
}
.home-trending__card:hover {
    transform: scale(1.04);
    box-shadow: var(--elev-3);
    z-index: 5;
}
.home-trending__rank {
    font-size: clamp(80px, 12vw, 140px) !important;
    font-weight: 900 !important;
    line-height: 0.85 !important;
    color: transparent !important;
    -webkit-text-stroke: 2px var(--brand-red) !important;
    background: linear-gradient(180deg, rgba(229,9,20,0.5), rgba(229,9,20,0.1)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    text-shadow: 0 8px 30px rgba(229,9,20,0.3);
}

/* ============ MOBILE TUNING ============ */
@media (max-width: 768px) {
    :root { --container-pad: 16px; }
    .navbar { height: var(--nav-h-mobile) !important; }
    .home-hero { min-height: 60vh !important; }
    .home-hero__title, .hero-title { font-size: clamp(28px, 8vw, 40px) !important; }
    .poster-grid, .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 10px !important;
        padding: 16px !important;
    }
    .content-row, .home-row { margin-bottom: 28px; }
    body { padding-bottom: var(--bottom-nav-h); }
}

/* ============ MICRO-INTERACTIONS ============ */
@media (prefers-reduced-motion: no-preference) {
    .card:active, .poster-card:active, .btn:active {
        transform: scale(0.98);
    }
}

/* ============ FOCUS RING (a11y) ============ */
*:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ============ UTILITY OVERRIDES ============ */
.text-muted, .meta-muted { color: var(--tx-3) !important; }
.text-brand { color: var(--brand-red) !important; }
.bg-glass {
    background: var(--surface-glass) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--bd-1);
}

/* Subscription banner refinement */
[class*="subscription"], .sub-warn, .iptv-info-section {
    background: linear-gradient(135deg, rgba(229,9,20,0.10), rgba(229,9,20,0.03)) !important;
    border: 1px solid var(--bd-brand) !important;
    border-radius: var(--r-lg) !important;
    backdrop-filter: blur(10px);
}

/* Pagination */
.pagination, .pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 32px var(--container-pad);
}
.pagination a, .pagination span, .pager a, .pager span {
    min-width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--bd-1);
    color: var(--tx-2);
    font-size: 13px;
    font-weight: 600;
    transition: all var(--t-fast) var(--ease-out);
}
.pagination a:hover, .pager a:hover {
    background: var(--bg-3);
    border-color: var(--bd-2);
    color: var(--tx-1);
}
.pagination .current, .pagination .active, .pager .current {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--elev-brand);
}

/* ============ CATALOG FILTER BAR ============ */
.catalog-filter-bar {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 18px var(--container-pad);
    border-bottom: 1px solid var(--bd-1);
    background: rgba(255,255,255,0.01);
}
.filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}
.filter-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tx-3);
}
.filter-field select {
    padding: 9px 32px 9px 12px !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--bd-2) !important;
    border-radius: var(--r-md) !important;
    color: var(--tx-1) !important;
    font-size: 13px !important;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='3' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    transition: border-color var(--t-fast) var(--ease-out);
}
.filter-field select:hover { border-color: var(--bd-3) !important; }
.filter-field select:focus {
    outline: none;
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 0 3px rgba(229,9,20,0.15);
}
.filter-clear {
    padding: 9px 14px;
    border-radius: var(--r-md);
    background: rgba(229,9,20,0.10);
    border: 1px solid var(--bd-brand);
    color: var(--brand-red);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--t-fast) var(--ease-out);
    align-self: flex-end;
}
.filter-clear:hover {
    background: var(--brand-red);
    color: #fff;
}
.filter-count {
    margin-left: auto;
    color: var(--tx-3);
    font-size: 13px;
    font-weight: 500;
    align-self: center;
}
.genre-pill-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px var(--container-pad);
    scrollbar-width: none;
}
.genre-pill-row::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
    .catalog-filter-bar { gap: 8px; padding: 12px 16px; }
    .filter-field { min-width: 100px; flex: 1 1 100px; }
    .filter-count { width: 100%; margin: 0; text-align: right; }
}