.stats {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 30px);
  display: grid; gap: 22px;
}
.stats-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
.src { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--mono); color: var(--ink-muted); background: var(--surface-muted); border-radius: 8px; padding: 7px 10px; }
.src.sample { background: var(--warn-tint); color: var(--warn-deep); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; background: var(--surface-sunken); }
.seg button { font: 600 13px/1 var(--sans); color: var(--ink-muted); background: transparent; border: 0; padding: 8px 11px; border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.tile small { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.tile strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile span { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }

.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--ink-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { inline-size: 12px; block-size: 12px; border-radius: 3px; }

.chart { position: relative; }
.chart svg { display: block; inline-size: 100%; overflow: visible; }
.chart text { font: 500 11px var(--mono); fill: var(--ink-faint); }
.tip {
  position: absolute;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  font-size: 13px;
  min-inline-size: 160px;
  z-index: 3;
  color: var(--ink-body);
}
.tip b { display: block; color: var(--ink); margin-bottom: 6px; }
.tip div { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.tip div i { inline-size: 9px; block-size: 9px; border-radius: 2px; }
.tip div em { font-style: normal; margin-inline-start: auto; font-weight: 600; color: var(--ink); }
.tip .tot { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }

.tbl-wrap { overflow: auto; max-height: 340px; border: 1px solid var(--border); border-radius: 12px; }
table { border-collapse: collapse; inline-size: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { position: sticky; top: 0; background: var(--surface-sunken); font: 600 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
td { color: var(--ink-secondary); }

.stats-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-muted); justify-content: space-between; }
.linkish { background: none; border: 0; padding: 0; font: 600 13px var(--sans); color: var(--accent-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }