:root {
  --bg:#f5f6f8; --surface:#fff; --ink:#1b2330; --ink2:#5a6577; --ink3:#8b94a5; --line:#e3e6ea; --line-strong:#c8cfd9; --hover:#f8f9fb; --soft:#fafbfc;
  --brand:#2d5bff; --brand-bg:#eaf0ff; --brand-line:#9fb4ff; --ok:#0f9d58; --ok-bg:#e6f6ed; --ok-line:#bfe6cf; --warn:#b7791f; --warn-bg:#fff4dc;
  --bad:#d93025; --bad-bg:#fde8e6; --bad-line:#f1b5b0; --err-ink:#8a1c14; --note-bg:#f4f7ff; --note-ink:#2a3f8f; --reveal-bg:#fffbe6; --reveal-line:#f0e0a0; --switch-off:#cfd5df;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace; color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0e131b; --surface:#161c27; --ink:#e6eaf2; --ink2:#a4aebf; --ink3:#6f7a8f; --line:#262e3d; --line-strong:#3a4558; --hover:#1b2230; --soft:#121823;
  --brand:#6b8fff; --brand-bg:#1b2750; --brand-line:#35498f; --ok:#3ccb83; --ok-bg:#12301f; --ok-line:#1f5a39; --warn:#e6ac45; --warn-bg:#382c10;
  --bad:#ff7266; --bad-bg:#3a1a18; --bad-line:#6b2b27; --err-ink:#ffb4ac; --note-bg:#141c33; --note-ink:#a9bcff; --reveal-bg:#2a2410; --reveal-line:#5a4a1a; --switch-off:#3a4558;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e131b; --surface:#161c27; --ink:#e6eaf2; --ink2:#a4aebf; --ink3:#6f7a8f; --line:#262e3d; --line-strong:#3a4558; --hover:#1b2230; --soft:#121823;
    --brand:#6b8fff; --brand-bg:#1b2750; --brand-line:#35498f; --ok:#3ccb83; --ok-bg:#12301f; --ok-line:#1f5a39; --warn:#e6ac45; --warn-bg:#382c10;
    --bad:#ff7266; --bad-bg:#3a1a18; --bad-line:#6b2b27; --err-ink:#ffb4ac; --note-bg:#141c33; --note-ink:#a9bcff; --reveal-bg:#2a2410; --reveal-line:#5a4a1a; --switch-off:#3a4558;
    color-scheme:dark;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:13.5px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.app { display:grid; grid-template-columns:224px 1fr; min-height:100vh; }
aside { background:var(--surface); border-right:1px solid var(--line); padding:16px 12px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 16px; }
.logo { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#2d5bff,#7b4dff); color:#fff; display:grid; place-items:center; font-weight:700; }
.brand b { display:block; font-size:14px; } .brand span { font-size:11px; color:var(--ink3); }
nav button { display:flex; width:100%; align-items:center; gap:10px; padding:8px 10px; border:0; background:none; border-radius:8px; font:inherit; color:var(--ink2); cursor:pointer; text-align:left; }
nav button:hover { background:var(--bg); } nav button.on { background:var(--brand-bg); color:var(--brand); font-weight:600; }
nav .badge { margin-left:auto; font-size:10.5px; background:var(--warn-bg); color:var(--warn); border-radius:10px; padding:1px 7px; font-weight:600; }
.side-foot { position:absolute; bottom:14px; left:12px; right:12px; font-size:11.5px; color:var(--ink3); border-top:1px solid var(--line); padding-top:10px; }
main { padding:20px 28px 60px; max-width:1180px; }
header.top { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; } header.top h1 { font-size:19px; margin:0; }
.pill { font-size:11px; border-radius:10px; padding:2px 9px; font-weight:600; display:inline-block; }
.ok { background:var(--ok-bg); color:var(--ok); } .warn { background:var(--warn-bg); color:var(--warn); } .bad { background:var(--bad-bg); color:var(--bad); } .info { background:var(--brand-bg); color:var(--brand); } .mute { background:var(--bg); color:var(--ink2); }
.spacer { flex:1; }
.btn { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:7px 12px; font:inherit; cursor:pointer; color:var(--ink); }
.btn:hover { border-color:var(--line-strong); } .btn:disabled { opacity:.5; cursor:default; } .btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; } .btn.danger { color:var(--bad); } .btn.sm { padding:4px 9px; font-size:12px; }
.grid { display:grid; gap:14px; } .g4 { grid-template-columns:repeat(4,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g2 { grid-template-columns:1.4fr 1fr; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
.card h3 { margin:0; font-size:13px; padding:12px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.card .body { padding:14px 16px; } .mt { margin-top:14px; }
.tile { padding:14px 16px; } .tile .lab { font-size:11px; text-transform:uppercase; color:var(--ink3); letter-spacing:.03em; } .tile .val { font-size:22px; font-weight:650; margin-top:4px; } .tile .sub { font-size:12px; color:var(--ink2); }
.bar { height:7px; background:var(--bg); border-radius:4px; margin-top:8px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--brand); border-radius:4px; }
table { width:100%; border-collapse:collapse; } th { text-align:left; font-size:11px; text-transform:uppercase; color:var(--ink3); padding:8px 16px; border-bottom:1px solid var(--line); font-weight:600; }
td { padding:9px 16px; border-bottom:1px solid var(--line); vertical-align:middle; } tr:last-child td { border-bottom:0; }
.mono { font-family:var(--mono); font-size:12px; } .muted { color:var(--ink3); } .right { text-align:right; white-space:nowrap; }
.attn { margin:0; padding:0; } .attn li { display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); list-style:none; } .attn li:last-child { border:0; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; } .dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.bad { background:var(--bad); }
.log { background:#0e1422; color:#d5dbe8; border-radius:10px; padding:12px 14px; font:12px/1.6 var(--mono); max-height:380px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.log .e { color:#ff8a80; } .log .w { color:#f2c46d; } .log .g { color:#7ee2a8; }
.subtabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:0 0 16px; flex-wrap:wrap; } .subtabs button { border:0; background:none; padding:9px 14px; font:inherit; color:var(--ink2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; } .subtabs button.on { color:var(--brand); border-color:var(--brand); font-weight:600; }
.field { display:grid; grid-template-columns:230px 1fr auto; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); } .field:last-child { border:0; } .field label { font-weight:600; } .field small { display:block; color:var(--ink3); font-weight:400; }
input[type=text], input[type=password], input[type=email], select, textarea { border:1px solid var(--line); border-radius:8px; padding:7px 10px; font:inherit; width:100%; background:var(--surface); color:var(--ink); }
textarea { font-family:var(--mono); font-size:12.5px; min-height:360px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; } .chip { background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:3px 6px 3px 10px; display:inline-flex; gap:6px; align-items:center; } .chip b { cursor:pointer; width:18px; height:18px; border-radius:9px; display:grid; place-items:center; color:var(--ink3); } .chip b:hover { background:var(--bad-bg); color:var(--bad); }
.switch { width:36px; height:20px; border-radius:10px; background:var(--switch-off); position:relative; display:inline-block; vertical-align:middle; } .switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:8px; background:#fff; transition:.15s; } .switch.on { background:var(--ok); } .switch.on::after { left:18px; }
.steps { display:flex; gap:8px; flex-wrap:wrap; } .step { flex:1; min-width:110px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); } .step b { display:block; font-size:12px; } .step span { font-size:11px; color:var(--ink2); }
.step.done { border-color:var(--ok-line); background:var(--ok-bg); } .step.run { border-color:var(--brand-line); background:var(--brand-bg); } .step.fail { border-color:var(--bad-line); background:var(--bad-bg); }
.note { margin:14px 0 0; border:1px dashed var(--brand-line); background:var(--note-bg); border-radius:10px; padding:10px 14px; color:var(--note-ink); font-size:12.5px; }
.empty { border:1px dashed var(--line); border-radius:12px; padding:18px; color:var(--ink2); text-align:center; background:var(--soft); }
.files tr:hover td { background:var(--hover); } .files a { color:var(--ink); cursor:pointer; text-decoration:none; } .files a:hover { color:var(--brand); }
.toast { position:fixed; right:22px; bottom:22px; background:#1b2330; color:#fff; padding:11px 16px; border-radius:10px; opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none; max-width:460px; z-index:60; } .toast.show { opacity:1; transform:none; } .toast.bad { background:#8a1c14; }
.modal-bg { position:fixed; inset:0; background:rgba(5,8,15,.6); display:grid; place-items:center; z-index:50; } .modal { background:var(--surface); border-radius:14px; padding:22px; width:min(440px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.3); } .modal h2 { margin:0 0 6px; font-size:16px; } .modal p { margin:0 0 14px; color:var(--ink2); }
.code { font:600 22px var(--mono); letter-spacing:.35em; text-align:center; }
.center { min-height:100vh; display:grid; place-items:center; padding:20px; } .login { width:min(400px,94vw); padding:28px; }
.err { background:var(--bad-bg); color:var(--err-ink); border-radius:8px; padding:9px 12px; margin:12px 0 0; font-size:12.5px; }
.reveal { background:var(--reveal-bg); border:1px solid var(--reveal-line); border-radius:10px; padding:12px 14px; font-family:var(--mono); font-size:13px; }
@media (max-width: 860px) { .app { grid-template-columns:1fr; } aside { position:static; height:auto; } .side-foot { position:static; } .g4,.g3,.g2 { grid-template-columns:1fr; } .field { grid-template-columns:1fr; } }

.theme-btn { background:none; border:1px solid var(--line); color:var(--ink2); border-radius:8px; padding:3px 9px; font:inherit; font-size:11.5px; cursor:pointer; margin-top:8px; }
.theme-btn:hover { border-color:var(--line-strong); color:var(--ink); }