:root {
  --bg: #0b0c10;
  --panel: #111317;
  --muted: #9da7b1;
  --text: #e6edf3;
  --line: #21262d;
  --accent: #1f6feb;
  --accent-2: #6e40ff;
  --ok: #71f79f;
  --warn: #ffcc66;
  --bad: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f7f8fa; --panel:#ffffff; --text:#0b0c10; --line:#e5e7eb; --muted:#5b6672; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
header {
  padding: 28px 20px; border-bottom: 1px solid var(--line);
  background: radial-gradient(1200px 500px at 10% -20%, rgba(31,111,235,.18), transparent),
              radial-gradient(800px 400px at 90% -10%, rgba(110,64,255,.16), transparent);
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: .2px; }
p.sub { margin: 0; color: var(--muted); }
.badge-row { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  display:inline-block; font-size:12px; border:1px solid var(--line); border-radius:999px; padding:4px 10px;
  color: var(--muted); text-decoration:none; background: rgba(255,255,255,0.02);
}

main { padding: 24px 0 40px; }
.grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; box-shadow: var(--shadow);
}
label { display: block; font-weight: 700; margin: 8px 0 6px; }
input[type="password"], input[type="text"], select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  outline: none;
}
input::placeholder { color: var(--muted); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .row { grid-template-columns: 1fr; } }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
button {
  padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--accent), #1053c7); color: white;
  cursor: pointer; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(31,111,235,.35);
}
button.secondary {
  background: linear-gradient(180deg, #222831, #171b22);
  color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
button.ghost { background: transparent; border-style: dashed; color: var(--text); }
button:disabled { opacity: .6; cursor: not-allowed; }

.meta { font-size: 12px; color: var(--muted); margin-top: 8px; }
.status { border-left: 4px solid var(--line); padding-left: 10px; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }

pre {
  background: #0d1117; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; overflow: auto; max-height: 60vh; white-space: pre-wrap; word-break: break-word;
}
@media (prefers-color-scheme: light) {
  pre { background: #0f172a0f; }
}

.footer { color: var(--muted); font-size: 12px; text-align: center; margin-top: 24px; }

.summary {
  margin-bottom: 12px; border: 1px dashed var(--line); border-radius: 10px; padding: 12px;
  background: rgba(255,255,255,0.02);
}
.pill {
  display:inline-block; padding: 4px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; margin-right:8px;
}
.kpi { display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 6px;}
.kpi .pill.ok { border-color: rgba(113,247,159,.35); }
.kpi .pill.bad { border-color: rgba(255,107,107,.35); }
.kpi .pill.warn { border-color: rgba(255,204,102,.35); }
code { background: rgba(128,128,128,.12); padding: 2px 6px; border-radius: 8px; }
.mutey { color: var(--muted); }