:root {
  --bg: #000;
  --line: #33383b;
  --red: #ff0000;
  --off: rgba(255,0,0,.055);
  --text: #e3e3e3;
  --muted: #b8b8b8;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { min-height:100vh; }
.dashboard { width:100%; min-height:100vh; background:#000; }
.topbar {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  padding:10px 24px 18px;
}
.header-date { padding-top:12px; font-size:clamp(16px,2vw,30px); color:#ddd; white-space:nowrap; }
.header-center { text-align:center; }
.header-center h1 { margin:0; font-size:clamp(25px,2.4vw,42px); font-weight:600; letter-spacing:.01em; }
.header-center p { margin:4px 0 0; font-size:clamp(15px,1.6vw,28px); color:#c9c9c9; }
.header-spacer { min-width:1px; }
.panel { border:1px solid var(--line); background:#000; }
.primary { text-align:center; padding:14px 16px 18px; }
h2 { margin:0; font-size:clamp(18px,2vw,34px); font-weight:600; color:#ddd; }
.clock { display:flex; align-items:center; justify-content:center; }
.clock-primary { gap:clamp(6px,1vw,15px); margin:14px auto 6px; }
.clock-small { gap:clamp(2px,.35vw,5px); margin:12px auto 6px; }
.digit { position:relative; aspect-ratio:.56; }
.clock-primary .digit { width:clamp(68px,10vw,150px); }
.clock-small .digit { width:clamp(34px,4vw,60px); }
.segment { position:absolute; background:var(--off); opacity:.68; transition:opacity 70ms linear,background-color 70ms linear,box-shadow 70ms linear; }
.segment.on { background:var(--red); opacity:1; box-shadow:0 0 10px rgba(255,0,0,.9),0 0 28px rgba(255,0,0,.36); }
.segment.h { left:18%; width:64%; height:9%; clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%); }
.segment.v { width:15%; height:39%; clip-path:polygon(50% 0,100% 10%,100% 90%,50% 100%,0 90%,0 10%); }
.segment.a { top:2%; } .segment.g { top:45.5%; } .segment.d { bottom:2%; }
.segment.f { left:2%; top:8%; } .segment.b { right:2%; top:8%; }
.segment.e { left:2%; bottom:8%; } .segment.c { right:2%; bottom:8%; }
.colon { display:flex; flex-direction:column; justify-content:center; gap:30%; transition:opacity 120ms linear; }
.clock-primary .colon { width:clamp(13px,1.9vw,28px); height:clamp(100px,15vw,215px); }
.clock-small .colon { width:clamp(6px,.7vw,10px); height:clamp(52px,6vw,88px); }
.colon span { display:block; width:100%; aspect-ratio:1; border-radius:50%; background:var(--red); box-shadow:0 0 9px rgba(255,0,0,.95),0 0 22px rgba(255,0,0,.32); }
.colon.off { opacity:.08; }
.zone-date { color:#d0d0d0; font-size:clamp(14px,1.45vw,24px); }
.zone-grid { display:grid; grid-template-columns:repeat(6,1fr); }
.zone-card { min-width:0; text-align:center; padding:20px 12px 16px; }
.zone-card:nth-child(1), .zone-card:nth-child(2), .zone-card:nth-child(3) { grid-column:span 2; }
.zone-card.alaska, .zone-card.hawaii { grid-column:span 3; }
.zone-card h2 { font-size:clamp(16px,1.55vw,26px); }
.statusbar { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; color:#8f969b; font-size:12px; }
.sync-dot { width:8px; height:8px; border-radius:50%; background:#48bf5a; box-shadow:0 0 8px rgba(72,191,90,.4); }
.statusbar.error { color:#ff8d87; }
.statusbar.error .sync-dot { background:#ff635c; }
@media (max-width:900px) {
  .topbar { grid-template-columns:1fr; text-align:center; }
  .header-date { position:static; text-align:center; padding:0 0 6px; }
  .header-spacer { display:none; }
  .zone-grid { grid-template-columns:1fr; }
  .zone-card:nth-child(n), .zone-card.alaska, .zone-card.hawaii { grid-column:auto; }
  .clock-small .digit { width:clamp(34px,8vw,54px); }
  .clock-small .colon { width:clamp(6px,1.3vw,9px); height:clamp(52px,12vw,80px); }
}
@media (max-width:540px) {
  .topbar { padding-left:8px; padding-right:8px; }
  .primary { padding-left:4px; padding-right:4px; }
  .clock-primary { gap:3px; }
  .clock-primary .digit { width:clamp(42px,12vw,65px); }
  .clock-primary .colon { width:8px; height:86px; }
}