:root {
    color-scheme: dark;
    --bg: #0b1020;
    --panel: #141b2d;
    --panel2: #1a2338;
    --text: #e7ecf5;
    --muted: #9aa7bd;
    --line: #2b3855;
    --accent: #63a8ff;
    --ok: #55d187;
    --bad: #ff7474;
    --warn: #ffc857;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color: var(--accent); text-decoration: none; }
.topbar { min-height: 58px; padding: 0 24px; display:flex; align-items:center; justify-content:space-between; background:#10172a; border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:white; }
nav { display:flex; gap:18px; flex-wrap:wrap; }
.container { width:min(1280px,94vw); margin:26px auto 60px; }
h1,h2,h3 { margin-top:0; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; overflow:auto; }
.card h3 { margin-bottom:10px; }
.metric { font-size:28px; font-weight:700; }
.muted { color:var(--muted); }
.ok { color:var(--ok); }
.bad { color:var(--bad); }
.warn { color:var(--warn); }
table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); }
th,td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:#c7d2e5; background:var(--panel2); }
input,textarea,select { width:100%; padding:10px 11px; border-radius:8px; border:1px solid var(--line); background:#0e1526; color:var(--text); }
textarea { min-height:110px; resize:vertical; }
label { display:block; margin-bottom:12px; color:#cdd6e7; }
button,.button { display:inline-block; width:auto; cursor:pointer; border:0; border-radius:8px; padding:10px 14px; background:var(--accent); color:#07111f; font-weight:700; }
button.danger,.button.danger { background:var(--bad); }
button.secondary,.button.secondary { background:#2c3955; color:var(--text); }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.flash { padding:12px 14px; border-radius:8px; margin-bottom:16px; background:var(--panel2); }
.flash.success { border-left:4px solid var(--ok); }
.flash.error { border-left:4px solid var(--bad); }
.flash.info { border-left:4px solid var(--accent); }
pre { white-space:pre-wrap; word-break:break-word; background:#090e19; border:1px solid var(--line); padding:14px; border-radius:8px; max-height:520px; overflow:auto; }
.login { width:min(430px,94vw); margin:80px auto; }
.inline { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.inline > * { flex:1; min-width:180px; }
.small { font-size:13px; }
.secret { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; word-break:break-all; background:#090e19; padding:10px; border-radius:8px; }