/* Source StatsPanel B3, group map Kx and section heading Ta. */
.open-stats {
  --stats-primary: oklch(68% .15 230);
  --stats-bg: oklch(98% .005 250);
  --stats-ink: oklch(18% .02 260);
  --stats-muted: oklch(95% .008 250);
  --stats-muted-ink: oklch(50% .02 260);
  --stats-border: oklch(91% .01 240);
  --stats-shadow: 0 1px 3px oklch(68% .15 230 / .08), 0 1px 2px #0000000a;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--stats-ink);
}
.open-stats-toolbar { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in oklab, var(--stats-muted) 30%, transparent); box-shadow: var(--stats-shadow); }
.open-stats-toolbar h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.open-stats-toolbar p { margin: 0; color: var(--stats-muted-ink); font-size: 12px; line-height: 16px; }
.open-stats-controls { display: grid; gap: 8px; }
.open-stats-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 999px; background: color-mix(in oklab, var(--stats-bg) 70%, transparent); }
.open-stats-day { min-width: 0; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--stats-muted-ink); font-size: 12px; font-weight: 500; line-height: 16px; transition: background-color .15s, color .15s; }
.open-stats-day:hover { background: var(--stats-muted); }
.open-stats-day.active { background: var(--stats-primary); color: white; box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a; }
.open-stats-custom-date { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--stats-border); border-radius: 14px; background: var(--stats-bg); color: var(--stats-muted-ink); font-size: 12px; line-height: 16px; }
.open-stats-custom-date > span { flex-shrink: 0; }
.open-stats-custom-date input { min-width: 0; width: 100%; flex: 1; padding: 0; border: 0; background: transparent; color: var(--stats-ink); font-family: var(--number-font, AlimamaShuHeiTi, 'Courier New', monospace); font-size: 14px; line-height: 20px; }
.open-stats-insight { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border: 1px solid color-mix(in oklab, var(--stats-primary) 10%, transparent); border-radius: 10px; background: color-mix(in oklab, var(--stats-primary) 3%, transparent); color: color-mix(in oklab, var(--stats-ink) 80%, transparent); font-size: 12px; line-height: 1.625; }
.open-stats-insight > span { flex-shrink: 0; margin-top: 2px; color: color-mix(in oklab, var(--stats-primary) 60%, transparent); }
.open-stats-insight p { margin: 0; }
.open-stats-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in oklab, var(--stats-muted) 40%, transparent); box-shadow: var(--stats-shadow); }
.open-stats-total > span { color: var(--stats-muted-ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.open-stats-number { color: var(--stats-primary); font-family: var(--number-font, AlimamaShuHeiTi, 'Courier New', monospace); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.open-stats-total > strong { font-size: 18px; line-height: 28px; }
.open-stats-group { overflow: hidden; border: 1px solid color-mix(in oklab, var(--stats-border) 60%, transparent); border-radius: 10px; box-shadow: var(--stats-shadow); }
.open-stats-group-heading { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid color-mix(in oklab, var(--stats-border) 40%, transparent); background: color-mix(in oklab, var(--stats-muted) 30%, transparent); }
.open-stats-group-heading > i { width: 4px; height: 16px; flex-shrink: 0; border-radius: 999px; background: linear-gradient(to bottom, var(--stats-primary), color-mix(in oklab, var(--stats-primary) 50%, transparent)); }
.open-stats-group-heading h3 { margin: 0; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .025em; }
.open-stats-grid { display: grid; }
.open-stats-grid.cols-2, .open-stats-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.open-stats-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.open-stats-pair-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid color-mix(in oklab, var(--stats-border) 30%, transparent); background: color-mix(in oklab, var(--stats-muted) 30%, transparent); }
.open-stats-pair-head:not(:first-child) { border-left: 1px solid color-mix(in oklab, var(--stats-border) 30%, transparent); }
.open-stats-pair-head > span { padding: 6px 8px; color: var(--stats-muted-ink); font-size: 12px; font-weight: 600; line-height: 16px; text-align: center; }
.open-stats-extra-head { display: none; }
.open-stats-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; padding: 8px 0; border-bottom: 1px solid color-mix(in oklab, var(--stats-border) 20%, transparent); transition: background-color .15s; }
.open-stats-item:nth-child(even) { background: color-mix(in oklab, var(--stats-primary) 3%, transparent); }
.open-stats-item:hover { background: color-mix(in oklab, var(--stats-primary) 6%, transparent); }
.cols-2 > .open-stats-item:nth-child(even), .cols-4 > .open-stats-item:nth-child(even), .cols-3 > .open-stats-item:not(:nth-child(3n + 1)) { border-left: 1px solid color-mix(in oklab, var(--stats-border) 30%, transparent); }
.open-stats-label { display: flex; justify-content: center; min-width: 0; }
.open-stats-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 2px 10px; border-radius: 8px; background: oklch(68.5% .169 237.323); color: white; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.open-stats-badge.is-blue { background: oklch(62.3% .214 259.815); }
.open-stats-badge.is-red { background: oklch(63.7% .237 25.331); }
.open-stats-badge.is-emerald { background: oklch(69.6% .17 162.48); }
.open-stats-badge.is-orange { background: oklch(70.5% .213 47.604); }
.open-stats-badge.is-cyan { background: oklch(71.5% .143 215.221); }
.open-stats-badge.is-purple { background: oklch(62.7% .265 303.9); }
.open-stats-badge.is-gray { background: oklch(55.1% .027 264.364); }
.open-stats-badge.is-amber { background: oklch(76.9% .188 70.08); }
.open-stats-badge.is-red-dark { background: oklch(57.7% .245 27.325); }
.open-stats-value { min-width: 0; font-size: 14px; line-height: 20px; text-align: center; }
.open-stats-unit { margin-left: 2px; color: var(--stats-muted-ink); font-size: 12px; }
.open-stats-percentage { margin-left: 4px; color: var(--stats-muted-ink); font-size: 12px; }
.open-stats-note, .open-stats-empty { margin: 0; color: var(--stats-muted-ink); font-size: 12px; line-height: 1.625; }
.open-stats-empty { padding: 8px 12px; border-radius: 10px; background: color-mix(in oklab, var(--stats-muted) 30%, transparent); }
@media (min-width: 640px) {
  .open-stats-toolbar, .open-stats-group-heading { padding-left: 16px; padding-right: 16px; }
  .open-stats-controls { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .open-stats-day { font-size: 14px; line-height: 20px; }
  .open-stats-custom-date { height: 36px; font-size: 14px; line-height: 20px; }
  .open-stats-custom-date input { width: 142px; }
  .open-stats-insight { font-size: 13px; }
  .open-stats-total { padding: 10px 16px; }
  .open-stats-total > span { font-size: 16px; line-height: 24px; }
  .open-stats-total > strong { font-size: 20px; }
  .open-stats-group-heading h3 { font-size: 14px; line-height: 20px; }
  .open-stats-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .open-stats-extra-head { display: grid; }
  .open-stats-pair-head > span { font-size: 14px; line-height: 20px; }
  .cols-4 > .open-stats-item:not(:nth-child(4n + 1)) { border-left: 1px solid color-mix(in oklab, var(--stats-border) 30%, transparent); }
  .open-stats-badge { font-size: 14px; line-height: 20px; }
  .open-stats-value { font-size: 16px; line-height: 24px; }
  .open-stats-unit { font-size: 14px; }
}
@media (max-width: 379px) {
  .open-stats-grid.cols-3 .open-stats-percentage { display: block; margin-left: 0; font-size: 10px; }
}