:root { --bg:#f6f7fb; --card:#fff; --ink:#15171f; --mute:#667085; --line:#e3e6ee; --accent:#5b45e8; --ok:#14804a; --bad:#b42318; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1117; --card:#171a23; --ink:#e8eaf2; --mute:#98a1b3; --line:#262a38; --accent:#8b7cff; --ok:#4cc38a; --bad:#ff7b72; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-weight:700; } .brand small { color:var(--mute); font-weight:500; }
main { max-width:760px; margin:0 auto; padding:20px 16px 60px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:0 0 16px; }
h2 { font-size:16px; margin:0 0 10px; }
.muted { color:var(--mute); } .ok { color:var(--ok); } .bad { color:var(--bad); }
input, select, textarea { width:100%; padding:9px 10px; margin:4px 0 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
textarea { min-height:80px; resize:vertical; }
button { padding:9px 14px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); }
button.danger { background:transparent; color:var(--bad); border:1px solid var(--line); }
.row { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.row:first-of-type { border-top:0; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--mute); margin-right:6px; } .dot.on { background:var(--ok); }
pre { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; max-height:260px; overflow:auto; }
code { background:var(--bg); padding:2px 5px; border-radius:5px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
#msg { min-height:1.4em; }