:root { --bg:#0f1216; --card:#181c22; --line:#2a313b; --fg:#e6e9ee; --muted:#98a2b3; --ok:#2ea043; --warn:#d29922; --danger:#da3633; --accent:#4c8dff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* class selectors must not override the hidden attribute */
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
main { max-width:820px; margin:0 auto; padding:24px 16px 64px; }
h1 { margin:0 0 4px; font-size:1.6rem; }
.sub { color:var(--muted); margin:0 0 20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:14px 0; }
h2 { font-size:1.05rem; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th,td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; }
.muted { color:var(--muted); }
.badge { font-size:.72rem; padding:2px 9px; border-radius:999px; background:#333; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
.badge.ok { background:var(--ok); } .badge.off { background:#555; } .badge.warnb { background:var(--warn); color:#111; }
.btns { display:flex; flex-wrap:wrap; gap:8px; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); }
input,select,textarea { background:#0d1014; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:9px 14px; font:inherit; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.08); }
button.warn { background:var(--warn); color:#111; } button.danger { background:var(--danger); }
pre { background:#0d1014; border:1px solid var(--line); border-radius:8px; padding:10px; overflow:auto; white-space:pre-wrap; word-break:break-all; font-size:.82rem; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-box { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; max-width:640px; width:100%; }
textarea { width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; }
.err { color:#ff7b72; min-height:1.2em; } .toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#222; border:1px solid var(--line); padding:10px 16px; border-radius:8px; }
a { color:var(--accent); }