:root { --bg:#f7fafc; --fg:#1a202c; --muted:#718096; --line:#e2e8f0; --brand:#2b6cb0; --warn:#b7791f; --bad:#c53030; --ok:#2f855a; }
@media (prefers-color-scheme: dark) { :root { --bg:#1a202c; --fg:#edf2f7; --muted:#a0aec0; --line:#2d3748; --brand:#63b3ed; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
h1 { font-size:18px; margin:0 16px 0 0; } h2 { font-size:16px; margin:8px 0; }
nav button, button { cursor:pointer; padding:6px 12px; border:1px solid var(--line); background:transparent; color:inherit; border-radius:6px; }
nav button.active { background:var(--brand); color:#fff; border-color:var(--brand); }
main { max-width:1000px; margin:0 auto; padding:16px; }
label { display:block; margin:8px 0; } input, select, textarea { display:block; width:100%; padding:6px 8px; margin-top:4px; background:transparent; color:inherit; border:1px solid var(--line); border-radius:6px; font:inherit; }
input[type=checkbox] { display:inline-block; width:auto; margin-right:6px; }
.card { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:10px 0; }
.card.review { border-left:4px solid var(--warn); }
.meta { color:var(--muted); font-size:12px; margin-bottom:4px; }
.badge { display:inline-block; padding:0 6px; border-radius:10px; font-size:12px; border:1px solid var(--line); margin-right:4px; }
.badge.warn { color:var(--warn); border-color:var(--warn); } .badge.ok { color:var(--ok); border-color:var(--ok); } .badge.bad { color:var(--bad); border-color:var(--bad); }
.actions { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
#msg { min-height:1.5em; } #msg.err { color:var(--bad); } #msg.ok { color:var(--ok); }
pre { white-space:pre-wrap; word-break:break-word; margin:4px 0; font:inherit; }