:root {
  --bg: #16181d;
  --panel: #1e2229;
  --panel2: #262b34;
  --border: #343b47;
  --text: #d7dce4;
  --muted: #8b93a3;
  --accent: #4da3ff;
  --good: #3ecf6f;
  --bad: #ff5d5d;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }

header {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--border);
}
header h1 { font-size: 1.15rem; margin: 0; }
header h1 span { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.status { margin-left: auto; padding: 0.2rem 0.8rem; border-radius: 1em; font-size: 0.85rem; }
.status.idle { background: #333a47; }
.status.booting { background: #6b5310; }
.status.running { background: #14532d; color: #b8f5cd; }
.status.error { background: #5c1a1a; color: #ffc4c4; }

main {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  padding: 1.2rem; align-items: flex-start; justify-content: center;
}

/* ---------------- phone panel ---------------- */
/* padding-left reserves room for the absolutely-positioned .aux-keys-left column
   (64px keys + 10px gap) so it participates in flex layout and can never be
   clipped by the viewport when the window gets narrow; boards with a right
   column get matching padding-right via :has() further down */
.phone-panel { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-left: 74px; }

.lcd-wrap { position: relative; }
#lcd {
  width: 264px; height: 352px;          /* 2x the 132x176 LCD */
  background: #000; border: 6px solid #0a0b0e;
  border-radius: 8px; box-shadow: 0 0 0 1px var(--border), 0 8px 30px rgba(0,0,0,.5);
  image-rendering: pixelated;
  display: block;
}
.lcd-overlay {
  position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.9rem; text-align: center;
  background: rgba(0,0,0,.55); border-radius: 4px; pointer-events: none;
}
.lcd-overlay.hidden { display: none; }

/* ---------------- keypad ---------------- */
.keypad { display: flex; flex-direction: column; gap: 6px; width: 320px; }
.krow { display: grid; gap: 6px; }
.krow-soft    { grid-template-columns: 1fr 1.2fr 1fr; }
.krow-joy     { grid-template-columns: 1fr 1.2fr 1fr; }
.krow-call    { grid-template-columns: 1fr 1.2fr 1fr; }
.krow-digits  { grid-template-columns: repeat(3, 1fr); }

.keypad button, .aux-keys-left button, .aux-keys-right button {
  font: inherit; color: var(--text); background: var(--panel2);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.55rem 0.2rem; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  touch-action: none;
}
.key-sub {
  font-size: 0.6rem; color: var(--muted); letter-spacing: .08em; text-transform: lowercase;
  white-space: nowrap;
}
.key-sub svg {
  height: 0.55rem; width: auto;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* KE800 bottom-row sub-legends: stacked columns (timer over ".,", + over ␣)
   and the offset # pair (flash upper right, solid arrow lower left) */
.key-sub .sub-stack {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 0.12rem; line-height: 1;
}
.key-sub .sub-pair { position: relative; display: inline-block; width: 1.75rem; height: 1.35rem; }
.key-sub .sub-pair svg { position: absolute; margin: 0; }
.key-sub .sub-pair svg.icon-flash { top: 0; right: 0; height: 1.05rem; }
.key-sub .sub-pair svg.icon-arrow { bottom: 0; left: 0; height: 0.8rem; }
.keypad button:hover, .aux-keys-left button:hover, .aux-keys-right button:hover { border-color: var(--accent); }
.keypad button:active, .keypad button.pressed,
.aux-keys-left button:active, .aux-keys-left button.pressed,
.aux-keys-right button:active, .aux-keys-right button.pressed {
  background: var(--accent); color: #08131f; border-color: var(--accent);
}
.keypad button:active .key-sub, .keypad button.pressed .key-sub { color: #08131f; }
.key-nav { font-size: 0.8rem; }
.key-center { font-size: 1.05rem; }
.key-icon { width: 1.1rem; height: 1.1rem; display: block; fill: currentColor; }
/* stroke-drawn main-label icon (KE800 side power button) */
.key-icon-line {
  width: 1.1rem; height: 1.1rem; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.key-icon-stack { width: 1.05rem; height: auto; }
.key-end .icon-hangup { fill: #9b2d2e; }
.key-end .icon-power { fill: #d7dce4; }
/* keys whose legend is glyph + icon side by side (*, 0, #) */
.keypad .key-inline { flex-direction: row; justify-content: center; gap: 0.45rem; }
.key-inline .key-sub svg { height: 0.8rem; }
/* call/end icon colors sampled from keyboards/S75-ru.webp
   (.keypad prefix needed to beat the .keypad button color rule) */
.keypad .key-send { color: #68ba9c; }
.keypad .key-end { color: #9b2d2e; }
/* KE800: soft keys, arrows, OK, call and C glow red on the real phone
   (sampled ~rgb(250,3,18) from keyboards/LG KE800.png); must come after
   .key-send so the red wins on the call key */
.keypad .key-red { color: #ef1d24; }

/* side columns: auxiliary keys flanking the LCD, vertically centered on it */
.aux-keys-left, .aux-keys-right {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px; width: 64px;
}
/* left flank hangs off the LCD's left edge (KE800: volume rocker) */
.aux-keys-left { right: calc(100% + 10px); }
/* right-hand twin (KE800: power/camera/MP3 opposite the volume rocker) */
.aux-keys-right { left: calc(100% + 10px); }
.aux-keys-left button, .aux-keys-right button { font-size: 0.78rem; }
/* a populated right column needs matching breathing room on that side */
.phone-panel:has(#aux-keys-right:not(:empty)) { padding-right: 74px; }
/* one-glyph alternates for the aux keys — only shown by the narrow-screen
   media query at the bottom, so the side columns can shrink to one
   character wide and still flank the LCD when space runs out */
.aux-keys-left .key-short, .aux-keys-right .key-short { display: none; }

/* keyboard letter layout picker (under the keypad) */
.kbd-row { display: flex; align-items: center; gap: 0.6rem; width: 320px; }
.kbd-row label { flex: none; font-size: 0.78rem; color: var(--muted); }
.kbd-row select { flex: 1; min-width: 0; }

/* very narrow screens: the padded panel no longer fits — keep the side
   columns flanking the LCD, but shrink them to one-character keys */
@media (max-width: 420px) {
  .phone-panel { padding-left: calc(1.7rem + 4px); }
  .phone-panel:has(#aux-keys-right:not(:empty)) { padding-right: calc(1.7rem + 4px); }
  .lcd-overlay { inset: 6px 6px auto; height: 352px; }
  .aux-keys-left { width: 1.7rem; right: calc(100% + 4px); }
  .aux-keys-right { width: 1.7rem; left: calc(100% + 4px); }
  .aux-keys-left button, .aux-keys-right button { font-size: 0.7rem; padding: 0.5rem 0.1rem; }
  .aux-keys-left .key-main, .aux-keys-right .key-main { display: none; }
  .aux-keys-left .key-short, .aux-keys-right .key-short { display: block; }
}

/* ---------------- control panel ---------------- */
.ctrl-panel { flex: 1 1 380px; max-width: 560px; display: flex; flex-direction: column; gap: 1rem; }
fieldset {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 0.9rem 1rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem;
}
legend { padding: 0 0.4rem; color: var(--muted); font-size: 0.85rem; }
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
label small { color: var(--muted); font-weight: 400; }
label.checkbox-label { flex-direction: row; align-items: center; gap: 0.5rem; grid-column: 1 / -1; }
.file-label { grid-column: 1 / -1; }
.file-hint { display: block; margin-top: 0.25rem; }

input[type=text], select {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.55rem;
}
input[type=text]:focus, select:focus { outline: 1px solid var(--accent); }
input[type=file] { font-size: 0.8rem; }
input:invalid { border-color: var(--bad); }

.btn-row { grid-column: 1 / -1; display: flex; gap: 0.6rem; }
.btn-row button {
  font: inherit; font-weight: 600; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); padding: 0.5rem 1.1rem; background: var(--panel2);
  color: var(--text);
}
#btn-start { background: #14532d; border-color: #1e7a41; }
#btn-start:not(:disabled):hover { background: #1a6c3a; }
#btn-stop:not(:disabled):hover { background: var(--bad); color: #fff; }
#btn-save-flash:not(:disabled):hover { background: var(--accent); color: #08131f; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.serial-box { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.serial-box summary { padding: 0.5rem 0.9rem; cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.serial-box summary small { opacity: .7; }
#serial {
  margin: 0; padding: 0.4rem 0.9rem 0.8rem; max-height: 220px; overflow-y: auto;
  font: 0.72rem/1.35 ui-monospace, "Cascadia Mono", monospace;
  color: #9fe3a8; white-space: pre-wrap; word-break: break-all;
}
.hint { color: var(--muted); font-size: 0.78rem; line-height: 1.5; }

.hud {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0;
  padding: 0.3rem 0.6rem; background: rgba(0, 0, 0, 0.8); color: #9fe3a8;
  font: 0.7rem/1.35 ui-monospace, "Cascadia Mono", monospace;
  white-space: pre-wrap; word-break: break-all;
}