:root { --bg:#f7f8fa; --fg:#15171c; --muted:#5b6170; --card:#fff; --line:#d9dce3; --accent:#1d5fbf; --danger:#b3261e; --ok:#1e6b34; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#101216; --fg:#e9ebf0; --muted:#9aa1b0; --card:#181b22; --line:#2c313c; --accent:#7aa7ff; --danger:#ff8a80; --ok:#7fd69a; }
}
:root[data-theme="dark"] { --bg:#101216; --fg:#e9ebf0; --muted:#9aa1b0; --card:#181b22; --line:#2c313c; --accent:#7aa7ff; --danger:#ff8a80; --ok:#7fd69a; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
.top { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
.top button { margin-left:auto; }
main { max-width:900px; margin:0 auto; padding:16px; }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; } h3 { font-size:1rem; margin-top:1.2rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:12px 0; display:grid; gap:10px; }
label { display:grid; gap:4px; font-weight:600; }
input { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
input:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
button { font:inherit; padding:8px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; justify-self:start; }
button.danger { background:transparent; color:var(--danger); border-color:var(--danger); }
button:disabled { opacity:.55; cursor:not-allowed; }
.row { display:flex; flex-wrap:wrap; gap:8px; }
.list { list-style:none; padding:0; display:grid; gap:8px; }
.list li { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; cursor:pointer; }
.list li:focus-visible { outline:3px solid var(--accent); }
.muted { color:var(--muted); }
.error { color:var(--danger); min-height:1em; margin:0; }
.json { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px; overflow:auto; }
code { font-size:1.2rem; background:var(--bg); padding:6px 10px; border-radius:6px; border:1px solid var(--line); word-break:break-all; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:6px; border-bottom:1px solid var(--line); }
@media (max-width:600px) { main { padding:12px; } table { font-size:.8rem; } }
a.button { display:inline-block; font:inherit; padding:8px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; text-decoration:none; }
a.button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.steps { margin:0; padding-left:1.4rem; display:grid; gap:4px; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:8px; }
.card-stat { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.card-stat strong { display:block; font-size:1.3rem; }
.card-stat.bad strong { color:var(--danger); }
.card-stat.good strong { color:var(--ok); }
button.filter { background:transparent; color:var(--accent); }
button.filter[aria-pressed="true"] { background:var(--accent); color:#fff; }
button.small { padding:4px 8px; font-size:.85rem; }
.conv-table td, .conv-table th { vertical-align:top; }
.chip { display:inline-block; padding:1px 6px; border-radius:999px; border:1px solid var(--line); font-size:.8rem; }
.chip.on { background:var(--ok); color:#fff; border-color:var(--ok); }
.st-ready { color:var(--ok); font-weight:600; } .st-failed { color:var(--danger); font-weight:600; }
.st-pending { color:var(--accent); font-weight:600; } .st-unpublished, .st-withdrawn { color:var(--muted); font-weight:600; }