:root { --bg:#f4f6f5; --panel:#fff; --panel2:#eef2ef; --text:#12201a; --muted:#5d6b64; --border:#d6ded9; --accent:#16a34a; --accent-ink:#fff; --warn:#f59e0b; --bad:#dc2626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0b120e; --panel:#121c16; --panel2:#18241d; --text:#eaf2ed; --muted:#93a39a; --border:#25352b; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.err { color:var(--bad); min-height:1.4em; margin:6px 0; }
h1 { font-size:20px; margin:0; }
.top { display:flex; align-items:center; gap:12px; padding:14px 20px; background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.spacer { flex:1; }
.wrap { max-width:1100px; margin:0 auto; padding:20px 16px 60px; }
.btn { font:inherit; padding:8px 14px; border:1px solid var(--border); border-radius:10px; background:var(--panel2); color:var(--text); cursor:pointer; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.btn.danger { color:var(--bad); border-color:var(--bad); }
.btn:disabled { opacity:.5; cursor:default; }
input, select, textarea { font:inherit; width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text); }
label.f { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
label.f > span { color:var(--muted); font-size:13px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; }
.login { min-height:100vh; display:grid; place-items:center; padding:16px; }
.login-card { width:min(380px,100%); display:flex; flex-direction:column; gap:10px; }
.summary { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px 16px; min-width:130px; }
.stat b { display:block; font-size:22px; }
.list { display:flex; flex-direction:column; gap:12px; }
.t { display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:start; }
.t h2 { font-size:17px; margin:0 0 2px; }
.t a { color:var(--accent); text-decoration:none; word-break:break-all; }
.meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px; color:var(--muted); font-size:13.5px; }
.meta b { color:var(--text); }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12.5px; font-weight:700; border:1px solid var(--border); }
.pill.ok { color:var(--accent); border-color:var(--accent); }
.pill.warn { color:var(--warn); border-color:var(--warn); }
.pill.bad { color:var(--bad); border-color:var(--bad); }
.actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.actions .btn { padding:6px 10px; font-size:13.5px; }
.bar { height:6px; border-radius:6px; background:var(--panel2); overflow:hidden; margin-top:3px; width:90px; }
.bar > i { display:block; height:100%; background:var(--accent); }
.bar > i.full { background:var(--bad); }
.dlg { border:1px solid var(--border); border-radius:16px; background:var(--panel); color:var(--text); padding:20px; width:min(520px,94vw); }
.dlg::backdrop { background:rgba(0,0,0,.5); }
.dlg h3 { margin:0 0 12px; }
.dlg .btns { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }
.secret { font:600 22px/1.2 ui-monospace,Consolas,monospace; letter-spacing:3px; background:var(--panel2); border:1px dashed var(--border); border-radius:10px; padding:10px; text-align:center; margin:8px 0; }
pre.env { background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px; overflow:auto; max-height:220px; font-size:12.5px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:12px; z-index:50; }
@media (max-width:640px) { .t { grid-template-columns:1fr; } .actions { justify-content:flex-start; } .row2 { grid-template-columns:1fr; } }

.diag-step { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.diag-item { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.diag-item code { font-size: 12px; background: var(--panel); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.ok-note { color: var(--accent); font-weight: 700; }