/* ===========================================================
   PROJECTOR  ·  design system
   Cinema-dark UI. Ink-blue base, screen-light accents.
   Display: Bricolage Grotesque · Body: Plus Jakarta Sans
   =========================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  /* --- surface ladder: ink, not black --- */
  --bg:#08090E;
  --bg-2:#0C0E14;
  --s1:#12141C;
  --s2:#191C26;
  --s3:#222631;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);

  /* --- text --- */
  --txt:#F6F7FA;
  --muted:#9DA1B0;
  --dim:#646979;

  /* --- accent (admin panel se aata hai) --- */
  --accent:#E50914;
  --accent-soft:color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-glow:color-mix(in srgb, var(--accent) 40%, transparent);

  /* --- semantic --- */
  --gold:#F5C451;
  --ok:#3DD68C;
  --warn:#F2B441;
  --err:#F2555A;

  /* --- shape + motion --- */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-full:999px;
  --dock-h:66px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --fast:.18s var(--ease);
  --slow:.4s var(--ease);

  --shadow-1:0 2px 10px rgba(0,0,0,.4);
  --shadow-2:0 12px 34px rgba(0,0,0,.55);
  --shadow-pop:0 18px 50px rgba(0,0,0,.6);
}

html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:hidden}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  overflow-x:hidden;
  width:100%;
  padding-bottom:calc(var(--dock-h) + 26px + env(safe-area-inset-bottom));
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}

h1,h2,h3,.display{
  font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.08;
  font-variation-settings:'wdth' 100,'opsz' 24;
}

::-webkit-scrollbar{width:0;height:0}
*{scrollbar-width:none}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* page enters softly — one small orchestrated moment, nothing more */
@media (prefers-reduced-motion:no-preference){
  body{animation:pageIn .34s var(--ease)}
  @keyframes pageIn{from{opacity:0;transform:translateY(6px)}}
}

/* -----------------------------------------------------------
   HEADER
   ----------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-top,0px));
  padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(8,9,14,.94) 40%,rgba(8,9,14,0));
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
}
.hdr::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}
.hdr.plain{position:fixed;background:linear-gradient(180deg,rgba(8,9,14,.72),transparent);backdrop-filter:none}
.hdr.plain::after{display:none}

.hdr .logo{
  flex:1;min-width:0;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:20px;font-weight:800;letter-spacing:-.045em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdr .logo span{color:var(--accent)}

.hdr .ico{
  width:38px;height:38px;flex-shrink:0;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  transition:background var(--fast),transform var(--fast);
}
.hdr .ico:active{transform:scale(.92);background:rgba(255,255,255,.12)}
.hdr .ico svg{width:18px;height:18px;stroke:var(--txt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hdr .av{width:34px;height:34px;border-radius:var(--r-full);object-fit:cover;
  border:1.5px solid var(--line-2);flex-shrink:0}
.nav-desk{display:none}

/* -----------------------------------------------------------
   DOCK  ·  signature floating nav
   ----------------------------------------------------------- */
.nav{
  position:fixed;z-index:80;
  left:12px;right:12px;
  bottom:calc(10px + env(safe-area-inset-bottom));
  height:var(--dock-h);
  display:flex;align-items:stretch;
  padding:6px;
  border-radius:var(--r-lg);
  background:rgba(18,20,28,.82);
  backdrop-filter:saturate(180%) blur(26px);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-pop);
}
.nav a{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:9.5px;font-weight:600;letter-spacing:.01em;
  color:var(--dim);
  border-radius:var(--r-sm);
  transition:color var(--fast),transform var(--fast);
}
.nav a:active{transform:scale(.9)}
.nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--fast)}
.nav a.on{color:var(--txt)}
.nav a.on svg{stroke:var(--accent)}
/* sliding indicator */
.nav a.on::before{
  content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:var(--r-full);
  background:var(--accent);
  box-shadow:0 0 14px var(--accent-glow);
  animation:dockIn .32s var(--ease);
}
@keyframes dockIn{from{width:4px;opacity:0}to{width:22px;opacity:1}}

/* -----------------------------------------------------------
   HERO  ·  projector beam
   ----------------------------------------------------------- */
.hero{position:relative;margin-bottom:4px}
.hero-slide{position:relative;aspect-ratio:4/5;max-height:66vh;overflow:hidden}
@media(min-width:560px){.hero-slide{aspect-ratio:16/9;max-height:64vh}}

.hero-slide img.bg{
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  transform:scale(1.06);
  animation:beamDrift 18s var(--ease) infinite alternate;
}
@keyframes beamDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}

/* the beam: light spilling from the top of frame */
.hero-slide::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -12%, color-mix(in srgb,var(--accent) 22%,transparent) 0%, transparent 62%),
    radial-gradient(90% 50% at 50% 0%, rgba(255,255,255,.16) 0%, transparent 55%);
  mix-blend-mode:screen;
  opacity:.9;
}
.hero-slide::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(8,9,14,.55) 0%,
    rgba(8,9,14,0) 26%,
    rgba(8,9,14,.06) 44%,
    rgba(8,9,14,.82) 76%,
    var(--bg) 100%);
}

.hero-in{position:absolute;left:0;right:0;bottom:20px;z-index:3;padding:0 20px;text-align:center}
.hero-in img.logo{max-height:88px;width:auto;margin:0 auto 14px;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
.hero-in h2{font-size:clamp(26px,7.5vw,38px);margin-bottom:10px;
  text-shadow:0 3px 22px rgba(0,0,0,.75)}

.hero-meta{
  display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;
  font-size:12px;font-weight:600;color:var(--muted);margin-bottom:18px;
}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta span + span::before{
  content:'';width:3px;height:3px;border-radius:50%;background:var(--dim);
}

.hero-btns{display:flex;gap:10px;justify-content:center}
.hero-dots{display:flex;gap:5px;justify-content:center;padding:4px 0 10px}
.hero-dots i{width:5px;height:5px;border-radius:var(--r-full);background:var(--s3);transition:all var(--slow)}
.hero-dots i.on{background:var(--accent);width:20px;box-shadow:0 0 10px var(--accent-glow)}

/* -----------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;
  border-radius:var(--r-full);
  font-size:14.5px;font-weight:700;letter-spacing:-.015em;
  background:#fff;color:#0A0B10;
  box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform var(--fast),filter var(--fast),background var(--fast);
  white-space:nowrap;
}
.btn:active{transform:scale(.965);filter:brightness(.94)}
.btn svg{width:17px;height:17px;fill:currentColor}

.btn.sec{
  background:rgba(255,255,255,.1);color:var(--txt);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:none;
}
.btn.sec:active{background:rgba(255,255,255,.18)}

.btn.accent{
  background:var(--accent);color:#fff;
  box-shadow:0 6px 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--txt);box-shadow:none}
.btn.sm{height:38px;padding:0 16px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;pointer-events:none}

/* icon-only round button */
.iconbtn{
  width:48px;height:48px;flex-shrink:0;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:rgba(255,255,255,.09);border:1px solid var(--line-2);
  transition:transform var(--fast),background var(--fast);
}
.iconbtn:active{transform:scale(.92);background:rgba(255,255,255,.16)}
.iconbtn svg{width:20px;height:20px;stroke:var(--txt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.on{background:var(--accent-soft);border-color:var(--accent)}
.iconbtn.on svg{stroke:var(--accent)}

/* -----------------------------------------------------------
   ROWS + CARDS
   ----------------------------------------------------------- */
.row{margin:26px 0}
.row-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 12px}
.row-hd h3{font-size:17px;letter-spacing:-.03em}
.row-hd a{font-size:12px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:3px}

.rail{
  display:flex;gap:11px;
  overflow-x:auto;padding:2px 16px 6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.rail > *{scroll-snap-align:start;flex:0 0 auto}

.card{width:116px;position:relative;transition:transform var(--fast)}
.card:active{transform:scale(.955)}
.card img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  border-radius:var(--r);
  background:linear-gradient(140deg,var(--s2),var(--s1));
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}
.card b{
  display:block;font-size:12.5px;font-weight:600;line-height:1.32;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card span{display:block;font-size:10.5px;font-weight:500;color:var(--dim);margin-top:2px}

.card .badge{
  position:absolute;top:7px;left:7px;z-index:2;
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(8,9,14,.72);backdrop-filter:blur(8px);
  color:var(--gold);font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:var(--r-full);
  border:1px solid rgba(245,196,81,.22);
  font-variant-numeric:tabular-nums;
}
.card .pro{
  position:absolute;top:7px;right:7px;z-index:2;
  background:var(--accent);color:#fff;
  font-size:8.5px;font-weight:800;letter-spacing:.06em;
  padding:3px 7px;border-radius:5px;
  box-shadow:0 2px 10px var(--accent-glow);
}
.card .bar{
  position:absolute;left:8px;right:8px;bottom:44px;z-index:2;
  height:3px;border-radius:var(--r-full);
  background:rgba(255,255,255,.25);overflow:hidden;
}
.card .bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}

.card.wide{width:212px}
.card.wide img{aspect-ratio:16/9}
.card.wide .bar{bottom:44px}

/* top 10 — the number is cut out of the poster's light */
.top10{display:flex;align-items:flex-end;gap:0;width:auto}
.top10 .num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:86px;font-weight:800;line-height:.74;letter-spacing:-.08em;
  color:transparent;-webkit-text-stroke:2px var(--s3);
  margin-right:-18px;z-index:1;padding-bottom:2px;
}
.top10 img{width:100px;aspect-ratio:2/3;border-radius:var(--r);object-fit:cover;
  border:1px solid var(--line);box-shadow:var(--shadow-1)}

/* -----------------------------------------------------------
   GRID
   ----------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px 12px;padding:0 16px}
.grid .card{width:100%}
@media(min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:20px 16px}}

/* -----------------------------------------------------------
   DETAIL
   ----------------------------------------------------------- */
.dt-hero{position:relative;aspect-ratio:16/10;max-height:46vh;overflow:hidden}
@media(min-width:560px){.dt-hero{aspect-ratio:16/9;max-height:58vh}}
.dt-hero img{width:100%;height:100%;object-fit:cover;object-position:center 24%}
.dt-hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(110% 60% at 50% -8%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%);
  mix-blend-mode:screen;
}
.dt-hero::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(8,9,14,.5),rgba(8,9,14,.05) 34%,rgba(8,9,14,.86) 82%,var(--bg));
}

.dt-body{padding:0 18px;margin-top:-52px;position:relative;z-index:3;max-width:100%}
.dt-body h1{font-size:clamp(24px,6.8vw,34px);margin-bottom:12px;overflow-wrap:anywhere}
.dt-body > img[alt]{margin-bottom:14px;filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}

.dt-meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  font-size:12px;font-weight:600;color:var(--muted);margin-bottom:18px}
.chip{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:var(--r-full);padding:5px 11px;
  font-size:11px;font-weight:600;color:var(--muted);
  transition:background var(--fast);
}
.chip:active{background:rgba(255,255,255,.1)}
.chip.gold{color:var(--gold);border-color:rgba(245,196,81,.24);background:rgba(245,196,81,.07);
  font-variant-numeric:tabular-nums}

.dt-actions{display:flex;gap:10px;margin-bottom:20px;align-items:center}
.dt-actions .btn{flex:1;height:52px;font-size:15px}

.ov{font-size:14px;line-height:1.68;color:#C6C9D4;margin-bottom:6px}
.ov.clip{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.more{display:inline-block;color:var(--accent);font-size:12.5px;font-weight:700;
  margin:2px 0 22px;padding:4px 0}

.facts{display:grid;gap:0;margin-bottom:24px;font-size:13px;
  border-top:1px solid var(--line)}
.facts div{display:flex;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.facts div span:first-child{color:var(--dim);min-width:104px;flex-shrink:0;font-weight:500}
.facts div span:last-child{color:#DDE0E8;font-weight:500;min-width:0;overflow-wrap:anywhere}

.cast-c{width:78px;text-align:center}
.cast-c img{width:78px;height:78px;border-radius:var(--r-full);object-fit:cover;
  background:var(--s2);border:1px solid var(--line)}
.cast-c b{display:block;font-size:11.5px;font-weight:600;margin-top:8px;line-height:1.3}
.cast-c span{display:block;font-size:10px;color:var(--dim);margin-top:1px}

/* -----------------------------------------------------------
   SEASONS + EPISODES
   ----------------------------------------------------------- */
.seasons{display:flex;gap:8px;overflow-x:auto;padding:0 16px 14px}
.seasons button{
  flex:0 0 auto;
  height:38px;padding:0 18px;border-radius:var(--r-full);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:all var(--fast);
}
.seasons button.on{background:var(--txt);border-color:var(--txt);color:#0A0B10}

.ep{
  display:flex;gap:13px;align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  transition:background var(--fast);
}
.ep:active{background:var(--s1)}
.ep img{width:124px;aspect-ratio:16/9;border-radius:var(--r-sm);object-fit:cover;
  background:var(--s2);flex-shrink:0;border:1px solid var(--line)}
.ep .t{flex:1;min-width:0}
.ep .t .num{font-size:10.5px;font-weight:700;color:var(--accent);letter-spacing:.03em;
  text-transform:uppercase;display:block;margin-bottom:3px}
.ep .t b{font-size:13.5px;font-weight:600;display:block;line-height:1.35}
.ep .t p{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep.off{opacity:.4}

/* -----------------------------------------------------------
   SEARCH + FILTERS
   ----------------------------------------------------------- */
.search-wrap{padding:8px 16px 14px;position:sticky;top:0;z-index:35;
  background:linear-gradient(180deg,var(--bg) 72%,transparent)}
.search-in{
  display:flex;align-items:center;gap:11px;
  background:var(--s1);border:1px solid var(--line-2);
  border-radius:var(--r-full);padding:0 18px;height:52px;
  transition:border-color var(--fast),background var(--fast);
}
.search-in:focus-within{border-color:var(--accent);background:var(--s2)}
.search-in input{flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--txt);font-size:16px;font-weight:500}
.search-in input::placeholder{color:var(--dim)}
.search-in svg{width:19px;height:19px;stroke:var(--dim);fill:none;stroke-width:2;
  stroke-linecap:round;flex-shrink:0}

.filters{display:flex;gap:8px;overflow-x:auto;padding:0 16px 14px}
.filters a{
  flex:0 0 auto;height:36px;display:inline-flex;align-items:center;padding:0 16px;
  border-radius:var(--r-full);background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted);
  white-space:nowrap;transition:all var(--fast);
}
.filters a.on{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 4px 16px var(--accent-glow)}

/* -----------------------------------------------------------
   SECTIONS, EMPTY, PAGER, TOAST
   ----------------------------------------------------------- */
.sec-t{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;
  letter-spacing:-.03em;padding:0 16px;margin:26px 0 12px}

.empty{text-align:center;padding:64px 28px;color:var(--dim)}
.empty b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;
  font-weight:800;letter-spacing:-.03em;color:var(--txt);margin-bottom:8px}

.pager{display:flex;gap:10px;justify-content:center;padding:28px 16px 8px}
.pager a{height:44px;display:inline-flex;align-items:center;padding:0 22px;
  border-radius:var(--r-full);background:var(--s1);border:1px solid var(--line-2);
  font-size:13.5px;font-weight:600}

.toast-box{
  position:fixed;left:16px;right:16px;
  bottom:calc(var(--dock-h) + 26px + env(safe-area-inset-bottom));
  z-index:200;
  background:var(--s3);border:1px solid var(--line-2);
  border-radius:var(--r);padding:14px 18px;font-size:13.5px;font-weight:500;
  box-shadow:var(--shadow-pop);
  /* khali hone par bilkul chhupa rahe — warna neeche grey patti dikhti hai */
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.98);
  transition:opacity var(--fast),transform var(--slow),visibility var(--slow);
}
.toast-box.on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}

.skel{background:linear-gradient(100deg,var(--s1) 30%,var(--s2) 50%,var(--s1) 70%);
  background-size:220% 100%;animation:sh 1.4s infinite;border-radius:var(--r)}
@keyframes sh{from{background-position:200% 0}to{background-position:-120% 0}}

/* -----------------------------------------------------------
   AUTH SHEET
   ----------------------------------------------------------- */
.sheet{position:fixed;inset:0;z-index:300;background:rgba(4,5,8,.76);
  backdrop-filter:blur(8px);display:none;align-items:flex-end}
.sheet.on{display:flex;animation:fadeIn .2s var(--ease)}
@keyframes fadeIn{from{opacity:0}}
.sheet-in{
  width:100%;background:var(--s1);
  border:1px solid var(--line-2);border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:26px 22px calc(28px + env(safe-area-inset-bottom));
  animation:sheetUp .34s var(--ease);
}
@keyframes sheetUp{from{transform:translateY(100%)}}
.sheet-in::before{
  content:'';display:block;width:38px;height:4px;border-radius:var(--r-full);
  background:var(--s3);margin:-8px auto 20px;
}
.sheet-in h3{font-size:21px;margin-bottom:8px}
.sheet-in p{font-size:13.5px;color:var(--muted);margin-bottom:22px;line-height:1.55}

.gbtn{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  height:54px;background:#fff;color:#15161C;border-radius:var(--r-full);
  font-size:15px;font-weight:700;letter-spacing:-.015em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform var(--fast);
}
.gbtn:active{transform:scale(.975)}
.gbtn img{width:20px;height:20px}

/* -----------------------------------------------------------
   NOTICE + FOOTER
   ----------------------------------------------------------- */
.notice{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;
  font-size:13px;line-height:1.5;position:relative}
.notice b{display:block;font-weight:700;margin-bottom:2px}
.notice span{color:rgba(255,255,255,.86)}
.notice button{font-size:20px;line-height:1;opacity:.7;flex-shrink:0;padding:0 2px}
.notice.nx-info{background:linear-gradient(100deg,#1E3A8A,#1D4ED8)}
.notice.nx-success{background:linear-gradient(100deg,#14532D,#15803D)}
.notice.nx-warning{background:linear-gradient(100deg,#78350F,#A16207)}
.notice.nx-danger{background:linear-gradient(100deg,#7F1D1D,#B91C1C)}

.ftr{padding:36px 18px 30px;margin-top:40px;text-align:center;
  border-top:1px solid var(--line);
  background:radial-gradient(80% 100% at 50% 100%,rgba(255,255,255,.03),transparent)}
.ftr-links{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;margin-bottom:16px}
.ftr-links a{font-size:12.5px;font-weight:500;color:var(--muted)}
.ftr p{font-size:11.5px;color:var(--dim)}

/* ===========================================================
   PLAYER
   =========================================================== */
.op-root{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  overflow:hidden;user-select:none;touch-action:manipulation;
}
.op-root:fullscreen,.op-root:-webkit-full-screen{aspect-ratio:auto;height:100%;width:100%}
.op-video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.op-video::cue{background:rgba(0,0,0,.74);color:#fff;font-size:.92em;
  font-family:'Plus Jakarta Sans',sans-serif}

.op-ui{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,transparent 20%),
    linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.25) 26%,transparent 46%);
}
.op-root.op-active .op-ui{opacity:1;pointer-events:auto}

.op-top{position:absolute;top:0;left:0;right:0;padding:16px 18px;
  display:flex;align-items:center;gap:12px}
.op-title{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.015em;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.op-center{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;gap:40px}
.op-btn{display:grid;place-items:center;position:relative;color:#fff;padding:8px;
  transition:transform var(--fast),opacity var(--fast)}
.op-btn:active{transform:scale(.88)}
.op-btn svg{width:24px;height:24px;fill:currentColor}
.op-btn.op-big{
  width:72px;height:72px;border-radius:var(--r-full);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.op-btn.op-big svg{width:34px;height:34px}
.op-btn i{position:absolute;font-size:8.5px;font-style:normal;font-weight:800;
  top:50%;left:50%;transform:translate(-50%,-34%);font-variant-numeric:tabular-nums}

.op-bottom{position:absolute;bottom:0;left:0;right:0;padding:0 16px 16px}
.op-bar{position:relative;height:26px;display:flex;align-items:center;margin-bottom:4px}
.op-bar::before{content:'';position:absolute;left:0;right:0;height:4px;
  background:rgba(255,255,255,.2);border-radius:var(--r-full)}
.op-buf{position:absolute;left:0;height:4px;background:rgba(255,255,255,.36);
  border-radius:var(--r-full);width:0;transition:width .3s linear}
.op-prog{position:absolute;left:0;height:4px;background:var(--accent);
  border-radius:var(--r-full);width:0;box-shadow:0 0 12px var(--accent-glow)}
.op-knob{position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5)}
.op-seek{position:absolute;left:0;right:0;width:100%;height:26px;opacity:0;margin:0;cursor:pointer}

.op-row{display:flex;align-items:center;gap:2px}
.op-time{font-size:11.5px;font-weight:600;color:#E8E9EF;font-variant-numeric:tabular-nums;
  padding-right:8px}
.op-spacer{flex:1}

.op-gesture{position:absolute;top:0;bottom:0;width:36%;z-index:1}
.op-gl{left:0;border-radius:0 46% 46% 0}
.op-gr{right:0;border-radius:46% 0 0 46%}
.op-gesture.on{background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);
  animation:rippleOut .42s var(--ease)}
@keyframes rippleOut{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1)}}

.op-load{position:absolute;inset:0;display:none;place-items:center;z-index:3;pointer-events:none}
.op-root.op-loading .op-load{display:grid}
.op-spin{width:42px;height:42px;border:3px solid rgba(255,255,255,.16);
  border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.op-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
  background:rgba(0,0,0,.8);backdrop-filter:blur(10px);color:#fff;
  padding:10px 20px;border-radius:var(--r-full);font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.12);
  opacity:0;transition:opacity .2s;pointer-events:none}
.op-toast.on{opacity:1}

.op-err{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:rgba(0,0,0,.92);z-index:6;padding:28px;text-align:center}
.op-root.op-failed .op-err{display:flex}
.op-err-msg{font-size:14.5px;color:#E8E9EF;line-height:1.55;max-width:320px}
.op-retry{background:#fff;color:#0A0B10;border-radius:var(--r-full);height:46px;padding:0 30px;
  font-size:14px;font-weight:700}

.op-menu{
  position:absolute;right:14px;bottom:74px;z-index:7;
  background:rgba(16,18,25,.94);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:var(--r);
  min-width:200px;max-height:58%;overflow-y:auto;padding:6px;
  box-shadow:var(--shadow-pop);
  animation:menuIn .2s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(8px)}}
.op-mh{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);
  padding:10px 14px 6px;font-weight:700}
.op-mi{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;
  font-size:13.5px;font-weight:500;border-radius:var(--r-sm);color:#fff;transition:background var(--fast)}
.op-mi:active{background:rgba(255,255,255,.1)}
.op-mi span{color:var(--dim);font-size:12.5px;font-weight:500}

.op-next{position:absolute;right:16px;bottom:74px;z-index:8;max-width:290px}
.op-next-in{background:rgba(16,18,25,.94);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:var(--r);padding:16px;
  box-shadow:var(--shadow-pop);animation:menuIn .24s var(--ease)}
.op-next-label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:700}
.op-next-title{display:block;font-size:14px;font-weight:600;margin:6px 0 14px;line-height:1.35}
.op-next-btns{display:flex;gap:9px}
.op-next-btns button{flex:1;height:40px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:700}
.op-next-cancel{background:rgba(255,255,255,.12);color:#fff}
.op-next-go{background:#fff;color:#0A0B10}

/* ===========================================================
   ADS
   =========================================================== */
.ad-slot{padding:16px}
/* ad load na ho to slot bilkul jagah na le */
.ad-slot:empty{display:none;padding:0}
.ad-slot:not(.ad-slot-filled):empty{display:none}
.ad-unit{position:relative;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;min-height:58px;
  display:flex;align-items:center;justify-content:center}
.ad-unit img{width:100%;height:auto;border-radius:inherit}
.ad-unit .ad-html{width:100%;text-align:center;overflow:hidden}
.ad-label{position:absolute;top:6px;left:7px;z-index:2;background:rgba(0,0,0,.6);
  color:var(--dim);font-size:8.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:4px}
.ad-close{position:absolute;top:6px;right:6px;z-index:3;width:24px;height:24px;
  border-radius:var(--r-full);background:rgba(0,0,0,.66);color:#fff;
  font-size:15px;line-height:1;display:grid;place-items:center}
.ad-native .ad-unit{min-height:94px}
.ad-grid-slot{grid-column:1/-1}

.ad-sticky{
  position:fixed;left:12px;right:12px;z-index:70;
  bottom:calc(var(--dock-h) + 20px + env(safe-area-inset-bottom));
  padding:6px;border-radius:var(--r);
  background:rgba(18,20,28,.9);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);box-shadow:var(--shadow-2);
}
.ad-sticky .ad-unit{min-height:50px;max-height:110px;border:0;background:transparent}
body.has-sticky-ad{padding-bottom:calc(var(--dock-h) + 108px + env(safe-area-inset-bottom))}

.ad-inter{position:fixed;inset:0;z-index:400;background:rgba(4,5,8,.94);
  backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px}
.ad-inter-in{width:100%;max-width:410px;text-align:center}
.ad-inter-in .ad-unit{min-height:250px;margin-bottom:18px}
.ad-inter-close{background:var(--s3);border:1px solid var(--line-2);color:#fff;
  border-radius:var(--r-full);height:48px;padding:0 30px;font-size:14px;font-weight:700;min-width:170px}
.ad-inter-close:disabled{opacity:.5}

.ad-video{position:absolute;inset:0;z-index:20;background:#000}
.ad-video .ad-v{width:100%;height:100%;object-fit:contain;background:#000}
.ad-v-ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85))}
.ad-v-label{font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);padding:5px 12px;border-radius:var(--r-full);
  letter-spacing:.03em;font-variant-numeric:tabular-nums}
.ad-v-sp{flex:1}
.ad-v-skip{background:#fff;color:#0A0B10;border-radius:var(--r-full);height:38px;padding:0 18px;
  font-size:12.5px;font-weight:700}
.ad-v-skip:disabled{background:rgba(255,255,255,.24);color:#fff}
.ad-v-click{position:absolute;inset:0;z-index:1}

.ad-pause{position:absolute;inset:0;z-index:18;display:grid;place-items:center;
  background:rgba(0,0,0,.76);padding:26px}
.ad-pause .ad-unit{max-width:350px;width:100%}
.ad-overlay{position:absolute;left:14px;right:14px;bottom:74px;z-index:15}
.ad-overlay .ad-unit{max-height:92px;background:rgba(16,18,25,.94);border-color:var(--line-2)}

/* ===========================================================
   DESKTOP
   =========================================================== */
@media(min-width:900px){
  body{padding-bottom:0}
  .nav{display:none}
  .hdr{padding:16px 40px;gap:28px}
  .hdr .logo{flex:0 0 auto;font-size:22px}
  .nav-desk{display:flex;gap:26px;flex:1}
  .nav-desk a{font-size:13.5px;font-weight:600;color:var(--muted);transition:color var(--fast)}
  .nav-desk a:hover{color:var(--txt)}
  .nav-desk a.on{color:var(--txt)}
  .nav-desk a.on{position:relative}
  .nav-desk a.on::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
    background:var(--accent);border-radius:2px}

  .row-hd,.rail,.grid,.dt-body,.search-wrap,.filters,.seasons,.sec-t,.ad-slot{
    padding-left:40px;padding-right:40px}
  .ep{padding-left:40px;padding-right:40px}
  .card{width:158px}
  .card.wide{width:290px}
  .top10 img{width:130px}
  .top10 .num{font-size:110px;margin-right:-22px}
  .card:hover img{transform:translateY(-4px);box-shadow:var(--shadow-2),0 0 0 1px var(--line-2)}
  .card img{transition:transform var(--fast),box-shadow var(--fast)}
  .hero-in{bottom:44px}
  .dt-body{max-width:900px;margin-left:auto;margin-right:auto}
  .search-in{max-width:620px;margin:0 auto}
  .ad-sticky{left:auto;right:24px;bottom:24px;max-width:420px}
  body.has-sticky-ad{padding-bottom:130px}
  .toast-box{left:auto;right:24px;bottom:24px;max-width:380px}
}

/* -----------------------------------------------------------
   PROFILE
   ----------------------------------------------------------- */
.profile{text-align:center;padding:34px 20px 26px;position:relative}
.profile::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 68%);
  filter:blur(26px);pointer-events:none;
}
.profile img{
  width:86px;height:86px;border-radius:var(--r-full);object-fit:cover;
  margin:0 auto 14px;background:var(--s2);
  border:2px solid var(--line-2);box-shadow:var(--shadow-2);position:relative;
}
.profile h2{font-size:22px;position:relative}
.profile p{font-size:13px;color:var(--muted);margin-top:4px;position:relative}

/* ===========================================================
   SIGN-IN SHEET  ·  perks
   =========================================================== */
.sheet-perks{list-style:none;margin:-6px 0 22px;display:grid;gap:11px}
.sheet-perks li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:#C6C9D4}
.sheet-perks svg{width:15px;height:15px;flex-shrink:0;stroke:var(--ok);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sheet-legal{margin:16px 0 0;font-size:11.5px;color:var(--dim);text-align:center;line-height:1.6}
.sheet-legal a{color:var(--muted);text-decoration:underline}
.sheet-later{display:block;width:100%;margin-top:14px;height:44px;
  font-size:13.5px;font-weight:600;color:var(--muted)}

/* ===========================================================
   WATCH PAGE  ·  below player
   =========================================================== */
.wp-below{padding:18px 18px 0}
.wp-title{font-size:20px;line-height:1.25;margin-bottom:12px}
.wp-meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:20px}

.wp-servers{margin-bottom:20px}
.wp-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.wp-srv-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.wp-srv{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 16px;border-radius:var(--r-full);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:all var(--fast);
}
.wp-srv i{width:7px;height:7px;border-radius:50%;background:var(--dim);flex-shrink:0}
.wp-srv em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.09);color:var(--muted)}
.wp-srv.on{background:var(--accent-soft);border-color:var(--accent);color:var(--txt)}
.wp-srv.on i{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.wp-hint{font-size:11.5px;color:var(--dim);margin-top:9px}

.wp-tools{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.wp-tool{
  flex:1;min-width:96px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  height:64px;border-radius:var(--r);
  background:var(--s1);border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:var(--muted);
  transition:all var(--fast);
}
.wp-tool:active{transform:scale(.96);background:var(--s2)}
.wp-tool svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wp-ov{font-size:13.5px;line-height:1.65;color:#B9BDCA;margin-bottom:8px}
.wp-below .row{margin-left:-18px;margin-right:-18px}

/* ===========================================================
   COMMENTS
   =========================================================== */
.cm-wrap{margin-top:30px;padding-bottom:10px}
.cm-box{display:flex;gap:11px;padding:0 16px 18px;align-items:flex-start}
.cm-av{width:36px;height:36px;border-radius:var(--r-full);object-fit:cover;
  background:var(--s2);flex-shrink:0;border:1px solid var(--line)}
.cm-form{flex:1;min-width:0}
.cm-form textarea{
  width:100%;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;color:var(--txt);
  font-size:14.5px;line-height:1.5;resize:none;outline:none;min-height:46px;
  transition:border-color var(--fast);
}
.cm-form textarea:focus{border-color:var(--line-2);background:var(--s2)}
.cm-actions{display:none;align-items:center;gap:10px;margin-top:10px}
.cm-spoil{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.cm-spoil input{width:auto;accent-color:var(--accent)}
.cm-signin{
  width:100%;height:50px;border-radius:var(--r);
  background:var(--s1);border:1px dashed var(--line-2);
  font-size:13.5px;font-weight:600;color:var(--muted);
}

.cm{display:flex;gap:11px;padding:14px 16px;border-top:1px solid var(--line)}
.cm.reply{padding:12px 0 0 0;border-top:0;margin-top:10px;
  border-left:2px solid var(--line);padding-left:12px}
.cm-main{flex:1;min-width:0}
.cm-top{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.cm-top b{font-size:13px;font-weight:700}
.cm-top span{font-size:11px;color:var(--dim)}
.cm-text{font-size:14px;line-height:1.6;color:#D5D8E1;overflow-wrap:anywhere}
.cm-text.spoiler{
  background:var(--s3);color:transparent;border-radius:6px;
  cursor:pointer;user-select:none;text-shadow:0 0 10px rgba(255,255,255,.35);
}
.cm-text.spoiler::after{content:' — tap to reveal';color:var(--dim);text-shadow:none}
.cm-tools{display:flex;gap:16px;margin-top:9px;align-items:center}
.cm-tools button{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--dim);transition:color var(--fast)}
.cm-tools button.on{color:var(--accent)}
.cm-tools svg{width:14px;height:14px;stroke:currentColor;stroke-width:2}
.cm-tools i{font-style:normal;font-variant-numeric:tabular-nums}
.cm-empty{text-align:center;padding:30px 20px;color:var(--dim);font-size:13.5px}

/* ===========================================================
   DOWNLOAD FLOW
   =========================================================== */
.dl{max-width:600px;margin:0 auto;padding-top:8px}
.dl-head{display:flex;gap:14px;align-items:center;padding:0 18px 20px}
.dl-poster{width:56px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);flex-shrink:0}
.dl-meta{min-width:0}
.dl-meta h1{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.dl-meta p{font-size:12.5px;color:var(--muted);margin-top:4px}

.dl-steps{display:flex;align-items:center;padding:0 24px 24px}
.dl-dot{
  width:30px;height:30px;flex-shrink:0;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:var(--s1);border:1.5px solid var(--line-2);
  font-size:12px;font-weight:700;color:var(--dim);
  transition:all var(--slow);
}
.dl-dot.now{border-color:var(--accent);color:var(--txt);
  box-shadow:0 0 0 4px var(--accent-soft)}
.dl-dot.done{background:var(--accent);border-color:var(--accent);color:#fff}
.dl-line{flex:1;height:2px;background:var(--line-2);transition:background var(--slow)}
.dl-line.done{background:var(--accent)}

.dl-card{
  margin:0 18px 18px;padding:26px 22px;text-align:center;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);
}
.dl-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.dl-card h2{font-size:20px;margin-bottom:8px}
.dl-card p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:22px}

.dl-timer{position:relative;width:96px;height:96px;margin:0 auto 24px}
.dl-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.dl-timer circle{fill:none;stroke-width:6;stroke-linecap:round}
.dl-timer .tr{stroke:var(--s3)}
.dl-timer .tp{stroke:var(--accent);transition:stroke-dashoffset 1s linear}
.dl-timer b{position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;
  font-variant-numeric:tabular-nums}
.dl-timer.ready .tp{stroke:var(--ok)}
.dl-timer.ready b{color:var(--ok);font-size:34px}

.dl-tick{width:64px;height:64px;margin:0 auto 16px;border-radius:var(--r-full);
  display:grid;place-items:center;font-size:30px;color:#fff;
  background:var(--ok);box-shadow:0 8px 26px rgba(61,214,140,.3)}

.dl-links{padding:0 18px;display:grid;gap:10px}
.dl-link{
  display:flex;align-items:center;gap:13px;padding:14px 16px;
  background:var(--s1);border:1px solid var(--line-2);border-radius:var(--r);
  transition:all var(--fast);
}
.dl-link:active{transform:scale(.985);background:var(--s2)}
.dl-link.going{border-color:var(--ok)}
.dl-link-i{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--accent-soft)}
.dl-link-i svg{width:19px;height:19px;stroke:var(--accent);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-link-t{flex:1;min-width:0}
.dl-link-t b{display:block;font-size:14px;font-weight:600}
.dl-link-t span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.dl-link-go{font-size:12px;font-weight:700;color:var(--accent);flex-shrink:0}
.dl-note{padding:16px 18px 4px;font-size:12px;color:var(--dim);line-height:1.6;text-align:center}