/* ECOM Finance — Phase 2 UI overhaul (additive). Reuses existing theme tokens. */

/* ---------- Premium sidebar branding ---------- */
#sidebar .brand.cfo-brand{display:flex;align-items:center;gap:13px;padding:6px 4px 18px;margin-bottom:6px;border-bottom:1px solid var(--stroke)}
#sidebar .brand.cfo-brand img{width:46px;height:46px;border-radius:13px;box-shadow:0 8px 22px -8px rgba(47,155,255,.7)}
#sidebar .brand.cfo-brand .bt b{display:block;font:800 17px/1.1 'Sora',sans-serif;letter-spacing:.2px}
#sidebar .brand.cfo-brand .bt span{display:block;font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.4px;text-transform:uppercase}

/* ---------- Bank account cards ---------- */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.acct{position:relative;border-radius:18px;padding:18px;overflow:hidden;border:1px solid var(--stroke);background:var(--panel)}
.acct::before{content:"";position:absolute;inset:0;opacity:.16;background:var(--acct-c,#2f9bff)}
.acct>*{position:relative}
.acct .top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bank-badge{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff;font:800 13px/1 'Sora',sans-serif;letter-spacing:.5px;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.acct .nm{flex:1;min-width:0}
.acct .nm b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .nm span{font-size:11.5px;color:var(--muted)}
.acct .type-chip{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:20px;background:var(--acct-c,#2f9bff);color:#fff;text-transform:uppercase;letter-spacing:.4px}
.acct .bal{font:700 25px/1 'Sora',sans-serif;margin:2px 0 3px}
.acct .l4{font-size:12px;color:var(--muted);letter-spacing:2px}
.acct .acts{display:flex;gap:8px;margin-top:16px}
.acct .acts button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 6px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--stroke2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.acct .acts button:hover{color:var(--txt);border-color:var(--acct-c,#2f9bff);background:color-mix(in srgb,var(--acct-c,#2f9bff) 16%,transparent)}
.acct .acts button svg{width:15px;height:15px}
.acct-c-blue{--acct-c:#2f9bff}.acct-c-green{--acct-c:#34d39a}.acct-c-purple{--acct-c:#9d7bff}.acct-c-gold{--acct-c:#ffb547}.acct-c-teal{--acct-c:#22c1c3}

/* ---------- Credit cards (flip) ---------- */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.cc-flip{perspective:1400px;height:200px}
.cc-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.cc-flip.flipped .cc-inner{transform:rotateY(180deg)}
.cc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;box-shadow:0 20px 40px -22px rgba(0,0,0,.9);overflow:hidden}
.cc-face::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);top:-90px;right:-60px}
.cc-front{background:linear-gradient(135deg,#1e3a5f,#0a1a30)}
.cc-back{background:linear-gradient(135deg,#16263f,#0a1626);transform:rotateY(180deg)}
.cc-brand-amex .cc-front{background:linear-gradient(135deg,#2e77bb,#15406b)}
.cc-brand-visa .cc-front{background:linear-gradient(135deg,#1a1f71,#2a3a9c)}
.cc-brand-mastercard .cc-front{background:linear-gradient(135deg,#2b2b2b,#4a3a1a)}
.cc-brand-rupay .cc-front{background:linear-gradient(135deg,#0b6e4f,#0a2f4a)}
.cc-row{display:flex;justify-content:space-between;align-items:center}
.cc-bank{font:700 14px 'Sora',sans-serif;letter-spacing:.3px}
.cc-brandmark{font:800 15px 'Sora',sans-serif;letter-spacing:1px;opacity:.95}
.cc-no{font:600 19px/1 'Sora',sans-serif;letter-spacing:3px;margin:6px 0}
.cc-lbl{font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.6px}
.cc-val{font-size:13px;font-weight:600}
.cc-util{height:6px;border-radius:6px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:4px}
.cc-util i{display:block;height:100%;background:#fff}
.cc-magstripe{height:38px;background:rgba(0,0,0,.55);margin:6px -20px 12px}
.cc-cvv{background:#fff;color:#111;border-radius:5px;padding:5px 10px;font:700 13px 'Sora';letter-spacing:2px;display:inline-block}
.cc-tools{display:flex;gap:8px;margin-top:12px}
.cc-tools button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px;border-radius:11px;background:var(--panel);border:1px solid var(--stroke2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.cc-tools button:hover{color:var(--blue);border-color:var(--blue)}
.cc-tools svg{width:15px;height:15px}

/* ---------- Category icon chips (commitments / reminders / goals) ---------- */
.cat-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:20px;background:var(--ci-bg,rgba(47,155,255,.14));color:var(--ci-c,#2f9bff)}
.due-red{--ci-bg:rgba(255,93,115,.16);--ci-c:#ff5d73}
.due-amber{--ci-bg:rgba(255,181,71,.16);--ci-c:#ffb547}
.due-green{--ci-bg:rgba(52,211,154,.15);--ci-c:#34d39a}
.mini-bar{height:6px;border-radius:6px;background:var(--stroke2);overflow:hidden;margin-top:8px}
.mini-bar i{display:block;height:100%;background:var(--blue)}
.goal-img{height:96px;border-radius:14px 14px 0 0;background-size:cover;background-position:center;display:grid;place-items:center;font-size:40px;background-color:rgba(47,155,255,.12)}

/* modal helpers reused */
.p2-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--stroke)}
.p2-row:last-child{border:none}.p2-row .t{flex:1}.p2-row .t b{font-size:13.5px;display:block}.p2-row .t span{font-size:11.5px;color:var(--muted)}