:root {
  --bg: #040b08;
  --bgp: #071009;
  --bgs: #0c1a0e;
  --bdr: #1a3322;
  --grn: #00e87a;
  --amb: #f5a327;
  --red: #ff4d4d;
  --cyan: #5ce0ff;
  --hi: #c8f0d4;
  --mid: #7abf90;
  --lo: #3d7050;
  --mono: "Courier New", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--hi);
  font-family: var(--mono);
  font-size: 12px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bgp);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  gap: 16px;
}
.ht { font-size: 13px; letter-spacing: 0.16em; color: var(--grn); text-transform: uppercase; }
.hs { font-size: 10px; color: var(--lo); letter-spacing: 0.06em; margin-top: 2px; }
.hspecs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hspec .l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lo); }
.hspec .v { font-size: 12px; color: var(--grn); font-variant-numeric: tabular-nums; }
.hspec .v.a { color: var(--amb); }

.labnav { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.labnav a {
  color: var(--lo);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--bdr);
}
.labnav a + a { margin-left: -1px; }
.labnav a.on, .labnav a:hover { color: var(--grn); border-color: var(--grn); }

.banner {
  flex-shrink: 0;
  padding: 7px 16px;
  background: #0a160c;
  border-bottom: 1px solid var(--bdr);
  color: var(--amb);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.stage {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.scope {
  flex-shrink: 0;
  height: 148px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bdr);
  background: var(--bgp);
}
.scope-pane { min-width: 0; min-height: 0; }
.scope canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.map-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  background: var(--bg);
}
.map-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.map-wrap canvas:active { cursor: grabbing; }

aside {
  width: 280px;
  background: var(--bgp);
  border-left: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.sbp { padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.ch {
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lo);
  border-bottom: 1px solid var(--bdr);
  padding-bottom: 3px;
  margin-bottom: 2px;
}
.pr { display: flex; flex-direction: column; gap: 4px; }
.pt { display: flex; justify-content: space-between; align-items: baseline; }
.pt .n { color: var(--mid); font-size: 11px; }
.pt .v { color: var(--grn); font-size: 12px; font-variant-numeric: tabular-nums; }
label.chk {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mid);
  font-size: 11px;
  cursor: pointer;
}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: var(--bdr);
  outline: none;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: var(--grn);
  border-radius: 50%;
  cursor: pointer;
}
select, .dbtn {
  width: 100%;
  background: var(--bgs);
  color: var(--grn);
  border: 1px solid var(--bdr);
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
  cursor: pointer;
}
select:focus { border-color: var(--grn); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dbtn { text-transform: uppercase; letter-spacing: 0.1em; color: var(--mid); background: transparent; }
.dbtn:hover { border-color: var(--grn); color: var(--grn); }
.dbtn.on { border-color: var(--grn); color: var(--grn); box-shadow: 0 0 8px rgba(0, 232, 122, 0.25); }

.est { background: var(--bgs); border: 1px solid var(--bdr); padding: 8px; }
.drow { display: flex; justify-content: space-between; font-size: 10px; padding: 2px 0; }
.drow span:first-child { color: var(--lo); }
.drow span:last-child { color: var(--mid); font-variant-numeric: tabular-nums; }
.drow span.a { color: var(--amb); }
.drow span.warn { color: var(--red); }

.table-wrap { overflow: auto; max-height: 240px; border: 1px solid var(--bdr); }
.det-table { max-height: 180px; margin-top: 8px; }
.pkt {
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--bgs);
  border: 1px solid var(--bdr);
  color: var(--mid);
  font-size: 9px;
  line-height: 1.35;
  max-height: 140px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
table { width: 100%; border-collapse: collapse; font-size: 10px; }
th, td { padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; }
th { color: var(--lo); text-transform: uppercase; letter-spacing: 0.06em; text-align: left; font-weight: normal; border-bottom: 1px solid var(--bdr); }
td:first-child, th:first-child { text-align: left; color: var(--mid); }
td { color: var(--hi); border-bottom: 1px solid #0f2314; }
tr.hit td:first-child { color: var(--amb); }
.eq { color: var(--mid); font-size: 10px; line-height: 1.5; }
.eq .dim { color: var(--lo); }
#fuseCaveat { color: var(--cyan); margin-top: 8px; }

footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 14px;
  background: var(--bgp);
  border-top: 1px solid var(--bdr);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 5px var(--grn); }
.dot.off { background: var(--lo); box-shadow: none; }
.si { display: flex; gap: 5px; align-items: baseline; }
.sl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lo); }
.sv { font-size: 12px; color: var(--grn); font-variant-numeric: tabular-nums; }
.sv.a { color: var(--amb); }
.fhint { margin-left: auto; font-size: 9px; color: var(--lo); }

@media (max-width: 860px) {
  aside { width: 230px; }
  .hs { display: none; }
}