.stats { display: flex; flex-direction: column; gap: 20px; }
.stats__bar {
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.stats__bar-label { font-size: 0.9688rem; color: var(--muted); }
.stats__updated { margin-left: auto; font-size: 0.875rem; color: var(--muted-3); }
.kpis {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.kpi {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-top: 4px solid var(--brand);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.kpi__value {
  font-size: 2.25rem; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.kpi__value small {
  margin-left: 6px; font-size: 1.125rem; font-weight: 600; color: var(--muted-3);
}
.kpi__label { font-size: 0.9688rem; line-height: 1.3; color: var(--muted); }
.stats__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;
}
.stat-card {
  grid-column: span 6;
  min-width: 0;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.stat-card--wide { grid-column: span 8; }
.stat-card--narrow { grid-column: span 4; }
.stat-card--full { grid-column: 1 / -1; }
.stat-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.stat-card__title {
  font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.stat-card__note {
  margin-top: 6px; font-size: 0.875rem; line-height: 1.45; color: var(--muted);
}
.stat-card__view {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-3);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
  cursor: pointer;
}
.stat-card__view:hover { border-color: var(--brand); color: var(--brand); }
.stat-card__view[aria-pressed="true"] {
  border-color: var(--brand); background: var(--brand-tint); color: var(--brand);
}
.stat-card__body { position: relative; flex: 1 1 auto; margin-top: 20px; min-width: 0; }
.stat-tip {
  position: absolute;
  z-index: 5;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8438rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(20, 33, 61, .2);
}
.stat-tip[hidden] { display: none; }
.cols { padding-left: 44px; margin-bottom: 28px; }
.cols__plot { position: relative; height: 260px; }
.cols__grid--0 { bottom: 100%; }
.cols__grid--1 { bottom: 75%; }
.cols__grid--2 { bottom: 50%; }
.cols__grid--3 { bottom: 25%; }
.cols__grid--4 { bottom: 0; }
.cols__grid {
  position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line-soft);
}
.cols__grid--4 { border-top-color: var(--line-3); }
.cols__tick {
  position: absolute;
  right: calc(100% + 10px);
  top: -0.6em;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--muted-3);
  white-space: nowrap;
}
.cols__bars {
  position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px;
}
.cols__col {
  position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default;
}
.cols__col:focus { outline: none; }
.cols__col:focus-visible .cols__bar { outline: 2px solid var(--brand); outline-offset: 2px; }
.cols__svg { display: block; width: 100%; max-width: 44px; height: 100%; overflow: visible; }
.cols__bar { fill: var(--brand); transition: fill .15s; }
.cols__col.is-hot .cols__bar { fill: var(--brand-deep); }
.cols__label {
  position: absolute;
  top: calc(100% + 8px);
  font-size: 0.8125rem;
  color: var(--muted);
}
.hbars { display: flex; flex-direction: column; gap: 14px; }
.hbars__row {
  display: flex; flex-direction: column; gap: 6px; cursor: default; border-radius: 4px;
}
.hbars__text {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 0.9375rem; line-height: 1.3;
}
.hbars__name { min-width: 0; color: var(--ink); }
.hbars__value {
  flex: 0 0 auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
.hbars__track { height: 10px; border-radius: 4px; background: var(--line-soft); }
.hbars__svg { display: block; width: 100%; height: 100%; }
.hbars__bar { fill: var(--brand); transition: fill .15s; }
.hbars__row.is-hot .hbars__bar { fill: var(--brand-deep); }
.donut2 {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.donut2__chart { position: relative; width: 200px; height: 200px; flex: 0 0 auto; }
.donut2__chart svg { display: block; width: 100%; height: 100%; }
.donut2__seg {
  stroke: var(--surface); stroke-width: 0.6; transition: opacity .15s; cursor: default; outline: none;
}
.donut2__chart:has(.is-hot) .donut2__seg:not(.is-hot) { opacity: .45; }
.donut2__center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;
}
.donut2__value { font-size: 2rem; font-weight: 600; color: var(--ink); }
.donut2__caption { font-size: 0.8125rem; color: var(--muted); }
.stat-legend {
  list-style: none; margin: 0; padding: 0; align-self: stretch; display: flex; flex-direction: column; gap: 9px;
}
.stat-legend__item {
  display: flex; align-items: center; gap: 10px; font-size: 0.9063rem; color: var(--ink);
}
.stat-legend__swatch { flex: 0 0 auto; }
.stat-legend__name { min-width: 0; margin-right: auto; }
.stat-legend__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-legend__pct {
  min-width: 3.2em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums;
}
.stat-legend--row { flex-direction: row; flex-wrap: wrap; gap: 10px 32px; }
.stat-legend--row .stat-legend__name { margin-right: 4px; }
.stat-stack { display: flex; flex-direction: column; gap: 18px; }
.stat-stack__bar { display: block; width: 100%; height: 44px; overflow: visible; }
.stat-stack__seg { stroke: var(--surface); stroke-width: 2px; cursor: default; transition: filter .15s; outline: none; }
.stat-stack__seg:focus-visible { stroke: var(--ink); }
.stat-stack__seg.is-hot { filter: brightness(.9); }
.stat-stack__pct { font-size: 0.875rem; font-weight: 600; pointer-events: none; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.stat-table th,
.stat-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: left;
}
.stat-table thead th {
  font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em;
}
.stat-table tbody th { font-weight: 400; color: var(--ink); }
.stat-table td {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.stat-table thead th:not(:first-child) { text-align: right; }
.stat-table tfoot th,
.stat-table tfoot td { font-weight: 600; border-bottom: 0; }
@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-card--wide,
  .stat-card--narrow { grid-column: 1 / -1; }
  .stat-card--narrow .stat-card__donut2.donut2 { flex-direction: row; justify-content: center; gap: 40px; }
  .stat-card--narrow .stat-card__stat-legend.stat-legend { align-self: center; flex: 0 1 420px; }
}

@media (max-width: 900px) {
  .stat-card { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .stats__updated { margin-left: 0; width: 100%; }
  .stats__bar .stats__toggle.toggle-group { width: 100%; }
  .stats__bar .stats__toggle.toggle-group button { flex: 1; padding: 0 8px; }
  .kpi { padding: 16px; }
  .kpi__value { font-size: 1.75rem; }
  .stat-card { padding: 18px 16px 20px; }
  .stat-card--narrow .stat-card__donut2.donut2 { flex-direction: column; gap: 22px; }
  .stat-card--narrow .stat-card__stat-legend.stat-legend { align-self: stretch; flex: none; }
  .cols { padding-left: 36px; }
  .cols__bars { gap: 4px; }
  .cols__label { font-size: 0.6875rem; }
}

.kpis[hidden],
[data-stat-view][hidden],
[data-period-panel][hidden] { display: none; }