.layout > .compare-filters { grid-template-columns: minmax(90px, 0.6fr) minmax(200px, 1.6fr) minmax(90px, 0.6fr) minmax(120px, 0.8fr) minmax(200px, 1.4fr); }
.compare-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.8fr); }
.compare-kpis .metric strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.strip-chart { height: auto; }
.chart svg text.row-sub { fill: var(--muted); font-size: 11px; font-weight: 400; }
.legend-dash { width: 16px; height: 0; border-top: 2px dashed var(--ink-2); opacity: 0.7; }

.inline-select { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.inline-select select { width: auto; min-width: 220px; height: 32px; font-size: 12px; }

tr.is-selectable { cursor: pointer; }
tr.is-reference td { background: rgba(255, 255, 255, 0.035); }
tr.is-highlight td { background: rgba(143, 179, 255, 0.08); }
tr.is-highlight td:first-child { box-shadow: inset 2px 0 0 #8fb3ff; }
tr.is-selectable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.level {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}
.level-gold, .level-silver, .level-bronze { border-color: transparent; color: #121516; }
.level-gold { background: var(--gold); }
.level-silver { background: var(--silver); }
.level-bronze { background: var(--bronze); }
.level-top8 { border-color: rgba(87, 241, 219, 0.5); color: var(--accent); }
.level-outside { color: var(--muted); border-style: dashed; }
.level-reference { color: var(--ink); }

td.result { line-height: 1.3; }
td.result .mark { display: block; color: var(--ink); font: 12px var(--mono); }
td.result .who { display: block; color: var(--muted); font-size: 11.5px; }

@media (max-width: 1180px) {
  .compare-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare-kpis .metric--aside { grid-column: span 3; }
}
@media (max-width: 1000px) {
  .layout > .compare-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout > .compare-filters label:nth-child(2) { grid-column: span 2; }
  .compare-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-kpis .metric--aside { grid-column: span 2; }
}
@media (max-width: 700px) {
  #filterDialog .compare-filters label:nth-child(2), #filterDialog .compare-filters label:nth-child(5) { grid-column: 1 / -1; }
  #filterDialog .compare-filters label:last-child { grid-column: 1 / -1; }
  .inline-select { width: 100%; }
  .inline-select select { flex: 1; min-width: 0; }
}

.panel-heading h2 span { color: inherit; font-size: inherit; }