:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#6b7280; --card:#fff; --line:#e3e6ea; --accent:#2563eb; --ok:#15803d; --warn:#b45309; --err:#b91c1c; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111418; --fg:#e6e8eb; --muted:#9aa3ad; --card:#1a1f26; --line:#2b323b; --accent:#60a5fa; --ok:#4ade80; --warn:#fbbf24; --err:#f87171; }
}
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
main { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem; }
h1 { font-size:1.6rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:0 0 .8rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:.7rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.topbar nav { display:flex; gap:1.2rem; align-items:center; }
.brand { font-weight:700; color:var(--fg); }
.devbar { background:#fef3c7; color:#78350f; text-align:center; padding:.3rem; font-size:.85rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.2rem; margin-bottom:1rem; }
.card.narrow { max-width:380px; margin:3rem auto; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; } @media (max-width:700px) { .grid { grid-template-columns:1fr; } }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
label { display:block; margin-bottom:.9rem; font-weight:600; }
label small { display:block; font-weight:400; }
input, select { display:block; width:100%; margin-top:.3rem; padding:.5rem .6rem; font:inherit; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
.withsuffix { display:flex; align-items:center; margin-top:.3rem; } .withsuffix input { margin:0; border-radius:6px 0 0 6px; } .suffix { padding:.5rem .6rem; border:1px solid var(--line); border-left:0; border-radius:0 6px 6px 0; color:var(--muted); background:var(--card); }
.withsuffix select.suffix { width:auto; margin:0; color:var(--fg); }
fieldset { border:1px solid var(--line); border-radius:6px; margin:0 0 1rem; padding:.6rem 1rem; } legend { font-weight:600; padding:0 .3rem; }
button, .button { display:inline-block; font:inherit; padding:.5rem .9rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { background:var(--err); border-color:var(--err); color:#fff; }
button.link { border:0; background:none; color:var(--accent); padding:0; }
.button.small { padding:.25rem .6rem; font-size:.85rem; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; } form.inline { display:inline; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; }
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); }
.tag { display:inline-block; font-size:.75rem; padding:.1rem .5rem; border-radius:999px; border:1px solid currentColor; }
.tag.ok { color:var(--ok); } .tag.off { color:var(--muted); } .tag.warn { color:var(--warn); } .tag.err { color:var(--err); }
.flash { padding:.6rem .9rem; border-radius:6px; margin-bottom:1rem; border:1px solid; }
.flash.ok { color:var(--ok); border-color:var(--ok); } .flash.error { color:var(--err); border-color:var(--err); }
.flash pre { margin:0; white-space:pre-wrap; font:inherit; }
pre.logs { background:#0b0e12; color:#d5dbe3; padding:1rem; border-radius:6px; max-height:420px; overflow:auto; font-size:.8rem; }
dl { display:grid; grid-template-columns: max-content 1fr; gap:.3rem 1rem; margin:0; } dt { color:var(--muted); } dd { margin:0; }
details.danger { margin-top:1.2rem; border-top:1px solid var(--line); padding-top:.8rem; } details.danger summary { color:var(--err); cursor:pointer; }
code { background:var(--bg); padding:.05rem .3rem; border-radius:4px; font-size:.9em; }