:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5b6571; --card:#fff; --line:#d9dee5; --accent:#0b5cad;
        --ok:#1a7f37; --warn:#9a6700; --bad:#cf222e; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12161b; --fg:#e6e9ed; --muted:#97a1ad; --card:#1a2027; --line:#2c353f; --accent:#6cb2ff;
          --ok:#56d364; --warn:#e3b341; --bad:#ff7b72; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui, sans-serif; }
header.top { display:flex; gap:1rem; align-items:center; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header.top a { color:var(--accent); text-decoration:none; }
header.top .spacer { flex:1; }
main { padding:1rem; max-width:1200px; margin:0 auto; }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; } h2 { font-size:1.05rem; margin:1.4rem 0 .5rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; margin-bottom:1rem; overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.35rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.85rem; }
td.mono, .mono { font-family:ui-monospace, monospace; font-size:.85rem; word-break:break-all; }
.muted { color:var(--muted); }
.badge { display:inline-block; padding:0 .5rem; border-radius:999px; border:1px solid var(--line); font-size:.8rem; }
.s-ACTIVE, .s-DONE, .s-online, .s-connected { color:var(--ok); border-color:var(--ok); }
.s-PAUSED, .s-CLOSING, .s-BLOCKED, .s-SUBMITTED { color:var(--warn); border-color:var(--warn); }
.s-FAILED, .s-CANCELLED, .s-revoked, .s-offline, .s-disconnected { color:var(--bad); border-color:var(--bad); }
form.login { max-width:26rem; margin:4rem auto; }
form.login input[type=password] { width:100%; padding:.5rem; margin:.5rem 0 1rem; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
button { padding:.4rem .9rem; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--bg); cursor:pointer; }
button.link { background:none; border:none; color:var(--accent); padding:0; }
.error { color:var(--bad); }
#log td { white-space:pre-wrap; }
form.inline { display:inline; }
button.danger { background:var(--bad); border-color:var(--bad); }
button.quiet { background:none; color:var(--accent); }
.flash { padding:.5rem 1rem; margin-bottom:1rem; border:1px solid var(--accent); border-radius:6px; background:var(--card); }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.4rem 0; }
input[type=text], input[type=number], select { padding:.35rem; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
code.invite { display:block; padding:.8rem; margin:.8rem 0; border:2px solid var(--warn); border-radius:6px; font-size:1.1rem; word-break:break-all; }