html,body{margin:0;padding:0}body{font-family:"Assistant",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#f5f6f6;color:#101828}.demo-stage{min-height:100vh;display:grid;place-items:center;padding:40px 20px}.qd-fh{position:relative;width:min(330px,100%);min-height:0;overflow:visible;container-type:inline-size}.qd-fh *{box-sizing:border-box}.qd-fh h1,.qd-fh h2,.qd-fh h3,.qd-fh h4,.qd-fh h5,.qd-fh h6{margin:0;padding-top:0!important}.qd-fh__card{background:#fff;border-radius:.8rem;border:1px solid rgba(16,24,40,.08);box-shadow:0 16px 40px rgba(16,24,40,.10);opacity:0;transform:translateY(18px);will-change:transform,opacity}.qd-fh__card.is-in{opacity:1;transform:translateY(0);transition:opacity .56s cubic-bezier(.2,.9,.2,1),transform .56s cubic-bezier(.2,.9,.2,1)}.qd-fh__card.is-float-a{animation:qd-fh-float-a 8.4s ease-in-out infinite}.qd-fh__card.is-float-b{animation:qd-fh-float-b 9.2s ease-in-out infinite}.qd-fh__card.is-float-c{animation:qd-fh-float-c 8.8s ease-in-out infinite}.qd-fh__card--main{position:relative;z-index:1;padding:12px 12px 10px;width:min(236px,100%)}.qd-fh__card--fin{position:absolute;right:0;top:182px;z-index:3;min-width:208px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px}.qd-fh__card--auto{position:absolute;left:90px;bottom:211px;z-index:2;min-width:238px;display:flex;align-items:flex-start;gap:10px;padding:13px}.qd-fh__head{display:block;margin-bottom:2px}.qd-fh__head-copy{display:block}.qd-fh__title{margin:0!important;padding-top:0!important;font-family:"Assistant",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:22px;line-height:1.02;font-weight:700;color:#101828}.qd-fh__main-grid--solo{display:grid;grid-template-columns:1fr;justify-items:center;align-items:center;gap:0}.qd-fh__chart-wrap{position:relative;width:168px;height:168px;display:grid;place-items:center;margin:0 auto}.qd-fh__chart{width:168px;height:168px;transform:rotate(-90deg)}.qd-fh__ring-bg{fill:none;stroke:#eef2f6;stroke-width:14}.qd-fh__ring{fill:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}.qd-fh__ring--current{stroke:#1a9b67}.qd-fh__ring--due-soon{stroke:#f9c951}.qd-fh__ring--overdue{stroke:#d54748}.qd-fh__chart-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}.qd-fh__chart-label{font-size:12px;font-weight:600;color:rgba(16,24,40,.62);line-height:1.1}.qd-fh__chart-value{margin-top:4px;font-size:26px;line-height:1;font-weight:700;color:#101828}.qd-fh__left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.qd-fh__mini-icon{width:34px;height:34px;border-radius:999px;background:#f2f4f7;display:grid;place-items:center;flex:0 0 auto}.qd-fh__lucide{width:18px;height:18px;color:#101828}.qd-fh__mini-meta{min-width:0}.qd-fh__mini-meta--wide{flex:1 1 auto;min-width:0}.qd-fh__mini-label-row{display:flex;align-items:center;gap:8px;line-height:1.1}.qd-fh__mini-label{font-size:12px;font-weight:600;color:rgba(16,24,40,.7);letter-spacing:.2px}.qd-fh__mini-value{margin-top:3px;font-size:18px;font-weight:700;color:#101828;letter-spacing:.2px;white-space:nowrap;position:relative}.qd-fh__mini-value.is-pop{animation:qd-fh-pop .22s ease-out}.qd-fh__trend{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}.qd-fh__trend--up{border-bottom:8px solid #1a9b67;transform:translateY(-1px)}.qd-fh__mini-bottom{margin-top:4px;display:flex;align-items:center;gap:10px}.qd-fh__spark-wrap{flex:0 0 auto}.qd-fh__spark-wrap--fin{width:108px;height:30px}.qd-fh__spark-wrap--auto{width:92px;height:26px}.qd-fh__spark{width:100%;height:100%;overflow:visible}.qd-fh__spark-path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220}.qd-fh__spark-path--fin{stroke:#1a9b67}.qd-fh__spark-path--auto{stroke:#48509e}.qd-fh__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-fh-delta-float .9s ease-out forwards}.qd-fh__delta-float--up{color:#1a9b67}.qd-fh__delta-float--down{color:#d54748}@keyframes qd-fh-pop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-1px) scale(1.03)}100%{transform:translateY(0) scale(1)}}@keyframes qd-fh-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)}}@keyframes qd-fh-float-a{0%{transform:translateY(0)}50%{transform:translateY(-5px)}100%{transform:translateY(0)}}@keyframes qd-fh-float-b{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}@keyframes qd-fh-float-c{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.qd-fh__card{opacity:1;transform:none}.qd-fh__card.is-float-a,.qd-fh__card.is-float-b,.qd-fh__card.is-float-c,.qd-fh__mini-value.is-pop{animation:none}.qd-fh__delta-float{display:none}.qd-fh__spark-path{transition:none!important;stroke-dashoffset:0}}@container (max-width:390px){.qd-fh{width:min(320px,100%)}.qd-fh__card--main{width:min(228px,100%)}}@media (max-width:480px){.qd-fh{width:100%}.qd-fh__card--fin{right:0}}

.qd-fh__card--auto{position:absolute;left:90px;bottom:211px;z-index:2;min-width:210px;display:flex;align-items:flex-start;gap:8px;padding:10px 11px}
.qd-fh__card--auto .qd-fh__mini-icon{width:28px;height:28px}
.qd-fh__card--auto .qd-fh__lucide{width:15px;height:15px}
.qd-fh__card--auto .qd-fh__mini-label{font-size:11px;opacity:.8}
.qd-fh__card--auto .qd-fh__mini-value{font-size:16px}
.qd-fh__card--auto .qd-fh__spark-wrap--auto{width:78px;height:22px}