:root {
  --zx-black: #0a0a12;
  --zx-navy: #10101f;
  --zx-blue: #0000d7;
  --zx-red: #d70000;
  --zx-magenta: #d700d7;
  --zx-green: #00d700;
  --zx-cyan: #00d7d7;
  --zx-yellow: #d7d700;
  --zx-white: #f0f0f0;
  --bright-yellow: #fff44f;
  --panel: #14141f;
  --border: #2a2a3d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #1a1a2e 0%, var(--zx-black) 70%),
    var(--zx-black);
  color: var(--zx-white);
  font-family: 'IBM Plex Mono', monospace;
  min-height: 100vh;
}

.app-root {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 40px;
  transition: box-shadow .3s;
}

/* rainbow loading flash */
@keyframes borderflash {
  0% { box-shadow: 0 0 0 8px var(--zx-red); }
  25% { box-shadow: 0 0 0 8px var(--zx-yellow); }
  50% { box-shadow: 0 0 0 8px var(--zx-cyan); }
  75% { box-shadow: 0 0 0 8px var(--zx-magenta); }
  100% { box-shadow: 0 0 0 8px var(--zx-green); }
}
.loading-flash { animation: borderflash .25s linear infinite; }

/* ============================================================
   ZX Spectrum LOADING BORDER (canvas painted around the app)
   ============================================================ */
.tape-border-frame {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.tape-border-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* The centre "hole" that keeps the app readable is now punched directly on
     the canvas (see TapeBorder.draw -> clearRect). We no longer use a CSS
     mask-composite here: it was flaky across engines and frequently collapsed
     the loading border down to a single visible line. The canvas paints the
     full four-sided striped frame itself. */
  image-rendering: pixelated;
  filter: saturate(1.3) brightness(1.05);
}
.raster-hud {
  position: fixed;
  left: 50%;
  top: clamp(4px, 1.4vw, 14px);
  transform: translateX(-50%);
  z-index: 51;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(6, 6, 14, .85);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--bright-yellow);
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(0,0,0,.6);
  pointer-events: none;
  white-space: nowrap;
}
.raster-line-count { color: var(--zx-cyan); }
.raster-lamp {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px currentColor;
  animation: raster-lamp-blink .5s steps(2) infinite;
}
.raster-search { background: #d02020; color: #d02020; }
.raster-data   { background: #e8e820; color: #e8e820; }
.raster-sync   { background: #20d0d0; color: #20d0d0; }
.raster-gap    { background: #444;    color: #444; }
@keyframes raster-lamp-blink { 50% { opacity: .35; } }

@media (max-width: 560px) {
  .raster-hud { font-size: .6rem; gap: 6px; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .raster-lamp { animation: none; }
}

/* ============================================================
   WHOLE-WEBSITE CRT MONITOR EFFECT
   ------------------------------------------------------------
   A fixed, full-viewport overlay that turns the ENTIRE page into
   a glowing cathode-ray tube: fine scanlines, an RGB aperture-grille
   phosphor mask, a slow rolling refresh bar, curved-glass reflection,
   a heavy vignette, and a faint whole-tube flicker. pointer-events are
   disabled so it never eats clicks. Layered with mix-blend for punch.
   ============================================================ */
body {
  overflow-x: hidden;
}
/* The page content itself gets a gentle barrel-curve + phosphor glow */
#root {
  position: relative;
  z-index: 0;
  animation: crt-power-on 1.1s ease-out both;
  text-shadow: 0 0 1px rgba(180, 255, 200, .18);
}
@keyframes crt-power-on {
  0%   { filter: brightness(4) blur(3px); transform: scaleY(.004); opacity: 0; }
  35%  { filter: brightness(2.2) blur(1px); transform: scaleY(1.4); opacity: 1; }
  60%  { transform: scaleY(.96); }
  100% { filter: brightness(1) blur(0); transform: scaleY(1); opacity: 1; }
}

.global-crt {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  /* screen curvature — a soft rounded frame around the whole tube */
  border-radius: 22px;
  box-shadow:
    inset 0 0 120px 40px rgba(0, 0, 0, .55),
    inset 0 0 30px 6px rgba(0, 0, 0, .35);
}
.global-crt-fx { position: absolute; inset: 0; }

/* fine horizontal scanlines across the entire page */
.global-crt-scanlines {
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0 1px,
    rgba(0, 0, 0, .22) 1px 2px,
    rgba(0, 0, 0, 0) 2px 3px);
  mix-blend-mode: multiply;
}
/* RGB aperture-grille shadow mask — vertical phosphor stripes */
.global-crt-mask {
  background: repeating-linear-gradient(to right,
    rgba(255, 0, 0, .05) 0 1px,
    rgba(0, 255, 0, .04) 1px 2px,
    rgba(0, 0, 255, .05) 2px 3px);
  mix-blend-mode: screen;
}
/* slow rolling refresh / brightness bar sweeping down the tube */
.global-crt-sweep {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .04) 45%,
    rgba(255, 255, 255, .09) 50%,
    rgba(255, 255, 255, .04) 55%,
    rgba(255, 255, 255, 0) 100%);
  height: 45%; top: -45%;
  animation: crt-global-roll 9s linear infinite;
  mix-blend-mode: screen;
}
@keyframes crt-global-roll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(322%); }
}
/* curved glass reflection + strong outer vignette */
.global-crt-glass {
  background:
    radial-gradient(ellipse at 30% 12%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(ellipse at 70% 92%, rgba(120, 160, 255, .05) 0%, rgba(0, 0, 0, 0) 45%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45) 100%);
}
/* whole-tube phosphor flicker */
.global-crt-flicker {
  background: rgba(18, 30, 22, .015);
  animation: crt-global-flick 120ms steps(2) infinite;
}
@keyframes crt-global-flick {
  0%   { opacity: .12; }
  25%  { opacity: .05; }
  50%  { opacity: .16; }
  75%  { opacity: .07; }
  100% { opacity: .12; }
}
@media (prefers-reduced-motion: reduce) {
  #root { animation: none; }
  .global-crt-sweep, .global-crt-flicker { animation: none; }
}

.rainbow-bar {
  height: 8px;
  background: linear-gradient(90deg,
    var(--zx-red) 0 20%, var(--zx-yellow) 20% 40%,
    var(--zx-green) 40% 60%, var(--zx-cyan) 60% 80%,
    var(--zx-magenta) 80% 100%);
  margin: 0 -16px;
}

/* Header */
.header { text-align: center; padding: 24px 0 12px; position: relative; }
.rainbow-accent {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 60px; opacity: .12; filter: blur(2px);
  background: repeating-linear-gradient(60deg,
    var(--zx-red) 0 12px, var(--zx-yellow) 12px 24px,
    var(--zx-green) 24px 36px, var(--zx-cyan) 36px 48px);
  pointer-events: none;
}
.title {
  font-family: 'VT323', monospace;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 400; margin: 0; line-height: 1;
  color: var(--bright-yellow);
  text-shadow: 3px 3px 0 var(--zx-magenta), 6px 6px 0 var(--zx-blue);
  letter-spacing: 1px; position: relative; z-index: 1;
}
.subtitle {
  font-family: 'VT323', monospace;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--zx-cyan); margin: 6px 0 0; position: relative; z-index: 1;
}
.cursor-block, .cursor-block.small { animation: blink 1s steps(1) infinite; color: var(--zx-green); }
.cursor-block.small { font-size: .7em; }
@keyframes blink { 50% { opacity: 0; } }

/* Grid */
.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
@media (max-width: 860px) { .main-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  display: flex; flex-direction: column;
}
.panel-head {
  font-family: 'VT323', monospace; font-size: 1.4rem;
  color: var(--zx-green); letter-spacing: 1px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 6px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}

/* fields */
.field-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.field-row label { font-size: .72rem; color: var(--zx-cyan); font-weight: 700; letter-spacing: 1px; }
.field-row label.ml { margin-left: 8px; }
.zx-input {
  background: #05050c; border: 1px solid var(--border); color: var(--bright-yellow);
  font-family: 'IBM Plex Mono', monospace; padding: 6px 8px; border-radius: 3px;
  font-size: .85rem; width: 120px;
}
.zx-input:focus { outline: none; border-color: var(--zx-cyan); }
.zx-input-num { width: 90px; }

/* ============================================================
   ACTUAL CRT SIMULATION
   A chunky plastic monitor bezel wrapping a curved, glowing tube
   with: fine scanlines, an RGB aperture-grille mask, a slow rolling
   refresh bar, curved-glass reflection + vignette, and subtle
   whole-tube flicker. Layered purely in CSS so it stays performant.
   ============================================================ */
.crt-monitor {
  position: relative; flex: 1; min-height: 300px;
  padding: 18px 18px 26px;
  border-radius: 22px 22px 16px 16px;
  background:
    linear-gradient(180deg, #3a3a42 0%, #26262c 55%, #17171b 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.12),
    inset 0 -4px 8px rgba(0,0,0,.6),
    0 10px 26px rgba(0,0,0,.55);
  border: 1px solid #0c0c10;
}
/* power LED */
.crt-led {
  position: absolute; right: 20px; bottom: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zx-green);
  box-shadow: 0 0 8px 2px var(--zx-green);
  animation: led-pulse 3s ease-in-out infinite;
}
@keyframes led-pulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* the glowing tube — curved via border-radius + inset shadow */
.crt-screen {
  position: relative; height: 100%; min-height: 280px;
  border-radius: 26px / 40px;   /* fat curvature */
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #0b0b18 0%, #050510 70%, #010106 100%);
  box-shadow:
    inset 0 0 60px 12px rgba(0,0,0,.9),
    inset 0 0 12px 2px rgba(0,215,215,.10),
    0 0 22px rgba(0,215,215,.10);
  transform: perspective(700px) rotateX(1.2deg);
}

.crt-editor {
  width: 100%; height: 100%; min-height: 280px; resize: none;
  background: transparent; color: var(--bright-yellow);
  border: none; outline: none;
  font-family: 'IBM Plex Mono', monospace; font-size: .9rem;
  line-height: 1.6; padding: 18px 16px; letter-spacing: .3px;
  position: relative; z-index: 2;
  /* phosphor glow bloom on every glyph */
  text-shadow:
    0 0 2px rgba(255,244,79,.9),
    0 0 8px rgba(255,244,79,.45),
    0 0 16px rgba(255,140,0,.20);
  caret-color: var(--zx-green);
}
.crt-editor::selection { background: rgba(0,215,215,.35); }

/* shared overlay setup */
.crt-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

/* fine horizontal scanlines */
.crt-scanlines {
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 1px, rgba(0,0,0,.28) 1px 3px);
  mix-blend-mode: multiply;
}
/* RGB aperture-grille shadow mask (vertical phosphor stripes) */
.crt-mask {
  background: repeating-linear-gradient(to right,
    rgba(255,0,0,.06) 0 1px,
    rgba(0,255,0,.06) 1px 2px,
    rgba(0,0,255,.06) 2px 3px);
  mix-blend-mode: screen; opacity: .7;
}
/* slow rolling refresh / brightness bar */
.crt-sweep {
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(120,220,255,.10) 45%,
    rgba(180,240,255,.18) 50%,
    rgba(120,220,255,.10) 55%,
    rgba(255,255,255,0) 100%);
  height: 40%; top: -40%;
  animation: crt-roll 7s linear infinite;
  mix-blend-mode: screen;
}
@keyframes crt-roll { 0% { transform: translateY(0); } 100% { transform: translateY(360%); } }
/* curved glass reflection + vignette */
.crt-glass {
  background:
    radial-gradient(ellipse at 32% 18%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  z-index: 4;
}
/* whole-tube flicker */
.crt-flicker {
  background: rgba(18,24,40,.02);
  z-index: 5;
  animation: crt-flick 110ms steps(2) infinite;
}
@keyframes crt-flick {
  0% { opacity: .10; } 25% { opacity: .04; }
  50% { opacity: .14; } 75% { opacity: .06; } 100% { opacity: .11; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-sweep, .crt-flicker, .crt-led { animation: none; }
}

/* keep the hex-panel scanline overlay working (renamed base rule) */
.scanlines {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 4px);
}
.scanlines.faint { background: repeating-linear-gradient(to bottom,
  rgba(0,0,0,0) 0 3px, rgba(0,0,0,.08) 3px 6px); }

.editor-meta {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: .72rem; color: var(--zx-cyan); opacity: .8;
}

/* examples */
.example-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.ex-label { font-size: .68rem; color: var(--zx-magenta); font-weight: 700; letter-spacing: 1px; }
.chip-btn {
  background: #1a1a2e; border: 1px solid var(--zx-magenta); color: var(--zx-white);
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem;
  padding: 4px 8px; border-radius: 3px; cursor: pointer; transition: .15s;
}
.chip-btn:hover { background: var(--zx-magenta); color: #000; }

/* output token view */
.token-view { flex: 1; overflow: auto; background: #04040a; border-radius: 4px; padding: 10px; max-height: 460px; }
.token-line { display: flex; gap: 8px; padding: 3px 0; font-size: .85rem; line-height: 1.6; border-bottom: 1px dotted #191930; }
.line-num { color: var(--zx-cyan); font-weight: 700; min-width: 44px; text-align: right; }
.line-body { flex: 1; word-break: break-word; }
.seg-token {
  background: rgba(0,215,0,.15); color: var(--zx-green); font-weight: 700;
  padding: 0 2px; border-radius: 2px; margin: 0 1px; cursor: help;
}
.seg-hex { font-size: .55em; color: var(--bright-yellow); margin-left: 1px; opacity: .7; }
.seg-number { color: var(--bright-yellow); background: rgba(215,215,0,.12); border-radius: 2px; cursor: help; padding: 0 1px; }
.seg-string { color: var(--zx-red); }
.seg-rem { color: #7a7a9a; font-style: italic; }
.seg-plain { color: var(--zx-white); }
.seg-invalid {
  color: #fff; background: var(--zx-red); font-weight: 700;
  border-radius: 2px; padding: 0 2px; margin: 0 1px;
  text-decoration: underline wavy var(--bright-yellow); cursor: help;
}

/* hex dump */
.hex-scroll { position: relative; flex: 1; overflow: auto; background: #04040a; border-radius: 4px; padding: 10px; max-height: 460px; }
.legend { display: flex; gap: 16px; font-size: .7rem; margin-bottom: 8px; color: var(--zx-white); }
.legend .sw { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; }
.hexdump { font-size: .72rem; line-height: 1.5; white-space: nowrap; }
.hexrow { display: flex; gap: 12px; }
.hexoff { color: var(--zx-cyan); }
.hexhex { }
.hexcell { display: inline-block; width: 1.4em; text-align: center; }
.hd-header { color: var(--zx-yellow); background: rgba(215,215,0,.10); }
.hd-data { color: var(--zx-green); background: rgba(0,215,0,.08); }
.hd-empty { color: transparent; }
.hexascii { color: #8a8aaa; margin-left: 8px; }

/* error box */
.error-box {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px; gap: 12px; min-height: 200px;
}
.err-code {
  font-family: 'VT323', monospace; font-size: 2rem; color: var(--zx-red);
  background: #1a0000; padding: 6px 18px; border: 2px solid var(--zx-red);
}
.err-msg { color: var(--zx-white); font-size: .9rem; max-width: 340px; }
.err-desc {
  color: #b9b9d6; font-size: .74rem; max-width: 360px; line-height: 1.5;
  font-family: 'IBM Plex Mono', monospace;
}
.err-report-ref {
  color: var(--zx-yellow); font-family: 'VT323', monospace; font-size: 1.1rem;
  letter-spacing: 1px;
}

/* authentic report-code reference table */
.report-ref {
  margin-top: 12px; border: 1px solid var(--zx-cyan); border-radius: 4px;
  background: #05050f; overflow: hidden;
}
.report-ref-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 9px 14px; background: transparent; border: none; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: .82rem;
  color: var(--zx-cyan); text-align: left;
}
.report-ref-head:hover { background: #0a0a1c; }
.report-ref-hint { color: #6a6a90; font-weight: 400; font-size: .72rem; }
.report-ref-body { max-height: 340px; overflow: auto; border-top: 1px solid #1c1c33; }
.report-table { width: 100%; border-collapse: collapse; font-family: 'IBM Plex Mono', monospace; }
.report-table th {
  position: sticky; top: 0; background: #10101f; color: var(--zx-yellow);
  font-size: .72rem; text-align: left; padding: 7px 10px; border-bottom: 1px solid #26264a;
  text-transform: uppercase; letter-spacing: 1px;
}
.report-table td { padding: 6px 10px; border-bottom: 1px solid #16162b; vertical-align: top; }
.report-table tr:hover td { background: #0c0c1e; }
.rt-code {
  font-family: 'VT323', monospace; font-size: 1.3rem; color: var(--zx-red);
  text-align: center; width: 44px;
}
.rt-name { color: var(--zx-green); font-size: .78rem; white-space: nowrap; }
.rt-desc { color: #a9a9c8; font-size: .72rem; line-height: 1.45; }

/* toggle */
.toggle-group { display: flex; gap: 4px; }
.toggle-btn {
  background: #1a1a2e; border: 1px solid var(--border); color: #8a8aaa;
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem;
  padding: 3px 10px; border-radius: 3px; cursor: pointer; letter-spacing: 1px;
}
.toggle-btn.active { background: var(--zx-cyan); color: #000; border-color: var(--zx-cyan); font-weight: 700; }

/* action bar */
.action-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; justify-content: center;
}
.key-btn {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, #4a4a52, #26262c);
  color: var(--zx-white); border: none;
  border-radius: 6px; padding: 12px 22px; font-size: .85rem;
  cursor: pointer; box-shadow: 0 4px 0 #101014, 0 6px 8px rgba(0,0,0,.5);
  transition: transform .06s, box-shadow .06s;
}
.key-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #101014; }
.dl-key {
  background: linear-gradient(180deg, #d70000, #8a0000);
  box-shadow: 0 4px 0 #400, 0 6px 8px rgba(0,0,0,.5);
  color: var(--bright-yellow); font-size: 1rem;
}
.dl-key:active { box-shadow: 0 1px 0 #400; }
.play-key {
  background: linear-gradient(180deg, #00d7d7, #007a7a);
  box-shadow: 0 4px 0 #003a3a, 0 6px 8px rgba(0,0,0,.5);
  color: #001010;
}
.play-key:active { box-shadow: 0 1px 0 #003a3a; }
.wav-key {
  background: linear-gradient(180deg, #d700d7, #7a007a);
  box-shadow: 0 4px 0 #3a003a, 0 6px 8px rgba(0,0,0,.5);
  color: var(--bright-yellow);
}
.wav-key:active { box-shadow: 0 1px 0 #3a003a; }
.key-btn.disabled, .key-btn:disabled { opacity: .4; cursor: not-allowed; }

.screech-toggle {
  display: flex; align-items: center; gap: 6px; font-size: .78rem;
  color: var(--zx-cyan); cursor: pointer;
}
.screech-toggle input { accent-color: var(--zx-magenta); }

/* status console */
.status-console {
  margin-top: 16px; background: #04040a; border: 1px solid var(--zx-green);
  border-radius: 4px; padding: 10px 14px; font-family: 'IBM Plex Mono', monospace;
  color: var(--zx-green); font-size: .85rem; display: flex; align-items: center; gap: 8px;
}
.status-console.err { border-color: var(--zx-red); color: var(--zx-red); }
.prompt-chev { font-weight: 700; }

/* footer */
.footer {
  margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border);
  font-size: .74rem; color: #7a7a9a; text-align: center; line-height: 1.7;
}
.footer em { color: var(--zx-cyan); font-style: normal; }
.footer-links { margin-top: 8px; }
.footer a { color: var(--bright-yellow); text-decoration: none; border-bottom: 1px dotted var(--bright-yellow); }
.footer a:hover { color: var(--zx-cyan); border-color: var(--zx-cyan); }

/* ===== .wav tape DECODER panel ===== */
.decoder-panel { margin-top: 22px; }
.wav-drop {
  border: 2px dashed #3a5a7a; border-radius: 8px; padding: 26px 18px;
  text-align: center; cursor: pointer; background: rgba(0, 30, 60, .25);
  transition: border-color .15s, background .15s, transform .1s;
}
.wav-drop:hover { border-color: var(--zx-cyan); background: rgba(0, 60, 90, .3); }
.wav-drop.drag-over {
  border-color: var(--bright-yellow); background: rgba(80, 70, 0, .3);
  transform: scale(1.01);
}
.wav-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wav-drop-icon { font-size: 2rem; }
.wav-drop-inner > span:nth-child(2) {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700;
  letter-spacing: 1px; color: var(--zx-cyan);
}
.wav-drop-hint {
  font-size: .74rem; color: #8fa8c0; max-width: 460px; line-height: 1.4;
}

.decode-result { margin-top: 18px; }
.decode-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.decode-meta > div {
  background: rgba(0,0,0,.35); border: 1px solid #223; border-radius: 6px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.dm-key { font-size: .62rem; letter-spacing: 2px; color: #6f8faf; text-transform: uppercase; }
.dm-val { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--bright-yellow); }

.decode-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.block-pill {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 12px; letter-spacing: .5px;
}
.block-pill.ok { background: rgba(0, 160, 0, .25); color: #6cff6c; border: 1px solid #0a0; }
.block-pill.bad { background: rgba(200, 0, 0, .25); color: #ff8080; border: 1px solid #a00; }

.decode-source {
  background: #060a14; border: 1px solid #234; border-radius: 6px;
  padding: 14px; color: var(--bright-yellow);
  font-family: 'IBM Plex Mono', monospace; font-size: .82rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
  text-shadow: 0 0 4px rgba(255, 220, 0, .35);
}
.decode-empty {
  padding: 14px; color: #8fa8c0; font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem; border: 1px dashed #345; border-radius: 6px;
}
.decode-load-btn { margin-top: 14px; }