:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; --red:#ef3d2d; --muted:#9b9494; }
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; }
body { margin:0; background:#050505; color:#fff; }
button, input { font:inherit; }
a { color:inherit; text-decoration:none; }
.home { min-height:100vh; background:radial-gradient(circle at 50% 30%, #2a0805 0, #120303 28%, #050505 67%); }
.nav { width:min(1400px, calc(100% - 40px)); margin:auto; height:88px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:2rem; font-weight:900; letter-spacing:-.06em; }.brand span { color:var(--red); }
.navlinks { display:flex; gap:34px; color:#a59e9e; font-weight:650; }
.hero { width:min(1060px, calc(100% - 36px)); margin:auto; padding:125px 0 80px; text-align:center; }
.pill { display:inline-flex; align-items:center; gap:12px; padding:10px 20px; border:1px solid #57302d; border-radius:999px; color:#c7bcbc; font-size:.78rem; letter-spacing:.22em; font-weight:800; }
.pill::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--red); }
h1 { margin:38px auto 28px; max-width:900px; font-size:clamp(3rem, 7vw, 6rem); line-height:1.02; letter-spacing:-.065em; }
h1 span { color:var(--red); }.lead { margin:auto; max-width:800px; color:#c9c1c1; font-size:clamp(1.05rem, 2vw, 1.45rem); line-height:1.6; }
.lookup { max-width:760px; margin:38px auto 0; padding:10px; display:flex; gap:10px; border:1px solid #38201e; border-radius:16px; background:#110807cc; }
.lookup select, .lookup input { min-height:52px; border:1px solid #3b2927; border-radius:10px; background:#0b0909; color:#fff; padding:0 14px; outline:none; }
.lookup input { min-width:0; flex:1; }.lookup button { min-height:52px; border:0; border-radius:10px; padding:0 24px; color:#fff; background:var(--red); font-weight:800; cursor:pointer; }
.hint { color:#706969; font-size:.86rem; margin-top:17px; }
.player-page { height:100vh; overflow:hidden; background:#000; position:relative; }
.video-shell { width:100%; height:100%; position:relative; display:grid; place-items:center; }
video { width:100%; height:100%; object-fit:contain; background:#000; }
.topbar { position:absolute; z-index:6; inset:0 0 auto; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#000b, transparent); pointer-events:none; }
.back { pointer-events:auto; font-size:1.1rem; color:#bbb; }.servers { pointer-events:auto; display:flex; align-items:center; gap:10px; }.servers-label { color:#888; font-size:.8rem; font-weight:800; letter-spacing:.12em; }
.server { min-width:104px; min-height:46px; border:1px solid #282828; border-radius:11px; background:#181818; color:#fff; font-weight:750; cursor:pointer; }.server.active { border-bottom:3px solid #fff; }
.center-state { position:absolute; z-index:2; max-width:560px; padding:24px; text-align:center; }.center-state h2 { margin:0 0 8px; font-size:clamp(1.5rem,4vw,2.4rem); }.center-state p { color:#999; line-height:1.5; }
.spinner { width:48px; height:48px; margin:0 auto 20px; border:4px solid #333; border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}
.custom-controls { position:absolute; z-index:4; inset:0; opacity:1; transition:opacity .25s; }
.player-page.playing.controls-hidden .custom-controls { opacity:0; pointer-events:none; }
.center-controls { position:absolute; left:50%; top:50%; translate:-50% -50%; display:flex; align-items:center; gap:clamp(30px,7vw,80px); }
.icon-btn { display:grid; place-items:center; width:52px; height:52px; padding:0; border:0; color:#fff; background:transparent; cursor:pointer; border-radius:50%; }
.icon-btn:hover { background:#ffffff18; }.icon-btn svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn[data-action="play"] svg { fill:currentColor; stroke:none; }
.icon-btn.primary { width:82px; height:82px; }.icon-btn.primary svg { width:68px; height:68px; fill:currentColor; stroke:none; }
.bottom-controls { position:absolute; inset:auto 0 0; padding:70px 3.6% 26px; background:linear-gradient(transparent,#000 58%); }
.timeline-row { display:flex; align-items:center; gap:18px; }.timeline { width:100%; height:4px; accent-color:#fff; cursor:pointer; }.time { flex:none; font-size:.95rem; font-weight:650; }
.control-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-top:14px; }.control-group { display:flex; align-items:center; gap:10px; }.control-group.right { justify-content:flex-end; }
.media-title { font-size:clamp(1rem,2vw,1.45rem); font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw; }
.volume-wrap { display:flex; align-items:center; }.volume-slider { width:0; opacity:0; transition:.2s; accent-color:white; }.volume-wrap:hover .volume-slider { width:80px; opacity:1; }
.panel { position:absolute; right:3.6%; bottom:104px; min-width:210px; padding:9px; border:1px solid #333; border-radius:12px; background:#171717ee; box-shadow:0 15px 45px #000; }.panel[hidden] { display:none; }.panel button { display:flex; width:100%; justify-content:space-between; padding:11px 12px; color:#eee; border:0; border-radius:8px; background:transparent; cursor:pointer; }.panel button:hover,.panel button.active { background:#333; }
.locked .topbar,.locked .center-controls,.locked .timeline-row,.locked .control-row > :not(.right),.locked .control-group.right > :not(.lock-btn) { visibility:hidden; }.locked .lock-btn { visibility:visible!important; }
.episode-badge { display:none; }
@media(max-width:650px){.navlinks{display:none}.hero{padding-top:80px}.lookup{flex-wrap:wrap}.lookup select{width:100%}.lookup button{width:100%}.topbar{padding:16px}.servers-label{display:none}.episode-badge{display:none}}
@media(max-width:700px){.center-controls{gap:18px}.icon-btn{width:43px;height:43px}.icon-btn.primary{width:62px;height:62px}.control-row{grid-template-columns:1fr auto}.media-title{position:absolute;left:18px;bottom:92px;max-width:80vw;text-align:left}.control-group.left .seek-small{display:none}.bottom-controls{padding-left:12px;padding-right:12px}.volume-slider{display:none}.captions-btn{display:none}}