:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; background:#080b12; color:#eef2ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -20%,#203253 0,#080b12 48%); }
main { width:min(1100px,calc(100% - 28px)); margin:0 auto; padding:32px 0; }
.hidden { display:none !important; }
.card { background:#121722; border:1px solid #252e40; border-radius:18px; box-shadow:0 20px 60px #0008; }
.login-card { width:min(420px,100%); margin:15vh auto 0; padding:32px; }
h1 { margin:0 0 8px; font-size:24px; }
p { color:#9ca9be; }
form { display:grid; gap:14px; margin-top:24px; }
input,button { min-height:46px; border-radius:10px; border:1px solid #303b50; padding:0 14px; font:inherit; }
input { background:#0c1018; color:#fff; }
button { border:0; background:#3977ff; color:#fff; font-weight:700; cursor:pointer; }
button.secondary { background:#202838; }
.error { min-height:22px; margin-top:12px; color:#ff7d86; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
header>div { display:flex; align-items:center; gap:14px; }
header h1 { margin:0; }
.badge { padding:6px 10px; border-radius:999px; font-size:13px; background:#123e2c; color:#70efad; }
.badge.offline { background:#3c2026; color:#ff9299; }
.video-shell { position:relative; overflow:hidden; aspect-ratio:4/3; background:#020305; border:1px solid #252e40; border-radius:16px; box-shadow:0 18px 60px #0009; }
#video { width:100%; height:100%; display:block; object-fit:contain; }
#placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#718099; }
.live { position:absolute; top:14px; left:14px; border-radius:6px; padding:6px 9px; background:#e52f42; font-size:12px; font-weight:800; letter-spacing:1px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.stats div { padding:16px; background:#121722; border:1px solid #252e40; border-radius:12px; }
.stats span,.stats strong { display:block; }
.stats span { margin-bottom:6px; color:#8390a6; font-size:13px; }
.hint { font-size:13px; }
@media(max-width:650px){ main{padding-top:18px}.stats{grid-template-columns:repeat(2,1fr)}header>div{display:block}.badge{display:inline-block;margin-top:4px} }