:root {
  --bg: #0f1419; --panel: #171d24; --line: #2a333d;
  --fg: #d8dee6; --muted: #7d8894; --acc: #4f8cff; --danger: #e0564f; --ok: #3cb371;
  font-size: 15px;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f5f6f8; --panel:#fff; --line:#dde2e8; --fg:#1c2733; --muted:#68737f; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }

header { display:flex; align-items:center; gap:1rem; padding:.6rem 1.2rem;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; }
nav button { background:none; border:none; color:var(--muted); padding:.45rem .8rem;
  cursor:pointer; border-radius:6px; font-size:1rem; }
nav button.active { color:var(--fg); background:var(--bg); }
.spacer { flex:1; }
main { max-width: 68rem; margin: 1.2rem auto; padding: 0 1.2rem; }

h1 { margin:.2rem 0 .4rem; } h2 { margin:.4rem 0; font-size:1.15rem; }
h3 { margin:.8rem 0 .4rem; font-size:1rem; }
.muted { color:var(--muted); } .small { font-size:.82rem; } .err { color:var(--danger); }

.bar { display:flex; align-items:center; gap:.5rem; margin:.5rem 0; flex-wrap:wrap; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding: .8rem 1rem; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }

button { background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:6px; padding:.42rem .9rem; cursor:pointer; font-size:.92rem; }
button:hover { border-color: var(--acc); }
button.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
button.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
button.ghost { background:none; }
button.wide { width:100%; }
button:disabled { opacity:.5; cursor:default; }

label { display:block; margin:.55rem 0; font-size:.9rem; color:var(--muted); }
label.inline { display:inline-flex; align-items:center; gap:.4rem; margin:0; }
input, textarea, select { width:100%; margin-top:.25rem; padding:.45rem .6rem;
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  color:var(--fg); font-size:.92rem; font-family:inherit; }
label.inline input { width:auto; margin:0; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--acc); }

table { width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; font-size:.82rem; }
tr:last-child td { border-bottom:none; }
td input[type=text] { margin:0; background:transparent; border-color:transparent; }
td input[type=text]:hover, td input[type=text]:focus { border-color:var(--line); background:var(--bg); }
tr.disabled td { opacity:.45; }
tr.on td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card { width: 22rem; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:1.6rem; }
.adv { margin:.6rem 0; }
.adv summary { cursor:pointer; }

.form-row { display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; }
.form-row select { width:9rem; } .form-row input { margin-top:0; }
.form-row button { flex-shrink:0; }

.kv { display:grid; grid-template-columns: 8rem 1fr; row-gap:.3rem; }
.dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; }
.dot.ok { background:var(--ok); } .dot.bad { background:var(--danger); }

#toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%);
  background:var(--fg); color:var(--bg); padding:.55rem 1.1rem; border-radius:8px;
  font-size:.9rem; z-index:20; max-width:80vw; }
#toast.err { background:var(--danger); color:#fff; }