:root {
  --bg: #05070c;
  --chassis1: #131a23; --chassis2: #0a0f15;
  --line: #1e2c3a;
  --cyan: #00ffc8; --cyan-dim: #008c6e;
  --amber: #ffb020; --blue: #408cff; --red: #ff6048;
  --ink: #d7e6e0; --ink-dim: #5d7a72;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(900px 620px at 50% -8%, #0c1420 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 26px 14px 56px;
}

/* ---------- device chassis (always single column) ---------- */
.device {
  width: min(94vw, 470px);
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 16px 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--chassis1), var(--chassis2) 55%);
  border: 1px solid var(--line);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, .6),
    0 4px 14px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -10px 30px rgba(0, 0, 0, .35);
  position: relative;
}
.screw {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c3d4d, #101820 70%);
  box-shadow: inset 0 0 2px #000, 0 1px 0 rgba(255, 255, 255, .05);
}
.screw::after {
  content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 50%;
  height: 1px; background: #060a0e; transform: rotate(38deg);
}
.s1 { top: 9px; left: 12px; } .s2 { top: 9px; right: 12px; }
.s3 { bottom: 9px; left: 12px; } .s4 { bottom: 9px; right: 12px; }

/* ---------- face screen ---------- */
.screen {
  background: #060a10;
  border-radius: 20px; padding: 10px;
  border: 1px solid #16222e;
  box-shadow: inset 0 3px 16px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .04);
  display: flex; justify-content: center;
}
#face { width: 100%; max-width: 420px; height: auto; border-radius: 12px; display: block; }

/* ---------- LED panel (canvas, dot-matrix) ---------- */
.led-panel {
  width: 100%; height: auto; display: block;
  background: #04070b;
  border-radius: 16px;
  border: 1px solid #10202a;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .8), inset 0 0 34px rgba(0, 255, 200, .04);
}

/* ---------- keycaps ---------- */
.keyfield { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.key {
  appearance: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; font: inherit;
  min-height: 88px; padding: 12px 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #16211c, #0b110d);
  border: 1px solid #23493d;
  box-shadow:
    0 6px 0 #050b08,
    0 10px 22px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -8px 14px rgba(0, 0, 0, .35);
  transition: transform .07s ease, box-shadow .07s ease, border-color .18s ease, opacity .2s;
}
.klbl { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.klbl canvas { display: block; max-width: 100%; height: auto; }
.key:active, .key.holding {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 #050b08,
    0 4px 10px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 -4px 10px rgba(0, 0, 0, .3);
}
.key:disabled { opacity: .35; cursor: default; }
.key:disabled:active { transform: none; }

.key-zh.holding, .key-zh:active {
  border-color: var(--cyan);
  box-shadow: 0 1px 0 #050b08, 0 0 26px rgba(0, 255, 200, .28), 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.key-ar { background: linear-gradient(180deg, #141d2a, #0b0f16); border-color: #21406a; }
.key-ar.holding, .key-ar:active {
  border-color: var(--blue);
  box-shadow: 0 1px 0 #050a10, 0 0 26px rgba(64, 140, 255, .3), 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.keyfield.aux .key { min-height: 58px; border-radius: 15px; }
.key-stop { background: linear-gradient(180deg, #241416, #120a0b); border-color: #4c2020; }
.key-stop:active {
  border-color: var(--red);
  box-shadow: 0 1px 0 #0a0505, 0 0 20px rgba(255, 96, 72, .25), 0 4px 10px rgba(0, 0, 0, .5);
}
.key-tok { background: linear-gradient(180deg, #241e12, #12100a); border-color: #4c3d1c; }
.key-tok:active {
  border-color: var(--amber);
  box-shadow: 0 1px 0 #0a0805, 0 0 20px rgba(255, 176, 32, .25), 0 4px 10px rgba(0, 0, 0, .5);
}

.keyfield.clip .key { min-height: 48px; border-radius: 13px; }
.key-replay { background: linear-gradient(180deg, #10222b, #0a1318); border-color: #1d4453; }
.key-replay:not(:disabled):active {
  border-color: #2fc8e8;
  box-shadow: 0 1px 0 #04100e, 0 0 20px rgba(47, 200, 232, .22), 0 4px 10px rgba(0, 0, 0, .5);
}
.key-dl { background: linear-gradient(180deg, #1b2413, #0e120a); border-color: #3c4d1d; }
.key-dl:not(:disabled):active {
  border-color: #a8e820;
  box-shadow: 0 1px 0 #0a0e04, 0 0 20px rgba(168, 232, 32, .22), 0 4px 10px rgba(0, 0, 0, .5);
}

/* ---------- speaker grille + status ---------- */
.grille {
  height: 12px; margin: 2px 8px 0;
  background-image: radial-gradient(circle, #22303d 1.1px, transparent 1.3px);
  background-size: 9px 9px; background-position: center;
  opacity: .8;
}
.statusline { min-height: 30px; display: flex; align-items: center; justify-content: center; }
.statusline canvas { max-width: 100%; height: auto; }

/* ---------- token dialog ---------- */
.token-dlg {
  background: linear-gradient(180deg, #121922, #0a0f15);
  color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px 14px; width: min(92vw, 340px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.token-dlg::backdrop { background: rgba(2, 6, 10, .72); }
.token-dlg h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: 3px; color: var(--cyan); }
.token-dlg input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13px;
  background: #060a0f; color: var(--ink);
  border: 1px solid #1d4a3e; border-radius: 8px; outline: none;
}
.token-dlg input:focus { border-color: var(--cyan-dim); }
.dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dlg-btns button {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px;
  padding: 8px 16px; border-radius: 8px;
  background: transparent; color: var(--ink-dim); border: 1px solid #1d4a3e;
}
.dlg-btns button.primary { color: var(--cyan); }
.dlg-btns button:hover { color: var(--ink); }
.dlg-hint { margin: 12px 0 0; font-size: 10px; color: var(--ink-dim); line-height: 1.5; }
.dlg-hint code { color: var(--cyan-dim); }

/* ---------- narrow phones ---------- */
@media (max-width: 380px) {
  body { padding: 14px 8px 40px; }
  .device { gap: 12px; padding: 14px 12px 16px; border-radius: 24px; }
  .keyfield { gap: 10px; }
  .key { min-height: 80px; }
}