:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#667085; --card:#fff; --line:#e3e6ec;
        --ok:#1f7a3f; --okbg:#e5f4ea; --warn:#8a5a00; --warnbg:#fff3d6; --bad:#b42318; --badbg:#fde8e7; --accent:#2d5bd7; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171d; --fg:#e6e8ec; --muted:#9aa3b2; --card:#1c2029; --line:#2c3240;
          --ok:#6fd394; --okbg:#173023; --warn:#f2c46b; --warnbg:#3a2e12; --bad:#ff8a80; --badbg:#3d1a18; --accent:#8fb0ff; }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
         padding:.8rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--fg); text-decoration:none; }
.brand small, h1 small, h2 small { color:var(--muted); font-weight:400; font-size:.8em; }
nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
a { color:var(--accent); }
main { max-width:1100px; margin:0 auto; padding:1.2rem 1rem 3rem; }
section { margin-bottom:2rem; }
h1 { font-size:1.35rem; } h2 { font-size:1.1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; }
.narrow { max-width:520px; margin:2rem auto; display:flex; flex-direction:column; gap:.8rem; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; }
th, td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.8rem; text-transform:uppercase; color:var(--muted); letter-spacing:.03em; }
td small { color:var(--muted); }
.actions a { margin-right:.6rem; white-space:nowrap; }
.tag { display:inline-block; padding:.05rem .5rem; border-radius:99px; font-size:.82rem; font-weight:600; }
.tag.ok { color:var(--ok); background:var(--okbg); } .tag.warn { color:var(--warn); background:var(--warnbg); }
.tag.bad { color:var(--bad); background:var(--badbg); }
p.ok { color:var(--ok); background:var(--okbg); padding:.5rem .8rem; border-radius:8px; }
p.err, .err { color:var(--bad); } p.err { background:var(--badbg); padding:.5rem .8rem; border-radius:8px; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; }
.row input { flex:1 1 220px; }
label { display:flex; flex-direction:column; gap:.25rem; }
label:has(input[type=checkbox]) { flex-direction:row; align-items:flex-start; gap:.5rem; }
input, select, button { font:inherit; padding:.45rem .7rem; border-radius:8px; border:1px solid var(--line);
                        background:var(--bg); color:var(--fg); }
button { background:var(--accent); color:#fff; border:0; cursor:pointer; font-weight:600; }
button.danger, a.danger { background:none; color:var(--bad); }
button.danger { background:var(--bad); color:#fff; }
button.link { background:none; color:var(--accent); padding:0; font-weight:400; }
form.inline { display:inline; }
pre { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.8rem; overflow-x:auto;
      white-space:pre-wrap; word-break:break-word; font-size:.85rem; }
pre.log { white-space:pre; max-height:70vh; overflow:auto; }
code { font-size:.9em; }