:root {
  --bg: #f6f7f9; --card: #fff; --ink: #14181f; --muted: #667085; --line: #e4e7ec;
  --brand: #0f3d2e; --accent: #1a7f5a; --warn: #b54708; --bad: #b42318; --good: #067647;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1116; --card: #161b22; --ink: #e6e9ee; --muted: #8b95a5; --line: #262d38; --brand: #6ee7b7; --accent: #34d399; --warn: #fdb022; --bad: #f97066; --good: #47cd89; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
header { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header .logo { font-weight: 700; color: var(--brand); letter-spacing: .02em; }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
nav button { background: none; border: 0; padding: 8px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; font: inherit; }
nav button.on { background: var(--bg); color: var(--ink); font-weight: 600; }
main { max-width: 1180px; margin: 0 auto; padding: 20px; }
h1 { font-size: 20px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 22px 0 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.kpi .l { color: var(--muted); font-size: 12px; }
.kpi .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
tr.total td { font-weight: 650; }
.neg { color: var(--bad); } .pos { color: var(--good); } .warn { color: var(--warn); }
input, select, textarea, button.btn { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
input[type=number] { width: 110px; text-align: right; }
button.btn { cursor: pointer; background: var(--brand); color: var(--bg); border-color: var(--brand); font-weight: 600; }
button.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
button.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.banner { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; background: color-mix(in srgb, var(--warn) 14%, var(--card)); border: 1px solid var(--warn); }
.banner.bad { background: color-mix(in srgb, var(--bad) 12%, var(--card)); border-color: var(--bad); }
.banner.ok { background: color-mix(in srgb, var(--good) 12%, var(--card)); border-color: var(--good); }
.muted { color: var(--muted); font-size: 13px; }
.login { max-width: 360px; margin: 12vh auto; }
.login .card { display: flex; flex-direction: column; gap: 10px; }
textarea.json { width: 100%; min-height: 420px; font: 12px/1.4 ui-monospace, monospace; }
svg.chart { width: 100%; height: 220px; }