/* 首页统计共享信息舱的玻璃底材，三列直接排在同一平面。 */
.stats-panel {
  --stats-rule: rgba(39,70,73,.23);
  --stats-live: #247c57;
  min-width: 0;
  padding: 0;
  padding-inline-start: clamp(22px, 3vw, 42px);
  border-inline-start: 1px solid var(--stats-rule);
}
html[data-theme=dark] .stats-panel {
  --stats-rule: rgba(220,243,248,.24);
  --stats-live: #a3e4b7;
}
.stats-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.stats-heading > [role=status] { font-weight: 620; }
.stats-heading > time {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stats-live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .55;
}
.stats-panel[data-stats-state=live] .stats-live-dot {
  background: var(--stats-live);
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stats-live) 14%, transparent);
}
.stats-panel:is([data-stats-state=stale],[data-stats-state=clock-skew]) .stats-live-dot {
  background: var(--gold);
  opacity: 1;
}
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.stats-card { --stat-accent: #206447; min-width: 0; padding-inline: clamp(10px, 1.4vw, 20px); }
.stats-card-total { --stat-accent: #2d5278; }
.stats-card-today { --stat-accent: #755026; }
html[data-theme=dark] .stats-card-online { --stat-accent: #a9e3ca; }
html[data-theme=dark] .stats-card-total { --stat-accent: #b5d8f7; }
html[data-theme=dark] .stats-card-today { --stat-accent: #f0d3a4; }
.stats-card:first-child { padding-inline-start: 0; }
.stats-card:last-child { padding-inline-end: 0; }
.stats-card + .stats-card { border-inline-start: 1px solid var(--stats-rule); }
.stats-card-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--stat-accent);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.45;
  white-space: nowrap;
}
.stats-icon { display: inline-flex; flex: none; }
.stats-icon svg { width: 16px; height: 16px; stroke-width: 1.7; }
.stats-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  margin-top: 9px;
  container-type: inline-size;
}
.stats-grid strong {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(39px, 4vw, 59px);
  font-weight: 580;
  line-height: 1.02;
  letter-spacing: -.055em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.stats-value small { color: var(--muted); font-size: 10px; }
.stats-number-visual {
  display: inline-block;
  transform-origin: center;
  font-size: min(1em, calc((100cqi - 16px) / var(--stat-number-width,1)));
}
.stats-number-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.stats-footnote,.stats-noscript { margin-top: 13px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.stats-footnote { text-align: end; }

@media (max-width:760px) {
  .stats-panel { padding-inline-start: 0; padding-top: 15px; border-inline-start: 0; border-top: 1px solid var(--stats-rule); }
}
@media (max-width:480px) {
  .stats-panel { padding-top: 13px; }
  .stats-heading { gap: 7px; margin-bottom: 13px; font-size: 11px; }
  .stats-heading > time { font-size: 9px; }
  .stats-card { padding-inline: 10px; }
  .stats-card-heading { gap: 4px; font-size: 10px; }
  .stats-icon svg { width: 13px; height: 13px; }
  .stats-value { gap: 4px; margin-top: 7px; }
  .stats-grid strong { font-size: 38px; }
  .stats-value small,.stats-footnote { font-size: 9px; }
  .stats-footnote { margin-top: 10px; }
}
@media (max-width:370px) {
  .stats-card { padding-inline: 8px; }
  .stats-grid strong { font-size: 34px; }
}