/* Performance page */
.perf { max-width: 1520px; margin: 0 auto; padding: 22px 20px 10px; display: flex; flex-direction: column; gap: 16px; }
.perf-head h1 { font-size: 24px; margin: 0; letter-spacing: -0.01em; }
.perf-head p { margin: 4px 0 0; font-size: 13px; }
.filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 52px; z-index: 20; padding: 8px 0; background: linear-gradient(var(--bg) 70%, rgba(11, 13, 16, 0)); }
.filters .spacer { flex: 1; }
.f-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }

.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kpis-wind { grid-template-columns: repeat(5, 1fr); margin-top: -6px; }
.kpis-wind .kpi { padding: 10px 15px; }
.kpis-wind .kpi .v { font-size: 20px; }
.grid-wind { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; }
.grid-wind > div > .board { height: 100%; }
.map-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; }
.kpi .v { font-size: 26px; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.kpi .bar { height: 3px; border-radius: 2px; margin-top: 10px; background: var(--surface-3); overflow: hidden; }
.kpi .bar span { display: block; height: 100%; }

.grid-main { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { fill: var(--text-3); font-size: 10.5px; font-family: var(--font); }
.chart .axis path, .chart .axis line { stroke: var(--baseline); }
.chart .grid line { stroke: var(--grid); }
.chart .quad { fill: var(--text-3); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; }
.chart .dot { cursor: pointer; }
.chart .dot:hover { stroke: #fff; stroke-width: 1.5; }
.chart .state { fill: #171b21; stroke: #2a3038; stroke-width: 0.7; }

.legend-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--text-2); }
.legend-row .k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-row .ln { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
.legend-row .ramp { width: 110px; height: 8px; border-radius: 3px; display: inline-block; }

.board { padding-bottom: 8px; }
.board table, .tbl-wrap table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.board td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.board tr { cursor: pointer; }
.board tr:hover td { background: var(--surface-2); }
.board .rk { color: var(--text-3); width: 22px; font-variant-numeric: tabular-nums; }
.board .id { font-family: var(--mono); font-weight: 800; width: 50px; }
.board .nm { color: var(--text-2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; width: 56px; }
.board .bar { width: 70px; }
.board .bar div { height: 6px; border-radius: 3px; }
.board .empty { padding: 20px 4px; }

.conf { display: grid; grid-template-columns: 64px repeat(4, 1fr); gap: 3px; font-size: 12px; }
.conf .h { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-3); display: flex; align-items: center; justify-content: center; padding: 4px 0; }
.conf .rh { justify-content: flex-start; }
.conf .cell { border-radius: 6px; padding: 9px 8px; text-align: center; font-variant-numeric: tabular-nums; min-height: 52px; display: flex; flex-direction: column; justify-content: center; }
.conf .cell b { font-size: 15px; color: var(--text-1); }
.conf .cell span { font-size: 10.5px; color: var(--text-2); }
.conf-axis { grid-column: 2 / -1; text-align: center; font-size: 11px; color: var(--text-3); margin-top: 4px; }

.tbl-filter { height: 30px; width: 240px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: 12.5px; }
.tbl-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.tbl-wrap th { position: sticky; top: 0; background: var(--surface-2); text-align: right; font-weight: 700; color: var(--text-3); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
.tbl-wrap th:nth-child(-n+3) { text-align: left; }
.tbl-wrap th[aria-sort] { color: var(--text-1); }
.tbl-wrap td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-wrap td:nth-child(-n+3) { text-align: left; }
.tbl-wrap td.id { font-family: var(--mono); font-weight: 800; }
.tbl-wrap tr { cursor: pointer; }
.tbl-wrap tr:hover td { background: var(--surface-2); }
.tbl-wrap td.hl { color: #ffb38a; font-weight: 700; }

.method p { font-size: 13px; color: var(--text-2); margin: 8px 0; max-width: 70ch; }
.method-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.sev-defs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.sev-defs li { display: flex; gap: 10px; align-items: flex-start; }
.sev-defs .sev { flex: none; min-width: 120px; }

@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(3, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .grid-main, .grid-2, .grid-wind, .method-grid { grid-template-columns: 1fr; } .kpis-wind { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .perf { padding: 14px 10px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .filters { position: static; }
  .tbl-filter { width: 100%; }
}