.stats { width: 90%; max-width: 900px; margin: 0 auto 16px; }
.totals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.totals div { flex: 1 1 140px; background: var(--surface0); border-radius: 8px; padding: 10px 12px; }
.totals b { display: block; font-size: 1.4rem; color: var(--mauve); }
.totals span { font-size: 0.7rem; color: var(--subtext0); }
.graph-title { color: var(--pink); font-size: 0.8rem; margin-top: 18px; }
.line { width: 100%; margin-top: 12px; }
.line svg { display: block; width: 100%; height: 220px; overflow: visible; }
.line .grid { stroke: var(--surface1); stroke-width: 1; }
.line .axis { fill: var(--overlay1); font-size: 10px; font-family: inherit; }
.line .area { fill: var(--mauve); opacity: 0.15; }
.line .stroke { fill: none; stroke: var(--mauve); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.line .dot { fill: var(--base); stroke: var(--mauve); stroke-width: 2; }
.line .dot:hover { fill: var(--pink); stroke: var(--pink); }
.line .val { fill: var(--subtext0); font-size: 10px; font-family: inherit; text-anchor: middle; }
.hbars { margin-top: 12px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 10px; align-items: center; }
.hbars .k { font-size: 0.72rem; color: var(--text); text-align: right; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .bar { display: flex; align-items: center; gap: 6px; }
.hbars .bar i { display: block; height: 14px; background: var(--green); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbars .bar span { font-size: 0.65rem; color: var(--subtext0); white-space: nowrap; }
@media (max-width: 600px) { .stats { width: 95%; } .hbars .k { max-width: 110px; } }