.stats-page {
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --grid: #e1e0d9;
  --axis: #898781;
  overflow-y: auto; height: auto; min-height: 100%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stats-page { --series-1: #3987e5; --series-2: #d95926; --grid: #2c2c2a; --axis: #898781; }
}
:root[data-theme="dark"] .stats-page { --series-1: #3987e5; --series-2: #d95926; --grid: #2c2c2a; --axis: #898781; }

.s-head {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.s-head h1 { margin: 0; font-size: 1.15em; display: flex; align-items: center; gap: 8px; flex: 1; }
.s-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.s-head .btn { width: 40px; height: 40px; box-shadow: none; border: 1px solid var(--border); }
.back { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); padding: 6px 8px 6px 2px; border-radius: 10px; }
.back:hover { background: var(--surface-2); color: var(--text); }

.s-main { max-width: 1180px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.filters-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters-row select {
  font: inherit; font-size: .9em; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); min-width: 150px;
}
.upd { margin-left: auto; font-size: .82em; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.tile .v { font-size: 1.9em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.tile .l { color: var(--muted); font-size: .85em; margin-top: 4px; }
.tile .s { color: var(--faint); font-size: .78em; margin-top: 2px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; }
.card h2 { margin: 0; font-size: 1em; }
.card .hint { margin: 2px 0 12px; color: var(--muted); font-size: .84em; }
.chart { position: relative; height: 260px; }
.chart.tall { height: 420px; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .88em; }
.table-wrap th, .table-wrap td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.table-wrap th { color: var(--muted); font-weight: 600; font-size: .9em; position: sticky; top: 0; background: var(--surface); }
.table-wrap td.n, .table-wrap th.n { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap tr.click { cursor: pointer; }
.table-wrap tr.click:hover td { background: var(--surface-2); }
.table-wrap .empty { color: var(--faint); padding: 18px 4px; }
.bar-cell { display: inline-block; height: 6px; border-radius: 3px; background: var(--series-1); vertical-align: middle; margin-right: 6px; }
.method p { color: var(--muted); font-size: .9em; margin: 8px 0 0; line-height: 1.55; }
.notice { margin: 0; }

@media (max-width: 820px) {
  .grid2 { grid-template-columns: 1fr; }
  .s-main { padding: 12px; gap: 12px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { padding: 12px; }
  .tile .v { font-size: 1.5em; }
  .chart { height: 220px; }
  .upd { width: 100%; margin-left: 0; }
}

.s-head { flex-wrap: wrap; row-gap: 4px; }
.s-head h1 { min-width: 0; }
@media (max-width: 560px) {
  .s-head { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .s-head .back span { display: none; }
  .s-head .back { font-size: .85em; }
}
.filters-row .seg { flex-wrap: wrap; }
.custom-range { display: inline-flex; align-items: center; gap: 6px; }
.custom-range input { font: inherit; font-size: .9em; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

.dis-msg { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0; background: color-mix(in srgb, var(--warn) 8%, transparent); }
.dis-msg summary { cursor: pointer; }
.dis-msg p { margin: 8px 0 2px; color: var(--muted); font-size: .9em; line-height: 1.5; }
#card-dis h3 { font-size: .95em; margin: 14px 0 6px; }