:root { --bg:#0f1115; --card:#171a21; --fg:#e6e8ec; --muted:#9aa3b2; --line:#262b35;
  --ok:#2ecc71; --warn:#f1c40f; --err:#e74c3c; --accent:#4aa3ff; }
* { box-sizing: border-box; }
body { margin:0; padding:24px; background:var(--bg); color:var(--fg);
  font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; }
header h1 { margin:0 0 4px; font-size:20px; }
.muted { color:var(--muted); font-weight:400; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px; margin:16px 0; }
.sub { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }
h2 { font-size:16px; margin:0 0 10px; }
h3 { font-size:14px; margin:0 0 8px; }
input { background:#0e1016; border:1px solid var(--line); color:var(--fg);
  padding:8px 10px; border-radius:6px; margin:4px 8px 4px 0; min-width:240px; }
button { background:var(--accent); color:#04203f; border:0; padding:8px 14px;
  border-radius:6px; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.08); }
a { color:var(--accent); }
table { width:100%; border-collapse:collapse; margin:8px 0 16px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px; }
th { color:var(--muted); font-weight:600; }
.row { display:flex; justify-content:space-between; align-items:center; }
.badge { padding:2px 8px; border-radius:999px; font-size:12px; background:#222836; }
.badge.ok { background:rgba(46,204,113,.16); color:var(--ok); }
.badge.warn { background:rgba(241,196,15,.16); color:var(--warn); }
.badge.err { background:rgba(231,76,60,.16); color:var(--err); }
.secret { display:flex; align-items:center; gap:10px; padding:6px 0; }
.secret code { background:#0e1016; padding:4px 8px; border-radius:6px; min-width:120px;
  display:inline-block; color:var(--ok); }
#status { min-height:20px; }
#status.ok { color:var(--ok); } #status.warn { color:var(--warn); } #status.err { color:var(--err); }