/* CinemaCity — public theme. RTL, dark-first, CSS variables set from admin. */
@font-face{font-family:Yekan;src:url(/static/fonts/YekanBakhFaNum-Light.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:Yekan;src:url(/static/fonts/YekanBakhFaNum-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Yekan;src:url(/static/fonts/YekanBakhFaNum-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:Yekan;src:url(/static/fonts/YekanBakhFaNum-Black.woff) format("woff");font-weight:900;font-display:swap}
:root{--primary:#e11d48;--primary2:#f43f5e;--accent:#f59e0b;--bg:#0b0d12;--surface:#151922;--radius:16px;
--surface2:color-mix(in srgb,var(--surface) 82%,#fff 6%);--line:rgba(255,255,255,.08);--text:#eef0f5;--muted:#9aa3b5;--ok:#22c55e;--warn:#f59e0b;--danger:#ef4444;
--shadow:0 10px 30px rgba(0,0,0,.35);--glass:rgba(11,13,18,.72);--container:1320px}
[data-theme=light]{--bg:#f4f5f8;--surface:#fff;--surface2:#f0f2f6;--line:rgba(0,0,0,.08);--text:#141821;--muted:#5c6475;--glass:rgba(255,255,255,.8);--shadow:0 8px 24px rgba(20,24,33,.08)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Yekan,Tahoma,sans-serif;background:var(--bg);color:var(--text);line-height:1.8;font-size:15px;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.ic{width:20px;height:20px;flex-shrink:0;display:inline-block;vertical-align:middle}
.muted{color:var(--muted)}
.empty{padding:60px 20px;text-align:center;color:var(--muted);background:var(--surface);border-radius:var(--radius)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:12px;border:0;cursor:pointer;font-weight:700;transition:.2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 6px 20px color-mix(in srgb,var(--primary) 35%,transparent)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{background:var(--surface2);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--primary)}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:10px}
.btn-block{width:100%}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:transparent;border:0;cursor:pointer;transition:.2s}
.icon-btn:hover{background:var(--surface2)}
.icon-btn.active,.fav-btn.active{color:var(--primary)}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center}
.brand-logo{height:40px;width:auto}
.brand-text{font-weight:900;font-size:22px;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.3px}
.main-nav{display:flex;gap:4px}
.nav-link{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:700;transition:.2s}
.nav-link:hover{color:var(--text);background:var(--surface2)}
.header-search{position:relative;flex:1;max-width:420px;margin-right:auto;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:2px 14px 2px 4px}
.header-search input{flex:1;background:none;border:0;outline:0;padding:9px 4px}
.header-search:focus-within{border-color:var(--primary)}
.header-actions{display:flex;align-items:center;gap:6px}
.menu-toggle{display:none}
.search-suggest{position:absolute;top:calc(100% + 8px);right:0;left:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;z-index:60}
.sug-item{display:flex;gap:12px;align-items:center;padding:10px 12px;transition:.15s}
.sug-item:hover,.sug-item.active{background:var(--surface2)}
.sug-item img{width:40px;height:58px;object-fit:cover;border-radius:8px}
.sug-item b{display:block;font-size:14px}.sug-item small{color:var(--muted)}
/* drawer */
.drawer{position:fixed;inset:0;z-index:100}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:4px;animation:slideIn .25s ease;overflow-y:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer-link{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;font-weight:700}
.drawer-link:hover{background:var(--surface2)}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
/* hero slider */
.hero-slider{position:relative;margin-bottom:32px;overflow:hidden}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;height:min(70vh,560px);background-size:cover;background-position:center top;display:flex;align-items:flex-end}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 4%,rgba(11,13,18,.55) 45%,rgba(11,13,18,.15)),linear-gradient(270deg,rgba(11,13,18,.85),transparent 60%)}
.hero-content{position:relative;padding-bottom:56px;max-width:var(--container)}
.hero-badge{display:inline-block;background:var(--accent);color:#000;font-weight:900;font-size:12px;padding:4px 12px;border-radius:30px;margin-bottom:12px}
.hero-title{font-size:clamp(26px,4vw,46px);font-weight:900;line-height:1.3;max-width:640px}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0;color:#d6dae3}
.hero-meta>span:not(.imdb-chip){background:rgba(255,255,255,.1);padding:2px 12px;border-radius:30px;font-size:13px}
.hero-desc{max-width:560px;color:#cdd2dd;margin-bottom:18px}
.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hero-dots button{width:8px;height:8px;border-radius:8px;border:0;background:rgba(255,255,255,.35);cursor:pointer;transition:.3s}
.hero-dots button.active{width:26px;background:var(--primary)}
.imdb-chip{display:inline-flex;align-items:center;gap:4px;background:#f5c518;color:#000;font-weight:900;padding:2px 10px;border-radius:8px;font-size:14px}
.imdb-chip .ic{width:15px;height:15px;fill:#000;stroke:none}
.imdb-chip small{font-weight:400;opacity:.7}
/* rows */
.row-section{margin:34px auto}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
.row-title{font-size:21px;font-weight:900;position:relative;padding-right:14px}
.row-title::before{content:"";position:absolute;right:0;top:20%;bottom:20%;width:4px;border-radius:4px;background:linear-gradient(var(--primary),var(--accent))}
.row-sub{color:var(--muted);font-size:13px;padding-right:14px}
.row-more{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:14px;font-weight:700}
.row-more:hover{color:var(--primary)}
.row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(140px,15vw,190px);gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.row-scroll>*{scroll-snap-align:start}
/* card */
.card{position:relative;min-width:0}
.card-poster{position:relative;aspect-ratio:2/3;border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.card-poster img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-poster img{transform:scale(1.06)}
.card-imdb{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);color:#f5c518;font-weight:900;font-size:12px;padding:3px 8px;border-radius:8px}
.card-imdb .ic{width:12px;height:12px;fill:#f5c518;stroke:none}
.card-type{position:absolute;top:8px;left:8px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:7px}
.card-quality{position:absolute;bottom:8px;left:8px;font-size:11px;font-weight:900;padding:2px 8px;border-radius:7px;background:rgba(0,0,0,.72);color:#fff}
.card-badge{position:absolute;bottom:8px;right:8px;background:var(--accent);color:#000;font-size:11px;font-weight:900;padding:2px 8px;border-radius:7px}
.card-hover{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%);opacity:0;transition:.3s}
.card:hover .card-hover{opacity:1}
.card-hover-play{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;transform:scale(.8);transition:.3s}
.card:hover .card-hover-play{transform:none}
.card-hover-play .ic{fill:#fff}
.card-title{font-size:14px;font-weight:700;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:flex;gap:6px;font-size:12px;color:var(--muted);overflow:hidden;white-space:nowrap}
.card-meta span:not(:last-child)::after{content:"·";margin-right:6px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 16px}
.q-4k{background:#7c3aed!important}.q-1080{background:#0ea5e9!important}.q-720{background:#16a34a!important}
/* archive */
.archive{padding:30px 20px 50px}
.archive-head{margin-bottom:24px}
.archive-title{font-size:26px;font-weight:900;margin-bottom:14px}
.archive-desc{color:var(--muted);max-width:800px}
.term-head{display:flex;gap:18px;align-items:center}
.term-image{width:90px;height:90px;border-radius:50%;object-fit:cover}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--surface);padding:16px;border-radius:var(--radius);border:1px solid var(--line)}
.filter-group{display:flex;flex-direction:column;gap:4px;min-width:130px}
.filter-group label{font-size:12px;color:var(--muted)}
select,input[type=text],input[type=search],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=url],textarea{background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;outline:0;width:100%;transition:.2s}
select:focus,input:focus,textarea:focus{border-color:var(--primary)}
.chk{display:inline-flex;gap:6px;align-items:center;cursor:pointer;font-size:14px}
.chk input{accent-color:var(--primary);width:17px;height:17px}
.term-cloud,.blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.term-pill{display:inline-flex;gap:6px;align-items:center;padding:6px 14px;border-radius:30px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:700;transition:.2s}
.term-pill:hover{border-color:var(--primary);color:var(--primary)}
.term-pill small{color:var(--muted)}
.pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:34px}
.page-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.page-btn:hover{border-color:var(--primary)}
.page-info{color:var(--muted);font-size:14px}
.period-tabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.period-tabs a{padding:7px 18px;border-radius:30px;background:var(--surface);font-weight:700;font-size:14px}
.period-tabs a.active{background:var(--primary);color:#fff}
/* single title */
.single-title{position:relative}
.title-backdrop{position:absolute;inset:0 0 auto 0;height:min(78vh,620px);background-size:cover;background-position:center top;z-index:-1}
.backdrop-fade{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 6%,rgba(11,13,18,.82) 55%,rgba(11,13,18,.5))}
[data-theme=light] .backdrop-fade{background:linear-gradient(0deg,var(--bg) 6%,rgba(244,245,248,.88) 55%,rgba(244,245,248,.6))}
.title-head{display:flex;gap:34px;padding-top:56px;padding-bottom:30px}
.title-poster{flex:0 0 260px}
.title-poster img{border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.5);width:100%;aspect-ratio:2/3;object-fit:cover}
.title-info{flex:1;min-width:0}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin-bottom:10px}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{opacity:.5}
.title-h1{font-size:clamp(22px,3.2vw,36px);font-weight:900;line-height:1.4}
.title-en{color:var(--muted);font-size:17px;direction:ltr;text-align:right;margin-top:2px}
.title-badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{display:inline-flex;align-items:center;padding:3px 12px;border-radius:30px;background:var(--surface2);border:1px solid var(--line);font-size:13px;font-weight:700}
.chip-green{background:rgba(34,197,94,.14);color:#4ade80;border-color:transparent}
.chip-blue{background:rgba(14,165,233,.14);color:#38bdf8;border-color:transparent}
.chip-amber{background:rgba(245,158,11,.14);color:var(--accent);border-color:transparent}
.title-terms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.title-story{color:#cfd4de;max-width:760px;margin-bottom:22px;font-size:15.5px}
[data-theme=light] .title-story{color:var(--text)}
.title-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vote-group button{display:inline-flex;gap:6px;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:9px 14px;cursor:pointer}
.vote-group button.active{color:var(--primary);border-color:var(--primary)}
.title-body{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.title-main{min-width:0}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.box-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:900;margin-bottom:16px}
.title-side{position:sticky;top:90px}
.specs dl{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:14px}
.specs dt{color:var(--muted)}
.specs dd a{color:var(--text);border-bottom:1px dashed var(--line)}
.specs dd a:hover{color:var(--primary)}
/* downloads */
.season{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.season-title{background:var(--surface2);padding:12px 16px;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.season-title small{color:var(--muted);font-weight:400}
.season.collapsed .episodes{display:none}
.episodes{padding:8px}
.episode{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:10px}
.episode:nth-child(odd){background:rgba(255,255,255,.02)}
.episode-head{display:flex;gap:8px;align-items:center;font-weight:700}
.ver{font-size:12px;color:var(--accent);font-weight:400}
.ver-title{font-size:15px;margin-bottom:10px;color:var(--accent)}
.movie-version{margin-bottom:16px}
.episode-links{display:flex;flex-wrap:wrap;gap:8px}
.dl-link{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font-size:13px;transition:.2s}
.dl-link:hover{border-color:var(--primary);transform:translateY(-1px)}
.dl-q{font-weight:900;direction:ltr}
.dl-size{color:var(--muted);direction:ltr}
.dl-price{color:var(--accent);font-weight:700}
.dl-link.q-4k,.dl-link.q-1080,.dl-link.q-720{background:var(--surface2)!important}
.dl-link.q-4k .dl-q{color:#a78bfa}.dl-link.q-1080 .dl-q{color:#38bdf8}.dl-link.q-720 .dl-q{color:#4ade80}
.dl-online{display:inline-flex;gap:6px;align-items:center;padding:7px 14px;border-radius:10px;border:0;background:var(--primary);color:#fff;font-weight:700;cursor:pointer;font-size:13px}
.dl-online .ic{fill:#fff;width:15px;height:15px}
.player{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;display:grid;place-items:center;color:var(--muted)}
.player video{width:100%;height:100%}
/* prose & faq */
.prose{font-size:15.5px;line-height:2.05}
.prose h2,.prose h3{margin:22px 0 10px;font-weight:900}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{padding-right:22px;margin-bottom:14px}
.prose a{color:var(--primary)}
.prose img{border-radius:12px;margin:14px auto}
.prose blockquote{border-right:4px solid var(--primary);padding:6px 16px;background:var(--surface2);border-radius:8px;margin:14px 0}
.article .prose{max-height:none}
.faq-item{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px}
.faq-item summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between}
.faq-item summary::after{content:"+";color:var(--primary);font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item div{margin-top:10px;color:var(--muted)}
/* comments */
.comment-form{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.comment-form-foot{display:flex;justify-content:space-between;align-items:center}
.comment{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.comment.pinned{background:color-mix(in srgb,var(--primary) 7%,transparent);border-radius:12px;padding:14px}
.comment.reply{border:0;padding:12px 0 0;margin-right:4px}
.comment-avatar{flex:0 0 42px;height:42px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;color:var(--muted)}
.comment-avatar.sm{flex-basis:34px;height:34px}
.comment-body{flex:1;min-width:0}
.comment-head{display:flex;gap:10px;align-items:center;font-size:14px}
.comment-head time{color:var(--muted);font-size:12px}
.staff-badge{background:var(--primary);color:#fff;font-size:10px;padding:1px 8px;border-radius:20px;margin-right:6px}
.comment-text{margin:6px 0;white-space:pre-wrap;word-break:break-word}
.comment-text.spoiler{filter:blur(6px);cursor:pointer;user-select:none;transition:.3s}
.comment-text.spoiler.revealed{filter:none;user-select:auto}
.comment-actions button{background:none;border:0;color:var(--muted);cursor:pointer;display:inline-flex;gap:4px;align-items:center;font-size:13px}
.comment-actions .ic{width:15px;height:15px}
/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.blog-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:block}
.blog-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
.blog-cover{aspect-ratio:16/9;background:var(--surface2);overflow:hidden}
.blog-cover img{width:100%;height:100%;object-fit:cover}
.blog-card h2,.blog-card h3{font-size:16px;font-weight:900;padding:14px 16px 4px;line-height:1.6}
.blog-card p{color:var(--muted);font-size:13.5px;padding:0 16px 16px}
.blog-card-body{padding-bottom:4px}
.blog-meta{display:flex;gap:12px;color:var(--muted);font-size:12px;padding:0 16px 14px}
.single-post{max-width:860px;padding:34px 20px 50px}
.post-h1{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.5;margin-bottom:10px}
.post-meta{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:13px;margin-bottom:22px}
.post-cover{border-radius:var(--radius);margin-bottom:26px;width:100%}
/* top */
.top-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.top-col-title{font-size:20px;font-weight:900;margin-bottom:14px}
.top-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.top-list li{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:14px;padding:10px;border:1px solid var(--line)}
.top-list .rank{font-size:28px;font-weight:900;width:44px;text-align:center;background:linear-gradient(var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.top-list a{display:flex;gap:12px;align-items:center;flex:1;min-width:0}
.top-list img{width:52px;height:76px;object-fit:cover;border-radius:10px}
.top-list b{display:block}
.top-list small{color:var(--muted);display:flex;gap:4px;align-items:center}
.top-list .ic{width:13px;height:13px;fill:#f5c518;stroke:none}
/* auth */
.auth-wrap{display:grid;place-items:center;padding:60px 20px;min-height:70vh}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.auth-title{font-size:21px;font-weight:900;text-align:center;margin-bottom:20px}
.auth-tabs{display:flex;background:var(--surface2);border-radius:12px;padding:4px;margin-bottom:20px}
.auth-tab{flex:1;padding:9px;border:0;background:none;border-radius:9px;cursor:pointer;font-weight:700;color:var(--muted)}
.auth-tab.active{background:var(--primary);color:#fff}
.auth-card label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}
.auth-card .btn{margin-top:18px}
.otp-timer{text-align:center;margin-top:10px;font-size:13px}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:14px}
.alert-error{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.alert-success{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.3)}
/* requests / plans / profile */
.request-form{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.request-form input{flex:1;min-width:200px}
.request-item{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:12px;padding:12px 16px;margin-bottom:8px}
.req-vote{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--surface2);padding:6px 12px;border-radius:10px;cursor:pointer}
.req-title{flex:1;font-weight:700}
.req-status{font-size:12px;padding:2px 10px;border-radius:20px;background:var(--surface2)}
.status-done{background:rgba(34,197,94,.15);color:#4ade80}.status-approved{background:rgba(14,165,233,.15);color:#38bdf8}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.plan-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;text-align:center}
.plan-card.featured{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.plan-badge{position:absolute;top:-12px;right:50%;transform:translateX(50%);background:var(--accent);color:#000;font-weight:900;font-size:12px;padding:3px 14px;border-radius:20px}
.plan-price{font-size:30px;font-weight:900;margin:12px 0 4px}
.plan-price small{font-size:13px;color:var(--muted);margin-right:4px}
.plan-days{color:var(--muted);margin-bottom:16px}
.plan-features{list-style:none;text-align:right;margin-bottom:20px}
.plan-features li{display:flex;gap:8px;padding:5px 0}
.plan-features .ic{color:var(--ok)}
.profile{padding:30px 20px 50px}
.profile-head{display:flex;gap:16px;align-items:center;margin-bottom:24px}
.profile-head h1{font-size:22px}
.profile-head .btn{margin-right:auto}
.profile-avatar{width:68px;height:68px;border-radius:50%;background:var(--surface2);display:grid;place-items:center}
.profile-tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.profile-tabs a{padding:10px 16px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.profile-tabs a.active{color:var(--primary);border-color:var(--primary)}
.search-page-form{display:flex;gap:10px;margin-bottom:24px;max-width:600px}
/* error */
.error-page{text-align:center;padding:90px 20px}
.error-code{font-size:110px;font-weight:900;line-height:1;background:linear-gradient(var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.error-page h1{font-size:24px;margin:10px 0}
.error-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}
.error-icon .ic{width:80px;height:80px;color:var(--primary)}
/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);margin-top:50px;padding:40px 0 20px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
.footer-brand{font-size:24px;margin-bottom:10px}
.footer-about p{color:var(--muted);max-width:460px}
.social-row{display:flex;gap:8px;margin-top:14px}
.social-row a{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--surface2)}
.social-row a:hover{color:var(--primary)}
.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px;align-content:start}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;color:var(--muted);font-size:13px;text-align:center}
/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:12px 22px;border-radius:14px;z-index:200;transition:.3s;font-weight:700}
.toast.show{transform:translate(-50%,0)}
.toast.err{border-color:var(--danger)}
/* responsive */
@media (max-width:1100px){.main-nav{display:none}.menu-toggle{display:inline-grid}.title-body{grid-template-columns:1fr}.title-side{position:static}}
@media (max-width:760px){
  body{font-size:14.5px}
  .header-inner{height:62px;gap:8px}
  .header-search{max-width:none}
  .brand-text{font-size:18px}
  .title-head{flex-direction:column;align-items:center;text-align:center;padding-top:30px;gap:20px}
  .title-poster{flex-basis:auto;width:190px}
  .title-badges,.title-terms,.title-actions,.breadcrumb{justify-content:center}
  .title-en{text-align:center}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px 12px}
  .row-scroll{grid-auto-columns:138px;gap:12px}
  .top-cols,.footer-top{grid-template-columns:1fr}
  .hero-slide{height:62vh}
  .box{padding:16px}
  .episode{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ==========================================================
   CINEMACITY DOWNLOAD UI V2
   ========================================================== */

.download-box{
    padding:24px;
    overflow:hidden;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb,var(--surface) 96%,#0ea5a0 4%),
        var(--surface)
      );
}

.download-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.download-section-head .box-title{
    margin-bottom:3px;
}

.download-section-sub{
    color:var(--muted);
    font-size:13px;
}


/* ---------- Season ---------- */

.download-season{
    overflow:hidden;
    margin-bottom:16px;
    border:1px solid
      color-mix(in srgb,var(--line) 85%,#2dd4bf 15%);
    border-radius:20px;

    background:
      color-mix(
        in srgb,
        var(--surface) 92%,
        #0f766e 8%
      );
}

.download-season-title{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    padding:15px 18px;

    cursor:pointer;
    user-select:none;

    font-size:16px;

    border-bottom:1px solid var(--line);

    background:
      color-mix(
        in srgb,
        var(--surface2) 88%,
        #0f766e 12%
      );
}

.download-season-title small{
    color:var(--muted);
    font-weight:400;
}

.season-heading{
    display:flex;
    align-items:center;
    gap:10px;
}

.season-chevron{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:rgba(255,255,255,.055);

    font-size:18px;
    line-height:1;

    transition:transform .2s ease;
}

.download-season.collapsed .season-chevron{
    transform:rotate(180deg);
}

.download-season.collapsed .download-episodes{
    display:none;
}

.download-episodes{
    padding:14px;
}


/* ---------- Episode ---------- */

.download-episode,
.download-movie-version{

    display:block;

    padding:18px;

    margin-bottom:14px;

    border:1px solid var(--line);
    border-radius:17px;

    background:
      color-mix(
        in srgb,
        var(--bg) 52%,
        var(--surface) 48%
      );

    transition:
      border-color .2s,
      transform .2s;
}

.download-episode:last-child,
.download-movie-version:last-child{
    margin-bottom:0;
}

.download-episode:hover,
.download-movie-version:hover{

    transform:translateY(-1px);

    border-color:
      color-mix(
        in srgb,
        var(--primary) 30%,
        var(--line)
      );
}


/* ---------- Episode header ---------- */

.episode-top{

    display:flex;
    align-items:center;
er;
    justify-content:space-between;

    gap:14px;

    padding-bottom:13px;
    margin-bottom:14px;

    border-bottom:1px solid var(--line);
}

.episode-identity{

    display:flex;
    align-i:center;

    gap:10px;

    min-width:0;
}

.episode-name{

    font-size:16px;
    font-weight:900;
}

.episode-code{

    direction:ltr;

    color:var(--muted);

    font-size:12px;
    font-weight:700;

    letter-spacing:.4px;
}

.episode-badges{

    display:flex;
    align-items:center;

    gap:8px;

    flex-wrap:wrap;
}

.episode-version,
.episode-free{

    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:4px 11px;

    border-radius:9px;

    font-size:12px;
    font-weight:800;
}

.episode-version{

    color:#c4b5fd;

    border:1px solid
      color-mix(in srgb,#8b5cf6 28%,transparent);

    background:
      color-mix(in srgb,#8b5cf6 22%,transparent);
}

.episode-free{

    color:#6ee7a2;

    border:1px solid
      color-mix(in srgb,var(--ok) 26%,transparent);

    background:
      color-mix(in srgb,var(--ok) 18%,transparent);
}


/* ---------- Download buttons layout ---------- */

.episode-actions{

    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      190px;

    gap:14px;

    align-items:stretch;
}

.download-quality-grid{

    min-width:0;

    display:grid;

    grid-template-columns:
      repeat(
        auto-fit,
        minmax(150px,1fr)
      );

    gap:10px;
}


/* ---------- Download quality card ---------- */

.download-quality-card{

    position:relative;

    min-height:82px;

    padding:12px 13px;

    overflow:hidden;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:4px;

    text-align:center;

    border-radius:14px;

    border:1px solid
      color-mix(
        in srgb,
        var(--ok) 38%,
        var(--line)
      );

    background:
      linear-gradient(
        145deg,
        color-mix(
          in srgb,
          var(--ok) 17%,
          var(--surface2)
        ),
        color-mix(
          in srgb,
          var(--ok) 8%,
          var(--surface)
        )
      );

    color:#79e7aa;

    transition:
      transform .18s,
      border-color .18s,
      box-shadow .18s,
      background .18s;
}

.download-quality-card::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
      linear-gradient(
        120deg,
        transparent 25%,
        rgba(255,255,255,.07),
        transparent 70%
      );

    transform:translateX(120%);

    transition:transform .45s;
}

.download-quality-card:hover{

    transform:translateY(-2px);

    border-color:
      color-mix(
        in srgb,
        var(--ok) 72%,
        white 4%
      );

    box-shadow:
      0 9px 22px rgba(0,0,0,.18);
}

.download-quality-card:hover::after{
    transform:translateX(-120%);
}

.download-quality-main{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    direction:rtl;

    font-size:14px;
}

.download-quality-main strong{

    font-weight:900;
    white-space:nowrap;
}

.download-icon{

    display:inline-flex;
}

.download-icon .ic{

    width:17px;
    height:17px;
}

.download-file-size{

    direction:ltr;

    color:
      color-mix(
        in srgb,
        #79e7aa 75%,
        var(--muted)
      );

    font-size:12px;
    font-weight:700;
}

.download-price{

    color:var(--accent);

    font-size:11px;
    font-weight:800;
}


/*
  qualityClass قبلی پروژه برای 720/1080/4K
  background را override می‌کرد.
  اینجا ظاهر همه کیفیت‌ها را یکدست می‌کنیم.
*/

.download-quality-card.q-4k,
.download-quality-card.q-1080,
.download-quality-card.q-720{

    background:
      linear-gradient(
        145deg,
        color-mix(
          in srgb,
          var(--ok) 17%,
          var(--surface2)
        ),
        color-mix(
          in srgb,
          var(--ok) 8%,
          var(--surface)
        )
      ) !important;
}

.download-quality-card.q-4k .download-quality-main,
.download-quality-card.q-1080 .download-quality-main,
.download-quality-card.q-720 .download-quality-main{

    color:#79e7aa;
}


/* ---------- Online play ---------- */

.download-play-btn{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    min-height:82px;

    border-radius:14px;

    border:1px solid
      color-mix(
        in srgb,
        var(--accent) 70%,
        var(--line)
      );

    background:
      linear-gradient(
        145deg,
        color-mix(
          in srgb,
          var(--accent) 17%,
          var(--surface2)
        ),
        color-mix(
          in srgb,
          var(--accent) 8%,
          var(--surface)
        )
      );

    color:#ffc95c;

    font-weight:900;

    cursor:pointer;

    transition:
      transform .18s,
      border-color .18s,
      box-shadow .18s;
}

.download-play-btn:hover{

    transform:translateY(-2px);

    border-color:var(--accent);

    box-shadow:
      0 9px 22px rgba(0,0,0,.20);
}

.download-play-btn .ic{

    width:20px;
    height:20px;

    fill:currentColor;
}


/* ---------- Movie ---------- */

.movie-version.download-movie-version{
    margin-bottom:14px;
}


/* ---------- Tablet ---------- */

@media(max-width:900px){

    .episode-actions{
        grid-template-columns:1fr;
    }

    .download-play-btn{
        min-height:58px;
    }

    .download-quality-grid{
        grid-template-columns:
          repeat(2,minmax(0,1fr));
    }
}


/* ---------- Mobile ---------- */

@media(max-width:560px){

    .download-box{
        padding:15px;
    }

    .download-section-sub{
        display:none;
    }

    .download-season-title{
        padding:13px 14px;
    }

    .download-episodes{
        padding:9px;
    }

    .download-episode,
    .download-movie-version{
        padding:13px;
    }

    .episode-top{

        align-items:flex-start;
        flex-direction:column;
    }

    .episode-badges{
        width:100%;
    }

    .download-quality-grid{

        grid-template-columns:
          repeat(2,minmax(0,1fr));

        gap:8px;
    }

    .download-quality-card{

        min-height:75px;

        padding:10px 8px;
    }

    .download-quality-main{
        font-size:13px;
    }

    .download-file-size{
        font-size:11px;
    }
}



/* ==========================================================
   CINEMACITY DOWNLOAD UI V3
   ========================================================== */

@media (min-width: 901px) {

    .episode-actions {
        display: flex !important;
        flex-direction: row;
        direction: rtl;

        align-items: stretch;

        gap: 12px !important;

        width: 100%;
    }


    .download-quality-grid {
        display: flex !important;

        flex: 1 1 auto;

        min-width: 0;

        gap: 10px !important;

        flex-wrap: nowrap !important;

        direction: rtl;
    }


    .download-quality-card {
        flex: 1 1 0 !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 78px !important;

        padding: 11px 8px !important;

        border-radius: 13px !important;
    }


    .download-quality-main {
        gap: 7px !important;
    }


    .download-quality-main strong {
        font-size: 14px !important;
    }


    .download-file-size {
        margin-top: 2px;

        font-size: 12px !important;
    }


    .download-play-btn {
        flex: 0 0 185px !important;

        width: 185px !important;
        min-width: 185px !important;

        min-height: 78px !important;

        border-radius: 13px !important;
    }

}


/* medium screen */

@media (min-width: 901px) and (max-width: 1150px) {

    .download-play-btn {
        flex-basis: 155px !important;

        width: 155px !important;
        min-width: 155px !important;
    }

    .download-quality-main strong {
        font-size: 13px !important;
    }

}


/* mobile/tablet can wrap cleanly */

@media (max-width: 900px) {

    .episode-actions {
        display: flex !important;

        flex-direction: column !important;

        gap: 10px !important;
    }

    .download-quality-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }

    .download-play-btn {
        width: 100% !important;

        min-height: 58px !important;
    }

}


/* =========================================================
   CINEPLAYER PRO V1
   ========================================================= */

.cc-online-section {
    padding: 20px;
    overflow: visible;
}

.cc-player-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.cc-player-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.cc-now-playing {
    max-width: 45%;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cine-player {
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: #07090d;

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, .28);
}

.cine-stage {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #000;

    outline: 0;
}

.cine-video {
    display: block;

    width: 100%;
    height: 100%;

    background: #000;

    object-fit: contain;
}

.cine-empty {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255, 122, 24, .13),
            transparent 34%
        ),
        #090b10;
}

.cine-empty-icon {
    display: grid;

    width: 68px;
    height: 68px;

    place-items: center;

    padding-right: 3px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 50%,
            transparent
        );

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        );

    color: var(--primary2);

    font-size: 26px;
}

.cine-empty strong {
    font-size: 18px;
}

.cine-empty small {
    color: var(--muted);
}

.cine-loading {
    position: absolute;
    inset: 0;
    z-index: 7;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    background:
        rgba(4, 6, 10, .55);

    backdrop-filter:
        blur(3px);
}

.cine-loading span {
    width: 34px;
    height: 34px;

    border:
        3px solid
        rgba(255, 255, 255, .18);

    border-top-color:
        var(--primary);

    border-radius: 50%;

    animation:
        cineSpin .8s
        linear infinite;
}

@keyframes cineSpin {
    to {
        transform:
            rotate(360deg);
    }
}

.cine-center-play {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

    width: 64px;
    height: 64px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255, 255, 255, .22);

    border-radius: 50%;

    background:
        rgba(7, 9, 13, .58);

    backdrop-filter:
        blur(10px);

    color: #fff;

    font-size: 24px;

    cursor: pointer;

    opacity: 0;

    transition:
        .2s;
}

.cine-stage:hover
.cine-center-play,

.cine-stage:not(.is-playing)
.cine-center-play {
    opacity: 1;
}

.cine-controls {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 6;

    padding:
        30px 14px 12px;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, .88)
        );
}

.cine-progress {
    width: 100%;
    height: 5px;

    margin:
        0 0 10px;

    accent-color:
        var(--primary);

    cursor: pointer;
}

.cine-controls-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    direction: ltr;
}

.cine-controls-main,
.cine-tools {
    display: flex;

    align-items: center;

    gap: 8px;
}

.cine-btn,
.cine-tool,
.cine-quality-current {
    min-width: 36px;
    height: 36px;

    padding: 0 9px;

    border: 0;
    border-radius: 9px;

    background:
        rgba(255, 255, 255, .10);

    color: #fff;

    font: inherit;

    cursor: pointer;
}

.cine-btn:hover,
.cine-tool:hover,
.cine-quality-current:hover {
    background:
        rgba(255, 255, 255, .18);
}

.cine-time {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #fff;

    font-size: 12px;

    direction: ltr;
}

.cine-time i {
    opacity: .45;

    font-style: normal;
}

.cine-volume {
    width: 82px;

    accent-color: #fff;
}

.cine-speed {
    height: 36px;

    padding: 0 7px;

    border: 0;
    border-radius: 9px;

    background:
        rgba(255, 255, 255, .10);

    color: #fff;
}

.cine-speed option {
    color: #111;
}

.cine-quality-wrap {
    position: relative;
}

.cine-quality-menu {
    position: absolute;

    right: 0;
    bottom: 44px;

    z-index: 20;

    min-width: 160px;
    max-height: 280px;

    overflow: auto;

    padding: 6px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 12px;

    background: #12161f;

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, .45);
}

.cine-q-item {
    display: flex;

    width: 100%;

    padding: 9px 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #d9dee8;

    cursor: pointer;

    white-space: nowrap;
}

.cine-q-item:hover,
.cine-q-item.active {
    background:
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        );

    color: #fff;
}

.cine-meta {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    padding: 10px 14px;

    border-top:
        1px solid
        rgba(255, 255, 255, .06);

    background: #0d1118;

    color: var(--muted);

    font-size: 12px;
}

.cine-source-size {
    direction: ltr;
}

.cine-stage.has-error
.cine-center-play {
    display: none;
}


@media (max-width: 700px) {

    .cc-player-head {
        flex-direction: column;
    }

    .cc-now-playing {
        max-width: 100%;
    }

    .cine-controls {
        padding:
            24px 8px 8px;
    }

    .cine-volume,
    .cine-pip {
        display: none;
    }

    .cine-tools {
        gap: 5px;
    }

    .cine-btn,
    .cine-tool,
    .cine-quality-current,
    .cine-speed {
        height: 32px;

        padding: 0 7px;

        font-size: 11px;
    }

    .cine-time {
        font-size: 10px;
    }

    .cine-center-play {
        width: 52px;
        height: 52px;
    }
}

/* =========================================================
   CINEPLAYER VISIBILITY FIX
   ========================================================= */

/* Author CSS must never override the HTML hidden attribute */
.cc-online-section[hidden],
.cine-loading[hidden],
.cine-empty[hidden],
.cine-quality-menu[hidden] {
    display: none !important;
}

/* Player must not occupy any space until the user requests playback */
#online[hidden] {
    display: none !important;
}


/* =========================================================
   PLAYER LTR CONTROLS FIX
   Timeline: left = beginning, right = end
   ========================================================= */

.cine-progress,
.cine-volume {
    direction: ltr !important;
    unicode-bidi: isolate;
}


/* =========================================================
   DOWNLOAD VERSION GROUPS
   ========================================================= */

.download-version-block {
    padding: 14px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--line) 82%,
            var(--primary) 18%
        );

    border-radius: 15px;

    background:
        color-mix(
            in srgb,
            var(--bg) 72%,
            var(--surface) 28%
        );
}

.download-version-block +
.download-version-block {
    margin-top: 12px;
}

.download-version-head {
    display: flex;

    align-items: center;

    margin-bottom: 11px;
}

.download-version-head
.episode-version {
    padding: 6px 12px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 900;
}


/* Desktop:
   qualities remain in one clean row
   for each dubbed/subtitle version.
*/

@media (min-width: 901px) {

    .download-version-block
    .episode-actions {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            185px !important;

        gap: 12px !important;
    }

    .download-version-block
    .download-quality-grid {
        display: grid !important;

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(135px, 1fr)
            ) !important;

        gap: 10px !important;

        direction: rtl;
    }

    .download-version-block
    .download-quality-card {
        width: auto !important;
        min-width: 0 !important;

        min-height: 78px !important;
    }

    .download-version-block
    .download-play-btn {
        width: 185px !important;
        min-width: 185px !important;

        min-height: 78px !important;
    }

}


@media (max-width: 900px) {

    .download-version-block {
        padding: 10px;
    }

    .download-version-block
    .download-quality-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


/* =========================================================
   HOME REDESIGN — modern responsive landing page
   ========================================================= */

.home-shell{
  position:relative;
  padding-bottom:36px;
}

.home-shell::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:520px;
  pointer-events:none;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb,var(--primary) 22%,transparent), transparent 36%),
    radial-gradient(circle at 15% 10%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 28%);
  opacity:.85;
  z-index:-1;
}

.home-shell .section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.home-shell .section-kicker::before{
  content:"";
  width:28px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}

/* hero */
.home-shell .home-hero{
  margin-bottom:42px;
  padding-top:16px;
}

.home-shell .hero-slide{
  min-height:min(76vh,680px);
  padding-top:90px;
  padding-bottom:42px;
  align-items:center;
}

.home-shell .hero-overlay{
  background:
    linear-gradient(90deg, rgba(7,9,15,.96) 0%, rgba(7,9,15,.88) 32%, rgba(7,9,15,.48) 62%, rgba(7,9,15,.35) 100%),
    linear-gradient(0deg, var(--bg) 4%, rgba(11,13,18,.44) 36%, rgba(11,13,18,.1) 100%);
}

[data-theme=light] .home-shell .hero-overlay{
  background:
    linear-gradient(90deg, rgba(244,245,248,.96) 0%, rgba(244,245,248,.9) 35%, rgba(244,245,248,.5) 65%, rgba(244,245,248,.24) 100%),
    linear-gradient(0deg, var(--bg) 4%, rgba(244,245,248,.2) 100%);
}

.home-shell .hero-content{
  width:100%;
  padding-bottom:0;
}

.home-shell .hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:38px;
  align-items:center;
}

.home-shell .hero-copy{
  max-width:700px;
}

.home-shell .hero-topline{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.home-shell .hero-kicker{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#d9deea;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

[data-theme=light] .home-shell .hero-kicker{
  color:var(--text);
  background:rgba(255,255,255,.54);
  border-color:rgba(0,0,0,.06);
}

.home-shell .hero-badge{
  padding:7px 14px;
  box-shadow:0 12px 30px rgba(245,158,11,.18);
}

.home-shell .hero-title{
  font-size:clamp(30px,4.4vw,56px);
  max-width:700px;
  letter-spacing:-.03em;
  margin-bottom:10px;
}

.home-shell .hero-meta{
  gap:12px;
  margin:14px 0 18px;
}

.home-shell .hero-meta>span:not(.imdb-chip){
  padding:6px 12px;
  font-size:13px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

[data-theme=light] .home-shell .hero-meta>span:not(.imdb-chip){
  border-color:rgba(0,0,0,.07);
  background:rgba(255,255,255,.62);
}

.home-shell .hero-desc{
  max-width:620px;
  font-size:15px;
  line-height:2;
  color:#d8dde8;
  margin-bottom:16px;
}

[data-theme=light] .home-shell .hero-desc{
  color:var(--muted);
}

.home-shell .hero-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:22px;
}

.home-shell .hero-tags span{
  display:inline-flex;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:700;
  color:#edf1fa;
}

[data-theme=light] .home-shell .hero-tags span{
  color:var(--text);
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.58);
}

.home-shell .hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.home-shell .hero-btn{
  min-width:170px;
}

.home-shell .hero-btn-secondary{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

[data-theme=light] .home-shell .hero-btn-secondary{
  background:rgba(255,255,255,.7);
  border-color:rgba(0,0,0,.08);
}

.home-shell .hero-poster-wrap{
  display:flex;
  justify-content:flex-end;
}

.home-shell .hero-poster-card{
  position:relative;
  width:min(300px,100%);
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  box-shadow:0 32px 80px rgba(0,0,0,.38);
  transform:translateY(10px);
}

.home-shell .hero-poster{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
}

.home-shell .hero-poster-glow{
  position:absolute;
  inset:auto 18px -25px 18px;
  height:60px;
  border-radius:50%;
  background:color-mix(in srgb,var(--primary) 42%,transparent);
  filter:blur(32px);
  opacity:.5;
}

.home-shell .hero-dots{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}

.home-shell .hero-dots button{
  width:12px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.1);
}

.home-shell .hero-dots button.active{
  width:34px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border-color:transparent;
}

/* sections */
.home-shell .row-section{
  position:relative;
  margin:42px auto;
}

.home-shell .row-head{
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

.home-shell .row-title{
  font-size:24px;
  padding-right:18px;
}

.home-shell .row-title::before{
  width:6px;
  top:10%;
  bottom:10%;
}

.home-shell .row-sub{
  padding-right:18px;
  font-size:13px;
}

.home-shell .row-more{
  min-width:max-content;
  background:color-mix(in srgb,var(--surface) 88%, #fff 2%);
  border:1px solid var(--line);
  padding:10px 16px;
  border-radius:14px;
  transition:.2s;
}

.home-shell .row-more:hover{
  border-color:color-mix(in srgb,var(--primary) 35%,transparent);
  background:color-mix(in srgb,var(--surface) 78%, var(--primary) 4%);
  transform:translateY(-2px);
}

.home-shell .row-scroll{
  position:relative;
  grid-auto-columns:clamp(160px, 15.2vw, 210px);
  gap:18px;
  padding:8px 2px 16px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--primary) 45%,transparent) transparent;
}

.home-shell .row-scroll::after{
  content:"";
  position:sticky;
  left:0;
  width:40px;
  min-width:40px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--bg),transparent);
}

/* home cards */
.home-shell .card{
  display:block;
}

.home-shell .card-link{
  display:block;
}

.home-shell .card-poster{
  border-radius:22px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--surface);
  box-shadow:0 16px 36px rgba(0,0,0,.22);
}

.home-shell .card-poster::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,9,15,0) 45%, rgba(7,9,15,.24) 78%, rgba(7,9,15,.75) 100%);
  opacity:.95;
  pointer-events:none;
}

.home-shell .card:hover .card-poster{
  box-shadow:0 20px 50px rgba(0,0,0,.33);
}

.home-shell .card-imdb,
.home-shell .card-type,
.home-shell .card-quality,
.home-shell .card-badge{
  z-index:2;
  backdrop-filter:blur(10px);
}

.home-shell .card-imdb{
  top:10px;
  right:10px;
  border-radius:10px;
  padding:4px 10px;
}

.home-shell .card-type{
  top:10px;
  left:10px;
  border-radius:10px;
  padding:5px 10px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
}

.home-shell .card-quality{
  left:10px;
  bottom:10px;
  border-radius:10px;
  background:rgba(8,10,15,.72);
  border:1px solid rgba(255,255,255,.08);
  padding:4px 10px;
}

.home-shell .card-badge{
  right:10px;
  bottom:10px;
  border-radius:10px;
  padding:4px 10px;
}

.home-shell .card-hover{
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28) 52%, rgba(0,0,0,.72));
}

.home-shell .card-hover-play{
  width:58px;
  height:58px;
  box-shadow:0 14px 24px rgba(225,29,72,.28);
}

.home-shell .card-title{
  font-size:15px;
  font-weight:900;
  white-space:normal;
  line-height:1.65;
  min-height:3.3em;
  margin-top:12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.home-shell .card-meta{
  gap:8px;
  flex-wrap:wrap;
  white-space:normal;
  line-height:1.8;
  margin-top:3px;
}

.home-shell .card-meta span{
  display:inline-flex;
  align-items:center;
}

.home-shell .card-meta span:not(:last-child)::after{
  margin-right:8px;
}

/* blog */
.home-shell .home-blog-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:20px;
}

.home-shell .home-blog-stack{
  display:grid;
  gap:16px;
}

.home-shell .blog-card{
  border-radius:22px;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 94%,#fff 2%), var(--surface));
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}

.home-shell .blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 50px rgba(0,0,0,.22);
}

.home-shell .blog-card .blog-cover{
  border-bottom:1px solid var(--line);
}

.home-shell .blog-card-featured{
  display:grid;
  overflow:hidden;
}

.home-shell .blog-card-featured .blog-cover{
  aspect-ratio:16/8.6;
}

.home-shell .blog-card-featured .blog-card-body{
  padding:18px 18px 22px;
}

.home-shell .blog-card-featured h3{
  font-size:24px;
  padding:0;
  margin:10px 0 8px;
  line-height:1.6;
}

.home-shell .blog-card-featured p{
  padding:0;
  font-size:14px;
  line-height:2;
}

.home-shell .blog-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary) 16%,transparent);
  color:#ff9ab1;
  border:1px solid color-mix(in srgb,var(--primary) 36%,transparent);
  font-size:12px;
  font-weight:900;
}

.home-shell .blog-card-compact{
  display:grid;
  grid-template-columns:122px minmax(0,1fr);
  align-items:stretch;
  overflow:hidden;
}

.home-shell .blog-card-compact .blog-cover{
  aspect-ratio:auto;
  height:100%;
  min-height:100%;
  border-left:1px solid var(--line);
  border-bottom:0;
}

.home-shell .blog-card-compact .blog-cover img{
  height:100%;
}

.home-shell .blog-card-compact .blog-card-body{
  padding:14px 16px;
}

.home-shell .blog-card-compact h3{
  font-size:15px;
  padding:0;
  margin:0 0 6px;
  line-height:1.7;
}

.home-shell .blog-card-compact p{
  padding:0;
  font-size:13px;
  line-height:1.95;
}

/* responsiveness */
@media (max-width: 1180px){
  .home-shell .hero-layout{
    grid-template-columns:minmax(0,1fr) 250px;
    gap:24px;
  }

  .home-shell .row-scroll{
    grid-auto-columns:clamp(150px, 18vw, 190px);
  }
}

@media (max-width: 960px){
  .home-shell .home-blog-grid{
    grid-template-columns:1fr;
  }

  .home-shell .hero-slide{
    min-height:620px;
    align-items:flex-end;
  }

  .home-shell .hero-layout{
    grid-template-columns:1fr;
    align-items:end;
  }

  .home-shell .hero-poster-wrap{
    display:none;
  }
}

@media (max-width: 760px){
  .home-shell .home-hero{
    margin-bottom:26px;
  }

  .home-shell .hero-slide{
    min-height:540px;
    padding-top:74px;
    padding-bottom:24px;
    background-position:center center;
  }

  .home-shell .hero-title{
    font-size:30px;
  }

  .home-shell .hero-desc{
    font-size:14px;
    -webkit-line-clamp:4;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .home-shell .hero-meta{
    gap:8px;
  }

  .home-shell .hero-meta>span:not(.imdb-chip){
    font-size:12px;
    padding:5px 10px;
  }

  .home-shell .hero-tags{
    display:none;
  }

  .home-shell .hero-actions{
    width:100%;
  }

  .home-shell .hero-btn,
  .home-shell .hero-btn-secondary{
    flex:1 1 0;
    min-width:0;
    padding:11px 12px;
  }

  .home-shell .row-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .home-shell .row-title{
    font-size:21px;
  }

  .home-shell .row-more{
    padding:8px 13px;
    font-size:13px;
  }

  .home-shell .row-scroll{
    grid-auto-columns:42vw;
    gap:14px;
    padding-bottom:10px;
  }

  .home-shell .card-poster{
    border-radius:18px;
  }

  .home-shell .card-title{
    font-size:13px;
    min-height:3.1em;
  }

  .home-shell .card-meta{
    font-size:11px;
  }

  .home-shell .blog-card-featured h3{
    font-size:19px;
  }

  .home-shell .blog-card-compact{
    grid-template-columns:104px minmax(0,1fr);
  }
}

@media (max-width: 560px){
  .home-shell .section-kicker{
    font-size:11px;
  }

  .home-shell .hero-topline{
    gap:8px;
  }

  .home-shell .hero-badge,
  .home-shell .hero-kicker{
    font-size:11px;
  }

  .home-shell .hero-title{
    font-size:26px;
  }

  .home-shell .hero-desc{
    margin-bottom:14px;
  }

  .home-shell .hero-dots{
    margin-top:10px;
  }

  .home-shell .hero-dots button{
    width:10px;
    height:10px;
  }

  .home-shell .hero-dots button.active{
    width:28px;
  }

  .home-shell .row-section{
    margin:34px auto;
  }

  .home-shell .row-scroll{
    grid-auto-columns:47vw;
  }

  .home-shell .blog-card-featured .blog-card-body,
  .home-shell .blog-card-compact .blog-card-body{
    padding:12px 13px 14px;
  }

  .home-shell .blog-card-compact{
    grid-template-columns:96px minmax(0,1fr);
  }
}

/* =========================================================
   HOME POLISH — cleaner cards + mouse-first horizontal rows
   ========================================================= */

/* Quality is intentionally hidden on homepage cards; detail pages keep it. */
.home-shell .card-quality{display:none!important}

/* Keep horizontal rows clean: no visible browser scrollbar. */
.home-shell .row-scroll{
  scrollbar-width:none!important;
  -ms-overflow-style:none;
  cursor:grab;
  overscroll-behavior-inline:contain;
  scroll-behavior:smooth;
}
.home-shell .row-scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.home-shell .row-scroll.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none!important;
  scroll-behavior:auto;
  user-select:none;
}
.home-shell .row-scroll.is-dragging *{pointer-events:none}

/* The fade at the edge gives a continuation cue without adding a scrollbar. */
.home-shell .row-scroll::after{
  width:28px;
  min-width:28px;
  opacity:.75;
}

@media (hover:none), (pointer:coarse){
  .home-shell .row-scroll{cursor:auto}
}

/* Homepage shelf end-boundary fix: the old fade pseudo-element became an
   extra grid column, so both touch and mouse could scroll past the last card. */
.home-shell .row-scroll::after{content:none!important;display:none!important;width:0!important;min-width:0!important}
.home-shell .row-scroll{scroll-padding-inline:0!important;overscroll-behavior-inline:contain}