:root {
  color-scheme: dark;
  --bg:#0c0a13; --panel:#151120; --panel2:#1c1729; --panel3:#241d35;
  --text:#efebfa; --muted:#8c82ab; --muted-2:#645b80;
  --line:#2b2340; --line-soft:#221b33;
  --accent:#a78bfa; --accent-hover:#c4b5fd; --accent-deep:#7c5ce8;
  --accent-soft: rgba(167,139,250,.12);
  --good:#8b7fe8; --warn:#e8b14c; --bad:#f2637e;
  --radius:10px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Heebo, "IBM Plex Sans", system-ui, sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f5f3fa; --panel:#fff; --panel2:#faf8fe; --panel3:#f2eefb;
  --text:#191428; --muted:#6a6088; --muted-2:#8b83a5;
  --line:#e3dcf2; --line-soft:#ede8f8;
  --accent:#6d4fd8; --accent-hover:#5636c4; --accent-deep:#5636c4;
  --accent-soft: rgba(109,79,216,.1);
  --good:#6d5fd0; --warn:#a8730c; --bad:#c9314f;
  --shadow: 0 1px 2px rgba(80,60,140,.06), 0 8px 24px -14px rgba(80,60,140,.22);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; font: 15px/1.45 var(--sans); color:var(--text);
  background: radial-gradient(900px 380px at 18% -8%, var(--accent-soft), transparent 70%), var(--bg); }
button, input, textarea, select { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.kicker { text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--muted); margin:0 0 4px; }
h1 { margin:0; font-size:28px; letter-spacing:-.03em; }
h2 { margin:0 0 12px; font-size:16px; }
.lede { color:var(--muted); }
.auth { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.auth-card, .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.auth-card { max-width:420px; width:100%; }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
input, textarea, select { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; min-height:44px; }
.btn { min-height:44px; padding:0 16px; border-radius:8px; border:0; background:var(--accent-deep); color:#fff; cursor:pointer; }
.btn:hover, .btn:focus-visible { background:var(--accent-hover); color:#1a1228; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.danger { background:var(--bad); }
.err { color:var(--bad); }
#app { max-width:1180px; margin:0 auto; padding:20px 16px 80px; }
.top { display:flex; justify-content:space-between; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.top-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.strip { display:flex; align-items:flex-end; gap:2px; height:46px; border-bottom:1px solid var(--line-soft); padding-bottom:1px; }
.seg { flex:1 1 0; min-width:0; height:max(5px,var(--h)); border:0; padding:0; cursor:pointer; border-radius:2px 2px 0 0; }
.seg.good { background:linear-gradient(180deg,var(--good), color-mix(in srgb,var(--good) 45%,transparent)); }
.seg.warn { background:linear-gradient(180deg,var(--warn), color-mix(in srgb,var(--warn) 55%,transparent)); }
.seg.bad { background:linear-gradient(180deg,var(--bad), color-mix(in srgb,var(--bad) 55%,transparent)); }
.seg.unknown { height:8px; background:repeating-linear-gradient(45deg,var(--line),var(--line) 2px,transparent 2px,transparent 4px); }
.legend { display:flex; gap:18px; padding:10px 0 16px; font-size:11px; color:var(--muted); flex-wrap:wrap; }
.legend b { font-family:var(--mono); font-weight:500; color:var(--text); }
.tabs { display:flex; gap:6px; overflow:auto; padding-bottom:10px; }
.tabs button { min-height:40px; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:0 14px; cursor:pointer; }
.tabs button.on { background:var(--accent-soft); border-color:var(--accent); }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.kv { display:grid; grid-template-columns:140px 1fr; gap:6px 12px; margin:0; }
.kv dt { color:var(--muted); font-size:12px; }
.kv dd { margin:0; font-family:var(--mono); }
.stack { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.row label { flex:1; min-width:160px; }
.check { flex-direction:row; align-items:center; gap:8px; }
.log { background:var(--panel2); border:1px solid var(--line-soft); border-radius:8px; padding:12px; overflow:auto; max-height:52vh; white-space:pre-wrap; font-family:var(--mono); font-size:12px; }
.job { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); cursor:pointer; }
@media (max-width:720px) {
  .top { align-items:stretch; }
  .top-actions { width:100%; }
  .btn, .tabs button { flex:1; }
}
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }