:root{--bg:#0a0a0c;--bg2:#141417;--bg3:#1e1e23;--line:#2a2a30;--text:#f4f4f5;--muted:#a1a1aa;--red:#e50914;--red2:#b20710;--r:6px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
img{display:block;max-width:100%}
[hidden]{display:none!important}

.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:20px;padding:14px 4%;background:linear-gradient(#000c,#0000);transition:background .3s}
.nav.solid{background:#0a0a0cf2;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:400 28px/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.06em}
.logo b{color:var(--red);font-weight:400}
.links{display:flex;gap:22px;margin-left:12px}
.links a{color:var(--muted);font-weight:500;transition:color .2s}
.links a:hover,.links a.active{color:var(--text)}
.badge{background:var(--red);border-radius:10px;padding:1px 7px;font-size:11px;margin-left:3px}
.search{margin-left:auto}
.search input{width:220px;max-width:100%;background:#000a;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;transition:border-color .2s,width .2s}
.search input:focus{border-color:var(--red);outline:none;width:280px}
.icon-btn{background:none;border:0;font-size:20px;padding:6px 8px;border-radius:var(--r)}
.icon-btn:hover{background:var(--bg3)}
.burger{display:none}

.hero{position:relative;min-height:84vh;display:flex;align-items:flex-end;padding:0 4% 9vh;background:var(--bg2) center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0cee 0%,#0a0a0c66 55%,#0000 100%),linear-gradient(0deg,var(--bg) 0%,#0000 40%)}
.hero-skel{position:absolute;inset:0}
.hero-in{position:relative;max-width:600px}
.hero h1{font:400 clamp(44px,8vw,96px)/.95 'Bebas Neue',Impact,sans-serif;letter-spacing:.02em;margin-bottom:12px}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted);margin-bottom:12px}
.rating{color:#46d369;font-weight:600}
.pill{border:1px solid #555;border-radius:3px;padding:0 6px;font-size:12px;color:var(--text)}
.hero p{color:#ddd;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:22px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:var(--r);border:0;background:#fff3;font-weight:600;transition:background .2s,transform .1s}
.btn:hover{background:#fff5}
.btn:active{transform:scale(.97)}
.btn.red{background:var(--red)}
.btn.red:hover{background:var(--red2)}
.btn.light{background:#fff;color:#000}
.btn.light:hover{background:#ddd}

section.rail{padding:26px 0 0}
.rail h2,.page-title{font:400 28px/1.1 'Bebas Neue',Impact,sans-serif;letter-spacing:.05em;padding:0 4%;margin-bottom:12px}
.track{display:flex;gap:10px;overflow-x:auto;padding:4px 4% 14px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.track .card{flex:0 0 clamp(120px,15vw,190px);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:0 4%}
.card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg3);cursor:pointer;aspect-ratio:2/3;transition:transform .2s,box-shadow .2s;border:0;text-align:left;padding:0}
.card:hover{transform:scale(1.05);z-index:2;box-shadow:0 10px 30px #000c}
.card img{width:100%;height:100%;object-fit:cover}
.card .noimg{display:grid;place-items:center;height:100%;padding:12px;text-align:center;color:var(--muted)}
.card .info{position:absolute;inset:auto 0 0;padding:28px 8px 8px;background:linear-gradient(#0000,#000e);font-size:13px;opacity:0;transition:opacity .2s}
.card:hover .info,.card:focus-visible .info{opacity:1}
.card .info b{display:block;line-height:1.2}
.tag{position:absolute;top:6px;left:6px;background:var(--red);font-size:11px;font-weight:600;padding:1px 6px;border-radius:3px}
.fav{position:absolute;top:4px;right:4px;background:#000a;border:0;border-radius:50%;width:30px;height:30px;font-size:15px;line-height:30px;text-align:center}
.fav.on{color:var(--red)}

.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 4% 18px}
.chip{background:var(--bg3);border:1px solid var(--line);border-radius:20px;padding:6px 16px;transition:background .2s}
.chip:hover{background:#2c2c33}
.chip.on{background:var(--red);border-color:var(--red)}
.page{padding-top:92px;min-height:60vh}
.empty{padding:40px 4%;color:var(--muted)}
.more{display:block;margin:22px auto;}

.skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}
.card.skeleton{pointer-events:none}

.banner{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:40;width:min(680px,92%);background:#2a0e10;border:1px solid var(--red);border-radius:var(--r);padding:12px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.banner button{white-space:nowrap}

.modal{position:fixed;inset:0;z-index:100;background:#000d;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:4vh 12px}
.sheet{position:relative;width:min(900px,100%);background:var(--bg2);border-radius:10px;overflow:hidden;box-shadow:0 20px 60px #000}
.sheet.small{width:min(460px,100%);padding:26px;display:grid;gap:14px;margin-top:10vh}
.sheet.small input{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.close{position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;border-radius:50%;border:0;background:#000b}
.player{aspect-ratio:16/9;background:#000;position:relative}
.player iframe,.player .backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.player .backdrop{opacity:.5}
.player .center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px}
.detail{padding:22px 26px 30px;display:grid;gap:14px}
.detail h2{font:400 40px/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.03em}
.genres span{background:var(--bg3);border-radius:20px;padding:2px 12px;font-size:13px;margin-right:6px;display:inline-block;margin-bottom:4px}
.muted{color:var(--muted)}
.src{font-size:13px;color:var(--muted)}
.src b{color:#46d369}
.cast{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.cast div{flex:0 0 80px;font-size:12px;text-align:center}
.cast img,.cast i{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 4px;background:var(--bg3);display:block}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);background:#fff;color:#000;padding:10px 18px;border-radius:var(--r);font-weight:600;transition:transform .3s;z-index:200}
.toast.show{transform:translate(-50%,0)}
.footer{margin-top:auto;padding:40px 4% 30px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);display:grid;gap:6px;margin-top:50px}
.footer a{color:var(--text);text-decoration:underline}

@media(max-width:820px){
  .burger{display:block}
  .links{position:fixed;inset:60px 0 auto;flex-direction:column;gap:0;margin:0;background:#0a0a0cf8;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s;z-index:-1}
  .links.open{transform:none}
  .links a{padding:15px 6%;border-top:1px solid var(--line)}
  .search{flex:1}
  .search input,.search input:focus{width:100%}
  .nav{gap:8px}
  .logo{font-size:22px}
  .hero{min-height:72vh;padding-bottom:6vh}
  .hero::before{background:linear-gradient(0deg,var(--bg) 8%,#0a0a0c99 60%,#0a0a0c55)}
  .card:hover{transform:none}
  .detail{padding:18px}
}
@media(max-width:430px){.logo b{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}