*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;background:#070707;color:#fff}
.topbar{height:64px;background:#101010;border-bottom:1px solid #242424;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.brand{font-size:21px;font-weight:800;letter-spacing:.8px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#18d7b1;margin-right:9px}
.status{font-size:13px;color:#aaa}
.wrap{width:min(1100px,94vw);margin:32px auto 50px}
.player-card{background:#111;border:1px solid #252525;border-radius:18px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.video-wrap{position:relative;aspect-ratio:16/9;background:#000}
video{width:100%;height:100%;display:block;background:#000}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(circle at center,#151515 0,#050505 60%)}
.empty h1{margin:8px 0 5px;font-size:27px}
.empty p{margin:0;color:#999}
.play-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#18d7b1;color:#07110f;font-size:24px;padding-left:3px}
.loading{display:none;position:absolute;inset:auto 16px 16px auto;background:#000c;padding:8px 12px;border-radius:8px;font-size:13px}
.controls{padding:22px}
label{display:block;font-size:14px;font-weight:700;margin-bottom:9px}
.url-row{display:flex;gap:10px}
input{flex:1;min-width:0;background:#090909;color:#fff;border:1px solid #353535;border-radius:10px;padding:14px;font-size:14px;outline:none}
input:focus{border-color:#18d7b1}
button{border:0;border-radius:10px;padding:12px 16px;font-weight:750;cursor:pointer;background:#18d7b1;color:#06100e}
button:hover{filter:brightness(1.08)}
.secondary{background:#222;color:#ddd;border:1px solid #333}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hint{font-size:12px;color:#777;margin:13px 0 0}
footer{text-align:center;color:#555;font-size:12px;padding:0 0 25px}
@media(max-width:650px){.topbar{padding:0 15px}.wrap{width:96vw;margin:18px auto 35px}.player-card{border-radius:13px}.url-row{flex-direction:column}.url-row button{width:100%}.controls{padding:16px}.empty h1{font-size:21px}.empty p{font-size:13px}.quick button{flex:1}}