* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #101419; color: #eef2f6; font-family: Arial, "Malgun Gothic", sans-serif; }
body { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #161c23; border-bottom: 1px solid #2a333d; }
.topbar strong { display: block; font-size: 18px; }
.topbar span { display: block; margin-top: 3px; font-size: 12px; color: #9ca9b6; }
button { border: 1px solid #3b4652; border-radius: 8px; padding: 9px 12px; background: #222a33; color: #eef2f6; cursor: pointer; }
main { padding: 12px; }
.camera-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.camera-card { overflow: hidden; border: 1px solid #2c3540; border-radius: 12px; background: #171d24; }
.camera-head, .camera-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.camera-head { border-bottom: 1px solid #2c3540; }
.camera-foot { font-size: 12px; color: #9ca9b6; border-top: 1px solid #2c3540; }
.state { font-size: 12px; color: #aeb8c2; }
.state-running { color: #73d28a; }
.state-error { color: #ff8b8b; }
.video-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #f2b6b6; background: #090b0e; }
.video-error[hidden] { display: none; }
.empty { padding: 40px 15px; text-align: center; color: #b6c0ca; }
@media (max-width: 520px) {
  .camera-grid { grid-template-columns: 1fr; }
  main { padding: 8px; }
  .topbar { padding: 12px; }
}

.top-actions { display:flex; gap:8px; align-items:center; }
.top-actions button { min-height:40px; padding:0 14px; }

.auth-body { margin:0; min-height:100vh; display:grid; place-items:center; background:#eef2f7; color:#17202a; }
.auth-shell { width:min(92vw,420px); }
.auth-card { background:#fff; border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.12); padding:28px; }
.brand-mark { font-weight:800; letter-spacing:.16em; font-size:14px; opacity:.65; }
.auth-card h1 { margin:8px 0 6px; font-size:28px; }
.auth-card p { margin:0 0 20px; color:#667085; }
.auth-form { display:grid; gap:14px; }
.auth-form label { display:grid; gap:7px; font-size:14px; font-weight:700; }
.auth-form input { width:100%; box-sizing:border-box; border:1px solid #d0d5dd; border-radius:10px; padding:12px 13px; font-size:16px; }
.auth-form button { border:0; border-radius:10px; padding:13px 16px; font-size:16px; font-weight:800; cursor:pointer; }
.auth-message { margin-top:14px !important; color:#b42318 !important; }

@media (max-width: 640px) {
  .topbar { align-items:flex-start; gap:12px; }
  .top-actions { width:100%; }
  .top-actions button { flex:1; }
  .camera-grid { grid-template-columns:1fr; }
}