[x-cloak]{display:none!important}

:root {
  --ink:        #070b14;
  --ink-mid:    #0c1220;
  --ink-card:   #111827;
  --ink-lift:   #1a2336;
  --ink-glass:  rgba(7,11,20,0.90);
  --gold:       #6366f1;
  --gold-pale:  #818cf8;
  --gold-ghost: rgba(99,102,241,0.10);
  --crimson:    #f43f5e;
  --jade:       #10b981;
  --sky:        #22d3ee;
  --w100:       #ffffff;
  --w90:        rgba(255,255,255,0.92);
  --w70:        rgba(255,255,255,0.70);
  --w50:        rgba(255,255,255,0.50);
  --w30:        rgba(255,255,255,0.30);
  --w15:        rgba(255,255,255,0.15);
  --w08:        rgba(255,255,255,0.08);
  --w04:        rgba(255,255,255,0.04);
  --border:     rgba(99,102,241,0.18);
  --border-soft:rgba(255,255,255,0.06);
  --shadow-gold:0 0 60px rgba(99,102,241,0.12);
  --r-xl: 1.75rem;
  --r-lg: 1.25rem;
  --r-md: 0.875rem;
  --r-sm: 0.5rem;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body {
  background: var(--ink);
  color: var(--w90);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  padding-bottom: 88px;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── TEXTURE & ATMOSPHERE ── */
body::before {
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(99,102,241,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(34,211,238,0.06) 0%, transparent 55%);
  animation: atmFloat 18s ease-in-out infinite alternate;
}

@keyframes atmFloat {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.06) translateY(-2vh); }
}

/* fine grain */
body::after {
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px;
}

::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
*{scrollbar-width:thin;scrollbar-color:var(--gold) var(--ink)}

/* ── TYPOGRAPHY ── */
.display {font-family:var(--font-display);letter-spacing:-0.01em}
.label {font-size:0.6rem;font-weight:800;text-transform:uppercase;letter-spacing:0.18em}

/* ── GLASSMORPHISM ── */
.glass {
  background:var(--ink-glass);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--border-soft);
}

/* ── HEADER ── */
header {
  position:sticky;top:0;z-index:100;
  background:rgba(8,12,20,0.97);
  backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
}

.hdr {
  max-width:1400px;margin:0 auto;
  padding:0 1.5rem;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
}

.logo {
  display:flex;align-items:center;gap:0.875rem;
  cursor:pointer;text-decoration:none;flex-shrink:0;
  transition:opacity 0.2s;
}
.logo:hover{opacity:0.85}

.logo-mark {
  position:relative;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
}
.logo-mark::before {
  content:'';position:absolute;inset:0;
  border:1.5px solid var(--gold);
  border-radius:10px;
  box-shadow:0 0 16px rgba(99,102,241,0.3), inset 0 0 16px rgba(99,102,241,0.06);
  transition:all 0.3s ease;
}
.logo:hover .logo-mark::before {box-shadow:0 0 30px rgba(99,102,241,0.5), inset 0 0 20px rgba(99,102,241,0.1);}
.logo-mark i {color:var(--gold);font-size:0.9rem;position:relative;z-index:1;}

.logo-text {font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--w100);}
.logo-text em {font-style:italic;color:var(--gold);}

.nav-desktop {display:none;align-items:center;gap:0.125rem;}
@media(min-width:768px){.nav-desktop{display:flex}}

.nav-link {
  padding:0.45rem 0.875rem;
  font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;
  color:var(--w50);text-decoration:none;border-radius:8px;
  display:flex;align-items:center;gap:0.375rem;
  transition:all 0.2s ease;position:relative;
}
.nav-link:hover{color:var(--w90);background:var(--w04);}
.nav-link.active{color:var(--gold-pale);}
.nav-link.active::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:18px;height:1.5px;background:var(--gold);border-radius:99px;
  box-shadow:0 0 8px var(--gold);
}

.hdr-actions{display:flex;align-items:center;gap:0.5rem;}

.hdr-btn {
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--w04);border:1px solid var(--border-soft);
  border-radius:9px;color:var(--w50);cursor:pointer;
  font-size:0.75rem;transition:all 0.2s ease;
}
.hdr-btn:hover{color:var(--gold);border-color:var(--border);background:var(--gold-ghost);}

/* Search */
.search-wrap{position:relative;flex:1;max-width:260px;}
.search-input {
  width:100%;background:var(--w04);border:1px solid var(--border-soft);
  border-radius:11px;padding:0.55rem 0.875rem 0.55rem 2.5rem;
  font-family:var(--font-body);font-size:0.78rem;color:var(--w90);outline:none;
  transition:all 0.3s ease;
}
.search-input::placeholder{color:var(--w30);}
.search-input:focus{border-color:var(--border);background:var(--gold-ghost);box-shadow:0 0 0 3px rgba(99,102,241,0.08);}
.search-icon{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:var(--w30);font-size:0.7rem;pointer-events:none;transition:color 0.2s;}
.search-input:focus~.search-icon{color:var(--gold);}

.suggestions {
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--ink-card);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;z-index:200;
  box-shadow:0 24px 48px rgba(0,0,0,0.6),var(--shadow-gold);
  animation:dropIn 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.sug-item {
  padding:0.65rem 1rem;font-size:0.75rem;font-weight:600;
  color:var(--w70);cursor:pointer;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;gap:0.5rem;transition:all 0.15s;
}
.sug-item:last-child{border-bottom:none}
.sug-item:hover{background:var(--gold-ghost);color:var(--gold-pale);padding-left:1.25rem;}

/* Mobile header */
.mobile-hdr {
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 1rem;
  position:sticky;top:0;z-index:100;
  background:rgba(8,12,20,0.97);
  backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
}
@media(min-width:768px){.mobile-hdr{display:none}header{display:block}}
@media(max-width:767px){header{display:none}}

.mobile-search-bar {
  position:fixed;top:58px;left:0;right:0;z-index:99;
  padding:0.875rem 1rem;background:rgba(8,12,20,0.98);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--border);
  animation:slideDown 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── MAIN ── */
main{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:2rem 1.25rem;}

/* ── SECTION HEADER ── */
.sec-head {
  display:flex;align-items:center;gap:0.875rem;margin-bottom:1.5rem;
}
.sec-ornament {
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.sec-ornament span {
  display:block;border-radius:2px;background:var(--gold);
}
.sec-ornament .bar-tall {width:3px;height:24px;opacity:1;}
.sec-ornament .bar-short {width:3px;height:14px;opacity:0.4;}

.sec-title {
  font-family:var(--font-body);
  font-size:0.78rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.14em;
  color:var(--w90);
}
.sec-title i {color:var(--gold);margin-right:0.4rem;opacity:0.9;}

.sec-chip {
  margin-left:auto;font-size:0.55rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.14em;
  padding:0.2rem 0.65rem;
  background:var(--gold-ghost);
  border:1px solid var(--border);
  border-radius:99px;color:var(--gold);
}

/* ── HERO ── */
.hero {
  position:relative;border-radius:var(--r-xl);
  overflow:hidden;height:380px;
  border:1px solid var(--border);
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.7),var(--shadow-gold);
  margin-bottom:4rem;
}
@media(min-width:768px){.hero{height:560px}}

.hero-slide{position:absolute;inset:0}
.hero-img {
  width:100%;height:100%;object-fit:cover;
  filter:brightness(0.30) saturate(0.7);
  transition:transform 10s ease-in-out;
}
.hero:hover .hero-img{transform:scale(1.05)}

.hero-grad {
  position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(8,12,20,0.7) 40%, transparent 70%),
    linear-gradient(to right, var(--ink) 0%, rgba(8,12,20,0.5) 40%, transparent 65%);
}

/* gold vignette */
.hero-glow {
  position:absolute;bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(to right, transparent 0%, var(--gold) 50%, transparent 100%);
  opacity:0.35;
}

.hero-content {
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem 1.75rem;
}
@media(min-width:768px){.hero-content{padding:3rem 4rem}}

.hero-pill {
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(99,102,241,0.08);
  border:1px solid rgba(99,102,241,0.25);
  border-radius:99px;
  padding:0.28rem 0.875rem 0.28rem 0.5rem;
  margin-bottom:0.875rem;width:fit-content;
}
.hero-dot {
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold);
  animation:goldPulse 2s ease-in-out infinite;
}
@keyframes goldPulse{0%,100%{box-shadow:0 0 6px var(--gold)}50%{box-shadow:0 0 14px var(--gold)}}
.hero-pill-text{font-size:0.58rem;font-weight:800;text-transform:uppercase;letter-spacing:0.2em;color:var(--gold);}

.hero-title {
  font-family:var(--font-display);
  font-size:2.25rem;font-weight:700;font-style:italic;
  color:var(--w100);line-height:1.1;
  text-shadow:0 4px 40px rgba(0,0,0,0.6);
  margin-bottom:0.75rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(min-width:768px){.hero-title{font-size:4rem}}

.hero-desc {
  font-size:0.82rem;color:var(--w50);line-height:1.65;
  max-width:500px;margin-bottom:1.5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(min-width:768px){.hero-desc{font-size:0.88rem;-webkit-line-clamp:3}}

.hero-btn {
  display:inline-flex;align-items:center;gap:0.75rem;
  background:var(--gold);color:var(--ink);
  font-weight:800;font-size:0.68rem;
  text-transform:uppercase;letter-spacing:0.14em;
  padding:0.75rem 1.5rem;border-radius:12px;border:none;
  cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 8px 28px rgba(99,102,241,0.35);
}
.hero-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px rgba(99,102,241,0.55);}
.hero-btn-play {
  width:28px;height:28px;background:var(--ink);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:0.6rem;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-btn:hover .hero-btn-play{transform:rotate(360deg)}

/* Hero arrows */
.hero-arrows {
  position:absolute;inset-x:1rem;top:50%;transform:translateY(-50%);
  display:flex;justify-content:space-between;pointer-events:none;z-index:20;
}
.hero-arrow {
  width:40px;height:40px;
  background:rgba(8,12,20,0.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:var(--w70);cursor:pointer;pointer-events:all;
  font-size:0.8rem;transition:all 0.25s ease;
}
.hero-arrow:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}

/* Hero dots */
.hero-dots {
  position:absolute;bottom:1.25rem;right:1.5rem;
  display:flex;gap:0.35rem;z-index:20;
}
.hero-dot-btn {
  height:2px;border-radius:99px;
  background:rgba(255,255,255,0.2);cursor:pointer;
  transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-dot-btn.active{width:28px;background:var(--gold);box-shadow:0 0 10px var(--gold);}
.hero-dot-btn:not(.active){width:8px}
.hero-dot-btn:not(.active):hover{background:var(--w50)}

/* ── CARDS GRID ── */
.grid-poster {
  display:grid;grid-template-columns:repeat(2,1fr);gap:0.875rem;
}
@media(min-width:480px){.grid-poster{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.grid-poster{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.grid-poster{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1400px){.grid-poster{grid-template-columns:repeat(6,1fr)}}

.grid-wide {
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
}
@media(min-width:480px){.grid-wide{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.grid-wide{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.grid-wide{grid-template-columns:repeat(5,1fr)}}

/* ── CARD ── */
.card {
  background:var(--ink-card);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
  position:relative;will-change:transform;
}
.card::after {
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg, transparent 40%, rgba(99,102,241,0.12) 100%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:1;
}
.card:hover{transform:translateY(-10px) scale(1.015);border-color:var(--border);box-shadow:0 28px 50px -10px rgba(0,0,0,0.65),0 0 0 1px rgba(99,102,241,0.15);}
.card:hover::after{opacity:1}

.card-thumb {
  aspect-ratio:2/3;overflow:hidden;background:var(--ink-mid);
  position:relative;
}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);}
.card:hover .card-thumb img{transform:scale(1.1)}

.card-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(99,102,241,0.3), transparent);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.3s;z-index:3;
}
.card:hover .card-overlay{opacity:1}
.card-play {
  width:44px;height:44px;background:var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:0.8rem;
  transform:scale(0.5);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 4px 20px rgba(99,102,241,0.5);
}
.card:hover .card-play{transform:scale(1)}

.card-badge {
  position:absolute;top:0.5rem;left:0.5rem;z-index:5;
  font-size:0.52rem;font-weight:900;text-transform:uppercase;letter-spacing:0.06em;
  padding:0.18rem 0.5rem;border-radius:6px;color:var(--ink);
  background:var(--gold);
  box-shadow:0 2px 8px rgba(99,102,241,0.4);
}
.card-badge.new{background:var(--crimson);color:#fff;}

.card-body{padding:0.625rem;}
.card-title {
  font-size:0.7rem;font-weight:600;color:var(--w90);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.45;transition:color 0.2s;
}
.card:hover .card-title{color:var(--gold-pale)}

/* ── POPULAR STRIP ── */
.pop-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;
}
@media(min-width:480px){.pop-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.pop-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.pop-grid{grid-template-columns:repeat(5,1fr)}}

.pop-card {
  position:relative;border-radius:var(--r-md);overflow:hidden;
  cursor:pointer;background:var(--ink-card);
  border:1px solid var(--border-soft);
  transition:all 0.35s cubic-bezier(0.23,1,0.32,1);
  aspect-ratio:16/9;
}
.pop-card:hover{transform:translateY(-6px);border-color:var(--border);box-shadow:0 20px 40px -8px rgba(0,0,0,0.6),0 0 0 1px rgba(99,102,241,0.15);}
.pop-card img{width:100%;height:100%;object-fit:cover;filter:brightness(0.65);transition:all 0.5s ease;}
.pop-card:hover img{transform:scale(1.07);filter:brightness(0.85);}

.pop-info {
  position:absolute;bottom:0;left:0;right:0;
  padding:0.625rem 0.75rem;
  background:linear-gradient(to top, rgba(8,12,20,0.95), transparent);
}
.pop-ep {font-size:0.52rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.15rem;}
.pop-title{font-size:0.68rem;font-weight:600;color:var(--w90);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.2s;}
.pop-card:hover .pop-title{color:var(--gold-pale)}

/* ── RANK SCROLL ── */
.rank-row{display:flex;gap:0.875rem;overflow-x:auto;padding-bottom:0.5rem;}
.rank-card{flex-shrink:0;width:130px;cursor:pointer;transition:all 0.35s ease;}
@media(min-width:768px){.rank-card{width:150px}}
.rank-card:hover{transform:translateY(-8px)}

.rank-thumb{
  position:relative;aspect-ratio:2/3;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--border-soft);
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  transition:all 0.35s ease;
}
.rank-card:hover .rank-thumb{border-color:var(--border);box-shadow:0 20px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(99,102,241,0.2);}
.rank-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.rank-card:hover .rank-thumb img{transform:scale(1.07)}

.rank-num {
  position:absolute;top:0.45rem;left:0.45rem;
  font-family:var(--font-display);font-size:1.4rem;font-weight:700;font-style:italic;
  color:var(--gold);line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
  background:linear-gradient(135deg, rgba(8,12,20,0.85), rgba(8,12,20,0.5));
  padding:0.1rem 0.5rem 0.2rem;border-radius:6px;
}
.rank-score {
  position:absolute;bottom:0.4rem;right:0.4rem;
  background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);
  color:var(--gold);font-size:0.52rem;font-weight:800;
  padding:0.18rem 0.4rem;border-radius:5px;
  display:flex;align-items:center;gap:0.2rem;
  border:1px solid rgba(255,255,255,0.08);
}
.rank-title {
  font-size:0.63rem;font-weight:600;color:var(--w70);
  text-align:center;margin-top:0.5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.4;transition:color 0.2s;
}
.rank-card:hover .rank-title{color:var(--gold-pale)}

/* ── SIDEBAR ── */
.sidebar {
  background:var(--ink-card);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1.25rem;
  box-shadow:var(--shadow-gold);
}
.sidebar-title {
  font-size:0.6rem;font-weight:800;text-transform:uppercase;letter-spacing:0.18em;
  color:var(--gold);padding-bottom:0.75rem;
  border-bottom:1px solid var(--border);margin-bottom:0.875rem;
  display:flex;align-items:center;gap:0.4rem;
}
.side-item {
  display:flex;align-items:center;gap:0.625rem;
  padding:0.55rem 0;border-bottom:1px solid var(--border-soft);
  cursor:pointer;transition:all 0.2s ease;border-radius:7px;padding-right:0.4rem;
}
.side-item:last-child{border-bottom:none}
.side-item:hover{padding-left:0.4rem;}
.side-title{font-size:0.68rem;font-weight:600;color:var(--w70);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.2s;}
.side-item:hover .side-title{color:var(--gold-pale)}
.side-ep{font-size:0.58rem;color:var(--w30);margin-top:0.1rem;}

/* ── TABS ── */
.tabs{display:flex;gap:0.375rem;overflow-x:auto;padding-bottom:0.25rem;margin-bottom:1.25rem;}
.tab {
  flex-shrink:0;padding:0.4rem 1rem;border-radius:99px;
  font-size:0.63rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  border:1px solid var(--border-soft);background:transparent;
  color:var(--w40);cursor:pointer;transition:all 0.25s ease;
  white-space:nowrap;
}
.tab:hover{color:var(--w70);border-color:var(--border);}
.tab.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:800;box-shadow:0 4px 16px rgba(99,102,241,0.3);}

/* ── GENRE GRID ── */
.genre-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.625rem;}
@media(min-width:480px){.genre-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.genre-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.genre-grid{grid-template-columns:repeat(5,1fr)}}

.genre-card {
  padding:0.875rem;background:var(--ink-card);
  border:1px solid var(--border-soft);border-radius:var(--r-md);
  font-size:0.7rem;font-weight:600;color:var(--w70);
  cursor:pointer;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:0.4rem;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.genre-card:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:800;transform:translateY(-3px);box-shadow:0 10px 24px rgba(99,102,241,0.3);}

/* ── BUTTONS ── */
.btn-gold {
  display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
  background:var(--gold);color:var(--ink);
  font-weight:800;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;
  padding:0.65rem 1.25rem;border-radius:10px;border:none;cursor:pointer;
  transition:all 0.3s ease;box-shadow:0 4px 16px rgba(99,102,241,0.3);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(99,102,241,0.5);}

.btn-ghost {
  display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
  background:var(--w04);color:var(--w70);
  font-weight:700;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;
  padding:0.65rem 1.1rem;border-radius:10px;border:1px solid var(--border-soft);
  cursor:pointer;transition:all 0.25s ease;
}
.btn-ghost:hover{background:var(--w08);color:var(--w90);border-color:var(--border);}

/* ── EP LIST ── */
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.375rem;max-height:400px;overflow-y:auto;}
@media(min-width:768px){.ep-grid{grid-template-columns:repeat(4,1fr)}}

.ep-btn {
  background:var(--w04);border:1px solid var(--border-soft);
  border-radius:7px;padding:0.55rem;
  text-align:center;font-size:0.63rem;font-weight:700;
  color:var(--w70);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:0.2rem;
  transition:all 0.2s ease;
}
.ep-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:scale(1.04);}

/* ── DETAIL ── */
.detail-wrap{display:flex;flex-direction:column;gap:2rem;max-width:1100px;margin:0 auto;}
@media(min-width:768px){.detail-wrap{flex-direction:row;gap:2.5rem}}

.detail-poster{flex-shrink:0;width:200px;margin:0 auto;}
@media(min-width:768px){.detail-poster{margin:0;width:220px}}

.poster-img {
  width:100%;aspect-ratio:2/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 24px 50px rgba(0,0,0,0.5),var(--shadow-gold);
}
.poster-img img{width:100%;height:100%;object-fit:cover}

.meta-box {
  margin-top:0.875rem;background:var(--ink-card);
  border:1px solid var(--border);border-radius:var(--r-md);padding:1rem;
}
.meta-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;padding-bottom:0.6rem;border-bottom:1px solid var(--border-soft);}
.meta-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.meta-label{font-size:0.58rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--w30);display:flex;align-items:center;gap:0.3rem;}
.meta-val{font-size:0.68rem;font-weight:700;color:var(--w90);text-align:right}

.rating-big {
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  color:var(--gold);display:flex;align-items:center;gap:0.35rem;
}
.type-tag {
  font-size:0.58rem;font-weight:800;text-transform:uppercase;
  background:var(--gold);color:var(--ink);
  padding:0.2rem 0.55rem;border-radius:5px;
}

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

.back-btn {
  font-size:0.63rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--gold);display:flex;align-items:center;gap:0.35rem;
  background:none;border:none;cursor:pointer;margin-bottom:0.75rem;
  transition:gap 0.2s;padding:0;
}
.back-btn:hover{gap:0.6rem}

.detail-title {
  font-family:var(--font-display);font-size:2.25rem;font-weight:700;font-style:italic;
  color:var(--w100);line-height:1.15;letter-spacing:-0.01em;margin-bottom:1rem;
}
@media(min-width:768px){.detail-title{font-size:3rem}}

.genre-tag {
  display:inline-flex;align-items:center;
  padding:0.25rem 0.625rem;
  background:var(--gold-ghost);border:1px solid var(--border);
  border-radius:99px;font-size:0.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--gold);
  cursor:pointer;transition:all 0.2s ease;
}
.genre-tag:hover{background:var(--gold);color:var(--ink)}

.synopsis-box {
  background:var(--ink-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.25rem;margin:1.25rem 0;
}
.synopsis-label{font-size:0.58rem;font-weight:800;text-transform:uppercase;letter-spacing:0.18em;color:var(--gold);margin-bottom:0.625rem;display:flex;align-items:center;gap:0.35rem;}
.synopsis-text{font-size:0.83rem;color:var(--w70);line-height:1.75}

/* ── STREAM ── */
.player-wrap {
  aspect-ratio:16/9;background:#000;border-radius:var(--r-xl);
  overflow:hidden;border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,0.7),var(--shadow-gold);
  margin-bottom:1.25rem;
}
.player-wrap iframe{width:100%;height:100%;display:block}

.server-row{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:1.1rem;}
.srv-pill {
  padding:0.4rem 0.875rem;background:var(--ink-card);
  border:1px solid var(--border-soft);border-radius:8px;
  font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--w60);cursor:pointer;transition:all 0.2s ease;
  display:flex;align-items:center;gap:0.35rem;
}
.srv-pill:hover{background:var(--gold-ghost);color:var(--gold);border-color:var(--border)}
.srv-pill.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:800}

.nav-ctrls{display:grid;grid-template-columns:1fr auto 1fr;gap:0.375rem;padding:0.625rem;background:var(--ink-card);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:1.25rem;}
.nav-btn {
  display:flex;align-items:center;justify-content:center;gap:0.4rem;
  padding:0.65rem;border-radius:8px;
  font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
  cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;
}
.nav-btn.prev,.nav-btn.next{background:var(--w04);border-color:var(--border-soft);color:var(--w60)}
.nav-btn.prev:hover:not(:disabled),.nav-btn.next:hover:not(:disabled){background:var(--w08);color:var(--w90)}
.nav-btn.all{background:var(--gold);color:var(--ink)}
.nav-btn.all:hover{background:var(--gold-pale)}
.nav-btn:disabled{opacity:0.25;cursor:not-allowed}

/* ── DL BOX ── */
.dl-box{background:var(--ink-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.5rem;margin-top:1.25rem;}
.dl-row{display:flex;flex-direction:column;gap:0.625rem;padding-bottom:0.875rem;border-bottom:1px solid var(--border-soft);margin-bottom:0.875rem;}
.dl-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.dl-quality{background:var(--gold-ghost);border:1px solid var(--border);color:var(--gold);font-size:0.62rem;font-weight:800;padding:0.25rem 0.625rem;border-radius:7px;width:fit-content;}
.dl-links{display:flex;flex-wrap:wrap;gap:0.35rem}
.dl-btn{display:inline-flex;align-items:center;gap:0.35rem;padding:0.32rem 0.65rem;background:var(--w04);border:1px solid var(--border-soft);border-radius:7px;font-size:0.63rem;font-weight:600;color:var(--w60);text-decoration:none;transition:all 0.2s;}
.dl-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ── HISTORY ── */
.hist-item {
  display:flex;align-items:center;gap:0.875rem;
  background:var(--ink-card);border:1px solid var(--border-soft);
  border-radius:14px;padding:0.875rem 1rem;
  cursor:pointer;transition:all 0.25s ease;
}
.hist-item:hover{border-color:var(--border);background:var(--gold-ghost);transform:translateX(4px);}
.hist-num{width:30px;height:30px;background:var(--gold-ghost);border:1px solid var(--border);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:900;color:var(--gold);flex-shrink:0;}
.hist-title{font-size:0.82rem;font-weight:600;color:var(--w90);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.2s;}
.hist-item:hover .hist-title{color:var(--gold-pale)}
.hist-date{font-size:0.62rem;font-weight:600;color:var(--w30);}

/* ── TRASH ── */
.trash-item{display:flex;align-items:center;gap:0.875rem;background:rgba(192,57,43,0.04);border:1px solid rgba(192,57,43,0.12);border-radius:14px;padding:0.875rem 1rem;transition:all 0.2s;animation:trashIn 0.3s ease}
@keyframes trashIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ── SCHEDULE PANEL ── */
.side-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);}
.side-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:400px;background:var(--ink-mid);z-index:160;border-left:1px solid var(--border);box-shadow:-20px 0 60px rgba(0,0,0,0.6);display:flex;flex-direction:column;transform:translateX(110%);transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);}
.side-panel.open{transform:translateX(0)}

.sch-item{display:flex;gap:0.625rem;padding:0.5rem;border-radius:12px;cursor:pointer;transition:all 0.2s;border:1px solid transparent;}
.sch-item:hover{background:var(--gold-ghost);border-color:var(--border);}
.sch-thumb{width:44px;height:58px;border-radius:7px;overflow:hidden;flex-shrink:0;background:var(--ink-card);}
.sch-thumb img{width:100%;height:100%;object-fit:cover}
.sch-title{font-size:0.68rem;font-weight:600;color:var(--w90);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.2s;}
.sch-item:hover .sch-title{color:var(--gold-pale)}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;}
@media(min-width:768px){.modal-overlay{align-items:center}}
.modal-panel{background:var(--ink-card);border:1px solid var(--border);border-radius:1.75rem 1.75rem 0 0;width:100%;max-width:680px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;animation:panelUp 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 -20px 60px rgba(0,0,0,0.5);}
@media(min-width:768px){.modal-panel{border-radius:1.75rem;margin:1rem}}
@keyframes panelUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}

.modal-hdr{padding:1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-body{flex:1;overflow-y:auto;padding:1.25rem}
.modal-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--w04);border:1px solid var(--border-soft);border-radius:9px;color:var(--w40);cursor:pointer;font-size:0.75rem;transition:all 0.2s;}
.modal-close:hover{background:rgba(192,57,43,0.1);color:#f87171}

.confirm-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem}
.confirm-box{background:var(--ink-card);border:1px solid rgba(192,57,43,0.2);border-radius:1.5rem;max-width:400px;width:100%;padding:1.75rem;animation:panelUp 0.25s cubic-bezier(0.16,1,0.3,1);box-shadow:0 20px 60px rgba(0,0,0,0.6);}

/* ── TOAST ── */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:400;padding:0.65rem 1.25rem;border-radius:99px;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;display:flex;align-items:center;gap:0.45rem;box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap;}
@media(min-width:768px){.toast{bottom:28px}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(0.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-top:3rem;}
.page-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--ink-card);border:1px solid var(--border-soft);border-radius:11px;color:var(--w60);cursor:pointer;font-size:0.75rem;transition:all 0.2s;}
.page-btn:hover:not(:disabled){background:var(--gold-ghost);border-color:var(--border);color:var(--gold)}
.page-btn:disabled{opacity:0.25;cursor:not-allowed}
.page-cur{padding:0 1.25rem;height:42px;display:flex;align-items:center;background:var(--gold);color:var(--ink);border-radius:11px;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;}

/* ── EMPTY STATE ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;text-align:center}
.empty-ico{width:72px;height:72px;background:var(--ink-card);border:1px solid var(--border);border-radius:1.25rem;display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:var(--w15);margin-bottom:1.25rem;}
.empty-t{font-size:0.9rem;font-weight:800;color:var(--w40);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.4rem;}
.empty-s{font-size:0.72rem;color:var(--w20);max-width:260px;line-height:1.6;margin-bottom:1.25rem;}

/* ── SKELETON ── */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:8px;}
@keyframes shimmer{to{background-position:-200% 0}}
.spinner{width:44px;height:44px;border:3px solid rgba(99,102,241,0.15);border-top-color:var(--gold);border-radius:50%;animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SPLASH / LOADING ── */
#splash{
  position:fixed;inset:0;background:var(--ink);z-index:99999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1),visibility 0.7s;
}
#splash.fade{opacity:0;visibility:hidden;pointer-events:none}

.splash-inner{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  animation:splashIn 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes splashIn{
  from{opacity:0;transform:translateY(16px) scale(0.96)}
  to{opacity:1;transform:none}
}

.splash-logo-wrap{
  position:relative;width:88px;height:88px;
}
.splash-logo-img{
  width:100%;height:100%;object-fit:cover;border-radius:22px;
  border:2px solid rgba(99,102,241,0.4);
  box-shadow:0 0 0 6px rgba(99,102,241,0.08), 0 12px 40px rgba(0,0,0,0.5);
  position:relative;z-index:2;
}
.splash-logo-glow{
  position:absolute;inset:-12px;border-radius:30px;
  background:conic-gradient(from 0deg, transparent, rgba(99,102,241,0.45), transparent 40%);
  animation:spinGlow 2.2s linear infinite;
  z-index:1;filter:blur(8px);
}
@keyframes spinGlow{to{transform:rotate(360deg)}}

.splash-brand{
  font-family:var(--font-display);font-size:2.35rem;font-weight:700;
  letter-spacing:-0.02em;color:var(--w100);
}
.splash-brand em{color:var(--gold-pale);font-style:italic}

.splash-tagline{
  font-size:0.78rem;color:var(--w50);letter-spacing:0.12em;
  text-transform:uppercase;font-weight:600;margin-top:-0.5rem;
}

.splash-bar-wrap{
  width:140px;height:3px;background:rgba(255,255,255,0.06);
  border-radius:99px;overflow:hidden;margin-top:0.5rem;
  position:relative;
}
.splash-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg, var(--gold), var(--sky));
  border-radius:99px;
  animation:loadProgress 1.6s cubic-bezier(0.4,0,0.2,1) forwards;
  box-shadow:0 0 12px rgba(99,102,241,0.5);
}
@keyframes loadProgress{
  0%{width:0%}
  40%{width:55%}
  70%{width:78%}
  100%{width:100%}
}

/* modern spinner */
.spinner{
  width:40px;height:40px;
  border:2.5px solid rgba(99,102,241,0.15);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin 0.75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}


/* ── BOTTOM NAV ── */
.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(8,12,20,0.97);backdrop-filter:blur(24px);border-top:1px solid var(--border);padding:0.5rem 0;justify-content:space-around;align-items:center;}
@media(min-width:768px){.bottom-nav{display:none}body{padding-bottom:24px}}

.bnav-item{display:flex;flex-direction:column;align-items:center;gap:0.2rem;cursor:pointer;padding:0.35rem 1rem;border-radius:12px;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.bnav-item.active{background:var(--gold-ghost);}
.bnav-ico{font-size:1.1rem;color:var(--w30);transition:all 0.3s ease;}
.bnav-item.active .bnav-ico{color:var(--gold);transform:translateY(-2px) scale(1.15);}
.bnav-lbl{font-size:0.52rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--w30);transition:color 0.2s;}
.bnav-item.active .bnav-lbl{color:var(--gold);}

/* ── COMMENTS ── */
.comment-item{background:var(--w04);border:1px solid var(--border-soft);border-radius:12px;padding:0.875rem;margin-bottom:0.625rem;}
.comment-name{font-size:0.68rem;font-weight:800;color:var(--gold);}
.comment-time{font-size:0.58rem;color:var(--w30);}
.comment-text{font-size:0.78rem;color:var(--w70);line-height:1.6;margin-top:0.35rem;}

/* ── UTILITIES ── */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:0.25rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}
.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.w-full{width:100%}.mx-auto{margin-left:auto;margin-right:auto}.text-center{text-align:center}
.flex-1{flex:1 1 0%}.min-w-0{min-width:0}.flex-wrap{flex-wrap:wrap}
.hidden{display:none}.overflow-hidden{overflow:hidden}.relative{position:relative}
.space-y-2>*+*{margin-top:0.5rem}.space-y-3>*+*{margin-top:0.75rem}
.section{margin-bottom:3.5rem}
.cursor-pointer{cursor:pointer}.select-none{user-select:none}
.italic{font-style:italic}.uppercase{text-transform:uppercase}
.max-w-2xl{max-width:42rem}
.icon-btn {
  display:inline-flex;align-items:center;gap:0.35rem;
  padding:0.45rem 0.875rem;background:var(--ink-card);
  border:1px solid var(--border-soft);border-radius:9px;
  font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--w40);cursor:pointer;transition:all 0.2s ease;
}
.icon-btn:hover{color:var(--w90);border-color:var(--border);background:var(--w04);}
@media(min-width:768px){.md\:block{display:block}.md\:hidden{display:none}.md\:flex{display:flex}.md\:flex-row{flex-direction:row}}
@media(max-width:767px){.sm\:hidden{display:none}}
.animate-pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
/* ═══════════════════════════════════════════════
   LIAHUA ENHANCED STYLES — override & upgrade
   ═══════════════════════════════════════════════ */

/* Root palette — deeper, more cinematic */
:root {
  --ink:        #070a12;
  --ink-mid:    #0b1020;
  --ink-card:   #0f1524;
  --ink-lift:   #17213a;
  --ink-glass:  rgba(7,10,18,0.92);
  --gold:       #6366f1;
  --gold-pale:  #f0ce80;
  --gold-ghost: rgba(99,102,241,0.09);
  --border:     rgba(99,102,241,0.16);
  --border-soft:rgba(255,255,255,0.07);
  --shadow-gold:0 0 80px rgba(99,102,241,0.12);
  --crimson:    #b03030;
  --jade:       #1a7a5e;
}

/* Atmospheric background — more layered */
body::before {
  background:
    radial-gradient(ellipse 70% 55% at 10% 0%, rgba(99,102,241,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 90% 100%, rgba(80,120,220,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 60%, rgba(99,102,241,0.03) 0%, transparent 60%);
  animation: atmFloat 22s ease-in-out infinite alternate;
}

/* ── SPLASH — full redesign ── */
#splash {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s ease, visibility 0.9s;
  overflow: hidden;
}
#splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(99,102,241,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(80,120,220,0.05) 0%, transparent 55%);
  animation: atmFloat 12s ease-in-out infinite alternate;
}
#splash.fade { opacity: 0; visibility: hidden; }

.splash-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.splash-logo-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 1.75rem;
}

.splash-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 24px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 30px rgba(99,102,241,0.35));
  animation: splashImgFloat 4s ease-in-out infinite alternate;
}
@keyframes splashImgFloat {
  from { transform: translateY(0px); filter: drop-shadow(0 0 25px rgba(99,102,241,0.3)); }
  to   { transform: translateY(-8px); filter: drop-shadow(0 20px 40px rgba(99,102,241,0.5)); }
}

.splash-logo-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.18) 0%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.splash-brand {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 700;
  font-style: italic;
  color: var(--w100);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.splash-brand em {
  color: var(--gold);
  font-style: italic;
}

.splash-tagline {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--w30);
  margin-bottom: 2.25rem;
}

.splash-bar-wrap {
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.splash-bar {
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-pale), var(--gold), transparent);
  background-size: 300% 100%;
  border-radius: 99px;
  animation: loadBar 2s ease-in-out infinite;
}
@keyframes loadBar {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── LOGO — image version ── */
.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 14px rgba(99,102,241,0.25);
  transition: all 0.3s ease;
  background: var(--ink-card);
}
.logo-mark::before { display: none; }
.logo:hover .logo-mark {
  box-shadow: 0 0 28px rgba(99,102,241,0.45);
  border-color: var(--gold-pale);
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo text upgrade */
.logo-text {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--w100);
}
.logo-text em {
  font-style: italic;
  color: var(--gold);
}

/* ── HEADER — more refined ── */
header,
.mobile-hdr {
  background: rgba(7,10,18,0.97);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border-bottom: 1px solid var(--border);
}

/* ── HERO — richer shadows ── */
.hero {
  box-shadow: 0 60px 100px -20px rgba(0,0,0,0.8), var(--shadow-gold);
}

/* ── POSTER CARDS — deeper ── */
.poster-card {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.poster-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
}

/* ── BOTTOM NAV — subtle upgrade ── */
.bottom-nav {
  background: rgba(7,10,18,0.98);
  backdrop-filter: blur(32px) saturate(1.6);
  border-top: 1px solid rgba(99,102,241,0.12);
}

/* ── LOADING SPINNER ── */
.spinner {
  border-color: rgba(99,102,241,0.12);
  border-top-color: var(--gold);
}

/* ── SKELETON ── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(99,102,241,0.04) 25%,
    rgba(99,102,241,0.09) 50%,
    rgba(99,102,241,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* ── SCROLLBAR — gold accent ── */
::-webkit-scrollbar-thumb { background: var(--gold); }
* { scrollbar-color: var(--gold) var(--ink); }

/* ── SEARCH INPUT — warmer focus ── */
.search-input:focus {
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* ── FOOTER ── */
footer {
  border-top-color: var(--border) !important;
}


/* ═══════════════════════════════════════════════
   MODERN BUTTON SYSTEM — polished UI
   ═══════════════════════════════════════════════ */

/* Primary CTA */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.35rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    0 4px 14px rgba(99,102,241,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.25),
    0 8px 24px rgba(99,102,241,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2);
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}
.btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.btn-gold:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Ghost / secondary */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.04);
  color: var(--w70);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 0.68rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--w90);
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
.btn-ghost:active {
  background: rgba(255,255,255,0.06);
}

/* Header icon buttons */
.hdr-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px;
  color: var(--w50);
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.hdr-btn:hover {
  color: var(--gold-pale);
  border-color: rgba(99,102,241,0.35);
  background: rgba(99,102,241,0.1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
  transform: translateY(-1px);
}
.hdr-btn:active {
  transform: translateY(0);
}

/* Icon text buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--w50);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-btn:hover {
  color: var(--w90);
  border-color: rgba(99,102,241,0.3);
  background: rgba(99,102,241,0.08);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.06);
}

/* Episode buttons */
.ep-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 0.6rem 0.4rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--w70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ep-btn:hover {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.ep-btn.active,
.ep-btn[aria-current="true"] {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}

/* Pagination */
.page-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: var(--w60);
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-btn:hover:not(:disabled) {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.35);
  color: var(--gold-pale);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.page-cur {
  padding: 0 1.2rem;
  height: 42px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
  border: none;
}

/* Nav desktop links */
.nav-link {
  padding: 0.5rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--w50);
  text-decoration: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.nav-link:hover {
  color: var(--w90);
  background: rgba(255,255,255,0.05);
}
.nav-link.active {
  color: var(--gold-pale);
  background: rgba(99,102,241,0.1);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(99,102,241,0.5);
}

/* Bottom nav mobile */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(7,11,20,0.92);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0.45rem 0 calc(0.45rem + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  cursor: pointer;
  padding: 0.4rem 1.1rem;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bnav-item.active {
  background: rgba(99,102,241,0.12);
}
.bnav-ico {
  font-size: 1.15rem;
  color: var(--w30);
  transition: all 0.3s ease;
}
.bnav-item.active .bnav-ico {
  color: var(--gold-pale);
  transform: translateY(-2px) scale(1.12);
  filter: drop-shadow(0 0 6px rgba(99,102,241,0.5));
}
.bnav-lbl {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--w30);
  transition: color 0.2s;
}
.bnav-item.active .bnav-lbl {
  color: var(--gold-pale);
}

/* Download / quality chips */
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--w60);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dl-btn:hover {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
  transform: translateY(-1px);
}
.dl-quality {
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  color: var(--gold-pale);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
  border-radius: 8px;
  width: fit-content;
}

/* Nav buttons (prev/next episode etc) */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--w70);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: var(--w90);
  border-color: rgba(99,102,241,0.3);
}
.nav-btn.all {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
}
.nav-btn.all:hover {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  box-shadow: 0 6px 18px rgba(99,102,241,0.4);
}
.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Confirm modal buttons inherit btn-gold / danger handled inline */

/* Search focus ring already good — refine slightly */
.search-input:focus {
  border-color: rgba(99,102,241,0.4) !important;
  background: rgba(99,102,241,0.06) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

/* Soft press feedback for all interactive */
button, .btn-gold, .btn-ghost, .ep-btn, .page-btn, .hdr-btn, .icon-btn, .dl-btn, .nav-btn, .bnav-item {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}