@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";
:root{--kpi-bg-primary:#fff;--kpi-text-primary:#333;--kpi-text-secondary:#6b7280;--kpi-text-muted:#94a3b8;--kpi-accent-color:#8677c4;--kpi-border-color:#e5e7eb;--kpi-shadow-color:#0000000a}.kpi-card-wrapper{flex-shrink:0;justify-content:center;align-items:center;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex}.kpi-card{background:var(--kpi-bg-primary);border:1px solid var(--kpi-border-color);box-sizing:border-box;border-radius:12px;flex-direction:column;width:100%;height:100%;padding:16px;transition:box-shadow .3s;display:flex;overflow:hidden;box-shadow:0 2px 6px #00000014}.kpi-card:hover{border-color:#00000026;box-shadow:0 4px 8px #0000001f}.kpi-card.no-shadow,.kpi-card.no-shadow:hover{box-shadow:none}.kpi-card-header{border:none;flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:18px;padding:0;display:flex;position:relative}.kpi-title{color:var(--kpi-text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;max-width:calc(100% - 180px);margin:0 0 0 4px;padding-right:10px;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;line-height:1.3;overflow:hidden}.kpi-controls{opacity:0;background:linear-gradient(to left,var(--kpi-bg-primary)70%,transparent);z-index:10;align-items:center;gap:12px;padding-left:20px;transition:opacity .15s;display:flex;position:absolute;top:0;right:0}.kpi-card:hover .kpi-controls{opacity:1}.kpi-main{text-align:center;flex-direction:column;flex-grow:1;flex-shrink:1;justify-content:center;gap:0;display:flex}.kpi-value-section{flex-shrink:0;padding:14px 0 14px 4px;position:relative}.kpi-value{letter-spacing:0;white-space:nowrap;color:var(--kpi-text-primary);justify-content:center;align-items:center;margin:0;font-size:3rem;font-weight:700;line-height:1;animation:.6s ease-out kpi-fadeInScale;display:flex;position:relative}@keyframes kpi-fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.kpi-value-number{flex-shrink:1;min-width:0;overflow:hidden}.kpi-comparison{white-space:nowrap;flex-shrink:0;align-self:center;align-items:center;gap:8px;margin-left:12px;display:inline-flex}.kpi-chip{color:#111827;border-radius:8px;align-items:center;gap:6px;padding:3px 10px;font-size:.85rem;line-height:1.4;display:inline-flex}.kpi-chip.positive{background:#008e894d}.kpi-chip.negative{background:#d811594d}.kpi-delta{font-weight:500}.kpi-chip-mode{opacity:.8;font-weight:400}.kpi-chart-section{flex-shrink:0;width:100%;height:110px;margin-top:-5px}.kpi-chart{width:100%;height:100%}.kpi-footer{border-top:none;flex-shrink:0;max-width:100%;margin-top:0;padding-top:16px;overflow:hidden}.kpi-stats{justify-content:center;gap:20px;max-width:100%;display:flex;overflow:hidden}.stat-item{text-align:center;flex:none;min-width:40px;max-width:70px;overflow:hidden}.stat-label{color:var(--kpi-text-secondary);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:.6rem;display:block;overflow:hidden}.stat-value{color:var(--kpi-text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:600;display:block;overflow:hidden}.compact-btn{border:1px solid var(--ctrl-border,#f3f4f6);background:var(--ctrl-bg,#fff);width:29px;height:29px;color:var(--ctrl-color,#6b7280);cursor:pointer;box-shadow:var(--ctrl-shadow,0 1px 3px 0 #0000001a);opacity:0;border-radius:12px;justify-content:center;align-items:center;margin:0;padding:2px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;transform:translateY(-4px)}.kpi-card:hover .compact-btn{opacity:1;transform:translateY(0)}.compact-btn:hover{background:var(--ctrl-bg,#fff);border-color:var(--ctrl-border-hover,#e5e7eb);box-shadow:var(--ctrl-shadow-hover,0 4px 12px 0 #4f46e526);transform:translateY(-2px)}.compact-btn.active{background:var(--ctrl-bg,#fff);border-color:var(--ctrl-border,#f3f4f6);color:inherit;box-shadow:var(--ctrl-shadow,0 1px 2px 0 #4f46e533)}.compact-btn svg{width:15px;height:15px;transition:all .2s}.compact-inner{color:#6b7280;background:0 0;border-radius:8px;justify-content:center;align-items:center;width:23px;height:23px;display:flex}.compact-btn:hover .compact-inner{background:var(--ctrl-inner-hover-bg,#f1f5f9);color:var(--ctrl-inner-hover-color,#475569)}.compact-btn.active .compact-inner{color:#fff;background:#4f46e5;box-shadow:0 1px 2px #4f46e54d}.date-granularity-buttons{background:var(--ctrl-bg,#fff);border:1px solid var(--ctrl-border,#f3f4f6);box-shadow:var(--ctrl-shadow,0 1px 3px 0 #0000001a);opacity:0;border-radius:12px;gap:2px;padding:2px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;transform:translateY(-4px)}.kpi-card:hover .date-granularity-buttons{opacity:1;transform:translateY(0)}.granularity-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:23px;height:23px;margin:0;padding:0;font-size:10px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.granularity-btn:hover{background:var(--ctrl-inner-hover-bg,#f1f5f9);color:var(--ctrl-inner-hover-color,#475569)}.granularity-btn.active{color:#fff;background:#4f46e5;box-shadow:0 1px 2px #4f46e54d}.granularity-btn:active{transform:scale(.95)}.kpi-loading-overlay{z-index:1000;background:#fffffff2;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.kpi-loading-spinner{border:3px solid #e5e7eb;border-top-color:#8677c4;border-radius:50%;width:32px;height:32px;margin-bottom:16px;animation:1s linear infinite kpi-spin}@keyframes kpi-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.kpi-loading-text{color:#6b7280;margin:0;font-family:Inter,sans-serif;font-size:12px;font-weight:400}[data-theme=dark] .kpi-card-wrapper,.kpi-card-wrapper[data-theme=dark]{--kpi-bg-primary:#0f1221;--kpi-text-primary:#cbd5e1;--kpi-text-secondary:#64748b;--kpi-border-color:#ffffff08;--ctrl-bg:#131627;--ctrl-border:#ffffff0f;--ctrl-border-hover:#6366f14d;--ctrl-color:#94a3b8;--ctrl-shadow:none;--ctrl-shadow-hover:none;--ctrl-inner-hover-bg:#ffffff14;--ctrl-inner-hover-color:#e2e8f0}[data-theme=dark] .kpi-card,.kpi-card-wrapper[data-theme=dark] .kpi-card{background:var(--kpi-bg-primary);box-shadow:none;border-color:#0000}[data-theme=dark] .kpi-card:hover,.kpi-card-wrapper[data-theme=dark] .kpi-card:hover{box-shadow:none!important;border-color:#ffffff14!important}[data-theme=dark] .kpi-title,.kpi-card-wrapper[data-theme=dark] .kpi-title{color:#64748b}[data-theme=dark] .kpi-value,.kpi-card-wrapper[data-theme=dark] .kpi-value{color:#cbd5e1}[data-theme=dark] .stat-value,.kpi-card-wrapper[data-theme=dark] .stat-value{color:#94a3b8}[data-theme=dark] .stat-label,.kpi-card-wrapper[data-theme=dark] .stat-label{color:#475569}[data-theme=dark] .compact-btn,.kpi-card-wrapper[data-theme=dark] .compact-btn{color:#94a3b8!important;box-shadow:none!important;background:#131627!important;border-color:#ffffff0f!important}[data-theme=dark] .compact-btn:hover,.kpi-card-wrapper[data-theme=dark] .compact-btn:hover{box-shadow:none!important;background:#1e2235!important;border-color:#6366f14d!important;transform:translateY(0)!important}[data-theme=dark] .compact-inner,.kpi-card-wrapper[data-theme=dark] .compact-inner{color:#94a3b8!important}[data-theme=dark] .compact-btn:hover .compact-inner,.kpi-card-wrapper[data-theme=dark] .compact-btn:hover .compact-inner{color:#e2e8f0!important;background:#ffffff14!important}[data-theme=dark] .compact-btn.active .compact-inner,.kpi-card-wrapper[data-theme=dark] .compact-btn.active .compact-inner{color:#fff!important;box-shadow:none!important;background:#6366f1!important}[data-theme=dark] .date-granularity-buttons,.kpi-card-wrapper[data-theme=dark] .date-granularity-buttons{box-shadow:none!important;background:#131627!important;border-color:#ffffff0f!important}[data-theme=dark] .granularity-btn,.kpi-card-wrapper[data-theme=dark] .granularity-btn{color:#64748b!important}[data-theme=dark] .granularity-btn:hover,.kpi-card-wrapper[data-theme=dark] .granularity-btn:hover{color:#e2e8f0!important;background:#ffffff0f!important}[data-theme=dark] .granularity-btn.active,.kpi-card-wrapper[data-theme=dark] .granularity-btn.active{color:#fff!important;box-shadow:none!important;background:#6366f1!important}[data-theme=dark] .kpi-loading-overlay,.kpi-card-wrapper[data-theme=dark] .kpi-loading-overlay{background:#0f1221f2}