:root{
  --bg:#0b0b11; --ink:#f2f3f7; --muted:#9aa0a8; --line:#2a2a33;
  --ok:#36e08a; --warn:#ffb86b; --bad:#ff4d4d; --accent:#ff004d;
}
*{box-sizing:border-box}
html,body{
  height:100%; margin:0;
  background:var(--bg); color:var(--ink);
  font:14px/1.35 "Orbitron",Segoe UI,Helvetica,Arial,sans-serif;
  overflow:hidden;
}
#ui{
  position:fixed; inset:0 0 auto 0;
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:linear-gradient(180deg, rgba(10,10,14,.85), rgba(10,10,14,.35));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.badge{border:1px solid var(--line); background:#121217; border-radius:0; padding:6px 10px; color:#f2f3f7}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#hudRight{margin-left:auto; display:flex; gap:8px; align-items:center}
button{background:#16141d; color:var(--ink); border:1px solid #2a2a33; border-radius:0; padding:8px 12px; cursor:pointer}
#canvas{display:block; width:100vw; height:100vh}
#toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px;
  background:#14131a; border:1px solid var(--line); padding:8px 12px; border-radius:0; display:none
}
#notif{
  position:fixed; top:60px; left:50%; transform:translateX(-50%);
  background:#16141d; border:1px solid var(--line); padding:6px 10px; border-radius:0; display:none
}
.bar{width:140px; height:10px; border-radius:0; background:#1a1822; border:1px solid var(--line); overflow:hidden}
.fill{height:100%}

/* bottom bars */
#bottomBars{
  position:fixed; left:50%; bottom:12px; transform:translateX(-50%);
  display:grid; gap:6px; width:min(560px, 90vw);
  background:rgba(12, 12, 18, 0.72); border:1px solid #2a2a33; border-radius:0; padding:8px 10px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:5;
}
.bb-row{ display:grid; grid-template-columns:72px 1fr; align-items:center; gap:8px }
.bb-label{ color:#f2f3f7; font:12px/1.2 system-ui }
.bb-bar{ height:12px; border:1px solid #3b303a; background:#121217; border-radius:0; overflow:hidden }
.bb-fill{ height:100%; background:linear-gradient(90deg,#ff004d,#ff335f); width:0% }

/* initial widths that used to be inline */
#engFill { width:100%; background:linear-gradient(90deg,#ff004d,#ff335f); }
#shFill { width:100%; background:linear-gradient(90deg,#ff335f,#ff6b6b); }

/* Force Orbitron across the UI (warp computer uses inline monospace and remains untouched) */
button, input, select, textarea, .badge, #ui, #bottomBars, .bb-label, #toast, #notif {
  font-family: "Orbitron", Segoe UI, Helvetica, Arial, sans-serif;
}