:root {
  --bg: #ffffff;
  --fg: #1a1d21;
  --muted: #5c6570;
  --panel: #f5f6f8;
  --border: #d9dde3;
  --ok: #1a7f37;
  --ok-bg: #e6f4ea;
  --fix: #9a6700;
  --fix-bg: #fff8e5;
  --rework: #cf222e;
  --rework-bg: #ffebe9;
  --warn: #8250df;
  --warn-bg: #f3ecff;
  --accent: #0969da;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --fg: #e6edf3; --muted: #8d96a0;
    --panel: #161b22; --border: #30363d;
    --ok: #3fb950; --ok-bg: #12261e;
    --fix: #d29922; --fix-bg: #272115;
    --rework: #f85149; --rework-bg: #2d1618;
    --warn: #bc8cff; --warn-bg: #211a2e;
    --accent: #58a6ff;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0 auto; max-width: 1100px; padding: 1.5rem;
  font: 15px/1.55 system-ui, sans-serif;
  background: var(--bg); color: var(--fg);
}
a { color: var(--accent); }
code, pre, textarea { font-family: var(--mono); }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.tagline { margin: 0 0 .25rem; color: var(--muted); max-width: 70ch; }
.privacy { font-size: .85rem; color: var(--muted); margin: 0 0 1rem; }

.input-panel { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.input-toolbar { display: flex; gap: .5rem; align-items: center; }
textarea {
  width: 100%; min-height: 16rem; resize: vertical;
  padding: .75rem; font-size: .85rem;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
}
button {
  padding: .45rem .9rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg);
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; align-self: flex-start; }
.kind-badge { font-size: .8rem; color: var(--muted); }

.summary { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip {
  padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--border);
}
.chip.ok { color: var(--ok); background: var(--ok-bg); }
.chip.autofix { color: var(--fix); background: var(--fix-bg); }
.chip.rework { color: var(--rework); background: var(--rework-bg); }
.chip.warn { color: var(--warn); background: var(--warn-bg); }

.rule-card {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 8px; padding: .75rem 1rem; margin: .6rem 0;
  background: var(--panel);
}
.rule-card.ok { border-left-color: var(--ok); }
.rule-card.autofix { border-left-color: var(--fix); }
.rule-card.rework { border-left-color: var(--rework); }
.rule-card h4 { margin: 0 0 .3rem; font-size: .95rem; }
.rule-card .spec { font-family: var(--mono); font-size: .82rem; word-break: break-all; }
.rule-card ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
.reason-warn { color: var(--warn); }
.reason-rework { color: var(--rework); }
.reason-fix { color: var(--fix); }

section.bucket { margin-top: 1.5rem; }
section.bucket > h2 { font-size: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: .3rem; }

details.output { margin: .75rem 0; border: 1px solid var(--border); border-radius: 8px; }
details.output summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; }
details.output pre {
  margin: 0; padding: .9rem; overflow-x: auto; font-size: .8rem;
  border-top: 1px solid var(--border); background: var(--panel);
  border-radius: 0 0 8px 8px;
}
.copy-btn { float: right; margin: .4rem .6rem 0 0; font-size: .75rem; }

footer { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: .75rem; font-size: .8rem; color: var(--muted); }