.kpi-grid{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.kpi-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi-grid--spaced{margin-bottom:var(--space-4)}.kpi-card{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.kpi-head{align-items:center;gap:var(--space-2);min-width:0;display:flex}.kpi-icon{color:var(--primary-500);flex-shrink:0;display:inline-flex;position:relative}.kpi-icon>svg{display:block}.kpi-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kpi-reading{min-width:0}.kpi-value{font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--text-primary);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;line-height:1.15;overflow:hidden}.kpi-card.tone-primary .kpi-value{color:var(--primary-500)}.kpi-card.tone-success .kpi-value{color:var(--success-text)}.kpi-card.tone-warning .kpi-value{color:var(--warning-text)}.kpi-card.is-muted .kpi-value,.kpi-value.is-loading{color:var(--text-muted)}.kpi-hint{margin:var(--space-1) 0 0;color:var(--text-muted);font-size:var(--text-xs);line-height:var(--leading-snug);overflow-wrap:anywhere}.kpi-options{gap:var(--space-1);touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-user-select:none;user-select:none;flex-wrap:nowrap;min-width:0;margin-top:auto;display:flex;overflow:auto hidden}.kpi-options::-webkit-scrollbar{display:none}.kpi-option{padding:var(--space-1) var(--space-2);border-radius:var(--chip-radius);color:var(--chip-idle-color);font-size:var(--text-xs);font-weight:var(--chip-weight);font-family:var(--font-family);white-space:nowrap;line-height:var(--leading-snug);cursor:pointer;transition:var(--ease-color);background:0 0;border:1px solid #0000;flex-shrink:0;position:relative;overflow:hidden}.kpi-option:hover{background:var(--chip-hover-bg)}.kpi-option.is-active{background:var(--chip-active-bg);color:var(--chip-active-color);border:var(--chip-active-border);font-weight:var(--weight-semibold)}.kpi-option:focus-visible{outline:2px solid var(--primary-500);outline-offset:-2px}.kpi-option-ripple{border-radius:inherit;pointer-events:none;background:currentColor;animation:.45s ease-out both kpiRipple;position:absolute;inset:0}.kpi-number-enter{animation:.2s cubic-bezier(.22,1,.36,1) both kpiNumberIn}.kpi-pulse-dot{border-radius:var(--radius-full);display:inline-block;position:relative}.kpi-pulse-dot:after{content:"";border-radius:inherit;background:currentColor;animation:1.4s ease-out infinite kpiPing;position:absolute;inset:0}.kpi-icon-dot{width:var(--space-1);height:var(--space-1);background:var(--warning-500);color:var(--warning-500);position:absolute;top:0;right:0}@keyframes kpiNumberIn{0%{opacity:0;transform:translateY(var(--space-1))}to{opacity:1;transform:translateY(0)}}@keyframes kpiRipple{0%{opacity:.2;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}@keyframes kpiPing{0%{opacity:.9;transform:scale(1)}70%,to{opacity:0;transform:scale(2.2)}}@media (max-width:1024px){.kpi-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.kpi-grid--3{grid-template-columns:1fr}.kpi-card{padding:var(--space-3) var(--space-4)}.kpi-value{font-size:var(--text-xl)}}@media (hover:none){.kpi-option:not(.is-active):hover{background:0 0}}@media (hover:hover) and (pointer:fine){.kpi-options[data-scrollable]{cursor:grab}.kpi-options[data-dragging],.kpi-options[data-dragging] *{cursor:grabbing}}.kpi-value-placeholder,.kpi-hint-placeholder{vertical-align:baseline;max-width:100%;height:1em}.kpi-value-placeholder{width:4ch}.kpi-hint-placeholder{width:16ch}.kpi-option:disabled{cursor:default}