:root { --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --mute:#5c6670; --line:#d9dee4; --accent:#1f6feb; --ok:#1a7f37; --bad:#c62828; --warn:#9a6700; }
@media (prefers-color-scheme: dark) { :root { --bg:#14181d; --card:#1c2128; --ink:#e6e9ee; --mute:#9aa4af; --line:#2f3741; --accent:#58a6ff; --ok:#3fb950; --bad:#ff6b6b; --warn:#d29922; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 system-ui, sans-serif; }
header { display:flex; gap:12px; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; flex-wrap:wrap; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
.grow { flex:1; }
main { max-width:1100px; margin:16px auto; padding:0 12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
h2 { margin:0 0 8px; font-size:16px; } h3 { margin:12px 0 6px; font-size:14px; }
button { font:inherit; padding:5px 12px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:6px; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { color:var(--bad); }
button.link, nav button { border:0; background:none; color:var(--accent); padding:4px 8px; }
nav button.active { font-weight:600; border-bottom:2px solid var(--accent); border-radius:0; }
button:disabled { opacity:.5; cursor:default; }
input, select, textarea { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); }
textarea { width:100%; min-height:90px; font-family:ui-monospace, monospace; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--mute); font-weight:500; font-size:12px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.mute { color:var(--mute); } .ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; border:1px solid var(--line); font-size:12px; color:var(--mute); }
.code { font:600 30px/1.2 ui-monospace, monospace; letter-spacing:3px; }
.mono { font-family:ui-monospace, monospace; font-size:12px; word-break:break-all; }
.site { padding:8px 0; border-top:1px solid var(--line); }
.login { max-width:340px; margin:80px auto; }
.login input { width:100%; margin:4px 0 10px; }
.banner { padding:8px 12px; border-radius:6px; border:1px solid var(--warn); color:var(--warn); margin-bottom:12px; }
.toast { position:fixed; bottom:16px; right:16px; background:var(--ink); color:var(--bg); padding:8px 14px; border-radius:6px; }