:root {
  color-scheme: dark;
  --ink: #13141d;
  --navy: #082332;
  --blue: #003854;
  --lime-a: #a3bf1a;
  --lime-b: #bccf21;
  --lime: #a3bf1a;
  --lime-hot: #c8d400;
  --accent-rgb: 163, 191, 26;
  --grey-a: #d4d3d4;
  --grey-b: #dfe0e2;
  --white: #ffffff;
  --red: #d84f5b;
  --bg: #02070c;
  --surface: #071522;
  --surface-2: #0a1f2d;
  --surface-3: #0e2a3a;
  --line: rgba(160, 198, 212, .18);
  --line-strong: rgba(var(--accent-rgb), .28);
  --text: #f5f7f8;
  --muted: #98adba;
  --soft: #637d8b;
  --shadow: 0 18px 52px rgba(0,0,0,.34);
  --radius-xl: 24px;
  --radius: 16px;
  --radius-sm: 10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -4%, rgba(0,56,84,.5), transparent 34rem),
    radial-gradient(circle at 85% 2%, rgba(var(--accent-rgb),.1), transparent 28rem),
    linear-gradient(135deg, #02070c, #06131d 54%, #02070c);
}
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }

body.theme-light {
  color-scheme: light;
  --lime: #6d8212;
  --lime-hot: #a3bf1a;
  --accent-rgb: 109, 130, 18;
  --bg: #dfe0e2;
  --surface: #ffffff;
  --surface-2: #f4f5f6;
  --surface-3: #e8ecee;
  --line: rgba(0, 56, 84, .18);
  --line-strong: rgba(109, 130, 18, .38);
  --text: #13141d;
  --muted: #486271;
  --soft: #6f8794;
  --shadow: 0 18px 42px rgba(0, 56, 84, .14);
  background:
    radial-gradient(circle at 18% -6%, rgba(0,56,84,.12), transparent 32rem),
    radial-gradient(circle at 84% 0%, rgba(163,191,26,.16), transparent 28rem),
    linear-gradient(135deg, #f7f8f8, #dfe0e2 52%, #d4d3d4);
}

body:not(.theme-light) .atlas-card.locked,
body:not(.theme-light) .ref-tile.is-active,
body:not(.theme-light) .stage-intro {
  border-color: rgba(var(--accent-rgb), .22);
}

body.theme-light .system-bar {
  background: rgba(255, 255, 255, .86);
  border-bottom-color: rgba(0, 56, 84, .18);
}
body.theme-light .reference-rail,
body.theme-light .inspector-card,
body.theme-light .atlas-card {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,245,246,.97));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.8);
}
body.theme-light .atlas-card::before {
  background:
    linear-gradient(rgba(0,56,84,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,56,84,.03) 1px, transparent 1px);
}
body.theme-light .ref-tile,
body.theme-light .principle-stack span,
body.theme-light .feedback-row,
body.theme-light .meter-row,
body.theme-light .walk-zone,
body.theme-light .layer-row,
body.theme-light .setting-row,
body.theme-light .profile-row,
body.theme-light .device-row,
body.theme-light .recovery-row,
body.theme-light .control-pane,
body.theme-light .control-pane p,
body.theme-light .event-log p {
  background: rgba(255, 255, 255, .68);
}
body.theme-light .g8-btn {
  background: linear-gradient(180deg, #ffffff, #e8ecee);
  color: #082332;
  border-color: rgba(0,56,84,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px rgba(0,56,84,.12);
}
body.theme-light .g8-btn.primary {
  color: #263000;
  border-color: rgba(109,130,18,.42);
  background: linear-gradient(180deg, rgba(163,191,26,.28), #eef2df);
}
body.theme-light .g8-btn.ghost {
  color: #486271;
  background: rgba(255,255,255,.52);
}
body.theme-light .g8-btn.danger {
  color: #681f29;
  border-color: rgba(216,79,91,.36);
  background: linear-gradient(180deg, rgba(216,79,91,.14), #fff6f7);
}
body.theme-light .calibration-grid,
body.theme-light .floorplan,
body.theme-light .preview-pane,
body.theme-light .joystick {
  background-color: #ffffff;
  box-shadow: inset 0 0 28px rgba(0,56,84,.08);
}
body.theme-light .calibration-grid {
  background:
    linear-gradient(rgba(0,56,84,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,56,84,.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(109,130,18,.11), transparent 26%),
    #ffffff;
  background-size: 28px 28px, 28px 28px, auto, auto;
}
body.theme-light .joystick {
  background: radial-gradient(circle, rgba(109,130,18,.13) 0 16%, transparent 17%), linear-gradient(145deg, #ffffff, #e8ecee);
}
body.theme-light .theme-mode,
body.theme-light .readout-pill,
body.theme-light .mini-status,
body.theme-light .locked-chip {
  background: rgba(255,255,255,.72);
  color: #486271;
  border-color: rgba(0,56,84,.18);
}
body.theme-light .theme-mode.is-active,
body.theme-light .readout-pill.good,
body.theme-light .mini-status.good,
body.theme-light .locked-chip {
  color: #465600;
  border-color: rgba(109,130,18,.34);
  background: rgba(163,191,26,.12);
}

.theme-mode {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7,21,34,.58);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.theme-mode.is-active {
  color: #f2f6d2;
  border-color: rgba(var(--accent-rgb), .34);
  background: rgba(var(--accent-rgb), .08);
}

.app-shell { min-height: 100vh; }
.system-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 18px;
  background: rgba(2, 7, 12, .88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.product-title { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.live-led {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 0 7px rgba(var(--accent-rgb),.08), 0 0 22px rgba(var(--accent-rgb),.48);
}
.product-title h1 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.product-title p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.system-readouts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.readout-pill, .mini-status, .locked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(7,21,34,.64);
  font-size: 11px;
  white-space: nowrap;
}
.readout-pill.good, .mini-status.good { color: var(--lime); border-color: rgba(var(--accent-rgb),.3); background: rgba(var(--accent-rgb),.07); }
.mini-status.danger { color: #ffd9dd; border-color: rgba(216,79,91,.36); background: rgba(216,79,91,.12); }

.workspace-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 292px;
  gap: 14px;
  padding: 14px;
  align-items: start;
}
.reference-rail, .inspector { position: sticky; top: 72px; max-height: calc(100vh - 86px); overflow: auto; }
.reference-rail, .inspector-card, .atlas-card {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(10,31,45,.92), rgba(4,13,21,.96)),
    var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.045);
}
.reference-rail { padding: 12px; }
.rail-head { padding: 6px 6px 12px; }
.label-kicker { display: block; color: var(--lime); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.rail-head h2, .inspector-card h2 { margin: 6px 0 6px; font-size: 17px; letter-spacing: -.03em; }
.rail-head p, .inspector-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.42; }
.ref-tile {
  width: 100%;
  display: grid;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  margin: 8px 0;
  background: rgba(2,7,12,.3);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.ref-tile:hover, .ref-tile.is-active { border-color: var(--line-strong); background: rgba(var(--accent-rgb),.055); }
.ref-tile:hover { transform: translateY(-1px); }
.ref-tile img { width: 100%; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: #02070c; }
.ref-tile span { color: var(--muted); font-size: 12px; }
.ref-tile b { color: var(--lime); font-weight: 800; }
.board-link {
  display: block;
  margin-top: 12px;
  padding: 11px;
  text-align: center;
  color: var(--lime);
  text-decoration: none;
  border: 1px solid rgba(var(--accent-rgb),.3);
  border-radius: 14px;
  background: rgba(var(--accent-rgb),.065);
  font-size: 12px;
}

.component-stage { min-width: 0; }
.stage-intro { margin-bottom: 14px; padding: 12px 14px; min-height: auto; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: center; }
.stage-intro h2 { margin: 0; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.02; letter-spacing: -.045em; }
.stage-intro p { margin: 7px 0 0; color: var(--muted); max-width: 780px; line-height: 1.4; font-size: 13px; }
.principle-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.principle-stack span { padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(2,7,12,.28); color: var(--muted); font-size: 11px; }

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
}
.atlas-card {
  padding: 14px;
  min-height: 260px;
  overflow: hidden;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.atlas-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(223,224,226,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223,224,226,.023) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 78%);
}
.atlas-card > * { position: relative; z-index: 1; }
.atlas-card:hover, .atlas-card.is-selected { border-color: rgba(var(--accent-rgb),.36); box-shadow: 0 22px 66px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.atlas-card:hover { transform: translateY(-2px); }
.atlas-card.locked { border-color: rgba(var(--accent-rgb),.24); }
.atlas-card.wide { grid-column: span 2; }
.atlas-card.tall { grid-row: span 2; }
.card-topline, .card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-topline { margin-bottom: 11px; }
.component-number {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--lime);
  font-weight: 900;
  font-size: 12px;
  background: rgba(var(--accent-rgb),.075);
}
.locked-chip { color: var(--lime); border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.055); }
.locked-chip.subtle { color: var(--muted); border-color: var(--line); background: rgba(2,7,12,.24); }
.card-title-row h3 { margin: 0; font-size: 18px; letter-spacing: -.035em; }

.g8-btn {
  min-height: 42px;
  border: 1px solid rgba(223,224,226,.17);
  border-radius: 12px;
  padding: 0 13px;
  background: linear-gradient(180deg, rgba(17,52,70,.96), rgba(7,24,36,.98));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.18);
  transition: transform .13s ease, border-color .13s ease, background .13s ease;
}
.g8-btn:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.44); }
.g8-btn:active, .g8-btn.pressed { transform: translateY(1px); background: linear-gradient(180deg, rgba(9,30,43,.98), rgba(4,14,22,.98)); }
.g8-btn.primary { border-color: rgba(var(--accent-rgb),.44); background: linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(0,56,84,.72)); color: #f2f6d2; }
.g8-btn.ghost { background: rgba(2,7,12,.24); color: var(--muted); }
.g8-btn.danger { border-color: rgba(216,79,91,.38); background: linear-gradient(180deg, rgba(216,79,91,.13), rgba(10,31,45,.92)); color: #ffd9dd; }
.g8-btn.small { min-height: 32px; border-radius: 9px; font-size: 12px; padding: 0 10px; }
.g8-btn[disabled] { opacity: .42; cursor: not-allowed; transform: none; }
.icon { width: 14px; height: 14px; display: inline-block; position: relative; }
.icon.power::before { content:""; position:absolute; inset:2px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; }
.icon.power::after { content:""; position:absolute; left:6px; top:0; width:2px; height:8px; background:currentColor; border-radius:2px; }
.button-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.feedback-row { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(2,7,12,.24); margin-top: 8px; }
.feedback-row b { font-size: 12px; }
.feedback-row em, .meter-row span, .device-row em, .recovery-row em, .layer-row em, .profile-row span, .setting-row em, .control-pane em { color: var(--muted); font-style: normal; font-size: 11px; }
.feedback-row.good { border-color: rgba(var(--accent-rgb),.24); }
.feedback-row.danger { border-color: rgba(216,79,91,.27); }
.feedback-icon, .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--lime); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.07); }
.feedback-row.danger .feedback-icon, .dot.bad { background: var(--red); box-shadow: 0 0 0 6px rgba(216,79,91,.08); }

.spatial-grid { display: grid; grid-template-columns: 240px minmax(150px, 1fr) 210px; gap: 14px; align-items: center; margin-top: 14px; }
.joystick { position: relative; width: 230px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.36); background: radial-gradient(circle, rgba(var(--accent-rgb),.13) 0 16%, transparent 17%), linear-gradient(145deg, rgba(14,42,58,.86), rgba(2,7,12,.98)); box-shadow: inset 0 0 42px rgba(0,0,0,.42); touch-action: none; }
.ring, .axis { position: absolute; pointer-events: none; }
.ring { inset: 28px; border: 1px solid rgba(var(--accent-rgb),.24); border-radius: 50%; }
.ring-b { inset: 58px; border-style: dashed; opacity: .8; }
.ring-c { inset: 91px; border-color: rgba(223,224,226,.18); }
.axis.x { left: 20px; right: 20px; top: 50%; height: 1px; background: rgba(223,224,226,.1); }
.axis.y { top: 20px; bottom: 20px; left: 50%; width: 1px; background: rgba(223,224,226,.1); }
.joy-thumb { position: absolute; left: calc(50% - 26px); top: calc(50% - 26px); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.8); background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.32), transparent 18%), linear-gradient(160deg, rgba(var(--accent-rgb),.58), rgba(0,56,84,.96)); box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 0 8px rgba(var(--accent-rgb),.08); cursor: grab; }
.spatial-readouts { display: grid; gap: 8px; }
.meter-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 37px; padding: 9px 10px; border-radius: 11px; background: rgba(2,7,12,.28); border: 1px solid var(--line); }
.meter-row b { font-variant-numeric: tabular-nums; font-size: 12px; }
.walk-zone { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgba(2,7,12,.22); }
.walk-pad { width: 100%; aspect-ratio: 1.35; border: 1px solid rgba(var(--accent-rgb),.42); border-radius: 16px; background: radial-gradient(circle at 50% 38%, rgba(var(--accent-rgb),.18), transparent 28%), rgba(2,7,12,.38); color: var(--lime); cursor: pointer; }
.walk-pad span { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.walk-pad small { color: var(--muted); }
.walk-pad.is-held { background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb),.34), transparent 35%), rgba(var(--accent-rgb),.08); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.34), 0 0 24px rgba(var(--accent-rgb),.13); }
.walk-state { margin-top: 8px; color: var(--muted); font-size: 12px; }

.calibration-grid { position: relative; min-height: 250px; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb),.3); background: linear-gradient(rgba(223,224,226,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(223,224,226,.055) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.1), transparent 26%), #06111a; background-size: 28px 28px, 28px 28px, auto, auto; overflow: hidden; margin-top: 14px; }
.corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--lime); border-radius: 50%; background: #06111a; box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.07); }
.tl { left: 18px; top: 20px; } .tr { right: 22px; top: 32px; } .bl { left: 36px; bottom: 26px; } .br { right: 28px; bottom: 22px; }
.cal-line.h { position:absolute; left:22px; right:22px; top:50%; height:1px; background: rgba(var(--accent-rgb),.26); }
.cal-line.v { position:absolute; top:22px; bottom:22px; left:50%; width:1px; background: rgba(var(--accent-rgb),.26); }
.cal-target { position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border:1px solid rgba(223,224,226,.55); border-radius:50%; }
.projector-cone { position:absolute; right:34px; bottom:28px; width:110px; height:92px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(var(--accent-rgb),.22), transparent); border-bottom: 1px solid rgba(var(--accent-rgb),.25); opacity:.72; }
.cal-actions { display:grid; grid-template-columns: 110px 1fr; gap: 12px; margin-top: 12px; }
.dpad { display:grid; grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(3, 32px); gap: 5px; align-content:center; }
.dpad button { border:1px solid var(--line); border-radius:9px; background:rgba(2,7,12,.3); color:var(--text); cursor:pointer; }
.dpad button:first-child { grid-column:2; } .dpad button:nth-child(2) { grid-column:1; grid-row:2; } .dpad .confirm { grid-column:2; grid-row:2; color:var(--lime); } .dpad button:nth-child(4) { grid-column:3; grid-row:2; } .dpad button:nth-child(5) { grid-column:2; grid-row:3; }
.stepper { display:grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 8px; }
.stepper span { height: 10px; border:1px solid var(--line); border-radius:999px; background:rgba(223,224,226,.08); }
.stepper .done, .stepper .active { border-color:rgba(var(--accent-rgb),.42); background:linear-gradient(90deg, var(--lime), rgba(var(--accent-rgb),.18)); }
.stepper .active { box-shadow:0 0 18px rgba(var(--accent-rgb),.12); }

.layer-stack { display:grid; gap:8px; margin-top:14px; }
.layer-row { display:grid; grid-template-columns: 24px minmax(0, 1fr) minmax(90px, 150px) 52px; gap:10px; align-items:center; width:100%; padding:10px; border:1px solid var(--line); border-radius:13px; background:rgba(2,7,12,.22); text-align:left; cursor:pointer; }
.layer-row.is-active { border-color:rgba(var(--accent-rgb),.48); background:rgba(var(--accent-rgb),.065); }
.handle { height:22px; border-radius:7px; border:1px solid var(--line); background:repeating-linear-gradient(90deg, rgba(223,224,226,.32) 0 1px, transparent 1px 4px); }
.layer-row b, .device-row b, .recovery-row b, .profile-row b, .setting-row b, .control-pane b { display:block; font-size:12px; }
.layer-row input { width:100%; accent-color: var(--lime); }
.layer-row i, .device-row i, .recovery-row i { justify-self:end; color:var(--muted); font-style:normal; font-size:11px; }
.layer-row.is-missing { border-color:rgba(216,79,91,.3); }
.layer-row.is-missing i { color:#ffd9dd; }

.settings-shell { display:grid; gap:10px; margin-top:14px; }
.settings-tabs { display:flex; gap:6px; padding:6px; border:1px solid var(--line); border-radius:14px; background:rgba(2,7,12,.22); }
.settings-tabs button { flex:1; min-height:34px; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.settings-tabs button.is-active { color:#f2f6d2; background:rgba(var(--accent-rgb),.14); box-shadow:inset 0 -2px 0 rgba(var(--accent-rgb),.55); }
.setting-row, .profile-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:13px; background:rgba(2,7,12,.24); }
.switch { width:52px; height:29px; padding:3px; border:1px solid var(--line); border-radius:999px; background:rgba(2,7,12,.38); cursor:pointer; }
.switch i { display:block; width:21px; height:21px; border-radius:50%; background:var(--muted); transition:transform .18s ease, background .18s ease; }
.switch.is-on { border-color:rgba(var(--accent-rgb),.42); background:rgba(var(--accent-rgb),.09); }
.switch.is-on i { transform:translateX(23px); background:var(--lime); }
.profile-row strong { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:#101812; }
.validation-list { display:grid; gap:7px; }
.validation-list p { margin:0; padding:8px 10px; border-radius:11px; border:1px solid var(--line); font-size:12px; }
.validation-list .ok { color:var(--lime); border-color:rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.055); }
.validation-list .warn { color:#ffd9dd; border-color:rgba(216,79,91,.32); background:rgba(216,79,91,.09); }

.status-layout { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px; }
.device-list, .recovery-list { display:grid; gap:8px; }
.device-row, .recovery-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(2,7,12,.24); }
.dot.good { background:var(--lime); box-shadow:0 0 0 6px rgba(var(--accent-rgb),.07); }
.device-row.fault, .recovery-row.fault { border-color:rgba(216,79,91,.28); }
.floorplan { position:relative; min-height:196px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(135deg, rgba(0,56,84,.36), rgba(2,7,12,.95)); overflow:hidden; }
.floorplan svg { position:absolute; inset:0; width:100%; height:100%; }
.floorplan path { fill:rgba(0,56,84,.36); stroke:rgba(223,224,226,.22); stroke-width:2; }
.floorplan .zone { fill:rgba(var(--accent-rgb),.065); stroke:rgba(var(--accent-rgb),.36); }
.floorplan .cone { fill:rgba(var(--accent-rgb),.1); stroke:rgba(var(--accent-rgb),.24); }
.floorplan circle { fill:var(--lime); } .floorplan circle.fault { fill:var(--red); }
.split-layout { display:grid; grid-template-columns: 1.15fr .78fr; gap:10px; margin-top:14px; min-height:220px; }
.preview-pane { position:relative; border:1px solid var(--line); border-radius:15px; background:radial-gradient(circle at 50% 38%, rgba(var(--accent-rgb),.11), transparent 28%), linear-gradient(145deg, #071522, #02070c); overflow:hidden; }
.safe-frame { position:absolute; inset:34px; border:1px dashed rgba(var(--accent-rgb),.28); border-radius:14px; }
.preview-actions { position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:6px; flex-wrap:wrap; }
.control-pane { display:grid; gap:8px; align-content:start; border:1px solid var(--line); border-radius:15px; padding:10px; background:rgba(2,7,12,.24); }
.control-pane p { margin:0; padding:9px; border:1px solid var(--line); border-radius:11px; background:rgba(14,42,58,.34); }
.recovery-checks { display:grid; gap:7px; margin-top:2px; }
.recovery-checks span { padding:8px 10px; border:1px solid var(--line); border-radius:11px; color:var(--muted); font-size:12px; }
.recovery-checks .done { color:var(--lime); border-color:rgba(var(--accent-rgb),.28); background:rgba(var(--accent-rgb),.055); }
.state-loading { background: linear-gradient(90deg, rgba(var(--accent-rgb),.075), rgba(2,7,12,.24)); }
.state-loading::after { content:""; height:3px; border-radius:999px; background:linear-gradient(90deg, transparent, var(--lime), transparent); grid-column:1 / -1; opacity:.62; }
.state-offline { background:rgba(216,79,91,.08); }
.state-denied { box-shadow: inset 3px 0 0 rgba(216,79,91,.56); }
.state-audit { border-color:rgba(var(--accent-rgb),.28); background:rgba(var(--accent-rgb),.045); }
.state-empty { opacity:.88; }
.swatch-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:14px; }
.swatch-grid span { min-height:54px; display:flex; align-items:flex-end; padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:var(--c); color:var(--text, #fff); font-size:11px; text-shadow:0 1px 1px rgba(0,0,0,.5); }

.inspector { display:grid; gap:12px; }
.inspector-card { padding:14px; }
.inspector-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.token-list { display:grid; gap:9px; margin-top:12px; }
.token-list span { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; }
.token-list i { width:20px; height:20px; border-radius:7px; border:1px solid rgba(255,255,255,.12); }
.event-log { display:grid; gap:7px; max-height:240px; overflow:auto; margin-top:10px; }
.event-log p { margin:0; padding:8px; border-radius:10px; border:1px solid var(--line); background:rgba(2,7,12,.24); color:var(--muted); font-size:11px; }
.event-log b { color:var(--lime); }

body.compact .atlas-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
body.compact .atlas-card { min-height: 220px; padding: 12px; }
body.compact .stage-intro { display:none; }
body.lock-highlight .atlas-card:not(.locked) { opacity:.45; }
body.lock-highlight .atlas-card.locked { border-color:rgba(var(--accent-rgb),.62); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.22), var(--shadow); }

@media (max-width: 1240px) {
  .workspace-grid { grid-template-columns: 220px minmax(0,1fr); }
  .inspector { position: static; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); max-height:none; overflow:visible; }
  .atlas-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 860px) {
  .system-bar, .workspace-grid { display:block; }
  .system-readouts { justify-content:flex-start; margin-top:10px; }
  .reference-rail, .inspector { position:static; max-height:none; margin-bottom:14px; }
  .ref-tile { grid-template-columns:92px 1fr; align-items:center; }
  .ref-tile img { height:62px; }
  .atlas-grid, body.compact .atlas-grid, .intro-grid, .spatial-grid, .status-layout, .split-layout, .cal-actions, .inspector { grid-template-columns:1fr; }
  .atlas-card.wide { grid-column:auto; }
  .joystick { width:min(230px, 100%); justify-self:center; }
  .layer-row { grid-template-columns:24px minmax(0,1fr); }
  .layer-row input, .layer-row i { grid-column:2; justify-self:stretch; }
}