/* filmju — stylesheet based on shablo design */
/* ============ FONTS ============ */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;
src:url(../assets/fonts/vazirmatn-arabic.woff2) format('woff2');
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;
src:url(../assets/fonts/vazirmatn-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============ BASE ============ */
:root{
  --bg:#03060f; --ink:#eaf3ff; --mut:#8fa2c7; --dim:#5f7398;
  --cyan:#3ee2ff; --blue:#5b7cff; --vio:#9a5cff; --gold:#ffc85c; --ok:#57e6a5;
  --red:#f85149;
  --line:rgba(110,180,255,.14);
  --glass:rgba(10,16,32,.62);
  --grad:linear-gradient(118deg,#3ee2ff,#5b7cff 48%,#9a5cff);
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 15px/1.95 'Vazirmatn',Tahoma,'Segoe UI',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
::selection{background:rgba(62,226,255,.3)}
body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none;background:
 radial-gradient(1000px 560px at 90% -12%,rgba(62,226,255,.13),transparent 62%),
 radial-gradient(900px 620px at 5% 14%,rgba(154,92,255,.12),transparent 60%),
 radial-gradient(1300px 860px at 50% 118%,rgba(91,124,255,.10),transparent 60%),var(--bg);}
::-webkit-scrollbar{width:10px;height:9px}
::-webkit-scrollbar-track{background:#05080f}
::-webkit-scrollbar-thumb{background:linear-gradient(#123,#31435e);border-radius:99px;border:2px solid #05080f}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#245,#2b5f7d)}
.wrap{width: 93%; max-width: 1250px;margin-left:auto;margin-right:auto}
.num,.en,.ltr{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* gradient-border glass panel */
.ln{border:1px solid transparent;
  background:linear-gradient(160deg,rgba(15,22,45,.86),rgba(7,11,24,.74)) padding-box,
  linear-gradient(135deg,rgba(62,226,255,.85),rgba(110,120,255,.28) 42%,rgba(154,92,255,.9)) border-box}
.ln-soft{border:1px solid transparent;
  background:linear-gradient(160deg,rgba(13,19,40,.55),rgba(6,10,22,.45)) padding-box,
  linear-gradient(135deg,rgba(62,226,255,.35),rgba(154,92,255,.4)) border-box}

/* ============ HEADER ============ */
header{position:fixed;left:0;right:0;top:0;z-index:60;background:rgba(3,6,15,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
header::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(62,226,255,.5),rgba(154,92,255,.5),transparent)}
.hrow{display:flex;align-items:center;gap:16px;height:72px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;text-decoration:none}
.logo .mark{
  width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .25s ease, filter .25s ease;
  box-shadow:0 0 24px rgba(62,226,255,.32);
}
.logo:hover .mark{transform:scale(1.06);filter:drop-shadow(0 0 12px rgba(62,226,255,.7))}
.logo .mark img,.logo .mark svg{width:100%;height:100%;display:block;border-radius:14px}
.logo b{font-size:20px;letter-spacing:1.5px;background:linear-gradient(120deg,#fff,#b9d6ff 60%,#d9c4ff);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.logo small{display:block;font-size:11px;color:var(--dim);letter-spacing:0;font-weight:500;margin-top:2px}
.pills{display:flex;gap:2px;padding:6px;border-radius:999px;margin-left:auto;margin-right:auto}
.pills a{padding:8px 17px;border-radius:999px;color:var(--mut);font-size:13.5px;font-weight:500;transition:.25s;white-space:nowrap}
.pills a:hover{color:#dcecff}
.pills a.on{color:#fff;background:linear-gradient(120deg,rgba(62,226,255,.20),rgba(154,92,255,.24));box-shadow:inset 0 0 0 1px rgba(62,226,255,.4),0 0 20px rgba(62,226,255,.15)}
.hsearch{display:none}
.stats-badge{display:none}

/* ============ CENTER UNIFIED SEARCH BAR ============ */
.center-search-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 16px 4px;
  position: relative;
  z-index: 25;
}
.unified-search-bar {
  display: flex;
  align-items: stretch;
  width: 100%; max-width: 720px;
  height: 52px;
  border-radius: 999px;
  background: rgba(9, 14, 28, 0.88);
  border: 1px solid rgba(62, 226, 255, 0.38);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(62, 226, 255, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: all .25s ease;
}
.unified-search-bar:focus-within {
  border-color: #3ee2ff;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.65), 0 0 32px rgba(62, 226, 255, 0.35);
  transform: translateY(-1px);
}
.search-input-box {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  padding-right: 18px;
  gap: 12px;
}
.search-input-box .si {
  color: #5fe6ff;
  flex-shrink: 0;
  pointer-events: none;
}
.search-input-box .qin {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
}
.search-input-box .qin::placeholder {
  color: var(--dim);
}
.btn-adv-search-attached {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  border: none;
  border-right: 1px solid rgba(62, 226, 255, 0.3);
  background: linear-gradient(120deg, rgba(62, 226, 255, 0.2), rgba(154, 92, 255, 0.25));
  color: #e0f4ff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-adv-search-attached:hover {
  background: linear-gradient(120deg, rgba(62, 226, 255, 0.35), rgba(154, 92, 255, 0.4));
  color: #fff;
  box-shadow: inset 0 0 12px rgba(62, 226, 255, 0.3);
}
@media (max-width: 640px) {
  .center-search-wrap { padding: 12px 12px 2px; }
  .unified-search-bar { height: 46px; }
  .btn-adv-search-attached { padding: 0 14px; font-size: 12px; gap: 5px; }
  .search-input-box { padding-right: 12px; gap: 8px; }
  .search-input-box .qin { font-size: 13px; }
}
.hamb{display:none;width:44px;height:44px;border-radius:14px;place-items:center;margin-right:auto}
.burger{position:relative;width:20px;height:14px}
.burger i,.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#cfe4ff;transition:.3s}
.burger::before{top:0}.burger i{top:6px}.burger::after{bottom:0}
.mmenu{display:none;position:fixed;left:4vw;right:4vw;top:80px;z-index:59;border-radius:20px;padding:12px;flex-direction:column}
.mmenu a{padding:12px 14px;border-radius:12px;color:var(--mut)}
.mmenu a:active,.mmenu a.on{color:#fff;background:rgba(62,226,255,.12)}
.mmenu.open{display:flex}

/* ============ HERO / CAROUSEL ============ */
main{padding-top:72px;overflow-x:clip;overflow-y:visible}
#hero{padding:26px 0 6px}
.carousel{position:relative;min-height:610px;perspective:1800px;perspective-origin:50% 42%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slide{position:absolute;top:6px;left:50%;width: 62%; max-width: 840px; height: 560px; margin-left: -31%;
  border-radius:26px;overflow:hidden;cursor:pointer;background:#070b16;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transition:transform 1s cubic-bezier(.25,.8,.22,1),opacity .85s ease,filter .85s ease,border-color .85s,box-shadow .85s;
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slide.on{border-color:rgba(62,226,255,.4);box-shadow:0 44px 110px rgba(0,0,0,.7),0 0 60px rgba(62,226,255,.14)}
.slide .bg{position:absolute;top:-70px;right:-70px;bottom:-70px;left:-70px;background-size:cover;background-position:center;filter:blur(46px) saturate(1.45);opacity:.5;transform:scale(1.12)}
.slide .liq{position:absolute;top:0;right:0;bottom:0;left:0;background:url(../assets/img/liquid-hero.jpg) center/cover;opacity:.22;mix-blend-mode:screen}
.slide .shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(3,6,15,.95) 3%,rgba(3,6,15,.4) 42%,rgba(3,6,15,.55))}
.slide>*{position:relative}
.spost{position:absolute;top:5.5%;left:50%;transform: translate(-50%, 0);height:56%;aspect-ratio:2/3;border-radius:18px;overflow:hidden;z-index:2;
  box-shadow:0 22px 55px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.14)}
.spost img{width:100%;height:100%;object-fit:cover;display:block}
.srate{position:absolute;top:14px;left:14px;z-index:4;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;
  color:#ffe9a8;padding:6px 12px;border-radius:999px;background:rgba(6,10,20,.62);border:1px solid rgba(255,200,60,.42);backdrop-filter:blur(8px)}
.srate svg{width:13px;height:13px;color:var(--gold)}
.scap{position:absolute;left:24px;right:24px;bottom:22px;z-index:3;text-align:center}
.sttl{font-size:clamp(22px,2.6vw,34px);font-weight:900;line-height:1.5;text-shadow:0 4px 26px rgba(0,0,0,.8)}
.sen{color:var(--dim);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-weight:400}
.srow{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#b9cbe8;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid var(--line);backdrop-filter:blur(6px)}
.chip b{color:var(--gold);font-weight:800}
.chip.ic b{color:#bfe9ff}
.sbtns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.btn-p{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:15px;font-weight:800;font-size:14px;color:#03101c;background:var(--grad);box-shadow:0 10px 34px rgba(70,150,255,.4);transition:.25s}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(90,170,255,.55)}
.btn-g{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:15px;font-weight:600;font-size:13.5px;color:#cfe6ff;background:rgba(255,255,255,.05);border:1px solid var(--line);transition:.25s}
.btn-g:hover{background:rgba(255,255,255,.1);border-color:rgba(62,226,255,.45)}
.slide:not(.on) .srow,.slide:not(.on) .sbtns,.slide:not(.on) .sen{display:none}
.slide:not(.on) .spost{height:62%;top:7%}
.slide:not(.on) .scap{bottom:14px}
.slide:not(.on) .sttl{font-size:15px;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.dots{position:absolute;bottom:20px;left: 50%; transform: translateX(-50%);display:flex;gap:8px;z-index:40}
.dot{width:10px;height:6px;border-radius:99px;background:rgba(255,255,255,.28);transition:.3s;cursor:pointer}
.dot.on{width:30px;background:var(--grad);box-shadow:0 0 14px rgba(62,226,255,.6)}
.cbtn{position:absolute;top:44%;transform: translate(0, -50%);width:46px;height:46px;border-radius:999px;display:grid;place-items:center;z-index:40;color:#d9ecff;
  background:rgba(6,10,20,.55);border:1px solid var(--line);backdrop-filter:blur(8px);transition:.25s}
.cbtn:hover{color:#fff;box-shadow:0 0 22px rgba(62,226,255,.35);border-color:rgba(62,226,255,.5)}
.cbtn.prev{right:10px}.cbtn.next{left:10px}
.cbtn svg{transform:scaleX(1)}
.cbtn.prev svg{transform:scaleX(-1)}
@keyframes capin{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
.slide.on .scap,.slide.on .spost{animation:capin .8s .18s cubic-bezier(.2,.8,.25,1) backwards}

/* ============ SECTIONS ============ */
section{padding:54px 0 8px;position:relative;overflow-x:clip;overflow-y:visible}
section[id]{scroll-margin-top:100px}
.sechead{display:flex;align-items:center;gap:13px;margin-bottom:20px;position:relative;z-index:2}
.sechead .ic{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#7fe8ff;
  background:linear-gradient(135deg,rgba(62,226,255,.16),rgba(154,92,255,.2));box-shadow:inset 0 0 0 1px var(--line)}
.sechead h2{font-size:clamp(18px,2.2vw,22px);font-weight:900}
.sechead .sub{color:var(--dim);font-size:12.5px;margin-top:-4px}
.sechead .more{margin-right:auto;color:#7fd8ff;font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px;transition:.25s;white-space:nowrap}
.sechead .more:hover{color:#bfeeff;text-shadow:0 0 12px rgba(62,226,255,.5)}
.wavebg{position:absolute;left:-8%;right:-8%;top:-40px;height:480px;z-index:0;pointer-events:none;
  background:url(../assets/img/liquid-wave.jpg) center/cover no-repeat;mix-blend-mode:screen;opacity:.65;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 66%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 66%,transparent)}
.wavebg.flip{transform:scaleX(-1);opacity:.5;top:20px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* horizontal scrollers */
.scrollx{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:12px 4px 20px;position:relative;z-index:2;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.scrollx::-webkit-scrollbar{height:6px}

/* movie poster card (shared by rows + grid) */
.pcard{cursor:pointer;position:relative;scroll-snap-align:start;transition:.35s;perspective:950px}
.pcard:hover,.pcard.flipped{transform: translate(0, -8px)}
.pcard .shot{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:2/3;background:#0a1124;
  border:1px solid rgba(140,200,255,.16);box-shadow:0 18px 44px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.2,.8,.25,1),box-shadow .45s,border-color .45s}
.pcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .5s}
.pcard .shot::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(3,6,15,.75),transparent 42%)}
.pcard:hover .shot{transform:none;border-color:rgba(62,226,255,.55);
  box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(62,226,255,.35),0 0 38px rgba(62,226,255,.18),0 12px 60px rgba(154,92,255,.2)}
.pcard:hover .shot img{transform:scale(1.06)}

/* Fallback for missing or broken poster */
.noposter{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#0e1a38,#060c1d);color:var(--cyan);font-weight:900;font-size:38px;
  text-shadow:0 0 20px rgba(62,226,255,.6);border:1px solid var(--line);user-select:none}
.noposter small{font-size:11px;font-weight:500;color:var(--dim);margin-top:6px;letter-spacing:0}

/* ---- 3D flip card: back = synopsis ---- */
.flip{position:relative;height:100%;transform:rotateY(0deg);transform-style:preserve-3d;will-change:transform;
  transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.pcard:hover,.pcard.flipped{box-shadow:0 26px 50px rgba(0,0,0,.55)}
.pcard:hover .flip,.pcard.flipped .flip{transform:rotateY(180deg)}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);overflow:hidden;border-radius:20px}
.face::after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:6;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.34) 50%,transparent 64%)}
.pcard:hover .face.front::after,.pcard.flipped .face.front::after{animation:sheen .5s ease-out forwards}
.pcard:hover .face.back::after,.pcard.flipped .face.back::after{animation:sheen .5s ease-in .5s forwards}
@keyframes sheen{0%{transform:translateX(-135%);opacity:.95}100%{transform:translateX(135%);opacity:.95}}
.face.back{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotateY(180deg);border:1px solid transparent;border-radius:20px;overflow:hidden;
  padding:15px 15px 13px;display:flex;flex-direction:column;gap:5px;
  background:linear-gradient(165deg,rgba(13,21,44,.97),rgba(6,10,24,.95)) padding-box,linear-gradient(135deg,rgba(62,226,255,.75),rgba(154,92,255,.8)) border-box;
  box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 34px rgba(62,226,255,.18)}
.face.back .bgl{position:absolute;top:-34px;right:-34px;bottom:-34px;left:-34px;background-size:cover;background-position:center 28%;
  filter:blur(30px) saturate(1.3) brightness(.55);pointer-events:none;z-index:0}
.face.back .bt,.face.back .ben,.face.back .bsyn,.face.back .bmeta,.face.back .bbtns{position:relative;z-index:1}
.bt{font-weight:900;font-size:13.5px;line-height:1.7}
.ben{color:var(--dim);font-size:10.5px;letter-spacing:.6px}
.bsyn{font-size:11.5px;line-height:2.05;color:#bccbe8;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.bmeta{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.bchip{font-size:10.5px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#a8c4e6}
.bchip i{color:var(--gold);font-style:normal;font-weight:800}
.bbtns{display:flex;gap:7px;margin-top:9px}
.bb{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border-radius:11px;font-size:11.5px;font-weight:800;transition:.25s}
.bb.p{flex:1;color:#04121f;background:linear-gradient(120deg,#5fe8ff,#8fb6ff 55%,#c39bff);box-shadow:0 6px 18px rgba(90,170,255,.35)}
.bb.p:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(90,170,255,.5)}
.bb.g{width:34px;color:#9fd4ff;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.bb.g:hover{border-color:rgba(62,226,255,.6);color:#fff}
.bb.g.on{color:#2fe4ff;border-color:rgba(47,228,255,.7);box-shadow:0 0 14px rgba(47,228,255,.35)}
.bb.g.on svg{fill:#2fe4ff}
@media(max-width:640px){.bsyn{-webkit-line-clamp:4}}
@media(prefers-reduced-motion:reduce){
  .face::after{animation:none!important}
}

.rank{position:absolute;top:6px;right:11px;z-index:2;font:900 38px/1.1 'Vazirmatn',Arial;
  background:linear-gradient(180deg,#fff,#8fc4ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.92;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));font-style:italic}
.qb{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.5px;color:#aee7ff;
  padding:3px 8px;border-radius:8px;background:rgba(4,9,20,.75);border:1px solid rgba(62,226,255,.3);backdrop-filter:blur(6px)}
.bm{position:absolute;bottom:10px;left:10px;z-index:2;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:rgba(4,9,20,.66);border:1px solid var(--line);color:#9fb4dd;backdrop-filter:blur(8px);transition:.25s}
.bm:hover{color:#fff;border-color:rgba(62,226,255,.55)}
.bm.on{color:#2fe4ff;border-color:rgba(47,228,255,.65);box-shadow:0 0 16px rgba(47,228,255,.35);background:rgba(15,45,60,.6)}
.bm.on svg{fill:#2fe4ff}

.badge-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(87,230,165,.15);color:var(--ok);border:1px solid rgba(87,230,165,.3)}
.badge-warn{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(255,200,92,.15);color:var(--gold);border:1px solid rgba(255,200,92,.35)}
.badge-type{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(62,226,255,.15);color:var(--cyan);border:1px solid rgba(62,226,255,.3)}

.pinfo{padding:12px 4px 0}
.pinfo .ttl{font-weight:800;font-size:14.5px;line-height:1.7}
.pinfo .en-t{color:var(--dim);font-size:11px;letter-spacing:.6px;display:block;margin-top:1px}
.pmeta{color:var(--mut);font-size:12px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:4px}
.pmeta .star{color:var(--gold);font-weight:900;display:inline-flex;align-items:center;gap:3px}
.pmeta .sep{color:#2c3b58}
.dls{display:flex;gap:7px;margin-top:10px}
.dl{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border-radius:10px;font-size:11px;font-weight:600;
  color:#bfe9ff;background:rgba(62,226,255,.07);border:1px solid rgba(62,226,255,.22);transition:.25s;white-space:nowrap}
.dl:hover{background:rgba(62,226,255,.16);box-shadow:0 0 16px rgba(62,226,255,.22);color:#fff}
.dl .sz{color:var(--dim);font-weight:400}
.scrollx .pcard{flex:0 0 204px;min-width:204px}
.subt{font-size:11px;color:var(--ok);margin-top:7px;display:flex;align-items:center;gap:5px}
.subt.no{color:var(--dim)}
.update-tag{font-size:11px;color:var(--dim);margin-top:5px;display:flex;align-items:center;gap:4px}

/* grid */
#grid,#libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:20px 18px;position:relative;z-index:2}
.filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px;position:relative;z-index:2}
.type-pills{display:flex;gap:6px;background:rgba(255,255,255,.04);padding:4px;border-radius:999px;border:1px solid var(--line)}
.type-pill{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--mut);transition:.2s}
.type-pill:hover{color:#fff}
.type-pill.on{color:#04121f;background:var(--grad);font-weight:800;box-shadow:0 2px 14px rgba(62,226,255,.35)}
.genres{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:2;flex:1}
.chipbtn{padding:7px 16px;border-radius:999px;font-size:12.5px;color:var(--mut);border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.25s;font-weight:500}
.chipbtn:hover{color:#e5f4ff;border-color:rgba(62,226,255,.4)}
.chipbtn.on{color:#04121f;font-weight:800;background:linear-gradient(120deg,#5fe8ff,#8fb6ff 60%,#b98bff);box-shadow:0 6px 22px rgba(80,160,255,.35)}

/* ================= MULTI-SELECT GENRE DROPDOWN ================= */
.genre-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 50;
  margin-bottom: 22px;
}

.genre-dd {
  position: relative;
  display: inline-block;
  user-select: none;
}

.genre-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--text, #f8fafc);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.genre-dd-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

.genre-dd-btn.active {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.25);
}

.genre-dd-icon {
  display: flex;
  align-items: center;
  color: #818cf8;
}

.genre-dd-badge {
  background: #6366f1;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}

.genre-dd-arrow {
  display: flex;
  align-items: center;
  color: var(--mut, #94a3b8);
  transition: transform 0.2s ease;
}

.genre-dd.open .genre-dd-arrow {
  transform: rotate(180deg);
}

.genre-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: rgba(15, 20, 32, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 12px;
  z-index: 1000;
  animation: genreMenuFade 0.2s ease;
}

@keyframes genreMenuFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.genre-dd-search-wrap {
  margin-bottom: 8px;
}

.genre-dd-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.genre-dd-search:focus {
  border-color: #6366f1;
  background: rgba(255, 255, 255, 0.09);
}

.genre-dd-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 8px;
  font-size: 11.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.genre-dd-count-hint {
  color: var(--mut, #94a3b8);
  font-weight: 500;
}

.genre-dd-action-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.genre-dd-link {
  background: none;
  border: none;
  color: #818cf8;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

.genre-dd-link:hover {
  color: #a5b4fc;
  text-decoration: underline;
}

.genre-dd-mode-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 8px;
  font-size: 11px;
  color: var(--mut, #94a3b8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
}

.genre-dd-mode-title {
  font-weight: 600;
}

.genre-dd-mode-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #cbd5e1;
}

.genre-dd-mode-opt input {
  margin: 0;
  accent-color: #6366f1;
  cursor: pointer;
}

.genre-dd-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
}

.genre-dd-list::-webkit-scrollbar {
  width: 5px;
}
.genre-dd-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.genre-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  color: #e2e8f0;
  font-size: 13px;
}

.genre-dd-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.genre-dd-item.selected {
  background: rgba(99, 102, 241, 0.14);
  color: #fff;
  font-weight: 600;
}

.genre-dd-check-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  flex: 1;
}

.genre-dd-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  cursor: pointer;
  margin: 0;
}

.genre-dd-item-count {
  font-size: 11px;
  color: var(--mut, #64748b);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 999px;
  direction: ltr;
}

/* Active Genre Chips */
.genre-chips-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.genre-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #e0e7ff;
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.15s;
}

.genre-chip:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: #818cf8;
}

.genre-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  border: none;
  line-height: 1;
  transition: background 0.15s;
}

.genre-chip-remove:hover {
  background: rgba(239, 68, 68, 0.8);
}

.genre-chip-clear-all {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--mut, #94a3b8);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.genre-chip-clear-all:hover {
  border-color: #ef4444;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
}

.genre-dd-footer {
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.genre-dd-apply-btn {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
  transition: all 0.15s ease;
}

.genre-dd-apply-btn:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5);
}

@media (max-width: 480px) {
  .genre-dd-menu {
    width: 290px;
    max-width: calc(100vw - 32px);
  }
}



/* continue watching */
.ccard{display:grid;grid-template-columns:88px 1fr;gap:16px;min-width:340px;max-width:380px;flex:1;padding:13px;border-radius:20px;align-items:center;cursor:pointer;transition:.3s;position:relative;z-index:2}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 30px rgba(91,124,255,.16)}
.ccard .shot{width:88px;aspect-ratio:2/3;border-radius:13px;overflow:hidden;position:relative;border:1px solid var(--line)}
.ccard .shot img{width:100%;height:100%;object-fit:cover}
.playc{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:rgba(3,6,15,.42);opacity:0;transition:.3s}
.ccard:hover .playc{opacity:1}
.playc span{width:36px;height:36px;border-radius:999px;background:var(--grad);display:grid;place-items:center;color:#04101e;box-shadow:0 0 22px rgba(62,226,255,.55)}
.ccard .ttl{font-weight:800;font-size:14.5px}
.ccard .left{color:var(--mut);font-size:12px;margin-top:2px}
.progress{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:11px}
.bar{height:100%;background:var(--grad);border-radius:99px;box-shadow:0 0 12px rgba(62,226,255,.65)}
.clear-btn{font-size:11.5px;color:var(--dim);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:4px 10px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:4px}
.clear-btn:hover{color:#ff7d7d;border-color:rgba(255,125,125,.4);background:rgba(255,125,125,.08)}

/* collections */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative;z-index:2}
.collection{position:relative;overflow:hidden;padding:28px 30px;border-radius:24px;display:flex;gap:24px;align-items:center;min-height:168px;transition:.35s}
.collection:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(91,124,255,.15)}
.collection .liq{position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;background:url(../assets/img/liquid-hero.jpg) center/cover;opacity:.24;mix-blend-mode:screen;transition:.6s}
.collection:hover .liq{opacity:.38}
.collection>*{position:relative}
.stack{display:flex;align-items:flex-end;flex-shrink:0;padding-bottom:6px}
.stack img{width:76px;aspect-ratio:2/3;object-fit:cover;border-radius:11px;border:1px solid rgba(140,200,255,.25);box-shadow:0 12px 30px rgba(0,0,0,.55);transition:.45s}
.stack img+img{margin-right:-24px}
.stack img:nth-child(1){transform:rotate(-7deg) translateY(7px)}
.stack img:nth-child(2){transform:rotate(1deg);z-index:1}
.stack img:nth-child(3){transform:rotate(8deg) translateY(5px)}
.collection:hover .stack img:nth-child(1){transform:rotate(-10deg) translateY(2px)}
.collection:hover .stack img:nth-child(3){transform:rotate(12deg) translateY(0)}
.collection h3{font-size:19px;font-weight:900}
.collection p{color:var(--mut);font-size:13px;margin:6px 0 14px;max-width:38ch}
.ghost-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:12px;font-size:13px;font-weight:700;color:#9fe6ff;border:1px solid rgba(62,226,255,.35);background:rgba(62,226,255,.07);transition:.25s}
.ghost-btn:hover{background:rgba(62,226,255,.18);color:#fff;box-shadow:0 0 20px rgba(62,226,255,.25)}

/* empty / note strips */
.empty{border-radius:18px;padding:34px;text-align:center;color:var(--mut);font-size:14px;position:relative;z-index:2}
.empty b{display:block;color:#fff;font-size:16px;margin-bottom:6px}
.demo-note{margin:34px 0 0;border-radius:16px;padding:13px 18px;font-size:12.5px;color:#9db4dc;display:flex;gap:9px;align-items:center;position:relative;z-index:2}
.demo-note svg{flex-shrink:0;color:#ffc85c}

/* ============ FOOTER ============ */
footer{margin-top:80px;border-top:1px solid var(--line);background:linear-gradient(rgba(8,13,28,.4),rgba(3,6,15,.9));position:relative}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(62,226,255,.5),rgba(154,92,255,.5),transparent)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px;padding:52px 0 34px}
.fgrid h4{font-size:14.5px;font-weight:800;margin-bottom:14px}
.fgrid a,.fgrid li{display:block;color:var(--mut);font-size:13px;padding:4px 0;list-style:none;transition:.2s}
.fgrid a:hover{color:#8fe2ff;padding-inline-start:4px}
.fgrid p{color:var(--mut);font-size:13px;max-width:40ch;line-height:2}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#a8c4e6;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.25s}
.socials a:hover{color:#fff;border-color:rgba(62,226,255,.5);box-shadow:0 0 18px rgba(62,226,255,.2);transform:translateY(-3px)}
.fbot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0 26px;color:var(--dim);font-size:12px}

/* ============ TABBAR (mobile) ============ */
.tabbar{
  position:fixed;
  left:14px;right:14px;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  display:none;
  grid-template-columns:repeat(4, 1fr);
  align-items:center;
  border-radius:24px;
  padding:6px;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 14px 40px rgba(0,0,0,.75), 0 0 20px rgba(62,226,255,.15);
}
.tabbar.ln{
  background:rgba(8,13,28,.92) padding-box,linear-gradient(135deg,rgba(62,226,255,.7),rgba(154,92,255,.75)) border-box;
  border:1px solid transparent;
}
.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:11px;
  font-weight:700;
  color:var(--mut);
  padding:8px 4px;
  border-radius:18px;
  transition:all .25s ease;
  text-decoration:none;
  user-select:none;
}
.tab svg{
  transition:transform .2s ease;
  flex-shrink:0;
}
.tab.on{
  color:#fff;
  background:linear-gradient(135deg,rgba(62,226,255,.22),rgba(154,92,255,.26));
  box-shadow:inset 0 0 0 1px rgba(62,226,255,.4), 0 4px 14px rgba(62,226,255,.25);
  text-shadow:0 0 10px rgba(62,226,255,.6);
}
.tab.on svg{
  color:#5fe6ff;
  transform:scale(1.1);
  filter:drop-shadow(0 0 8px rgba(62,226,255,.8));
}
.tab:active{
  transform:scale(.95);
}

/* ============ MODAL ============ */
.modal {
  position: fixed;
  top:0;right:0;bottom:0;left:0;
  z-index: 100;
  background: rgba(2, 5, 13, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
}
.modal.on {
  opacity: 1;
  pointer-events: auto;
}
.mcard {
  position: relative;
  width: 94vw; max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 24px;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.05);
  box-sizing: border-box;
  background: #0d1326;
  border: 1px solid rgba(62, 226, 255, 0.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
}
.modal.on .mcard {
  transform: none;
}
.mhero {
  position: relative;
  height: clamp(110px, 18vw, 170px);
  background: url(../assets/img/liquid-hero.jpg) center/cover;
  overflow: hidden;
  border-radius: 23px 23px 0 0;
}
.mhero::after {
  content: "";
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  background: linear-gradient(to top, rgba(4, 7, 16, 0.98) 5%, rgba(4, 7, 16, 0.4) 60%, transparent);
}
.mtop {
  display: grid;
  grid-template-columns: clamp(100px, 16vw, 170px) 1fr;
  gap: clamp(14px, 2.5vw, 24px);
  padding: 0 clamp(14px, 3vw, 28px);
  position: relative;
  margin-top: clamp(-50px, -7vw, -75px);
  z-index: 2;
}
.mposter {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(120, 200, 255, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 24px rgba(62, 226, 255, 0.15);
  aspect-ratio: 2/3;
  background: #080d1e;
}
.mposter img, .mposter .noposter {
  width: 100%;
  height: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}
.minfo {
  padding-top: clamp(30px, 5vw, 65px);
  min-width: 0;
}
.minfo h3 {
  font-size: clamp(17px, 2.8vw, 24px);
  font-weight: 900;
  line-height: 1.45;
  color: #fff;
  margin: 0;
}
.minfo .en-t {
  color: var(--dim);
  font-size: clamp(11px, 1.4vw, 12.5px);
  letter-spacing: 1px;
  margin-top: 3px;
}
.mchips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.mbody {
  padding: clamp(14px, 2.5vw, 22px) clamp(14px, 3vw, 28px) clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(14px, 2.5vw, 24px);
  box-sizing: border-box;
  width: 100%;
}
.mblock {
  margin-bottom: 16px;
}
.mblock h5 {
  font-size: clamp(12.5px, 1.6vw, 13.5px);
  font-weight: 800;
  color: #8fe2ff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mblock p {
  color: var(--mut);
  font-size: clamp(12.5px, 1.5vw, 13.5px);
  line-height: 2;
}
.mstats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--mut);
}
.meter .track {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.meter .fill {
  height: 100%;
  border-radius: 99px;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(62, 226, 255, 0.5);
}
.meter .fill.gold {
  background: linear-gradient(120deg, #ffd35c, #ff9d5c);
  box-shadow: 0 0 12px rgba(255, 200, 92, 0.45);
}
.meter b {
  color: #fff;
  min-width: 32px;
  text-align: center;
}
.casts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cast {
  font-size: 11.5px;
  color: #b9cbe8;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}

/* Modal Close Button */
.mclose {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 110;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 12, 26, 0.88);
  border: 1px solid rgba(110, 180, 255, 0.4);
  color: #cfe6ff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}
.mclose:hover {
  color: #fff;
  background: rgba(248, 81, 73, 0.4);
  border-color: rgba(248, 81, 73, 0.9);
  transform: scale(1.08) rotate(90deg);
}
[dir="rtl"] .mclose {
  left: 12px;
  right: auto;
}

/* Modal Top Action Buttons */
.m-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(120, 200, 255, 0.3);
  color: #cfe6ff;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
}
.m-icon-btn:hover {
  background: rgba(62, 226, 255, 0.2);
  border-color: rgba(62, 226, 255, 0.7);
  color: #fff;
  transform: scale(1.06);
}
.m-icon-btn.on, .m-icon-btn.saved {
  background: rgba(255, 215, 0, 0.22);
  border-color: rgba(255, 215, 0, 0.7);
  color: #ffd700;
}
.m-icon-btn.on svg, .m-icon-btn.saved svg {
  fill: currentColor;
}

/* ============ DOWNLOADS & EPISODES SECTION ============ */
.dl-full-section {
  width: 100%;
  box-sizing: border-box;
}
.dl-groups-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* Category Tabs */
.dl-tabs-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.dl-tabs-scroll::-webkit-scrollbar {
  display: none;
}
.dl-group-tab-btn, .dl-group-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #b9cbe8;
  font-size: clamp(11px, 2.6vw, 12.5px);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  font-family: inherit;
}
.dl-group-tab-btn:hover, .dl-group-subtab-btn:hover {
  background: rgba(62, 226, 255, 0.1);
  border-color: rgba(62, 226, 255, 0.35);
  color: #fff;
}
.dl-group-tab-btn.active, .dl-group-subtab-btn.active {
  background: linear-gradient(135deg, rgba(62, 226, 255, 0.22), rgba(99, 102, 241, 0.35));
  border-color: #58a6ff;
  color: #fff;
  box-shadow: 0 2px 12px rgba(88, 166, 255, 0.3);
}
.dl-tab-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #7df0ff;
  font-weight: 800;
}
.dl-group-tab-btn.active .dl-tab-count, .dl-group-subtab-btn.active .dl-tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Category Panels Wrap */
.dl-panels-wrap {
  width: 100%;
  box-sizing: border-box;
}
.dl-group-panel {
  width: 100%;
  box-sizing: border-box;
}

/* Batch Copy Bar (Clean, compact, and responsive) */
.dl-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(88, 166, 255, 0.22);
  border-radius: 12px;
  margin-bottom: 10px;
  box-sizing: border-box;
  width: 100%;
}
.dl-batch-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.dl-batch-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.dl-batch-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dl-batch-name {
  font-weight: 800;
  color: #e1f5fe;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-batch-sub {
  font-size: 11px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-copy-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.btn-copy-all:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.5);
}

/* Download Rows & Actions (True fluid responsiveness) */
.dl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.dlrow {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.dlrow:hover {
  border-color: rgba(62, 226, 255, 0.35);
  background: rgba(62, 226, 255, 0.05);
}
.dlrow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.dlrow-meta .ql {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  color: #04121f;
  background: linear-gradient(120deg, #7df0ff, #c3e2ff);
  flex-shrink: 0;
}
.dlrow-meta .ql.gold {
  background: linear-gradient(120deg, #ffd97a, #ffb95c);
}
.dlrow-meta .fmt {
  font-size: 12px;
  color: #e2e8f0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.dlrow-meta .size {
  font-size: 11px;
  color: var(--dim);
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.dl-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.dl-actions .btn-play-online {
  flex: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #04121f;
  background: linear-gradient(120deg, #5fe8ff, #8fb6ff);
  padding: 7px 10px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-width: 0;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(62, 226, 255, 0.25);
  font-family: inherit;
}
.dl-actions .btn-play-online:hover {
  background: linear-gradient(120deg, #7df0ff, #a6c7ff);
  transform: translateY(-1px);
}
.dl-actions .btn-dl {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 7px 10px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-width: 0;
  font-family: inherit;
}
.dl-actions .btn-dl:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
.dl-actions .btn-copydl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 10px !important;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--mut);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.dl-actions .btn-copydl:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(62, 226, 255, 0.35);
}

/* Desktop horizontal dlrow layout */
@media (min-width: 769px) {
  .dlrow {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
  }
  .dlrow-meta {
    flex: 1;
  }
  .dl-actions {
    width: auto;
    flex-shrink: 0;
  }
  .dl-actions .btn-play-online {
    flex: 0 0 auto;
    padding: 7px 14px;
  }
  .dl-actions .btn-dl {
    flex: 0 0 auto;
    padding: 7px 14px;
  }
}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform: translate(-50%, 24px);z-index:120;padding:13px 24px;border-radius:16px;font-size:13.5px;color:#d9f4ff;
  background:rgba(8,13,26,.9);border:1px solid rgba(62,226,255,.4);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 30px rgba(62,226,255,.15);
  opacity:0;pointer-events:none;transition:.35s;backdrop-filter:blur(10px);display:flex;align-items:center;gap:9px}
.toast.on{opacity:1;transform: translate(-50%, 0)}
.toast svg{color:var(--gold)}

/* ============ RESPONSIVE BREAKPOINTS ============ */
@media(max-width:1080px){
  .carousel{min-height:540px}
  .slide{width: 76%; max-width: 640px; height: 500px; margin-left: -38%}
  #grid,#libgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .fgrid{grid-template-columns:1fr 1fr}
}

/* ===== TABLET / MOBILE OVERHAUL (≤768px) ===== */
@media(max-width:768px){
  .pills,.stats-badge,.hsearch{display:none}
  .hamb,#hamb,.mmenu,#mmenu{display:none!important}
  #headerAuthArea{margin-right:auto}
  .hrow{height:58px;padding-left:14px;padding-right:14px}
  main{padding-top:58px}
  section[id]{scroll-margin-top:72px}
  .msearch{display:block;margin:14px 0 -6px}
  .tabbar{display:grid!important}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}

  /* Hero Carousel */
  #hero{padding:10px 0 0}
  .carousel{min-height:430px}
  .slide{width: 90%; max-width: 330px; height: 390px; margin-left: -45%;border-radius:20px}
  .slide .spost{height:52%;top:5%}
  .slide .scap{bottom:10px;left:10px;right:10px}
  .sttl{font-size:clamp(16px,4.5vw,20px);line-height:1.35}
  .sbtns{gap:6px;margin-top:6px}
  .sbtns .btn-p{padding:8px 14px;font-size:12px;border-radius:10px}
  .sbtns .btn-g{padding:8px 12px;font-size:12px;border-radius:10px}
  .srow{display:none}
  .cbtn{display:none}

  /* Grid */
  #grid,#libgrid{grid-template-columns:repeat(2,1fr);gap:10px 8px}
  .pcard{border-radius:14px}
  .pinfo .ttl{font-size:12.5px;line-height:1.5}
  .pinfo .en-t{display:none}
  .pmeta{font-size:10.5px;gap:4px}
  .dls{flex-direction:column;gap:5px}

  /* Continue Watching / Collections */
  .cols{grid-template-columns:1fr}
  .collection{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .ccard{min-width:100%;max-width:100%}

  /* Modal: True Native Bottom Sheet */
  .modal{
    padding:0!important;
    justify-content:flex-end!important;
    align-items:stretch!important;
  }
  .modal.on{
    display:flex!important;
    flex-direction:column!important;
  }
  .mcard{
    width:100%!important;
    max-height:92vh!important;
    border-radius:22px 22px 0 0!important;
    border-bottom:none!important;
    border-inline:none!important;
    margin:0!important;
    transform:translateY(100%)!important;
    transition:transform .35s cubic-bezier(.2,.8,.3,1)!important;
  }
  .modal.on .mcard{
    transform:translateY(0)!important;
  }
  .mhero{height:100px!important}
  .mtop{
    display:grid!important;
    grid-template-columns:clamp(75px,24vw,95px) 1fr!important;
    gap:12px!important;
    padding:0 14px!important;
    margin-top:-32px!important;
  }
  .minfo{padding-top:34px!important}
  .minfo h3{font-size:clamp(16px,4.5vw,19px)!important;line-height:1.4!important}
  .mchips{gap:4px!important;margin:6px 0!important}
  .mchips .chip{font-size:10.5px!important;padding:2px 7px!important}
  .mbody{
    display:flex!important;
    flex-direction:column!important;
    padding:12px 14px 24px!important;
    gap:14px!important;
  }

  /* User Panel Bottom Sheet (Only visible when .on is active) */
  .u-panel-modal{
    padding:0!important;
    justify-content:flex-end!important;
    align-items:stretch!important;
  }
  .u-panel-modal.on{
    display:flex!important;
    flex-direction:column!important;
  }
  .u-panel-box{
    width:100%!important;
    max-height:92vh!important;
    border-radius:22px 22px 0 0!important;
    border-bottom:none!important;
    border-inline:none!important;
    margin:0!important;
  }
  .u-panel-head{padding:12px 14px}
  .u-panel-nav{padding:6px 10px;gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .u-panel-nav::-webkit-scrollbar{display:none}
  .u-nav-btn{flex-shrink:0;padding:6px 11px;font-size:11.5px}
  .u-panel-body{padding:14px 12px}
  .sub-status-card{flex-direction:column;align-items:stretch;text-align:center;gap:10px;padding:12px}
  .plans-grid{grid-template-columns:1fr!important;gap:10px}

  /* Player Mobile */
  .player-header{padding:8px 12px}
  .player-title-box h4{font-size:13px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .player-controls{padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));gap:5px}
  .slider-group{display:none!important}
  #pPipBtn{display:none!important}
  .player-row{gap:3px}
  .player-left-controls,.player-right-controls{gap:3px}
  .p-btn{width:32px;height:32px;border-radius:7px;font-size:10px}
  .p-btn.play-toggle{width:36px;height:36px}
  .player-time{font-size:10.5px;padding:0 2px}
  .player-sub-overlay{bottom:66px}
  .player-sub-text{font-size:15px;padding:2px 7px}
  #pEpisodesBtn span{display:none}
  #pEpisodesBtn{padding:0 6px!important;width:32px!important}

  /* Footer */
  section{padding:34px 0 4px}
  .fgrid{grid-template-columns:1fr;gap:14px;padding-top:24px}
}

/* Extra Small (≤420px) */
@media(max-width:420px){
  .hrow{padding-left:10px;padding-right:10px}
  .slide{width: 94%; max-width: 300px; height: 370px; margin-left: -47%}
  #grid,#libgrid{gap:8px 6px}
  .dl-batch-bar{flex-direction:column;align-items:stretch;gap:6px}
  .btn-copy-all{width:100%;justify-content:center}
}
@media(min-width:1440px){
  .slide{padding:56px 66px}
  .carousel{min-height:540px}
}
.msearch{position:relative;z-index:2}
.msearch input{width:100%;height:52px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid transparent;color:var(--ink);padding-right:52px;padding-left:18px;font-family:inherit;font-size:14px;outline:none;
  background:linear-gradient(150deg,rgba(13,19,40,.75),rgba(6,10,22,.6)) padding-box,linear-gradient(120deg,rgba(62,226,255,.8),rgba(154,92,255,.85)) border-box;box-shadow:0 0 26px rgba(80,150,255,.15)}
.msearch .si{position:absolute;right:18px;top:50%;transform: translate(0, -50%);color:#6fc6e8}



/* ============ USER AUTH & PILL IN HEADER ============ */
.btn-auth{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;
  background:linear-gradient(120deg,rgba(62,226,255,.2),rgba(154,92,255,.25));
  border:1px solid rgba(62,226,255,.45);color:#fff;font-size:13px;font-weight:700;
  cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn-auth:hover{
  background:linear-gradient(120deg,rgba(62,226,255,.35),rgba(154,92,255,.4));
  box-shadow:0 0 16px rgba(62,226,255,.3);transform:scale(1.02);
}
.user-pill{
  display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:#e2e8f0;
  font-size:13px;font-weight:700;cursor:pointer;transition:.25s;
}
.user-pill:hover{
  background:rgba(255,255,255,.1);border-color:rgba(62,226,255,.4);
}
.user-sub-tag{
  font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(34,197,94,.18);
  color:#4ade80;font-weight:800;border:1px solid rgba(34,197,94,.3);
}
.user-sub-tag.expired{
  background:rgba(239,68,68,.18);color:#f87171;border-color:rgba(239,68,68,.3);
}

.btn-adv-search{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--mut);
  font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap;
}
.btn-adv-search:hover{
  color:#fff;border-color:rgba(62,226,255,.4);background:rgba(62,226,255,.08);
}

/* ============ ADVANCED SEARCH MODAL ============ */
.adv-search-modal{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:16px;
}
.adv-search-modal.on{display:flex}
.adv-box{
  width: 96%; max-width: 900px;background:#101524;border-radius:24px;padding:28px 24px;
  box-shadow:0 25px 80px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);
  max-height:90vh;overflow-y:auto;direction:rtl;
}
.adv-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;
}
@media (max-width:768px){
  .adv-row{grid-template-columns:1fr;}
}
.adv-select, .adv-input{
  width:100%;height:48px;border-radius:14px;background:#090d18;
  border:1px solid rgba(255,255,255,.1);color:#e2e8f0;padding:0 16px;
  font-family:inherit;font-size:13.5px;font-weight:600;outline:none;
}
.adv-select:focus, .adv-input:focus{
  border-color:#f59e0b;box-shadow:0 0 16px rgba(245,158,11,.25);
}
.adv-segmented{
  display:flex;background:#090d18;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  overflow:hidden;height:48px;padding:4px;gap:4px;
}
.adv-seg-btn{
  flex:1;border-radius:10px;font-size:13.5px;font-weight:700;color:#94a3b8;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.adv-seg-btn.on{
  background:#f59e0b;color:#000;font-weight:800;
}
.adv-toggle-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;
}
@media (max-width:768px){
  .adv-toggle-row{grid-template-columns:1fr;}
}
.adv-toggle-box{
  height:48px;background:#090d18;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;padding:0 18px;
}
.adv-toggle-box span{
  font-size:13.5px;font-weight:600;color:#cbd5e1;
}
/* iOS / Modern Switch */
.adv-switch{position:relative;display:inline-block;width:44px;height:24px}
.adv-switch input{opacity:0;width:0;height:0}
.adv-slider{
  position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:#1e293b;
  border-radius:24px;transition:.3s;border:1px solid rgba(255,255,255,.1);
}
.adv-slider:before{
  content:"";position:absolute;height:18px;width:18px;left:2px;bottom:2px;
  background:#94a3b8;border-radius:50%;transition:.3s;
}
.adv-switch input:checked + .adv-slider{background:#f59e0b}
.adv-switch input:checked + .adv-slider:before{transform:translateX(20px);background:#000}

.adv-range-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px;
}
@media (max-width:600px){
  .adv-range-row{grid-template-columns:1fr;}
}
.adv-range-box{
  background:#090d18;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;padding:0 12px;height:48px;gap:8px;
}
.adv-range-box span{font-size:12.5px;color:#94a3b8;white-space:nowrap}
.adv-range-box input{
  flex:1;background:transparent;border:none;color:#f8fafc;font-size:13.5px;
  font-family:inherit;font-weight:700;text-align:center;outline:none;
}

.adv-actions{
  display:flex;gap:12px;margin-top:20px;
}
.adv-btn-search{
  flex:2;height:50px;border-radius:14px;background:#f59e0b;color:#000;
  font-size:15px;font-weight:800;display:flex;align-items:center;
  justify-content:center;gap:8px;cursor:pointer;transition:.2s;box-shadow:0 6px 25px rgba(245,158,11,.3);
}
.adv-btn-search:hover{background:#d97706;transform:scale(1.01)}
.adv-btn-reset{
  flex:1;height:50px;border-radius:14px;background:rgba(239,68,68,.15);color:#fca5a5;
  border:1px solid rgba(239,68,68,.3);font-size:13.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:.2s;
}
.adv-btn-reset:hover{background:rgba(239,68,68,.28);border-color:#ef4444;color:#fff}
.adv-btn-close{
  flex:1;height:50px;border-radius:14px;background:#334155;color:#e2e8f0;
  font-size:14px;font-weight:700;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:.2s;
}
.adv-btn-close:hover{background:#475569}

.btn-clear-qin{
  background:none;border:none;color:var(--dim);font-size:15px;cursor:pointer;
  padding:4px 8px;margin-right:4px;line-height:1;border-radius:50%;transition:.2s;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-clear-qin:hover{color:#fff;background:rgba(255,255,255,.1)}

.btn-clear-search-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35);color:#fca5a5;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:.2s;
}
.btn-clear-search-pill:hover{background:rgba(239,68,68,.28);color:#fff}

/* ============ SORT TOOLBAR & TABS ============ */
.sort-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0;padding:12px 16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;
}
.sort-bar-title{font-size:13px;font-weight:700;color:var(--mut)}
.sort-btn{
  padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.05);color:var(--mut);border:1px solid transparent;
  cursor:pointer;transition:.2s;
}
.sort-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.sort-btn.on{
  background:linear-gradient(120deg,rgba(62,226,255,.25),rgba(154,92,255,.3));
  border-color:rgba(62,226,255,.5);color:#fff;font-weight:800;
}

/* ============ AI HUB STYLES ============ */
.ai-hub-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:20px;
}
.ai-card{
  background:linear-gradient(160deg,rgba(15,22,45,.85),rgba(7,11,24,.75));
  border:1px solid rgba(62,226,255,.3);border-radius:20px;padding:24px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.ai-badge-header{
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;
  background:rgba(62,226,255,.15);border:1px solid rgba(62,226,255,.4);
  color:#3ee2ff;font-size:12px;font-weight:800;margin-bottom:12px;
}
.ai-input-area{
  width:100%;height:110px;border-radius:14px;background:#090d18;
  border:1px solid rgba(255,255,255,.12);color:#fff;padding:12px;font-family:inherit;
  font-size:13px;line-height:1.7;outline:none;resize:none;margin:12px 0;
}
.ai-input-area:focus{
  border-color:#3ee2ff;box-shadow:0 0 16px rgba(62,226,255,.25);
}
.ai-result-tag{
  background:rgba(62,226,255,.12);border:1px solid rgba(62,226,255,.3);color:#8fe2ff;
  border-radius:10px;padding:6px 12px;font-size:12px;line-height:1.6;margin-top:8px;
}

/* ============ USER PANEL & AUTH MODAL ============ */
.u-panel-modal{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:95;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);backdrop-filter:blur(10px);padding:16px;
}
.u-panel-modal.on{display:flex}
.u-panel-box{
  width: 96%; max-width: 960px;background:#0c1122;border:1px solid rgba(62,226,255,.3);
  border-radius:26px;box-shadow:0 30px 100px rgba(0,0,0,.85);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.u-panel-head{
  padding:20px 24px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.02);
}
.u-panel-nav{
  display:flex;gap:6px;padding:12px 24px;border-bottom:1px solid var(--line);
  overflow-x:auto;background:#090d19;
}
.u-nav-btn{
  padding:8px 16px;border-radius:12px;font-size:13px;font-weight:700;color:var(--mut);
  white-space:nowrap;transition:.2s;cursor:pointer;
}
.u-nav-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.u-nav-btn.on{
  background:var(--grad);color:#030816;box-shadow:0 2px 14px rgba(62,226,255,.3);
}
.u-panel-body{
  padding:24px;overflow-y:auto;flex:1;
}
.u-tab-content{display:none}
.u-tab-content.on{display:block}

/* Plan Cards in Shop */
.plans-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:16px;
}
.plan-card{
  background:#10172c;border:1px solid rgba(255,255,255,.1);border-radius:20px;
  padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:.25s;position:relative;overflow:hidden;
}
.plan-card:hover{
  border-color:rgba(62,226,255,.5);transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.plan-badge{
  position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:800;
  padding:3px 8px;border-radius:999px;background:#f59e0b;color:#000;
}
.plan-title{font-size:16px;font-weight:800;margin-top:10px}
.plan-price{
  font-size:22px;font-weight:900;color:#3ee2ff;margin:12px 0;
}
.plan-price small{font-size:12px;color:var(--mut);font-weight:500}
.plan-btn-buy{
  width:100%;padding:10px;border-radius:12px;background:var(--grad);color:#000;
  font-weight:800;font-size:13.5px;cursor:pointer;margin-top:auto;transition:.2s;
}
.plan-btn-buy:hover{opacity:.9;transform:scale(1.02)}

/* Status summary card */
.sub-status-card{
  background:linear-gradient(135deg,rgba(62,226,255,.12),rgba(154,92,255,.12));
  border:1px solid rgba(62,226,255,.3);border-radius:18px;padding:20px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}

/* Comments section in modal */
.comments-sec{
  margin-top:24px;border-top:1px solid var(--line);padding-top:20px;
}
.comment-form{
  display:flex;flex-direction:column;gap:10px;margin-bottom:20px;
}
.comment-textarea{
  width:100%;height:85px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:#fff;padding:12px;font-family:inherit;font-size:13px;
  resize:none;outline:none;
}
.comment-textarea:focus{border-color:#3ee2ff}
.comment-item{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:12px;
}
.comment-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12.5px;
}
.comment-author{font-weight:700;color:#8fe2ff}
.comment-time{color:var(--dim)}
.comment-content{
  font-size:13.5px;line-height:1.75;color:#e2e8f0;
}
.spoiler-wrap{
  position:relative;overflow:hidden;border-radius:10px;
}
.spoiler-blurred{
  filter:blur(7px);user-select:none;pointer-events:none;transition:.3s;
}
.spoiler-overlay{
  position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.65);backdrop-filter:blur(2px);cursor:pointer;
}
.spoiler-warning-btn{
  background:#f59e0b;color:#000;padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:800;border:none;cursor:pointer;
}

/* ============ HOME SECTIONS & SLIDERS ============ */
.home-slider-wrap {
  position: relative;
  width: 100%;
  margin-top: 14px;
}
.home-slider-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 16px;
  padding: 10px 4px 22px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.home-slider-track::-webkit-scrollbar {
  height: 6px;
}
.home-slider-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.home-slider-track::-webkit-scrollbar-thumb:hover {
  background: rgba(62, 226, 255, 0.4);
}

/* Exactly 6 cards per row on standard/large displays */
.home-slider-track .pcard {
  flex: 0 0 calc((100% - 80px) / 6);
  min-width: calc((100% - 80px) / 6);
  max-width: calc((100% - 80px) / 6);
  scroll-snap-align: start;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .home-slider-track {
    gap: 14px;
  }
  .home-slider-track .pcard {
    flex: 0 0 calc((100% - 56px) / 5);
    min-width: calc((100% - 56px) / 5);
    max-width: calc((100% - 56px) / 5);
  }
}

@media (max-width: 992px) {
  .home-slider-track {
    gap: 12px;
  }
  .home-slider-track .pcard {
    flex: 0 0 calc((100% - 36px) / 4);
    min-width: calc((100% - 36px) / 4);
    max-width: calc((100% - 36px) / 4);
  }
}

@media (max-width: 768px) {
  .home-slider-track {
    gap: 10px;
    padding-bottom: 14px;
  }
  .home-slider-track .pcard {
    flex: 0 0 calc((100% - 20px) / 3);
    min-width: calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
  }
}

@media (max-width: 480px) {
  .home-slider-track {
    gap: 10px;
  }
  .home-slider-track .pcard {
    flex: 0 0 calc((100% - 14px) / 2.2);
    min-width: calc((100% - 14px) / 2.2);
    max-width: calc((100% - 14px) / 2.2);
  }
}

.sec-actions-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slider-arrows {
  display: flex;
  align-items: center;
  gap: 6px;
}
.slider-arrow-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.slider-arrow-btn:hover {
  background: rgba(62, 226, 255, 0.15);
  border-color: rgba(62, 226, 255, 0.4);
  color: #3ee2ff;
  transform: translateY(-1px);
}
.slider-arrow-btn:active {
  transform: scale(0.95);
}

.home-grid {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 8px 4px 18px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.home-grid .crd {
  flex: 0 0 178px;
  min-width: 178px;
  max-width: 178px;
}

.btn-sec-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 12px;
  background: rgba(62, 226, 255, 0.08);
  border: 1px solid rgba(62, 226, 255, 0.3);
  color: #8fe2ff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
}
.btn-sec-more:hover {
  background: rgba(62, 226, 255, 0.2);
  color: #fff;
  box-shadow: 0 0 16px rgba(62, 226, 255, 0.25);
  transform: translateY(-1px);
}

/* ============ AI SEARCH & MATCH CARDS ============ */
.ai-match-card {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.ai-match-card:hover {
  background: rgba(62, 226, 255, 0.06);
  border-color: rgba(62, 226, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.ai-match-poster {
  width: 70px;
  height: 102px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.ai-match-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-match-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.ai-match-title small {
  color: #8fe2ff;
  font-weight: 600;
  font-size: 13px;
  margin-right: 4px;
}
.ai-match-orig {
  font-size: 12px;
  color: var(--mut);
  direction: ltr;
  text-align: right;
  font-family: system-ui, sans-serif;
}
.ai-match-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.ai-match-click-action {
  font-size: 12px;
  color: #3ee2ff;
  font-weight: 700;
  margin-right: auto;
  opacity: 0.85;
}
.ai-match-card:hover .ai-match-click-action {
  opacity: 1;
  text-decoration: underline;
}
.u-table{
  width:100%;border-collapse:collapse;font-size:13px;text-align:right;margin-top:8px;
}
.u-table th{
  background:rgba(255,255,255,.05);color:#8fe2ff;padding:10px 14px;font-weight:800;
  border-bottom:1px solid var(--line);
}
.u-table td{
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:#cbd5e1;
}
.u-table tr:hover td{
  background:rgba(255,255,255,.02);
}
.badge-ok{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;
  background:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(34,197,94,.3);
}


/* ============ PLAYER APP SELECTOR MODAL ============ */
.player-app-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.player-app-modal {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  animation: modalIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.pam-header {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}
.pam-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: 0.2s;
  color: #fff;
}
.app-choice-btn.shablo-btn {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border: 1px solid #7c3aed;
}
.app-choice-btn.mx-btn {
  background: #0284c7;
  border: 1px solid #0369a1;
}
.app-choice-btn.vlc-btn {
  background: #ea580c;
  border: 1px solid #c2410c;
}
.app-choice-btn.km-btn {
  background: #4f46e5;
  border: 1px solid #4338ca;
}
.app-choice-btn:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
}
.pam-cancel {
  margin-top: 20px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}
.pam-cancel:hover {
  color: #fff;
}

/* ============ CUSTOM VIDEO PLAYER ============ */
.player-overlay {
  position: fixed;
  top:0;right:0;bottom:0;left:0;
  height: 100%;
  height: 100dvh;
  background: #000;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.player-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
/* For WebVTT custom styles */
video::cue {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
}

.player-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 20px;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.player-close-btn:hover { background: rgba(255, 0, 0, 0.5); }

/* Controls UI */
.player-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
  transition: opacity 0.3s;
  z-index: 100;
  direction: ltr; /* keep time left to right */
}
.player-container.idle .player-controls {
  opacity: 0;
  pointer-events: none;
}
.player-container.idle .player-close-btn {
  opacity: 0;
  pointer-events: none;
}

.player-progress-area {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.player-time {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.player-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  overflow: visible;
}
.player-progress-buffered {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  width: 0%;
}
.player-progress-filled {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: #3ee2ff;
  border-radius: 3px;
  width: 0%;
}
.player-progress-scrubber {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(62, 226, 255, 0.5);
  transition: transform 0.1s;
}
.player-progress-bar:hover .player-progress-scrubber {
  transform: translate(-50%, -50%) scale(1);
}

.player-controls-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl; /* Buttons in rtl */
}
.player-ctrl-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-btn {
  background: none;
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
.player-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.player-btn:hover { background: rgba(255,255,255,0.1); }

/* Volume Slider */
.player-volume-container {
  display: flex;
  align-items: center;
  width: 40px;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.player-volume-container:hover, .player-volume-slider:focus {
  width: 120px;
}
.player-volume-slider {
  width: 70px;
  margin-right: 8px;
  accent-color: #3ee2ff;
  cursor: pointer;
}

/* Menus */
.player-menu {
  position: absolute;
  bottom: 50px;
  right: 50%;
  transform: translateX(50%) scale(0.95);
  background: rgba(15, 20, 30, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
  cursor: default;
  z-index: 1000;
  color: #fff;
  text-align: right;
  direction: rtl;
}
.player-btn.menu-open .player-menu {
  visibility: visible;
  opacity: 1;
  transform: translateX(50%) scale(1);
}
.player-menu-header {
  font-size: 11px;
  font-weight: 800;
  color: #3ee2ff;
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px;
}
.player-menu-item {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.1s;
}
.player-menu-item:hover { background: rgba(255,255,255,0.1); }
.player-menu-item.active { background: rgba(62, 226, 255, 0.15); color: #3ee2ff; font-weight: bold; }
.player-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 6px 0;
}
.player-menu-settings label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 8px;
}
.player-menu-settings input[type="color"] {
  border: none;
  background: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.player-menu-settings select {
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}

/* Spinner */
.player-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 50;
}
.player-container.loading .player-spinner { display: block; }
.spinner-ring {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(62, 226, 255, 0.2);
  border-top-color: #3ee2ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Gestures & Dim Layer */
.player-dim-layer {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.gesture-zone {
  position: absolute;
  top: 0;
  bottom: 140px; /* above controls */
  width: 45%;
  z-index: 20;
}
.gesture-left { left: 0; }
.gesture-right { right: 0; }

.player-feedback {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 50;
  pointer-events: none;
}
.player-feedback.show { opacity: 1; }

@media (max-width: 768px) {
  .player-volume-container { display: none; }
  .player-btn svg { width: 20px; height: 20px; }
  .player-controls { padding: 12px; }
}

@media (min-width: 1355px) { .slide { margin-left: -420px !important; } }
@media (min-width: 842px) and (max-width: 1024px) { .slide { margin-left: -320px !important; } }
@media (min-width: 367px) and (max-width: 600px) { .slide { margin-left: -165px !important; } }
@media (min-width: 319px) and (max-width: 420px) { .slide { margin-left: -150px !important; } }