:root {
  --bg: #14161a;
  --panel: #1d2026;
  --line: #2e333c;
  --fg: #e8e8ea;
  --dim: #9aa0aa;
  --acc: #e0473a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 13px/1.45 -apple-system, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
#app { display: flex; height: 100vh; }

#side { width: 268px; flex: 0 0 268px; background: var(--panel);
  border-right: 1px solid var(--line); padding: 10px; overflow-y: auto; }
#side h1 { font-size: 15px; margin: 2px 0 10px; letter-spacing: .5px; }
.lbl { display: block; margin: 10px 0 4px; color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px; }
select, button { background: #262a31; color: var(--fg); border: 1px solid var(--line);
  border-radius: 5px; padding: 5px 8px; font: inherit; cursor: pointer; }
select { width: 100%; }
button:hover { border-color: #4a5160; }
button:active { transform: translateY(1px); }
.row { display: flex; gap: 6px; margin: 8px 0; }
.row.wrap { flex-wrap: wrap; }
.row button { flex: 1 1 auto; }
.tog.on { background: var(--acc); border-color: var(--acc); color: #fff; }

.cls { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cls button { text-align: left; padding: 6px 7px; line-height: 1.25; }
.cls button b { display: block; font-size: 10px; color: var(--dim); font-weight: 400; }
.cls button.on { color: #fff; }
.cls button.on b { color: rgba(255,255,255,.75); }
.cls .k0 { border-left: 4px solid #dc1e1e; }
.cls .k1 { border-left: 4px solid #ff8c00; }
.cls .k2 { border-left: 4px solid #8c8c8c; }
.cls .k3 { border-left: 4px solid #3c78dc; }
.cls .k4 { border-left: 4px solid #14a03c; }

.stats { margin: 8px 0; padding: 7px 9px; background: #23262d; border-radius: 5px;
  color: var(--dim); font-size: 12px; }
.stats b { color: var(--fg); font-weight: 600; }
.hint { color: var(--dim); font-size: 11.5px; margin: 8px 0; }
.hint a { color: #7fb3ff; }
.warn { background: #4a2a12; border: 1px solid #7a4a1a; color: #ffcf9a;
  padding: 6px 8px; border-radius: 5px; font-size: 11.5px; }

#main { flex: 1 1 auto; position: relative; min-width: 0; }
#errBanner { position: absolute; left: 0; right: 0; top: 24px; z-index: 5;
  background: #4a1414; border-bottom: 1px solid #7a2a2a; color: #ffb3b3;
  padding: 8px 12px; font-size: 12.5px; }
#errBanner[hidden] { display: none; }
#cv { display: block; width: 100%; height: 100%; cursor: crosshair; background: #0b0c0e; }
#hud { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex;
  align-items: center; gap: 10px; padding: 0 10px; background: rgba(0,0,0,.55);
  font: 11.5px/1 ui-monospace, Menlo, Consolas, monospace; pointer-events: none; }
#hudL { white-space: pre; }
#hudR { margin-left: auto; white-space: pre; color: var(--dim); }
#bar { width: 130px; height: 7px; border: 1px solid #555; background: #222; }
#barI { display: block; height: 100%; width: 0; background: #14a03c; }