:root { --bg:#f6f5f2; --card:#ffffff; --text:#1f1e1d; --muted:#6b6a66; --line:#e2e0da; --accent:#2b62c4;
  --ok:#2e7d32; --okbg:#e6f2e6; --warn:#9a6200; --warnbg:#fbf0d9; --err:#b3261e; --errbg:#fbe7e6; --livebg:#e5edfb;
  color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1c1b; --card:#262624; --text:#ecebe7; --muted:#a3a19b; --line:#3a3936; --accent:#7aa5ef;
    --ok:#8fd18f; --okbg:#203324; --warn:#f0c46b; --warnbg:#3a2f17; --err:#f3a39d; --errbg:#3d2120; --livebg:#1f2b40;
    color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
.top { display:flex; align-items:center; gap:1.5rem; padding:.7rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:600; }
nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
nav a { color:var(--text); text-decoration:none; } nav a.active { color:var(--accent); font-weight:600; }
.conn { margin-left:auto; font-size:13px; color:var(--muted); }
main { padding:1.2rem; max-width:1200px; margin:0 auto; }
h1 { font-size:20px; margin:.2rem 0 1rem; font-weight:600; } h2 { font-size:16px; margin:1.4rem 0 .6rem; font-weight:600; }
.hidden { display:none !important; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; margin-bottom:1rem; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; }
.stat .l { font-size:13px; color:var(--muted); } .stat .v { font-size:22px; font-weight:600; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; }
.card.click { cursor:pointer; } .card.click:hover { border-color:var(--accent); }
.row { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.sub { color:var(--muted); font-size:13px; }
.peer { display:flex; justify-content:space-between; gap:.6rem; border-top:1px solid var(--line); padding:.4rem 0; font-size:14px; }
.badge { font-size:12px; padding:2px 9px; border-radius:6px; white-space:nowrap; }
.b-ok { background:var(--okbg); color:var(--ok); } .b-off { background:var(--warnbg); color:var(--warn); }
.b-err { background:var(--errbg); color:var(--err); } .b-live { background:var(--livebg); color:var(--accent); }
.b-n { background:var(--bg); color:var(--muted); border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:14px; background:var(--card); }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:13px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.kv { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.3rem 1.2rem; font-size:14px; }
.kv div span:first-child { color:var(--muted); margin-right:.4rem; }
form, .bar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.5rem 0; }
input, select, button { font:inherit; padding:.4rem .6rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { cursor:pointer; } button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.link { border:none; background:none; color:var(--text); padding:0; }
.grow { flex:1; min-width:220px; }
.err { color:var(--err); font-size:14px; min-height:1.2em; }
.code { font-family:ui-monospace, Menlo, monospace; font-size:12px; word-break:break-all; background:var(--bg); padding:.6rem; border-radius:8px; border:1px solid var(--line); }
.ev-t { white-space:nowrap; color:var(--muted); font-size:13px; font-family:ui-monospace, Menlo, monospace; }
.ev-k { white-space:nowrap; }
.login { max-width:340px; margin:4rem auto; }
.login input { width:100%; margin:.3rem 0 .7rem; }