:root{--bg:#faf8f4;--card:#fff;--ink:#1f2421;--muted:#6b716c;--line:#e6e2da;--accent:#2f7d4f;--accent-ink:#fff;--green:#2e9d5b;--yellow:#e0a526;--red:#d24b3e;--unknown:#a3a8a4}
@media (prefers-color-scheme:dark){:root{--bg:#161917;--card:#1f2320;--ink:#eef0ec;--muted:#a0a79f;--line:#2f3530;--accent:#4fb279;--accent-ink:#0d130f}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,sans-serif;padding-bottom:84px}
main{max-width:640px;margin:0 auto;padding:16px}
h1{font-size:1.4rem;margin:.2rem 0 1rem}h2{font-size:1.1rem;margin:1.4rem 0 .6rem}h3{font-size:1rem;margin:0 0 .4rem}
a{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 12px}
form.inline{display:flex;gap:8px}form.inline input{flex:1}
input,textarea,select{width:100%;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px}
input[type=checkbox]{width:auto;margin-right:8px}
textarea{min-height:90px}
button{font:inherit;border:0;border-radius:8px;padding:10px 14px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
button.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.link{background:none;color:var(--muted);padding:4px 8px}
button[disabled]{opacity:.6}
label{display:block;margin:.6rem 0 .25rem;color:var(--muted);font-size:.9rem}
ul.items{list-style:none;padding:0;margin:0}ul.items li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}ul.items li:last-child{border:0}
.grow{flex:1;min-width:0}
.dot{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block}
.dot.green{background:var(--green)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}.dot.unknown{background:var(--unknown)}
.muted{color:var(--muted);font-size:.9rem}
.error{border:1px solid var(--red);border-radius:8px;padding:10px;margin-bottom:12px}
.ok{border:1px solid var(--green);border-radius:8px;padding:10px;margin-bottom:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
nav.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{flex:1;text-align:center;padding:8px 0 10px;color:var(--muted);text-decoration:none;font-size:.75rem}
nav.tabs a.active{color:var(--accent);font-weight:600}
nav.tabs span{display:block;font-size:1.25rem}
.chat p{margin:.4rem 0}.chat .user{text-align:right}.chat .user span{background:var(--accent);color:var(--accent-ink);border-radius:12px;padding:6px 10px;display:inline-block}
pre.rules{white-space:pre-wrap;font:inherit;margin:0}