.stats-dashboard { overflow-x: hidden; background: #f8fafc; }
.stats-metric { min-height: 86px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; background: #fff; }
.stats-metric span, .stats-metric strong { display: block; }
.stats-metric span { font-size: .72rem; line-height: 1.3; color: #64748b; }
.stats-metric strong { margin-top: 8px; font-size: .95rem; color: #0f172a; }
.stats-tab { flex: 0 0 auto; border-bottom: 2px solid transparent; padding: 12px 14px; color: #64748b; font-size: .8rem; font-weight: 600; }
.stats-tab:hover, .stats-tab.is-active { border-color: #2563eb; color: #1d4ed8; }
.stats-scale { display: flex; align-items: center; gap: 4px; color: #64748b; font-size: .7rem; }
.stats-scale i { width: 16px; height: 16px; border-radius: 3px; background: #dbeafe; }
.stats-scale i:nth-of-type(2) { background: #93c5fd; }.stats-scale i:nth-of-type(3) { background: #60a5fa; }.stats-scale i:nth-of-type(4) { background: #2563eb; }
.stats-cell { width: 100%; min-width: 0; min-height: 42px; padding: 0; border: 1px solid rgba(148, 163, 184, .26); border-radius: 6px; background: var(--cell-color); color: #0f172a; text-align: center; transition: transform .15s, box-shadow .15s; }
.stats-cell:hover, .stats-cell:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15, 23, 42, .12); outline: 2px solid #2563eb; outline-offset: 2px; }
.stats-cell span, .stats-cell small { display: block; }.stats-cell span { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: .78rem; }.stats-cell small { margin-top: 1px; font-size: .6rem; opacity: .75; }
#stats-detail dt { font-size: .72rem; color: #64748b; } #stats-detail dd { margin-top: 3px; color: #0f172a; font-weight: 600; }
.stats-rank-row { display: grid; grid-template-columns: 24px 42px minmax(0, 1fr) 72px; align-items: center; width: 100%; gap: 8px; border-radius: 6px; padding: 6px; text-align: left; transition: background .15s; }
button.stats-rank-row:hover { background: #f8fafc; }.stats-rank-row strong { font-family: "IBM Plex Mono", monospace; color: #0f172a; }.stats-rank { color: #94a3b8; font-size: .72rem; text-align: center; }.stats-rank-row small { color: #64748b; font-size: .68rem; line-height: 1.25; text-align: right; }
.stats-bar { height: 7px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }.stats-bar i { display: block; height: 100%; border-radius: inherit; background: #2563eb; }
.stats-split { display: flex; height: 32px; overflow: hidden; border-radius: 6px; background: #e2e8f0; }.stats-split i, .stats-split b { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; font-style: normal; white-space: nowrap; }.stats-split i { background: #2563eb; }.stats-split b { background: #e11d48; }
.stats-compare { display: flex; flex-direction: column; gap: 3px; }.stats-compare i, .stats-compare b { display: block; height: 5px; border-radius: 999px; }.stats-compare i { background: #2563eb; }.stats-compare b { background: #94a3b8; }.stats-key { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 999px; }.stats-key-primary { background: #2563eb; }.stats-key-slate { background: #94a3b8; }
.stats-shortlist-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #bfdbfe; border-radius: 6px; background: #fff; padding: 4px 8px; font-family: "IBM Plex Mono", monospace; font-size: .78rem; font-weight: 700; color: #1d4ed8; }.stats-shortlist-item span { color: #64748b; }
@media (max-width: 639px) { .stats-rank-row { grid-template-columns: 20px 36px minmax(0, 1fr) 58px; gap: 6px; }.stats-rank-row small { font-size: .62rem; }.stats-cell { min-height: 32px; }.stats-cell span { font-size: .62rem; }.stats-cell small { font-size: .5rem; } }