.kpi-card{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:var(--radius,12px);padding:1.85rem 1.25rem;box-shadow:var(--shadow,0 1px 3px #0000001a);display:flex;flex-direction:column;align-items:flex-start;max-width:100%;transition:transform .2s,box-shadow .2s;position:relative}.kpi-card .kpi-hint{position:absolute;top:1rem;right:1rem;width:20px;height:20px;border-radius:50%;border:1px solid var(--border,#e2e8f0);background:var(--slate-50,#f8fafc);color:var(--text-400,#94a3b8);font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0}.kpi-card .kpi-hint:hover{color:var(--kpi-color);border-color:var(--kpi-color);background:color-mix(in srgb,var(--kpi-color) 10%,#0000)}.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f)}.kpi-card .kpi-icon-wrapper{width:36px;height:36px;font-size:1.1rem;margin-bottom:.85rem;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--kpi-color) 15%,#0000);color:var(--kpi-color)}.kpi-card .kpi-content{display:flex;flex-direction:column}.kpi-card .kpi-label{font-family:var(--font-body,"DM Sans",sans-serif);font-size:.75rem;font-weight:600;color:var(--text-400,#94a3b8);margin-bottom:4px}.kpi-card .kpi-value{font-family:var(--font-display,"Space Grotesk",sans-serif);font-size:1.35rem;font-weight:700;color:var(--kpi-color)}.kpi-card .kpi-delta{font-family:var(--font-body,"DM Sans",sans-serif);font-size:.65rem;margin-top:.65rem;color:var(--text-400,#94a3b8)}.kpi-card-horizontal{flex-direction:row;align-items:center;gap:1rem;padding:1.25rem}.kpi-card-horizontal .kpi-icon-wrapper{margin-bottom:0;width:48px;height:48px;font-size:1.3rem}.kpi-card-horizontal .kpi-content{flex:1 1;justify-content:center}.kpi-blue{--kpi-color:var(--blue-600,#2563eb)}.kpi-teal{--kpi-color:var(--teal-600,#0d9488)}.kpi-green{--kpi-color:var(--green-600,#16a34a)}.kpi-amber{--kpi-color:var(--amber-500,#f59e0b)}.kpi-red{--kpi-color:var(--red-500,#ef4444)}.kpi-slate{--kpi-color:var(--slate-500,#64748b)}.kpi-theme-camara,.kpi-theme-purple{background:#ffffff0d;border-color:color-mix(in srgb,var(--purple-400,#a78bfa) 30%,#0000);box-shadow:none}.kpi-theme-camara .kpi-hint,.kpi-theme-purple .kpi-hint{background:#ffffff1a;border-color:color-mix(in srgb,var(--purple-400,#a78bfa) 30%,#0000);color:color-mix(in srgb,var(--purple-300,#c4b5fd) 80%,#0000)}.kpi-theme-camara .kpi-hint:hover,.kpi-theme-purple .kpi-hint:hover{background:#fff3;color:#fff;border-color:color-mix(in srgb,var(--purple-400,#a78bfa) 60%,#0000)}.kpi-theme-camara .kpi-icon-wrapper,.kpi-theme-purple .kpi-icon-wrapper{background:color-mix(in srgb,var(--purple-400,#a78bfa) 15%,#0000);color:var(--purple-300,#c4b5fd)}.kpi-theme-camara .kpi-label,.kpi-theme-purple .kpi-label{color:color-mix(in srgb,var(--purple-300,#c4b5fd) 80%,#0000);text-transform:uppercase;letter-spacing:.05em}.kpi-theme-camara .kpi-value,.kpi-theme-purple .kpi-value{color:#fff}.kpi-theme-camara .kpi-delta,.kpi-theme-purple .kpi-delta{color:color-mix(in srgb,var(--purple-300,#c4b5fd) 60%,#0000)}.kpi-theme-camara:hover,.kpi-theme-purple:hover{background:#ffffff14;border-color:color-mix(in srgb,var(--purple-400,#a78bfa) 50%,#0000);box-shadow:0 4px 12px #0003}.kpi-theme-teal{background:#ffffff0d;box-shadow:none}.kpi-theme-teal,.kpi-theme-teal .kpi-hint{border-color:color-mix(in srgb,var(--teal-400,#2dd4bf) 30%,#0000)}.kpi-theme-teal .kpi-hint{background:#ffffff1a;color:color-mix(in srgb,var(--teal-200,#99f6e4) 80%,#0000)}.kpi-theme-teal .kpi-hint:hover{background:#fff3;color:#fff;border-color:color-mix(in srgb,var(--teal-400,#2dd4bf) 60%,#0000)}.kpi-theme-teal .kpi-icon-wrapper{background:color-mix(in srgb,var(--teal-400,#2dd4bf) 15%,#0000);color:var(--teal-300,#5eead4)}.kpi-theme-teal .kpi-label{color:color-mix(in srgb,var(--teal-200,#99f6e4) 80%,#0000);text-transform:uppercase;letter-spacing:.05em}.kpi-theme-teal .kpi-value{color:#fff}.kpi-theme-teal .kpi-delta{color:color-mix(in srgb,var(--teal-200,#99f6e4) 60%,#0000)}.kpi-theme-teal:hover{background:#ffffff14;border-color:color-mix(in srgb,var(--teal-400,#2dd4bf) 50%,#0000);box-shadow:0 4px 12px #0003}