:root {
  --bezel-blue: #2f7ec4;
  --bezel-blue-dk: #1a5a97;
  --panel: #3a3d40;
  --panel-dk: #2b2d30;
  --led-red: #ff2b1a;
  --led-off: #4a1410;
  --crt-green: #33ff77;
  --amber: #e8b84b;
  --slate: #14171b;
  --slate-2: #1c2127;
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  background:
    radial-gradient(circle at 50% 0%, #2a1210 0%, #160b0a 45%, #0a0605 100%);
  color:#cdd3d9;
  font-family:'IBM Plex Mono', monospace;
  min-height:100vh;
}

.app-root { max-width:1200px; margin:0 auto; padding:16px 14px 40px; }

/* header */
.hdr { text-align:center; margin-bottom:18px; }
.hdr-title {
  font-family:'Oswald', sans-serif; font-weight:700; letter-spacing:0.22em;
  font-size:clamp(28px,6vw,52px); margin:0; color:#e8edf2;
  text-shadow:0 2px 0 #000, 0 0 28px rgba(47,126,196,0.4);
}
.hdr-sub { color:#7f8894; font-size:12px; letter-spacing:0.08em; margin-top:4px; }

/* ===== BEZEL / PANEL ===== */
.bezel {
  background:linear-gradient(160deg, #4a97d6 0%, var(--bezel-blue) 35%, var(--bezel-blue-dk) 100%);
  border-radius:10px;
  padding:14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), inset 0 1px 3px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.4);
  transition:filter .4s;
}
.bezel-off { filter:brightness(0.55) saturate(0.6); }
.panel {
  background:
    linear-gradient(180deg, #43464a 0%, var(--panel) 40%, var(--panel-dk) 100%);
  border-radius:5px;
  padding:16px 18px 10px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.55);
  overflow-x:auto;
}

.panel-row { display:flex; align-items:flex-end; gap:6px; min-width:760px; }
.led-top-row { justify-content:flex-start; margin-bottom:14px; }
.led-addr-row { margin-bottom:20px; }
.grp { display:flex; gap:5px; align-items:flex-end; }
.waithlda { margin-right:22px; }
.statusgrp { gap:9px; }
.datagrp { margin-left:auto; gap:9px; }
.addrspacer { flex:0 0 auto; width:0; }
.addrgrp { margin-left:auto; gap:8px; }

/* LED */
.led-col { display:flex; flex-direction:column; align-items:center; width:22px; }
.led-label { font-size:8px; letter-spacing:0.02em; color:#c9cdd2; margin-bottom:4px; white-space:nowrap; height:10px; }
.led-sublabel { font-size:8px; color:#9aa0a6; margin-top:2px; }
.led {
  width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6b1f18, var(--led-off) 70%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  transition: box-shadow .05s, background .05s;
}
.led-on {
  background:radial-gradient(circle at 35% 30%, #ff9a8a, #ff2b1a 55%, #b31207 100%);
}
.panel:not(.no-bloom) .led-on {
  box-shadow: 0 0 8px 2px rgba(255,50,30,0.85), 0 0 16px 4px rgba(255,50,30,0.4), inset 0 1px 2px rgba(255,255,255,0.4);
}

/* switches */
.sw-row { margin-bottom:18px; align-items:flex-end; }
.sw-brk { font-size:9px; color:#c9cdd2; letter-spacing:0.05em; width:64px; text-align:right; padding-bottom:20px; margin-right:6px; }
.swgrp { gap:5px; margin-left:auto; }
.ctrl-row { justify-content:center; gap:10px; flex-wrap:wrap; align-items:flex-start; padding:6px 0; position:relative; }
.ctrl-gap { width:16px; }

.toggle-col { display:flex; flex-direction:column; align-items:center; width:22px; }
.toggle-label { font-size:7px; color:#c9cdd2; letter-spacing:0.02em; white-space:nowrap; height:9px; line-height:9px; }
.toggle-top { margin-bottom:3px; }
.toggle-bot { margin-top:3px; }
.toggle-track {
  width:12px; height:26px; border-radius:6px;
  background:linear-gradient(180deg,#1a1c1e,#2a2c2e);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.08);
  position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.toggle-handle {
  width:9px; height:14px; border-radius:3px;
  background:linear-gradient(180deg,#e6e8ea,#a8acb0 60%,#6f7377);
  box-shadow:0 1px 2px rgba(0,0,0,0.6);
  transition: transform .12s cubic-bezier(.4,1.6,.5,1);
  transform-origin:center;
}
.th-up { transform: translateY(-5px); }
.th-down { transform: translateY(5px); }
.th-mom:active { transform: translateY(-5px) rotate(-4deg); }
.toggle-track:active .toggle-handle { filter:brightness(1.2); }

/* nameplate */
.nameplate {
  margin-top:12px;
  background:linear-gradient(180deg,#d6dade,#a9aeb2 55%,#8b9195);
  border-radius:3px; padding:7px 14px;
  display:flex; align-items:center; gap:14px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.4);
}
.mits {
  font-family:'Oswald',sans-serif; font-weight:700; font-style:italic;
  color:#1a5a97; font-size:15px; letter-spacing:0.02em;
  border:2px solid #1a5a97; padding:1px 5px; border-radius:2px;
}
.altair-name {
  font-family:'Oswald',sans-serif; font-weight:700; font-style:italic;
  color:#20242a; font-size:clamp(16px,3vw,26px); letter-spacing:0.06em;
}

/* ===== TOOLBAR ===== */
.toolbar {
  margin-top:16px; display:flex; flex-wrap:wrap; gap:14px; align-items:stretch;
  background:var(--slate-2); border:1px solid #2c333b; border-radius:8px; padding:12px;
}
.dropzone {
  flex:1 1 240px; min-height:64px; border:2px dashed #3a4551; border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s; padding:8px; text-align:center;
}
.dropzone:hover, .drop-active { border-color:var(--crt-green); background:rgba(51,255,119,0.06); }
.dz-title { font-weight:600; color:var(--crt-green); font-size:13px; letter-spacing:0.04em; }
.dz-sub { font-size:11px; color:#7f8894; margin-top:4px; word-break:break-word; }
.tb-group { display:flex; flex-direction:column; gap:5px; justify-content:center; min-width:170px; }
.tb-lbl { font-size:10px; color:#8b95a0; letter-spacing:0.06em; }
.tb-select, .jump-in {
  background:#0e1115; color:#cdd3d9; border:1px solid #333c45; border-radius:4px;
  padding:6px 8px; font-family:inherit; font-size:12px;
}
.tb-range { width:100%; accent-color:var(--amber); }
.speed-fixed {
  font-size:13px; color:var(--amber); font-weight:600; letter-spacing:0.03em;
  padding:6px 8px; background:#0e1115; border:1px solid #333c45; border-radius:4px;
}
.preset-row { display:flex; gap:5px; }
.chip {
  background:#242b33; border:1px solid #3a4551; color:#b7c0c9; border-radius:4px;
  padding:3px 8px; font-size:10px; cursor:pointer; font-family:inherit;
}
.chip:hover { border-color:var(--amber); color:var(--amber); }
.toggles { gap:4px; }
.chk { font-size:11px; color:#9aa4ae; display:flex; align-items:center; gap:5px; cursor:pointer; }

/* ===== CP/M TEST SUITE BAR ===== */
.cpmbar {
  margin-top:12px; background:linear-gradient(180deg,#141a12,#0f130d);
  border:1px solid #2a3a24; border-radius:8px; padding:12px;
}
.cpm-head {
  font-size:10px; letter-spacing:0.1em; color:var(--crt-green);
  text-transform:uppercase; margin-bottom:10px;
  text-shadow:0 0 6px rgba(51,255,119,0.4);
}
.cpm-row { display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
.cpm-row .tb-select { min-width:220px; flex:0 0 auto; }
.cpm-drop {
  flex:1 1 220px; min-width:180px;
  border:2px dashed #2f5c3f; border-radius:6px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:11px; color:#6fae86; padding:6px 10px; cursor:pointer; transition:.15s;
}
.cpm-drop:hover, .cpm-drop.drop-active { border-color:var(--crt-green); background:rgba(51,255,119,0.08); color:var(--crt-green); }
.cpm-status { margin-top:9px; font-size:11px; color:#8fb39c; letter-spacing:0.02em; word-break:break-word; }

/* quick bar */
.qbar { display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.qbtn {
  background:#20262d; border:1px solid #38424c; color:#c9d0d7; border-radius:5px;
  padding:8px 14px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer;
  letter-spacing:0.04em; transition:.12s;
}
.qbtn:hover { border-color:var(--crt-green); color:var(--crt-green); }
.qbtn-active { background:rgba(51,255,119,0.12); border-color:var(--crt-green); color:var(--crt-green); }
.qstat { margin-left:auto; font-size:12px; color:var(--amber); letter-spacing:0.06em; }

/* ===== MAIN GRID ===== */
.main-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:16px; margin-top:16px; }
@media (max-width:820px){ .main-grid{ grid-template-columns:1fr; } .panel-row{min-width:700px;} }

/* CRT */
.crt-wrap { display:flex; flex-direction:column; }
.crt-title { font-size:10px; color:#5f6b76; letter-spacing:0.1em; margin-bottom:6px; }
.crt {
  background:radial-gradient(ellipse at center, #071c0e 0%, #030a05 90%);
  border:2px solid #1a2620; border-radius:10px;
  color:var(--crt-green); font-family:'VT323', monospace; font-size:20px; line-height:1.15;
  padding:16px; height:360px; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  position:relative; outline:none;
  text-shadow:0 0 5px rgba(51,255,119,0.7);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.7), inset 0 0 12px rgba(51,255,119,0.15);
}
.crt:not(.crt-flat)::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:8px;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 3px);
}
.crt:not(.crt-flat)::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:8px;
  box-shadow: inset 0 0 70px rgba(0,0,0,0.85);
}
.crt:focus { border-color:#2d5c3f; }
.crt-cursor { animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0;} }
.crt-hint { font-size:10px; color:#5f6b76; margin-top:6px; }

/* DEBUG */
.dbg { display:flex; flex-direction:column; gap:12px; }
.dbg-card { background:var(--slate); border:1px solid #232a31; border-radius:8px; padding:12px; }
.dbg-head {
  font-size:11px; letter-spacing:0.12em; color:var(--amber); margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; text-transform:uppercase;
}
.reg-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.reg { background:#0d1014; border:1px solid #232a31; border-radius:4px; padding:5px 4px; text-align:center; }
.rn { display:block; font-size:9px; color:#6b7681; letter-spacing:0.05em; }
.rv { display:block; font-size:15px; font-weight:600; color:#dfe5eb; margin-top:2px; }
.rv-pc { color:var(--crt-green); }
.pair-row { font-size:11px; color:#8b95a0; margin-top:8px; letter-spacing:0.03em; }
.flag-row { display:flex; gap:6px; margin-top:10px; }
.flagchip {
  width:26px; height:24px; display:flex; align-items:center; justify-content:center;
  border:1px solid #2c333b; border-radius:4px; font-size:12px; font-weight:600; color:#4a545e;
  background:#0d1014;
}
.fc-on { color:#0a0f0c; background:var(--crt-green); border-color:var(--crt-green); box-shadow:0 0 8px rgba(51,255,119,0.5); }
.counters { font-size:10px; color:#5f6b76; margin-top:10px; }

.dis { font-size:12px; line-height:1.5; }
.dis-line { display:flex; gap:12px; padding:1px 4px; border-radius:3px; }
.dis-pc { background:rgba(232,184,75,0.12); }
.dis-addr { color:#5f6b76; min-width:42px; }
.dis-mn { font-weight:500; }

.jump-wrap { display:flex; gap:4px; }
.jump-in { width:56px; padding:3px 6px; font-size:11px; text-transform:uppercase; }
.jump-btn { background:#242b33; border:1px solid #3a4551; color:var(--amber); border-radius:4px; padding:2px 8px; font-size:10px; cursor:pointer; font-family:inherit; }

.hexdump { font-size:11px; line-height:1.5; overflow-x:auto; }
.hex-line { display:flex; gap:10px; white-space:nowrap; }
.hex-a { color:#e8b84b; }
.hex-b { display:flex; gap:4px; }
.hb { color:#9aa4ae; }
.hb-cur { color:#0a0f0c; background:var(--crt-green); border-radius:2px; padding:0 1px; }
.hb-pc { color:var(--amber); }
.hex-ascii { color:#5f6b76; letter-spacing:1px; }

.footer { text-align:center; margin-top:28px; font-size:12px; color:#5f6b76; }
.footer a { color:var(--crt-green); text-decoration:none; border-bottom:1px dotted; }
.footer a:hover { color:#7dffab; }
</parameter>
</invoke>