:root {
  --bg: #f6f7f9; --panel: #ffffff; --text: #1d2330; --muted: #667085; --line: #e4e7ec;
  --accent: #2f5bea; --ok: #12805c; --warn: #b54708; --bad: #c01048; --chip: #eef2ff;
  --font: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1218; --panel: #171b23; --text: #e6e8ee; --muted: #98a2b3; --line: #2a303c; --accent: #7c9cff; --ok: #4cc38a; --warn: #f5a524; --bad: #f97066; --chip: #1f2740; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); }
a { color: var(--accent); text-decoration: none; }
.top { display: flex; gap: 16px; align-items: center; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 2; }
.brand { font-weight: 700; color: var(--text); }
#nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
#nav a { padding: 4px 8px; border-radius: 6px; color: var(--muted); }
#nav a.on { background: var(--chip); color: var(--accent); }
.logout { color: var(--muted); }
#banner .b { padding: 8px 16px; font-weight: 600; }
#banner .test { background: #fff4e5; color: #8a4b00; }
#banner .dry { background: var(--chip); color: var(--accent); }
#banner .kill { background: #fde8ec; color: var(--bad); }
@media (prefers-color-scheme: dark) { #banner .test { background: #3a2a10; color: #f5c46b; } #banner .kill { background: #3d1820; } }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 20px; margin: 4px 0 12px; } h2 { font-size: 16px; margin: 0 0 8px; } h3 { font-size: 14px; margin: 12px 0 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow: auto; }
.kpi { font-size: 22px; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.m { cursor: pointer; border-bottom: 1px dashed var(--muted); }
.na { color: var(--muted); font-style: italic; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--chip); font-size: 12px; margin: 1px 2px; }
.chip.ok { color: var(--ok); } .chip.warn { color: var(--warn); } .chip.bad { color: var(--bad); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
button { font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { color: var(--bad); }
input, select, textarea { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
textarea { width: 100%; min-height: 120px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); max-width: min(760px, 95vw); }
dialog pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; }
pre { white-space: pre-wrap; word-break: break-word; }
.err { color: var(--bad); }
.login { display: grid; place-items: center; min-height: 100vh; }
.login form { display: grid; gap: 10px; width: min(360px, 92vw); }
.bar { display: flex; gap: 2px; align-items: flex-end; height: 40px; }
.bar span { flex: 1; background: var(--accent); opacity: .7; border-radius: 2px 2px 0 0; min-height: 1px; }
.bar span.none { background: var(--line); }
.h10 { height: 10%; } .h20 { height: 20%; } .h30 { height: 30%; } .h40 { height: 40%; } .h50 { height: 50%; } .h60 { height: 60%; } .h70 { height: 70%; } .h80 { height: 80%; } .h90 { height: 90%; } .h100 { height: 100%; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } main { padding: 10px; } }