:root { color-scheme: dark; --bg:#071018; --panel:#0d1924; --line:#203242; --cyan:#37d7ff; --green:#44e39b; --red:#ff4c62; --text:#eaf7ff; --muted:#8da4b4; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top,#123047 0,#071018 55%); }
.login-card { width:min(420px,100%); padding:32px; border:1px solid var(--line); border-radius:18px; background:#0d1924ee; box-shadow:0 24px 80px #0008; }
.login-brand { display:flex; align-items:center; gap:10px; color:var(--text); }.login-brand>span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--cyan); color:#071018; font-weight:900; }.login-brand small { color:var(--cyan); }
.login-card h1 { margin:28px 0 8px; }.login-card p { color:var(--muted); }.login-card label { display:block; margin:24px 0 8px; color:var(--muted); font-size:13px; }.login-card input { box-sizing:border-box; width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:#071018; color:var(--text); font-size:16px; }.login-card button { width:100%; margin-top:14px; padding:13px; border:0; border-radius:10px; background:var(--cyan); color:#061019; font-weight:800; cursor:pointer; }.login-error { margin-top:18px; padding:10px 12px; border-radius:9px; background:#ff4c6222; color:#ff8493; }
.top-actions { display:flex; align-items:center; gap:14px; }.logout { color:var(--muted); font-size:12px; text-decoration:none; }.logout:hover { color:var(--text); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,Segoe UI,Arial,sans-serif; background:radial-gradient(circle at 75% 10%,#123044 0,transparent 32%),var(--bg); color:var(--text); }
.shell { width:min(1500px,calc(100% - 32px)); margin:auto; padding-bottom:40px; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px; letter-spacing:.08em; }
.brand>span { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--cyan); border-radius:12px; color:var(--cyan); font-size:23px; font-weight:900; box-shadow:0 0 25px #37d7ff35 inset; }
.brand small { color:var(--cyan); font-weight:600; }
.online { color:var(--muted); font-size:14px; }.online i,.recording i { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.intro { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:34px 0 25px; }
.eyebrow { color:var(--cyan)!important; font-size:12px; letter-spacing:.18em; font-weight:800; }
.intro h1 { margin:7px 0 8px; font-size:clamp(28px,4vw,46px); letter-spacing:-.035em; }.intro p { margin:0; max-width:760px; color:var(--muted); line-height:1.6; }
button { font:inherit; cursor:pointer; }.alarm-jump { flex:0 0 auto; border:1px solid #ff4c6270; color:#ffdce1; background:#32131c; border-radius:12px; padding:12px 17px; font-weight:700; }.alarm-jump span { display:block; color:#ff8291; font-size:11px; margin-top:3px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; }
.video-card,.panel { background:linear-gradient(145deg,#0d1924,#09131c); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 24px 70px #0008; }
.video-wrap { position:relative; background:#000; aspect-ratio:1280/752; }video { display:block; width:100%; height:100%; object-fit:contain; }
.recording { position:absolute; top:16px; right:16px; padding:7px 10px; border-radius:8px; background:#071018cc; color:#bcd0dc; font-size:11px; letter-spacing:.12em; }.recording i { background:var(--red); box-shadow:0 0 10px var(--red); }
.quick-controls { display:flex; flex-wrap:wrap; gap:8px; padding:13px; }.quick-controls button { border:1px solid var(--line); background:#101f2c; color:#bcd0dc; border-radius:9px; padding:9px 12px; }.quick-controls button:hover { border-color:var(--cyan); color:#fff; }
.panel { padding:22px; }.metric { padding-bottom:20px; border-bottom:1px solid var(--line); }.metric span,.status-label { display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.14em; }.metric strong { display:inline-block; margin-top:4px; font-size:58px; line-height:1; color:var(--green); }.metric small { color:var(--muted); }
.status-card { margin:18px 0; padding:16px; border:1px solid #2b4355; border-radius:13px; background:#101f2c; transition:.2s; }.status-card strong { display:block; margin:8px 0 5px; }.status-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }.status-card.detect { border-color:#44e39b88; background:#102a25; }.status-card.alert { border-color:var(--red); background:#35151c; box-shadow:0 0 28px #ff4c6225; }.status-card.alert strong { color:#ff7182; }
.facts { margin:0; }.facts div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #172838; font-size:13px; }.facts dt { color:var(--muted); }.facts dd { margin:0; font-weight:700; }.danger-text { color:var(--red); }
.event-log h2 { margin:20px 0 10px; font-size:13px; }.event-log ol { list-style:none; margin:0; padding:0; max-height:190px; overflow:auto; }.event-log li { display:flex; justify-content:space-between; padding:7px 0; color:#bcd0dc; font-size:12px; }.event-log li.error { color:#ff7d8c; font-weight:800; }
@media (max-width:950px) { .workspace { grid-template-columns:1fr; }.intro { align-items:start; flex-direction:column; }.panel { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.metric,.status-card { margin:0; }.event-log { grid-column:1/-1; } }
@media (max-width:600px) { .shell { width:min(100% - 18px,1500px); }.online { font-size:11px; }.panel { display:block; }.status-card { margin:18px 0; } }