#app .ci-card{--ci:#32d1ee;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--ci)!important;border-radius:18px!important;background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--ci) 19%,transparent),transparent 60%),linear-gradient(120deg,#08283b,#031624)!important;padding:25px!important;gap:24px!important;min-height:190px;box-shadow:inset 0 1px #ffffff14,0 8px 28px #0003;transition:transform .3s,box-shadow .3s}
#app .ci-card.ci-clear{--ci:#36dbac}#app .ci-card.ci-partial{--ci:#f0c362}#app .ci-card.ci-unpaid{--ci:#ff6280}
#app .ci-card:before{content:'';position:absolute;z-index:-1;width:60%;height:200%;right:-25%;top:-50%;background:linear-gradient(130deg,transparent 45%,color-mix(in srgb,var(--ci) 15%,transparent) 49%,transparent 53%);transform:rotate(20deg);animation:ciLight 9s ease-in-out infinite;pointer-events:none}
#app .ci-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb,var(--ci) 13%,transparent)}
#app .ci-card .ci-avatar{position:relative;flex:0 0 94px;width:94px!important;height:94px!important;border:2px solid var(--ci)!important;border-radius:50%;background:radial-gradient(at 30% 20%,#1f607e,#031d30)!important;padding:10px;box-shadow:0 0 0 6px color-mix(in srgb,var(--ci) 8%,transparent),inset 0 0 20px #ffffff13}
#app .ci-avatar:after{content:'';position:absolute;inset:-9px;border:1px solid var(--ci);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;animation:ciRing 12s linear infinite;pointer-events:none}#app .ci-avatar svg{width:100%;height:100%;display:block}
#app .ci-card .cari-detail-person{min-width:0;flex:1}#app .ci-card .cari-detail-person>span{font:700 11px/1.5 'Segoe UI',Arial,sans-serif!important;letter-spacing:1.7px;color:var(--ci)!important}
#app .ci-card .cari-detail-person>b{display:block;font:750 clamp(22px,2.1vw,34px)/1.25 'Segoe UI',Arial,sans-serif!important;letter-spacing:-.4px;color:#f0f8ff!important;overflow-wrap:anywhere;margin:8px 0 12px}
#app .ci-card .cari-detail-person>small{display:inline-block;font:13px/1.6 'Segoe UI',Arial,sans-serif!important;color:#b5ccda;padding:6px 10px;border:1px solid color-mix(in srgb,var(--ci) 30%,transparent);border-radius:9px;background:#04162470}
#app .ci-card .cari-detail-total{min-width:210px;position:relative}#app .ci-card .cari-detail-total>strong{font:750 clamp(25px,2.6vw,38px)/1.3 'Segoe UI',Arial,sans-serif!important;color:var(--ci)!important}
#app .ci-card .cari-debt-state{border-color:var(--ci)!important;color:var(--ci)!important;background:color-mix(in srgb,var(--ci) 10%,#051a28)!important}
@keyframes ciRing{to{transform:rotate(360deg)}}@keyframes ciLight{0%,100%{translate:0}50%{translate:-90px 0}}
@media(max-width:750px){#app .ci-card{padding:18px!important;gap:16px!important;flex-wrap:wrap}#app .ci-card .ci-avatar{width:72px!important;height:72px!important;flex-basis:72px}#app .ci-card .cari-detail-person{flex-basis:calc(100% - 100px)}#app .ci-card .cari-detail-total{width:100%;min-width:0;align-items:flex-start!important;text-align:left!important}#app .ci-card .cari-detail-person>b{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){#app .ci-card,#app .ci-card:before,#app .ci-avatar:after{animation:none!important;transition:none!important}}