.qd-kpi{font-family:"Assistant",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;width:min(360px,100%);position:relative;overflow:visible}
.qd-kpi__card{background:#fff;border-radius:.7rem;box-shadow:0 16px 40px rgba(16,24,40,.10);border:1px solid rgba(16,24,40,.08);padding:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;will-change:transform,opacity;opacity:0;transform:translateY(18px)}
.qd-kpi__card--fin{position:relative;z-index:2}
.qd-kpi__card--due{position:relative;z-index:1;margin-top:-10px;left:18px}
.qd-kpi__left{display:flex;align-items:center;gap:12px;min-width:0}
.qd-kpi__icon{width:34px;height:34px;border-radius:999px;background:#f2f4f7;display:grid;place-items:center;flex:0 0 auto}
.qd-lucide{width:18px;height:18px;color:#101828}
.qd-kpi__meta{min-width:0}
.qd-kpi__labelrow{display:flex;align-items:center;gap:8px;line-height:1.1}
.qd-kpi__label{font-size:12px;font-weight:600;color:rgba(16,24,40,.70);letter-spacing:.2px}
.qd-kpi__delta{display:inline-flex;align-items:center;gap:6px}
.qd-kpi__tri{width:10px;height:8px;display:inline-block;transform:translateY(.5px)}
.qd-kpi__tri path{fill:#12b76a;stroke:#12b76a;stroke-width:1.7;stroke-linejoin:round}
.qd-kpi__tri--down path{fill:#f04438;stroke:#f04438}
.qd-kpi__value{margin-top:3px;font-size:18px;font-weight:700;color:#101828;letter-spacing:.2px;white-space:nowrap;position:relative}
.qd-kpi__value.is-pop{animation:qd-pop 220ms ease-out}
@keyframes qd-pop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-1px) scale(1.03)}100%{transform:translateY(0) scale(1)}}
.qd-kpi__spark{width:120px;height:32px;flex:0 0 auto}
.qd-spark{width:120px;height:32px;overflow:visible}
.qd-spark__path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200}
.qd-spark__path--green{stroke:#12b76a}
.qd-spark__path--red{stroke:#f04438}
.qd-kpi__card.is-in{opacity:1;transform:translateY(0);transition:opacity 520ms cubic-bezier(.2,.9,.2,1),transform 520ms cubic-bezier(.2,.9,.2,1)}
.qd-kpi__card.is-float-a{animation:qd-float-a 5.6s ease-in-out infinite}
.qd-kpi__card.is-float-b{animation:qd-float-b 6.8s ease-in-out infinite}
@keyframes qd-float-a{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes qd-float-b{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.qd-kpi__delta-float{position:absolute;right:0;top:0;font:inherit;letter-spacing:inherit;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(0) scale(1);will-change:transform,opacity;animation:qd-delta-float 900ms ease-out forwards}
.qd-kpi__delta-float--up{color:#12b76a}
.qd-kpi__delta-float--down{color:#f04438}
@keyframes qd-delta-float{0%{opacity:0;transform:translateY(0) scale(1)}12%{opacity:1;transform:translateY(-2px) scale(1.02)}70%{opacity:1;transform:translateY(-10px) scale(1.06)}100%{opacity:0;transform:translateY(-16px) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.qd-kpi__card{opacity:1;transform:none}.qd-kpi__card.is-float-a,.qd-kpi__card.is-float-b,.qd-kpi__value.is-pop{animation:none}.qd-spark__path{stroke-dashoffset:0}.qd-kpi__delta-float{display:none}}
@media (max-width:480px){.qd-kpi{width:100%}.qd-kpi__card--due{left:10px}}


.qd-kpi{container-type:inline-size}.qd-kpi__card{flex-wrap:nowrap}.qd-kpi__left{flex:1 1 auto;min-width:0}.qd-kpi__spark{flex:0 1 clamp(84px,34cqi,120px);width:clamp(84px,34cqi,120px)}.qd-spark{width:100%}@container (max-width:300px){.qd-kpi__card{flex-wrap:wrap}.qd-kpi__left{flex:1 1 100%}.qd-kpi__spark{flex:0 0 100%;width:100%;height:28px}.qd-spark{height:28px}}