:root {
  --bg:#0f1115; --panel:#161923; --panel-2:#1e2230;
  --text:#e6e8ee; --muted:#8a93a6; --border:#262b3a;
  --accent:#4c8dff; --ok:#2ecc71; --warn:#f1c40f; --danger:#e74c3c;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:15px; }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration: underline; }
code, .mono, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.9em; }

.topbar { display:flex; align-items:center; gap:1.5rem; padding:0.75rem 1.25rem;
  background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.brand { font-weight:700; letter-spacing:0.02em; }
nav { display:flex; gap:0.75rem; flex:1; flex-wrap:wrap; }
.navlink { color:var(--text); padding:0.25rem 0.5rem; border-radius:4px; }
.navlink:hover { background:var(--panel-2); text-decoration:none; }
.userbox { display:flex; align-items:center; gap:0.75rem; }

.role-badge { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.15rem 0.5rem; border-radius:999px; border:1px solid var(--border); }
.role-admin    { background:#3a1f1f; color:#ffb3b3; }
.role-operator { background:#2a2f1c; color:#d6e4a0; }
.role-viewer   { background:#1c2733; color:#a8c8e6; }

.linkbtn { background:none; border:none; color:var(--accent); cursor:pointer; padding:0; }
.linkbtn:hover { text-decoration: underline; }

.content { padding:1.25rem; max-width:1200px; margin:0 auto; }
.footer { display:flex; justify-content:space-between; padding:0.75rem 1.25rem;
  color:var(--muted); font-size:0.85rem; }
.ws-off { color: var(--muted); }
.ws-on  { color: var(--ok); }

.alarm-banner { background:#3a1f1f; color:#ffb3b3; padding:0.75rem 1.25rem;
  display:flex; gap:1rem; align-items:center; border-bottom:1px solid #6b3232; }
.alarm-pulse { animation: pulse 1s infinite; color:#ff5c5c; }
@keyframes pulse { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }
.alarm-link { margin-left:auto; color:#ffb3b3; text-decoration:underline; }

.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:0.75rem; margin-bottom:1.25rem; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1rem; }
.card-value { font-size:2rem; font-weight:700; }
.card-label { color:var(--muted); font-size:0.9rem; }
.card-fall_detected    .card-value { color:var(--danger); }
.card-on_ground_too_long .card-value { color:var(--warn); }
.card-no_motion_too_long .card-value { color:#e67e22; }
.card-sudden_collapse  .card-value { color:#c0392b; }

.panel { background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:1rem; margin-bottom:1.25rem; }
.panel h2 { margin:0 0 0.75rem; font-size:1.1rem; }
.panel h3 { margin:1rem 0 0.5rem; font-size:1rem; }

.cam-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:0.75rem; }
.cam-tile { background:var(--panel-2); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.cam-title { display:flex; justify-content:space-between; padding:0.5rem 0.75rem;
  border-bottom:1px solid var(--border); }
.cam-preview { aspect-ratio:4/3; background:#000; display:flex; align-items:center; justify-content:center; }
.cam-preview img { width:100%; height:100%; object-fit:cover; }
.cam-offline { color:var(--muted); }
.cam-status.on  { color:var(--ok); font-size:0.8rem; }
.cam-status.off { color:var(--muted); font-size:0.8rem; }
.cam-meta { padding:0.35rem 0.75rem; color:var(--muted); font-size:0.85rem; }

.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:0.5rem 0.6rem; border-bottom:1px solid var(--border); }
.table th { color:var(--muted); font-weight:500; font-size:0.85rem; }
.ev-thumb { width:64px; height:48px; object-fit:cover; border-radius:3px; }

.pill { display:inline-block; padding:0.1rem 0.5rem; border-radius:999px;
  font-size:0.8rem; background:var(--panel-2); border:1px solid var(--border); }
.pill-fall_detected      { background:#3a1f1f; color:#ffb3b3; border-color:#6b3232; }
.pill-on_ground_too_long { background:#3a331c; color:#ffe4a3; border-color:#6b5f32; }
.pill-no_motion_too_long { background:#3a2a1c; color:#ffcea3; border-color:#6b4c32; }
.pill-sudden_collapse    { background:#3a1a1a; color:#ffb3b3; border-color:#6b2a2a; }

.sev { font-size:0.8rem; padding:0.1rem 0.5rem; border-radius:999px; }
.sev-critical { background:#3a1f1f; color:#ffb3b3; }
.sev-warning  { background:#3a331c; color:#ffe4a3; }
.sev-info     { background:#1c2733; color:#a8c8e6; }

.filterbar { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:end; margin-bottom:0.75rem; }
.filterbar label { display:flex; flex-direction:column; font-size:0.85rem; color:var(--muted); }
.filterbar input, .filterbar select {
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:0.4rem 0.5rem; border-radius:4px; }
.filterbar button, .btn {
  background:var(--accent); color:#fff; border:none; padding:0.5rem 0.9rem;
  border-radius:4px; cursor:pointer; font-size:0.9rem; }
.btn { display:inline-block; }
.btn:hover, .filterbar button:hover { text-decoration:none; filter:brightness(1.1); }
.btn-secondary { background:var(--panel-2); color:var(--text); border:1px solid var(--border); }

.pager { display:flex; gap:1rem; margin-top:0.75rem; }

.event-detail-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1rem; }
.event-video video, .event-video img { width:100%; border-radius:6px; background:#000; }
.placeholder { padding:2rem; text-align:center; color:var(--muted);
  border:1px dashed var(--border); border-radius:6px; }
.kv { width:100%; }
.kv th { text-align:left; color:var(--muted); padding:0.35rem 0.5rem; width:40%; font-weight:500; }
.kv td { padding:0.35rem 0.5rem; }
.actions { display:flex; gap:0.5rem; margin-top:0.75rem; flex-wrap:wrap; align-items:center; }
.snap-strip { display:flex; gap:0.5rem; flex-wrap:wrap; margin:0.5rem 0; }
.snap-strip a { text-align:center; font-size:0.75rem; color:var(--muted); }
.snap-strip img { width:120px; height:90px; object-fit:cover; border-radius:4px; }

.muted { color: var(--muted); }
.small { font-size:0.85rem; }
pre { background:var(--panel-2); border:1px solid var(--border); border-radius:4px;
  padding:0.75rem; overflow:auto; max-height:400px; }

.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
.login-card { background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:2rem; width:100%; max-width:380px; }
.login-card h1 { margin:0 0 0.5rem; font-size:1.4rem; }
.login-card label { display:block; margin:0.75rem 0; color:var(--muted); font-size:0.9rem; }
.login-card input { width:100%; margin-top:0.25rem; padding:0.55rem 0.7rem;
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:4px; font-size:1rem; }
.login-card button { width:100%; margin-top:1rem; padding:0.6rem; background:var(--accent);
  color:#fff; border:none; border-radius:4px; font-size:1rem; cursor:pointer; }
.error { background:#3a1f1f; color:#ffb3b3; padding:0.5rem 0.75rem; border-radius:4px;
  margin-bottom:0.75rem; }

.panel-head { display:flex; gap:0.5rem; justify-content:space-between; align-items:center; flex-wrap:wrap; }

.formgrid { display:grid; gap:0.75rem; max-width:720px; }
.formgrid label { display:flex; flex-direction:column; color:var(--muted); font-size:0.9rem; }
.formgrid input, .formgrid select, .formgrid textarea {
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:0.5rem 0.6rem; border-radius:4px; font-size:1rem; }
.formgrid .checkbox { flex-direction:row; align-items:center; gap:0.5rem; }
.formgrid .checkbox input { width:auto; }
.formgrid h3 { color:var(--text); margin:0.75rem 0 0.25rem; font-size:0.95rem;
  border-bottom:1px solid var(--border); padding-bottom:0.25rem; }

.ok { color: var(--ok); font-weight:600; }
.err { color: var(--danger); font-weight:600; }
.password { font-size:1.4rem; letter-spacing:0.05em; }
.logtail { max-height:60vh; overflow:auto; background:#0a0c10; padding:0.75rem;
  border-radius:4px; border:1px solid var(--border); font-size:0.85rem; }

#calib-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1rem; }
.calib-preview img { width:100%; border-radius:6px; background:#000; }
.calib-side { display:flex; flex-direction:column; gap:0.75rem; }
.calib-phase { background:var(--panel-2); border:1px solid var(--border);
  border-radius:6px; padding:1rem; text-align:center; }
.calib-phase-name { font-size:1.4rem; font-weight:700; letter-spacing:0.03em; }
.calib-phase-prompt { color:var(--muted); margin:0.5rem 0 1rem; }
.calib-progress { background:#0a0c10; border-radius:999px; height:10px;
  overflow:hidden; margin-bottom:0.5rem; }
#calib-bar { height:100%; width:0%; background:var(--accent);
  transition:width 200ms linear; }
.calib-timer { font-size:1.2rem; font-weight:600; }
.calib-step-counter { color:var(--muted); font-size:0.9rem; margin-top:0.5rem; }
.calib-log { background:#0a0c10; border-radius:4px; border:1px solid var(--border);
  padding:0.5rem; max-height:240px; overflow:auto; font-size:0.8rem;
  font-family:ui-monospace, monospace; }

.matrix { width:100%; border-collapse:collapse; margin-bottom:1rem; }
.matrix th, .matrix td { padding:0.4rem 0.6rem; border:1px solid var(--border); text-align:center; }
.matrix th:first-child { text-align:left; }
.warn-text { color: var(--warn); }

#refine-panel .calib-progress { margin: 0.5rem 0; }
#refine-panel .panel-head { margin-bottom: 0.5rem; }
#artifact-panel h4 { margin: 0.75rem 0 0.25rem; font-size: 0.95rem; }
#artifact-panel .snap-strip img { width: 96px; height: 96px;
  object-fit: cover; }
#artifact-panel .snap-strip a { width: 96px; display: inline-block; }