:root {
  --fg: #fafafa; --fg-secondary: #a3a3a3; --fg-muted: #737373;
  --bg: #0a0a0a; --bg-card: #141414; --bg-elevated: #1a1a1a;
  --border: #262626; --border-subtle: #1f1f1f;
  --gold: #c9b896; --lavender: #a78bfa;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.875rem;
  padding: 1rem 1.25rem;
}
.mono { font-family: 'IBM Plex Mono', monospace; }
.dim { color: var(--fg-muted); }
.small { font-size: 0.75rem; }

header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
h1 .sub { font-size: 0.8rem; color: var(--gold); font-weight: 500; margin-left: 0.5rem; }
h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-secondary);
  margin: 1rem 0 0.4rem;
}
.transport { display: flex; align-items: center; gap: 0.5rem; }

main { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; }
aside { border-left: 1px solid var(--border-subtle); padding-left: 1.25rem; }

canvas { display: block; width: 100%; background: var(--bg-card); border-radius: 4px; }
#overview { margin-bottom: 4px; cursor: pointer; }
#wave-wrap { position: relative; }
#wave { cursor: crosshair; }
#cursor {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--gold); pointer-events: none;
}
#ruler { background: transparent; height: 16px; }
#lanes { cursor: crosshair; }

button, select, input {
  background: var(--bg-elevated); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  padding: 0.3rem 0.55rem; cursor: pointer;
}
button:hover { border-color: var(--fg-muted); }
button.on { background: var(--gold); color: #0a0a0a; border-color: var(--gold); }
button.sent { border-color: #4ade80; color: #4ade80; }
button:disabled { opacity: 0.5; cursor: wait; }
input { cursor: text; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }

#range-bar {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  background: var(--bg-elevated); border: 1px solid var(--gold);
  border-radius: 4px; padding: 0.45rem 0.6rem; margin-top: 0.5rem;
}
#range-note { flex: 1; min-width: 8rem; }
#triage-status {
  margin-top: 0.5rem; padding: 0.45rem 0.6rem;
  background: var(--bg-elevated); border: 1px solid var(--lavender);
  border-radius: 4px; color: var(--lavender);
}
.hint { margin-top: 0.5rem; font-size: 0.7rem; }

.tables { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; margin-top: 0.5rem; }
.section-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75rem;
}
.section-row .seek { border: none; background: none; color: var(--fg); padding: 0.15rem 0.2rem; }
.section-row .seek:hover { color: var(--gold); }
.tier-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem;
  padding: 0.1rem 0.4rem; border-radius: 3px; color: #0a0a0a; font-weight: 500;
}
.verdict-btns { margin-left: auto; display: flex; gap: 0.15rem; }
.verdict-btns button { padding: 0.15rem 0.4rem; }

.triage-controls { display: flex; gap: 0.4rem; }

#vocab-legend { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.vocab-chip {
  border-color: var(--chip); color: var(--chip);
  background: var(--bg-card); padding: 0.2rem 0.5rem;
}
.vocab-chip b { margin-right: 0.3rem; opacity: 0.75; }
.vocab-chip:hover { background: var(--chip); color: #0a0a0a; border-color: var(--chip); }
.vocab-chip.clear { border-color: var(--fg-muted); color: var(--fg-muted); }
.vocab-chip.clear:hover { background: var(--fg-muted); color: #0a0a0a; }
.tier-chip.unlabelled { background: var(--bg-elevated); color: var(--gold); border: 1px solid var(--gold); }
.mini-chips { margin-left: auto; display: flex; gap: 0.2rem; }
.mini-chip {
  width: 0.9rem; height: 0.9rem; padding: 0; border-radius: 2px;
  border: 1px solid transparent; opacity: 0.45;
}
.mini-chip:hover { opacity: 1; }
.mini-chip.current { opacity: 1; border-color: #fafafa; }

.param-row {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-family: 'IBM Plex Mono', monospace;
  color: var(--fg-secondary); padding: 0.12rem 0;
}
.param-row span { flex: 1; }
.param-row input { width: 5.2rem; padding: 0.15rem 0.3rem; }
.param-row input[type=checkbox] { width: auto; cursor: pointer; }
#gt-toggle.on { background: var(--gold); color: #0a0a0a; }
#gt-status { color: var(--gold); }
#gt-score { color: var(--gold); }
.param-row input.half { width: 3.6rem; }
#rerun { margin-top: 0.5rem; width: 100%; background: var(--bg-card); border-color: var(--gold); color: var(--gold); }

#log { margin-top: 0.4rem; max-height: 16rem; overflow-y: auto; }
#log div { padding: 0.15rem 0; border-bottom: 1px solid var(--border-subtle); color: var(--fg-secondary); }

p { margin: 0.35rem 0; }