:root { color-scheme:dark; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Arial, sans-serif; background:#0b111c; color:#e8edf7 }
* { box-sizing:border-box }
body { margin:0; min-height:100vh }
button,input { font:inherit }
button { cursor:pointer; border-radius:9px; border:1px solid #39465a; background:#1a2638; color:#eff3fc; padding:9px 14px }
button:hover { background:#293b55 }
button:focus-visible,input:focus-visible { outline:2px solid #51b3ff; outline-offset:2px }
.primary { background:#2563eb; border-color:#387bff; font-weight:700 }
.primary:hover { background:#1c55d2 }
.muted,.help,.footer-note { color:#a9b5c8 }
.mark { color:#50e3a4; font-size:12px; font-weight:800; letter-spacing:1.2px }
.login-body { display:grid; place-items:center; padding:22px }
.login-panel { border:1px solid #273750; background:#111c2d; border-radius:18px; padding:38px; width:min(100%,430px); box-shadow:0 20px 50px #0005 }
h1 { margin:12px 0 5px; font-size:30px; letter-spacing:-.7px }
.login-panel form { margin-top:0; display:grid; gap:10px }
label { font-weight:650; font-size:13px }
input { border:1px solid #34465e; border-radius:9px; background:#0c1625; color:white; padding:12px; width:100%; margin-bottom:10px }
.login-panel button { width:100%; margin-top:5px; padding:12px }
.alert { background:#4f1827; color:#ffdce2; padding:11px; border:1px solid #a33f57; border-radius:8px; margin-top:16px }
.footer-note { text-align:center; font-size:12px; margin-top:22px }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #24334b; padding:18px 4vw; background:#101a2a }
.top-actions { display:flex; align-items:center; gap:18px }
.top-actions form { margin:0 }
.quiet { padding:6px 12px }
.dashboard { max-width:1480px; margin:auto; padding:25px 4vw }
.page-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:25px }
.page-title h1 { margin:0; font-size:26px }
.page-title p { margin:6px 0 }
.badge { border:1px solid #2d5266; border-radius:30px; color:#8bdaf2; padding:6px 10px; font-size:12px; white-space:nowrap }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.camera { background:#111c2d; border:1px solid #2b3c55; border-radius:14px; overflow:hidden }
.camera-heading,.camera-actions { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; gap:12px }
.camera-heading h2 { font-size:17px; margin:0 }
.status { font-size:12px; color:#abc0d7 }
.viewport { aspect-ratio:16/9; background:#03060a; display:grid; place-items:center; position:relative }
.viewport video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.placeholder { color:#73869f; font-size:14px; text-align:center; padding:15px }
.camera.playing .placeholder { display:none }
.quality { display:flex; gap:5px }
.quality button { min-width:48px; padding:7px 11px }
.quality .selected { border-color:#429fe3; background:#1b527d; color:white }
.help { font-size:13px; margin-top:25px }
@media(max-width:800px) { .grid { grid-template-columns:1fr } .badge { display:none } .top-actions { gap:7px } .dashboard { padding:20px 3vw } }

/* Account management */
a.quiet-link { display:inline-flex; align-items:center; color:#c9e1ff; text-decoration:none; padding:8px 10px; border:1px solid #34465e; border-radius:9px }
a.quiet-link:hover { background:#293b55 }
.account-page { max-width:1100px }
.account-page h1 { margin:0 0 20px }
.account-page h2 { font-size:19px; margin:0 0 15px }
.account-panel { background:#111c2d; border:1px solid #2b3c55; border-radius:12px; padding:20px; margin-bottom:16px }
.account-create,.account-edit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 130px auto; align-items:end; gap:12px }
.account-create label,.account-edit label { display:block }
.account-panel label input,.account-panel label select { width:100%; display:block; margin:5px 0 0; min-width:0; height:42px }
.account-panel select { font:inherit; border:1px solid #34465e; background:#0c1625; color:white; padding:8px; border-radius:9px }
.account-create button,.account-edit button { height:42px }
.account-meta { display:flex; justify-content:space-between; align-items:center; margin-top:12px; color:#a9b5c8; font-size:13px }
.account-meta form { margin:0 }
.danger { border-color:#8d3850; color:#ffd1db; padding:6px 12px }
.notice { border:1px solid #28695a; color:#a8e6c5; padding:12px; border-radius:9px }
.account-hint { font-size:13px }
@media(max-width:850px) { .account-create,.account-edit { grid-template-columns:1fr 1fr } }
@media(max-width:520px) { .account-create,.account-edit { grid-template-columns:1fr } .topbar { padding:12px } }