@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#07080c;--panel:#11151d;--text:#f6f7fb;--muted:#9ba2b1;--red:#ff4251;--line:rgba(255,255,255,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#05060a,#090b10 45%,#07080c);color:var(--text);font-family:Inter,system-ui,sans-serif}a{text-decoration:none;color:inherit}.navbar{background:rgba(5,6,10,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand-logo{height:42px;width:auto}.nav-link{color:#bfc5d1!important;font-weight:600;font-size:.92rem}.nav-link:hover{color:#fff!important}.btn-red{background:var(--red);color:#fff;border:0;font-weight:800}.btn-red:hover{background:#ff5a67;color:#fff}.hero{min-height:600px;display:flex;align-items:end;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 30%,rgba(255,50,70,.28),transparent 25%),radial-gradient(circle at 45% 45%,rgba(25,150,255,.18),transparent 30%),linear-gradient(90deg,#05060a 10%,rgba(5,6,10,.74) 42%,rgba(5,6,10,.25) 72%,#05060a),linear-gradient(135deg,#111522,#260c13)}.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(transparent,var(--bg))}.hero-content{position:relative;z-index:2;padding:120px 0 90px;max-width:680px}.eyebrow{display:inline-flex;gap:8px;align-items:center;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:800;color:#ff6c76}.hero h1{font-size:clamp(2.7rem,5vw,5rem);line-height:.98;font-weight:900;margin:14px 0}.hero p{color:#c9ced8;font-size:1.05rem;line-height:1.7}.pill,.filter-chip{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);padding:7px 11px;border-radius:999px;font-size:.78rem;color:#d9dde5}.filter-chip{border-color:#2b313c;background:#11151d;padding:8px 13px}.filter-chip.active{background:#fff;color:#090b10}.section{padding:26px 0}.section-title{font-size:1.25rem;font-weight:800;margin-bottom:16px}.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px}.rail::-webkit-scrollbar{height:7px}.rail::-webkit-scrollbar-thumb{background:#242a35;border-radius:20px}.poster{aspect-ratio:2/3;border-radius:9px;overflow:hidden;position:relative;background:#151923;border:1px solid rgba(255,255,255,.06);transition:.25s}.poster:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}.poster-bg{position:absolute;inset:0;background:linear-gradient(135deg,#16385b,#111827 48%,#ef3045)}.poster-bg.alt1{background:linear-gradient(145deg,#2c1b51,#091e34 50%,#16b6d4)}.poster-bg.alt2{background:linear-gradient(145deg,#2a0d11,#10151f 48%,#ff7a2f)}.poster-bg.alt3{background:linear-gradient(145deg,#1d3b20,#0c1510 45%,#d8a72b)}.poster-bg.alt4{background:linear-gradient(145deg,#2c2c32,#101217 50%,#7c55ff)}.poster-bg.alt5{background:linear-gradient(145deg,#0b3341,#10131b 52%,#ff3f73)}.poster:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 32%),linear-gradient(transparent 55%,rgba(0,0,0,.8));z-index:1}.poster-copy{position:absolute;z-index:2;left:12px;right:12px;bottom:13px}.poster-copy strong{display:block;font-size:1.05rem;line-height:1.05;text-shadow:0 2px 8px #000}.poster-copy small{color:#c9ced8}.play-badge{position:absolute;z-index:3;top:10px;left:10px;background:rgba(255,255,255,.9);color:#111;border-radius:50%;width:34px;height:34px;display:grid;place-items:center}.content-meta{padding:9px 2px}.content-meta strong{display:block;font-size:.9rem}.content-meta small{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.live-card{aspect-ratio:16/9;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(135deg,#151922,#35111a);border:1px solid var(--line)}.live-card:nth-child(2){background:linear-gradient(135deg,#10243a,#25101a)}.live-card:nth-child(3){background:linear-gradient(135deg,#1a1a2c,#33210d)}.live-info{position:absolute;left:14px;bottom:13px;right:14px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff3d4e;box-shadow:0 0 12px #ff3d4e;margin-right:6px}.feature{background:linear-gradient(120deg,rgba(30,169,255,.12),rgba(255,60,80,.08));border:1px solid var(--line);border-radius:16px;padding:26px}.page-head{padding:125px 0 25px}.page-head h1{font-weight:900;font-size:clamp(2rem,4vw,3.4rem)}.page-head p{color:var(--muted);max-width:650px}.form-control,.form-select{background:#11151d;border-color:#262c37;color:#fff}.form-control:focus,.form-select:focus{background:#11151d;color:#fff;border-color:#3f88b7;box-shadow:none}.detail-hero{min-height:600px;display:flex;align-items:end;background:linear-gradient(90deg,#05060a 15%,rgba(5,6,10,.65) 55%,rgba(5,6,10,.2)),linear-gradient(135deg,#141b2d,#32101a)}.detail-content{padding:110px 0 80px;max-width:720px}.player{padding:110px 0 60px;min-height:100vh}.video-box{aspect-ratio:16/9;border-radius:14px;background:radial-gradient(circle,#252b36,#0a0b0f 62%);border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}.video-box:after{content:"PREVIEW";position:absolute;top:18px;right:18px;color:#8e96a5;font-size:.7rem;letter-spacing:.12em}.big-play{width:76px;height:76px;border-radius:50%;background:#fff;color:#0a0b0f;display:grid;place-items:center;font-size:1.8rem}.timeline{position:absolute;bottom:0;left:0;right:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.8))}.progress{height:4px;background:#3a3f49}.progress-bar{background:var(--red)}.footer{border-top:1px solid var(--line);margin-top:50px;padding:38px 0;color:#858c9a}.footer a{color:#aeb5c1}.empty{padding:100px 20px;text-align:center;border:1px dashed #2b313c;border-radius:16px;color:var(--muted)}.toast-custom{position:fixed;right:20px;bottom:20px;z-index:1000;background:#171c25;border:1px solid #343b49;padding:13px 16px;border-radius:10px;display:none}.toast-custom.show{display:block}@media(max-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:768px){.brand-logo{height:35px}.hero{min-height:650px}.hero-content{padding:130px 0 90px}.grid,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rail{grid-auto-columns:150px}.page-head{padding-top:100px}.detail-hero{min-height:680px}.nav-search{display:none}}
