.side-nav a.active { background: #ffe9e9; color: #b42318; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.kpi-label { color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.kpi-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.kpi-sub { color: var(--ink-2); font-size: 12px; }
.kpi-bad .kpi-value { color: var(--bad); }
.kpi-ok .kpi-value { color: var(--ok); }
.chart { width: 100%; height: 200px; }
.chart rect.c { fill: #ffdb4d; }
.chart rect.p { fill: #1fb25a; }
.chart rect.n { fill: #e53935; }
.chart text { font-size: 10px; fill: #9a9ea6; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.dot-ok { background: #1fb25a; }
.dot-warn { background: #f5a623; }
.dot-down { background: #e53935; }
.dot-off { background: #c5c9cf; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: #fafafb; }
.table input.input { height: 32px; width: 110px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .input { width: auto; min-width: 220px; }
.tabs-inline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
pre.details { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--bg); padding: 8px; border-radius: 8px; margin: 4px 0 0; max-height: 140px; overflow: auto; }
.uptime { display: flex; gap: 2px; height: 22px; align-items: flex-end; }
.uptime span { flex: 1; min-width: 3px; border-radius: 2px; background: #1fb25a; height: 100%; }
.uptime span.d { background: #e53935; }
.uptime span.e { background: #e7e9ed; }