:root {
  --bg: #eef1f4; --panel: #fff; --ink: #18212b; --muted: #66717d; --line: #d5dbe1;
  --fiber: #1f5fa8;
  --green: #17803d; --green-bg: #e4f4e9;
  --yellow: #a36a00; --yellow-bg: #fff3d1; --yellow-dot: #e0a400;
  --red: #c42b2b; --red-bg: #fde6e6;
  --gray: #8a939c; --gray-bg: #f1f3f5;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 "Segoe UI", Ubuntu, "DejaVu Sans", Arial, sans-serif; }
a { color: var(--fiber); }
header.top { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; background: var(--ink); color: #fff; border-bottom: 3px solid var(--fiber); }
header.top a { color: #fff; }
.logo { font-weight: 700; font-size: 16px; text-decoration: none; }
main { max-width: 1440px; margin: 0 auto; padding: 16px 20px 40px; }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 17px; margin: 26px 0 8px; }
.muted { color: var(--muted); }
.right { margin-left: auto; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-left: 8px solid var(--gray);
  border-radius: 6px; padding: 8px 14px; color: var(--ink); text-decoration: none; }
.card .num { display: block; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card.c-green { border-left-color: var(--green); }
.card.c-yellow, .card.c-degraded { border-left-color: var(--yellow-dot); }
.card.c-red { border-left-color: var(--red); }
.card.active { box-shadow: inset 0 0 0 2px var(--fiber); }

.bar { background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bar.measure { border-left: 4px solid var(--fiber); }
.bar.col { flex-direction: column; align-items: stretch; }
.bar.col .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
input, select, button, .btn { font: inherit; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 4px; background: #fff; color: var(--ink); }
button, .btn { background: var(--fiber); border-color: var(--fiber); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.btn.ghost { background: #fff; color: var(--fiber); }
button.danger { background: #fff; color: var(--red); border-color: var(--red); }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 2px solid var(--fiber); outline-offset: 2px; }
.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.grid2 form { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }

.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
td.desc { white-space: normal; min-width: 160px; }
th { background: #e3e8ed; position: sticky; top: 0; font-weight: 600; }
th.sortable { cursor: pointer; user-select: none; }
th[aria-sort="ascending"]::after { content: " ▲"; }
th[aria-sort="descending"]::after { content: " ▼"; }
td.lvl { font-weight: 700; font-variant-numeric: tabular-nums; }
tr.c-green td.lvl { color: var(--green); }
tr.c-yellow { background: var(--yellow-bg); } tr.c-yellow td.lvl { color: var(--yellow); }
tr.c-red { background: var(--red-bg); } tr.c-red td.lvl { color: var(--red); }
tr.c-gray { background: var(--gray-bg); color: var(--gray); }
tbody tr:hover { filter: brightness(.97); }
.degr { color: var(--red); font-weight: 700; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.badge.c-green { background: var(--green-bg); color: var(--green); }
.badge.c-yellow { background: var(--yellow-dot); color: #2a1d00; }
.badge.c-red { background: var(--red); color: #fff; }
.badge.c-gray { background: #dfe3e7; color: #4d555d; }

.msg { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.msg.ok { background: var(--green-bg); } .msg.warn { background: var(--yellow-bg); } .msg.err { background: var(--red-bg); }
pre.out { background: var(--ink); color: #dfe6ec; padding: 12px; border-radius: 6px; overflow: auto; max-height: 480px; }
.empty { background: var(--panel); border: 1px dashed var(--line); padding: 24px; text-align: center; border-radius: 6px; }
.links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill { padding: 3px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; }
.pill.active { background: var(--fiber); color: #fff; border-color: var(--fiber); }
.login { max-width: 340px; margin: 60px auto; }

svg.chart { width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
svg .band.green { fill: var(--green); opacity: .08; }
svg .band.yellow { fill: var(--yellow-dot); opacity: .16; }
svg .band.red { fill: var(--red); opacity: .09; }
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .axis { fill: var(--muted); font-size: 11px; }
svg .line { fill: none; stroke: var(--fiber); stroke-width: 2; }
svg .pt { stroke: #fff; stroke-width: 1; }
svg .pt.green { fill: var(--green); } svg .pt.yellow { fill: var(--yellow-dot); } svg .pt.red { fill: var(--red); }
svg .off { stroke: var(--gray); stroke-width: 2; }