:root { --bg:#f4f6f8; --fg:#1d2733; --muted:#6b7785; --line:#d9dfe5; --accent:#1f6feb;
        --green:#1a7f37; --amber:#b7791f; --red:#c62828; --grey:#7a8591; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem;
          padding:.7rem 1.5rem; background:#16202b; color:#fff; flex-wrap:wrap; }
.topbar a { color:#fff; text-decoration:none; }
.brand { font-weight:700; font-size:1.1rem; }
.topbar nav { display:flex; gap:1.2rem; align-items:center; }
main { max-width:1100px; margin:1.5rem auto; padding:0 1rem; }
h1 { font-size:1.5rem; margin:.2rem 0 1rem; } h2 { font-size:1.15rem; margin-top:2rem; }
.row { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); }
th, td { padding:.55rem .75rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
th { background:#eef1f4; font-size:.85rem; }
.kv { max-width:760px; } .kv th { width:200px; }
code { font:13px ui-monospace, Consolas, monospace; }
code.key { font-size:11px; word-break:break-all; }
a { color:var(--accent); }
.muted, small { color:var(--muted); }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.5rem; }
.narrow { max-width:480px; margin:1rem auto; }
label { display:block; margin-bottom:1rem; font-weight:600; }
label small { display:block; font-weight:400; }
label.check { font-weight:400; margin-bottom:.4rem; }
label.check.inline { display:inline-block; margin:0 .8rem 0 0; }
.muted-light { color:#9fb0c3; }
td form.inline { white-space:nowrap; }
input[type=text], input[type=password], input[type=number], select {
  display:block; width:100%; padding:.5rem; margin-top:.25rem; font:inherit;
  border:1px solid #b8c1cc; border-radius:5px; }
fieldset { border:1px solid var(--line); border-radius:6px; margin:0 0 1rem; }
button, .button { display:inline-block; padding:.45rem .9rem; font:inherit; cursor:pointer;
  border:1px solid #b8c1cc; border-radius:5px; background:#fff; color:var(--fg); text-decoration:none; }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { background:var(--red); border-color:var(--red); color:#fff; }
button.small { padding:.2rem .6rem; font-size:.85rem; }
button.link { border:0; background:none; color:#fff; padding:0; }
form.inline { display:inline; margin:0; }
.badge { display:inline-block; padding:.1rem .6rem; border-radius:999px; color:#fff; font-size:.8rem; }
.badge.green { background:var(--green); } .badge.amber { background:var(--amber); }
.badge.red { background:var(--red); } .badge.grey { background:var(--grey); }
.flash { padding:.7rem 1rem; border-radius:6px; margin-bottom:1rem; border:1px solid; }
.flash.success { background:#e6f4ea; border-color:#a8d5b5; }
.flash.error { background:#fdecea; border-color:#f1b0ab; }
dialog { border:1px solid var(--line); border-radius:8px; max-width:440px; padding:1.5rem; }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog h2 { margin-top:0; }
[hidden] { display:none !important; }