/* ══════════════════════════════════════════════════
   FALL ALERT! — 8-bit dark theme
   ══════════════════════════════════════════════════ */

:root{
  --bg:        #06070d;
  --bg-2:      #0b0e17;
  --panel:     #0e1220;
  --panel-2:   #131a2c;
  --line:      #23304f;
  --line-hot:  #2f4a7a;

  --green:     #39ff88;
  --cyan:      #35e6ff;
  --magenta:   #ff3d9a;
  --amber:     #ffb228;
  --red:       #ff3355;
  --violet:    #a26bff;

  --ink:       #cfe3ff;
  --ink-dim:   #6f86ad;
  --ink-faint: #41547a;

  --px: 4px;                       /* base pixel unit */
  --f-pixel: 'Press Start 2P', monospace;
  --f-term:  'VT323', 'Consolas', monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-term);
  font-size:20px;
  -webkit-font-smoothing:none;
  overflow-x:hidden;
}

/* subtle animated grid backdrop */
body::before{
  content:""; position:fixed; inset:-50%;
  background-image:
    linear-gradient(rgba(53,230,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,230,255,.045) 1px, transparent 1px);
  background-size:32px 32px;
  animation:grid-drift 24s linear infinite;
  pointer-events:none; z-index:0;
}
@keyframes grid-drift{ to{ transform:translate(32px,32px); } }

.crt-wrap{ position:relative; z-index:1; max-width:1400px; margin:0 auto; padding:24px 20px 40px; }

/* ══════════════ HEADER ══════════════ */
.masthead{ text-align:center; padding:18px 0 26px; }

.logo-row{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }

/* --- pixel bell --- */
.bell{
  width:76px; height:76px; flex:none;
  transform-origin:50% 12%;
  animation:bell-ring 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(255,178,40,.55));
}
.bell-body   { fill:var(--amber); }
.bell-shine  { fill:#ffe9b0; }
.bell-clapper{ fill:var(--amber); animation:clap 2.4s ease-in-out infinite; transform-origin:50% 60%; }
.bell-waves  { fill:var(--red); animation:wave-blink .6s steps(1) infinite; }

@keyframes bell-ring{
  0%,68%,100%{ transform:rotate(0deg); }
  72%{ transform:rotate(-14deg); }  76%{ transform:rotate(12deg); }
  80%{ transform:rotate(-9deg); }   84%{ transform:rotate(7deg); }
  88%{ transform:rotate(-4deg); }   92%{ transform:rotate(2deg); }
}
@keyframes clap{
  0%,68%,100%{ transform:translateX(0); }
  74%{ transform:translateX(2px); } 82%{ transform:translateX(-2px); } 90%{ transform:translateX(1px); }
}
@keyframes wave-blink{ 0%{ opacity:1; } 50%{ opacity:.15; } }

/* --- logo type --- */
.logo{
  font-family:var(--f-pixel);
  font-size:clamp(22px, 5.2vw, 52px);
  line-height:1.1; margin:0; letter-spacing:2px;
  display:flex; align-items:baseline; gap:.08em;
}
.logo-main{
  color:#fff;
  text-shadow:
     3px 0 var(--magenta), -3px 0 var(--cyan),
     0 4px 0 #0a0f1c, 0 0 26px rgba(255,61,154,.5);
  animation:chroma 5s steps(1) infinite;
}
.logo-bang{
  color:var(--amber);
  text-shadow:3px 4px 0 var(--red), 0 0 22px rgba(255,178,40,.8);
  animation:bang-pop 1s steps(2) infinite;
  display:inline-block;
}
@keyframes chroma{
  0%,92%{ text-shadow:3px 0 var(--magenta), -3px 0 var(--cyan), 0 4px 0 #0a0f1c, 0 0 26px rgba(255,61,154,.5); }
  94%   { text-shadow:-4px 0 var(--magenta), 5px 0 var(--cyan), 0 4px 0 #0a0f1c; transform:translateX(2px); }
  96%   { text-shadow:5px 0 var(--cyan), -4px 0 var(--magenta), 0 4px 0 #0a0f1c; transform:translateX(-2px); }
}
@keyframes bang-pop{ 0%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }

.tagline{
  font-family:var(--f-pixel); font-size:10px; letter-spacing:1px;
  color:var(--ink-dim); margin-top:18px;
}
.tagline .prompt{ color:var(--green); }
.tagline .ver{ color:var(--violet); margin-left:8px; }
.caret{ color:var(--green); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ══════════════ GRID ══════════════ */
.grid{
  display:grid; gap:18px;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "stage stage"
    "parts angles"
    "log   log";
}
.panel-stage { grid-area:stage; }
.panel-parts { grid-area:parts; }
.panel-angles{ grid-area:angles; }
.panel-log   { grid-area:log; }

@media (max-width:860px){
  .grid{ grid-template-columns:1fr; grid-template-areas:"stage" "parts" "angles" "log"; }
}

/* ══════════════ PANEL CHROME ══════════════ */
.panel{
  background:var(--panel);
  border:var(--px) solid var(--line);
  box-shadow:
    0 0 0 var(--px) var(--bg),
    0 0 0 calc(var(--px)*2) var(--line-hot),
    0 14px 40px -18px rgba(0,0,0,.9);
  position:relative;
}
.panel-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg, var(--panel-2), #0d1322);
  border-bottom:var(--px) solid var(--line);
  padding:11px 12px;
}
.bar-title{ font-family:var(--f-pixel); font-size:10px; color:var(--cyan); letter-spacing:1px; }

.chip{
  font-family:var(--f-pixel); font-size:8px; letter-spacing:1px;
  padding:6px 8px; border:2px solid currentColor; white-space:nowrap;
}
.chip[data-state="off"]  { color:var(--ink-faint); }
.chip[data-state="wait"] { color:var(--amber);  animation:blink .7s steps(1) infinite; }
.chip[data-state="live"] { color:var(--green);  box-shadow:0 0 14px rgba(57,255,136,.35); }
.chip[data-state="lost"] { color:var(--magenta); }
.chip[data-state="err"]  { color:var(--red); animation:blink .35s steps(1) infinite; }

/* ══════════════ CAMERA STAGE ══════════════ */
/* Aspect follows the actual camera stream — a phone in portrait delivers
   a 9:16 feed, and forcing 16:9 would letterbox or crop it badly.
   app.js sets --stage-ar from the live video dimensions. */
.stage{
  position:relative; width:100%;
  aspect-ratio:var(--stage-ar, 16/9);
  max-height:78vh;
  background:#03050a; overflow:hidden;
}
#video, #overlay{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
#video{ transform:scaleX(1); }
.stage.is-mirrored #video, .stage.is-mirrored #overlay{ transform:scaleX(-1); }
.stage.is-pixelated #video{ image-rendering:pixelated; filter:contrast(1.25) saturate(1.35); }

/* CRT overlays */
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply;
}
.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  box-shadow:inset 0 0 120px rgba(0,0,0,.85), inset 0 0 30px rgba(53,230,255,.08);
}
.sweep{
  position:absolute; left:0; right:0; height:120px; z-index:5; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(53,230,255,.10), transparent);
  animation:sweep 5.5s linear infinite;
}
@keyframes sweep{ 0%{ top:-120px } 100%{ top:100% } }

/* corner brackets */
.bracket{ position:absolute; width:26px; height:26px; z-index:6; pointer-events:none; border:3px solid var(--cyan); opacity:.85; }
.bracket.tl{ top:8px;  left:8px;  border-right:0; border-bottom:0; }
.bracket.tr{ top:8px;  right:8px; border-left:0;  border-bottom:0; }
.bracket.bl{ bottom:8px;left:8px;  border-right:0; border-top:0; }
.bracket.br{ bottom:8px;right:8px; border-left:0;  border-top:0; }

/* boot screen */
.boot{
  position:absolute; inset:0; z-index:8;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 45%, #0b1330 0%, #05070f 70%);
  transition:opacity .25s steps(3);
}
.boot.is-hidden{ opacity:0; pointer-events:none; }
.boot-art{
  font-family:var(--f-term); font-size:20px; color:var(--cyan);
  margin:0 0 18px; line-height:1.15; text-shadow:0 0 14px rgba(53,230,255,.5);
}
.boot-log{
  font-family:var(--f-pixel); font-size:9px; color:var(--amber);
  margin:0 0 20px; letter-spacing:1px; min-height:12px;
}
.boot-hint{ font-family:var(--f-term); font-size:17px; color:var(--ink-faint); margin:16px 0 0; }

/* ══════════════ BUTTONS ══════════════ */
.btn{
  font-family:var(--f-pixel); font-size:9px; letter-spacing:1px;
  color:var(--ink); background:var(--panel-2);
  border:3px solid var(--line-hot);
  padding:11px 13px; cursor:pointer;
  box-shadow:0 4px 0 #060912, inset 0 0 0 2px #0a0f1c;
  transition:none;
}
.btn:hover:not(:disabled){ color:#fff; border-color:var(--cyan); background:#18213a; }
.btn:active:not(:disabled){ transform:translateY(4px); box-shadow:0 0 0 #060912, inset 0 0 0 2px #0a0f1c; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn:focus-visible{ outline:3px solid var(--green); outline-offset:3px; }

.btn-start{
  font-size:13px; padding:16px 26px;
  color:#04140a; background:var(--green); border-color:#9dffcd;
  box-shadow:0 6px 0 #12603a, 0 0 30px rgba(57,255,136,.4);
  animation:pulse-start 1.2s steps(2) infinite;
}
.btn-start:hover{ background:#7dffb8; color:#04140a; border-color:#fff; }
@keyframes pulse-start{ 50%{ box-shadow:0 6px 0 #12603a, 0 0 8px rgba(57,255,136,.2); } }

.btn-tog{ color:var(--ink-faint); border-color:var(--line); }
.btn-tog.is-on{
  color:#03130c; background:var(--green); border-color:#9dffcd;
  box-shadow:0 4px 0 #12603a, 0 0 16px rgba(57,255,136,.3);
}

.controls{
  display:flex; flex-wrap:wrap; gap:9px; align-items:stretch;
  padding:13px; border-top:var(--px) solid var(--line);
  background:linear-gradient(180deg,#0c1120,#0a0e1a);
}

/* camera picker — styled to sit beside the pixel buttons */
.sel-wrap{
  display:flex; align-items:center; gap:0;
  border:3px solid var(--line-hot); background:var(--panel-2);
  box-shadow:0 4px 0 #060912;
}
.sel-k{
  font-family:var(--f-pixel); font-size:8px; letter-spacing:1px;
  color:var(--ink-faint); padding:0 10px; border-right:3px solid var(--line-hot);
  align-self:stretch; display:flex; align-items:center;
}
.sel{
  font-family:var(--f-pixel); font-size:8px; letter-spacing:.5px;
  color:var(--ink); background:transparent; border:0;
  padding:11px 10px; max-width:190px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
.sel:focus-visible{ outline:3px solid var(--green); outline-offset:2px; }
.sel option{ background:#0e1220; color:var(--ink); font-family:monospace; }
.sel-wrap:hover{ border-color:var(--cyan); }

/* camera pitch slider */
.tilt-wrap{ padding-right:10px; gap:10px; }
.tilt-v{
  font-family:var(--f-term); font-size:20px; color:var(--cyan);
  min-width:38px; text-align:right;
}
.tilt-wrap.is-auto .tilt-v{ color:var(--green); }
#tiltRange{
  -webkit-appearance:none; appearance:none;
  width:104px; height:10px; margin:0 0 0 10px;
  background:#0a1020; border:2px solid #1b2540; cursor:pointer;
}
#tiltRange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:20px; background:var(--cyan);
  border:2px solid #05070f; box-shadow:0 0 10px rgba(53,230,255,.6);
}
#tiltRange::-moz-range-thumb{
  width:12px; height:20px; border-radius:0;
  background:var(--cyan); border:2px solid #05070f;
}
#tiltRange:focus-visible{ outline:3px solid var(--green); outline-offset:3px; }

/* ══════════════ HUD STRIP ══════════════ */
.hud{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:var(--px) solid var(--line); background:#080c16;
}
.hud-cell{
  padding:10px 8px; text-align:center;
  border-right:2px solid var(--line);
  display:flex; flex-direction:column; gap:5px;
}
.hud-cell:last-child{ border-right:0; }
.hud-k{ font-family:var(--f-pixel); font-size:7px; color:var(--ink-faint); letter-spacing:1px; }
.hud-v{ font-family:var(--f-term); font-size:26px; line-height:1; color:var(--green); text-shadow:0 0 12px rgba(57,255,136,.45); }
.hud-v i{ font-size:14px; font-style:normal; color:var(--ink-dim); }
@media (max-width:620px){ .hud{ grid-template-columns:repeat(3,1fr); } }

/* ══════════════ DETECTOR SIGNALS STRIP ══════════════ */
.signals{
  border-top:var(--px) solid var(--line);
  background:#080c16; padding:12px 13px;
}
.sig-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:11px; }
.sig-title{ font-family:var(--f-pixel); font-size:7.5px; letter-spacing:1px; color:var(--ink-faint); }
.sig-reason{ font-family:var(--f-pixel); font-size:7.5px; letter-spacing:1px; color:var(--cyan); }
.sig-reason[data-bad="1"]{ color:var(--amber); }

.sig-rows{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px 16px; }
.sig-row{ display:grid; grid-template-columns:66px 1fr 44px; gap:9px; align-items:center; }
.sig-row.is-off{ opacity:.32; }
.sig-name{ font-family:var(--f-pixel); font-size:7px; letter-spacing:.5px; color:var(--ink-dim); }
.sig-raw{ font-family:var(--f-term); font-size:17px; color:var(--ink-dim); text-align:right; }
.sig-row .bar{ height:9px; }

.sig-total{
  display:grid; grid-template-columns:auto 1fr 56px; gap:11px; align-items:center;
  margin-top:13px; padding-top:12px; border-top:2px solid var(--line);
}
.sig-k{ font-family:var(--f-pixel); font-size:8px; letter-spacing:1px; color:var(--amber); }
.sig-v{ font-family:var(--f-term); font-size:24px; color:var(--green); text-align:right; }
.sig-bar{ height:14px; }
.sig-total.is-hot .sig-v{ color:var(--red); }
.sig-total.is-hot .sig-k{ color:var(--red); }

.btn-cal.is-set{ color:#03130c; background:var(--cyan); border-color:#b0f2ff; box-shadow:0 4px 0 #0a5c6b; }

/* ══════════════ POSTURE BANNER (on the feed) ══════════════ */
.posture-banner{
  position:absolute; left:14px; bottom:14px; z-index:7;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(5,7,15,.86);
  border:3px solid currentColor;
  font-family:var(--f-pixel); font-size:11px; letter-spacing:1px;
  color:var(--ink-faint);
}
.pb-dot{ width:11px; height:11px; background:currentColor; flex:none; }
.posture-banner[data-state="none"]    { color:var(--ink-faint); }
.posture-banner[data-state="upright"] { color:var(--green); }
.posture-banner[data-state="leaning"] { color:var(--amber); }
.posture-banner[data-state="crouched"]{ color:var(--cyan); }
.posture-banner[data-state="prone"]   { color:var(--magenta); border-color:var(--magenta); }
.posture-banner[data-state="fallen"]  {
  color:#fff; background:var(--red); border-color:#fff;
  font-size:14px; padding:13px 18px;
  animation:banner-alarm .3s steps(2) infinite;
}
@keyframes banner-alarm{ 50%{ background:#7a0018; transform:scale(.98); } }
.posture-banner[data-state="prone"] .pb-dot,
.posture-banner[data-state="fallen"] .pb-dot{ animation:blink .3s steps(1) infinite; }

/* red wash over the feed while alarming */
.fall-wash{
  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, transparent 35%, rgba(255,51,85,.42) 100%);
  box-shadow:inset 0 0 0 8px var(--red);
}
.fall-wash.is-on{ animation:wash-pulse .5s steps(2) infinite; }
@keyframes wash-pulse{ 0%{ opacity:.35 } 50%{ opacity:.95 } 100%{ opacity:.35 } }

.pb-timer{
  font-family:var(--f-term); font-size:20px; line-height:1;
  padding-left:10px; margin-left:4px; border-left:2px solid currentColor;
}

/* ══════════════ INCIDENT LOG ══════════════ */
.log-body{ max-height:280px; overflow-y:auto; }
.log-empty{
  font-family:var(--f-pixel); font-size:9px; color:var(--ink-faint);
  text-align:center; padding:34px 16px; margin:0; letter-spacing:1px;
}
.log-row{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding:11px 13px; border-bottom:2px solid #131a2c;
  animation:log-in .2s steps(3);
}
@keyframes log-in{ from{ opacity:0; transform:translateX(-14px); } }
.log-row:nth-child(odd){ background:#0b101d; }
.log-badge{
  font-family:var(--f-pixel); font-size:8px; letter-spacing:1px;
  padding:7px 9px; border:2px solid currentColor; white-space:nowrap;
}
.log-badge.fallen{ color:#fff; background:var(--red); border-color:#ff9db0; }
.log-badge.prone { color:var(--magenta); }
.log-badge.test  { color:var(--violet); }
.log-main{ font-family:var(--f-term); font-size:19px; color:var(--ink); }
.log-main .log-time{ color:var(--cyan); }
.log-main .log-detail{ color:var(--ink-dim); }
.log-dur{
  font-family:var(--f-term); font-size:21px; color:var(--amber);
  text-align:right; white-space:nowrap;
}
.log-row.is-active .log-dur{ color:var(--red); animation:blink 1s steps(1) infinite; }
.log-row.is-active{ box-shadow:inset 4px 0 0 var(--red); }

.log-foot{
  display:flex; gap:9px; flex-wrap:wrap;
  padding:13px; border-top:var(--px) solid var(--line);
  background:linear-gradient(180deg,#0c1120,#0a0e1a);
}

/* ══════════════ FALL ALERT POP-UP ══════════════ */
.alert-stack{
  position:fixed; top:14px; right:14px; z-index:999;
  display:flex; flex-direction:column; gap:9px;
  pointer-events:none; max-width:min(72vw, 260px);
}
.alert-pop{
  background:#12030a;
  border:3px solid var(--red);
  box-shadow:
    0 0 0 3px #05070f,
    0 0 0 5px #ff8ba4,
    0 14px 34px -12px rgba(255,51,85,.7),
    0 0 40px rgba(255,51,85,.25);
  padding:10px 12px;
  animation:pop-in .22s steps(4) both, pop-shake .34s steps(2) 3;
  opacity:1;
}
/* fade-out begins at +3s (see POPUP in app.js) and runs quickly */
.alert-pop.is-fading{
  opacity:0;
  transform:translateX(26px);
  transition:opacity .8s linear, transform .8s steps(6);
}
@keyframes pop-in{
  0%  { opacity:0; transform:translateX(70px) scale(.9); }
  100%{ opacity:1; transform:translateX(0)    scale(1);  }
}
@keyframes pop-shake{
  0%,100%{ margin-left:0; } 50%{ margin-left:-6px; }
}
.ap-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-pixel); font-size:9.5px; line-height:1.3; letter-spacing:.5px;
  color:#fff; text-shadow:0 0 12px var(--red), 2px 2px 0 #6b0016;
}
.ap-icon{
  width:18px; height:18px; flex:none;
  animation:bell-ring .35s ease-in-out infinite;
}
.ap-icon rect{ fill:var(--amber); }
.ap-body{
  font-family:var(--f-term); font-size:16px; line-height:1.25;
  color:#ffc9d4; margin-top:6px;
}
.ap-body b{ color:#fff; }
.ap-meta{
  font-family:var(--f-pixel); font-size:6.5px; letter-spacing:.5px;
  color:#ff7a95; margin-top:7px;
}
/* countdown bar — duration is set from JS so it always matches the hold */
.ap-timer{ height:4px; background:#3d0512; margin-top:8px; overflow:hidden; }
.ap-timer i{
  display:block; height:100%; width:100%;
  background:repeating-linear-gradient(90deg, var(--red) 0 6px, #12030a 6px 8px);
  animation:drain linear forwards;
}
@keyframes drain{ to{ width:0%; } }

/* ══════════════ PHONE / PORTRAIT ══════════════ */
@media (max-width:560px){
  .crt-wrap{ padding:10px 8px 24px; }
  .masthead{ padding:6px 0 14px; }
  .logo-row{ gap:11px; }
  .bell{ width:44px; height:44px; }
  .tagline{ font-size:7.5px; margin-top:10px; }

  /* a portrait feed is tall — cap it so the tables stay reachable */
  .stage{ max-height:58vh; }

  .bracket{ width:18px; height:18px; }
  .posture-banner{ left:8px; bottom:8px; padding:7px 9px; font-size:8.5px; gap:7px; }
  .posture-banner[data-state="fallen"]{ font-size:10px; padding:9px 11px; }
  .pb-timer{ font-size:16px; padding-left:7px; }

  /* touch targets: 44px minimum */
  .btn{ font-size:8px; padding:13px 11px; min-height:44px; }
  .btn-start{ font-size:11px; padding:15px 20px; }
  .controls{ gap:7px; padding:9px; }
  .sel, .sel-k{ font-size:7px; }
  .sel{ max-width:118px; padding:13px 8px; }
  #tiltRange{ width:74px; }

  .hud{ grid-template-columns:repeat(3,1fr); }
  .hud-v{ font-size:20px; }
  .hud-k{ font-size:6.5px; }

  .signals{ padding:9px; }
  .sig-rows{ grid-template-columns:repeat(auto-fit, minmax(128px,1fr)); gap:6px 10px; }
  .sig-row{ grid-template-columns:56px 1fr 38px; gap:6px; }

  .dtable td{ font-size:18px; padding:6px 8px; }
  .dtable thead th{ font-size:6.5px; padding:9px 8px; }
  .log-row{ gap:9px; padding:9px; }
  .log-main{ font-size:16px; }

  /* the alert must not swallow the camera on a small screen */
  .alert-stack{ top:8px; right:8px; max-width:62vw; }
  .alert-pop{ padding:8px 10px; }
  .ap-head{ font-size:8.5px; }
  .ap-body{ font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  .alert-pop{ animation:pop-in .01s steps(1) both; }
  .ap-icon, .posture-banner[data-state="fallen"], .fall-wash.is-on{ animation:none; }
}

/* ══════════════ DATA TABLES ══════════════ */
.table-scroll{ overflow-x:auto; }
.dtable{ width:100%; border-collapse:collapse; }

.dtable thead th{
  font-family:var(--f-pixel); font-size:7.5px; letter-spacing:1px;
  color:var(--ink-faint); text-align:left; font-weight:400;
  padding:11px 10px; background:#0a0f1c;
  border-bottom:3px solid var(--line);
  position:sticky; top:0;
}
.dtable td{
  padding:7px 10px;
  border-bottom:2px solid #131a2c;
  font-family:var(--f-term); font-size:21px; line-height:1.25;
  color:var(--ink); white-space:nowrap;
}
.dtable tbody tr{ transition:none; }
.dtable tbody tr:hover td{ background:#121a2e; }
.dtable tbody tr.is-on td{ color:#eaf4ff; }
.dtable tbody tr.is-off td{ color:var(--ink-faint); }

/* group divider rows */
.dtable tr.group td{
  font-family:var(--f-pixel); font-size:7.5px; letter-spacing:1px;
  color:var(--violet); background:#0a0f1c; padding:9px 10px;
}

.c-led{ width:26px; }
.c-num{ width:58px; text-align:right; }
.c-conf{ width:40%; }

/* status LED */
.led{
  display:inline-block; width:12px; height:12px;
  background:var(--ink-faint); box-shadow:0 0 0 2px #05070f;
}
.led.on   { background:var(--green);  box-shadow:0 0 0 2px #05070f, 0 0 12px var(--green); animation:led-pulse 1.1s steps(2) infinite; }
.led.warn { background:var(--amber);  box-shadow:0 0 0 2px #05070f, 0 0 12px var(--amber); }
.led.off  { background:#1c2540; }
@keyframes led-pulse{ 50%{ opacity:.55; } }

.dim{ color:var(--ink-faint); }

/* value flash on change */
.val{ display:inline-block; min-width:2ch; }
.val.flash{ color:#fff; text-shadow:0 0 14px currentColor; }

/* confidence / arc bars */
.bar{
  position:relative; height:12px; width:100%;
  background:#0a1020; border:2px solid #1b2540;
  overflow:hidden;
}
.bar-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:repeating-linear-gradient(90deg, var(--green) 0 6px, #05070f 6px 8px);
  transition:width .07s linear;
}
.bar-fill.mid { background:repeating-linear-gradient(90deg, var(--amber) 0 6px, #05070f 6px 8px); }
.bar-fill.low { background:repeating-linear-gradient(90deg, var(--magenta) 0 6px, #05070f 6px 8px); }

/* per-region accent dots in the parts table */
.tag{ font-family:var(--f-pixel); font-size:7px; padding:3px 5px; margin-left:8px; border:2px solid currentColor; }
.tag.head  { color:var(--cyan); }
.tag.arm   { color:var(--magenta); }
.tag.leg   { color:var(--amber); }
.tag.hand  { color:var(--violet); }
.tag.core  { color:var(--green); }

/* ══════════════ FOOTER ══════════════ */
.footer{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:18px; padding:12px 4px;
  font-family:var(--f-pixel); font-size:8px; letter-spacing:1px; color:var(--ink-faint);
}
#sysLog{ color:var(--green); }
.footer-right{ color:var(--ink-faint); }

/* ══════════════ ALERT STATE (torso past threshold) ══════════════ */
body.alarm{ animation:alarm-flash .4s steps(2) infinite; }
@keyframes alarm-flash{ 50%{ background:#1a0610; } }
body.alarm .bell{ animation-duration:.35s; filter:drop-shadow(0 0 16px var(--red)); }
body.alarm .panel-stage{ border-color:var(--red); }