:root { color-scheme: light; --ink:#172522; --muted:#667772; --paper:#fbfbf7;
  --line:#d7dfda; --blue:#064bff; --teal:#137e72; --orange:#e64b19; }
* { box-sizing:border-box }
body { margin:0; color:var(--ink); background:#f2f5ef;
  font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-image:linear-gradient(#dfe7df80 1px,transparent 1px),
  linear-gradient(90deg,#dfe7df80 1px,transparent 1px); background-size:24px 24px }
button,input { font:inherit } button { cursor:pointer } button:disabled { cursor:default; opacity:.55 }
.shell { width:min(1060px,calc(100% - 28px)); margin:24px auto 60px }
header,.card-heading,.device-actions,.control-row { display:flex; align-items:center; justify-content:space-between; gap:16px }
header { padding:12px 8px 22px } h1,h2 { margin:0; line-height:1.08 } h1 { font-size:clamp(25px,4vw,42px) } h2 { font-size:21px }
.eyebrow { margin:0 0 5px; color:#08766d; font-size:11px; font-weight:800; letter-spacing:.18em }
.muted { color:var(--muted) }.center { text-align:center }.hidden { display:none!important }
.build-version { position:fixed; right:max(20px,calc((100vw - 1060px)/2 + 8px)); top:8px;
  color:var(--muted); font:11px ui-monospace,monospace; z-index:4 }
.status,.tag { min-width:104px; padding:7px 11px; border-radius:9px; background:#edf0eb;
  color:#64726e; text-align:center; font:12px ui-monospace,monospace; font-weight:700 }
.status.unresponsive { color:#9a3515; background:#fff0e9 }
.grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px }
.card { min-width:0; padding:24px; border:1px solid var(--line); border-radius:25px;
  background:#fbfbf9ee; box-shadow:0 1px 0 #fff inset }
.device-card { grid-row:span 2; min-height:530px; display:flex; flex-direction:column }
.device-card .board-photo { margin-block:auto }
.log-card { grid-column:1 }.diagnostics-card { grid-column:2 }
.card-heading { align-items:flex-start }.text-action { flex:0 0 auto; border:0; background:none; color:var(--teal); padding:4px; white-space:nowrap; font-weight:750 }
.board-photo { position:relative; width:min(560px,100%); margin:20px auto }
.board-photo img { display:block; width:100%; border-radius:16px }
.photo-led { position:absolute; left:54.9%; top:67.3%; width:2.31%; aspect-ratio:2.25; border-radius:1px; transform:translate(-50%,-50%) }
.photo-led.on { background:#064bff; box-shadow:0 0 8px 3px #064bff,0 0 20px 7px #064bff88 }
.photo-boot { position:absolute; left:42.8%; top:39.4%; width:7.69%; height:13.85%; border:2px solid transparent; border-radius:8px; transform:translate(-50%,-50%) }
.photo-boot.on { background:#0d211f52; box-shadow:inset 0 3px 5px #000b,0 0 0 2px #147f79b8,0 0 12px #147f7994; transform:translate(-50%,-50%) scale(.88) }
.primary,.secondary { min-height:48px; border-radius:14px; padding:0 18px; font-weight:800 }
.primary { flex:1; border:0; color:white; background:var(--orange) }
.secondary { border:1px solid var(--line); color:var(--ink); background:#fff }
.full { width:100%; margin-top:18px }.control-row { justify-content:center; margin:28px 0 }
.round-control { width:92px; height:92px; border-radius:50%; border:1px solid #ccd7d1;
  color:#84918d; background:#f1f5f1; font-size:43px }
.round-control.on { color:white; background:var(--blue); border-color:var(--blue); box-shadow:0 0 18px #064bff55 }
.push-control { width:126px; height:72px; border:8px solid #bec9c4; border-radius:16px;
  color:white; background:#203b38; font:800 14px ui-monospace,monospace; letter-spacing:.08em }
.push-control.on { transform:translateY(3px); background:var(--blue) }
.boot-visual { width:130px; margin:36px auto 28px; padding:22px; border:8px solid #bdc8c3;
  border-radius:16px; color:white; background:#203b38; text-align:center; font:800 14px ui-monospace,monospace }
.boot-visual.on { transform:translateY(3px) }
#event-log { list-style:none; margin:18px 0 0; padding:0 }
#event-log li { display:grid; grid-template-columns:92px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line) }
#event-log time { white-space:nowrap; color:var(--muted); font:12px ui-monospace,monospace }
.signal-track,.progress { height:7px; margin:20px 0; border-radius:20px; overflow:hidden; background:#e9eeea }
.signal-track i,.progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#ff6647,#b8df41,#178d7e) }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 }
.metrics div { min-width:0; padding:10px; border-radius:12px; background:#eef5f1 }
.metrics dt { color:var(--muted); font-size:11px }.metrics dd { margin:2px 0 0; white-space:nowrap; font:700 12px ui-monospace,monospace }
.diagnostics-card.stale .local-diagnostics { opacity:.28; filter:grayscale(1) }
.connections { margin-top:18px; padding-top:18px; border-top:1px solid var(--line) }
.connection { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:8px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12px }
.connection small { display:block; color:var(--muted) }
.notice,.error { padding:13px 16px; margin-bottom:16px; border-radius:12px; background:#fff0e9; color:#8e2b0d }
.backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:18px; background:#dce5df99; backdrop-filter:blur(1px) }
.modal { position:relative; width:min(520px,100%); max-height:90vh; overflow:auto; padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--paper) }
.modal-close { position:absolute; top:8px; right:11px; border:0; background:none; font-size:30px }
.modal label { display:grid; gap:6px; margin:18px 0 }.modal input { padding:11px; border:1px solid var(--line); border-radius:9px }
@media (max-width:760px) {
  .shell { width:min(100% - 16px,540px); margin-top:20px }.grid { grid-template-columns:1fr }
  .device-card { grid-row:auto; min-height:390px }
  .device-card,.log-card,.diagnostics-card { grid-column:1 }.card { padding:20px 18px }
  .log-card { order:4 }.diagnostics-card { order:5 }.metrics { grid-template-columns:repeat(2,1fr) }
  .connection { grid-template-columns:1.3fr 1fr }.connection span:nth-child(n+3) { text-align:right }
  .device-actions { flex-direction:column }.device-actions button { width:100% }
}