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

:root{
  --bg:       #07070E;
  --bg-1:     #0E0E1A;
  --bg-2:     #14142A;
  --bg-card:  rgba(255,255,255,.04);
  --bg-card-h:rgba(255,255,255,.07);

  --silver:   #C8C8D0;
  --silver-l: #E8E8F0;
  --silver-d: #8A8A98;
  --gold:     #B8955A;
  --gold-l:   #D4AF70;

  --text:     #F0F0F8;
  --text-m:   #9090A8;
  --text-d:   #5A5A70;

  --border:   rgba(200,200,208,.1);
  --border-h: rgba(200,200,208,.25);

  --r-sm:6px;--r:12px;--r-lg:18px;--r-xl:28px;
  --nav-h:60px;
  --t:.22s;--ease:cubic-bezier(.4,0,.2,1);
  --t-s:.35s;

  --sh: 0 8px 32px rgba(0,0,0,.6);
  --sh-silver: 0 0 24px rgba(200,200,208,.08);
}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--silver-d);border-radius:2px}

/* ── Logo SVG ── */
.nw-logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none}
.nw-logo-svg{width:36px;height:36px;flex-shrink:0}
.nw-logo-image{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:50%;object-fit:cover;display:block;
}
.nw-logo-text{
  font-size:20px;font-weight:900;letter-spacing:.2px;
  color:#E50914;
  -webkit-text-fill-color:#E50914;
}

/* ── Bottom navigation ── */
.navbar,.mob-menu{display:none!important}
.bottom-nav{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:1000;
  width:min(430px,calc(100% - 24px));height:66px;padding:7px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
  background:rgba(30,30,30,.96);border-radius:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.42),0 -2px 10px rgba(255,255,255,.025);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.bottom-nav-item{
  border:0;background:transparent;color:#64748b;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:17px;font-size:10.5px;font-weight:700;cursor:pointer;
  transition:all .2s ease;
}
.bottom-nav-item.active,.bottom-nav-item:hover{color:#e2e8f0;background:#1e1e1e;box-shadow:var(--nm-sm-inset)}
.bottom-nav-item svg{flex-shrink:0}
.bottom-search-panel{
  position:fixed;left:50%;bottom:88px;transform:translate(-50%,10px);z-index:999;
  width:min(430px,calc(100% - 24px));opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.bottom-search-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.bottom-search-box{
  display:flex;align-items:center;gap:9px;padding:9px 10px 9px 14px;
  background:#1e1e1e;border-radius:18px;box-shadow:var(--nm-glow);
}
.bottom-search-box svg{color:#94a3b8;flex-shrink:0}
.bottom-search-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#e2e8f0;font-size:13px}
.bottom-search-box input::placeholder{color:#64748b}
.bottom-search-box button{border:0;border-radius:12px;padding:9px 12px;background:#1e1e1e;color:#3b82f6;box-shadow:var(--nm-sm-glow);font-weight:700;cursor:pointer}

/* ── Developer info page ── */
.dev-page{
  min-height:calc(100vh - var(--nav-h));
  padding:34px 20px 48px;
  background:
    radial-gradient(circle at 50% 12%, rgba(55,120,82,.13), transparent 34%),
    var(--bg);
}
.dev-shell{max-width:720px;margin:0 auto;text-align:center;animation:devFade .55s var(--ease) both}
.dev-back{display:flex;align-items:center;gap:10px;width:max-content;margin-bottom:30px;color:var(--text);text-decoration:none;font-size:14px;font-weight:600;transition:transform var(--t),opacity var(--t)}
.dev-back:hover{transform:translateX(-3px);opacity:.85}
.dev-kicker{display:block;text-align:left;color:#48d979;font-size:15px;font-weight:800;margin-bottom:24px}
.dev-avatar-wrap{width:230px;height:230px;margin:0 auto 18px;position:relative;display:grid;place-items:center}
.dev-avatar-wrap::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(72,217,121,.12);box-shadow:0 0 0 10px rgba(72,217,121,.07),0 0 45px rgba(72,217,121,.14);animation:devPulse 2.8s ease-in-out infinite}
.dev-avatar{width:210px;height:210px;border-radius:50%;object-fit:cover;object-position:center;border:5px solid #173c2b;box-shadow:0 0 0 2px rgba(72,217,121,.35),0 22px 55px rgba(0,0,0,.55);position:relative;z-index:1;animation:devFloat 5s ease-in-out infinite}
.dev-name{font-size:32px;line-height:1.15;font-weight:900;letter-spacing:-.6px;margin-bottom:12px}
.dev-verified{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:5px;vertical-align:middle;border:2px solid #2f86ff;border-radius:50%;color:#2f86ff;font-size:13px}
.dev-bio{max-width:620px;margin:0 auto 28px;color:#a4a4ad;font-size:16px;line-height:1.7}
.dev-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.dev-link{min-height:108px;border:1px solid rgba(255,255,255,.06);border-radius:20px;background:rgba(255,255,255,.055);color:var(--text);text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t)}
.dev-link:hover{transform:translateY(-5px);background:rgba(255,255,255,.08);border-color:rgba(72,217,121,.28);box-shadow:0 12px 30px rgba(0,0,0,.24)}
.dev-link svg{width:28px;height:28px}
.dev-link span{font-size:13px;font-weight:700;color:#b5b5bc}
.dev-coffee{display:flex;align-items:center;gap:18px;text-align:left;padding:22px 24px;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05);text-decoration:none;color:var(--text);transition:transform var(--t),background var(--t)}
.dev-coffee:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}
.dev-coffee-icon{width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;background:rgba(32,137,77,.38);color:#48d979}
.dev-coffee-title{font-size:19px;font-weight:800;margin-bottom:4px}
.dev-coffee-sub{font-size:15px;color:#92929b}
.dev-note{margin-top:22px;color:#5f5f6c;font-size:11px}
@keyframes devFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes devFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes devPulse{0%,100%{transform:scale(.98);opacity:.8}50%{transform:scale(1.03);opacity:1}}
@media(max-width:620px){
  .dev-page{padding:26px 20px 42px}
  .dev-kicker{margin-bottom:20px}
  .dev-avatar-wrap{width:205px;height:205px}
  .dev-avatar{width:188px;height:188px}
  .dev-name{font-size:29px}
  .dev-bio{font-size:15px;line-height:1.65}
  .dev-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .dev-link{min-height:94px;border-radius:18px}
  .dev-link svg{width:25px;height:25px}
  .dev-link span{font-size:11px}
  .dev-coffee{padding:20px;border-radius:25px}
}

/* ── Page ── */
.page{padding-top:var(--nav-h)}

/* ── Section ── */
.section{padding:36px 20px}
.section-inner{max-width:1440px;margin:0 auto}
.sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.sec-title{
  font-size:18px;font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.sec-title::before{
  content:'';display:block;width:3px;height:18px;border-radius:1.5px;
  background:linear-gradient(to bottom,var(--silver-l),var(--silver-d));
}
.sec-see-all{font-size:12px;color:var(--silver-d);text-decoration:none;transition:color var(--t)}
.sec-see-all:hover{color:var(--silver)}

/* ── Horizontal Scroll Row ── */
.h-scroll{
  display:flex;gap:12px;overflow-x:auto;
  padding-bottom:8px;scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.h-scroll::-webkit-scrollbar{display:none}

/* ── Card ── */
.card{
  flex-shrink:0;width:140px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t);
  scroll-snap-align:start;text-decoration:none;display:block;
}
.card:hover{
  transform:translateY(-6px);border-color:var(--border-h);
  box-shadow:var(--sh),var(--sh-silver);
}
.card-thumb{
  position:relative;aspect-ratio:2/3;overflow:hidden;
  background:var(--bg-2);
}
.card-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-s) var(--ease);
  display:block;
}
.card:hover .card-thumb img{transform:scale(1.06)}
.card-no-img{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
}
.card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,7,14,.95) 0%,transparent 55%);
  opacity:0;transition:opacity var(--t);
  display:flex;align-items:flex-end;padding:10px;
}
.card:hover .card-overlay{opacity:1}
.card-play{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--silver) 0%,var(--silver-d) 100%);
  color:var(--bg);font-size:12px;font-weight:700;
}
.card-badge{
  position:absolute;top:7px;left:7px;
  padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;
  background:rgba(200,200,208,.15);color:var(--silver-l);
  border:1px solid rgba(200,200,208,.25);
  backdrop-filter:blur(6px);
}
.card-badge.new{background:rgba(184,149,90,.2);color:var(--gold-l);border-color:rgba(184,149,90,.4)}
.card-info{padding:9px 9px 10px}
.card-title{
  font-size:12px;font-weight:600;color:var(--text);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{
  margin-top:5px;display:flex;align-items:center;gap:5px;
  font-size:10.5px;color:var(--text-d);
}
.card-rating{color:var(--gold-l);font-weight:600}

/* ── Rating star ── */
.star{display:inline-block;width:9px;height:9px;position:relative}
.star::before{
  content:'';position:absolute;inset:0;
  background:var(--gold-l);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ── Hero Banner (Home) ── */
.hero-banner{
  position:relative;width:calc(100% - 28px);max-width:1440px;height:360px;
  margin:14px auto 0;overflow:hidden;background:var(--bg-1);
  border:1px solid var(--border);border-radius:18px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.62);transform:scale(1.01);
  transition:background-image .6s var(--ease),transform .6s var(--ease);
}
.hero-grad{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,7,14,.92) 0%,rgba(7,7,14,.66) 42%,rgba(7,7,14,.18) 100%),
             linear-gradient(0deg,rgba(7,7,14,.88) 0%,transparent 55%);
}
.hero-content{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:34px 28px 38px;max-width:620px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:100px;margin-bottom:14px;
  background:rgba(200,200,208,.12);border:1px solid rgba(200,200,208,.25);
  font-size:11px;font-weight:700;color:var(--silver);letter-spacing:.4px;
  width:fit-content;
}
.hero-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--silver-l)}
.hero-title{
  font-size:clamp(22px,4vw,38px);font-weight:800;
  line-height:1.1;letter-spacing:-.5px;margin-bottom:10px;
  color:var(--text);
}
.hero-meta{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hero-year{font-size:13px;color:var(--text-m)}
.hero-rating{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--gold-l);font-weight:600}
.hero-overview{
  font-size:13.5px;color:var(--text-m);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:20px;max-width:460px;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 24px;border-radius:var(--r-xl);
  background:#E50914;
  color:#fff;font-size:14px;font-weight:700;
  border:none;cursor:pointer;text-decoration:none;
  transition:opacity var(--t),transform var(--t);
  box-shadow:0 4px 20px rgba(229,9,20,.25);
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-secondary{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 22px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.08);border:1px solid var(--border-h);
  color:var(--text);font-size:14px;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:background var(--t),border-color var(--t);
}
.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(200,200,208,.4)}

/* Hero dots */
.hero-dots{
  position:absolute;bottom:16px;right:20px;
  display:flex;gap:7px;align-items:center;
}
.hero-dot{
  width:6px;height:6px;border-radius:50%;background:rgba(200,200,208,.3);
  border:none;cursor:pointer;padding:0;transition:all var(--t);
}
.hero-dot.active{width:18px;border-radius:3px;background:var(--silver)}

/* ── Grid (detail page, etc) ── */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
}

/* ── Tabs ── */
.tabs-row{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px;border-bottom:1px solid var(--border);margin-bottom:24px}
.tabs-row::-webkit-scrollbar{display:none}
.tab-btn{
  padding:10px 16px;border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:13px;font-weight:600;color:var(--text-d);
  background:none;border:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;cursor:pointer;white-space:nowrap;
  transition:color var(--t),border-color var(--t);
}
.tab-btn:hover{color:var(--text-m)}
.tab-btn.active{color:var(--silver-l);border-bottom-color:var(--silver)}

/* ── Skeleton ── */
.skel{
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-h) 50%,var(--bg-card) 75%);
  background-size:200% 100%;
  animation:skelAnim 1.6s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes skelAnim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── State box ── */
.state-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 20px;gap:12px;text-align:center;
}
.state-icon{opacity:.25}
.state-title{font-size:15px;font-weight:600;color:var(--text-m)}
.state-msg{font-size:13px;color:var(--text-d)}

/* ── Toast ── */
.toasts{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:10px 16px;border-radius:var(--r);background:var(--bg-1);
  border:1px solid var(--border-h);color:var(--text);font-size:13px;
  box-shadow:var(--sh);animation:toastIn .25s var(--ease);
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Footer ── */
.footer{
  padding:28px 20px;border-top:1px solid var(--border);
  text-align:center;
}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.footer-note{font-size:11.5px;color:var(--text-d);max-width:480px;margin:0 auto}

/* ── Details page ── */
.detail-hero{
  position:relative;height:420px;overflow:hidden;background:var(--bg-1);
}
.detail-hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center top;
  filter:blur(3px) brightness(.3);transform:scale(1.05);
}
.detail-hero-grad{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 0%,rgba(7,7,14,.5) 60%,transparent 100%);
}
.detail-hero-content{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:32px 20px;gap:20px;max-width:1440px;margin:0 auto;left:0;right:0;
}
.detail-poster{
  width:120px;flex-shrink:0;border-radius:var(--r);overflow:hidden;
  border:2px solid rgba(200,200,208,.2);box-shadow:var(--sh);
}
.detail-poster img{width:100%;display:block}
.detail-meta{flex:1;min-width:0}
.detail-title{font-size:clamp(18px,3vw,28px);font-weight:800;line-height:1.15;margin-bottom:8px}
.detail-sub{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.detail-tag{
  padding:3px 9px;border-radius:100px;font-size:11px;font-weight:600;
  background:rgba(200,200,208,.1);color:var(--silver);border:1px solid var(--border);
}
.detail-rating{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--gold-l);font-weight:700}
.detail-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

.detail-body{padding:24px 20px 48px;max-width:1440px;margin:0 auto}
.detail-section{margin-bottom:32px}
.detail-section-title{font-size:15px;font-weight:700;color:var(--silver);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.detail-overview{font-size:14px;color:var(--text-m);line-height:1.7}

/* Cast row */
.cast-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.cast-row::-webkit-scrollbar{display:none}
.cast-card{flex-shrink:0;width:78px;text-align:center}
.cast-photo{width:62px;height:62px;border-radius:50%;overflow:hidden;margin:0 auto 6px;background:var(--bg-2);border:2px solid var(--border)}
.cast-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.cast-name{font-size:10.5px;font-weight:600;color:var(--text);line-height:1.3}
.cast-char{font-size:10px;color:var(--text-d);margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* Episodes */
.ep-list{display:flex;flex-direction:column;gap:8px}
.ep-item{
  display:flex;gap:12px;padding:10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:border-color var(--t),background var(--t);text-decoration:none;
}
.ep-item:hover{border-color:var(--border-h);background:var(--bg-card-h)}
.ep-still{width:100px;flex-shrink:0;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2)}
.ep-still img{width:100%;height:100%;object-fit:cover}
.ep-info{flex:1;min-width:0}
.ep-num{font-size:11px;color:var(--text-d);margin-bottom:3px}
.ep-title{font-size:13px;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ep-overview{font-size:11.5px;color:var(--text-m);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep-play{width:32px;height:32px;border-radius:50%;flex-shrink:0;align-self:center;display:flex;align-items:center;justify-content:center;background:rgba(200,200,208,.1);border:1px solid var(--border);transition:all var(--t)}
.ep-item:hover .ep-play{background:var(--silver);color:var(--bg)}

/* Season selector */
.season-sel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.season-btn{
  padding:6px 14px;border-radius:var(--r-xl);font-size:12px;font-weight:600;
  background:var(--bg-card);border:1px solid var(--border);color:var(--text-m);
  cursor:pointer;transition:all var(--t);
}
.season-btn:hover{border-color:var(--border-h);color:var(--text)}
.season-btn.active{background:rgba(200,200,208,.12);border-color:var(--silver-d);color:var(--silver-l)}

/* ── Player page ── */
.player-wrap{
  background:#000;position:relative;
  padding-top:calc(var(--nav-h));
}
.player-frame-wrap{
  width:100%;aspect-ratio:16/9;max-height:calc(100vh - var(--nav-h) - 120px);
  background:#000;position:relative;
}
.player-frame{width:100%;height:100%;border:none;display:block}
.player-info{padding:16px 20px;max-width:1440px;margin:0 auto}
.player-title{font-size:18px;font-weight:700;margin-bottom:4px}
.player-meta{font-size:13px;color:var(--text-d)}

/* Share page */
.share-page{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px;text-align:center;gap:20px;
}
.share-poster{width:140px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.share-poster img{width:100%;display:block}
.share-cta{
  font-size:22px;font-weight:800;line-height:1.2;
  background:linear-gradient(135deg,var(--silver-l),var(--silver-d));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.share-sub{font-size:14px;color:var(--text-m);max-width:300px}

/* ── Responsive ── */
@media(max-width:768px){
  .hero-banner{height:390px;width:calc(100% - 24px);margin-top:12px}
  .hero-content{padding:28px 20px 30px}
  .section{padding:24px 14px}
  .detail-hero{height:340px}
  .detail-hero-content{padding:20px 14px}
  .detail-poster{width:90px}
  .detail-body{padding:20px 14px 48px}
  .card{width:130px}
}
@media(max-width:480px){
  .hero-banner{height:330px;width:calc(100% - 20px);border-radius:16px}
  .hero-title{font-size:20px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card{width:100%}
}

/* ======================================================================
   DYYMOVIE THEME OVERLAY
   Visual-only theme adaptation based on the supplied reference website.
   Layout, HTML structure, links, API logic and JavaScript behavior remain unchanged.
   ====================================================================== */
:root{
  --bg:#1e1e1e;
  --bg-1:#1e1e1e;
  --bg-2:#1e1e1e;
  --bg-card:#1e1e1e;
  --bg-card-h:#1e1e1e;
  --silver:#e2e8f0;
  --silver-l:#f1f5f9;
  --silver-d:#94a3b8;
  --gold:#f59e0b;
  --gold-l:#fbbf24;
  --text:#e2e8f0;
  --text-m:#94a3b8;
  --text-d:#64748b;
  --border:transparent;
  --border-h:transparent;
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:999px;
  --sh:8px 8px 16px #121212,-8px -8px 16px #2a2a2a;
  --sh-silver:0 0 0 transparent;
  --nm-glow:8px 8px 16px #121212,-8px -8px 16px #2a2a2a;
  --nm-inset:inset 6px 6px 12px #121212,inset -6px -6px 12px #2a2a2a;
  --nm-sm-glow:4px 4px 8px #121212,-4px -4px 8px #2a2a2a;
  --nm-sm-inset:inset 3px 3px 6px #121212,inset -3px -3px 6px #2a2a2a;
  --theme-primary:#2563eb;
  --theme-primary-soft:#3b82f6;
}

html,body{background:#1e1e1e!important;color:var(--text)}
body{font-family:'Inter',system-ui,sans-serif;transition:background .3s ease}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#1e1e1e}
::-webkit-scrollbar-thumb{background:#4b5563;border-radius:999px}

/* Navigation */
.navbar{
  background:rgba(30,30,30,.96)!important;
  border-bottom:0!important;
  box-shadow:0 5px 16px rgba(0,0,0,.28),0 -2px 10px rgba(255,255,255,.025);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.nav-inner{gap:16px}
.nav-search{
  background:#1e1e1e!important;
  border:0!important;
  box-shadow:var(--nm-sm-inset);
}
.nav-search:focus-within{box-shadow:var(--nm-inset)}
.nav-search svg{color:#94a3b8}
.nav-search input{color:#e2e8f0}
.nav-search input::placeholder{color:#64748b}
.nav-btn{
  background:#1e1e1e!important;
  color:#3b82f6!important;
  box-shadow:var(--nm-sm-glow);
}
.nav-btn:hover{opacity:1;transform:translateY(-1px);box-shadow:var(--nm-glow)}
.nav-btn:active{transform:translateY(1px);box-shadow:var(--nm-sm-inset)}
.hamburger span{background:#94a3b8}
.mob-menu{
  background:#1e1e1e!important;
  border-bottom:0!important;
  box-shadow:0 12px 24px rgba(0,0,0,.3);
}
.mob-menu .nav-search{box-shadow:var(--nm-sm-inset)}
.mob-nav-a{color:#94a3b8}
.mob-nav-a:hover,.mob-nav-a.active{color:#e2e8f0;background:#1e1e1e;box-shadow:var(--nm-sm-inset)}

/* Main sections */
.page{background:#1e1e1e}
.section{background:#1e1e1e}
.sec-title{color:#e2e8f0}
.sec-title::before{background:#2563eb}
.sec-see-all{color:#3b82f6}
.sec-see-all:hover{color:#60a5fa}

/* Cards */
.card{
  background:#1e1e1e!important;
  border:0!important;
  border-radius:18px;
  box-shadow:var(--nm-sm-glow);
}
.card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:var(--nm-glow);
}
.card-thumb{background:#1e1e1e}
.card-info{background:#1e1e1e}
.card-title{color:#e2e8f0}
.card-meta{color:#94a3b8}
.card-overlay{background:linear-gradient(to top,rgba(30,30,30,.96),transparent 65%)}
.card-play{
  background:#2563eb;
  color:#fff;
  border-radius:12px;
  box-shadow:0 5px 14px rgba(37,99,235,.28);
}
.card-badge{
  background:rgba(30,30,30,.72);
  color:#93c5fd;
  border:0;
  box-shadow:var(--nm-sm-glow);
}
.card-badge.new{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.16)}

/* Home hero: preserve existing movie banner structure, change only its visual treatment */
.hero-banner{
  background:#1e1e1e;
  border:0;
  border-radius:24px;
  box-shadow:var(--nm-glow);
}
.hero-bg{filter:saturate(.92)}
.hero-grad{background:linear-gradient(to top,rgba(30,30,30,.98) 0%,rgba(30,30,30,.48) 62%,rgba(30,30,30,.05) 100%)}
.hero-badge{
  background:#1e1e1e;
  border:0;
  color:#93c5fd;
  box-shadow:var(--nm-sm-glow);
}
.hero-badge-dot{background:#3b82f6}
.hero-title{color:#f1f5f9}
.hero-year,.hero-overview{color:#94a3b8}
.hero-rating{color:#fbbf24}
.btn-primary{
  background:#2563eb!important;
  color:#fff!important;
  border:0;
  box-shadow:0 6px 18px rgba(37,99,235,.28);
}
.btn-primary:hover{opacity:1;transform:translateY(-2px);box-shadow:0 9px 22px rgba(37,99,235,.34)}
.btn-secondary{
  background:#1e1e1e!important;
  border:0!important;
  color:#e2e8f0!important;
  box-shadow:var(--nm-sm-glow);
}
.btn-secondary:hover{background:#1e1e1e!important;border:0!important;box-shadow:var(--nm-glow)}
.hero-dot{background:#64748b}
.hero-dot.active{background:#3b82f6}

/* Detail page */
.detail-hero{background:#1e1e1e}
.detail-hero-bg{filter:blur(3px) brightness(.27) saturate(.85)}
.detail-hero-grad{background:linear-gradient(to top,#1e1e1e 0%,rgba(30,30,30,.62) 62%,rgba(30,30,30,.08) 100%)}
.detail-poster{border:0;box-shadow:var(--nm-glow);border-radius:18px}
.detail-title{color:#f1f5f9}
.detail-sub{color:#94a3b8}
.detail-tag{background:#1e1e1e;border:0;color:#94a3b8;box-shadow:var(--nm-sm-glow)}
.detail-rating{color:#fbbf24}
.detail-section-title{color:#e2e8f0;border-bottom:0}
.detail-overview{color:#94a3b8}
.cast-photo{background:#1e1e1e;border:0;box-shadow:var(--nm-sm-inset)}
.cast-name{color:#e2e8f0}
.cast-char{color:#64748b}
.ep-item{background:#1e1e1e;border:0;box-shadow:var(--nm-sm-glow)}
.ep-item:hover{background:#1e1e1e;border:0;box-shadow:var(--nm-glow)}
.ep-still{background:#1e1e1e}
.ep-num,.ep-overview{color:#64748b}
.ep-title{color:#e2e8f0}
.ep-play{background:#1e1e1e;border:0;box-shadow:var(--nm-sm-glow)}
.ep-item:hover .ep-play{background:#2563eb;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.28)}
.season-btn{background:#1e1e1e;border:0;color:#94a3b8;box-shadow:var(--nm-sm-glow)}
.season-btn:hover{border:0;color:#e2e8f0;box-shadow:var(--nm-glow)}
.season-btn.active{background:#1e1e1e;border:0;color:#60a5fa;box-shadow:var(--nm-sm-inset)}

/* Player: keep the actual player untouched, theme surrounding controls/info */
.player-wrap{background:#000}
.player-info{background:#1e1e1e;border-radius:0}
.player-title{color:#f1f5f9}
.player-meta{color:#94a3b8}

/* Tabs / states / skeleton / toast */
.tabs-row{border-bottom:0}
.tab-btn{color:#64748b}
.tab-btn:hover{color:#94a3b8}
.tab-btn.active{color:#60a5fa;border-bottom-color:#2563eb}
.skel{background:linear-gradient(110deg,#1a1a1a 8%,#282828 18%,#1a1a1a 33%);background-size:200% 100%}
.state-title{color:#94a3b8}
.state-msg{color:#64748b}
.toast{background:#1e1e1e;border:0;color:#e2e8f0;box-shadow:var(--nm-glow)}

/* Developer page */
.dev-page{background:#1e1e1e}
.dev-kicker{color:#3b82f6}
.dev-avatar-wrap::before{background:rgba(37,99,235,.1);box-shadow:0 0 0 10px rgba(37,99,235,.06),0 0 45px rgba(37,99,235,.12)}
.dev-avatar{border:5px solid #242424;box-shadow:var(--nm-glow),0 0 0 2px rgba(59,130,246,.25)}
.dev-verified{border-color:#3b82f6;color:#3b82f6}
.dev-bio{color:#94a3b8}
.dev-link{
  border:0;
  background:#1e1e1e;
  box-shadow:var(--nm-sm-glow);
}
.dev-link:hover{background:#1e1e1e;border:0;box-shadow:var(--nm-glow)}
.dev-link span{color:#cbd5e1}
.dev-coffee{background:#1e1e1e;border:0;box-shadow:var(--nm-sm-glow)}
.dev-coffee:hover{background:#1e1e1e;box-shadow:var(--nm-glow)}
.dev-coffee-icon{background:#1e1e1e;color:#3b82f6;box-shadow:var(--nm-sm-inset)}
.dev-coffee-sub,.dev-note{color:#64748b}

/* Footer */
.footer{background:#1e1e1e;border-top:0;box-shadow:0 -4px 14px rgba(0,0,0,.18)}
.footer-note{color:#64748b}

/* Share page */
.share-page{background:#1e1e1e}
.share-poster{box-shadow:var(--nm-glow);border-radius:18px}
.share-cta{background:linear-gradient(135deg,#f1f5f9,#60a5fa);-webkit-background-clip:text;background-clip:text}
.share-sub{color:#94a3b8}

@media(max-width:768px){
  .hero-banner{box-shadow:var(--nm-glow)}
  .card{box-shadow:var(--nm-sm-glow)}
  .card:hover{box-shadow:var(--nm-glow)}
}

@media(max-width:480px){
  .hero-banner{border-radius:20px}
}

body{padding-bottom:96px}
.page{padding-bottom:20px}