:root {
  --bg: #0b0e14; --panel: #11151f; --edge: #1d2330;
  --fg: #c9d1d9; --dim: #7d8590; --accent: #58a6ff;
  --ok: #3fb950; --bad: #f85149; --warn: #d29922;
  --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font-family: var(--mono); font-size: 13px; }
header { display: flex; justify-content: space-between; align-items: center;
         padding: 10px 16px; border-bottom: 1px solid var(--edge); }
h1 { margin: 0; font-size: 15px; letter-spacing: 2px; }
h1 .cursor { color: var(--accent); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.status { color: var(--dim); }
.status.live { color: var(--ok); }
main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 10px; }
.pane { background: var(--panel); border: 1px solid var(--edge);
        border-radius: 6px; display: flex; flex-direction: column; min-height: 70vh; }
.pane-head { display: flex; align-items: center; gap: 8px;
             padding: 8px 10px; border-bottom: 1px solid var(--edge); }
.pane-head.sub { border-top: 1px solid var(--edge); }
.pane-head h2 { margin: 0; font-size: 11px; text-transform: uppercase;
                letter-spacing: 1.5px; color: var(--dim); flex: 1; }
.pill { background: var(--edge); border-radius: 8px; padding: 1px 8px;
        font-size: 11px; color: var(--dim); }
.pill.ok { color: var(--ok); } .pill.bad { color: var(--bad); }
textarea, pre.diff { flex: 1; background: transparent; color: var(--fg);
  border: 0; resize: none; padding: 10px; font-family: var(--mono);
  font-size: 12.5px; line-height: 1.55; outline: none; white-space: pre; }
textarea { width: 100%; }
button { background: var(--edge); color: var(--fg); border: 1px solid var(--edge);
         border-radius: 4px; padding: 4px 12px; cursor: pointer; font-family: var(--mono); }
button:hover { border-color: var(--accent); color: var(--accent); }
#solve-btn { color: var(--accent); border-color: var(--accent); }
#solve-btn:disabled { opacity: .4; }
.diff .add { color: var(--ok); } .diff .del { color: var(--bad); }
.diff .meta { color: var(--dim); }
.violations, .history { list-style: none; margin: 0; padding: 8px 10px;
  max-height: 140px; overflow: auto; flex: 0 0 auto; }
.violations li { padding: 2px 0; color: var(--bad); }
.violations li.soft { color: var(--warn); }
.violations li.none { color: var(--ok); }
.history li { padding: 2px 0; color: var(--dim); cursor: pointer; }
.history li:hover { color: var(--accent); }
canvas { width: 100%; height: 220px; display: block; }
footer { padding: 8px 16px; color: var(--dim); border-top: 1px solid var(--edge); }
select { background: var(--panel); color: var(--fg); border: 1px solid var(--edge);
         border-radius: 4px; font-family: var(--mono); }