/* ============================================================
   9Anime Theme — styles.css
   ============================================================ */

/* ── Design tokens ────────────────────────────────────────── */
:root {
    --color-primary:        #7c3aed;
    --color-primary-hover:  #6d28d9;
    --color-primary-light:  #8b5cf6;
    --color-primary-bg:     rgba(124,58,237,.15);

    --color-bg:             #0d0d0d;
    --color-bg-2:           #141414;
    --color-bg-card:        #1a1a1a;
    --color-bg-elevated:    #1e1e1e;
    --color-bg-overlay:     rgba(0,0,0,.85);
    --color-border:         #2a2a2a;

    --color-text:           #e0e0e0;
    --color-text-muted:     #888;
    --color-text-dim:       #bbb;
    --color-white:          #fff;

    --color-badge-hd:       #7c3aed;
    --color-badge-sub:      #2563eb;
    --color-badge-dub:      #059669;
    --color-badge-ep:       rgba(0,0,0,.7);

    --header-height:        56px;
    --container-max:        1400px;
    --sidebar-width:        300px;

    --radius-sm:            4px;
    --radius-md:            6px;
    --radius-lg:            10px;
    --radius-pill:          999px;

    --font-base:            'Nunito', Arial, sans-serif;
    --font-size-xs:         11px;
    --font-size-sm:         12px;
    --font-size-base:       14px;
    --font-size-md:         16px;
    --font-size-lg:         20px;
    --font-size-xl:         28px;

    --transition-fast:      all .15s ease;
    --transition-normal:    all .3s ease;

    --shadow-card:          0 2px 8px rgba(0,0,0,.5);
    --shadow-elevated:      0 4px 20px rgba(0,0,0,.7);
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--font-size-base); scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary-light); }

img { max-width: 100%; vertical-align: middle; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-white); font-weight: 700; }

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

button { cursor: pointer; border: none; background: none; }

/* ── Skip link ────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--color-primary);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top .2s;
    font-size: var(--font-size-sm);
}
.skip-link:focus { top: 1rem; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-2); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── Layout wrapper ────────────────────────────────────────── */
#wrapper { min-height: 100vh; display: flex; flex-direction: column; }
#main-content { flex: 1; }

.container-fluid {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}

/* ── HEADER ──────────────────────────────────────────────── */
#header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    background: var(--color-bg-2);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* Desktop nav */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.header-nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
}
.header-nav-link i { font-size: 11px; }
.header-nav-link:hover,
.header-nav-link.active { color: var(--color-primary-light); background: var(--color-primary-bg); }

/* Search + EN/JP wrapper */
.header-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    max-width: 600px;
    margin: 0 auto;
}
.header-enjp { flex-shrink: 0; }

/* Hamburger (always visible) */
.header-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    cursor: pointer;
}
.hbg-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text-muted);
    border-radius: 2px;
    transition: var(--transition-fast);
}
.header-hamburger:hover .hbg-bar { background: var(--color-white); }

/* Hamburger → X animation when menu is open */
.header-hamburger.open .hbg-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-hamburger.open .hbg-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header-hamburger.open .hbg-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    text-decoration: none;
}
.header-logo img { height: 36px; width: auto; }
.header-logo .logo-text {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-white);
    letter-spacing: -.5px;
}
.header-logo .logo-text span { color: var(--color-primary-light); }

.header-search {
    flex: 1;
    min-width: 0;
    max-width: 480px;
    position: relative;
}
.header-search input {
    width: 100%;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 7px 40px 7px 16px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    outline: none;
    transition: var(--transition-fast);
}
.header-search input::placeholder { color: var(--color-text-muted); }
.header-search input:focus { border-color: var(--color-primary); background: #222; }
.header-search button {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    transition: var(--transition-fast);
}
.header-search button:hover { color: var(--color-primary-light); }


/* Mobile nav overlay */
#mobile-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 1099;
}
#mobile-overlay.active { display: block; }

#mobile-menu {
    position: fixed;
    top: 0; left: -280px;
    width: 280px; height: 100vh;
    background: var(--color-bg-2);
    border-right: 1px solid var(--color-border);
    z-index: 1100;
    overflow-y: auto;
    transition: left .3s ease;
    padding: 20px 0;
}
#mobile-menu.active { left: 0; }

.mobile-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
}
.mobile-menu-close {
    color: var(--color-text-muted);
    font-size: 20px;
    transition: var(--transition-fast);
}
.mobile-menu-close:hover { color: var(--color-white); }

.mobile-nav-links {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    color: var(--color-text-dim);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition-fast);
    text-decoration: none;
}
.mobile-nav-links a i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}
.mobile-nav-links a span { flex: 1; }
.mobile-nav-links a:hover {
    background: var(--color-bg-elevated);
    color: var(--color-white);
}
.mobile-nav-links a:hover i { color: var(--color-primary-light); }
.mobile-nav-links a.active {
    background: var(--color-primary-bg);
    color: var(--color-primary-light);
}
.mobile-nav-links a.active i { color: var(--color-primary-light); }

.mobile-search {
    padding: 10px 16px 0;
}
.mobile-search-form {
    position: relative;
    display: flex;
    align-items: center;
}
.mobile-search-form input {
    width: 100%;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 8px 40px 8px 16px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    outline: none;
    transition: var(--transition-fast);
}
.mobile-search-form input::placeholder { color: var(--color-text-muted); }
.mobile-search-form input:focus { border-color: var(--color-primary); background: #222; }
.mobile-search-form button {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    transition: var(--transition-fast);
}
.mobile-search-form button:hover { color: var(--color-primary-light); }

.mobile-enjp-wrap {
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
}

/* ── FOOTER ──────────────────────────────────────────────── */
#footer {
    background: var(--color-bg-2);
    border-top: 1px solid var(--color-border);
    padding: 0;
    margin-top: 40px;
}

.footer-enjp-row {
    padding: 10px 16px;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-border);
}

.footer-az {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}
.footer-az-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}
.footer-az-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.footer-az-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-white);
    white-space: nowrap;
}
.footer-az-desc {
    font-size: 12px;
    color: var(--color-text-muted);
}
.footer-az-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.footer-az-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 30px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-fast);
    background: rgba(255,255,255,.06);
    border: 1px solid #333;
    color: var(--color-text-muted);
}
.footer-az-links a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-light);
    background: var(--color-primary-bg);
}
.footer-az-links a.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.footer-body-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}
.footer-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    padding: 28px 0;
}
.footer-brand {}
.footer-brand-logo {
    display: inline-block;
    margin-bottom: 12px;
}
.footer-brand-logo img {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.footer-site-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 340px;
}

.footer-col {}
.footer-col h5 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 12px;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col ul li { margin-bottom: 7px; }
.footer-col ul li a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: var(--transition-fast);
    text-decoration: none;
}
.footer-col ul li a:hover { color: var(--color-primary-light); }

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding: 14px 16px;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-bottom p {
    font-size: 11px;
    color: #555;
    margin: 0;
}
.footer-disclaimer-text {
    font-size: 11px;
    color: #444;
    margin: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary-purple {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}
.btn-primary-purple:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-1px); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--color-text-dim);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary-light); }

/* ── Section headings ────────────────────────────────────── */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 2px;
}
.section-view-all {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}
.section-view-all:hover { color: var(--color-primary-light); }

/* ── Anime Card ──────────────────────────────────────────── */
.film-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-card);
    transition: var(--transition-fast);
    display: block;
}
.film-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(124,58,237,.25); }
.film-card:hover .film-poster img { transform: scale(1.05); }

.film-poster {
    position: relative;
    width: 100%;
    padding-top: 140%;
    overflow: hidden;
    background: #111;
}
.film-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.film-badges {
    position: absolute;
    top: 5px; left: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.badge-hd {
    background: var(--color-badge-hd);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.5;
}

.film-ep-info {
    position: absolute;
    bottom: 5px; left: 5px; right: 5px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.badge-sub, .badge-dub, .badge-ep {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
}
.badge-sub { background: var(--color-badge-sub); color: #fff; }
.badge-dub { background: var(--color-badge-dub); color: #fff; }
.badge-ep  { background: var(--color-badge-ep); color: #ddd; border: 1px solid #333; }

.film-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.9) 100%);
    opacity: 0;
    transition: var(--transition-fast);
    display: flex;
    align-items: flex-end;
    padding: 8px;
}
.film-card:hover .film-overlay { opacity: 1; }
.film-overlay-play {
    width: 36px; height: 36px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px;
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    opacity: 0;
    transition: var(--transition-fast);
}
.film-card:hover .film-overlay-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.film-info {
    padding: 7px 6px 8px;
}
.film-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: var(--transition-fast);
}
.film-card:hover .film-name { color: var(--color-white); }

/* ── Anime grid ──────────────────────────────────────────── */
.film-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/* ── Home two-column layout ──────────────────────────────── */
.home-layout {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 20px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px;
    align-items: start;
}
.home-main { min-width: 0; }
.home-sidebar { min-width: 0; }

/* ── Hero Carousel ───────────────────────────────────────── */
/* ── Hero Carousel ───────────────────────────────────────── */
.hero-carousel {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
}
.hero-slide { display: none; }
.hero-slide.active { display: block; }

/* Image area */
.hero-slide-visual {
    width: 100%;
    height: 340px;
    overflow: hidden;
    background: #111;
}
.hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Purple info bar */
.hero-slide-bar {
    background: #5a2d91;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 24px;
}
.hero-bar-info { flex: 1; min-width: 0; }
.hero-slide-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-slide-desc {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Watch now button */
.hero-watch-btn {
    flex-shrink: 0;
    background: #fff;
    color: #111;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition: var(--transition-fast);
}
.hero-watch-btn:hover { background: #ede0ff; color: #5a2d91; }

/* Prev / Next arrows */
.hero-arrow {
    position: absolute;
    top: calc(340px / 2);
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background .2s, border-color .2s, transform .15s;
    z-index: 5;
    padding: 0;
}
.hero-arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-50%) scale(1.1);
}
.hero-prev { left: 14px; }
.hero-next { right: 14px; }

/* Dots */
.hero-dots {
    position: absolute;
    top: 12px; right: 16px;
    display: flex;
    gap: 6px;
    z-index: 5;
}
.hero-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.38);
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    padding: 0;
}
.hero-dot.active { background: #fff; }

/* ── Recently Updated grid ───────────────────────────────── */
.recently-updated { margin-top: 20px; }

/* ── Schedule (homepage embedded) ────────────────────────── */
.schedule-section { margin-top: 20px; }
.schedule-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.schedule-tabs::-webkit-scrollbar { display: none; }
.schedule-tabs .tab-arrow {
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.schedule-tabs .tab-arrow:hover { border-color: var(--color-primary); color: var(--color-primary-light); }
.schedule-day-tab {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    line-height: 1.3;
}
.schedule-day-tab:hover { border-color: var(--color-primary); color: var(--color-primary-light); }
.schedule-day-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.schedule-day-tab span { display: block; font-size: 10px; font-weight: 400; margin-top: 1px; }

.schedule-list { display: flex; flex-direction: column; gap: 0; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.schedule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-fast);
}
.schedule-item:hover { background: var(--color-bg-elevated); }
.schedule-time {
    min-width: 44px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}
.schedule-anime-title {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schedule-anime-title a:hover { color: var(--color-primary-light); }
.schedule-ep-btn {
    flex-shrink: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    transition: var(--transition-fast);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.schedule-ep-btn:hover { border-color: var(--color-primary); color: var(--color-primary-light); }
.schedule-show-more {
    text-align: center;
    padding: 10px;
    border-top: 1px solid var(--color-border);
}
.schedule-show-more button {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}
.schedule-show-more button:hover { color: var(--color-primary-light); }

/* ── Sidebar widgets ──────────────────────────────────────── */
.sidebar-widget {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 16px;
}
.widget-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

/* Quick filter widget */
.sidebar-widget-qf {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}
.qf-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 14px;
}
.quick-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}
/* Quick filter custom dropdowns */
.qf-dropdown-wrap {
    position: relative;
}
.qf-dropdown-btn {
    width: 100%;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: var(--radius-sm);
    color: #999;
    font-size: 11px;
    font-weight: 500;
    padding: 7px 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: space-between;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.4;
}
.qf-dropdown-btn:hover,
.qf-dropdown-btn.open { border-color: var(--color-primary); background: #252525; }
.qf-dropdown-btn b { color: #fff; font-weight: 700; margin-left: 3px; }
.qf-dropdown-btn i { font-size: 8px; color: #666; flex-shrink: 0; transition: transform .15s; margin-left: 4px; }
.qf-dropdown-btn.open i { transform: rotate(180deg); }

.qf-dropdown-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 200;
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: var(--radius-sm);
    max-height: 190px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.6);
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}
.qf-dropdown-menu::-webkit-scrollbar { width: 4px; }
.qf-dropdown-menu::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
.qf-dropdown-menu.open { display: block; }
.qf-opt {
    display: block;
    padding: 7px 10px;
    font-size: 11px;
    color: #bbb;
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid #2a2a2a;
    text-decoration: none;
}
.qf-opt:last-child { border-bottom: none; }
.qf-opt:hover { background: #2a2a2a; color: #fff; }
.qf-opt.active { color: var(--color-primary-light); background: rgba(124,58,237,.1); }
.qf-search-row { margin-bottom: 8px; }
.qf-search-row input {
    width: 100%;
    background: #222;
    border: 1px solid #333;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--color-text);
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.qf-search-row input:focus { border-color: var(--color-primary); }
.qf-search-row input::placeholder { color: #555; }
.qf-filter-btn {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    height: 45px;
    padding: 0 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: var(--transition-fast);
    text-decoration: none;
    letter-spacing: .3px;
}
.qf-filter-btn:hover { background: var(--color-primary-hover); color: #fff; }

/* Top Anime widget */
.top-anime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.top-anime-heading {
    white-space: nowrap;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    flex-shrink: 0;
}
.top-anime-tabs {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.top-anime-tab {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition-fast);
    background: transparent;
    white-space: nowrap;
}
.top-anime-tab {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition-fast);
    background: transparent;
}
.top-anime-tab.active,
.top-anime-tab:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.top-anime-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
}
.top-anime-item:last-child { border-bottom: none; }
.top-anime-item:hover .top-anime-title { color: var(--color-primary-light); }
.top-anime-featured {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 8px;
}
.top-anime-featured-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #111;
    margin-bottom: 8px;
}
.top-anime-featured-poster img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
}
.top-anime-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 60%);
}
.top-anime-featured-rank {
    position: absolute;
    top: 6px; left: 6px;
    font-size: 13px; font-weight: 800;
    color: #f59e0b;
    background: rgba(0,0,0,.7);
    padding: 2px 7px;
    border-radius: 3px;
    line-height: 1.4;
}

.top-rank {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text-muted);
    min-width: 22px;
    text-align: center;
}
.top-rank.rank-1 { color: #f59e0b; }
.top-rank.rank-2 { color: #9ca3af; }
.top-rank.rank-3 { color: #b45309; }

.top-anime-thumb {
    width: 56px; height: 76px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: #111;
}
.top-anime-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.top-anime-info { flex: 1; min-width: 0; }
.top-anime-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    margin-bottom: 4px;
    transition: var(--transition-fast);
}
.top-anime-views {
    font-size: 12px;
    color: var(--color-text-muted);
    display: flex; align-items: center; gap: 4px;
}

/* Recently Added widget */
.recently-added-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
}
.recently-added-item:last-child { border-bottom: none; }
.recently-added-item:hover .ra-title { color: var(--color-primary-light); }
.ra-thumb {
    width: 36px; height: 50px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: #111;
}
.ra-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ra-info { flex: 1; min-width: 0; }
.ra-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    transition: var(--transition-fast);
}
.ra-meta { font-size: 10px; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
.ra-dot { color: #444; }

/* ── Browse page layout ───────────────────────────────────── */
.browse-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px;
}
.browse-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}
.browse-head h1 {
    font-size: var(--font-size-lg);
    font-weight: 800;
    margin-bottom: 4px;
}
.browse-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Filter bar */
.browse-filter-bar {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.browse-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.filter-group label { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.filter-select {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    padding: 6px 10px;
    outline: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.filter-select:focus,
.filter-select:hover { border-color: var(--color-primary); }

/* Genre pills */
.genre-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.genre-pill {
    padding: 4px 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}
.genre-pill:hover,
.genre-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── Detail page ─────────────────────────────────────────── */

/* Hero section: backdrop as absolute bg, content on top */
.detail-hero-section {
    position: relative;
    width: 100%;
    min-height: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.detail-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.detail-backdrop img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: brightness(.45);
    transform: scale(1.04);
}
.detail-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(8,6,16,.98) 0%, rgba(8,6,16,.75) 45%, rgba(8,6,16,.25) 100%),
        linear-gradient(to bottom, rgba(8,6,16,.3) 0%, rgba(8,6,16,.95) 100%);
}
.detail-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    padding: 24px 20px 36px;
}
.detail-hero-inner .bc-wrap {
    margin-bottom: 24px;
}

/* Separate layout for the body below hero */
.detail-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 28px 20px 40px;
}
.detail-hero {
    display: flex;
    gap: 36px;
    align-items: center;
}
.detail-poster {
    flex-shrink: 0;
    width: 200px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 50px rgba(0,0,0,.8), 0 0 0 3px rgba(139,92,246,.5);
    align-self: flex-start;
}
.detail-poster img { width: 100%; display: block; }

.detail-meta { flex: 1; min-width: 0; }

.detail-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    align-items: center;
}
.detail-format-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.detail-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid currentColor;
}
.detail-status-releasing { color: #10b981; border-color: #10b981; }
.detail-status-finished  { color: #94a3b8; border-color: #94a3b8; }
.detail-status-not_yet_released { color: #f59e0b; border-color: #f59e0b; }
.detail-rating-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.08);
    color: var(--color-text-dim);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.detail-title {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.detail-alt-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: 14px;
}
.detail-quick-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.dqi-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--color-text-dim);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.dqi-pill i { font-size: 12px; }
.dqi-score { color: #f59e0b; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.1); }
.dqi-score i { color: #f59e0b; }
.dqi-sub { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.1); }
.dqi-dub { color: #f9a8d4; border-color: rgba(236,72,153,.3); background: rgba(236,72,153,.1); }

.detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-watch-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(139,92,246,.4);
}
.btn-watch-now:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(139,92,246,.55); }
.dqi-pill.dqi-genre { transition: background .15s, color .15s, border-color .15s; }
.dqi-pill.dqi-genre:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-watch-now i { font-size: 16px; }

/* Coming Soon disabled state for NOT_YET_RELEASED anime */
.btn-watch-now.is-disabled {
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.08);
    color: #ffd166;
    border: 1px solid rgba(255, 209, 102, 0.35);
    box-shadow: none;
    pointer-events: none;
    opacity: 0.9;
}
.btn-watch-now.is-disabled:hover {
    transform: none;
    box-shadow: none;
}
.btn-watch-now.is-disabled i { color: #ffd166; }
.btn-detail-ext {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--color-text-dim);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 50px;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
    backdrop-filter: blur(4px);
}
.btn-detail-ext:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-detail-mal    { color: #2e51a2; border-color: rgba(46,81,162,.4); }
.btn-detail-mal:hover { background: rgba(46,81,162,.15); color: #5474d4; border-color: rgba(46,81,162,.7); }
.btn-detail-anilist { color: #02a9ff; border-color: rgba(2,169,255,.35); }
.btn-detail-anilist:hover { background: rgba(2,169,255,.12); color: #5ac8ff; border-color: rgba(2,169,255,.7); }

.detail-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    margin-top: 24px;
}
.detail-main {}
.detail-sidebar-info {}

.synopsis-box {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}
.synopsis-box h3 { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
#synopsis-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-dim);
    line-height: 1.7;
}
.synopsis-expand {
    font-size: var(--font-size-xs);
    color: var(--color-primary-light);
    margin-top: 8px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.info-table { width: 100%; font-size: var(--font-size-sm); }
.info-table tr { border-bottom: 1px solid var(--color-border); }
.info-table tr:last-child { border-bottom: none; }
.info-table td { padding: 7px 0; vertical-align: top; }
.info-table td:first-child { color: var(--color-text-muted); width: 120px; }
.info-table td a { color: var(--color-primary-light); }
.info-table td a:hover { text-decoration: underline; }

.detail-related h3 {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-related h3::before {
    content: '';
    width: 4px; height: 18px;
    background: var(--color-primary);
    border-radius: 2px;
    display: inline-block;
}

/* ── Watch page ───────────────────────────────────────────── */
.watch-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 14px 16px 40px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    align-items: start;
}

/* ── Info bar ──────────────────────────────────────────────── */
.watch-info-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0f0d1c 0%, #0c0b17 100%);
    border: 1px solid #1e1a33;
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    margin-top: 8px;
}
.watch-info-poster {
    width: 48px; height: 66px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.watch-info-text { flex: 1; min-width: 0; }
.watch-info-title {
    font-size: 14px;
    font-weight: 700;
    color: #f3f4f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.watch-info-ep {
    font-size: 11px;
    color: #a78bfa;
    font-weight: 500;
}
.watch-info-badges { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.wib-badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 800;
    padding: 3px 9px; border-radius: 20px;
    letter-spacing: .4px;
}
.wib-sub { background: rgba(139,92,246,.18); color: #c4b5fd; border: 1px solid rgba(139,92,246,.35); }
.wib-dub { background: rgba(236,72,153,.1); color: #f9a8d4; border: 1px solid rgba(236,72,153,.3); }
.btn-detail-link {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 16px;
    background: rgba(139,92,246,.12);
    border: 1px solid rgba(139,92,246,.35);
    border-radius: var(--radius-sm);
    color: #a78bfa;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.btn-detail-link:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Player bottom bar (ep nav) ──────────────────────────────── */
.player-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: #0c0b17;
    border: 1px solid #1e1a33;
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-bottom: 10px;
}
.epnav-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px;
    background: #18172a;
    border: 1px solid #2a2740;
    border-radius: 20px;
    color: #9ca3af;
    font-size: 11px; font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.epnav-btn:hover:not(.disabled) { border-color: var(--color-primary); color: #c4b5fd; background: rgba(139,92,246,.1); }
.epnav-btn.disabled { opacity: .25; cursor: not-allowed; pointer-events: none; }
.epnav-current {
    font-size: 11px; font-weight: 800;
    color: #e5e7eb;
    white-space: nowrap;
    padding: 5px 12px;
    background: rgba(139,92,246,.1);
    border: 1px solid rgba(139,92,246,.18);
    border-radius: 20px;
}


/* ── Player ──────────────────────────────────────────────────── */
.player-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: 0 0 0 1px #1e1a33, 0 12px 50px rgba(0,0,0,.8);
}
#player-iframe {
    width: 100%; height: 100%;
    border: none;
    display: block;
}
#player-loading {
    position: absolute; inset: 0;
    background: #06050f;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
}
.player-spinner {
    width: 46px; height: 46px;
    border: 3px solid #1e1a33;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#player-backdrop-overlay {
    position: absolute; inset: 0;
    z-index: 4;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}
#player-backdrop-overlay:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}
#player-backdrop-overlay img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .5s ease, filter .3s ease;
    filter: brightness(.85);
}
#player-backdrop-overlay:hover img {
    transform: scale(1.04);
    filter: brightness(.95);
}
#player-backdrop-overlay.is-hidden { display: none; }
.player-overlay-dim {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at center, rgba(6,5,15,.25) 0%, rgba(6,5,15,.55) 70%, rgba(6,5,15,.75) 100%),
        linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
    pointer-events: none;
}
.player-play-hint {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 18px;
    pointer-events: none;
}
.player-play-hint-icon {
    position: relative;
    width: 92px; height: 92px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 60%, #6d28d9 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 40px;
    padding-left: 6px;
    box-shadow:
        0 0 0 0 rgba(124,58,237,.6),
        0 12px 48px rgba(0,0,0,.7),
        inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
    animation: playHintPulse 2.4s ease-out infinite;
}
.player-play-hint-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    animation: playHintRing 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes playHintPulse {
    0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.6), 0 12px 48px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
    70%  { box-shadow: 0 0 0 24px rgba(124,58,237,0), 0 12px 48px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
    100% { box-shadow: 0 0 0 0 rgba(124,58,237,0), 0 12px 48px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
}
@keyframes playHintRing {
    0%   { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.5); opacity: 0; }
}
#player-backdrop-overlay:hover .player-play-hint-icon {
    transform: scale(1.12);
    animation-play-state: paused;
    box-shadow:
        0 0 0 20px rgba(124,58,237,.2),
        0 14px 56px rgba(0,0,0,.8),
        inset 0 1px 0 rgba(255,255,255,.25);
}
.player-play-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.95);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
    transition: letter-spacing .25s;
}
#player-backdrop-overlay:hover .player-play-label {
    letter-spacing: 1.5px;
}
@media (prefers-reduced-motion: reduce) {
    .player-play-hint-icon,
    .player-play-hint-icon::before {
        animation: none;
    }
    #player-backdrop-overlay img,
    #player-backdrop-overlay:hover img,
    #player-backdrop-overlay:hover .player-play-hint-icon,
    #player-backdrop-overlay:hover .player-play-label {
        transition: none;
        transform: none;
    }
}
}

/* ── Controls bar ──────────────────────────────────────────── */
.player-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: #0f0d1c;
    border: 1px solid #1e1a33;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}
.player-controls-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.server-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.server-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .6px;
    padding: 4px 11px;
    border-radius: 20px;
    text-transform: uppercase;
}
.sub-label { color: #c4b5fd; background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.3); }
.dub-label { color: #f9a8d4; background: rgba(236,72,153,.12); border: 1px solid rgba(236,72,153,.3); }
.srv-btn {
    padding: 5px 16px;
    background: #18172a;
    border: 1px solid #2a2740;
    border-radius: 20px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.srv-btn:hover { background: rgba(139,92,246,.15); border-color: var(--color-primary); color: #c4b5fd; }
.srv-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 14px rgba(139,92,246,.45); }
/* DUB server buttons — pink theme */
.srv-btn[data-version="dub"] { border-color: rgba(236,72,153,.3); color: #f9a8d4; }
.srv-btn[data-version="dub"]:hover { background: rgba(236,72,153,.15); border-color: #ec4899; color: #fce7f3; }
.srv-btn[data-version="dub"].active { background: #ec4899; border-color: #ec4899; color: #fff; box-shadow: 0 0 14px rgba(236,72,153,.5); }
.srv-unavailable { font-size: 11px; color: #4b5563; font-style: italic; }
.version-divider { height: 20px; width: 1px; background: #1e1a33; margin: 0 8px; }
.btn-report {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    border: 1px solid #2a2740;
    border-radius: 20px;
    color: #6b7280;
    font-size: 11px; font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.btn-report:hover { border-color: #ef4444; color: #ef4444; }

/* ep-nav moved into .player-bottom-bar (.pbb-epnav) */

/* ── Episode sidebar ──────────────────────────────────────── */
.ep-sidebar {
    background: #0f0d1c;
    border: 1px solid #1e1a33;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ep-sidebar-head {
    padding: 12px;
    border-bottom: 1px solid #1e1a33;
    display: flex; align-items: center; gap: 8px;
    background: #0c0b17;
}
.ep-sidebar-head input {
    flex: 1;
    background: #18172a;
    border: 1px solid #2a2740;
    border-radius: 20px;
    padding: 6px 13px;
    color: #e5e7eb;
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
}
.ep-sidebar-head input::placeholder { color: #4b5563; }
.ep-sidebar-head input:focus { border-color: var(--color-primary); }
.ep-sidebar-head select {
    background: #18172a;
    border: 1px solid #2a2740;
    border-radius: 20px;
    color: #9ca3af;
    font-size: 11px;
    padding: 6px 10px;
    outline: none;
    cursor: pointer;
}
.ep-list {
    max-height: 540px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a2740 transparent;
}
.ep-list::-webkit-scrollbar { width: 4px; }
.ep-list::-webkit-scrollbar-track { background: transparent; }
.ep-list::-webkit-scrollbar-thumb { background: #2a2740; border-radius: 4px; }
.ws-ep {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #16152a;
    color: #9ca3af;
    font-size: 12px;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.ws-ep:hover { background: rgba(139,92,246,.07); color: #e5e7eb; }
.ws-ep.ws-ep--active {
    background: rgba(139,92,246,.14);
    color: #c4b5fd;
    border-left: 3px solid var(--color-primary);
}
.ws-ep-num {
    min-width: 30px;
    font-size: 13px; font-weight: 800;
    color: #374151;
    flex-shrink: 0;
}
.ws-ep--active .ws-ep-num { color: var(--color-primary); }
.ws-ep-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-ep-badges { display: flex; gap: 3px; flex-shrink: 0; }
.ws-ep-badges .badge-sub { font-size: 8px; padding: 2px 5px; background: rgba(139,92,246,.2); color: #c4b5fd; border-radius: 3px; font-weight: 700; }
.ws-ep-badges .badge-dub { font-size: 8px; padding: 2px 5px; background: rgba(236,72,153,.15); color: #f9a8d4; border-radius: 3px; font-weight: 700; }

/* ── Report ──────────────────────────────────────────────── */
#btn-report {
    background: none;
    border: 1px solid #2a2740;
    border-radius: 20px;
    color: #6b7280;
    padding: 5px 14px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: border-color .15s, color .15s;
}
#btn-report:hover { border-color: #ef4444; color: #ef4444; }
#report-section { display: none; margin-top: 10px; }
#report-section.show { display: block; }
.report-form {
    background: #0f0d1c;
    border: 1px solid #1e1a33;
    border-radius: var(--radius-md);
    padding: 16px;
}
.report-form select,
.report-form textarea {
    width: 100%;
    background: #18172a;
    border: 1px solid #2a2740;
    border-radius: var(--radius-sm);
    color: #e5e7eb;
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
    outline: none;
    transition: border-color .15s;
}
.report-form select:focus,
.report-form textarea:focus { border-color: var(--color-primary); }
.report-form textarea { resize: vertical; min-height: 70px; }

/* ── Schedule page ────────────────────────────────────────── */
.schedule-page-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px;
}
.schedule-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.jst-clock-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
}
#jst-clock { color: var(--color-text-dim); font-weight: 600; }
.schedule-day-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 16px;
    scrollbar-width: none;
}
.schedule-day-tabs::-webkit-scrollbar { display: none; }
.schedule-tab-btn {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}
.schedule-tab-btn span { display: block; font-size: 10px; font-weight: 400; margin-top: 2px; color: var(--color-text-muted); }
.schedule-tab-btn:hover { border-color: var(--color-primary); color: var(--color-primary-light); }
.schedule-tab-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.schedule-tab-btn.active span { color: rgba(255,255,255,.8); }

#schedule-list { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }

/* ── A-Z List ─────────────────────────────────────────────── */
.az-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px;
}
.az-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 18px;
}
.az-nav a {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--transition-fast);
    text-decoration: none;
}
.az-nav a:hover,
.az-nav a.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── Search page ─────────────────────────────────────────── */
.search-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px;
}
.search-hero {
    text-align: center;
    padding: 60px 20px;
}
.search-hero h1 { font-size: var(--font-size-xl); margin-bottom: 20px; }
.search-hero-form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    gap: 0;
}
.search-hero-form input {
    flex: 1;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    padding: 12px 20px;
    color: var(--color-text);
    font-size: var(--font-size-base);
    outline: none;
    transition: var(--transition-fast);
}
.search-hero-form input:focus { border-color: var(--color-primary); }
.search-hero-form button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.search-hero-form button:hover { background: var(--color-primary-hover); }

/* ── Pagination ───────────────────────────────────────────── */
.pagination-wrap { margin-top: 24px; }
.pagination-wrap .pagination { justify-content: center; gap: 4px; flex-wrap: wrap; }
.pagination-wrap .page-link {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 7px 13px;
    border-radius: var(--radius-sm) !important;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: var(--transition-fast);
    outline: none !important;
    box-shadow: none !important;
}
.pagination-wrap .page-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination-wrap .page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination-wrap .page-item.disabled .page-link { opacity: .35; pointer-events: none; }

/* ── Breadcrumbs ──────────────────────────────────────────── */
.bc-wrap {
    padding: 10px 0 14px;
    border-left: 3px solid var(--color-primary);
    padding-left: 10px;
    margin-bottom: 16px;
}
.bc-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0; margin: 0;
    gap: 0;
    font-size: 12px;
}
.bc-item { display: flex; align-items: center; }
.bc-item + .bc-item::before {
    content: '\203A';
    padding: 0 6px;
    color: #444;
    font-size: 14px;
}
.bc-item a { color: var(--color-text-muted); transition: var(--transition-fast); text-decoration: none; }
.bc-item a:hover { color: var(--color-primary-light); }
.bc-active { color: var(--color-text-dim); }

/* ── Stats strip ──────────────────────────────────────────── */
.stats-strip {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
}
.stat-item { text-align: center; }
.stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-primary-light);
}
.stat-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-section { margin-top: 30px; }
.faq-section h2 {
    font-size: var(--font-size-lg);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 8px;
}
.faq-section h2::before {
    content: '';
    width: 4px; height: 22px;
    background: var(--color-primary);
    border-radius: 2px;
    display: inline-block;
}
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    overflow: hidden;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-bg-card);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    user-select: none;
    transition: var(--transition-fast);
}
.faq-question:hover { background: var(--color-bg-elevated); }
.faq-question i { color: var(--color-text-muted); font-size: 12px; transition: transform .2s; }
.faq-item.open .faq-question i { transform: rotate(180deg); }
.faq-answer {
    display: none;
    padding: 12px 16px;
    font-size: var(--font-size-sm);
    color: var(--color-text-dim);
    line-height: 1.7;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
.faq-item.open .faq-answer { display: block; }

/* ── EN/JP Toggle ─────────────────────────────────────────── */
.enjp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    cursor: pointer;
}
.enjp-toggle-switch {
    width: 36px; height: 18px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    position: relative;
    transition: var(--transition-fast);
}
.enjp-toggle-switch::after {
    content: '';
    width: 12px; height: 12px;
    background: var(--color-text-muted);
    border-radius: 50%;
    position: absolute;
    top: 2px; left: 2px;
    transition: var(--transition-fast);
}
.enjp-toggle-switch.jp { background: var(--color-primary-bg); border-color: var(--color-primary); }
.enjp-toggle-switch.jp::after { background: var(--color-primary-light); left: 20px; }

/* ── Home list columns ────────────────────────────────────── */
.home-list-col { }
.home-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
}
.home-list-item:last-child { border-bottom: none; }
.home-list-item:hover .hli-title { color: var(--color-primary-light); }
.hli-rank {
    min-width: 20px;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text-muted);
    text-align: center;
}
.hli-thumb {
    width: 36px; height: 50px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}
.hli-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hli-info { flex: 1; min-width: 0; }
.hli-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    transition: var(--transition-fast);
}
.hli-meta { font-size: 10px; color: var(--color-text-muted); }

/* ── Slider ───────────────────────────────────────────────── */
.slider-section { margin-bottom: 20px; }
.slider-wrap-outer { position: relative; }
.slider-wrap {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.slider-wrap::-webkit-scrollbar { display: none; }
.slider-wrap .film-card { min-width: 130px; max-width: 130px; flex-shrink: 0; }
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 2;
    font-size: 12px;
    transition: var(--transition-fast);
}
.slider-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.slider-btn-prev { left: -14px; }
.slider-btn-next { right: -14px; }

/* ── Top-to-top button ────────────────────────────────────── */
#totop {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 38px; height: 38px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    z-index: 800;
    box-shadow: 0 4px 12px rgba(124,58,237,.5);
}
#totop.show { opacity: 1; visibility: visible; }
#totop:hover { background: var(--color-primary-hover); transform: translateY(-2px); }

/* ── 404 Page ─────────────────────────────────────────────── */
.not-found-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}
.not-found-code {
    font-size: 120px;
    font-weight: 900;
    color: var(--color-primary);
    opacity: .15;
    line-height: 1;
    margin-bottom: -20px;
}
.not-found-title { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.not-found-desc { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: 24px; }

/* ── Utilities ────────────────────────────────────────────── */
.d-none { display: none !important; }
.is-hidden { display: none !important; }
.text-muted { color: var(--color-text-muted); }
.text-purple { color: var(--color-primary-light); }
.content-lazy { content-visibility: auto; contain-intrinsic-size: 0 300px; }

/* ── Card badge overrides (9anime style) ───────────────────── */
.badge-hd {
    background: rgba(0,0,0,.72) !important;
    color: #fff !important;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.5;
}

/* Episode number badge — bottom-left, purple */
.badge-ep-num {
    background: var(--color-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.5;
    white-space: nowrap;
}

/* SUB / DUB — yellow & orange */
.badge-sub { background: #e6a817 !important; color: #fff !important; }
.badge-dub { background: #e8652a !important; color: #fff !important; }

/* Bottom row: ep-num left, lang badges right */
.film-ep-row {
    position: absolute;
    bottom: 5px; left: 5px; right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4px;
}
.film-lang-badges { display: flex; gap: 3px; }
.film-lang-badges .badge-sub,
.film-lang-badges .badge-dub { font-size: 9px; padding: 2px 5px; }

/* ── Card format badge (top-left of poster) ──────────────────── */
.card-format-badge {
    position: absolute;
    top: 7px; left: 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    color: #fff;
    background: rgba(139,92,246,.88);
    backdrop-filter: blur(6px);
    z-index: 3;
    line-height: 1.5;
}
.card-fmt-movie   { background: rgba(236,72,153,.88); }
.card-fmt-ova     { background: rgba(16,185,129,.85); }
.card-fmt-ona     { background: rgba(245,158,11,.85); }
.card-fmt-special { background: rgba(99,102,241,.88); }
.card-fmt-music   { background: rgba(6,182,212,.85); }
.card-fmt-tv      { background: rgba(139,92,246,.75); }

/* ── TV / Browse page layout ────────────────────────────────── */
.tv-page-outer {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 10px 16px 40px;
}

/* Filter bar */
.tv-filter-bar {
    background: #1a1a1f;
    border: 1px solid #2a2a2f;
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 16px;
}
.tv-filter-form { display: flex; }
.tv-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tv-filter-select {
    background: #111;
    border: 1px solid #2a2a2f;
    border-radius: 7px;
    color: #ccc;
    font-size: 12px;
    padding: 8px 10px;
    outline: none;
    cursor: pointer;
    flex: 1;
    min-width: 100px;
    max-width: 150px;
    transition: border-color .15s;
    appearance: auto;
}
.tv-filter-select:focus,
.tv-filter-select:hover { border-color: var(--color-primary); }

.tv-search-input {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    background: #111;
    border: 1px solid #2a2a2f;
    border-radius: 7px;
    color: #ccc;
    font-size: 12px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
}
.tv-search-input::placeholder { color: #555; }
.tv-search-input:focus { border-color: var(--color-primary); }

.tv-filter-btn {
    background: #6c3ef4;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
    white-space: nowrap;
    margin-left: auto;
}
.tv-filter-btn:hover { background: #7d5cff; }

/* Two-column body */
.tv-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}

/* Main column */
.tv-main {}
.tv-results-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.tv-results-head h1 {
    font-size: var(--font-size-lg);
    font-weight: 800;
}
.tv-results-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.tv-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}
.tv-empty i { font-size: 40px; margin-bottom: 16px; display: block; opacity: .3; }
.tv-pagination { margin-top: 24px; }

/* Sidebar */
.tv-sidebar {}
.tv-top-widget {
    background: #15151a;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-height) + 12px);
}

/* Widget header */
.tv-top-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--color-border);
}
.tv-top-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-white);
}
.tv-top-tabs { display: flex; gap: 0; }
.tv-top-tab {
    background: none;
    border: none;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    border-radius: 0;
}
.tv-top-tab:hover { color: var(--color-primary-light); }
.tv-top-tab.active { color: var(--color-primary-light); border-bottom-color: var(--color-primary); }

/* Featured #1 item */
.tv-top-featured {
    display: block;
    text-decoration: none;
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.tv-top-feat-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #111;
}
.tv-top-feat-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tv-top-feat-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 55%);
}
.tv-top-feat-rank {
    position: absolute;
    top: 7px; left: 8px;
    font-size: 16px;
    font-weight: 900;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.tv-top-featured .tv-top-item-meta {
    padding: 7px 0 10px;
}

/* Regular items */
.tv-top-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    transition: background .15s;
}
.tv-top-item:last-child { border-bottom: none; }
.tv-top-item:hover { background: var(--color-bg-elevated); }
.tv-top-item:hover .tv-top-item-title { color: var(--color-primary-light); }

.tv-rank-num {
    min-width: 22px;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    flex-shrink: 0;
}
.tv-top-thumb {
    width: 50px; height: 70px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: #111;
}
.tv-top-thumb img { width: 100%; height: 100%; object-fit: cover; }

.tv-top-item-meta { flex: 1; min-width: 0; }
.tv-top-item-title {
    font-size: 12px;
    font-weight: 600;
    color: #eaeaea;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color .15s;
}
.tv-top-item-views {
    font-size: 11px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tv-top-item-views i { font-size: 9px; }

/* ── Page-specific H1 styles ──────────────────────────────── */
.home-h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 16px;
    line-height: 1.3;
}

.watch-page-h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dim);
    margin-bottom: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.az-page-h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 16px;
    line-height: 1.3;
}

.schedule-page-head h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-white);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    :root { --sidebar-width: 260px; }
    .home-layout { grid-template-columns: 1fr 260px; gap: 14px; }
    .detail-body { grid-template-columns: 1fr 240px; }
    .watch-layout { grid-template-columns: 1fr 300px; }
    .tv-body { grid-template-columns: 1fr 250px; }
}

@media (max-width: 900px) {
    .home-layout { grid-template-columns: 1fr; }
    .home-sidebar { display: none; }
    .detail-body { grid-template-columns: 1fr; }
    .watch-layout { grid-template-columns: 1fr; }
    .detail-hero { flex-direction: column; align-items: flex-start; gap: 20px; }
    .detail-hero-section { min-height: 0; }
    .detail-poster { width: 140px; }
    .detail-title { font-size: 22px; }
    .btn-watch-now { padding: 9px 20px; font-size: 13px; }
    .tv-body { grid-template-columns: 1fr; }
    .tv-sidebar { display: none; }
    .footer-body { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .header-nav { display: none; }
}
@media (max-width: 768px) {
    .header-search-wrap { display: none; }
    .film-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .browse-filter-row { flex-direction: column; }
    .browse-filter-row .filter-group { min-width: 100%; }
    .tv-filter-row { gap: 6px; }
    .tv-filter-select,
    .tv-search-input { min-width: 100px; font-size: 11px; }
    .footer-az-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 480px) {
    .film-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stats-strip { flex-wrap: wrap; gap: 12px; }
    .footer-body { grid-template-columns: 1fr; gap: 24px; }
    .footer-brand { grid-column: auto; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .tv-filter-select,
    .tv-search-input { width: 100%; min-width: unset; }
    .tv-filter-btn { width: 100%; justify-content: center; }
}


/* ===============================================================
   Scripts & Ads integration — 9anime theme
   Notification bar, subscribe popup, banner ad slot
   =============================================================== */

/* ── Ad banner slot ───────────────────────────────────────── */
.ad-slot {
    width: 100%;
    margin: 16px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.ad-slot:empty { display: none; }

/* ── Notification bar ─────────────────────────────────────── */
.nbar {
    position: sticky; top: 0;
    width: 100%;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    z-index: 999;
    box-shadow: 0 2px 12px rgba(124,58,237,.25);
}
.nbar__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nbar__text {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    flex: 1;
    min-width: 200px;
}
.nbar__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.nbar__btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.nbar__btn--learn {
    background: rgba(255,255,255,.95);
    color: #6d28d9;
}
.nbar__btn--learn:hover { background: #fff; }
.nbar__btn--dismiss {
    background: transparent;
    border-color: rgba(255,255,255,.4);
    color: #fff;
}
.nbar__btn--dismiss:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }

/* Notification modal */
.nbar-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(6px);
    animation: nbarFadeIn .2s ease-out;
}
.nbar-modal {
    background: #141024;
    border: 1px solid #2b1f52;
    border-radius: 16px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.2);
}
.nbar-modal__body {
    color: #e0e0ea;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    max-height: 60vh;
    overflow-y: auto;
}
.nbar-modal__footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
@keyframes nbarFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Subscribe popup ─────────────────────────────────────── */
.sub-popup-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(8px);
    animation: subFadeIn .25s ease-out;
}
.sub-popup {
    position: relative;
    background: linear-gradient(180deg, #1a1530 0%, #0f0a26 100%);
    border: 1px solid #2b1f52;
    border-radius: 20px;
    padding: 32px 28px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.3), inset 0 1px 0 rgba(255,255,255,.06);
    animation: subPopIn .3s cubic-bezier(.34,1.56,.64,1);
}
.sub-popup__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.06);
    border: none;
    border-radius: 50%;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.sub-popup__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.sub-popup__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.sub-popup__title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}
.sub-popup__desc {
    font-size: 13px;
    color: #a0a0b0;
    margin: 0 0 20px;
}
.sub-popup__btn {
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s, background .15s, box-shadow .15s;
}
.sub-popup__btn--tg {
    background: linear-gradient(135deg, #37AEE2 0%, #1E96C8 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(55,174,226,.35);
}
.sub-popup__btn--tg:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(55,174,226,.5);
}
.sub-popup__btn--email {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(124,58,237,.35);
    margin-top: 8px;
}
.sub-popup__btn--email:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(124,58,237,.5);
}
.sub-popup__btn--email:disabled {
    opacity: .6;
    cursor: wait;
    transform: none;
}
.sub-popup__divider {
    position: relative;
    font-size: 11px;
    color: #707080;
    margin: 20px 0 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sub-popup__divider::before,
.sub-popup__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: rgba(255,255,255,.08);
}
.sub-popup__divider::before { left: 0; }
.sub-popup__divider::after  { right: 0; }
.sub-popup__divider span {
    background: transparent;
    padding: 0 12px;
    position: relative;
}
.sub-popup__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sub-popup__input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    color: #fff;
    outline: none;
    transition: border-color .15s;
}
.sub-popup__input:focus { border-color: #7c3aed; }
.sub-popup__input::placeholder { color: #606070; }
.sub-popup__status {
    font-size: 13px;
    margin: 12px 0 0;
}
.sub-popup__dismiss {
    margin-top: 16px;
    background: transparent;
    border: none;
    color: #606070;
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
}
.sub-popup__dismiss:hover { color: #a0a0b0; }
@keyframes subFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes subPopIn {
    from { opacity: 0; transform: scale(.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ───────────────────────────────────────────────────────────
   Responsive — Scripts & Ads across all devices
   Breakpoints: ≥1400 (desktop), 1024 (laptop), 768 (tablet),
                480 (mobile), 360 (small mobile)
   ─────────────────────────────────────────────────────────── */

/* Tablet (<1024px) */
@media (max-width: 1024px) {
    .ad-slot { margin: 14px auto; padding: 0 12px; max-width: 100%; }
    .nbar__inner { max-width: 100%; padding: 10px 14px; }
    .nbar-modal { max-width: 440px; }
}

/* Tablet portrait / small tablet (<768px) */
@media (max-width: 768px) {
    .ad-slot { margin: 12px auto; padding: 0 10px; }
    .ad-slot iframe, .ad-slot img, .ad-slot > * { max-width: 100%; height: auto; }

    .nbar__inner { padding: 8px 12px; gap: 10px; }
    .nbar__text { font-size: 13px; }
    .nbar__btn { padding: 5px 12px; font-size: 11px; }

    .sub-popup { max-width: 94vw; padding: 28px 24px 22px; }
    .pi-card { max-width: 94vw; }
}

/* Mobile (<500px) */
@media (max-width: 500px) {
    .sub-popup { padding: 24px 20px 20px; }
    .sub-popup__title { font-size: 18px; }
    .sub-popup__desc { font-size: 12px; }
    .sub-popup__btn { font-size: 13px; padding: 11px 14px; }
    .sub-popup__input { font-size: 13px; padding: 10px 12px; }
    .sub-popup__dismiss { font-size: 10px; }
    .sub-popup__icon svg { width: 48px; height: 48px; }

    .nbar__inner {
        padding: 8px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .nbar__text { font-size: 12.5px; line-height: 1.4; width: 100%; }
    .nbar__actions { width: 100%; justify-content: flex-end; }
    .nbar__btn { font-size: 11px; padding: 5px 11px; }

    .nbar-modal { padding: 18px 16px; max-width: 92vw; }
    .nbar-modal__body { font-size: 13px; max-height: 55vh; }
    .nbar-modal__footer { flex-wrap: wrap; gap: 6px; }
    .nbar-modal__footer .nbar__btn { flex: 1 1 auto; min-width: 100px; justify-content: center; }

    .player-interstitial { padding: 14px; }
    .pi-card { max-width: 100%; }
    .pi-title { font-size: 16px; }
    .pi-desc, .pi-warning { font-size: 11.5px; }
    .pi-warning { padding: 10px 12px; margin-bottom: 12px; }
    .pi-warning ul { padding-left: 16px; }
    .pi-btn { padding: 10px 18px; font-size: 12px; width: 100%; }
    .pi-icon svg { width: 40px; height: 40px; }
}

/* Small mobile (<360px) — very narrow devices */
@media (max-width: 360px) {
    .nbar__text { font-size: 12px; }
    .nbar__btn { font-size: 10.5px; padding: 4px 9px; }
    .sub-popup { padding: 22px 16px 18px; }
    .sub-popup__title { font-size: 16px; }
    .sub-popup__btn { font-size: 12px; padding: 10px 12px; }
    .pi-title { font-size: 15px; }
    .pi-btn { padding: 9px 14px; font-size: 11.5px; }
}

/* Player interstitial — ensure it never overflows player container */
.player-interstitial { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Ad banner slot — hard-cap child content to its container */
.ad-slot > * { max-width: 100%; }
.ad-slot img, .ad-slot iframe, .ad-slot video, .ad-slot object { max-width: 100%; height: auto; }

/* Reduced motion — keep all our popups/overlays static for a11y */
@media (prefers-reduced-motion: reduce) {
    .sub-popup-overlay, .sub-popup, .nbar-modal-overlay, .player-interstitial { animation: none !important; }
    .sub-popup__btn--tg:hover, .sub-popup__btn--email:hover, .pi-btn:hover { transform: none !important; }
}


/* ── Player interstitial ad ──────────────────────────────── */
.player-interstitial {
    position: absolute; inset: 0;
    z-index: 6;
    background: linear-gradient(135deg, rgba(15,10,38,.96) 0%, rgba(26,21,48,.96) 100%);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: piFadeIn .25s ease-out;
}
.player-interstitial.d-none { display: none !important; }
.pi-card {
    max-width: 460px;
    width: 100%;
    text-align: center;
    color: #fff;
}
.pi-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: #7c3aed;
}
.pi-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #fff;
}
.pi-desc {
    font-size: 13px;
    color: #b0b0c0;
    margin: 0 0 16px;
    line-height: 1.5;
}
.pi-warning {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    text-align: left;
    font-size: 12px;
    color: #fca5a5;
}
.pi-warning strong {
    display: block;
    margin-bottom: 6px;
    color: #f87171;
}
.pi-warning ul {
    margin: 0;
    padding-left: 18px;
}
.pi-warning li {
    margin: 2px 0;
}
.pi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pi-btn--ad {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(124,58,237,.4);
}
.pi-btn--ad:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(124,58,237,.55);
}
.pi-btn--play {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(16,185,129,.4);
}
.pi-btn--play:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(16,185,129,.55);
}
.pi-hint {
    font-size: 11px;
    color: #808090;
    margin: 10px 0 0;
}
@keyframes piFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Responsive rules for .pi-* live in the consolidated "Responsive" block earlier */


.st-cta {
    margin: 28px auto;
    padding: 22px 24px;
    background: none;
    border: none;
    border-radius: 0;
    max-width: 720px;
    box-shadow: none;
    text-align: center;
}
.st-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.st-cta__text { text-align: center; }
.st-cta__title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -.2px;
}
.st-cta__desc {
    font-size: 13px;
    color: #a0a0b0;
    margin: 0;
}
.st-cta__buttons {
    min-width: 200px;
}
.st-cta__buttons :is(.st-inline-share-buttons, .st-btn) { justify-content: center !important; }

@media (max-width: 600px) {
    .st-cta { margin: 20px auto; padding: 16px 12px; }
    .st-cta__title { font-size: 16px; }
    .st-cta__desc { font-size: 12px; }
}