:root{
  --void:#070b16; --deep:#0d1530; --armor:#16255c; --edge:#2f4fa8;
  --beam:#58c8ff; --hp:#4ef07a; --gold:#ffd23c; --alert:#ff3b4e;
  --ink:#dfe8ff; --dim:#7d8fc4;
  --px:"Silkscreen","Courier New",monospace;
  --ui:"Pixelify Sans","Trebuchet MS",sans-serif;
  --num:"VT323","Courier New",monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--void); color:var(--ink); font-family:var(--ui); font-size:15px;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%, #14224f 0%, var(--void) 70%);
  min-height:100vh;
}
img,canvas{image-rendering:pixelated}
.bevel{box-shadow:inset -3px -3px 0 rgba(0,0,0,.5), inset 3px 3px 0 rgba(255,255,255,.10)}
.wrap{max-width:1120px; margin:0 auto; padding-block:18px; padding-left:16px; padding-right:16px}

/* ---------- HUD ---------- */
.hud{border:3px solid var(--edge); background:linear-gradient(180deg,#1a2c66 0%,#111c42 100%)}
.hud-top{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:12px 14px}
.brand{display:flex; gap:12px; align-items:center; min-width:0}
.brand h1{font-family:var(--px); font-weight:700; font-size:19px; margin:0; line-height:1.25; letter-spacing:.5px;
  color:#eaf4ff; text-shadow:0 2px 0 var(--edge), 0 4px 0 #081131}
.brand p{margin:2px 0 0; font-family:var(--px); font-size:9px; letter-spacing:2px; color:var(--beam)}
.spacer{flex:1 1 40px}
select,.btn{font-family:var(--px); font-size:10px; letter-spacing:.5px; cursor:pointer;
  color:var(--ink); background:#1b2d66; border:2px solid var(--edge); padding:9px 12px; border-radius:0}
.btn:hover{background:#27408f; border-color:var(--beam)}
.btn:active{transform:translateY(2px)}
.btn[data-kind=go]{background:#1b6fd8; border-color:var(--beam); color:#fff}
.btn[data-kind=go]:hover{background:var(--beam); color:#04122b}
.btn[data-kind=warn]{background:#3a1230; border-color:#7a2a44; color:#ffb3c0}
.btn[data-kind=warn]:hover{border-color:var(--alert); color:#fff; background:#6b1a2c}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}
:focus-visible{outline:3px solid var(--beam); outline-offset:2px}

.hud-bot{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:10px 14px; border-top:3px solid var(--edge); background:#0b1436}
.file{display:flex; gap:8px; align-items:center; min-width:0; flex:1 1 220px}
.file-name{font-family:var(--num); font-size:22px; line-height:1; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gauge{display:flex; gap:10px; align-items:center; flex:none}
.gauge-l{font-family:var(--px); font-size:9px; color:var(--dim); letter-spacing:1px}
.bars{display:flex; gap:2px; padding:3px; background:#04081c; border:2px solid var(--edge)}
.bars i{width:7px; height:16px; background:#16204a; display:block}
.bars i.on{background:var(--hp); box-shadow:inset 0 -3px 0 rgba(0,0,0,.35), 0 0 6px rgba(78,240,122,.55)}
.pct{font-family:var(--num); font-size:26px; line-height:1; color:var(--hp); min-width:62px; text-align:right;
  font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.body{display:grid; grid-template-columns:190px 1fr; gap:14px; margin-top:14px; align-items:start}
.rail{display:flex; flex-direction:column; gap:6px; position:sticky; top:14px}
.rail button{font-family:var(--px); font-size:10px; text-align:left; letter-spacing:.5px; cursor:pointer;
  color:var(--dim); background:#0e1839; border:2px solid #22336e; padding:11px 10px;
  display:flex; justify-content:space-between; gap:8px; align-items:center}
.rail button:hover{color:var(--ink); border-color:var(--edge)}
.rail button[aria-current=true]{color:#04122b; background:var(--beam); border-color:#bde9ff;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.25)}
.rail .cnt{font-family:var(--num); font-size:17px; opacity:.85}
.panel{border:3px solid var(--edge); background:linear-gradient(180deg,#0f1a3f,#0a1230); min-height:300px}

.block+.block{border-top:3px solid #1d2c62}
.block h2{margin:0; font-family:var(--px); font-size:11px; letter-spacing:1.5px; color:var(--beam);
  padding:11px 14px; background:#132254; border-bottom:2px solid #1d2c62}
.block .inner{padding:14px}

/* ---------- tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:8px}
.tile{--el:var(--edge); cursor:pointer; text-align:left; font-family:var(--ui);
  background:#0b1330; border:2px solid #24356f; border-left:8px solid var(--el);
  padding:10px 10px 9px; display:flex; flex-direction:column; gap:6px; color:var(--dim)}
.tile:hover{border-color:var(--beam); border-left-color:var(--el); background:#14203f}
.tile .n{font-family:var(--px); font-size:10px; line-height:1.35; color:var(--ink); letter-spacing:.5px}
.tile .s{font-family:var(--px); font-size:8px; letter-spacing:1px}
.tile[aria-pressed=true]{background:#102d24; border-color:#2f7a52; border-left-color:var(--el); color:var(--hp)}
.tile[aria-pressed=true] .n{color:#eafff1}
.tile[aria-pressed=true]{box-shadow:inset 0 0 0 1px rgba(78,240,122,.25)}

/* ---------- rows ---------- */
.rows{display:flex; flex-direction:column; gap:2px}
.row{display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:8px 10px; background:#0b1330; border:2px solid #1b2a5e}
.row:nth-child(even){background:#0e1738}
.row .k{font-family:var(--px); font-size:9px; letter-spacing:.5px; color:var(--ink); line-height:1.5}
.row .c{display:flex; gap:8px; align-items:center; flex:none}
input[type=number],input[type=text]{font-family:var(--num); font-size:21px; width:120px; text-align:right;
  color:var(--gold); background:#04081c; border:2px solid var(--edge); padding:2px 8px; border-radius:0;
  font-variant-numeric:tabular-nums}
input[type=text]{text-align:left; color:var(--ink); font-size:20px}
input[type=range]{width:150px; accent-color:var(--beam)}
.val{font-family:var(--num); font-size:20px; color:var(--gold); min-width:40px; text-align:right}
.sw{font-family:var(--px); font-size:9px; cursor:pointer; padding:7px 10px; min-width:70px; text-align:center;
  background:#101b42; color:var(--dim); border:2px solid #24356f}
.sw[aria-pressed=true]{background:var(--hp); color:#04210f; border-color:#9dffc2}
.na{font-family:var(--px); font-size:8px; color:var(--dim); line-height:2}
.row select{min-width:150px; padding:7px 10px}
.raw{font-family:var(--num); font-size:18px; color:var(--dim); min-width:30px; text-align:right}

/* ---------- chips ---------- */
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:6px}
.chip{font-family:var(--num); font-size:20px; aspect-ratio:1; cursor:pointer; border:2px solid #24356f;
  background:#0b1330; color:var(--dim); display:grid; place-items:center; padding:0}
.chip:hover{border-color:var(--beam)}
.chip[aria-pressed=true]{background:var(--gold); border-color:#fff0a8; color:#2b1c00; font-weight:700}
.bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.bar .note{font-family:var(--px); font-size:9px; color:var(--dim)}

.status{margin:12px 0 0; border:3px solid var(--edge); background:#0b1436; padding:10px 14px;
  font-family:var(--px); font-size:9px; line-height:1.7; letter-spacing:.5px; color:var(--beam)}
.status[data-bad=true]{border-color:var(--alert); color:#ffb3c0}
.foot{margin:14px 2px 4px; font-family:var(--px); font-size:8px; line-height:2; color:#4c5c92}
.drop{position:fixed; inset:0; display:none; place-items:center; background:rgba(4,8,28,.86); z-index:9;
  font-family:var(--px); font-size:14px; color:var(--beam)}
.drop.on{display:grid}
@media (max-width:760px){
  .body{grid-template-columns:1fr}
  .rail{flex-direction:row; overflow-x:auto; position:static; padding-bottom:4px}
  .rail button{flex:none}
  .pct{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- screen-reader-only copy ---------- */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- empty state ---------- */
.body.solo{grid-template-columns:1fr}
.empty{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:46px 14px}
.empty h2{font-family:var(--px); font-size:14px; letter-spacing:1.5px; color:var(--beam); margin:0}
.empty .hint{font-family:var(--px); font-size:9px; line-height:2; color:var(--dim); max-width:56ch; margin:0}
.empty .btn{padding:14px 22px; font-size:12px}
.where{display:flex; flex-direction:column; gap:6px; margin:6px 0 0; width:100%; max-width:860px}
.where .wt{font-family:var(--px); font-size:8px; letter-spacing:1px; color:var(--dim); margin:0 0 2px; text-align:left}
.where div{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:#0b1330; border:2px solid #1b2a5e; padding:8px 10px}
.where b{font-family:var(--px); font-size:8px; color:var(--gold); letter-spacing:1px; flex:none}
.where code{font-family:var(--num); font-size:15px; color:var(--ink); word-break:break-all; text-align:right}