:root{--bg:#0f1115;--card:#181b22;--text:#e8eaf0;--muted:#8b92a5;--accent:#4f8cff;--ok:#2ecc71;--bad:#ff5c5c;--border:#262b36}
@media (prefers-color-scheme: light){:root{--bg:#f3f5f9;--card:#fff;--text:#161a22;--muted:#5d6678;--border:#dfe3ec}}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px}
header{width:100%;max-width:900px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
h1{font-size:1.3rem;margin:0}
nav a{color:var(--accent);text-decoration:none;font-size:.9rem}
.card{width:100%;max-width:900px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.video-wrap{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem;padding:4px 10px;border-radius:20px}
.badge.live{background:var(--bad)}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:end}
.field{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}
select,input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:.95rem}
button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:.95rem;cursor:pointer}
button.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
button:disabled{opacity:.5;cursor:not-allowed}
.status{margin-top:12px;font-size:.9rem;color:var(--muted)}
.link{margin-top:12px;font-size:.9rem;word-break:break-all}
.link a{color:var(--accent)}