/* ============================================================================
   AXADLE DIRECT — UNIFIED FRONTEND STYLESHEET
   Replaces all inline <style> blocks across frontend views.
   Loaded AFTER design-system.css (which owns all --ax-* / --ds-* tokens).
   Compatible with every screen size: 320px → 2560px.

   Sections:
   01. Reset + Base
   02. Navbar
   03. Desktop Sidebar
   04. Mobile Drawer + Bottom Nav
   05. Section Rhythm
   06. Content Cards (ax-content-card)
   07. Live TV Cards (ax-live-card)
   08. Footer
   09. Search Overlay
   10. Skeleton Loader
   11. Player Components
   12. Utilities + Scrollbar + RTL
   13. UNIFIED: Page Hero (all listing pages)
   14. UNIFIED: Type Tabs
   15. UNIFIED: Content Grid
   16. UNIFIED: Filter Panel
   17. Live TV Hub (hub-*)
   18. Search Page (srch-*)
   19. Discover Pages (disc-*)
   20. Browse Pages (browse-*)
   21. Responsive (all breakpoints)
   ========================================================================== */

/* ── 01. Reset + Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--ax-font);
    background:
        radial-gradient(circle at 78% 5%, rgba(70,88,112,.18), transparent 30vw),
        radial-gradient(circle at 8% 18%, rgba(229,9,20,.08), transparent 26vw),
        #05070b;
    background-attachment: fixed;
    color: var(--ax-text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.01em;
}
h1,h2,h3,h4,.ax-section-title,.ax-hero-title { font-family: var(--ax-font-head); letter-spacing: -.02em; font-weight: 800; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(255,42,42,.35); color:#fff; }

/* Global transitions */
@media (prefers-reduced-motion: no-preference) {
    .ax-content-card, .ax-cw-card, .dash-cw-card, .dash-rec-card,
    .btn-ax, .ax-mf-chip, .ax-filter-item, .ax-qa, .ax-nav-link,
    .ax-card, .ax-live-card, .ax-top10-card { transition: transform .35s var(--ax-ease), box-shadow .35s var(--ax-ease), background .25s var(--ax-ease), color .25s var(--ax-ease), border-color .25s var(--ax-ease); }
}

/* Global buttons */
.btn-ax-primary, .ax-btn-start, .ax-btn-play, .btn.btn-primary { background: var(--ax-gradient) !important; border: none; box-shadow: var(--ax-shadow-sm); }
.btn-ax-primary:hover, .ax-btn-start:hover, .ax-btn-play:hover, .btn.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ax-glow); }
.ax-content-card:hover, .ax-cw-card:hover, .dash-rec-card:hover, .ax-card:hover { box-shadow: var(--ax-shadow-lg); }
.ax-glass { background: var(--ax-glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--ax-glass-brd); }

/* ── 02. Navbar ─────────────────────────────────────────────────────────── */
.ax-navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--ax-navbar-h);
    background: linear-gradient(180deg, rgba(5,7,11,.78), rgba(5,7,11,.18) 74%, transparent);
    transition: background .3s, backdrop-filter .3s;
    display: flex; align-items: center;
}
.ax-navbar.scrolled {
    background: rgba(5,7,11,.86);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--ax-glass-brd);
    box-shadow: var(--ax-shadow-sm);
}
.ax-navbar-inner { display: flex; align-items: center; gap: clamp(22px,3vw,44px); padding: 0 clamp(22px,3.5vw,44px); width: 100%; }
.ax-brand {
    display: flex; align-items: center; gap: 4px;
    font-family: var(--ax-font-head);
    font-size: clamp(24px,2.15vw,32px);
    font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #fff; flex-shrink: 0;
}
.ax-brand-icon {
    display: inline-flex; width: 38px; height: 32px; border-radius: 12px;
    background: linear-gradient(135deg,#ff4136,#e50914);
    align-items: center; justify-content: center;
    color: #fff; font-size: 20px; transform: skewX(-8deg);
    box-shadow: 0 12px 28px rgba(229,9,20,.24);
}
.ax-brand-icon i { transform: skewX(8deg); }
.ax-brand-logo { height: 40px; max-height: 40px; width: auto; max-width: 210px; object-fit: contain; display: block; }
.ax-brand-word-primary { color: var(--ax-accent); font-weight: 900; }
.ax-brand-word-secondary { color: #fff; font-weight: 800; }
.ax-nav-links { display: flex; align-items: center; gap: clamp(14px,1.8vw,30px); flex: 0 1 auto; }
.ax-nav-link {
    position: relative; padding: 25px 0 23px; border-radius: 0;
    color: rgba(255,255,255,.9); background: transparent !important;
    font-size: 15px; font-weight: 700;
}
.ax-nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 16px;
    height: 3px; border-radius: 999px; background: var(--ax-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.ax-nav-link:hover, .ax-nav-link.active { color: #fff; }
.ax-nav-link.active::after, .ax-nav-link:hover::after { transform: scaleX(1); }
.ax-navbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.ax-search-btn { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--ax-border); display: flex; align-items: center; justify-content: center; color: var(--ax-muted); font-size: 17px; cursor: pointer; transition: all .2s; }
.ax-search-btn:hover { background: rgba(255,255,255,.1); color: var(--ax-text); }
.ax-search-inline {
    width: min(360px,24vw); height: 44px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,.12); background: rgba(19,27,42,.78);
    color: rgba(255,255,255,.72); display: flex; align-items: center;
    justify-content: space-between; gap: 14px; padding: 0 16px;
    font-size: 14px; cursor: text; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(16px);
}
.ax-search-inline:hover, .ax-search-inline:focus { border-color: rgba(255,255,255,.24); color: #fff; }
.ax-search-inline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-search-inline i { font-size: 19px; color: #fff; opacity: .9; }
.ax-icon-action { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.ax-icon-action:hover { background: rgba(255,255,255,.08); }
.ax-btn-signin { padding: 8px 20px; border-radius: 6px; font-size: 13.5px; font-weight: 600; border: 1px solid rgba(255,255,255,.28); color: #fff; transition: all .2s; }
.ax-btn-signin:hover { background: rgba(255,255,255,.08); }
.ax-btn-start { padding: 8px 20px; border-radius: 6px; font-size: 13.5px; font-weight: 600; background: var(--ax-accent); color: #fff; }
.ax-btn-start:hover { background: #ff1822; color: #fff; transform: translateY(-2px); }
.ax-user-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.ax-user-menu { border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; gap: 10px; padding: 0; font-weight: 700; }
.ax-kids-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 800; background: linear-gradient(135deg,#10b981,#059669); color: #fff; letter-spacing: .03em; border: 1px solid rgba(16,185,129,.4); transition: opacity .2s; }
.ax-kids-badge:hover { opacity: .85; color: #fff; }
.ax-notif-wrap { position: relative; }
.ax-notif-badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; border-radius: 8px; background: #FF2A2A; color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 3px; pointer-events: none; border: 2px solid var(--ax-bg); }
.ax-notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; background: var(--ax-bg3); border: 1px solid var(--ax-border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 9000; overflow: hidden; }
.ax-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ax-border); font-size: 13px; font-weight: 700; }
.ax-notif-readall { background: none; border: none; color: #FF2A2A; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ax-notif-list { max-height: 320px; overflow-y: auto; }
.ax-notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ax-border); cursor: pointer; transition: background .15s; }
.ax-notif-item:hover { background: rgba(255,255,255,.04); }
.ax-notif-item.unread { background: rgba(255,42,42,.04); }
.ax-notif-ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,42,42,.15); display: grid; place-items: center; flex-shrink: 0; color: #FF2A2A; font-size: 14px; }
.ax-notif-body { flex: 1; min-width: 0; }
.ax-notif-body strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ax-text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-notif-body span { font-size: 11.5px; color: var(--ax-muted); }
.ax-notif-empty { text-align: center; padding: 32px 16px; color: var(--ax-muted); }
.ax-notif-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .4; }
.ax-notif-empty p { font-size: 12px; margin: 0; }
.ax-hamburger { display: none; background: none; border: none; color: var(--ax-text); font-size: 22px; cursor: pointer; padding: 4px; }

/* ── 03. Desktop Sidebar ─────────────────────────────────────────────────── */
.ax-sidebar { display: none; }
@media (min-width: 992px) {
    .ax-sidebar {
        display: flex; flex-direction: column;
        position: fixed; top: 0; left: 0; bottom: 0; width: var(--ax-sidebar-w);
        background: linear-gradient(180deg, #070C18 0%, var(--ax-bg) 100%);
        border-right: 1px solid var(--ax-border);
        z-index: 1100; padding: 22px 16px 16px; overflow-y: auto;
    }
    .ax-sidebar::-webkit-scrollbar { width: 0; }
    .ax-navbar { left: var(--ax-sidebar-w); }
    main { margin-left: var(--ax-sidebar-w); }
    .ax-footer { margin-left: var(--ax-sidebar-w); }
    .ax-navbar .ax-brand, .ax-navbar .ax-nav-links { display: none !important; }

    body:not(.ax-has-sidebar) .ax-sidebar { display: none; }
    body:not(.ax-has-sidebar) .ax-navbar { left: 0; }
    body:not(.ax-has-sidebar) main, body:not(.ax-has-sidebar) .ax-footer { margin-left: 0; }
    body:not(.ax-has-sidebar) .ax-navbar .ax-brand,
    body:not(.ax-has-sidebar) .ax-navbar .ax-nav-links { display: flex !important; }

    body.ax-has-sidebar:not(.ax-series-detail) { --ax-sidebar-w: 108px; }
    body.ax-has-sidebar:not(.ax-series-detail) .ax-sidebar { align-items: center; padding-inline: 12px; }
    body.ax-has-sidebar:not(.ax-series-detail) .ax-sidebar-brand { justify-content: center; padding-inline: 0; }
    body.ax-has-sidebar:not(.ax-series-detail) .ax-sidebar-brand .b1,
    body.ax-has-sidebar:not(.ax-series-detail) .ax-sidebar-brand .b2,
    body.ax-has-sidebar:not(.ax-series-detail) .ax-sidebar-section,
    body.ax-has-sidebar:not(.ax-series-detail) .ax-sidebar-profile,
    body.ax-has-sidebar:not(.ax-series-detail) .ax-sidebar-foot .ax-side-link::after { display: none; }
    body.ax-has-sidebar:not(.ax-series-detail) .ax-side-link { width: 56px; height: 56px; justify-content: center; padding: 0; border-radius: 16px; font-size: 0; }
    body.ax-has-sidebar:not(.ax-series-detail) .ax-side-link i { width: auto; font-size: 21px; }
    body.ax-has-sidebar:not(.ax-series-detail) .ax-navbar .ax-nav-links { display: flex !important; }
}
.ax-sidebar-brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 900; letter-spacing: -.02em; padding: 4px 10px 22px; }
.ax-sidebar-brand .b1 { color: var(--ax-accent); }
.ax-sidebar-brand .b2 { color: var(--ax-text); }
.ax-sidebar-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ax-muted); padding: 14px 12px 8px; }
.ax-sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.ax-side-link { position: relative; display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--ax-text-2); transition: all .2s var(--ax-ease); }
.ax-side-link i { font-size: 18px; width: 22px; text-align: center; color: var(--ax-muted); transition: color .2s; }
.ax-side-link:hover { background: rgba(255,255,255,.05); color: var(--ax-text); }
.ax-side-link:hover i { color: var(--ax-text); }
.ax-side-link.active { background: rgba(255,42,42,.12); color: #fff; }
.ax-side-link.active i { color: var(--ax-accent); }
.ax-side-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 4px 4px 0; background: var(--ax-gradient); }
.ax-sidebar-spacer { flex: 1; min-height: 18px; }
.ax-sidebar-profile { display: flex; align-items: center; gap: 11px; padding: 12px; margin-top: 8px; border-radius: 13px; background: var(--ax-card); border: 1px solid var(--ax-border); }
.ax-sidebar-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ax-sidebar-profile .pname { font-size: 13.5px; font-weight: 700; color: var(--ax-text); line-height: 1.2; }
.ax-sidebar-profile .pplan { font-size: 11.5px; font-weight: 700; color: var(--ax-gold); }
.ax-sidebar-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ax-border); }
.ax-sidebar-foot .ax-side-link { font-weight: 500; font-size: 13.5px; padding: 9px 14px; }

/* ── 04. Mobile Drawer + Bottom Nav ─────────────────────────────────────── */
.ax-mobile-drawer { position: fixed; inset: 0; z-index: 1800; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ax-mobile-drawer.open { opacity: 1; pointer-events: auto; }
.ax-mobile-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.ax-mobile-drawer-panel { position: absolute; top: 0; right: 0; width: min(320px,86vw); height: 100%; background: #0d1424; border-left: 1px solid var(--ax-border); transform: translateX(100%); transition: transform .22s ease; padding: 18px; box-shadow: -24px 0 60px rgba(0,0,0,.42); }
.ax-mobile-drawer.open .ax-mobile-drawer-panel { transform: translateX(0); }
.ax-mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ax-border); margin-bottom: 14px; }
.ax-mobile-drawer-close { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ax-border); background: rgba(255,255,255,.05); color: var(--ax-text); display: flex; align-items: center; justify-content: center; }
.ax-mobile-menu { display: flex; flex-direction: column; gap: 6px; }
.ax-mobile-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; color: #b8c0d6; font-size: 14px; font-weight: 700; }
.ax-mobile-menu a.active, .ax-mobile-menu a:hover { background: rgba(255,42,42,.12); color: var(--ax-accent); }
.ax-mobile-menu i { width: 20px; text-align: center; font-size: 18px; }
.ax-mobile-bottom-nav {
    display: none; position: fixed; left: 10px; right: 10px;
    bottom: max(10px,env(safe-area-inset-bottom)); z-index: 2100;
    height: 64px; background: rgba(6,8,14,.96);
    border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
    box-shadow: 0 20px 52px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    padding: 6px;
}
.ax-mobile-bottom-nav a, .ax-mobile-bottom-nav button {
    appearance: none; border: 0; background: transparent; color: rgba(255,255,255,.42);
    flex: 1 1 0; min-width: 0; height: 52px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-family: var(--ax-font); font-size: 9.5px; font-weight: 700;
    text-decoration: none; cursor: pointer; padding: 0 2px;
    transition: color .18s, background .18s; position: relative;
}
.ax-mobile-bottom-nav a:hover, .ax-mobile-bottom-nav button:hover { color: rgba(255,255,255,.75); }
.ax-mobile-bottom-nav i { font-size: 21px; line-height: 1; transition: transform .2s; }
.ax-mobile-bottom-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-mobile-bottom-nav .active { color: #fff; background: linear-gradient(135deg,#FF2A2A,#E11D48); box-shadow: 0 6px 20px rgba(255,42,42,.42), inset 0 1px 0 rgba(255,255,255,.16); }
.ax-mobile-bottom-nav .active i { transform: scale(1.1); }
.ax-mobile-bottom-nav .active span { font-weight: 800; }

/* ── 05. Section Rhythm ──────────────────────────────────────────────────── */
.ax-section { padding: 48px 0 16px; }
.ax-section-header, .ax-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 0 20px; }
.ax-section-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.ax-title-accent { display: inline-block; width: 4px; height: 18px; border-radius: 3px; background: var(--ax-gradient); }
.ax-see-all, .ax-section-more { font-size: 13px; font-weight: 600; color: var(--ax-accent); display: flex; align-items: center; gap: 4px; text-decoration: none; }
.ax-see-all:hover, .ax-section-more:hover { text-decoration: underline; }

/* ── 06. Content Cards ───────────────────────────────────────────────────── */
.ax-card-wrap { padding: 0 16px; }
.ax-content-card { display: block; min-width: 0; width: 100%; text-decoration: none; color: inherit; position: relative; }
.ax-card-thumb { position: relative; aspect-ratio: 2/3; border-radius: var(--ax-radius); overflow: hidden; background: var(--ax-card); border: 1px solid var(--ax-border); transition: transform .3s var(--ax-ease), box-shadow .3s var(--ax-ease), border-color .3s var(--ax-ease); }
.ax-card-mainlink { position: absolute; inset: 0; z-index: 1; display: block; }
.ax-content-card:hover .ax-card-thumb { transform: translateY(-6px) scale(1.03); box-shadow: var(--ax-shadow-lg), var(--ax-glow); border-color: rgba(255,42,42,.4); }
.ax-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(255,255,255,.18); background: linear-gradient(135deg,var(--ax-card),var(--ax-card-2)); }
.ax-card-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ax-ease); }
.ax-content-card:hover .ax-card-poster { transform: scale(1.07); }
.ax-card-grad { position: absolute; inset: 0; background: linear-gradient(to top,rgba(3,7,18,.55),transparent 45%); opacity: 0; transition: opacity .3s; }
.ax-content-card:hover .ax-card-grad { opacity: 1; }
.ax-card-tag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .03em; backdrop-filter: blur(6px); z-index: 2; display: inline-flex; align-items: center; gap: 3px; }
.ax-card-tag-pro { background: linear-gradient(135deg,#FF2A2A,#E11D48); color: #fff; }
.ax-card-tag-q { background: rgba(3,7,18,.7); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.ax-card-play { display: none; }
.ax-card-hoveractions { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(8px); transition: all .3s var(--ax-ease); z-index: 4; }
.ax-content-card:hover .ax-card-hoveractions { opacity: 1; transform: translateY(0); }
.ax-qa { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10,14,22,.5); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 16px; cursor: pointer; text-decoration: none; backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .2s var(--ax-ease), background .2s, border-color .2s, box-shadow .2s; }
.ax-qa:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }
.ax-qa-play { width: 42px; height: 42px; font-size: 19px; background: var(--ax-gradient); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(255,42,42,.5); }
.ax-qa-play:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 4px rgba(255,42,42,.22), 0 10px 26px rgba(255,42,42,.55); }
.ax-qa-play .bi { margin-left: 1px; }
.ax-qa-list.is-added { background: var(--ax-gradient); border-color: transparent; color: #fff; }
.ax-qa-list.is-added .bi::before { content: "\F26E"; }
.ax-card-cap { padding: 9px 2px 2px; min-width: 0; }
.ax-card-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--ax-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: 3px; text-decoration: none; }
.ax-card-title:hover { color: var(--ax-accent); }
.ax-card-meta { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ax-muted); }
.ax-card-star, .ax-card-rating { color: var(--ax-gold); font-weight: 700; display: flex; align-items: center; gap: 2px; }
.ax-content-card.landscape .ax-card-thumb { aspect-ratio: 16/9; }
.ax-card-link { display: block; }
.ax-card-poster-ph { aspect-ratio: 2/3; background: linear-gradient(135deg,var(--ax-bg3),var(--ax-navy)); display: flex; align-items: center; justify-content: center; font-size: 40px; }

/* ── 06b. Content Swiper height fix (Swiper 11 defaults height:100% which resolves
         to ~viewport height when the container has no explicit height, pushing nav
         buttons far below the card row and creating large empty gaps) ─────── */
.content-swiper .swiper-wrapper { height: auto; }
.content-swiper .swiper-slide  { height: auto; }

/* ── 07. Live TV Cards ───────────────────────────────────────────────────── */
.ax-live-card { position: relative; background: var(--ax-bg3); border: 1px solid var(--ax-border); border-radius: var(--ax-radius); padding: 0; display: block; overflow: hidden; transition: all .2s; }
.ax-live-card:hover { background: var(--ax-bg2); border-color: rgba(255,42,42,.28); transform: translateY(-4px); box-shadow: var(--ax-shadow-lg); }
.ax-live-thumb { position: relative; aspect-ratio: 16/9; width: 100%; background: linear-gradient(145deg,#121A2A,#090E19); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ax-live-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-live-overlay { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(239,68,68,.92); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 5px; letter-spacing: .05em; }
.ax-live-info { padding: 11px 12px 13px; }
.ax-live-name { font-size: 13.5px; font-weight: 800; color: var(--ax-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.ax-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 6px; box-shadow: 0 0 0 4px rgba(34,197,94,.12); animation: pulse 2s infinite; }
.ax-live-logo { width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: rgba(255,255,255,.05); padding: 6px; flex-shrink: 0; }
.ax-live-logo-placeholder { width: 48px; height: 48px; border-radius: 8px; background: rgba(255,42,42,.1); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ax-live-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.ax-live-category { font-size: 11px; color: var(--ax-muted); }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }

/* ── 08. Footer ─────────────────────────────────────────────────────────── */
.ax-footer { position: relative; background: linear-gradient(180deg,var(--ax-bg) 0%,var(--ax-bg-2) 100%); border-top: 1px solid var(--ax-border); padding: 64px 0 28px; margin-top: 80px; overflow: hidden; }
.ax-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,42,42,.5),transparent); }
.ax-footer-top { display: grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: 40px; }
.ax-footer-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--ax-text); margin-bottom: 14px; }
.ax-footer-brand i { background: var(--ax-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ax-footer-desc { font-size: 13.5px; color: var(--ax-muted); max-width: 300px; line-height: 1.8; margin-bottom: 22px; }
.ax-footer-social { display: flex; gap: 10px; margin-bottom: 24px; }
.ax-footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--ax-card); border: 1px solid var(--ax-border); color: var(--ax-text-2); font-size: 16px; transition: all .25s var(--ax-ease); }
.ax-footer-social a:hover { background: var(--ax-gradient); color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: var(--ax-glow); }
.ax-footer-apps { display: flex; flex-wrap: wrap; gap: 10px; }
.ax-footer-app { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; background: var(--ax-card); border: 1px solid var(--ax-border); color: var(--ax-text); transition: all .25s var(--ax-ease); }
.ax-footer-app:hover { border-color: rgba(255,42,42,.4); color: var(--ax-text); transform: translateY(-2px); }
.ax-footer-app i { font-size: 22px; }
.ax-footer-app small { display: block; font-size: 9px; color: var(--ax-muted); line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.ax-footer-app strong { font-size: 13px; font-weight: 700; line-height: 1.2; }
.ax-footer-heading { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ax-text); margin-bottom: 16px; }
.ax-footer-links { list-style: none; padding: 0; margin: 0; }
.ax-footer-links li { margin-bottom: 11px; }
.ax-footer-links a { font-size: 13.5px; color: var(--ax-muted); transition: color .2s, padding-left .2s; }
.ax-footer-links a:hover { color: var(--ax-accent); padding-left: 4px; }
.ax-footer-bottom { border-top: 1px solid var(--ax-border); padding-top: 22px; margin-top: 44px; font-size: 12.5px; color: var(--ax-muted); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ax-footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
.ax-footer-bottom-links a { color: var(--ax-muted); transition: color .2s; }
.ax-footer-bottom-links a:hover { color: var(--ax-text-2); }

/* ── 09. Search Overlay ──────────────────────────────────────────────────── */
.ax-search-overlay { position: fixed; inset: 0; background: rgba(10,13,26,.96); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ax-search-overlay.open { opacity: 1; pointer-events: all; }
.ax-search-box { width: 100%; max-width: 640px; padding: 0 20px; }
.ax-search-input { width: 100%; background: var(--ax-bg3); border: 2px solid var(--ax-accent); border-radius: 14px; padding: 16px 20px 16px 52px; font-size: 18px; font-family: var(--ax-font); color: var(--ax-text); outline: none; }
.ax-search-icon { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); color: var(--ax-accent); font-size: 22px; pointer-events: none; }
.ax-search-results { background: var(--ax-bg3); border: 1px solid var(--ax-border); border-radius: 12px; margin-top: 12px; overflow: hidden; max-height: 70vh; overflow-y: auto; }
.ax-sr-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ax-muted); padding: 12px 16px 6px; }
.ax-sr-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--ax-text); text-decoration: none; transition: background .15s; }
.ax-sr-row:hover { background: var(--ax-bg2); }
.ax-sr-thumb { width: 40px; height: 56px; border-radius: 5px; object-fit: cover; flex-shrink: 0; background: var(--ax-bg2); }
.ax-sr-txt { flex: 1; min-width: 0; }
.ax-sr-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-sr-sub { font-size: 11.5px; color: var(--ax-muted); margin-top: 2px; }
.ax-sr-go { font-size: 20px; color: var(--ax-muted); opacity: 0; transition: opacity .15s; }
.ax-sr-row:hover .ax-sr-go { opacity: 1; color: var(--ax-accent); }
.ax-sr-all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; font-size: 13px; font-weight: 600; color: var(--ax-accent); border-top: 1px solid var(--ax-border); text-decoration: none; }
.ax-sr-all:hover { background: var(--ax-bg2); }
.ax-sr-empty { padding: 28px 16px; text-align: center; color: var(--ax-muted); font-size: 14px; }
.ax-sr-loading { display: flex; gap: 6px; justify-content: center; padding: 24px; }
.ax-sr-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-accent); animation: axsrb 1s infinite ease-in-out both; }
.ax-sr-loading span:nth-child(2){ animation-delay: .15s }
.ax-sr-loading span:nth-child(3){ animation-delay: .3s }
@keyframes axsrb { 0%,80%,100%{ transform:scale(.4);opacity:.4 } 40%{ transform:scale(1);opacity:1 } }

/* ── 10. Skeleton Loader ─────────────────────────────────────────────────── */
.ax-skeleton, .ax-skel { position: relative; overflow: hidden; background: linear-gradient(90deg,var(--ax-bg3) 25%,var(--ax-bg2) 50%,var(--ax-bg3) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--ax-radius); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.ax-skeleton-card { aspect-ratio: 2/3; border-radius: var(--ax-radius); }
.ax-skeleton-row { display: flex; gap: 14px; padding: 0 var(--ax-gutter,24px); }
.ax-skeleton-row > * { flex: 0 0 auto; width: 16%; min-width: 130px; }

/* ── 11. Player Components ───────────────────────────────────────────────── */
.ax-resume-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: rgba(20,20,20,.92); color: #fff; padding: 11px 20px; border-radius: 30px; font-size: 14px; font-weight: 500; z-index: 5000; opacity: 0; transition: all .35s cubic-bezier(.2,.7,.3,1); border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.ax-resume-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ax-player-stage { position: relative; background: #000; max-width: 1400px; margin: 0 auto; }
.ax-upnext { position: absolute; right: 24px; bottom: 90px; z-index: 20; background: rgba(20,20,20,.95); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 16px 18px; max-width: 320px; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.ax-upnext-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ax-muted); margin-bottom: 4px; }
.ax-upnext-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.ax-upnext-actions { display: flex; gap: 8px; }
.ax-upnext-actions .btn-ax { padding: 8px 14px; font-size: 13px; }
.ax-watch-content { padding: 28px 0 60px; }
.ax-breadcrumb { font-size: 13px; color: var(--ax-muted); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ax-breadcrumb a { color: var(--ax-muted); text-decoration: none; }
.ax-breadcrumb a:hover { color: var(--ax-accent); }
.ax-watch-title { font-size: clamp(22px,3vw,32px); font-weight: 800; margin: 0 0 10px; }
.ax-watch-info { display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--ax-muted); margin-bottom: 14px; }
.ax-chip { background: rgba(255,255,255,.08); padding: 3px 10px; border-radius: 20px; font-weight: 600; color: var(--ax-text); }
.ax-watch-desc { font-size: 14.5px; line-height: 1.7; color: #c4c9d6; max-width: 760px; }
.ax-eplist { background: var(--ax-bg2); border: 1px solid var(--ax-border); border-radius: 12px; overflow: hidden; }
.ax-eplist-head { padding: 14px 16px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--ax-border); }
.ax-eplist-body { max-height: 520px; overflow-y: auto; }
.ax-epitem { display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-decoration: none; color: var(--ax-text); border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.ax-epitem:hover { background: var(--ax-bg3); }
.ax-epitem.active { background: rgba(255,42,42,.08); }
.ax-epitem-num { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.06); font-size: 12px; font-weight: 700; color: var(--ax-muted); }
.ax-epitem.active .ax-epitem-num { background: var(--ax-accent); color: #fff; }
.ax-epitem-info { flex: 1; min-width: 0; }
.ax-epitem-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-epitem-meta { font-size: 11.5px; color: var(--ax-muted); margin-top: 2px; }
.ax-epitem-playing { color: var(--ax-accent); font-size: 18px; }

/* ── 12. Utilities + Scrollbar + RTL ─────────────────────────────────────── */
.text-teal    { color: var(--ax-accent) !important; }
.text-gold    { color: var(--ax-gold) !important; }
.text-muted-ax{ color: var(--ax-muted) !important; }
.bg-card      { background: var(--ax-bg3) !important; }
.border-ax    { border-color: var(--ax-border) !important; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ax-border); border-radius: 3px; }
[dir="rtl"] { text-align: right; }
[dir="rtl"] .ax-navbar-inner { flex-direction: row-reverse; }
[dir="rtl"] .ax-nav-links { flex-direction: row-reverse; }
[dir="rtl"] .ax-section-title { flex-direction: row-reverse; }
[dir="rtl"] .ax-footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .bi { transform: scaleX(-1); }
[dir="rtl"] .bi-chevron-right, [dir="rtl"] .bi-chevron-left { transform: scaleX(-1); }

/* ── 13. UNIFIED: Page Hero ─────────────────────────────────────────────── */
/* Used by Movies, Series, Search, Discover, Browse, Live TV listing pages */
.ax-page-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg,#050812,#0B111D 48%,#030712);
    padding: clamp(80px,10vw,112px) 0 clamp(36px,5vw,52px);
    border-bottom: 1px solid rgba(255,255,255,.07);
    text-align: center;
}
.ax-page-hero-glow {
    position: absolute; inset: 0;
    background: radial-gradient(700px 300px at 50% 0%, rgba(255,42,42,.14), transparent 60%);
    pointer-events: none;
}
.ax-page-hero-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 28px 28px; pointer-events: none;
}
.ax-page-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 clamp(16px,4vw,32px); }
.ax-page-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,42,42,.12); border: 1px solid rgba(255,42,42,.28);
    color: #FF2A2A; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; padding: 6px 16px; border-radius: 20px; margin-bottom: 16px;
}
.ax-page-hero-title {
    font-size: clamp(2rem,5vw,3.6rem); font-weight: 900; letter-spacing: -.03em;
    margin: 0 0 10px; line-height: 1.05;
}
.ax-page-hero-title .ax-hl { color: #FF2A2A; }
.ax-page-hero-sub { font-size: 15px; color: var(--ax-text-2); margin: 0; }
.ax-page-hero-nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.ax-page-hero-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.09); text-decoration: none; transition: .2s; }
.ax-page-hero-link:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.ax-page-hero-link.active { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
/* Breadcrumb inside hero */
.ax-breadcrumb-lite { font-size: 12.5px; color: var(--ax-muted); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ax-breadcrumb-lite a { color: var(--ax-muted); }
.ax-breadcrumb-lite a:hover { color: var(--ax-text-2); }
.ax-breadcrumb-lite i { font-size: 10px; }
/* Legacy browse hero aliases */
.ax-page-header { padding: clamp(64px,8vw,96px) 0 clamp(28px,4vw,44px); }
.ax-page-title { font-size: clamp(22px,4vw,3rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 8px; }
.ax-page-sub { font-size: 14px; color: var(--ax-muted); margin: 0; }

/* ── 14. UNIFIED: Type Tabs ──────────────────────────────────────────────── */
.ax-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ax-type-tab {
    padding: 9px 20px; border-radius: 10px;
    font-size: 13px; font-weight: 700; font-family: var(--ax-font);
    color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.09);
    background: none; cursor: pointer; text-decoration: none; transition: .2s;
}
.ax-type-tab:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.ax-type-tab.active { background: rgba(255,42,42,.12); color: #FF2A2A; border-color: rgba(255,42,42,.35); }
/* Filter selects */
.ax-select { background: rgba(21,29,46,.8); border: 1px solid var(--ax-border); color: var(--ax-text-2); border-radius: 9px; padding: 9px 14px; font-size: 13px; font-family: var(--ax-font); cursor: pointer; min-width: 130px; backdrop-filter: blur(12px); }
.ax-select:focus { outline: none; border-color: rgba(255,42,42,.5); }
.ax-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── 15. UNIFIED: Content Grid ───────────────────────────────────────────── */
.ax-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(130px,14vw,180px), 1fr));
    gap: clamp(12px,1.5vw,20px) clamp(10px,1.2vw,16px);
    align-items: start;
}
.ax-content-grid-live { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.ax-listing-wrap { max-width: 1400px; margin: 0 auto; padding: clamp(16px,3vw,40px) clamp(12px,3vw,40px) clamp(48px,6vw,96px); }
/* Section header inside listing */
.ax-listing-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ax-listing-head h2 { font-size: 19px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.ax-listing-head h2 i { color: var(--ax-accent); }
.ax-listing-cnt { background: rgba(255,255,255,.07); border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--ax-text-2); font-weight: 700; }
.ax-listing-empty { text-align: center; padding: clamp(60px,10vw,120px) 24px; color: var(--ax-muted); }
.ax-listing-empty i { font-size: 64px; display: block; margin-bottom: 16px; opacity: .2; }
.ax-listing-empty p { font-size: 15px; }

/* ── 16. UNIFIED: Filter Panel (movies/series browse sidebar) ────────────── */
.ax-filter-sidebar { background: rgba(11,18,32,.6); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); padding: 20px; backdrop-filter: blur(16px); }
.ax-filter-group { margin-bottom: 20px; }
.ax-filter-group:last-child { margin-bottom: 0; }
.ax-filter-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ax-muted); margin-bottom: 10px; }
.ax-filter-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ax-text-2); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: .2s; }
.ax-filter-item:hover { background: rgba(255,255,255,.05); color: var(--ax-text); }
.ax-filter-item.active { background: rgba(255,42,42,.12); color: #FF2A2A; border-color: rgba(255,42,42,.28); }
.ax-filter-chip { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #cbd5e0; background: rgba(21,29,46,.7); border: 1px solid rgba(255,255,255,.08); transition: all .2s; }
.ax-filter-chip:hover, .ax-filter-chip.active { color: #fff; border-color: #FF2A2A; background: rgba(255,42,42,.14); }

/* ── 17. Live TV Hub ─────────────────────────────────────────────────────── */
.hub { max-width: 1560px; margin: 0 auto; padding: 24px clamp(12px,3vw,38px) 72px; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.hub-title { display: flex; align-items: center; gap: 12px; font-size: clamp(22px,3vw,30px); font-weight: 900; margin: 0; }
.hub-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: .1em; color: #fff; background: #FF2A2A; padding: 4px 9px; border-radius: 6px; }
.hub-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: hubpulse 1.4s infinite; }
@keyframes hubpulse { 0%,100%{opacity:1}50%{opacity:.35} }
.hub-search { position: relative; flex: 1; max-width: 340px; min-width: 200px; }
.hub-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ax-muted); }
.hub-search input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #fff; padding: 0 16px 0 38px; font-size: 14px; outline: none; }
.hub-search input:focus { border-color: #FF2A2A; }
.hub-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,280px); gap: 18px; margin-bottom: 18px; align-items: start; }
.hub-featured { position: relative; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 58px rgba(0,0,0,.42); }
.hub-featured .ax-vjs-shell { border-radius: 14px 14px 0 0; }
.hub-featured-fallback { aspect-ratio: 16/9; background: #0c1424 center/cover no-repeat; }
.hub-badge { position: absolute; top: 14px; left: 14px; z-index: 20; display: inline-flex; align-items: center; gap: 5px; background: #FF2A2A; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .05em; padding: 4px 10px; border-radius: 7px; box-shadow: 0 6px 16px rgba(255,42,42,.4); }
.hub-now { position: relative; z-index: 1; padding: 12px 16px 13px; background: linear-gradient(180deg,#101827,#070b12); border-top: 1px solid rgba(255,255,255,.08); }
.hub-now-label { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FF6b6b; margin-bottom: 6px; }
.hub-now-row { display: flex; align-items: center; gap: 12px; }
.hub-now-logo { width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: #111827; padding: 4px; flex-shrink: 0; }
.hub-now-main { flex: 1; min-width: 0; }
.hub-now-title { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-now-time { font-size: 12px; color: #c7cad3; margin-top: 2px; }
.hub-now-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; margin-top: 8px; max-width: 360px; }
.hub-now-bar > i { display: block; height: 100%; background: linear-gradient(90deg,#FF2A2A,#E11D48); }
.hub-side { display: flex; flex-direction: column; gap: 14px; align-self: stretch; }
.hub-cats { background: linear-gradient(180deg,#111a2d,#0c1424); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; }
.hub-cats-head { font-size: 13px; font-weight: 800; color: #f5f7fb; padding: 4px 8px 10px; }
.hub-cat { padding: 11px 14px; border-radius: 10px; color: #cdd2dc; text-decoration: none; font-size: 13.5px; font-weight: 600; transition: all .15s; border: 1px solid transparent; }
.hub-cat:hover { background: rgba(255,255,255,.06); color: #fff; }
.hub-cat.is-active { background: linear-gradient(135deg,#FF2A2A,#E11D48); color: #fff; box-shadow: 0 8px 20px rgba(255,42,42,.3); }
.hub-side-now { flex: 1; min-height: 170px; background: linear-gradient(180deg,rgba(17,26,45,.86),rgba(12,20,36,.72)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.hub-side-head { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #8ea0c0; margin-bottom: 2px; }
.hub-side-channel { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.hub-side-channel:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.hub-side-channel.is-active { background: rgba(255,42,42,.12); border-color: rgba(255,42,42,.28); }
.hub-side-logo { width: 42px; height: 32px; border-radius: 8px; background: #0a1020; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hub-side-logo img { width: 90%; height: 90%; object-fit: contain; }
.hub-side-logo i { color: var(--ax-accent); }
.hub-side-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-side-meta strong { font-size: 12.5px; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-side-meta small { font-size: 10.5px; color: #8ea0c0; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-lower { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; margin-bottom: 18px; }
.hub-panel { background: linear-gradient(180deg,#111a2d,#0c1424); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 18px; }
.hub > .hub-panel { margin-bottom: 18px; }
.hub > .hub-panel[hidden] { display: none !important; }
.hub-panel-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: #f5f7fb; margin-bottom: 14px; flex-wrap: wrap; }
.hub-panel-sub { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8ea0c0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.hub-empty { display: flex; align-items: center; gap: 12px; color: var(--ax-muted); font-size: 13.5px; padding: 26px 6px; }
.hub-empty i { font-size: 28px; opacity: .5; }
.hub-ch-list { display: flex; flex-direction: column; gap: 6px; }
.hub-ch { display: grid; grid-template-columns: 54px minmax(0,1fr) 34px; align-items: center; gap: 12px; padding: 9px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: all .15s; }
.hub-ch[hidden] { display: none !important; }
.hub-ch:hover { background: rgba(255,255,255,.05); }
.hub-ch.is-active { background: rgba(255,42,42,.12); border-color: rgba(255,42,42,.3); }
.hub-ch-logo { width: 54px; height: 38px; border-radius: 8px; background: #111827; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hub-ch-logo img { width: 90%; height: 90%; object-fit: contain; }
.hub-ch-logo i { color: var(--ax-accent); }
.hub-ch-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-ch-sub { font-size: 11.5px; color: var(--ax-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-ch-play { color: var(--ax-muted); font-size: 20px; text-align: center; }
.hub-ch:hover .hub-ch-play { color: #FF2A2A; }
.hub-local-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.hub-local-pager[hidden] { display: none !important; }
.hub-page-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #dfe3ea; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.hub-page-btn:hover:not(:disabled) { background: #FF2A2A; border-color: #FF2A2A; color: #fff; }
.hub-page-btn:disabled { opacity: .38; cursor: not-allowed; }
.hub-page-status { min-width: 86px; text-align: center; color: #8ea0c0; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.hub-guide { display: flex; flex-direction: column; max-height: 440px; overflow-y: auto; }
.hub-guide-row { display: flex; align-items: center; gap: 14px; padding: 11px 6px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
.hub-guide-row:last-child { border-bottom: 0; }
.hub-guide-row.is-now { background: rgba(255,42,42,.08); border-radius: 8px; }
.hub-guide-time { color: var(--ax-accent); font-weight: 700; min-width: 64px; font-variant-numeric: tabular-nums; }
.hub-guide-title { flex: 1; min-width: 0; color: #dfe3ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-guide-row.is-now .hub-guide-title { color: #fff; font-weight: 700; }
.hub-guide-live { font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #fff; background: #FF2A2A; padding: 3px 7px; border-radius: 5px; }
.hub-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; min-height: 98px; }
.hub-rail::-webkit-scrollbar { display: none; }
.hub-tile { flex: 0 0 120px; text-decoration: none; color: inherit; }
.hub-tile-thumb { width: 120px; height: 72px; border-radius: 10px; background: #111827; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.1); transition: all .15s; }
.hub-tile:hover .hub-tile-thumb { border-color: #FF2A2A; transform: translateY(-3px); }
.hub-tile-thumb img { width: 88%; height: 88%; object-fit: contain; }
.hub-tile-thumb i { color: var(--ax-accent); font-size: 22px; }
.hub-tile-name { font-size: 11.5px; font-weight: 600; margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-fav { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 17px; cursor: pointer; backdrop-filter: blur(8px); transition: all .18s; }
.hub-fav:hover { background: rgba(255,42,42,.18); border-color: rgba(255,42,42,.5); }
.hub-fav.is-fav { background: rgba(255,42,42,.18); border-color: #FF2A2A; color: #fff; }
.hub-fav.is-fav .bi::before { content: "\F417"; }
.hub-reconnect { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(3,7,18,.74); backdrop-filter: blur(3px); }
.hub-reconnect[hidden] { display: none; }
.hub-reconnect-box { text-align: center; color: #fff; font-size: 14px; font-weight: 700; }
.hub-reconnect-spinner { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #FF2A2A; animation: hubspin .8s linear infinite; }
.hub-reconnect.is-offline .hub-reconnect-spinner { display: none; }
@keyframes hubspin { to{transform:rotate(360deg)} }
.hub-reconnect [data-reconnect-retry] { margin-top: 12px; background: linear-gradient(135deg,#FF2A2A,#E11D48); border: 0; color: #fff; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 800; cursor: pointer; }
.hub-reconnect [data-reconnect-retry][hidden] { display: none; }
.ltv-rail-card { flex: 0 0 120px; text-decoration: none; color: inherit; }
.ltv-rail-thumb { width: 120px; height: 72px; border-radius: 10px; background: #111827; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.1); transition: all .15s; }
.ltv-rail-card:hover .ltv-rail-thumb { border-color: #FF2A2A; transform: translateY(-3px); }
.ltv-rail-thumb img { width: 88%; height: 88%; object-fit: contain; }
.ltv-rail-name { font-size: 11.5px; font-weight: 600; margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltv-rail-cat { font-size: 10px; color: var(--ax-muted); text-align: center; }

/* ── 18. Search Page ─────────────────────────────────────────────────────── */
.srch-hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#050812,#0B111D 48%,#030712); padding: clamp(80px,10vw,104px) 0 clamp(36px,5vw,52px); border-bottom: 1px solid rgba(255,255,255,.08); text-align: center; }
.srch-hero-glow { position: absolute; inset: 0; background: radial-gradient(700px 300px at 50% 0%, rgba(255,42,42,.14), transparent 60%); pointer-events: none; }
.srch-hero-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size: 28px 28px; pointer-events: none; }
.srch-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 clamp(16px,4vw,24px); }
.srch-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,42,42,.12); border: 1px solid rgba(255,42,42,.28); color: #FF2A2A; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; padding: 6px 16px; border-radius: 20px; margin-bottom: 18px; }
.srch-hero-title { font-size: clamp(2rem,5vw,3.8rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 12px; line-height: 1.05; }
.srch-hero-q { color: #FF2A2A; }
.srch-hero-sub { font-size: 16px; color: var(--ax-text-2); margin: 0; }
.srch-wrap { background: #030712; padding: 0 0 80px; min-height: 60vh; }
.srch-field { display: flex; align-items: center; gap: 12px; background: rgba(21,29,46,.8); border: 1.5px solid var(--ax-border); border-radius: 18px; padding: 16px 20px; backdrop-filter: blur(18px); box-shadow: 0 4px 24px rgba(0,0,0,.3); max-width: 860px; margin: 0 auto; position: relative; top: -28px; }
.srch-field:focus-within { border-color: rgba(255,42,42,.5); box-shadow: 0 0 0 3px rgba(255,42,42,.1),0 4px 24px rgba(0,0,0,.3); }
.srch-field-ico { color: var(--ax-muted); font-size: 20px; flex-shrink: 0; }
.srch-input { flex: 1; background: none; border: none; outline: none; color: var(--ax-text); font-size: 18px; font-family: var(--ax-font); min-width: 0; }
.srch-input::placeholder { color: rgba(170,179,197,.5); }
.srch-clear { background: none; border: none; color: var(--ax-muted); font-size: 16px; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
.srch-clear:hover { color: var(--ax-text); background: rgba(255,255,255,.08); }
.srch-filters { max-width: 860px; margin: 0 auto 32px; padding: 0 4px; }
.srch-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.srch-type-tab { background: rgba(255,255,255,.05); border: 1px solid var(--ax-border); color: var(--ax-muted); border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--ax-font); transition: .2s; }
.srch-type-tab:hover { border-color: rgba(255,42,42,.4); color: var(--ax-text); }
.srch-type-tab.active { background: rgba(255,42,42,.12); border-color: rgba(255,42,42,.5); color: #FF2A2A; }
.srch-dropdowns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.srch-select { background: rgba(21,29,46,.8); border: 1px solid var(--ax-border); color: var(--ax-text-2); border-radius: 9px; padding: 9px 14px; font-size: 13px; font-family: var(--ax-font); cursor: pointer; min-width: 130px; backdrop-filter: blur(12px); }
.srch-select:focus { outline: none; border-color: rgba(255,42,42,.5); }
.srch-reset { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ax-muted); padding: 9px 14px; border-radius: 9px; border: 1px solid var(--ax-border); background: none; text-decoration: none; transition: .2s; }
.srch-reset:hover { color: #FF2A2A; border-color: rgba(255,42,42,.4); }
.srch-spinner { display: none; justify-content: center; gap: 6px; padding: 20px 0; }
.srch-spinner.show { display: flex; }
.srch-spinner span { width: 8px; height: 8px; border-radius: 50%; background: #FF2A2A; animation: srchBounce 1.2s ease-in-out infinite; }
.srch-spinner span:nth-child(2){ animation-delay: .2s }
.srch-spinner span:nth-child(3){ animation-delay: .4s }
@keyframes srchBounce { 0%,80%,100%{transform:scale(0);opacity:.4}40%{transform:scale(1);opacity:1} }
.srch-section { max-width: 1200px; margin: 0 auto 48px; padding: 0 clamp(12px,3vw,24px); }
.srch-sec-h { font-size: 19px; font-weight: 800; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.srch-sec-h i { font-size: 20px; color: #FF2A2A; }
.srch-cnt { background: rgba(255,255,255,.07); border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--ax-text-2); font-weight: 700; }
.srch-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(clamp(130px,14vw,168px),1fr)); gap: clamp(12px,1.5vw,20px) clamp(10px,1.2vw,16px); align-items: start; }
.srch-grid-live { grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); }
.srch-placeholder { text-align: center; padding: 80px clamp(16px,4vw,24px); color: var(--ax-muted); }
.srch-placeholder-ico { font-size: 64px; display: block; margin-bottom: 16px; opacity: .2; }
.srch-placeholder p { font-size: 15px; }
.srch-wrap .ds-empty { max-width: 480px; margin: 60px auto; padding: 0 24px; }

/* ── 19. Discover Pages ──────────────────────────────────────────────────── */
.disc-hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#050812,#0B111D 48%,#030712); padding: clamp(80px,10vw,96px) 0 clamp(32px,5vw,44px); border-bottom: 1px solid rgba(255,255,255,.07); text-align: center; }
.disc-hero-glow { position: absolute; inset: 0; background: radial-gradient(700px 280px at 50% 0%,var(--disc-glow,rgba(255,42,42,.14)),transparent 60%); pointer-events: none; }
.disc-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 clamp(16px,4vw,24px); }
.disc-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--disc-accent,#FF2A2A); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; }
.disc-hero-title { font-size: clamp(2rem,5vw,3.4rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 10px; line-height: 1.05; }
.disc-hero-sub { font-size: 15px; color: rgba(255,255,255,.5); margin: 0 0 24px; }
.disc-hero-nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.disc-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.09); text-decoration: none; transition: .2s; }
.disc-nav-link:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.disc-nav-link.active { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.disc-wrap { max-width: 1400px; margin: 0 auto; padding: clamp(16px,3vw,32px) clamp(12px,3vw,32px) clamp(48px,6vw,64px); }
.disc-type-tabs { display: flex; gap: 8px; margin-bottom: 1.75rem; flex-wrap: wrap; }
.disc-type-tab { padding: 8px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.09); text-decoration: none; transition: .2s; }
.disc-type-tab:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.disc-type-tab.active { background: rgba(255,42,42,.12); color: #FF2A2A; border-color: rgba(255,42,42,.35); }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(clamp(128px,14vw,168px),1fr)); gap: clamp(12px,1.5vw,20px) clamp(10px,1.2vw,14px); }
.disc-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: transform .2s, box-shadow .2s; }
.disc-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.disc-card-thumb { position: relative; aspect-ratio: 2/3; background: #0d1525 center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.disc-card-ph { font-size: 2rem; color: rgba(255,255,255,.1); }
.disc-card-body { padding: .55rem .65rem .7rem; }
.disc-card-title { font-size: .84rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .2rem; }
.disc-card-meta { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: rgba(255,255,255,.4); }
.disc-rating { display: flex; align-items: center; gap: .2rem; color: #f5c518; font-weight: 700; }
.disc-rating i { font-size: .65rem; }
.disc-rank { position: absolute; top: 7px; left: 7px; background: rgba(0,0,0,.75); color: #fff; font-size: .7rem; font-weight: 900; padding: 2px 7px; border-radius: 6px; backdrop-filter: blur(6px); }
.disc-badge-prem { position: absolute; top: 7px; right: 7px; background: linear-gradient(135deg,#FF2A2A,#e11d48); color: #fff; font-size: .65rem; padding: 3px 7px; border-radius: 5px; }
.disc-type-badge { position: absolute; bottom: 7px; left: 7px; background: rgba(0,0,0,.65); color: rgba(255,255,255,.7); font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; backdrop-filter: blur(4px); }
.disc-empty { text-align: center; padding: 4rem 2rem; color: rgba(255,255,255,.3); }
.disc-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: .3; }

/* ── 20. Browse Pages ────────────────────────────────────────────────────── */
.browse-hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#050812,#0B111D 48%,#030712); padding: clamp(64px,9vw,96px) clamp(16px,3vw,32px) clamp(28px,4vw,40px); border-bottom: 1px solid rgba(255,255,255,.07); }
.browse-hero-glow { position: absolute; inset: 0; background: radial-gradient(600px 240px at 50% 0%,rgba(255,42,42,.12),transparent 60%); pointer-events: none; }
.browse-hero-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }
.browse-title { font-size: clamp(24px,4vw,3rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 8px; }
.browse-sub { font-size: 14px; color: var(--ax-muted); margin: 0 0 18px; }
.browse-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.browse-type-tab { padding: 8px 18px; border-radius: 9px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.09); background: none; cursor: pointer; text-decoration: none; transition: .2s; }
.browse-type-tab:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.browse-type-tab.active, .type-tab.active { background: rgba(255,42,42,.12); color: #FF2A2A; border-color: rgba(255,42,42,.35); }
.type-tab { padding: 8px 18px; border-radius: 9px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.09); background: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: .2s; }
.type-tab:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.browse-wrap { max-width: 1400px; margin: 0 auto; padding: clamp(20px,3vw,40px) clamp(12px,3vw,32px) clamp(60px,6vw,80px); }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(clamp(128px,14vw,168px),1fr)); gap: clamp(12px,1.5vw,20px) clamp(10px,1.2vw,14px); }
.content-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: transform .2s, box-shadow .2s; }
.content-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.card-poster { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: #111827; }
.card-poster img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.card-poster-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; background: #0d1120; }
.card-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; opacity: 0; transition: .2s; }
.content-card:hover .card-overlay { opacity: 1; }
.content-card:hover .card-poster img { transform: scale(1.04); }
.card-badge { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .5px; }
.card-badge-gold { background: #f5c518; color: #07102a; }
.card-badge-series { background: rgba(0,136,255,.85); color: #fff; }
.card-title { font-size: .84rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; line-height: 1.3; }
.card-body, .card-info { padding: .5rem .65rem .7rem; }
.card-meta { display: flex; gap: 8px; font-size: .72rem; color: rgba(255,255,255,.4); }
.genre-chip { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #cbd5e0; background: rgba(21,29,46,.7); border: 1px solid rgba(255,255,255,.08); transition: all .2s; }
.genre-chip:hover { color: #fff; border-color: #FF2A2A; background: rgba(255,42,42,.14); transform: translateY(-2px); }
.genre-chip-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 clamp(12px,3vw,24px); }

/* ── 20a. Browse page layout helpers & form components ──────────────────── */
.browse-page { max-width: 1400px; margin: 0 auto; padding: clamp(20px,3vw,32px) clamp(12px,3vw,24px) clamp(60px,6vw,76px); }
.browse-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; padding: 14px; border: 1px solid var(--ax-border); border-radius: 18px; background: rgba(21,29,46,.72); backdrop-filter: blur(18px); box-shadow: var(--ax-shadow-sm); }
.browse-filters .ax-input { background: rgba(8,13,25,.88); border: 1px solid var(--ax-border); color: var(--ax-text); border-radius: 12px; padding: 12px 15px; font-size: 13.5px; font-family: var(--ax-font); outline: none; flex: 1; min-width: 170px; transition: border-color .2s, box-shadow .2s; }
.browse-filters .ax-input:focus { border-color: rgba(255,42,42,.5); box-shadow: 0 0 0 3px rgba(255,42,42,.12); }
.ax-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: none; font-family: var(--ax-font); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ax-btn-primary { background: var(--ax-gradient); color: #fff; }
.ax-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ax-glow); }
.ax-btn-ghost { background: rgba(255,255,255,.06); color: #e8eaf0; border: 1px solid var(--ax-border); }
.ax-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.type-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.empty-state { text-align: center; padding: clamp(60px,8vw,80px) 20px; color: var(--ax-muted); }
.empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.pager-wrap { margin-top: clamp(28px,4vw,38px); display: flex; justify-content: center; }

/* ── 20b. Browse / Listing page components ───────────────────────────────── */
/* Shared by Movies, TV Series, Videos listing pages */
.ax-browse-hero-pro {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 360px at 72% 18%, rgba(255,42,42,.2), transparent 58%),
        linear-gradient(135deg, #060A13 0%, #0B111D 50%, #030712 100%);
    padding: clamp(80px,10vw,104px) 0 clamp(30px,4vw,44px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ax-browse-hero-pro::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(3,7,18,.96), rgba(3,7,18,.58), rgba(3,7,18,.96));
    opacity: .16; pointer-events: none;
}
.ax-browse-hero-pro .container, .ax-browse-hero-pro .ax-page-hero-inner { position: relative; z-index: 1; }
.ax-browse-wrap { background: #030712; padding: clamp(20px,3vw,34px) 0 clamp(60px,6vw,70px); min-height: 60vh; }
.browse-mode-rows { padding-top: 16px; }
.browse-genre-jump { padding-top: 42px; }

/* Desktop filter panel (sticky sidebar) */
.ax-filter-panel {
    position: sticky; top: calc(var(--ax-navbar-h,76px) + 18px);
    padding: 16px; border: 1px solid var(--ax-border); border-radius: 18px;
    background: rgba(21,29,46,.76); backdrop-filter: blur(18px);
    box-shadow: var(--ax-shadow-sm);
}
.ax-filter-group { margin-bottom: 24px; }
.ax-filter-group:last-child { margin-bottom: 0; }
.ax-filter-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ax-muted); margin-bottom: 10px; display: block; }
/* Listing grid (keeps .ax-grid for backward compat, mirrors .ax-content-grid) */
.ax-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px,14vw,170px),1fr)); gap: clamp(14px,1.8vw,24px) clamp(10px,1.2vw,18px); align-items: start; }
.ax-grid .ax-content-card { width: 100%; }
.ax-empty-state { text-align: center; padding: clamp(60px,8vw,80px) 0; color: var(--ax-muted); }
.ax-empty-state i { font-size: 48px; display: block; margin-bottom: 12px; opacity: .4; }
.ax-pagination { margin-top: 38px; display: flex; justify-content: center; }

/* Mobile filter bar (hidden desktop, shown on small screens) */
.ax-mobile-filters { display: none; }
.ax-mf-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.ax-mf-scroll::-webkit-scrollbar { display: none; }
.ax-mf-chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #c4c9d6; background: rgba(255,255,255,.06); text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: all .15s; }
.ax-mf-chip.active { background: rgba(255,42,42,.15); color: #FF2A2A; border-color: rgba(255,42,42,.4); }
.ax-mf-divider { flex: 0 0 auto; width: 1px; height: 20px; background: rgba(255,255,255,.14); }
.ax-mf-genre { margin-top: 8px; }
.ax-mf-genre summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13px; font-weight: 600; color: #e8eaf0; cursor: pointer; }
.ax-mf-genre summary::-webkit-details-marker { display: none; }
.ax-mf-caret { transition: transform .2s; font-size: 12px; color: #6b7280; }
.ax-mf-genre[open] .ax-mf-caret { transform: rotate(180deg); }
.ax-mf-genre-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; margin-top: 8px; max-height: 240px; overflow-y: auto; background: #0d1424; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 8px; }
.ax-mf-glink { padding: 8px 10px; border-radius: 7px; font-size: 12.5px; color: #9ca3af; text-decoration: none; transition: all .15s; }
.ax-mf-glink.active { background: rgba(255,42,42,.12); color: #FF2A2A; }

/* Kids mode banner (movies/series pages) */
.ax-kids-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg,#064e3b,#065f46); border-bottom: 1px solid #059669; padding: 10px clamp(16px,3vw,24px); font-size: 13.5px; font-weight: 700; color: #6ee7b7; }
.ax-kids-banner a { color: #a7f3d0; margin-left: auto; font-size: 12.5px; }

/* ── 21. Responsive — all breakpoints ───────────────────────────────────── */

/* Extra small phones: 360px and below */
@media (max-width: 360px) {
    .ax-mobile-bottom-nav { padding: 5px; height: 60px; }
    .ax-mobile-bottom-nav i { font-size: 18px; }
    .ax-mobile-bottom-nav a, .ax-mobile-bottom-nav button { font-size: 8.5px; border-radius: 12px; }
    .ax-content-grid, .srch-grid, .disc-grid, .content-grid, .ax-grid { grid-template-columns: repeat(2,1fr); gap: 10px 8px; }
    .ax-page-hero { padding: 70px 0 28px; }
}
/* Small phones 361–480px */
@media (min-width: 361px) and (max-width: 480px) {
    .ax-grid { grid-template-columns: repeat(3,1fr); gap: 12px 8px; }
}

/* Mobile: up to 767px */
@media (max-width: 767px) {
    .ax-nav-links, .ax-btn-signin { display: none; }
    .ax-navbar-right { display: flex; }
    .ax-search-inline, .ax-navbar-right .dropdown, .ax-navbar-right .ax-btn-start { display: none; }
    .ax-brand { font-size: 24px; }
    body { padding-bottom: 86px; }
    .ax-navbar { height: 76px; background: rgba(5,7,11,.96); border-bottom: 1px solid var(--ax-border); backdrop-filter: blur(12px); }
    .ax-navbar-inner { padding: 0 14px; gap: 10px; }
    .ax-mobile-bottom-nav { display: flex; align-items: center; justify-content: space-between; }
    .ax-footer { padding-bottom: 104px; }
    .ax-section-header, .ax-row-header { padding: 0 12px; }
    .ax-page-header { padding: 16px 0 12px !important; }
    .ax-page-title { font-size: 22px !important; }
    .ax-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
    .ax-footer-brand-col { grid-column: 1 / -1; }
    /* Browse listing mobile */
    .ax-browse-hero-pro { padding: 92px 0 22px; }
    .ax-browse-wrap { padding: 12px 0 80px; }
    .ax-desktop-filters { display: none !important; }
    .ax-mobile-filters { display: block; position: sticky; top: var(--ax-navbar-h,64px); z-index: 20; background: #030712; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .ax-grid { grid-template-columns: repeat(3,1fr); gap: 14px 10px; }
    /* Live TV hub mobile */
    .hub-hero { grid-template-columns: 1fr; }
    .hub-side { display: grid; grid-template-columns: 1fr 1fr; }
    .hub-cats { max-height: 200px; }
    .hub-lower { grid-template-columns: 1fr; }
    /* Search mobile */
    .srch-hero { padding: 88px 0 40px; }
    .srch-field { top: 0; margin: 16px; border-radius: 14px; }
    .srch-input { font-size: 16px; }
    .srch-filters { padding: 0 16px; }
    .srch-select, .ax-select { min-width: calc(50% - 5px); }
    /* Browse mobile */
    .browse-hero { padding: 18px 16px 14px; }
    .browse-title { font-size: 22px; }
    /* Movies page inline mobile */
    .ax-browse-hero-pro { padding: 16px 0 12px !important; }
}

/* Small tablet: 576px+ */
@media (min-width: 576px) {
    .ax-content-grid, .srch-grid, .disc-grid, .content-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
    .ax-footer-top { grid-template-columns: 1fr 1fr 1fr; }
}

/* Tablet: 768px–991px */
@media (min-width: 768px) {
    .ax-content-grid, .srch-grid, .disc-grid, .content-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); }
    .hub-hero { grid-template-columns: minmax(0,1fr) minmax(220px,260px); }
    .hub-side { display: flex; }
    .hub-lower { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .ax-footer-top { grid-template-columns: 1fr 1fr 1fr; }
    .srch-field { top: -28px; margin: 0 auto; }
}

/* Desktop: 992px+ */
@media (min-width: 992px) {
    .ax-content-grid, .srch-grid, .disc-grid, .content-grid { grid-template-columns: repeat(auto-fill,minmax(168px,1fr)); }
    .ax-hamburger { display: none; }
    .ax-search-inline { display: flex; }
    .ax-footer-top { grid-template-columns: 1.6fr repeat(4,1fr); }
    .ax-search-inline { width: min(360px,24vw); }
}

/* Tablet search bar narrow */
@media (max-width: 1199px) {
    .ax-search-inline { width: 260px; }
}
@media (max-width: 991px) {
    .ax-search-inline { width: 44px; padding: 0; justify-content: center; cursor: pointer; }
    .ax-search-inline span { display: none; }
    .ax-hamburger { display: block; }
}

/* Large desktop: 1200px+ */
@media (min-width: 1200px) {
    .ax-content-grid, .srch-grid, .disc-grid, .content-grid { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 22px 16px; }
    .hub-hero { grid-template-columns: minmax(0,1fr) minmax(240px,300px); }
}

/* Pagination for discover pages */
@media (max-width: 640px) {
    .disc-wrap, .browse-wrap { padding: clamp(16px,3vw,24px) clamp(10px,3vw,16px) clamp(40px,5vw,60px); }
    .srch-grid-live { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); }
}

/* ── 21. Auth pages ──────────────────────────────────────────────────────── */
/* Suppress site ads & footer on auth screens */
main > .ax-ad-zone--header,
main > .ax-ad-zone--footer { display: none !important; }
.ax-auth-screen ~ footer.ax-footer { display: none !important; }

.ax-auth-screen {
    min-height: calc(100vh - var(--ax-navbar-h));
    display: grid;
    grid-template-columns: 45fr 55fr;
    align-items: stretch;
}
.ax-auth-left {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: linear-gradient(145deg, #06101f 0%, #040910 100%);
}
.ax-auth-left::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 25% 45%, rgba(255,42,42,.2) 0%, transparent 52%),
        radial-gradient(ellipse at 78% 18%, rgba(255,42,42,.1) 0%, transparent 42%),
        radial-gradient(ellipse at 55% 88%, rgba(120,20,20,.18) 0%, transparent 38%);
}
.ax-auth-left::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 28px 28px;
}
.ax-auth-left-inner {
    position: relative; z-index: 1;
    padding: 56px 52px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.ax-auth-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; }
.ax-auth-brand-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    background: linear-gradient(135deg, #FF2A2A, #E11D48);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
    box-shadow: 0 8px 24px rgba(255,42,42,.32);
}
.ax-auth-brand-name { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.03em; font-family: 'Manrope', 'Inter', sans-serif; }
.ax-auth-pitch { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.ax-auth-pitch h2 {
    font-size: clamp(26px, 2.6vw, 38px); font-weight: 900;
    line-height: 1.12; letter-spacing: -.035em;
    color: #fff; margin: 0 0 14px;
    font-family: 'Manrope', 'Inter', sans-serif;
}
.ax-auth-pitch > p { font-size: 15px; color: rgba(255,255,255,.46); margin: 0 0 32px; line-height: 1.65; }
.ax-auth-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ax-auth-features li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.72); }
.ax-auth-feat-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: rgba(255,42,42,.1); border: 1px solid rgba(255,42,42,.2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #FF2A2A;
}
.ax-auth-steps { display: flex; flex-direction: column; gap: 20px; }
.ax-auth-step { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.55); }
.ax-auth-step-num {
    width: 36px; height: 36px; flex-shrink: 0;
    background: rgba(255,42,42,.12); border: 1px solid rgba(255,42,42,.2);
    border-radius: 50%; font-size: 14px; font-weight: 800; color: #FF2A2A;
    display: flex; align-items: center; justify-content: center;
}
.ax-auth-step.done { color: rgba(255,255,255,.75); }
.ax-auth-step.done .ax-auth-step-num { background: rgba(255,42,42,.2); border-color: rgba(255,42,42,.35); }
.ax-auth-step-txt { font-size: 14.5px; font-weight: 600; }
.ax-auth-left-foot { font-size: 12px; color: rgba(255,255,255,.2); }
.ax-auth-right {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 32px;
    background: #040812; overflow-y: auto;
}
.ax-auth-card { width: 100%; max-width: 420px; }
.ax-auth-head { text-align: center; margin-bottom: 30px; }
.ax-auth-icon-wrap {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, #FF2A2A, #E11D48);
    border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff; margin-bottom: 16px;
    box-shadow: 0 12px 36px rgba(255,42,42,.28);
}
.ax-auth-title { font-size: 26px; font-weight: 900; color: #fff; margin: 0 0 6px; letter-spacing: -.025em; font-family: 'Manrope', 'Inter', sans-serif; }
.ax-auth-sub { font-size: 14px; color: rgba(255,255,255,.36); margin: 0; }
.ax-auth-alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 10px; padding: 12px 14px;
    font-size: 13.5px; margin-bottom: 20px; border: 1px solid; line-height: 1.45;
}
.ax-auth-alert-error   { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.22); color: #f87171; }
.ax-auth-alert-success { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.22);  color: #4ade80; }
.ax-auth-alert i { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.ax-field { margin-bottom: 16px; }
.ax-field label { display: block; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.46); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
.ax-field-inner { position: relative; }
.ax-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.26); font-size: 16px; pointer-events: none; z-index: 1; }
.ax-field-input {
    width: 100%; height: 50px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 12px; color: #fff;
    font-size: 15px; font-family: inherit;
    padding: 0 14px 0 44px;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.ax-field-input.has-toggle { padding-right: 48px; }
.ax-field-input:focus { border-color: #FF2A2A; background: rgba(255,42,42,.04); box-shadow: 0 0 0 3px rgba(255,42,42,.1); }
.ax-field-input::placeholder { color: rgba(255,255,255,.2); }
.ax-field-toggle {
    position: absolute; right: 0; top: 0; bottom: 0; width: 48px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.28); border-radius: 0 12px 12px 0;
    transition: color .15s;
}
.ax-field-toggle:hover { color: #FF2A2A; }
.ax-pwd-strength { margin-top: 7px; }
.ax-pwd-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 5px; }
.ax-pwd-fill { height: 100%; border-radius: 999px; width: 0; transition: width .35s, background .35s; }
.ax-pwd-label { font-size: 11px; color: rgba(255,255,255,.3); }
.ax-field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.ax-field-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.4); cursor: pointer; }
.ax-field-check input[type=checkbox] { accent-color: #FF2A2A; width: 15px; height: 15px; flex-shrink: 0; }
.ax-terms-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.4); cursor: pointer; line-height: 1.5; margin-bottom: 20px; }
.ax-field-link { font-size: 13px; color: rgba(255,255,255,.38); text-decoration: none; transition: color .15s; }
.ax-field-link:hover { color: rgba(255,255,255,.7); }
.ax-link-red { color: #FF2A2A !important; font-weight: 600; }
.ax-link-red:hover { text-decoration: underline; color: #FF2A2A !important; }
.ax-auth-submit {
    width: 100%; height: 52px;
    background: linear-gradient(135deg, #FF2A2A, #E11D48);
    border: none; border-radius: 12px;
    color: #fff; font-size: 15px; font-weight: 800;
    font-family: inherit; cursor: pointer; letter-spacing: -.01em;
    box-shadow: 0 8px 24px rgba(255,42,42,.28);
    transition: transform .2s, box-shadow .2s;
}
.ax-auth-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,42,42,.42); }
.ax-auth-submit:active { transform: translateY(0); }
.ax-auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.ax-auth-or::before, .ax-auth-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.ax-auth-or span { font-size: 11.5px; color: rgba(255,255,255,.28); font-weight: 700; letter-spacing: .05em; }
.ax-auth-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.ax-auth-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600;
    font-family: inherit; text-decoration: none;
    transition: border-color .2s, background .2s, color .2s;
}
.ax-auth-social-btn:hover { border-color: rgba(255,42,42,.4); background: rgba(255,42,42,.07); color: #fff; }
.ax-auth-social-btn i { font-size: 18px; }
.ax-auth-footer-txt { text-align: center; font-size: 14px; color: rgba(255,255,255,.32); margin-top: 22px; }
@media (max-width: 767px) {
    .ax-auth-screen { grid-template-columns: 1fr; }
    .ax-auth-left { display: none; }
    .ax-auth-right { padding: 20px 20px 100px; background: transparent; align-items: flex-start; overflow-y: visible; }
    .ax-auth-card { max-width: 100%; }
    .ax-auth-title { font-size: 22px; }
    .ax-auth-icon-wrap { width: 54px; height: 54px; font-size: 22px; border-radius: 14px; }
    .ax-auth-head { margin-bottom: 24px; }
    .ax-auth-field-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── 22. User area ───────────────────────────────────────────────────────── */
.user-shell {
    min-height: calc(100vh - var(--ax-navbar-h));
    background:
        radial-gradient(900px 400px at 80% 0%, rgba(255,42,42,.13), transparent 60%),
        #030712;
    padding-top: 24px;
}
.user-page {
    display: grid;
    grid-template-columns: 276px 1fr;
    gap: 28px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 24px 80px;
}
.user-nav {
    background: rgba(13, 20, 36, 0.88);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 22px;
    height: fit-content;
    position: sticky;
    top: calc(var(--ax-navbar-h, 76px) + 16px);
}
.user-nav-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 14px;
}
.user-avatar-circle {
    width: 60px; height: 60px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF2A2A, #0066cc);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: #fff;
    box-shadow: 0 8px 28px rgba(255,42,42,.32);
}
.user-nav-name  { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.2; }
.user-nav-email { font-size: 11.5px; color: rgba(255,255,255,.32); margin-top: 2px; }
.user-nav-plan {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%;
    padding: 7px 12px; border-radius: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; transition: .2s;
    background: rgba(245,197,24,.1);
    border: 1px solid rgba(245,197,24,.22);
    color: #f5c518;
    margin-bottom: 10px;
}
.user-nav-plan.free { background: rgba(255,42,42,.08); border-color: rgba(255,42,42,.22); color: #FF2A2A; }
.user-nav-plan.free:hover { background: rgba(255,42,42,.14); }
.user-nav-menu { display: flex; flex-direction: column; gap: 3px; }
.user-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 12px;
    font-size: 14px; color: rgba(255,255,255,.55);
    text-decoration: none; transition: background .15s, color .15s;
}
.user-nav-item:hover { background: rgba(255,42,42,.09); color: #fff; }
.user-nav-item.active { background: rgba(255,42,42,.13); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 #FF2A2A; }
.user-nav-item.logout { color: #f87171; }
.user-nav-item.logout:hover { background: rgba(239,68,68,.09); color: #fca5a5; }
.user-nav-item i { font-size: 15px; width: 18px; flex-shrink: 0; }
.user-main { min-width: 0; }
.user-alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 10px; padding: 12px 14px;
    font-size: 13.5px; margin-bottom: 18px; border: 1px solid; line-height: 1.45;
}
.user-alert i { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.user-alert-success { background: rgba(34,197,94,.07);  border-color: rgba(34,197,94,.22);  color: #4ade80; }
.user-alert-error   { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.22);  color: #f87171; }
.user-section-title { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.01em; margin: 0 0 14px; line-height: 1.2; }
@media (max-width: 960px) {
    .user-page { grid-template-columns: 1fr; padding: 20px 20px 80px; }
    .user-nav { position: static; }
    .user-nav-avatar { flex-direction: row; text-align: left; gap: 14px; padding-bottom: 14px; }
    .user-nav-name, .user-nav-email { text-align: left; }
    .user-nav-plan { width: auto; }
    .user-nav-menu { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .user-nav-item { flex: 0 0 auto; border-radius: 10px; }
    .user-nav-item.active { box-shadow: none; border-bottom: 2px solid #FF2A2A; }
}
@media (max-width: 767px) {
    .user-shell { padding-top: 8px; }
    .user-page { padding: 12px 14px 100px; gap: 14px; }
}

/* ── 23. Watch details (tabs + info panel) ───────────────────────────────── */
.ax-watch-details { padding: 26px 0 8px; color: #e8eaf0; }
.ax-watch-tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ax-watch-tab { appearance: none; border: 0; background: transparent; color: rgba(255,255,255,.45); font-size: 14px; font-weight: 800; letter-spacing: .01em; padding: 0 18px 13px 0; min-height: 38px; cursor: pointer; font-family: inherit; position: relative; white-space: nowrap; transition: color .15s; }
.ax-watch-tab:hover { color: rgba(255,255,255,.75); }
.ax-watch-tab.active { color: #FF2A2A; }
.ax-watch-tab.active::after { content: ''; position: absolute; left: 0; right: 18px; bottom: -1px; height: 2px; background: #FF2A2A; border-radius: 2px 2px 0 0; }
.ax-watch-info-shell { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 30px; align-items: start; }
.ax-watch-poster-panel { position: sticky; top: 92px; }
.ax-watch-poster-frame { width: 100%; aspect-ratio: 2/3; background: #101827; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 46px rgba(0,0,0,.35); }
.ax-watch-poster-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ax-watch-poster-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); font-size: 42px; }
.ax-watch-action-row { display: flex; gap: 10px; margin-top: 14px; }
.ax-watch-action { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.ax-watch-action:hover { background: rgba(255,42,42,.12); border-color: rgba(255,42,42,.3); color: #FF2A2A; transform: translateY(-1px); }
.ax-watch-kicker { color: #FF2A2A; text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; }
.ax-watch-heading { font-size: clamp(24px,3vw,34px); font-weight: 800; margin: 0 0 12px; line-height: 1.15; color: #fff; }
.ax-watch-meta-strip { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.ax-watch-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 5px 10px; color: #c8d0e3; font-size: 12px; font-weight: 700; }
.ax-watch-chip.accent { background: rgba(255,42,42,.15); border-color: rgba(255,42,42,.35); color: #fff; }
.ax-watch-description { max-width: 880px; color: #f4f6fb; font-size: 16px; line-height: 1.75; margin: 20px 0 2px; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.ax-watch-details .ax-ad-zone--between_content { margin: 24px 0; padding: 0; max-width: 760px; }
.ax-watch-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 42px; margin: 24px 0 0; max-width: 820px; }
.ax-watch-facts div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; align-items: start; }
.ax-watch-facts dt { color: #fff; font-weight: 800; font-size: 14px; }
.ax-watch-facts dd { margin: 0; color: #c8d0e3; font-size: 14px; line-height: 1.45; }
.ax-watch-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ax-watch-tags span { background: rgba(255,42,42,.12); color: #FF2A2A; border: 1px solid rgba(255,42,42,.25); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 800; }
.ax-watch-pane { display: none; }
.ax-watch-pane.active { display: block; }
.ax-watch-pane h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.ax-watch-pane p { font-size: 16px; line-height: 1.7; color: #f4f6fb; max-width: 820px; }
.ax-watch-muted { color: rgba(255,255,255,.4) !important; }
@media (max-width: 900px) {
    .ax-watch-info-shell { grid-template-columns: 1fr; gap: 18px; }
    .ax-watch-poster-panel { position: static; display: flex; align-items: flex-start; gap: 14px; }
    .ax-watch-poster-frame { width: 120px; flex: 0 0 120px; max-width: 120px; }
    .ax-watch-action-row { margin-top: 0; flex-direction: column; }
    .ax-watch-facts { grid-template-columns: 1fr; }
    .ax-watch-facts div { grid-template-columns: 96px minmax(0,1fr); }
}
@media (max-width: 520px) {
    .ax-watch-details { padding: 16px 0 8px; }
    .ax-watch-poster-frame { width: 96px; flex: 0 0 96px; max-width: 96px; }
    .ax-watch-action-row { flex-direction: row; }
    .ax-watch-action { width: 38px; height: 38px; font-size: 16px; }
    .ax-watch-tab { font-size: 13px; }
    .ax-watch-heading { font-size: 20px; }
    .ax-watch-description { font-size: 14px; margin: 14px 0 2px; }
    .ax-watch-facts div { grid-template-columns: 88px minmax(0,1fr); gap: 6px; }
    .ax-watch-details .ax-ad-zone--between_content:empty { display: none; margin: 0; }
    .ax-watch-details .ax-ad-zone { margin: 8px 0; }
}

/* ── 24. Subscribe / plans page ──────────────────────────────────────────── */
.plans-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg,#040c1e 0%,#030712 100%);
    text-align: center; padding: clamp(52px,8vw,76px) clamp(16px,3vw,24px) clamp(40px,6vw,56px);
}
.plans-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size: 32px 32px; pointer-events: none;
}
.plans-hero::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%,rgba(255,42,42,.22) 0%,transparent 58%);
    pointer-events: none;
}
.plans-hero-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.plans-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,42,42,.1); border: 1px solid rgba(255,42,42,.25);
    color: #FF2A2A; padding: 6px 18px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 22px;
}
.plans-hero h1 { font-size: clamp(38px,5.5vw,62px); font-weight: 900; letter-spacing: -.04em; line-height: 1.06; color: #fff; margin: 0 0 16px; font-family: 'Manrope','Inter',sans-serif; }
.plans-hero p { font-size: 15px; color: rgba(255,255,255,.38); margin: 0; }
.plans-flash { display: flex; align-items: center; gap: 10px; background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.2); color: #f87171; border-radius: 10px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 24px; }
.plans-page { max-width: 1100px; margin: 0 auto; padding: clamp(24px,3vw,32px) clamp(12px,3vw,24px) clamp(60px,6vw,80px); }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(268px,1fr)); gap: 20px; align-items: start; margin-bottom: 40px; }
.plans-empty { grid-column: 1 / -1; }
.plan-card { position: relative; background: rgba(13,20,36,.9); border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 32px 26px; display: flex; flex-direction: column; gap: 14px; transition: transform .22s; }
.plan-card:hover { transform: translateY(-4px); }
.plan-card.plan-featured { border-color: rgba(255,42,42,.38); background: linear-gradient(145deg,rgba(255,42,42,.07),rgba(13,20,36,.95)); box-shadow: 0 0 60px rgba(255,42,42,.1), 0 8px 48px rgba(0,0,0,.5); }
.plan-popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg,#FF2A2A,#E11D48); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 16px; border-radius: 20px; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 16px rgba(255,42,42,.4); }
.plan-icon-wrap { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.plan-card.plan-featured .plan-icon-wrap { background: rgba(255,42,42,.1); border-color: rgba(255,42,42,.2); }
.plan-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.plan-desc { font-size: 13px; color: rgba(255,255,255,.35); margin: 0; line-height: 1.55; }
.plan-price { display: flex; align-items: flex-start; gap: 3px; margin: 4px 0; }
.plan-currency { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.5); margin-top: 7px; }
.plan-amount { font-size: 52px; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -.03em; }
.plan-period { font-size: 13px; color: rgba(255,255,255,.35); align-self: flex-end; margin-bottom: 8px; }
.plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.plan-features li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.plan-features li i { color: #FF2A2A; font-size: 14px; flex-shrink: 0; }
.plan-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.plan-btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; border-radius: 12px; box-sizing: border-box; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12); color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s; }
.plan-btn-primary:hover { border-color: rgba(255,42,42,.5); background: rgba(255,42,42,.1); color: #fff; }
.plan-btn-primary.plan-btn-featured { background: linear-gradient(135deg,#FF2A2A,#E11D48); border-color: transparent; box-shadow: 0 6px 24px rgba(255,42,42,.32); }
.plan-btn-primary.plan-btn-featured:hover { box-shadow: 0 10px 36px rgba(255,42,42,.46); transform: translateY(-1px); }
.plan-btn-paypal { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; border-radius: 12px; box-sizing: border-box; background: rgba(0,48,135,.3); border: 1.5px solid rgba(0,80,200,.25); color: rgba(255,255,255,.7); font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: .2s; }
.plan-btn-paypal:hover { background: rgba(0,48,135,.5); border-color: rgba(0,100,220,.5); color: #fff; }
.plan-btn-waafi { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; border-radius: 12px; box-sizing: border-box; background: rgba(0,120,80,.25); border: 1.5px solid rgba(0,180,100,.25); color: rgba(255,255,255,.7); font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: .2s; }
.plan-btn-waafi:hover { background: rgba(0,160,90,.35); border-color: rgba(0,200,110,.4); color: #fff; }
.plan-current { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); color: #4ade80; font-size: 13px; font-weight: 700; }
.plans-guarantee { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; background: rgba(13,20,36,.7); border: 1px solid rgba(255,255,255,.05); border-radius: 16px; padding: 20px 28px; }
.guarantee-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.45); }
.guarantee-item i { font-size: 17px; color: #FF2A2A; }
.guarantee-sep { width: 1px; height: 18px; background: rgba(255,255,255,.07); }
@media (max-width: 767px) {
    .plans-hero { padding: 52px 20px 40px; }
    .plans-page { padding: 24px 16px 80px; }
    .plans-grid { grid-template-columns: 1fr; }
    .plan-card.plan-featured { transform: none; }
    .guarantee-sep { display: none; }
    .plans-guarantee { gap: 16px; }
}

/* ── 25. Subscribe result pages (success / cancel) ───────────────────────── */
.sub-result-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; background: radial-gradient(600px 280px at 50% 0%,rgba(34,197,94,.09),transparent 55%),#030712; }
.sub-result-page--success { background: radial-gradient(600px 280px at 50% 0%,rgba(34,197,94,.09),transparent 55%),#030712; }
.sub-result-page--cancel  { background: radial-gradient(600px 280px at 50% 0%,rgba(239,68,68,.08),transparent 55%),#030712; }
.sub-result-card { background: rgba(13,20,36,.92); border: 1px solid rgba(34,197,94,.18); border-radius: 24px; padding: clamp(36px,5vw,52px) clamp(24px,5vw,40px); max-width: 460px; width: 100%; text-align: center; }
.sub-result-card--cancel { border-color: rgba(239,68,68,.18); }
.sub-result-card p strong { color: rgba(255,255,255,.72); font-weight: 700; }
.sub-result-icon { width: 72px; height: 72px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 22px; }
.sub-result-icon--green { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.22); color: #4ade80; }
.sub-result-icon--red   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.2);  color: #f87171; }
.sub-result-card h1 { font-size: 24px; font-weight: 900; letter-spacing: -.025em; color: #fff; margin: 0 0 12px; }
.sub-result-card p  { font-size: 14px; color: rgba(255,255,255,.42); line-height: 1.65; margin: 0 0 30px; }
.sub-result-actions { display: flex; flex-direction: column; gap: 10px; }
.sub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 700; font-family: inherit; text-decoration: none; transition: .2s; cursor: pointer; border: 1.5px solid transparent; }
.sub-btn--primary { background: linear-gradient(135deg,#FF2A2A,#E11D48); color: #fff; box-shadow: 0 6px 20px rgba(255,42,42,.28); }
.sub-btn--primary:hover { box-shadow: 0 10px 32px rgba(255,42,42,.42); transform: translateY(-1px); color: #fff; }
.sub-btn--ghost { background: transparent; color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.1); }
.sub-btn--ghost:hover { border-color: rgba(255,42,42,.35); color: #fff; }

/* ── 26. 404 error page ──────────────────────────────────────────────────── */
.e404-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: radial-gradient(700px 300px at 50% 0%,rgba(255,42,42,.09),transparent 55%),#030712; text-align: center; }
.e404-inner { max-width: 520px; width: 100%; }
.e404-glyph { font-size: clamp(90px,18vw,160px); font-weight: 900; line-height: 1; letter-spacing: -.05em; background: linear-gradient(135deg,#FF2A2A 30%,rgba(255,42,42,.25)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; font-family: 'Manrope','Inter',sans-serif; }
.e404-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,42,42,.08); border: 1px solid rgba(255,42,42,.15); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(255,42,42,.7); margin: 0 auto 22px; }
.e404-title { font-size: clamp(20px,3.5vw,28px); font-weight: 900; letter-spacing: -.025em; color: #fff; margin: 0 0 12px; font-family: 'Manrope','Inter',sans-serif; }
.e404-text  { font-size: 14.5px; color: rgba(255,255,255,.38); line-height: 1.7; margin: 0 0 32px; }
.e404-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.e404-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 11px; font-size: 13.5px; font-weight: 700; font-family: inherit; text-decoration: none; transition: .2s; border: 1.5px solid transparent; }
.e404-btn--primary { background: linear-gradient(135deg,#FF2A2A,#E11D48); color: #fff; box-shadow: 0 6px 20px rgba(255,42,42,.28); }
.e404-btn--primary:hover { box-shadow: 0 10px 32px rgba(255,42,42,.42); transform: translateY(-1px); color: #fff; }
.e404-btn--ghost { background: transparent; color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.1); }
.e404-btn--ghost:hover { border-color: rgba(255,42,42,.35); color: #fff; }
.e404-search { max-width: 420px; margin: 0 auto; }
.e404-search-inner { position: relative; display: flex; align-items: center; }
.e404-search-icon { position: absolute; left: 16px; font-size: 15px; color: rgba(255,255,255,.25); pointer-events: none; }
.e404-search-input { flex: 1; height: 50px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px 0 0 12px; color: #fff; font-size: 14px; font-family: inherit; padding: 0 14px 0 44px; outline: none; transition: border-color .2s; }
.e404-search-input:focus { border-color: rgba(255,42,42,.4); }
.e404-search-input::placeholder { color: rgba(255,255,255,.2); }
.e404-search-btn { height: 50px; padding: 0 20px; background: #FF2A2A; border: none; border-radius: 0 12px 12px 0; color: #fff; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: .2s; white-space: nowrap; }
.e404-search-btn:hover { background: #E11D48; }
@media (max-width: 480px) { .e404-actions { flex-direction: column; align-items: stretch; } .e404-btn { justify-content: center; } }

/* ── 27. Contact page ────────────────────────────────────────────────────── */
.ct-hero { position: relative; overflow: hidden; background: linear-gradient(180deg,#040c1e 0%,#030712 100%); text-align: center; padding: clamp(48px,7vw,64px) clamp(16px,3vw,24px) clamp(36px,5vw,44px); }
.ct-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 30px 30px; }
.ct-hero::after  { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%,rgba(255,42,42,.17) 0%,transparent 55%); }
.ct-hero-inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.ct-hero-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,42,42,.1); border: 1px solid rgba(255,42,42,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: #FF2A2A; margin-bottom: 18px; }
.ct-hero-title { font-size: clamp(28px,4vw,44px); font-weight: 900; letter-spacing: -.04em; color: #fff; margin: 0 0 10px; font-family: 'Manrope','Inter',sans-serif; }
.ct-hero-sub   { font-size: 14.5px; color: rgba(255,255,255,.38); margin: 0; }
.ct-page { display: grid; grid-template-columns: 1fr 320px; gap: 28px; max-width: 1000px; margin: 0 auto; padding: clamp(28px,4vw,36px) clamp(12px,3vw,24px) clamp(60px,6vw,80px); }
.ct-form-card { background: rgba(13,20,36,.9); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 30px 32px; }
.ct-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 20px; border: 1px solid; line-height: 1.45; }
.ct-alert i { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.ct-alert-success { background: rgba(34,197,94,.07); border-color: rgba(34,197,94,.22); color: #4ade80; }
.ct-alert-error   { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.22);  color: #f87171; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { margin-bottom: 16px; }
.ct-field label { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.38); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.ct-field-inner { position: relative; }
.ct-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.22); font-size: 15px; pointer-events: none; z-index: 1; }
.ct-input { width: 100%; height: 48px; box-sizing: border-box; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.09); border-radius: 11px; color: #fff; font-size: 14px; font-family: inherit; padding: 0 14px 0 42px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.ct-input:focus { border-color: #FF2A2A; background: rgba(255,42,42,.04); box-shadow: 0 0 0 3px rgba(255,42,42,.1); }
.ct-input::placeholder { color: rgba(255,255,255,.2); }
.ct-textarea { height: auto; padding: 13px 14px; resize: vertical; line-height: 1.6; }
.ct-submit { display: inline-flex; align-items: center; gap: 9px; width: 100%; height: 52px; justify-content: center; box-sizing: border-box; background: linear-gradient(135deg,#FF2A2A,#E11D48); border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: 0 6px 24px rgba(255,42,42,.28); transition: transform .2s, box-shadow .2s; }
.ct-submit:hover  { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(255,42,42,.42); }
.ct-submit:active { transform: translateY(0); }
.ct-info { display: flex; flex-direction: column; gap: 14px; }
.ct-info-card { display: flex; align-items: center; gap: 14px; background: rgba(13,20,36,.9); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 18px 20px; }
.ct-info-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,42,42,.1); border: 1px solid rgba(255,42,42,.18); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #FF2A2A; flex-shrink: 0; }
.ct-info-icon--blue  { background: rgba(0,136,255,.1);  border-color: rgba(0,136,255,.18);  color: #4d9fff; }
.ct-info-icon--green { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.16); color: #4ade80; }
.ct-info-label { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.ct-info-val { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 600; text-decoration: none; }
a.ct-info-val:hover { color: #FF2A2A; }
@media (max-width: 860px) { .ct-page { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; } .ct-form-card { padding: 22px 18px; } }

/* ── 28. Blog listing page ───────────────────────────────────────────────── */
.blog-hero { position: relative; overflow: hidden; background: linear-gradient(180deg,#040c1e 0%,#030712 100%); text-align: center; padding: clamp(52px,7vw,72px) clamp(16px,3vw,24px) clamp(40px,6vw,52px); }
.blog-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 30px 30px; }
.blog-hero::after  { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%,rgba(255,42,42,.18) 0%,transparent 55%); }
.blog-hero-inner { position: relative; z-index: 1; max-width: 580px; margin: 0 auto; }
.blog-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,42,42,.1); border: 1px solid rgba(255,42,42,.25); color: #FF2A2A; padding: 5px 16px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.blog-hero h1 { font-size: clamp(34px,5vw,56px); font-weight: 900; letter-spacing: -.04em; line-height: 1.08; color: #fff; margin: 0 0 14px; font-family: 'Manrope','Inter',sans-serif; }
.blog-hero p  { font-size: 15px; color: rgba(255,255,255,.38); margin: 0; }
.blog-page { max-width: 1200px; margin: 0 auto; padding: clamp(28px,4vw,36px) clamp(12px,3vw,24px) clamp(60px,6vw,80px); }
.blog-empty { text-align: center; padding: 72px 20px; }
.blog-empty-icon { width: 72px; height: 72px; background: rgba(255,42,42,.07); border: 1px solid rgba(255,42,42,.12); border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255,255,255,.2); margin-bottom: 18px; }
.blog-empty h3 { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.blog-empty p  { font-size: 14px; color: rgba(255,255,255,.35); margin: 0; }
.blog-category { display: inline-block; background: rgba(255,42,42,.13); color: #FF2A2A; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 10px; }
.blog-meta { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: rgba(255,255,255,.35); }
.blog-meta i { margin-right: 4px; }
.blog-meta-read { margin-left: auto; color: #FF2A2A; font-weight: 700; font-size: 12px; }
.blog-meta-read i { margin-left: 4px; }
.blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 20px; overflow: hidden; background: rgba(13,20,36,.9); border: 1px solid rgba(255,255,255,.07); text-decoration: none; color: inherit; margin-bottom: 32px; transition: transform .22s, border-color .22s; }
.blog-featured:hover { transform: translateY(-3px); border-color: rgba(255,42,42,.22); }
.blog-featured-img { aspect-ratio: 16/9; overflow: hidden; background: #0d1424; position: relative; }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-body { padding: clamp(20px,3vw,36px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.blog-featured-title { font-size: clamp(18px,2.2vw,26px); font-weight: 900; line-height: 1.3; margin: 0; letter-spacing: -.02em; color: #fff; }
.blog-featured-excerpt { font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.7; margin: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; }
.blog-card { display: block; text-decoration: none; color: inherit; background: rgba(13,20,36,.9); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; transition: .22s; }
.blog-card:hover { transform: translateY(-3px); border-color: rgba(255,42,42,.2); }
.blog-card-img { aspect-ratio: 16/9; overflow: hidden; background: #0d1424; position: relative; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: rgba(255,255,255,.1); background: #0d1424; }
.blog-card-body { padding: 18px; }
.blog-card-title   { font-size: 15.5px; font-weight: 800; line-height: 1.4; margin: 0 0 7px; color: #e8eaf0; letter-spacing: -.015em; }
.blog-card-excerpt { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.6; margin: 0 0 12px; }
.blog-pager { margin-top: 36px; display: flex; justify-content: center; }
@media (max-width: 860px) { .blog-featured { grid-template-columns: 1fr; } .blog-featured-body { padding: 22px; } }
@media (max-width: 600px) { .blog-page { padding: 24px 16px 80px; } .blog-grid { grid-template-columns: 1fr; } }

/* ── 29. Watch page — player shell + related panel (movie) ───────────────── */
.ax-watch-wrap { background: #040812; min-height: 100vh; }
.ax-player-stage { position: relative; background: #000; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; }
.ax-player-stage .ax-vjs-shell { width: min(100%, 1600px); max-height: calc(100vh - 92px); }
.ax-watch-content { padding: 20px 16px 70px; }
.ax-quality-switcher { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; flex-wrap: wrap; }
.ax-qs-label { font-size: 12px; color: var(--ax-muted); }
.ax-qs-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: 12px; padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: all .15s; font-family: inherit; }
.ax-qs-btn.active, .ax-qs-btn:hover { background: rgba(255,42,42,.12); border-color: #FF2A2A; color: #FF2A2A; }
.ax-related-panel { position: sticky; top: 92px; background: linear-gradient(180deg,#111a2d 0%,#0c1424 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.24); }
.ax-related-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.ax-related-eyebrow { color: #FF2A2A; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
.ax-related-title { font-size: 15px; font-weight: 800; color: #f5f7fb; }
.ax-related-head span { min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(255,42,42,.12); color: #FF2A2A; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.ax-related-list { display: flex; flex-direction: column; max-height: 680px; overflow: auto; padding-right: 2px; }
.ax-related-list::-webkit-scrollbar { width: 6px; } .ax-related-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.ax-related-item { display: grid; grid-template-columns: 58px minmax(0,1fr) 16px; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 10px; transition: background .15s, transform .15s; }
.ax-related-item:last-child { border-bottom: none; }
.ax-related-item:hover { background: rgba(255,255,255,.055); transform: translateX(2px); }
.ax-related-thumb-wrap { position: relative; width: 58px; height: 76px; flex-shrink: 0; }
.ax-related-thumb { width: 58px; height: 76px; object-fit: cover; border-radius: 8px; display: block; background: #111827; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.ax-related-rank { position: absolute; left: -6px; top: -6px; width: 20px; height: 20px; border-radius: 999px; background: #FF2A2A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; border: 2px solid #111a2d; }
.ax-related-info { min-width: 0; }
.ax-related-name { font-size: 13px; font-weight: 800; margin-bottom: 6px; color: #f3f6ff; line-height: 1.25; }
.ax-related-meta { font-size: 11px; color: #8d98b3; line-height: 1.3; }
.ax-related-meta .bi-star-fill { color: #f5c518; font-size: 10px; margin-right: 3px; }
.ax-related-arrow { color: rgba(255,255,255,.3); font-size: 12px; opacity: 0; transition: opacity .15s, transform .15s; }
.ax-related-item:hover .ax-related-arrow { opacity: 1; transform: translateX(2px); }
@media (max-width: 991px) { .ax-related-panel { position: static; } .ax-related-list { max-height: none; } }
@media (max-width: 767px) { .ax-player-stage .ax-vjs-shell { max-height: 56vh; } .ax-watch-content { padding: 14px 14px 90px; } .ax-quality-switcher { flex-wrap: wrap; } }

/* ── 30. Watch page — episode list + up-next (series/episode) ────────────── */
.ax-upnext { position: absolute; right: 28px; bottom: 86px; width: min(340px,calc(100% - 32px)); z-index: 20; background: rgba(8,13,25,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.42); backdrop-filter: blur(14px); }
.ax-upnext-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #FF2A2A; font-weight: 900; margin-bottom: 5px; }
.ax-upnext-title { font-size: 16px; color: #fff; font-weight: 900; margin-bottom: 12px; }
.ax-upnext-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ax-eplist { position: sticky; top: 92px; background: linear-gradient(180deg,#111a2d 0%,#0c1424 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.24); }
.ax-eplist-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.ax-eplist-eyebrow { color: #FF2A2A; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
.ax-eplist-title { font-size: 15px; font-weight: 800; color: #f5f7fb; }
.ax-eplist-body { display: flex; flex-direction: column; max-height: 680px; overflow: auto; padding-right: 2px; }
.ax-eplist-body::-webkit-scrollbar { width: 6px; } .ax-eplist-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.ax-epitem { display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 10px; transition: background .15s, transform .15s; }
.ax-epitem:last-child { border-bottom: 0; }
.ax-epitem:hover, .ax-epitem.active { background: rgba(255,255,255,.055); transform: translateX(2px); }
.ax-epitem-num { width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #e8eaf0; }
.ax-epitem.active .ax-epitem-num { background: #FF2A2A; color: #fff; }
.ax-epitem-title { font-size: 13px; font-weight: 800; color: #f3f6ff; line-height: 1.25; margin-bottom: 5px; }
.ax-epitem-meta { font-size: 11px; color: #8d98b3; }
.ax-epitem-playing { color: #FF2A2A; }
@media (max-width: 991px) { .ax-eplist { position: static; } .ax-eplist-body { max-height: none; } .ax-upnext { right: 16px; bottom: 76px; } }
@media (max-width: 767px) { .ax-eplist-body { max-height: 340px; } }

/* ── 31. Comments component (.cm-*) ─────────────────────────────────────── */
.cm-wrap { margin: 48px 0 0; border-top: 1px solid var(--ax-border); padding-top: 32px; }
.cm-head { margin-bottom: 22px; }
.cm-title { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin: 0; }
.cm-title i { color: #FF2A2A; }
.cm-total-badge { background: rgba(255,42,42,.12); border: 1px solid rgba(255,42,42,.28); color: #FF2A2A; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.cm-form-wrap, .cm-reply-form { background: rgba(21,29,46,.6); border: 1px solid var(--ax-border); border-radius: 14px; padding: 16px; margin-bottom: 28px; }
.cm-reply-to { font-size: 12px; color: #FF2A2A; font-weight: 700; margin-bottom: 8px; }
.cm-textarea { width: 100%; background: transparent; border: none; outline: none; color: var(--ax-text); font-size: 14px; font-family: var(--ax-font); resize: vertical; line-height: 1.6; }
.cm-textarea::placeholder { color: var(--ax-muted); }
.cm-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; border-top: 1px solid var(--ax-border); padding-top: 10px; }
.cm-chars { font-size: 11px; color: var(--ax-muted); margin-right: auto; }
.cm-submit { display: inline-flex; align-items: center; gap: 7px; background: var(--ax-gradient); color: #fff; border: none; border-radius: 9px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--ax-font); transition: .2s; }
.cm-submit:hover { opacity: .9; transform: translateY(-1px); }
.cm-login-cta { display: flex; align-items: center; gap: 10px; background: rgba(21,29,46,.5); border: 1px solid var(--ax-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; font-size: 14px; color: var(--ax-muted); }
.cm-login-cta i { font-size: 20px; }
.cm-login-cta a { color: #FF2A2A; font-weight: 700; }
.cm-card { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ax-border); }
.cm-card:last-child { border-bottom: none; }
.cm-reply { padding-left: 24px; padding-top: 12px; padding-bottom: 0; border-bottom: none; }
.cm-replies { border-left: 2px solid rgba(255,42,42,.2); margin: 4px 0 4px 28px; padding-left: 16px; }
.cm-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--ax-border); }
.cm-reply .cm-avatar { width: 32px; height: 32px; }
.cm-body { flex: 1; min-width: 0; }
.cm-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cm-name { font-size: 13.5px; font-weight: 700; color: var(--ax-text); }
.cm-date { font-size: 11.5px; color: var(--ax-muted); }
.cm-text { font-size: 14px; line-height: 1.65; color: var(--ax-text-2); word-break: break-word; }
.cm-actions { display: flex; gap: 14px; margin-top: 8px; }
.cm-reply-btn, .cm-like-btn { background: none; border: none; color: var(--ax-muted); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; font-family: var(--ax-font); transition: color .15s; }
.cm-reply-btn:hover { color: #FF2A2A; }
.cm-like-btn:hover, .cm-like-btn.liked { color: var(--ds-gold); }
.cm-empty { text-align: center; padding: 40px 24px; color: var(--ax-muted); }
.cm-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .3; }
.cm-empty p { font-size: 14px; margin: 0; }

/* ── 32. Reviews component (.rev-*) ─────────────────────────────────────── */
.rev-section { margin: 2.5rem 0; }
.rev-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.rev-section-head h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.rev-count { font-size: .82rem; color: rgba(255,255,255,.4); margin-left: .5rem; }
.rev-write { background: #FF2A2A; color: #fff; border: none; border-radius: 8px; padding: .45rem .9rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.rev-write:hover { background: #E11D48; }
.rev-form-wrap { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1.1rem; margin-bottom: 1.5rem; display: none; }
.rev-form-wrap.open { display: block; }
.rev-form-wrap textarea { width: 100%; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff; font-size: .9rem; padding: .7rem .8rem; resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.5; }
.rev-form-wrap textarea:focus { outline: none; border-color: #FF2A2A; }
.rev-form-meta { display: flex; align-items: center; gap: .75rem; margin: .65rem 0; }
.rev-rating-pick { display: flex; gap: 3px; }
.rev-rating-pick span { font-size: 1.2rem; color: rgba(255,255,255,.2); cursor: pointer; transition: color .15s; }
.rev-rating-pick span.on { color: #f5c518; }
.rev-spoiler-label { font-size: .8rem; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: .35rem; cursor: pointer; user-select: none; }
.rev-spoiler-label input { accent-color: #FF2A2A; }
.rev-form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.rev-submit-btn { background: #FF2A2A; color: #fff; border: none; border-radius: 8px; padding: .45rem 1rem; font-size: .84rem; font-weight: 600; cursor: pointer; }
.rev-cancel-btn { background: rgba(255,255,255,.07); color: rgba(255,255,255,.6); border: none; border-radius: 8px; padding: .45rem .9rem; font-size: .84rem; cursor: pointer; }
.rev-msg { font-size: .82rem; margin-top: .4rem; display: none; }
.rev-msg.ok  { color: #4ade80; display: block; }
.rev-msg.err { color: #f87171; display: block; }
.rev-list { display: flex; flex-direction: column; gap: .85rem; }
.rev-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 1rem 1.1rem; position: relative; }
.rev-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rev-avatar { width: 32px; height: 32px; border-radius: 50%; background: #222; border: 2px solid rgba(255,42,42,.2); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #FF2A2A; overflow: hidden; flex-shrink: 0; }
.rev-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rev-uname { font-size: .88rem; font-weight: 600; color: #fff; }
.rev-date  { font-size: .75rem; color: rgba(255,255,255,.35); margin-left: .35rem; }
.rev-stars { display: flex; gap: 2px; margin-left: auto; }
.rev-stars span { font-size: .82rem; color: #f5c518; }
.rev-stars span.empty { color: rgba(255,255,255,.15); }
.rev-body { font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.rev-spoiler-warn { display: inline-block; background: rgba(255,42,42,.15); color: #FF2A2A; border: 1px solid rgba(255,42,42,.3); border-radius: 4px; font-size: .72rem; padding: .1rem .4rem; margin-bottom: .4rem; font-weight: 600; letter-spacing: .04em; }
.rev-foot { display: flex; align-items: center; gap: .75rem; margin-top: .65rem; }
.rev-like-btn { background: none; border: none; color: rgba(255,255,255,.4); font-size: .8rem; cursor: pointer; display: flex; align-items: center; gap: .3rem; padding: 0; transition: color .2s; }
.rev-like-btn:hover, .rev-like-btn.liked { color: #FF2A2A; }
.rev-del-btn { background: none; border: none; color: rgba(255,255,255,.25); font-size: .78rem; cursor: pointer; padding: 0; margin-left: auto; transition: color .2s; }
.rev-del-btn:hover { color: #f87171; }
.rev-empty { text-align: center; padding: 2rem 1rem; color: rgba(255,255,255,.3); font-size: .88rem; }

/* ── 33. User activity feed (.feed-*, .ftb-*) ────────────────────────────── */
.feed-wrap { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
.feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.feed-header h1 { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0; }
.feed-empty { text-align: center; padding: 4rem 2rem; color: rgba(255,255,255,.45); }
.feed-empty svg { width: 56px; height: 56px; margin-bottom: 1rem; opacity: .3; }
.feed-empty p { font-size: .95rem; }
.feed-item { display: flex; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.feed-item:last-child { border-bottom: none; }
.feed-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #222; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: #FF2A2A; border: 2px solid rgba(255,42,42,.25); }
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.feed-body { flex: 1; min-width: 0; }
.feed-meta { font-size: .8rem; color: rgba(255,255,255,.45); margin-bottom: .3rem; }
.feed-meta strong { color: rgba(255,255,255,.8); font-weight: 600; }
.feed-meta .feed-time { margin-left: .5rem; }
.feed-text { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.5; word-break: break-word; }
.feed-text .spoiler-wrap { display: inline-block; }
.feed-text .spoiler-toggle { background: rgba(255,42,42,.15); border: 1px solid rgba(255,42,42,.3); color: #FF2A2A; border-radius: 4px; padding: .1rem .5rem; font-size: .78rem; cursor: pointer; vertical-align: middle; margin-left: .4rem; }
.feed-text .spoiler-body { display: none; background: rgba(255,255,255,.04); border-left: 2px solid #FF2A2A; padding: .4rem .6rem; margin-top: .4rem; border-radius: 0 4px 4px 0; font-style: italic; }
.feed-text .spoiler-body.visible { display: block; }
.feed-content-card { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; background: rgba(255,255,255,.04); border-radius: 8px; padding: .5rem .6rem; text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,.07); transition: background .2s; }
.feed-content-card:hover { background: rgba(255,42,42,.08); border-color: rgba(255,42,42,.3); }
.feed-content-card img { width: 36px; height: 54px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.feed-content-card .fc-info { min-width: 0; }
.feed-content-card .fc-title { font-size: .85rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-content-card .fc-type { font-size: .72rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; }
.feed-rating { display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem; }
.feed-rating .star { color: #f5c518; font-size: .9rem; }
.feed-rating .star.empty { color: rgba(255,255,255,.2); }
.feed-type-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 4px; margin-right: .35rem; vertical-align: middle; }
.ftb-review   { background: rgba(255,42,42,.15);   color: #FF2A2A; }
.ftb-follow   { background: rgba(99,179,237,.15);  color: #63b3ed; }
.ftb-watchlist{ background: rgba(245,197,24,.15);  color: #f5c518; }
.ftb-watch    { background: rgba(72,187,120,.15);  color: #48bb78; }
.ftb-rating   { background: rgba(251,140,0,.15);   color: #fb8c00; }

/* ── 34. User dashboard (.dash-*) ────────────────────────────────────────── */
.dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 4px; }
.dash-stat { display: flex; align-items: center; gap: 14px; background: rgba(13,20,36,.75); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 16px 18px; }
.dash-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.dash-stat-icon--red   { background: rgba(255,42,42,.15);  color: #FF2A2A; }
.dash-stat-icon--blue  { background: rgba(0,136,255,.15);  color: #4d9fff; }
.dash-stat-icon--gold  { background: rgba(245,197,24,.15); color: #f5c518; }
.dash-stat-icon--muted { background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); }
.dash-stat-val   { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.1; }
.dash-stat-label { font-size: 11.5px; color: rgba(255,255,255,.35); margin-top: 2px; }
.dash-cw-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; }
.dash-cw-card { display: block; text-decoration: none; color: inherit; }
.dash-cw-thumb { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #0d1424; border: 1px solid rgba(255,255,255,.06); }
.dash-cw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dash-cw-card:hover .dash-cw-thumb img { transform: scale(1.06); }
.dash-media-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255,255,255,.18); background: #0d1424; }
.dash-cw-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.42); font-size: 38px; color: #fff; opacity: 0; transition: .2s; }
.dash-cw-card:hover .dash-cw-play { opacity: 1; }
.dash-cw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); }
.dash-cw-bar span { display: block; height: 100%; background: #FF2A2A; }
.dash-cw-title { font-size: 13px; font-weight: 700; margin-top: 7px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e8eaf0; }
.dash-cw-sub   { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 2px; }
.dash-rec-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(118px,1fr)); gap: 14px; }
.dash-rec-card { display: block; text-decoration: none; color: inherit; }
.dash-rec-poster { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: #0d1424; border: 1px solid rgba(255,255,255,.06); }
.dash-rec-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dash-rec-card:hover .dash-rec-poster img { transform: scale(1.05); }
.dash-rec-rating { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; background: rgba(0,0,0,.78); color: #f5c518; padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 3px; }
.dash-history-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: 12px; }
.dash-history-card { display: block; text-decoration: none; color: inherit; }
.dash-history-poster { position: relative; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: #0d1424; border: 1px solid rgba(255,255,255,.06); }
.dash-history-poster img { width: 100%; height: 100%; object-fit: cover; }
.dash-history-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.48); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; opacity: 0; transition: .2s; }
.dash-history-card:hover .dash-history-overlay { opacity: 1; }
.dash-history-type { position: absolute; bottom: 4px; left: 4px; font-size: 9px; font-weight: 700; background: rgba(0,0,0,.72); color: rgba(255,255,255,.6); padding: 2px 5px; border-radius: 3px; text-transform: uppercase; }
.dash-sub-card { display: flex; align-items: center; gap: 14px; background: rgba(13,20,36,.75); border: 1px solid rgba(245,197,24,.16); border-radius: 14px; padding: 18px 20px; }
.dash-sub-icon { width: 44px; height: 44px; background: rgba(245,197,24,.14); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #f5c518; flex-shrink: 0; }
.dash-sub-plan { font-size: 14.5px; font-weight: 700; color: #fff; }
.dash-sub-exp  { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 3px; }
.dash-sub-status { margin-left: auto; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.22); color: #4ade80; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.dash-sub-promo { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg,rgba(255,42,42,.08),rgba(0,136,255,.06)); border: 1px solid rgba(255,42,42,.15); border-radius: 14px; padding: 18px 20px; }
.dash-sub-promo-icon { width: 44px; height: 44px; background: rgba(255,42,42,.14); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #FF2A2A; flex-shrink: 0; }
.dash-cta-btn { margin-left: auto; background: linear-gradient(135deg,#FF2A2A,#E11D48); color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.dash-cta-btn:hover { box-shadow: 0 6px 20px rgba(255,42,42,.35); color: #fff; }
@media (max-width: 767px) {
    .dash-stats { grid-template-columns: repeat(3,1fr); gap: 8px; }
    .dash-stat { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 8px; }
    .dash-stat-icon { width: 38px; height: 38px; font-size: 16px; }
    .dash-cw-grid { grid-template-columns: repeat(2,1fr); }
    .dash-rec-grid { grid-template-columns: repeat(3,1fr); }
    .dash-history-grid { grid-template-columns: repeat(3,1fr); }
    .dash-sub-promo { flex-direction: column; align-items: flex-start; }
    .dash-cta-btn { margin-left: 0; width: 100%; text-align: center; }
}

/* ── 35. User area — per-page extensions ─────────────────────────────────── */
/* shared header row used by several user pages */
.user-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* Devices (.dev-*) */
.dev-grid { display: grid; gap: 12px; }
.dev-card { display: flex; align-items: center; gap: 16px; background: var(--ax-card); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 18px 20px; }
.dev-card-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,42,42,.1); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #FF2A2A; flex-shrink: 0; }
.dev-card-body { flex: 1; min-width: 0; }
.dev-card-name { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.dev-card-ip   { font-size: 12px; color: var(--ax-muted); }
.dev-card-seen { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 2px; }
.dev-card-remove { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); font-size: 18px; transition: .2s; padding: 0; }
.dev-card-remove:hover { color: #ef4444; }
@media (max-width: 767px) { .dev-card { flex-wrap: wrap; } }

/* Downloads (.dl-*) */
.dl-upsell { text-align: center; padding: 60px 20px; background: var(--ax-card); border-radius: 18px; border: 1px solid rgba(255,255,255,.06); }
.dl-upsell-icon { font-size: 48px; color: rgba(255,42,42,.4); margin-bottom: 16px; }
.dl-upsell h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.dl-upsell p  { font-size: 14px; color: var(--ax-muted); margin: 0 0 20px; }
.dl-empty { text-align: center; padding: 60px 20px; }
.dl-empty-icon { font-size: 48px; color: rgba(255,255,255,.15); margin-bottom: 12px; }
.dl-empty p { font-size: 14px; color: var(--ax-muted); }
.dl-list { display: grid; gap: 12px; }
.dl-item { display: flex; align-items: center; gap: 14px; background: var(--ax-card); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; }
.dl-poster { width: 60px; height: 84px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #111; }
.dl-poster img { width: 100%; height: 100%; object-fit: cover; }
.dl-poster-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); font-size: 22px; }
.dl-body { flex: 1; min-width: 0; }
.dl-title { display: block; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-title:hover { color: #FF2A2A; }
.dl-meta    { font-size: 12px; color: var(--ax-muted); margin-bottom: 5px; }
.dl-quality { font-weight: 700; color: rgba(255,255,255,.5); }
.dl-status  { font-size: 12px; font-weight: 600; }
.dl-play { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,42,42,.12); border: 1.5px solid rgba(255,42,42,.25); display: flex; align-items: center; justify-content: center; color: #FF2A2A; font-size: 16px; flex-shrink: 0; text-decoration: none; transition: .2s; }
.dl-play:hover { background: rgba(255,42,42,.22); border-color: #FF2A2A; }

/* Invoices (.inv-*) */
.inv-list { display: flex; flex-direction: column; gap: 10px; }
.inv-row { display: flex; justify-content: space-between; align-items: center; background: rgba(13,20,36,.7); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 16px 20px; transition: border-color .2s; }
.inv-row:hover { border-color: rgba(255,255,255,.12); }
.inv-number  { font-size: 13px; font-weight: 700; color: #e2e8f0; font-family: monospace; }
.inv-plan    { font-size: 12px; color: #94a3b8; margin: 3px 0; }
.inv-date    { font-size: 11px; color: #475569; }
.inv-right   { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.inv-amount  { font-size: 15px; font-weight: 800; color: #fff; }
.inv-status  { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: capitalize; }
.inv-gateway { font-size: 11px; color: #475569; text-transform: capitalize; }
@media (max-width: 480px) {
    .inv-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .inv-right { flex-wrap: wrap; }
}

/* Rentals — gift code box (.gift-*) */
.gift-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.gift-box-head { font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: .65rem; }
.gift-box-body { display: flex; gap: .5rem; flex-wrap: wrap; }
.gift-input { flex: 1; min-width: 180px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff; padding: .5rem .75rem; font-size: .88rem; font-family: monospace; letter-spacing: .06em; }
.gift-input:focus { outline: none; border-color: #FF2A2A; }
.gift-btn { background: #FF2A2A; color: #fff; border: none; border-radius: 8px; padding: .5rem 1.1rem; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .2s; white-space: nowrap; }
.gift-btn:hover { background: #e01c1c; }
.gift-msg { font-size: .82rem; margin-top: .45rem; display: none; }
.gift-msg.ok  { color: #48bb78; display: block; }
.gift-msg.err { color: #fc8181; display: block; }

/* ── 36. Profile editing (.prof-card-*, .pf-*, .profile-grid) ────────────── */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) { .profile-grid { grid-template-columns: 1fr; } }
.prof-card { background: rgba(13,20,36,.85); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; overflow: hidden; }
.prof-card-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.prof-card-head-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,42,42,.12); border: 1px solid rgba(255,42,42,.2); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #FF2A2A; flex-shrink: 0; }
.prof-card-head-icon--lock { background: rgba(0,136,255,.1); border-color: rgba(0,136,255,.2); color: #4d9fff; }
.prof-card-title { font-size: 14px; font-weight: 700; color: #fff; }
.prof-card-sub   { font-size: 12px; color: rgba(255,255,255,.32); margin-top: 2px; }
.prof-card-body  { padding: 22px; }
.pf-field { margin-bottom: 16px; }
.pf-field label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
.pf-readonly-badge, .pf-optional-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .04em; }
.pf-readonly-badge { background: rgba(255,255,255,.05); color: rgba(255,255,255,.25); }
.pf-optional-badge { background: rgba(255,42,42,.08); color: rgba(255,42,42,.6); }
.pf-field-inner { position: relative; }
.pf-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.24); font-size: 15px; pointer-events: none; z-index: 1; }
.pf-input { width: 100%; height: 48px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.09); border-radius: 11px; color: #fff; font-size: 14px; font-family: inherit; padding: 0 14px 0 42px; outline: none; box-sizing: border-box; transition: border-color .2s, background .2s, box-shadow .2s; }
.pf-input.has-toggle { padding-right: 46px; }
.pf-input:focus { border-color: #FF2A2A; background: rgba(255,42,42,.04); box-shadow: 0 0 0 3px rgba(255,42,42,.1); }
.pf-input::placeholder { color: rgba(255,255,255,.2); }
.pf-input--disabled { opacity: .45; cursor: not-allowed; }
.pf-toggle { position: absolute; right: 0; top: 0; bottom: 0; width: 46px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.28); border-radius: 0 11px 11px 0; transition: color .15s; }
.pf-toggle:hover { color: #FF2A2A; }
.pf-strength { margin-top: 7px; }
.pf-strength-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 5px; }
.pf-strength-fill  { height: 100%; border-radius: 999px; width: 0; transition: width .35s, background .35s; }
.pf-strength-label { font-size: 11px; color: rgba(255,255,255,.3); }
.pf-submit { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 11px; background: linear-gradient(135deg,#FF2A2A,#E11D48); border: none; color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: 4px; transition: transform .2s, box-shadow .2s; }
.pf-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,42,42,.32); }
.pf-submit--sec { background: linear-gradient(135deg,#1e3a5f,#0d2a4a); box-shadow: none; }
.pf-submit--sec:hover { box-shadow: 0 8px 24px rgba(0,100,200,.25); }

/* ── 37. Profile form + PIN (.pform-*, .pin-*, .profiles-*) ──────────────── */
.pform-wrap    { max-width: 560px; margin: 48px auto; padding: 0 16px; }
.pform-card    { background: var(--ax-card-bg,#1a1f2e); border-radius: 14px; padding: 36px; }
.pform-title   { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; }
.pform-avatars { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.avatar-opt    { width: 60px; height: 60px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; overflow: hidden; transition: border-color .15s; }
.avatar-opt img { width: 100%; height: 100%; object-fit: cover; }
.avatar-opt.selected { border-color: #FF2A2A; }
.pform-label   { font-size: .82rem; color: var(--ax-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.pform-input   { width: 100%; padding: 11px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #eee; font-size: .95rem; outline: none; transition: border-color .2s; margin-bottom: 18px; }
.pform-input:focus { border-color: #FF2A2A; }
.pform-toggle  { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pform-toggle input[type=checkbox] { width: 20px; height: 20px; accent-color: #FF2A2A; }
.pform-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pform-actions { display: flex; gap: 12px; margin-top: 8px; }
.btn-pform     { flex: 1; padding: 13px; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; border: none; transition: background .2s; }
.btn-pform-primary { background: #FF2A2A; color: #fff; }
.btn-pform-primary:hover { background: #e01f1f; }
.btn-pform-ghost { background: rgba(255,255,255,.07); color: #eee; }
.btn-pform-ghost:hover { background: rgba(255,255,255,.12); }
.kids-note { font-size: .8rem; color: var(--ax-text-muted); margin-top: -12px; margin-bottom: 18px; }
.pin-page   { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pin-box    { background: var(--ax-card-bg,#1a1f2e); border-radius: 16px; padding: 40px 36px; width: 100%; max-width: 400px; text-align: center; }
.pin-avatar { width: 96px; height: 96px; border-radius: 8px; margin: 0 auto 16px; overflow: hidden; background: rgba(255,42,42,.12); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; }
.pin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pin-name     { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.pin-subtitle { font-size: .9rem; color: var(--ax-text-muted); margin-bottom: 28px; }
.pin-inputs   { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
.pin-digit    { width: 56px; height: 64px; border-radius: 10px; border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; font-size: 1.8rem; text-align: center; outline: none; transition: border-color .2s; }
.pin-digit:focus { border-color: #FF2A2A; }
.btn-pin-submit { width: 100%; padding: 14px; background: #FF2A2A; border: none; border-radius: 8px; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.btn-pin-submit:hover { background: #e01f1f; }
.pin-back { display: block; margin-top: 16px; font-size: .9rem; color: var(--ax-text-muted); text-decoration: none; }
.pin-back:hover { color: #FF2A2A; }
.profiles-page  { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; }
.profiles-title { font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 700; margin-bottom: 40px; text-align: center; }
.profiles-grid  { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-bottom: 48px; }
.profile-card   { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; }
.profile-avatar { width: 120px; height: 120px; border-radius: 8px; border: 3px solid transparent; overflow: hidden; transition: border-color .2s, transform .2s; background: var(--ax-card-bg,#1a1f2e); }
.profile-card:hover .profile-avatar,
.profile-card.active .profile-avatar { border-color: #FF2A2A; transform: scale(1.05); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg,rgba(255,42,42,.13),rgba(225,29,72,.13)); }
.profile-name  { font-size: 1rem; font-weight: 500; color: var(--ax-text,#eee); text-align: center; }
.profile-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.profile-badge.kids { background: rgba(34,197,94,.13); color: #22c55e; }
.profile-badge.pin  { background: rgba(255,255,255,.08); color: var(--ax-text-muted,#aaa); }
.profiles-actions  { display: flex; gap: 16px; }
.btn-manage { background: rgba(255,255,255,.08); color: #eee; border: none; padding: 10px 28px; border-radius: 6px; font-size: .95rem; cursor: pointer; text-decoration: none; transition: background .2s; }
.btn-manage:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-add-profile { background: transparent; border: 2px dashed rgba(255,255,255,.2); color: var(--ax-text-muted,#aaa); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; cursor: pointer; text-decoration: none; }
.btn-add-profile:hover .profile-avatar { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.btn-add-profile:hover { color: #eee; }
.add-icon { width: 120px; height: 120px; border-radius: 8px; border: 2px dashed rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; transition: border-color .2s, background .2s; }

/* ── 38. Public profile (.pub-*) ─────────────────────────────────────────── */
.pub-wrap { max-width: 760px; margin: 2.5rem auto; padding: 0 1rem; }
.pub-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 2rem; display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.pub-avatar { width: 80px; height: 80px; border-radius: 50%; background: #222; border: 3px solid rgba(255,42,42,.3); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #FF2A2A; overflow: hidden; flex-shrink: 0; }
.pub-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pub-info  { flex: 1; min-width: 0; }
.pub-name  { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; }
.pub-joined{ font-size: .8rem; color: rgba(255,255,255,.35); margin-bottom: .6rem; }
.pub-stats { display: flex; gap: 1.25rem; }
.pub-stat  { text-align: center; }
.pub-stat-val   { font-size: 1.1rem; font-weight: 700; color: #fff; }
.pub-stat-label { font-size: .72rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; }
.pub-follow-btn { padding: .5rem 1.4rem; border-radius: 10px; font-size: .88rem; font-weight: 700; border: none; cursor: pointer; transition: background .2s; }
.pub-follow-btn.follow   { background: #FF2A2A; color: #fff; }
.pub-follow-btn.follow:hover { background: #e01c1c; }
.pub-follow-btn.unfollow { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.15); }
.pub-follow-btn.unfollow:hover { background: rgba(255,42,42,.12); border-color: #FF2A2A; color: #FF2A2A; }
.pub-section-h { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 1rem; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: .5rem; }
.pub-rev-item  { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.pub-rev-item:last-child { border-bottom: none; }
.pub-rev-top   { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; }
.pub-rev-content{ font-size: .8rem; font-weight: 600; color: #FF2A2A; text-decoration: none; }
.pub-rev-content:hover { text-decoration: underline; }
.pub-rev-stars { display: flex; gap: 2px; font-size: .82rem; }
.pub-rev-stars span { color: #f5c518; }
.pub-rev-stars span.empty { color: rgba(255,255,255,.15); }
.pub-rev-date  { font-size: .75rem; color: rgba(255,255,255,.3); margin-left: auto; }
.pub-rev-body  { font-size: .875rem; color: rgba(255,255,255,.65); line-height: 1.55; word-break: break-word; }
.pub-empty     { text-align: center; padding: 2rem; color: rgba(255,255,255,.3); font-size: .88rem; }
.pub-login-note{ background: rgba(255,42,42,.06); border: 1px solid rgba(255,42,42,.2); border-radius: 10px; padding: .75rem 1rem; font-size: .85rem; color: rgba(255,255,255,.6); text-align: center; margin-top: 1rem; }
.pub-login-note a { color: #FF2A2A; font-weight: 600; }

/* ── 39. Watchlist page (.wl-*) ──────────────────────────────────────────── */
.wl-head  { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.wl-title { font-size: clamp(24px,3.5vw,40px); font-weight: 900; letter-spacing: -.03em; margin: 0; color: #fff; }
.wl-count { font-size: 13px; color: rgba(255,255,255,.3); font-weight: 600; }
.wl-empty { text-align: center; padding: 64px 20px 40px; }
.wl-empty-icon { width: 72px; height: 72px; background: rgba(255,42,42,.08); border: 1px solid rgba(255,42,42,.14); border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,.22); margin-bottom: 18px; }
.wl-empty h3 { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.wl-empty p  { font-size: 14px; color: rgba(255,255,255,.36); margin: 0 0 24px; line-height: 1.6; }
.wl-browse-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#FF2A2A,#E11D48); color: #fff; border-radius: 10px; padding: 11px 22px; font-size: 14px; font-weight: 700; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.wl-browse-btn:hover { box-shadow: 0 8px 24px rgba(255,42,42,.35); transform: translateY(-1px); color: #fff; }
.watchlist-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 20px; }
.wl-card { position: relative; border-radius: 14px; transition: transform .22s; }
.wl-card:hover { transform: translateY(-5px); }
.wl-poster { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #0d1424; border: 1px solid rgba(255,255,255,.07); }
.wl-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.wl-card:hover .wl-poster img { transform: scale(1.05); }
.wl-poster-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,.16); }
.wl-play { position: absolute; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; opacity: 0; transition: .2s; }
.wl-card:hover .wl-play { opacity: 1; }
.wl-info { padding: 9px 2px 0; }
.wl-item-title { font-size: 13.5px; font-weight: 700; color: #e8eaf0; line-height: 1.25; }
.wl-item-type  { font-size: 11px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.wl-remove { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.72); border: none; color: #f87171; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: .2s; z-index: 2; }
.wl-card:hover .wl-remove { opacity: 1; }
@media (max-width: 767px) { .watchlist-grid { grid-template-columns: repeat(2,1fr); gap: 12px; } }
@media (max-width: 400px)  { .watchlist-grid { grid-template-columns: 1fr; } }

/* ============================================================
   §40  Movie detail page (.mv-*)
   ============================================================ */
.mv { max-width: 1500px; margin: 0 auto; padding: 18px 32px 60px; }
.mv-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ax-muted); margin-bottom: 14px; }
.mv-crumb a { color: var(--ax-muted); }
.mv-crumb a:hover { color: var(--ax-text); }
.mv-crumb i { font-size: 10px; opacity: .6; }
.mv-crumb span { color: var(--ax-text-2); }
.mv-hero { position: relative; border-radius: var(--ax-radius-lg); overflow: hidden; min-height: 440px; display: flex; align-items: center; border: 1px solid var(--ax-border); }
.mv-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center right; }
.mv-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg,var(--ax-bg) 12%,rgba(3,7,18,.85) 38%,rgba(3,7,18,.15) 70%,transparent 100%),linear-gradient(0deg,rgba(3,7,18,.6),transparent 50%); }
.mv-hero-inner { position: relative; padding: 44px; max-width: 600px; }
.mv-title { font-size: clamp(2.4rem,5vw,4rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; margin: 0 0 16px; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.mv-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mv-pill { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 7px; background: rgba(255,255,255,.08); border: 1px solid var(--ax-border); color: var(--ax-text-2); }
.mv-pill-new { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.5); color: #4ade80; }
.mv-pill-q { background: transparent; border-color: var(--ax-gold); color: var(--ax-gold); }
.mv-scores { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; font-size: 14px; font-weight: 700; }
.mv-imdb { background: var(--ax-gold); color: #1a1200; padding: 3px 9px; border-radius: 6px; font-size: 13px; }
.mv-imdb b { font-weight: 900; }
.mv-score { color: var(--ax-text); display: inline-flex; align-items: center; gap: 5px; }
.mv-age { border: 1px solid rgba(255,255,255,.25); padding: 2px 9px; border-radius: 6px; font-size: 12px; color: var(--ax-text-2); }
.mv-overview { font-size: 15px; line-height: 1.7; color: var(--ax-text-2); margin: 0 0 22px; max-width: 520px; }
.mv-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.mv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 11px; font-size: 14.5px; font-weight: 700; cursor: pointer; border: none; font-family: var(--ax-font); transition: transform .2s var(--ax-ease),box-shadow .2s,background .2s; color: #fff; }
.mv-btn i { font-size: 18px; }
.mv-btn-play { background: var(--ax-gradient); box-shadow: var(--ax-shadow); }
.mv-btn-play:hover { transform: translateY(-2px); box-shadow: var(--ax-glow); }
.mv-btn-dark { background: rgba(20,29,46,.9); border: 1px solid var(--ax-border); }
.mv-btn-ghost { background: rgba(255,255,255,.08); border: 1px solid var(--ax-border); }
.mv-btn-dark:hover,.mv-btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.mv-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--ax-border); margin: 30px 0 26px; overflow-x: auto; scrollbar-width: none; }
.mv-tabs::-webkit-scrollbar { display: none; }
.mv-tab { background: none; border: none; padding: 14px 2px; font-size: 15px; font-weight: 700; color: var(--ax-muted); cursor: pointer; white-space: nowrap; position: relative; font-family: var(--ax-font); transition: color .2s; }
.mv-tab:hover { color: var(--ax-text-2); }
.mv-tab.active { color: var(--ax-text); }
.mv-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ax-gradient); }
.mv-panel { display: none; }
.mv-panel.active { display: block; animation: mvfade .3s var(--ax-ease); }
@keyframes mvfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mv-grid3 { display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: 26px; }
.mv-h { font-size: 18px; font-weight: 800; margin: 0 0 16px; }
.mv-h-lg { font-size: 22px; margin-bottom: 22px; }
.mv-h-row { display: flex; align-items: center; justify-content: space-between; }
.mv-viewall { background: none; border: none; color: var(--ax-accent-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.mv-player-stage { position: relative; display: block; aspect-ratio: 16/9; border-radius: var(--ax-radius); overflow: hidden; background: var(--ax-card) center/cover; border: 1px solid var(--ax-border); }
.mv-player-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border: 2px solid rgba(255,255,255,.7); display: grid; place-items: center; font-size: 32px; color: #fff; transition: transform .2s,background .2s; }
.mv-player-stage:hover .mv-player-play { transform: scale(1.08); background: var(--ax-gradient); border-color: transparent; box-shadow: var(--ax-glow); }
.mv-player-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin-top: 10px; background: var(--ax-card); border: 1px solid var(--ax-border); border-radius: 10px; color: var(--ax-text-2); font-size: 16px; }
.mv-player-bar i { cursor: pointer; }
.mv-player-time { font-size: 12px; color: var(--ax-muted); white-space: nowrap; }
.mv-player-track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.mv-player-track span { display: block; width: 32%; height: 100%; background: var(--ax-gradient); }
.mv-about-desc { font-size: 14px; line-height: 1.75; color: var(--ax-text-2); margin: 0 0 18px; }
.mv-facts { display: flex; flex-direction: column; }
.mv-fact { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ax-border); font-size: 13.5px; }
.mv-fact:last-child { border-bottom: none; }
.mv-fact-k { width: 108px; flex-shrink: 0; color: var(--ax-muted); font-weight: 600; }
.mv-fact-v { color: var(--ax-text-2); }
.mv-cast-grid { display: flex; flex-direction: column; gap: 14px; }
.mv-cast-grid-full { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; }
.mv-cast { display: flex; align-items: center; gap: 11px; }
.mv-cast img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--ax-border); }
.mv-cast-n { font-size: 13.5px; font-weight: 700; color: var(--ax-text); }
.mv-cast-r { font-size: 12px; color: var(--ax-muted); }
.mv-reviews { display: grid; grid-template-columns: 300px 1fr; gap: 34px; }
.mv-rev-big { font-size: 64px; font-weight: 900; line-height: 1; }
.mv-rev-stars { color: var(--ax-gold); font-size: 18px; margin: 6px 0; }
.mv-rev-label { font-size: 14px; font-weight: 700; color: var(--ax-text-2); margin-bottom: 18px; }
.mv-rev-bars { display: flex; flex-direction: column; gap: 8px; }
.mv-rev-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ax-muted); }
.mv-rev-bar > span { width: 32px; }
.mv-rev-track { flex: 1; height: 7px; border-radius: 7px; background: var(--ax-card); overflow: hidden; }
.mv-rev-track span { display: block; height: 100%; background: var(--ax-gold); }
.mv-rev-bar em { width: 34px; text-align: right; font-style: normal; }
.mv-rev-card { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ax-border); }
.mv-rev-card img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.mv-rev-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.mv-rev-top span { color: var(--ax-muted); font-size: 12px; }
.mv-rev-mini { color: var(--ax-gold); font-size: 12px; margin-top: 4px; }
.mv-rate-widget { padding: 18px 0 22px; border-bottom: 1px solid var(--ax-border); margin-bottom: 6px; }
.mv-rate-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ax-muted); margin-bottom: 10px; }
.mv-rate-stars { display: flex; gap: 6px; margin-bottom: 8px; }
.mv-rate-star { background: none; border: none; padding: 4px; cursor: pointer; font-size: 26px; color: rgba(255,255,255,.2); transition: color .15s,transform .15s; }
.mv-rate-star:hover,.mv-rate-star.hover,.mv-rate-star.active { color: var(--ax-gold); }
.mv-rate-star:hover { transform: scale(1.15); }
.mv-rate-feedback { font-size: 13px; color: var(--ax-text-2); min-height: 18px; }
.mv-rate-login { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ax-gold); font-weight: 700; text-decoration: none; padding: 10px 0; }
.mv-rate-login:hover { color: #fff; }
.mv-related-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 16px; }
.mv-empty { color: var(--ax-muted); font-size: 14px; padding: 16px 0; }
.mv-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; }
.mv-modal.open { display: flex; }
.mv-modal-bg { position: absolute; inset: 0; background: rgba(3,7,18,.9); backdrop-filter: blur(8px); }
.mv-modal-box { position: relative; z-index: 1; width: 90%; max-width: 960px; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; box-shadow: var(--ax-shadow-lg); }
.mv-modal-box iframe { width: 100%; height: 100%; border: none; }
@media (max-width: 1100px) { .mv-grid3 { grid-template-columns: 1fr 1fr; } .mv-castcol { grid-column: 1/-1; } .mv-cast-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); } }
@media (max-width: 768px) { .mv { padding: 14px 16px 90px; } .mv-hero { min-height: 380px; } .mv-hero-inner { padding: 24px 18px; } .mv-hero-fade { background: linear-gradient(0deg,var(--ax-bg) 6%,rgba(3,7,18,.55) 50%,rgba(3,7,18,.2) 100%); } .mv-grid3 { grid-template-columns: 1fr; } .mv-reviews { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   §41  TV series detail page (.sv-*)
   ============================================================ */
.sv { max-width: 1500px; margin: 0 auto; padding: 14px 32px 70px; }
.sv-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ax-muted); margin-bottom: 14px; }
.sv-back:hover { color: var(--ax-text); }
.sv-hero { position: relative; border-radius: var(--ax-radius-lg); overflow: hidden; border: 1px solid var(--ax-border); }
.sv-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center right; }
.sv-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg,var(--ax-bg) 8%,rgba(3,7,18,.82) 40%,rgba(3,7,18,.1) 72%,transparent 100%),linear-gradient(0deg,rgba(3,7,18,.55),transparent 55%); }
.sv-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 320px; gap: 30px; padding: 42px; min-height: 440px; align-items: start; }
.sv-hero-main { max-width: 600px; align-self: center; }
.sv-title { font-size: clamp(2.6rem,6vw,4.6rem); font-weight: 900; letter-spacing: -.03em; line-height: .95; margin: 0 0 16px; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.sv-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sv-pill { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 7px; background: rgba(255,255,255,.08); border: 1px solid var(--ax-border); color: var(--ax-text-2); }
.sv-pill-q { background: transparent; border-color: var(--ax-gold); color: var(--ax-gold); }
.sv-scores { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 16px; font-size: 14px; font-weight: 700; }
.sv-imdb { color: var(--ax-gold); }
.sv-match { color: var(--ax-text); }
.sv-audio { color: var(--ax-muted); display: inline-flex; align-items: center; gap: 6px; }
.sv-desc { font-size: 15px; line-height: 1.7; color: var(--ax-text-2); margin: 0 0 22px; max-width: 520px; }
.sv-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 11px; font-size: 14.5px; font-weight: 700; cursor: pointer; border: none; font-family: var(--ax-font); color: #fff; transition: transform .2s var(--ax-ease),box-shadow .2s,background .2s; }
.sv-btn i { font-size: 18px; }
.sv-btn-play { background: var(--ax-gradient); box-shadow: var(--ax-shadow); }
.sv-btn-play:hover { transform: translateY(-2px); box-shadow: var(--ax-glow); }
.sv-btn-dark { background: rgba(20,29,46,.92); border: 1px solid var(--ax-border); }
.sv-btn-ghost { background: rgba(255,255,255,.08); border: 1px solid var(--ax-border); }
.sv-btn-dark:hover,.sv-btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.sv-about { background: var(--ax-glass); backdrop-filter: blur(16px); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); padding: 22px; box-shadow: var(--ax-shadow); }
.sv-about-h { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.sv-about-desc { font-size: 13px; line-height: 1.65; color: var(--ax-text-2); margin: 0 0 16px; }
.sv-about-facts { display: flex; flex-direction: column; gap: 0; }
.sv-af { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ax-border); font-size: 12.5px; }
.sv-af:last-child { border-bottom: none; }
.sv-af span { color: var(--ax-muted); }
.sv-af b { color: var(--ax-text-2); font-weight: 600; }
.sv-about-cta { display: flex; gap: 10px; margin-top: 16px; }
.sv-mini-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid var(--ax-border); color: var(--ax-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.sv-mini-btn:hover { background: rgba(255,255,255,.12); }
.sv-body { display: grid; grid-template-columns: 1fr 1.1fr 300px; gap: 26px; margin-top: 30px; }
.sv-sec-h { font-size: 18px; font-weight: 800; margin: 0; }
.sv-seasons-head { margin-bottom: 18px; }
.sv-season-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sv-stab { background: var(--ax-card); border: 1px solid var(--ax-border); color: var(--ax-text-2); border-radius: 9px; padding: 8px 15px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--ax-font); transition: .2s; }
.sv-stab:hover { border-color: rgba(255,42,42,.4); }
.sv-stab.active { background: var(--ax-gradient); color: #fff; border-color: transparent; }
.sv-eplist.d-none { display: none; }
.sv-ep { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: var(--ax-radius); cursor: pointer; transition: background .2s,border-color .2s; border: 1px solid transparent; }
.sv-ep:hover,.sv-ep.sel { background: var(--ax-card); border-color: var(--ax-border); }
.sv-ep.sel { border-color: rgba(255,42,42,.35); }
.sv-ep-num { font-size: 15px; font-weight: 800; color: var(--ax-muted); width: 18px; text-align: center; flex-shrink: 0; }
.sv-ep-thumb { position: relative; width: 108px; height: 64px; flex-shrink: 0; border-radius: 9px; background: var(--ax-bg-3) center/cover; display: grid; place-items: center; overflow: hidden; }
.sv-ep-thumb i { font-size: 24px; color: #fff; opacity: 0; transition: .2s; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.sv-ep:hover .sv-ep-thumb i { opacity: 1; }
.sv-ep-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--ax-gradient); }
.sv-ep.sel .sv-ep-prog { width: 55%; }
.sv-ep-info { flex: 1; min-width: 0; }
.sv-ep-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sv-ep-title { font-size: 14px; font-weight: 700; color: var(--ax-text); }
.sv-ep-dur { font-size: 12px; color: var(--ax-muted); flex-shrink: 0; }
.sv-ep-desc { font-size: 12px; color: var(--ax-muted); line-height: 1.5; margin: 4px 0 0; }
.sv-ep-dl { color: var(--ax-muted); font-size: 17px; flex-shrink: 0; padding: 6px; }
.sv-ep-dl:hover { color: var(--ax-text); }
.sv-now-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--ax-muted); margin-bottom: 6px; }
.sv-now-title { font-size: 26px; font-weight: 900; margin: 0 0 10px; letter-spacing: -.01em; }
.sv-now-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--ax-muted); margin-bottom: 16px; }
.sv-now-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sv-tag { background: var(--ax-card); border: 1px solid var(--ax-border); padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--ax-text-2); }
.sv-now-stage { position: relative; display: block; aspect-ratio: 16/9; border-radius: var(--ax-radius); overflow: hidden; background: var(--ax-card) center/cover; border: 1px solid var(--ax-border); }
.sv-now-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border: 2px solid rgba(255,255,255,.75); display: grid; place-items: center; font-size: 34px; color: #fff; transition: .2s; }
.sv-now-stage:hover .sv-now-play { transform: scale(1.08); background: var(--ax-gradient); border-color: transparent; box-shadow: var(--ax-glow); }
.sv-now-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.18); }
.sv-now-prog span { display: block; width: 40%; height: 100%; background: var(--ax-gradient); }
.sv-now-time { position: absolute; right: 12px; bottom: 12px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(3,7,18,.6); padding: 3px 8px; border-radius: 6px; }
.sv-now-desc { font-size: 14px; line-height: 1.7; color: var(--ax-text-2); margin: 16px 0; }
.sv-now-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sv-seeall { font-size: 12.5px; font-weight: 700; color: var(--ax-accent-2); }
.sv-yml { display: flex; flex-direction: column; gap: 12px; }
.sv-yml-card { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 11px; border: 1px solid transparent; transition: .2s; }
.sv-yml-card:hover { background: var(--ax-card); border-color: var(--ax-border); }
.sv-yml-poster { width: 54px; height: 78px; flex-shrink: 0; border-radius: 8px; background: var(--ax-bg-3) center/cover; }
.sv-yml-t { font-size: 13.5px; font-weight: 700; color: var(--ax-text); }
.sv-yml-m { font-size: 12px; color: var(--ax-muted); margin-top: 3px; }
.sv-empty { color: var(--ax-muted); font-size: 13.5px; padding: 14px 0; }
.sv-rate-card { background: var(--ax-glass); backdrop-filter: blur(16px); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); padding: 18px; margin-bottom: 20px; }
.sv-rate-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sv-rate-card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ax-muted); }
.sv-rate-card-avg { font-size: 22px; font-weight: 900; color: var(--ax-text); }
.sv-rate-card-stars { margin-bottom: 12px; }
.sv-rate-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ax-muted); margin: 10px 0 6px; }
.sv-rate-stars { display: flex; gap: 3px; }
@media (max-width: 1200px) { .sv-hero-grid { grid-template-columns: 1fr; } .sv-about { max-width: 420px; } .sv-body { grid-template-columns: 1fr 1fr; } .sv-side { grid-column: 1/-1; } .sv-yml { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); } }
@media (max-width: 768px) { .sv { padding: 12px 14px 90px; } .sv-hero-grid { padding: 22px 16px; min-height: 360px; } .sv-hero-fade { background: linear-gradient(0deg,var(--ax-bg) 6%,rgba(3,7,18,.5) 55%,rgba(3,7,18,.15) 100%); } .sv-body { grid-template-columns: 1fr; } .sv-ep-desc { display: none; } .sv-ep-thumb { width: 88px; height: 52px; } }

/* ============================================================
   §42  Genre browse page (.genre-*)
   ============================================================ */
.genre-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; padding-bottom: 3rem; }
.genre-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; background: #131928; background-size: cover; background-position: center; text-decoration: none; display: flex; align-items: flex-end; border: 1px solid rgba(255,255,255,.07); transition: transform .2s,box-shadow .2s; }
.genre-card:hover { transform: scale(1.03); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.genre-card-overlay { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(3,7,18,.9) 0%,rgba(3,7,18,.3) 50%,transparent 100%); }
.genre-card-body { position: relative; padding: 14px 16px; z-index: 1; }
.genre-card-name { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -.01em; margin-bottom: 2px; }
.genre-card-count { font-size: .75rem; color: rgba(255,255,255,.5); font-weight: 600; }
@media (max-width: 640px) { .genre-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } }

/* ============================================================
   §43  Blog post page (.post-*, #axReadProgress)
   ============================================================ */
#axReadProgress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999; background: linear-gradient(90deg,#FF2A2A,#E11D48); transition: width .1s linear; }
.post-hero { position: relative; min-height: clamp(320px,42vw,480px); background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.post-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(3,7,18,.97) 0%,rgba(3,7,18,.55) 45%,rgba(3,7,18,.1) 100%); }
.post-hero-content { position: relative; z-index: 1; padding: 36px 24px; width: 100%; max-width: 860px; margin: 0 auto; }
.post-header-plain { position: relative; overflow: hidden; background: linear-gradient(180deg,#040c1e 0%,#030712 100%); padding: 72px 24px 44px; text-align: center; }
.post-header-plain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 30px 30px; }
.post-header-plain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%,rgba(255,42,42,.16) 0%,transparent 55%); }
.post-header-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.post-category { display: inline-block; background: rgba(255,42,42,.14); color: #FF2A2A; font-size: 10px; font-weight: 800; padding: 3px 12px; border-radius: 20px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 14px; }
.post-title { font-size: clamp(22px,4vw,40px); font-weight: 900; line-height: 1.22; letter-spacing: -.03em; color: #fff; margin: 0 0 14px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255,255,255,.42); }
.post-meta i { margin-right: 5px; }
.post-wrap { background: #030712; padding: 0 24px; }
.post-article { max-width: 760px; margin: 0 auto; padding: 44px 0 80px; }
.post-lead { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.55); border-left: 3px solid #FF2A2A; padding-left: 18px; margin: 0 0 36px; font-style: italic; }
.post-prose { font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.72); margin-bottom: 40px; }
.post-prose h2 { font-size: clamp(18px,2.5vw,24px); font-weight: 800; letter-spacing: -.025em; margin: 36px 0 14px; color: #fff; }
.post-prose h3 { font-size: clamp(16px,2vw,20px); font-weight: 700; margin: 28px 0 12px; color: #e8eaf0; }
.post-prose p { margin-bottom: 20px; }
.post-prose a { color: #FF2A2A; text-decoration: underline; text-decoration-color: rgba(255,42,42,.35); text-underline-offset: 3px; }
.post-prose a:hover { text-decoration-color: #FF2A2A; }
.post-prose img { max-width: 100%; border-radius: 12px; margin: 20px 0; border: 1px solid rgba(255,255,255,.07); }
.post-prose ul,.post-prose ol { padding-left: 24px; margin-bottom: 20px; }
.post-prose li { margin-bottom: 8px; }
.post-prose blockquote { border-left: 3px solid #FF2A2A; padding: 12px 18px; margin: 24px 0; background: rgba(255,42,42,.05); border-radius: 0 10px 10px 0; font-style: italic; color: rgba(255,255,255,.5); }
.post-prose code { background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.post-prose pre { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 18px; overflow-x: auto; margin-bottom: 20px; }
.post-prose strong { color: #e8eaf0; }
.post-prose hr { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 32px 0; }
.post-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 28px; }
.post-share-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.post-share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.post-share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.09); color: rgba(255,255,255,.6); cursor: pointer; font-family: inherit; transition: .2s; }
.post-share-btn:hover { border-color: rgba(255,42,42,.35); color: #fff; background: rgba(255,42,42,.08); }
.post-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
.post-tags-icon { font-size: 13px; color: rgba(255,255,255,.25); flex-shrink: 0; }
.post-tag { display: inline-block; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.45); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; transition: .2s; }
.post-tag::before { content: '# '; }
.post-tag:hover { border-color: rgba(255,42,42,.3); color: rgba(255,255,255,.7); }
.post-back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 11px; font-size: 13.5px; font-weight: 700; background: transparent; border: 1.5px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); text-decoration: none; transition: .2s; }
.post-back-btn:hover { border-color: rgba(255,42,42,.35); color: #fff; }
@media (max-width: 767px) { .post-title { font-size: 22px; } .post-article { padding: 28px 0 80px; } .post-lead { font-size: 15px; } .post-prose { font-size: 15px; } }

/* ============================================================
   §44  Movie request form (.ax-contact-card, .ax-alert, .ax-form-*)
   ============================================================ */
.ax-contact-card { background: #111827; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 32px; }
.ax-alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; }
.ax-alert-success { background: rgba(255,42,42,.1); border: 1px solid rgba(255,42,42,.25); color: #FF2A2A; }
.ax-alert-danger { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #ef4444; }
.ax-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ax-form-group { margin-bottom: 18px; }
.ax-form-group label { display: block; font-size: 13px; font-weight: 500; color: #9ca3af; margin-bottom: 7px; }
.ax-input { width: 100%; background: #0d1424; border: 1px solid rgba(255,255,255,.1); color: #e8eaf0; border-radius: 9px; padding: 11px 14px; font-size: 14px; font-family: var(--ax-font); outline: none; transition: border-color .2s; resize: vertical; }
.ax-input:focus { border-color: #FF2A2A; box-shadow: 0 0 0 3px rgba(255,42,42,.1); }
@media (max-width: 600px) { .ax-form-row { grid-template-columns: 1fr; } }

/* ============================================================
   §45  Static pages (.sp-hero, .sp-body)
   ============================================================ */
/* #axReadProgress is defined in §43 and applies here too */
.sp-hero { position: relative; overflow: hidden; background: linear-gradient(180deg,#040c1e 0%,#030712 100%); text-align: center; padding: 64px 24px 44px; }
.sp-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 30px 30px; }
.sp-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%,rgba(255,42,42,.16) 0%,transparent 55%); }
.sp-hero-inner { position: relative; z-index: 1; }
.sp-hero-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,42,42,.1); border: 1px solid rgba(255,42,42,.2); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: #FF2A2A; margin-bottom: 18px; }
.sp-hero-title { font-size: clamp(26px,4vw,42px); font-weight: 900; letter-spacing: -.035em; color: #fff; margin: 0; }
.sp-wrap { background: #030712; padding: 0 24px; }
.sp-body { max-width: 820px; margin: 0 auto; padding: 44px 0 80px; font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,.68); }
.sp-body h2 { font-size: clamp(18px,2.5vw,24px); font-weight: 800; letter-spacing: -.025em; color: #fff; margin: 36px 0 14px; }
.sp-body h3 { font-size: clamp(15px,2vw,19px); font-weight: 700; color: #e8eaf0; margin: 28px 0 10px; }
.sp-body p { margin-bottom: 18px; }
.sp-body a { color: #FF2A2A; text-decoration: underline; text-decoration-color: rgba(255,42,42,.3); text-underline-offset: 3px; }
.sp-body a:hover { text-decoration-color: #FF2A2A; }
.sp-body ul,.sp-body ol { padding-left: 24px; margin-bottom: 18px; }
.sp-body li { margin-bottom: 8px; }
.sp-body strong { color: #e8eaf0; font-weight: 700; }
.sp-body blockquote { border-left: 3px solid #FF2A2A; padding: 12px 18px; margin: 24px 0; background: rgba(255,42,42,.05); border-radius: 0 10px 10px 0; font-style: italic; color: rgba(255,255,255,.5); }
.sp-body table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; }
.sp-body th,.sp-body td { padding: 10px 14px; border: 1px solid rgba(255,255,255,.07); text-align: left; }
.sp-body th { background: rgba(255,255,255,.04); font-weight: 700; color: #e8eaf0; }
.sp-body hr { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 32px 0; }
.sp-body code { background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
@media (max-width: 767px) { .sp-hero { padding: 48px 20px 32px; } .sp-body { padding: 28px 0 80px; font-size: 15px; } }

/* ============================================================
   §46  Events calendar page (.ev-*)
   ============================================================ */
.ev-hero { background: linear-gradient(135deg,#050812,#0B111D 48%,#030712); padding: 96px 0 44px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: center; position: relative; overflow: hidden; }
.ev-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 280px at 50% 0%,rgba(225,29,72,.16),transparent 60%); pointer-events: none; }
.ev-hero-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 0 24px; }
.ev-hero-title { font-size: clamp(2rem,5vw,3.2rem); font-weight: 900; letter-spacing: -.03em; margin: 8px 0 10px; line-height: 1.05; }
.ev-hero-sub { font-size: 15px; color: rgba(255,255,255,.5); margin: 0; }
.ev-wrap { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem 5rem; }
.ev-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; }
.ev-card { text-decoration: none; color: inherit; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; transition: transform .2s,box-shadow .2s; display: flex; flex-direction: column; }
.ev-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.ev-card.is-live { border-color: rgba(239,68,68,.4); box-shadow: 0 0 0 1px rgba(239,68,68,.25); }
.ev-card-thumb { aspect-ratio: 16/9; background: #0d1525 center/cover no-repeat; position: relative; }
.ev-card-ph { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(255,255,255,.15); }
.ev-card-body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.ev-card-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ev-type-badge { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .06em; }
.ev-type-premiere { background: rgba(99,102,241,.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.ev-type-ppv { background: rgba(245,158,11,.2); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.ev-type-live { background: rgba(239,68,68,.2); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.ev-live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; color: #ef4444; letter-spacing: .05em; }
.ev-pulse { width: 7px; height: 7px; background: #ef4444; border-radius: 50%; animation: evPulse 1.2s infinite; }
@keyframes evPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.5); } }
.ev-countdown { font-size: .75rem; color: rgba(255,255,255,.5); font-weight: 600; }
.ev-card-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.25; }
.ev-card-date { font-size: .78rem; color: rgba(255,255,255,.45); margin: 0; }
.ev-price { font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; align-self: flex-start; background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.25); }
.ev-price-prem { background: rgba(255,42,42,.12); color: #fca5a5; border-color: rgba(255,42,42,.25); }
.ev-price-free { background: rgba(16,185,129,.1); color: #6ee7b7; border-color: rgba(16,185,129,.2); }
.ev-empty { text-align: center; padding: 5rem 2rem; color: rgba(255,255,255,.3); }
.ev-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: .3; }
@media (max-width: 640px) { .ev-list { grid-template-columns: 1fr; } .ev-wrap { padding: 1.5rem 1rem 4rem; } }

/* ============================================================
   §47  Event detail page (.evd-*)
   ============================================================ */
/* Dynamic :root{--evd-accent} stays inline in the view */
.evd-hero { position: relative; min-height: 360px; background: #050812 center/cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; }
.evd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg,#030712 5%,rgba(3,7,18,.7) 50%,rgba(3,7,18,.25) 100%); }
.evd-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 2.5rem; width: 100%; }
.evd-breadcrumb { font-size: .75rem; color: rgba(255,255,255,.4); margin-bottom: .75rem; display: flex; align-items: center; gap: .4rem; }
.evd-breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; }
.evd-breadcrumb i { font-size: .65rem; }
.evd-badges { display: flex; gap: 8px; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.evd-title { font-size: clamp(1.6rem,4vw,3rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 .4rem; line-height: 1.1; }
.evd-sub { font-size: .9rem; color: rgba(255,255,255,.5); margin: 0 0 .75rem; max-width: 600px; }
.evd-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.45); }
.evd-meta span { display: flex; align-items: center; gap: .35rem; }
.evd-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 5rem; }
.evd-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
.evd-main { display: flex; flex-direction: column; gap: 1.25rem; }
.evd-countdown-box { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; }
.evd-trailer-label { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
.evd-starts-label { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; margin: .5rem 0 1rem; }
.evd-timer { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.evd-timer-unit { text-align: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: .75rem 1rem; min-width: 72px; }
.evd-timer-val { display: block; font-size: 2.4rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--evd-accent); line-height: 1; }
.evd-timer-lbl { display: block; font-size: .65rem; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; }
.evd-timer-sep { font-size: 2rem; font-weight: 900; color: rgba(255,255,255,.2); margin: 0 -4px; align-self: center; padding-bottom: 1rem; }
.evd-access-block { margin-top: 1.5rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 2rem; text-align: center; color: rgba(255,255,255,.6); }
.evd-access-block p { margin: .5rem 0 1.25rem; font-size: .95rem; }
.evd-buy-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .75rem 1.75rem; background: linear-gradient(135deg,#FF2A2A,#e11d48); color: #fff; font-weight: 800; font-size: 1rem; border-radius: 10px; border: 0; cursor: pointer; text-decoration: none; transition: opacity .2s; }
.evd-buy-btn:hover { opacity: .9; color: #fff; }
.evd-lock-icon { font-size: 3rem; color: rgba(255,255,255,.25); display: block; margin-bottom: .75rem; }
.evd-player-wrap { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.evd-player { width: 100%; height: 100%; display: block; }
.evd-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.evd-viewer-bar { display: flex; align-items: center; gap: .75rem; font-size: .8rem; color: rgba(255,255,255,.5); padding: .5rem .25rem; }
.evd-no-stream,.evd-ended-box { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 4rem 2rem; text-align: center; color: rgba(255,255,255,.4); }
.evd-no-stream i,.evd-ended-box i { font-size: 2.5rem; display: block; margin-bottom: 1rem; opacity: .4; }
.evd-ended-box h3 { color: rgba(255,255,255,.7); font-size: 1.2rem; margin: .5rem 0; }
.evd-desc-box { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.25rem 1.5rem; }
.evd-desc-box h4 { font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 .65rem; }
.evd-desc-box p { font-size: .9rem; color: rgba(255,255,255,.65); line-height: 1.7; margin: 0; }
.evd-chat { position: sticky; top: 90px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 520px; }
.evd-chat-head { padding: .75rem 1rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.7); }
.evd-chat-log { flex: 1; overflow-y: auto; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .45rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }
.evd-msg { display: flex; gap: .5rem; align-items: flex-start; }
.evd-msg-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-top: 2px; }
.evd-msg-body { flex: 1; min-width: 0; }
.evd-msg-name { font-size: .72rem; font-weight: 700; color: var(--ax-accent); margin-right: .4rem; }
.evd-msg-text { font-size: .8rem; color: rgba(255,255,255,.75); word-break: break-word; }
.evd-chat-form { display: flex; gap: .5rem; padding: .6rem .75rem; border-top: 1px solid rgba(255,255,255,.07); }
.evd-chat-form .ax-input { flex: 1; padding: .45rem .75rem; font-size: .82rem; border-radius: 8px; }
.evd-chat-send { background: var(--evd-accent); color: #fff; border: 0; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s; flex-shrink: 0; }
.evd-chat-send:hover { opacity: .85; }
@media (max-width: 900px) { .evd-layout { grid-template-columns: 1fr; } .evd-chat { height: 400px; position: relative; top: 0; } }
@media (max-width: 640px) { .evd-wrap { padding: 1.25rem 1rem 4rem; } .evd-timer-unit { min-width: 60px; padding: .6rem .75rem; } .evd-timer-val { font-size: 1.8rem; } }

/* ============================================================
   §48  Offline / service worker fallback page (.ax-offline-*)
   ============================================================ */
.ax-offline-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.ax-offline-inner { max-width: 480px; }
.ax-offline-icon { font-size: 64px; margin-bottom: 20px; color: #374151; display: block; }
.ax-offline-icon i { font-size: 72px; }
.ax-offline-title { font-size: clamp(24px,4vw,32px); font-weight: 800; margin: 0 0 12px; }
.ax-offline-text { font-size: 15px; color: #7c869e; margin: 0 0 32px; line-height: 1.7; }
.ax-offline-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.ax-offline-cached { background: #111827; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 20px; text-align: left; }
.ax-offline-cached-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #4b5563; margin-bottom: 12px; }
#cachedLinks { list-style: none; padding: 0; margin: 0; }
#cachedLinks li a { display: block; padding: 6px 0; font-size: 13px; color: #9ca3af; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.05); }
#cachedLinks li a:hover { color: #FF2A2A; }

/* ============================================================
   §49  Ad zone partial (.ax-ad-*)
   ============================================================ */
.ax-ad-zone { text-align: center; margin: 14px 0; min-height: 0; }
.ax-ad-zone--header { margin: 8px 0 16px; padding: 0 16px; }
body.ax-page-home main > .ax-ad-zone--header { position: relative; z-index: 5; max-width: 980px; margin: calc(var(--ax-navbar-h, 76px) + 12px) auto 18px; padding: 0 18px; }
body.ax-page-home main > .ax-ad-zone--header .ax-ad-unit { display: flex; justify-content: center; }
body.ax-page-home main > .ax-ad-zone--header .ax-ad-unit > * { max-width: 100%; }
body.ax-page-home main > .ax-ad-zone--header img { margin: 0 auto; }
.ax-ad-zone--footer { margin: 32px 0 16px; padding: 0 16px; }
.ax-ad-zone--sidebar { margin: 0; padding: 0; }
.ax-ad-zone--before_player,.ax-ad-zone--after_player { margin: 14px 0; padding: 0 16px; }
.ax-ad-zone--between_content { margin: 24px 0; padding: 0 16px; }
.ax-ad-zone--popup { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ax-ad-popup-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 36px; cursor: pointer; }
.ax-ad-popup-close:hover { background: rgba(255,255,255,.22); }
.ax-ad-unit { display: block; width: 100%; max-width: 100%; text-decoration: none; }
.ax-ad-unit img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.ax-ad-label { display: block; font-size: 10px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.ax-ad-zone .adsbygoogle { display: block; width: 100%; min-height: 90px; }
.ax-ad-zone--sidebar .adsbygoogle { min-height: 250px; }
.ax-ad-zone--rail_bottom .adsbygoogle { min-height: 600px; }
.ax-ad-zone--popup .adsbygoogle { min-height: 250px; }
.ax-ad-zone .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ax-ad-zone--collapsed { display: none !important; margin: 0 !important; padding: 0 !important; }
body > ins.adsbygoogle[data-anchor-status],body > ins.adsbygoogle.adsbygoogle-noablate { display: none !important; }
@media (max-width: 767px) { .ax-ad-zone--between_content,.ax-ad-zone--sidebar { margin: 14px 0; } }

/* ============================================================
   §50  Video player partial (.ax-vjs-*, .ax-player-*, .ax-skip-*, etc.)
   ============================================================ */
.ax-vjs-shell { position: relative; width: 100%; max-width: 1600px; aspect-ratio: 16/9; background: #000; overflow: hidden; margin: 0 auto; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.ax-pip-close { display: none; position: absolute; top: 6px; right: 6px; z-index: 40; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.62); color: #fff; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); }
.ax-pip-close:hover { background: #FF2A2A; }
.ax-vjs-shell.ax-pip-stuck { position: fixed !important; bottom: 18px !important; right: 18px !important; left: auto !important; top: auto !important; width: clamp(300px,22vw,400px) !important; height: auto !important; aspect-ratio: 16/9 !important; max-width: calc(100vw - 36px) !important; max-height: none !important; z-index: 9990; border-radius: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.58); animation: axpipin .25s ease; }
.ax-vjs-shell.ax-pip-stuck .ax-pip-close { display: flex; }
@keyframes axpipin { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.ax-vjs-shell.ax-pip-stuck .vjs-control-bar { height: 44px !important; padding: 15px 8px 6px !important; gap: 0 !important; }
.ax-vjs-shell.ax-pip-stuck .vjs-progress-control,.ax-vjs-shell.ax-pip-stuck .vjs-control.vjs-progress-control { left: 9px !important; right: 9px !important; top: 4px !important; height: 12px !important; }
.ax-vjs-shell.ax-pip-stuck .vjs-control { width: 28px !important; height: 28px !important; }
.ax-vjs-shell.ax-pip-stuck .vjs-button > .vjs-icon-placeholder:before { line-height: 28px !important; font-size: 17px !important; }
.ax-vjs-shell.ax-pip-stuck .vjs-time-control,.ax-vjs-shell.ax-pip-stuck .vjs-playback-rate { display: none !important; }
.ax-vjs-shell.ax-pip-stuck .vjs-volume-panel { width: 30px !important; min-width: 30px !important; }
.ax-vjs-shell.ax-pip-stuck .vjs-volume-panel:hover,.ax-vjs-shell.ax-pip-stuck .vjs-volume-panel.vjs-volume-panel-horizontal:hover { width: 86px !important; }
.ax-vjs-shell.ax-pip-stuck .ax-player-quality { height: 28px; margin-left: auto; }
.ax-vjs-shell.ax-pip-stuck .ax-player-quality > button { height: 26px; min-width: 34px; padding: 0 7px; font-size: 0; }
.ax-vjs-shell.ax-pip-stuck .ax-player-quality > button span { display: none; }
.ax-vjs-shell.ax-pip-stuck .ax-player-quality-menu { bottom: 32px; }
.ax-vjs-shell.ax-pip-stuck .vjs-big-play-button { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.ax-vjs-shell.ax-pip-stuck .ax-player-watermark,.ax-vjs-shell.ax-pip-stuck .ax-player-share,.ax-vjs-shell.ax-pip-stuck .ax-player-share-panel { display: none !important; }
@media (max-width: 900px) { .ax-vjs-shell.ax-pip-stuck { position: relative !important; bottom: auto; right: auto; width: 100%; max-width: 1600px; box-shadow: none; animation: none; } [data-context-pip],.ax-pip-close { display: none !important; } }
.ax-vjs-shell .video-js { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; background: #000; }
.ax-vjs-shell .video-js.vjs-fluid,.ax-vjs-shell .video-js.vjs-16-9 { padding-top: 0 !important; height: 100% !important; }
.ax-vjs-shell .vjs-tech { object-fit: contain !important; background: #000; }
.ax-vjs-shell .vjs-poster { display: none !important; background: none !important; }
.ax-vjs-shell .vjs-big-play-button { background: linear-gradient(135deg,#ff2a2a,#e11d48) !important; border: 0 !important; border-radius: 50% !important; width: 72px !important; height: 72px !important; line-height: 72px !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; margin: 0 !important; box-shadow: 0 18px 46px rgba(255,42,42,.34) !important; }
.ax-vjs-shell .vjs-big-play-button:hover { background: linear-gradient(135deg,#ff4545,#f43f5e) !important; transform: translate(-50%,-50%) scale(1.04) !important; }
.ax-vjs-skin-green { --vjs-theme-primary: #22c55e; }
.ax-vjs-skin-blue { --vjs-theme-primary: #38bdf8; }
.ax-vjs-skin-red { --vjs-theme-primary: #ef4444; }
.ax-vjs-skin-yellow { --vjs-theme-primary: #facc15; }
.ax-vjs-skin-purple { --vjs-theme-primary: #a855f7; }
.ax-vjs-shell .vjs-control-bar { display: flex !important; visibility: visible !important; opacity: 1 !important; height: 70px !important; padding: 23px 14px 10px !important; background: linear-gradient(to top,rgba(0,0,0,.94),rgba(0,0,0,.68) 58%,rgba(0,0,0,0)) !important; align-items: flex-end !important; gap: 2px !important; transition: none !important; }
.ax-vjs-shell.vjs-user-inactive.vjs-playing .vjs-control-bar { visibility: visible !important; opacity: 1 !important; }
.ax-vjs-shell .vjs-progress-control { position: absolute !important; left: 16px !important; right: 16px !important; top: 7px !important; width: auto !important; height: 16px !important; display: flex !important; align-items: center !important; }
.ax-vjs-shell .vjs-progress-holder { height: 5px !important; margin: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.38) !important; }
.ax-vjs-shell .vjs-progress-control:hover .vjs-progress-holder { height: 7px !important; }
.ax-vjs-shell .vjs-play-progress { background: #ff0033 !important; border-radius: 999px !important; }
.ax-vjs-shell .vjs-load-progress,.ax-vjs-shell .vjs-load-progress div { background: rgba(255,255,255,.45) !important; border-radius: 999px !important; }
.ax-vjs-shell .vjs-play-progress:before { font-size: 16px !important; color: #ff0033 !important; right: -8px !important; top: -5px !important; text-shadow: 0 0 0 #ff0033 !important; }
.ax-vjs-shell .vjs-volume-level { background: #fff !important; }
.ax-vjs-shell .vjs-control { flex: 0 0 auto !important; width: 38px !important; height: 38px !important; border-radius: 999px !important; margin: 0 !important; color: #fff !important; }
.ax-vjs-shell .vjs-control.vjs-progress-control { position: absolute !important; left: 16px !important; right: 16px !important; top: 7px !important; width: auto !important; height: 16px !important; display: flex !important; align-items: center !important; flex: none !important; border-radius: 0 !important; margin: 0 !important; }
.ax-vjs-shell .vjs-button:hover { background: rgba(255,255,255,.18) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
.ax-vjs-shell .vjs-button > .vjs-icon-placeholder:before { line-height: 38px !important; font-size: 22px !important; }
.ax-vjs-shell .vjs-volume-panel { width: 42px !important; min-width: 42px !important; }
.ax-vjs-shell .vjs-volume-panel:hover,.ax-vjs-shell .vjs-volume-panel.vjs-volume-panel-horizontal:hover { width: 116px !important; }
.ax-vjs-shell .vjs-time-control { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 38px !important; line-height: 38px !important; padding: 0 2px !important; font-size: 13px !important; font-weight: 700 !important; color: #fff !important; display: block !important; }
.ax-vjs-shell .vjs-duration { display: block !important; }
.ax-vjs-shell .vjs-time-divider { display: block !important; min-width: 8px !important; padding: 0 !important; text-align: center !important; }
.ax-vjs-shell .vjs-remaining-time { display: none !important; }
.ax-vjs-shell .vjs-playback-rate { width: 40px !important; }
.ax-vjs-shell .vjs-playback-rate .vjs-playback-rate-value { line-height: 38px !important; font-size: 13px !important; font-weight: 800 !important; text-align: center !important; }
.ax-vjs-shell .vjs-fullscreen-control { width: 38px !important; }
.ax-vjs-shell .vjs-quality-selector,.ax-vjs-shell .vjs-http-source-selector,.ax-vjs-shell .vjs-source-selector,.ax-vjs-shell .vjs-resolution-button,.ax-vjs-shell .vjs-quality-menu-button,.ax-vjs-shell .vjs-icon-hd { display: none !important; }
.ax-vjs-shell .vjs-menu-button-popup .vjs-menu { bottom: 34px !important; }
.ax-vjs-shell .vjs-subs-caps-button .vjs-menu { bottom: 54px !important; right: 0 !important; }
.ax-vjs-shell .vjs-menu-content { background: rgba(18,18,18,.94) !important; border-radius: 8px !important; padding: 6px !important; }
.ax-vjs-shell .vjs-menu li { border-radius: 5px !important; text-transform: none !important; }
.ax-vjs-shell .vjs-text-track-display { inset: auto 0 74px 0 !important; height: auto !important; pointer-events: none !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; text-align: center !important; padding: 0 4% !important; }
.ax-vjs-shell .vjs-text-track-display > div,.ax-vjs-shell .vjs-text-track-cue { position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 auto !important; width: 100% !important; max-width: min(86%,980px) !important; text-align: center !important; transform: none !important; white-space: normal !important; }
.ax-vjs-shell .vjs-text-track-display > div > div,.ax-vjs-shell .vjs-text-track-cue > div { display: inline !important; width: auto !important; max-width: 100% !important; font-size: clamp(15px,1.65vw,24px) !important; line-height: 1.22 !important; background: rgba(0,0,0,.66) !important; padding: 3px 9px !important; border-radius: 3px !important; box-decoration-break: clone !important; -webkit-box-decoration-break: clone !important; text-shadow: 0 1px 2px #000 !important; white-space: pre-wrap !important; text-align: center !important; }
.ax-vjs-shell.ax-vjs-live .vjs-text-track-display { bottom: 76px !important; padding: 0 5% !important; }
.ax-vjs-shell.ax-vjs-live .vjs-text-track-display > div,.ax-vjs-shell.ax-vjs-live .vjs-text-track-cue { max-width: 74% !important; }
.ax-vjs-shell.ax-vjs-live .vjs-text-track-display > div > div,.ax-vjs-shell.ax-vjs-live .vjs-text-track-cue > div { font-size: clamp(14px,1.45vw,21px) !important; line-height: 1.2 !important; padding: 2px 8px !important; }
.ax-player-watermark { position: absolute; z-index: 5; opacity: .86; display: block; max-width: 18%; pointer-events: auto; }
.ax-player-watermark img { display: block; max-width: 150px; max-height: 54px; object-fit: contain; }
.ax-player-watermark--top-left { top: 18px; left: 18px; }
.ax-player-watermark--top-right,.ax-player-watermark--right-top { top: 18px; right: 18px; }
.ax-player-watermark--bottom-left { bottom: 58px; left: 18px; }
.ax-player-watermark--bottom-right,.ax-player-watermark--right-bottom { bottom: 58px; right: 18px; }
.ax-player-watermark--center { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.ax-player-share { position: absolute; right: 16px; top: 16px; z-index: 6; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.ax-player-watermark--top-right + .ax-player-share,.ax-player-watermark--right-top + .ax-player-share { top: 78px; }
.ax-player-share:hover { background: rgba(255,255,255,.92); color: #050505; }
.ax-player-share.copied { background: #FF2A2A; color: #041014; }
.ax-player-share-panel { position: absolute; right: 18px; top: 62px; z-index: 9; width: min(360px,calc(100% - 36px)); background: rgba(18,18,18,.96); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 18px 45px rgba(0,0,0,.35); padding: 12px; display: none; color: #fff; backdrop-filter: blur(14px); }
.ax-player-share-panel.open { display: block; }
.ax-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.ax-share-head button { border: 0; background: transparent; color: #9ca3af; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.ax-share-input { width: 100%; height: 36px; border: 1px solid rgba(255,255,255,.12); background: #070b16; color: #e8eaf0; border-radius: 6px; padding: 0 10px; font-size: 12px; margin-bottom: 10px; }
.ax-share-actions { display: flex; gap: 8px; }
.ax-share-actions button { flex: 1; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.08); color: #e8eaf0; font-size: 12px; font-weight: 700; }
.ax-share-actions button:hover { background: #fff; color: #050505; }
.ax-player-quality { position: absolute; right: 86px; bottom: 15px; z-index: 7; font-family: inherit; }
.ax-vjs-shell .vjs-control-bar .ax-player-quality { position: relative; right: auto; bottom: auto; z-index: 8; flex: 0 0 auto; height: 38px; margin-left: auto; display: flex; align-items: center; }
.ax-player-quality > button { height: 34px; min-width: 58px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; box-shadow: none; backdrop-filter: blur(10px); }
.ax-player-quality > button i { font-size: 15px; line-height: 1; }
.ax-player-quality > button span { font-size: 12px; color: #fff; line-height: 1; }
.ax-player-quality > button:hover { background: rgba(255,255,255,.24); }
.ax-player-quality-menu { position: absolute; right: 0; bottom: 42px; min-width: 140px; background: rgba(18,18,18,.96); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 6px; display: none; box-shadow: 0 14px 34px rgba(0,0,0,.38); backdrop-filter: blur(14px); }
.ax-player-quality.open .ax-player-quality-menu { display: block; }
.ax-player-quality-menu button { display: block; width: 100%; border: 0; background: transparent; color: #d1d5db; text-align: left; border-radius: 5px; padding: 7px 9px; font-size: 12px; font-weight: 700; }
.ax-player-quality-menu button.active,.ax-player-quality-menu button:hover { background: rgba(255,255,255,.14); color: #fff; }
.ax-seek-preview { position: absolute; left: 16px; bottom: 72px; z-index: 12; width: 214px; transform: translateX(-50%); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s ease,visibility .12s ease; font-family: inherit; }
.ax-seek-preview.show { opacity: 1; visibility: visible; }
.ax-seek-preview-hint { width: max-content; max-width: 214px; margin: 0 auto 7px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.68); color: #fff; font-size: 11px; font-weight: 800; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.ax-seek-preview-card { position: relative; width: 214px; aspect-ratio: 16/9; background: #05070d; border: 2px solid rgba(255,255,255,.92); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.48); }
.ax-seek-preview-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-seek-preview-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #8d98b3; font-size: 32px; background: linear-gradient(135deg,#111827,#05070d); }
.ax-seek-preview-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.66),transparent 46%); }
.ax-seek-preview-card span { position: absolute; right: 8px; bottom: 7px; z-index: 2; min-width: 42px; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 900; text-align: center; }
.ax-player-context-menu { position: absolute; z-index: 20; width: 310px; max-width: calc(100% - 24px); display: none; background: rgba(18,18,18,.94); color: #fff; border-radius: 10px; padding: 10px 0; box-shadow: 0 20px 50px rgba(0,0,0,.48); backdrop-filter: blur(16px); }
.ax-player-context-menu.open { display: block; }
.ax-player-context-menu button { width: 100%; height: 40px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; gap: 15px; padding: 0 18px; font-size: 14px; font-weight: 700; text-align: left; }
.ax-player-context-menu button:hover { background: rgba(255,255,255,.12); }
.ax-player-context-menu i { font-size: 18px; width: 22px; text-align: center; }
.ax-player-context-menu button.is-on i,.ax-player-context-menu button.is-on span { color: #ff0033; }
.ax-subtitle-translate { position: absolute; left: 14px; bottom: 48px; z-index: 7; display: flex; align-items: center; gap: 8px; background: rgba(10,13,26,.8); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 7px 9px; color: #fff; font-size: 11px; }
.ax-subtitle-translate label { display: flex; align-items: center; gap: 8px; margin: 0; }
.ax-subtitle-translate select { height: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: #070b16; color: #e8eaf0; font-size: 12px; }
.ax-subtitle-translate [data-subtitle-translate-status] { color: #9ca3af; }
.ax-embed-player { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
.ax-embed-player iframe,.ax-embed-player object,.ax-embed-player embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ax-skip-btn { position: absolute; right: 22px; bottom: 86px; z-index: 15; display: flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px; border: 2px solid rgba(255,255,255,.75); background: rgba(10,14,28,.72); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .03em; cursor: pointer; backdrop-filter: blur(10px); transition: .18s; font-family: inherit; }
.ax-skip-btn:hover { background: rgba(255,255,255,.92); color: #050505; border-color: transparent; }
.ax-skip-btn i { font-size: 15px; }
@media (max-width: 700px) { .ax-skip-btn { right: 12px; bottom: 74px; padding: 7px 14px; font-size: 12px; } }
.ax-chapter-name { position: absolute; left: 16px; top: 16px; z-index: 14; padding: 4px 12px; border-radius: 6px; background: rgba(0,0,0,.62); color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); pointer-events: none; opacity: 0; transition: opacity .25s ease; max-width: 60%; }
.ax-chapter-name.show { opacity: 1; }
.ax-chapter-dot { position: absolute; top: 50%; transform: translateY(-50%); width: 3px; height: 11px; border-radius: 1px; background: rgba(255,255,255,.55); pointer-events: none; z-index: 3; }
.ax-sub-style { position: absolute; left: 14px; bottom: 50px; z-index: 16; background: rgba(10,13,26,.88); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #d1d5db; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; backdrop-filter: blur(14px); }
.ax-sub-style[hidden] { display: none; }
.ax-sub-style-label { font-weight: 800; color: #fff; margin-right: 4px; }
.ax-sub-style label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ax-sub-style input[type=range] { width: 70px; accent-color: #FF2A2A; }
.ax-sub-style span[data-sub-size-val],.ax-sub-style span[data-sub-bg-val] { min-width: 34px; font-size: 10px; color: #9ca3af; }
.ax-sub-style button { padding: 3px 9px; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #9ca3af; font-size: 11px; cursor: pointer; }
.ax-sub-style button:hover { background: rgba(255,255,255,.12); color: #fff; }
.ax-vjs-seek .vjs-icon-placeholder { font-size: 11px; font-weight: 800; line-height: 30px; }
@media (max-width: 900px) { .ax-vjs-shell .vjs-time-divider,.ax-vjs-shell .vjs-duration { display: none !important; } .ax-vjs-shell .vjs-volume-panel:hover,.ax-vjs-shell .vjs-volume-panel.vjs-volume-panel-horizontal:hover { width: 42px !important; } }
@media (max-width: 700px) { .ax-vjs-shell { border-left: 0; border-right: 0; } .ax-vjs-shell .vjs-big-play-button { width: 58px !important; height: 58px !important; line-height: 58px !important; } .ax-vjs-shell .vjs-control-bar { height: 58px !important; padding: 18px 8px 8px !important; gap: 0 !important; } .ax-vjs-shell .vjs-progress-control,.ax-vjs-shell .vjs-control.vjs-progress-control { left: 10px !important; right: 10px !important; top: 5px !important; height: 13px !important; } .ax-vjs-shell .vjs-control { width: 32px !important; height: 32px !important; } .ax-vjs-shell .vjs-button > .vjs-icon-placeholder:before { line-height: 32px !important; font-size: 18px !important; } .ax-vjs-shell .vjs-current-time { font-size: 11px !important; padding: 0 1px !important; } .ax-vjs-shell .vjs-playback-rate { display: none !important; } .ax-player-watermark img { max-width: 82px; max-height: 34px; } .ax-player-share { right: 10px; top: 10px; width: 32px; height: 32px; } .ax-subtitle-translate { left: 8px; right: 8px; bottom: 56px; } .ax-player-quality { right: 48px; } .ax-vjs-shell .vjs-control-bar .ax-player-quality { right: auto; height: 32px; } .ax-player-quality > button { height: 30px; min-width: 42px; padding: 0 8px; } .ax-player-quality > button span { display: none; } .ax-player-quality-menu { bottom: 36px; min-width: 120px; } .ax-player-share-panel { right: 8px; width: calc(100% - 16px); } .ax-player-context-menu { width: 280px; } .ax-seek-preview { width: 160px; bottom: 66px; } .ax-seek-preview-card { width: 160px; } .ax-seek-preview-hint { max-width: 160px; font-size: 10px; } }
@media (max-width: 420px) { .ax-vjs-shell .vjs-current-time { display: none !important; } .ax-vjs-shell .vjs-fullscreen-control { width: 30px !important; } .ax-vjs-shell .vjs-control { width: 30px !important; } .ax-vjs-shell .vjs-volume-panel { width: 30px !important; min-width: 30px !important; } .ax-player-quality > button { min-width: 34px; padding: 0 7px; } }