:root { --bg:#f7f8fa; --fg:#1f2933; --muted:#6b7280; --card:#fff; --line:#e5e7eb; --ok:#15803d; --bad:#b91c1c; --warn:#b45309; --accent:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#111418; --fg:#e5e7eb; --muted:#9ca3af; --card:#1a1f26; --line:#2b323c; --accent:#60a5fa; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
h1 { font-size:1.4rem; margin:8px 0; }
h2 { font-size:1rem; margin:24px 0 8px; color:var(--muted); font-weight:600; }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:.85rem; }
.pill.online { border-color:var(--ok); color:var(--ok); }
.pill.offline { border-color:var(--bad); color:var(--bad); }
.pill.busy { border-color:var(--warn); color:var(--warn); }
form { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; display:grid; gap:12px; }
label { display:grid; gap:4px; font-size:.9rem; color:var(--muted); }
input, textarea { font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px; width:100%; }
button { font:inherit; padding:10px 16px; border-radius:6px; border:0; background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); margin-top:8px; }
button.danger { color:var(--bad); border-color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.hint { margin:0; font-size:.8rem; color:var(--muted); }
.msg { margin:0; font-size:.9rem; min-height:1.3em; color:var(--ok); }
.msg.queued { color:var(--warn); }
.row { display:flex; gap:8px; flex-wrap:wrap; }
.list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.list li { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; }
.list li .x { white-space:pre-wrap; }
.list li .m { font-size:.8rem; color:var(--muted); }
.list li.err .m { color:var(--bad); }
.list:empty::before { content:"nothing"; color:var(--muted); font-size:.85rem; }