:root{
  --bg:#E9F0F7;--surf:#FFFFFF;--surf2:#EEF4F8;--surf3:#E1EBF2;--border:#D3E1EA;
  --gold:#1E4B8F;--gold-soft:rgba(30,75,143,.12);
  --red:#C24E3D;--red-soft:rgba(194,78,61,.1);
  --green:#2F8F63;--green-soft:rgba(47,143,99,.1);
  --blue:#1E4B8F;--blue-soft:rgba(30,75,143,.1);
  --purple:#4A6F9E;--orange:#C2883A;
  --teal:#2E8A82;--teal-soft:rgba(46,138,130,.1);
  --rose:#B84B79;--rose-soft:rgba(184,75,121,.1);
  --indigo:#2E6DA8;--indigo-soft:rgba(46,109,168,.1);
  --text:#182230;--muted:#6B7A88;
  --font-num:'Outfit',system-ui,sans-serif;--font-ui:'Outfit',system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0C1420;--surf:#13202F;--surf2:#182838;--surf3:#1F3242;--border:#26394A;
  --gold:#2E6DA8;--gold-soft:rgba(46,109,168,.14);
  --red:#D1604F;--red-soft:rgba(209,96,79,.13);
  --green:#3FA876;--green-soft:rgba(63,168,118,.13);
  --blue:#3A7CBF;--blue-soft:rgba(58,124,191,.13);
  --purple:#5B86B8;--orange:#D49A4A;
  --teal:#3FA8A0;--teal-soft:rgba(63,168,160,.13);
  --rose:#D1608F;--rose-soft:rgba(209,96,143,.13);
  --indigo:#4A8FCF;--indigo-soft:rgba(74,143,207,.13);
  --text:#E6EEF5;--muted:#6E8194;
}
html[data-theme="dark"] .toast{color:#fff}
#qrCanvas{filter:none}
html[data-theme="dark"] #qrCanvas{filter:invert(1) hue-rotate(180deg)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:16px;transition:background .25s,color .25s}
svg.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* PASSBOOK STUB MOTIF — perforation accent on cards, like a torn ledger page */
.card,.stub{position:relative}
.card::before{content:'';position:absolute;top:0;left:18px;width:28px;height:4px;background:repeating-linear-gradient(90deg,var(--border) 0 3px,transparent 3px 6px);border-radius:0 0 4px 4px;opacity:.85}
.card::after{content:'';position:absolute;top:-1px;right:18px;width:1px;height:9px;background:var(--border);box-shadow:7px 0 0 var(--border),14px 0 0 var(--border);opacity:.5}

/* LOGIN */
#loginScreen{position:fixed;inset:0;background:linear-gradient(160deg,#1E4B8F 0%,#2E6DD4 45%,#2E8A82 100%);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;overflow-y:auto}
.login-hero-bg{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.14),transparent 40%),radial-gradient(circle at 85% 80%,rgba(37,179,166,.35),transparent 45%)}
.login-logo{width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);font-family:var(--font-num);font-size:42px;font-weight:800;color:#fff;margin-bottom:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.2);position:relative}
.login-title{font-size:28px;font-weight:800;color:#fff;margin-bottom:3px;letter-spacing:-.3px;position:relative}
.login-sub{color:rgba(255,255,255,.85);position:relative}
.login-box{width:100%;max-width:350px;background:rgba(255,255,255,.97);border-radius:22px;padding:24px 22px;margin-top:22px;box-shadow:0 20px 50px rgba(0,0,0,.25);position:relative}
.login-who{font-size:14px;font-weight:600;color:var(--blue);margin-bottom:16px;text-align:center;line-height:1.4}
.login-btn{width:100%;padding:15px;border-radius:13px;border:none;background:linear-gradient(135deg,#1E4B8F,#2E8A82);color:#fff;font-size:15px;font-weight:800;cursor:pointer;margin-top:6px;letter-spacing:.3px;box-shadow:0 8px 20px rgba(30,75,143,.35);transition:transform .15s,box-shadow .15s}
.login-btn:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(30,75,143,.3)}
.login-sub{font-size:10px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-bottom:26px}
.login-box{width:100%;max-width:340px}
.fl{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:5px;display:block}
.fi{width:100%;background:var(--surf);border:1px solid var(--border);border-radius:12px;padding:13px 15px;color:var(--text);font-size:15px;outline:none;margin-bottom:11px;transition:border-color .2s,box-shadow .2s;font-family:var(--font-ui);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.fi:focus{border-color:var(--gold);box-shadow:inset 0 1px 2px rgba(0,0,0,.15),0 0 0 3px var(--gold-soft)}
.login-err{color:var(--red);font-size:12px;text-align:center;margin-top:10px;min-height:16px;line-height:1.5}
.login-ok{color:var(--green);font-size:12px;text-align:center;margin-top:10px;min-height:16px;line-height:1.5}
.auth-toggle{text-align:center;margin-top:18px;font-size:12px;color:var(--muted)}
.auth-toggle a{color:var(--gold);text-decoration:none;font-weight:600;cursor:pointer}
.pending-box{background:var(--gold-soft);border:1px solid rgba(201,162,39,.3);border-radius:12px;padding:16px;text-align:center;font-size:12px;color:var(--text);line-height:1.7;margin-top:10px}

/* APP */
#app{display:none;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;position:relative;background-color:var(--bg);background-image:linear-gradient(165deg,#D9E6FB 0%,#EEF3FC 45%,#FAFBFE 100%)}
html[data-theme="dark"] #app{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.app-hdr{background:linear-gradient(180deg,var(--surf),color-mix(in srgb,var(--surf) 92%,var(--bg)));border-bottom:1px solid var(--border);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15);position:relative;z-index:5}
.app-hdr h1{font-family:var(--font-num);font-size:26px;font-weight:700;color:var(--gold);letter-spacing:-.3px;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.app-hdr .sub{font-size:11px;color:var(--muted);letter-spacing:.3px;margin-top:2px;display:flex;align-items:center}
.app-hdr .sub #hdrUserName{font-weight:600;color:var(--text)}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-menu-btn{background:none;border:none;color:var(--text);cursor:pointer;padding:4px;display:flex;align-items:center}
.hdr-bell-btn{background:none;border:none;color:var(--text);cursor:pointer;padding:4px;display:flex;align-items:center;position:relative}
.hdr-bell-btn svg.icon{font-size:19px}
.hdr-bell-btn .notif-dot{position:absolute;top:2px;right:2px}
.hdr-drop-divider{height:1px;background:var(--border);margin:6px 4px}
.hdr-menu-btn svg.icon{font-size:20px}
.hdr-dropdown{display:none;position:absolute;top:62px;right:14px;background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:8px;z-index:50;min-width:210px;max-width:280px;max-height:calc(100vh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.hdr-dropdown.show{display:block}
.hdr-drop-item{display:flex;align-items:center;gap:11px;padding:10px 9px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text)}
.hdr-drop-item:active{background:var(--surf2)}
.hdr-drop-ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hdr-drop-ic svg.icon{font-size:15px}
.hdr-dropdown-backdrop{display:none;position:fixed;inset:0;z-index:40;background:transparent}
.hdr-dropdown-backdrop.show{display:block}
.ubadge{background:var(--gold-soft);border:1px solid rgba(201,162,39,.3);border-radius:20px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--gold);position:relative;cursor:pointer}
.notif-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--surf);display:none}
.logout-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;align-items:center}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px;animation:pulse 2s infinite}
.sync-dot.syncing{background:var(--orange)}.sync-dot.err{background:var(--red);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* ── Premium motion: page entrance + tactile tap feedback ── */
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page.active > *{animation:cardIn .38s cubic-bezier(.22,1,.36,1) both}
.page.active > *:nth-child(1){animation-delay:.02s}
.page.active > *:nth-child(2){animation-delay:.06s}
.page.active > *:nth-child(3){animation-delay:.10s}
.page.active > *:nth-child(4){animation-delay:.14s}
.page.active > *:nth-child(5){animation-delay:.18s}
.page.active > *:nth-child(6){animation-delay:.22s}
.page.active > *:nth-child(n+7){animation-delay:.26s}
/* Tactile press on tappable things */
.stile:active,.hcard-mini:active,.card[onclick]:active,#homeHero [onclick]:active{transform:scale(.97);transition:transform .08s}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  .page.active > *{animation:none}
}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px 12px 20px}
.scroll::-webkit-scrollbar{display:none}
.tab-bar-wrap{position:relative;flex-shrink:0}
.tab-bar{display:flex;background:linear-gradient(0deg,var(--surf),color-mix(in srgb,var(--surf) 92%,var(--bg)));border-top:1px solid var(--border);height:66px;flex-shrink:0;overflow:visible;box-shadow:0 -2px 8px rgba(0,0,0,.12);position:relative;z-index:5;padding-top:14px}
.tab-bar::-webkit-scrollbar{display:none}
.tab-bar-fade{display:none}
.tab-btn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;background:none;border:none;cursor:pointer;color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;transition:color .2s;padding:5px 4px 6px;position:relative;-webkit-tap-highlight-color:transparent}
.tab-btn:active .tab-icon-wrap{transform:scale(.88);transition:transform .1s}
.tab-btn.active:active .tab-icon-wrap{transform:translateY(-3px) scale(.98)}
.tab-btn .tab-icon-wrap{width:38px;height:38px;border-radius:13px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s,box-shadow .2s}
.tab-btn.active{color:var(--gold);font-weight:800}
.tab-btn::after{content:"";position:absolute;bottom:2px;left:50%;width:0;height:3px;border-radius:3px;background:var(--gold);transform:translateX(-50%);transition:width .28s cubic-bezier(.22,1,.36,1),opacity .28s;opacity:0}
.tab-btn.active::after{width:18px;opacity:1}
.tab-btn-center::after{display:none}
.tab-btn.active .tab-icon-wrap{background:linear-gradient(155deg,color-mix(in srgb,var(--gold) 70%,#fff) 0%,var(--gold) 60%,color-mix(in srgb,var(--gold) 75%,#000) 100%);transform:translateY(-3px) scale(1.06);box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.2),0 6px 14px rgba(30,75,143,.4);animation:tabIconPop .4s cubic-bezier(.22,1.5,.4,1)}
@keyframes tabIconPop{0%{transform:translateY(-3px) scale(.9)}50%{transform:translateY(-6px) scale(1.16)}100%{transform:translateY(-3px) scale(1.06)}}
/* ── MPIN lock screen ── */
#mpinScreen{position:fixed;inset:0;z-index:3000;background:linear-gradient(160deg,#1e4b8f,#2e8a82);display:flex;align-items:center;justify-content:center;color:#fff}
.mpin-wrap{width:100%;max-width:340px;padding:28px 24px;text-align:center}
.mpin-logo{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;margin:0 auto 18px;font-family:var(--font-num,inherit)}
.mpin-title{font-size:20px;font-weight:800;margin-bottom:5px}
.mpin-sub{font-size:13px;opacity:.85;margin-bottom:24px}
.mpin-dots{display:flex;gap:16px;justify-content:center;margin-bottom:12px}
.mpin-dot{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.6);transition:background .15s,transform .15s}
.mpin-dot.filled{background:#fff;border-color:#fff;transform:scale(1.1)}
.mpin-dot.err{border-color:#ffb3b3}
.mpin-err{min-height:18px;font-size:12.5px;color:#ffd5d5;margin-bottom:8px}
@keyframes mpinShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.mpin-dots.shake{animation:mpinShake .4s}
.mpin-bio-btn{display:flex;align-items:center;gap:8px;margin:0 auto 18px;padding:9px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.mpin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;margin:0 auto}
.mpin-key{height:60px;border-radius:16px;border:none;background:rgba(255,255,255,.13);color:#fff;font-size:24px;font-weight:600;cursor:pointer;font-family:var(--font-num,inherit);transition:background .12s,transform .08s}
.mpin-key:active{background:rgba(255,255,255,.28);transform:scale(.94)}
.mpin-key-blank{background:none;pointer-events:none}
.mpin-key-del{font-size:20px}
.mpin-forgot{margin-top:22px;background:none;border:none;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .tab-btn.active .tab-icon-wrap{animation:none}
  .tab-btn::after{transition:none}
}
.tab-btn.active .tab-icon-wrap svg.icon{color:#fff}
.tab-btn svg.icon{font-size:19px;transition:color .2s}

/* CENTER TAB — Expenses sits permanently raised and highlighted, like the reference app's
   middle "Dhruva" button, regardless of which page is actually active. */
.tab-btn-center .tab-icon-wrap{width:auto;height:auto;border-radius:0;background:none;transform:translateY(-8px);box-shadow:none;border:none}
.tab-btn-center .tab-icon-wrap svg.icon{color:#1e3a8a;font-size:24px}
.tab-btn-center{color:#1e3a8a;font-weight:700;margin-top:-4px;position:relative;z-index:10}
/* 3D dark-blue rupee with soft glow */
.tab-rupee{
  font-size:34px;font-weight:900;line-height:1;font-family:var(--font-num,inherit);
  color:#1e3a8a;
  text-shadow:0 1px 0 #182f6e, 0 2px 1px #13265a, 0 3px 4px rgba(20,40,90,.4), 0 0 12px rgba(30,58,138,.45);
  transition:transform .25s cubic-bezier(.22,1,.36,1), filter .25s, text-shadow .25s;
}
.tab-btn-center.active .tab-icon-wrap{transform:translateY(-10px) scale(1.15);background:none;box-shadow:none}
.tab-btn-center.active .tab-rupee{
  filter:brightness(1.22);
  text-shadow:0 1px 0 #182f6e, 0 2px 1px #13265a, 0 4px 6px rgba(20,40,90,.5), 0 0 22px rgba(30,58,138,.85);
}
/* Quick-add popup */
.qa-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1400;display:none;align-items:flex-end;justify-content:center;padding-bottom:96px;opacity:0;transition:opacity .2s}
.qa-overlay.show{display:flex;opacity:1}
.qa-sheet{width:calc(100% - 36px);max-width:420px;transform:translateY(14px);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.qa-overlay.show .qa-sheet{transform:translateY(0)}
.qa-action{width:100%;display:flex;align-items:center;gap:13px;background:var(--surf);border:1px solid var(--border);border-radius:16px;padding:15px 16px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.qa-ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(155deg,#7b4fe0,#a13fd8 55%,#e0609a);color:#fff;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qa-text{flex:1;text-align:left;display:flex;flex-direction:column}
.qa-title{font-size:16px;font-weight:700;color:var(--text)}
.qa-sub{font-size:12px;color:var(--muted)}
.page{display:none}.page.active{display:block}
.card{background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(80,65,40,.06),0 4px 14px -4px rgba(80,65,40,.1);transition:box-shadow .2s}
html[data-theme="dark"] .card{box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 14px -4px rgba(0,0,0,.22)}
.ctitle{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:11px;display:flex;align-items:center;gap:6px;justify-content:space-between}
.ctitle-link{background:none;border:none;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer}

/* TILES — redesigned: colored accent bar for instant visual scanning, clear empty-state */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.stile{background:var(--surf2);border-radius:14px;padding:13px 14px;border:1px solid var(--border);cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .15s;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(80,65,40,.05),0 3px 10px -3px rgba(80,65,40,.08)}
html[data-theme="dark"] .stile{box-shadow:0 1px 2px rgba(0,0,0,.15),0 3px 10px -3px rgba(0,0,0,.2)}
.stile::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 3px 3px 0}
.stile:active{border-color:var(--gold);transform:scale(.98) translateY(1px);box-shadow:0 1px 1px rgba(0,0,0,.15)}
.stile .sl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between}
.stile .sv{font-family:var(--font-num);font-size:25px;font-weight:800;margin-bottom:2px;letter-spacing:-.3px}
.stile .sv.empty{font-size:13px;font-weight:600;color:var(--muted);font-family:var(--font-ui);opacity:.8}
.stile .ss{font-size:10px;color:var(--muted)}
.t-income::after{background:var(--gold)}.t-income .sv{color:var(--gold)}
.t-loans::after{background:var(--red)}.t-loans .sv{color:var(--red)}
.t-savings::after{background:var(--purple)}.t-savings .sv{color:var(--purple)}
.t-balance::after{background:var(--blue)}.t-balance .sv{color:var(--blue)}

/* THEME TOGGLE */
.theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:13px;background:var(--surf);border:1px solid var(--border);border-radius:12px}
.theme-switch{width:46px;height:26px;border-radius:14px;background:var(--surf2);border:1px solid var(--border);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.theme-switch.on{background:var(--gold-soft);border-color:var(--gold)}
.theme-switch-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .25s,background .2s}
.theme-switch.on .theme-switch-knob{transform:translateX(20px);background:var(--gold)}

/* OVERDUE BANNER */
.overdue-banner{background:var(--red-soft);border:1px solid rgba(209,96,79,.35);border-radius:12px;padding:11px 13px;margin-bottom:11px;display:none;align-items:flex-start;gap:9px}
.ob-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;flex-shrink:0;display:flex;margin-left:auto}
.ob-close svg.icon{font-size:14px}
.overdue-banner.show{display:flex}
.overdue-banner svg.icon{color:var(--red);font-size:18px;flex-shrink:0;margin-top:1px}
.overdue-banner .ob-text{font-size:12px;line-height:1.5;color:var(--text)}
.overdue-banner .ob-text b{color:var(--red)}

.bbar{height:7px;background:var(--surf2);border-radius:7px;overflow:hidden;display:flex;gap:1px}
.bseg{height:100%;border-radius:4px;transition:width .4s}
.bleg{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:8px}
.bleg-i{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted)}
.bleg-d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.row-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #1A1F2B;font-size:13.5px;cursor:pointer}
.row-item:last-child{border-bottom:none}.row-item:active{opacity:.7}
.ri-note{font-size:11px;color:var(--muted)}.ri-amt{font-weight:700;font-size:14.5px;font-family:var(--font-num)}

/* TRANSFERS */
.cprog{display:flex;align-items:center;gap:12px;background:var(--surf2);border-radius:12px;padding:11px 13px;margin-bottom:11px}
.pring{position:relative;width:48px;height:48px;flex-shrink:0}.pring svg{transform:rotate(-90deg)}
.ring-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--gold);font-family:var(--font-num)}
.pinfo h3{font-size:14px;font-weight:700;margin-bottom:2px}.pinfo p{font-size:10px;color:var(--muted);line-height:1.5}
.tr-item{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border)}
.bank-total-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1A1F2B}
.bank-total-row:last-child{border-bottom:none}
.bank-total-icon{width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.bank-total-info{flex:1;min-width:0}.bank-total-name{font-size:13px;font-weight:600}.bank-total-cnt{font-size:10.5px;color:var(--muted);margin-top:1px}
.bank-total-amt{font-size:15px;font-weight:800;font-family:var(--font-num);color:var(--text);flex-shrink:0}
.tr-item:last-child{border-bottom:none}
.tcheck{width:23px;height:23px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;transition:all .2s;cursor:pointer}
.tcheck svg.icon{width:13px;height:13px;color:#fff}
.tr-item.done .tcheck{background:var(--green);border-color:var(--green)}
.tinfo{flex:1;cursor:pointer;min-width:0}.ttitle{font-size:13px}.tsub{font-size:10px;color:var(--muted);margin-top:1px;display:flex;align-items:center;gap:4px}
.tbank{color:var(--blue);font-weight:600}
.tby{font-size:10px;color:var(--green);margin-top:1px}
.tr-item.done .ttitle{text-decoration:line-through;color:var(--muted)}
.tamt-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tamt{font-size:14px;font-weight:800;color:var(--gold);font-family:var(--font-num)}.tr-item.done .tamt{color:var(--green)}
.tbank-edit{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex}
.tbank-edit svg.icon{font-size:14px}

/* LOANS — redesigned: clearer hierarchy, 2-col stats, prepayment history */
.loan-card{background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;position:relative;box-shadow:0 1px 2px rgba(80,65,40,.06),0 4px 14px -4px rgba(80,65,40,.1)}
html[data-theme="dark"] .loan-card{box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 14px -4px rgba(0,0,0,.22)}
.lc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding-right:128px}
.lc-name{font-size:16.5px;font-weight:700}.lc-bank{font-size:11px;color:var(--muted);margin-top:2px}
.lc-emi{text-align:right;flex-shrink:0;padding-left:8px}.lc-emi-lbl{font-size:9px;color:var(--muted);letter-spacing:1px}.lc-emi-val{font-size:21px;font-weight:800;font-family:var(--font-num);letter-spacing:-.3px}
.lc-prog-row{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.lc-prog{flex:1;height:6px;background:var(--surf2);border-radius:6px;overflow:hidden}
.lc-prog-fill{height:100%;border-radius:6px;transition:width .6s ease}
.lc-prog-pct{font-size:11px;font-weight:700;color:var(--text);flex-shrink:0;font-family:var(--font-num);min-width:32px;text-align:right}
.lc-statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:4px}
.lc-stat-box{background:var(--surf2);border-radius:9px;padding:8px 10px}
.lc-stat-box .lcl{font-size:9px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:2px}
.lc-stat-box .lcv{font-size:13px;font-weight:700;font-family:var(--font-num)}
.lc-btns{display:flex;gap:6px;position:absolute;top:12px;right:12px}
.emi-pay-btn{width:100%;margin-top:11px;padding:11px;border:none;border-radius:11px;background:linear-gradient(135deg,#34a673,#2f9268);color:#fff;font-size:13px;font-weight:700;font-family:var(--font-ui);display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;box-shadow:0 4px 12px rgba(52,166,115,.3)}
.emi-pay-btn svg{width:16px;height:16px}
.emi-paid-tag{width:100%;margin-top:11px;padding:10px;border-radius:11px;background:var(--green-soft,rgba(63,168,118,.13));color:var(--green);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}
.emi-paid-tag svg{width:15px;height:15px}
/* Custom confirm dialog (replaces browser confirm) */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .18s}
.confirm-overlay.show{display:flex;opacity:1}
.confirm-box{width:100%;max-width:340px;background:var(--surf);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.3);transform:translateY(10px);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.confirm-overlay.show .confirm-box{transform:translateY(0)}
.confirm-msg{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:18px}
.confirm-btns{display:flex;gap:10px}
.confirm-btn{flex:1;padding:11px;border-radius:11px;font-size:14px;font-weight:700;font-family:var(--font-ui);cursor:pointer;border:1px solid var(--border)}
.confirm-cancel{background:var(--surf2);color:var(--text)}
.confirm-ok{background:var(--blue);color:#fff;border-color:var(--blue)}
.confirm-ok.danger{background:var(--red);border-color:var(--red)}
/* Book switcher */
.book-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1900;display:none;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.book-overlay.show{display:flex;opacity:1}
.book-sheet{width:100%;max-width:480px;background:var(--surf);border-radius:20px 20px 0 0;padding:20px;max-height:80vh;overflow-y:auto;transform:translateY(20px);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.book-overlay.show .book-sheet{transform:translateY(0)}
.book-sheet-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.book-close{background:var(--surf2);border:none;width:32px;height:32px;border-radius:50%;font-size:15px;cursor:pointer;color:var(--muted)}
.book-item{display:flex;align-items:center;gap:8px;background:var(--surf2);border:1px solid var(--border);border-radius:13px;padding:13px;margin-bottom:9px}
.book-item.active{border-color:var(--blue);background:var(--blue-soft,rgba(74,107,168,.08))}
.book-item-main{flex:1;cursor:pointer}
.book-item-name{font-size:15px;font-weight:700;color:var(--text)}
.book-active-tag{font-size:10px;background:var(--blue);color:#fff;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle;}
.book-item-role{font-size:11px;color:var(--muted);margin-top:2px}
.book-item-actions{display:flex;gap:6px}
.book-mini-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surf);cursor:pointer;font-size:14px}
.book-mini-btn.danger{color:var(--red)}
.book-create-btn{width:100%;margin-top:8px;padding:13px;border:1px dashed var(--blue);border-radius:13px;background:var(--blue-soft,rgba(74,107,168,.06));color:var(--blue);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
/* Custom category management */
.cc-add-box{display:flex;gap:8px;align-items:center}
.cc-emoji-btn{width:48px;height:48px;border-radius:12px;border:1px solid var(--border);background:var(--surf2);font-size:24px;cursor:pointer;flex-shrink:0}
.cc-name-input{flex:1;min-width:0;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--surf2);color:var(--text);font-size:14px}
.cc-add-btn{padding:12px 18px;border:none;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;cursor:pointer;flex-shrink:0}
.cc-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border)}
.cc-row-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.cc-row-name{flex:1;font-size:14px;font-weight:600;color:var(--text)}
.cc-row-del{padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surf);color:var(--red);font-size:12px;font-weight:700;cursor:pointer}
.picker-item-add .picker-item-ic{border:1px dashed var(--blue)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:8px 4px;overflow-y:auto}
.emoji-cell{aspect-ratio:1;border-radius:12px;border:1px solid var(--border);background:var(--surf2);font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.emoji-cell:active{transform:scale(.9);background:var(--surf3)}
/* Bulk SMS import rows */
.bulk-sms-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border:1px solid var(--border);border-radius:11px;margin-bottom:8px;cursor:pointer;background:var(--surf2)}
.bulk-sms-row.off{opacity:.45}
.bulk-chk{width:24px;height:24px;border-radius:7px;border:2px solid var(--teal);display:flex;align-items:center;justify-content:center;color:var(--teal);font-weight:800;font-size:14px;flex-shrink:0}
.bulk-sms-row.off .bulk-chk{border-color:var(--muted);color:transparent}
/* Prominent natural-language composer */
.composer{background:linear-gradient(135deg,#1E4B8F,#2E8A82);border-radius:16px;padding:4px;margin-bottom:10px;box-shadow:0 8px 20px rgba(30,75,143,.24)}
.composer-inner{background:rgba(255,255,255,.15);border-radius:14px;display:flex;align-items:center;gap:9px;padding:10px 11px}
.composer-plus{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.92);color:#1E4B8F;border:none;font-size:22px;font-weight:800;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.composer-text{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:15px;font-weight:500}
.composer-text::placeholder{color:rgba(255,255,255,.7)}
.composer-mic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:15px;flex-shrink:0;cursor:pointer}
.composer-send{width:42px;height:42px;border-radius:12px;background:#25B3A6;border:none;color:#fff;font-size:19px;font-weight:800;flex-shrink:0;cursor:pointer;box-shadow:0 3px 8px rgba(37,179,166,.4)}
.composer-send:active,.composer-plus:active,.composer-mic:active{transform:scale(.93)}
.composer-hint{text-align:center;color:rgba(255,255,255,.8);font-size:10.5px;padding:3px 0 2px}
/* Colorful month summary card */
.month-summary{background:var(--surf);border-radius:18px;padding:17px;margin-bottom:13px;box-shadow:0 4px 16px rgba(30,75,143,.09)}
.ms-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.ms-month{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.ms-status{font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;background:rgba(47,143,99,.14);color:var(--green)}
.ms-status.over{background:rgba(194,78,61,.14);color:var(--red)}
.ms-spent{font-family:var(--font-num);font-size:30px;font-weight:800;color:var(--text)}
.ms-spent small{font-size:14px;color:var(--muted);font-weight:600}
.ms-bar{height:10px;border-radius:6px;background:var(--surf3);margin:11px 0 6px;overflow:hidden}
.ms-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#1E4B8F,#25B3A6);width:0%;transition:width .6s cubic-bezier(.22,1,.36,1)}
.ms-bar-fill.over{background:linear-gradient(90deg,#C24E3D,#E0913A)}
.ms-barlabels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600}
.ms-splits{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.ms-split{text-align:center;flex:1}
.ms-split-lbl{font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--muted)}
.ms-split-val{font-family:var(--font-num);font-size:19px;font-weight:800;margin-top:3px}
.ms-split-val.g{color:var(--green)}.ms-split-val.o{color:var(--orange)}.ms-split-val.b{color:var(--blue)}
/* Safe to Spend circle */
.sts-wrap{text-align:center;margin:6px 0 16px;cursor:pointer}
.sts-label{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--muted);margin-bottom:14px}
.sts-circle{width:220px;height:220px;margin:0 auto;position:relative}
.sts-ring{width:100%;height:100%;transform:rotate(-90deg)}
.sts-ring-bg{fill:none;stroke:var(--surf3);stroke-width:14}
.sts-ring-fg{fill:none;stroke:url(#stsGrad);stroke-width:14;stroke-linecap:round;stroke-dasharray:678.58;stroke-dashoffset:678.58;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
.sts-inner{position:absolute;inset:20px;border-radius:50%;background:linear-gradient(135deg,#1E4B8F,#2E6DD4);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 12px 30px rgba(30,75,143,.28)}
.sts-amt{font-family:var(--font-num);font-size:34px;font-weight:800;line-height:1}
.sts-cap{font-size:12px;opacity:.85;margin-top:5px}
.sts-sub{font-size:12px;color:var(--muted);margin-top:12px;font-weight:600}
.sts-inner.over{background:linear-gradient(135deg,#C24E3D,#E0913A)}
/* New header with rupee logo + greeting + name */
.hdr-id{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0;flex:1}
.hdr-logo{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#1E4B8F,#2E8A82);display:flex;align-items:center;justify-content:center;color:#fff;font-size:25px;font-weight:900;font-family:var(--font-num,inherit);flex-shrink:0;box-shadow:0 4px 12px rgba(30,75,143,.28)}
.hdr-id-text{min-width:0}
.hdr-greeting{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.1}
.hdr-name-row{display:flex;align-items:center;gap:5px}
.hdr-name{font-size:21px;font-weight:800;color:var(--text);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.hdr-chev{width:15px;height:15px;opacity:.5;flex-shrink:0}
.hdr-book-sub{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--teal);font-weight:700;line-height:1.2;margin-top:1px}
/* Home live preview card */
.home-preview{display:flex;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--border);border-radius:16px;padding:13px 15px;margin-bottom:13px;box-shadow:0 4px 14px rgba(30,75,143,.08);cursor:pointer;animation:cardIn .25s ease-out}
.hp-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.hp-icon svg{width:22px;height:22px}
.hp-info{flex:1;min-width:0}
.hp-name{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px}
.hp-chips{display:flex;gap:6px;flex-wrap:wrap}
.hp-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;cursor:pointer}
.hp-chip.sel{font-weight:800}
/* Business book fields */
.biz-type-btn{flex:1;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surf2);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.biz-type-btn.active{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.biz-billable{display:flex;align-items:center;gap:10px;padding:11px 2px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.biz-check{width:24px;height:24px;border-radius:7px;border:2px solid var(--teal);flex-shrink:0;position:relative;transition:background .15s}
.biz-check.on{background:var(--teal)}
.biz-check.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px}
/* Smart GST UI */
.gst-pct-row{display:flex;gap:8px;margin-bottom:12px}
.gst-pct{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:var(--surf2);color:var(--muted);font-size:14px;font-weight:800;cursor:pointer;transition:transform .1s}
.gst-pct:active{transform:scale(.95)}
.gst-pct.active{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.gst-manual{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative}
.gst-manual-lbl{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.gst-manual-input{flex:1;border:1.5px solid var(--border);border-radius:10px;background:var(--surf2);padding:9px 26px 9px 12px;font-size:14px;font-weight:700;color:var(--text);outline:none;width:100%}
.gst-manual-input:focus{border-color:var(--teal)}
.gst-manual-pct{position:absolute;right:12px;font-size:14px;font-weight:700;color:var(--muted);pointer-events:none}
.gst-calc{background:var(--surf2);border-radius:12px;padding:12px 14px}
.gst-calc-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding:3px 0}
.gst-calc-row span:last-child{font-weight:700;color:var(--text);font-family:var(--font-num)}
.gst-amt-row span:last-child{color:var(--teal)}
.gst-total-row{border-top:1px dashed var(--border);margin-top:5px;padding-top:8px;font-weight:800}
.gst-total-row span{font-size:14px!important;color:var(--text)!important}
.gst-note{font-size:11px;color:var(--muted);margin-top:8px;text-align:center}
/* Business section in header menu */
.hdr-biz-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:4px 0;padding:6px 0;background:linear-gradient(135deg,rgba(30,75,143,.03),rgba(46,138,130,.03))}
.hdr-biz-label{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--teal);padding:6px 14px 4px}
.hdr-soon{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.5px;color:var(--orange);background:rgba(224,145,58,.14);padding:2px 8px;border-radius:20px}
/* Business Parties page */
.biz-parties-intro{font-size:12px;color:var(--muted);margin-bottom:12px}
.biz-search{width:100%;background:var(--surf2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--text);outline:none;margin-bottom:14px;font-family:var(--font-ui)}
.biz-search:focus{border-color:var(--teal)}
.biz-party-card{display:flex;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:13px;margin-bottom:9px;cursor:pointer;transition:transform .12s}
.biz-party-card:active{transform:scale(.98)}
.biz-party-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1E4B8F,#2E8A82);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;flex-shrink:0}
.biz-party-info{flex:1;min-width:0}
.biz-party-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-party-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.biz-party-amt{text-align:right;flex-shrink:0;font-family:var(--font-num)}
.bp-sale{color:var(--green);font-weight:800;font-size:14px}
.bp-exp{color:var(--red);font-weight:700;font-size:13px;margin-top:2px}
.biz-empty{text-align:center;padding:50px 20px}
.biz-empty-ic{font-size:44px;margin-bottom:12px}
.biz-empty-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:6px}
.biz-empty-sub{font-size:13px;color:var(--muted);line-height:1.5;max-width:280px;margin:0 auto}
/* Party detail / ledger */
.party-summary-card{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#1E4B8F,#2E8A82);border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:0 8px 22px rgba(30,75,143,.25)}
.ps-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;flex-shrink:0}
.ps-stats{flex:1;display:flex;justify-content:space-between;gap:8px}
.ps-stat{display:flex;flex-direction:column;gap:3px}
.ps-stat-lbl{font-size:10px;letter-spacing:.5px;color:rgba(255,255,255,.75);text-transform:uppercase}
.ps-stat-val{font-family:var(--font-num);font-size:16px;font-weight:800;color:#fff}
.ps-stat-val.ps-in{color:#8fe6bf}
.ps-stat-val.ps-out{color:#ffb3a8}
.party-txn-label{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--muted);margin-bottom:10px}
.party-txn-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.pt-left{flex:1;min-width:0}
.pt-desc{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-meta{font-size:11px;color:var(--muted);margin-top:2px}
.pt-amt{font-family:var(--font-num);font-weight:800;font-size:15px;flex-shrink:0}
.pt-amt.pt-in{color:var(--green)}
.pt-amt.pt-out{color:var(--red)}
.pt-amt.pt-ref{color:var(--orange)}
/* Party detail: basic details card + actions */
.party-details-card{background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.pd-row{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:13.5px;color:var(--text)}
.pd-ic{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.party-actions{display:flex;gap:9px;margin-bottom:18px}
/* Party autocomplete suggestions */
.party-suggest{position:absolute;top:100%;left:0;right:0;background:var(--surf);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:30;margin-top:2px;overflow:hidden;max-height:220px;overflow-y:auto}
.party-suggest-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.party-suggest-item:active,.party-suggest-item:hover{background:var(--surf2)}
.party-suggest-item .ps-name{font-size:14px;font-weight:600;color:var(--text)}
.party-suggest-item .ps-type{font-size:9px;font-weight:800;padding:2px 7px;border-radius:10px}
.party-suggest-item .ps-type.client{background:var(--green-soft,rgba(47,143,99,.14));color:var(--green)}
.party-suggest-item .ps-type.vendor{background:rgba(224,145,58,.14);color:var(--orange)}
/* Business features guide overlay */
.biz-guide-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.biz-guide-card{background:var(--bg);border-radius:22px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;padding:0 0 20px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.biz-guide-hero{background:linear-gradient(135deg,#1E4B8F,#2E8A82);border-radius:22px 22px 0 0;padding:26px 20px 22px;text-align:center;color:#fff}
.biz-guide-hero-ic{font-size:40px;margin-bottom:8px}
.biz-guide-hero-title{font-size:20px;font-weight:800;margin-bottom:4px}
.biz-guide-hero-sub{font-size:13px;opacity:.9}
.biz-guide-list{padding:18px 18px 6px}
.ag-section{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--blue);margin:14px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.ag-section:first-child{margin-top:0}
/* Team members */
.member-card{display:flex;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:13px 14px;margin-bottom:9px}
.member-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#1E4B8F,#2E8A82);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0}
.member-info{flex:1;min-width:0}
.member-name{font-size:14px;font-weight:700;color:var(--text)}
.member-you{font-size:9px;font-weight:800;background:var(--blue-soft);color:var(--blue);padding:1px 6px;border-radius:8px;vertical-align:middle}
.member-mobile{font-size:12px;color:var(--muted);margin-top:1px}
.role-badge{font-size:10px;font-weight:800;padding:3px 10px;border-radius:12px;flex-shrink:0}
.role-owner{background:rgba(30,75,143,.14);color:#1E4B8F}
.role-manager{background:rgba(46,138,130,.14);color:var(--teal)}
.role-staff{background:rgba(224,145,58,.14);color:var(--orange)}
.role-viewer{background:var(--surf2);color:var(--muted)}
.member-menu-btn{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;padding:2px 6px;flex-shrink:0}
.members-roles-help{margin-top:20px;padding:14px 16px;background:var(--surf2);border-radius:12px}
.mrh-title{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.mrh-row{font-size:12px;color:var(--text);line-height:1.7}
/* Invite member modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.modal-card{background:var(--bg);border-radius:18px;max-width:400px;width:100%;padding:22px 20px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.modal-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px}
.modal-sub{font-size:12.5px;color:var(--muted);line-height:1.5}
.invite-roles{display:flex;gap:8px;margin-top:6px}
.invite-role{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:var(--surf);color:var(--text);font-size:12px;font-weight:700;cursor:pointer}
.invite-role.active{background:var(--teal);border-color:var(--teal);color:#fff}
.invite-role-desc{font-size:11.5px;color:var(--muted);margin-top:8px;min-height:16px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-btn{flex:1;padding:12px;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;border:none}
.modal-btn.cancel{background:var(--surf2);color:var(--text)}
.modal-btn.ok{background:linear-gradient(135deg,#1E4B8F,#2E8A82);color:#fff}
.invite-code-share{margin-top:16px}
.ics-lbl{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;text-align:center}
.ics-code{font-size:20px;font-weight:800;letter-spacing:3px;color:var(--blue);text-align:center;background:var(--blue-soft);padding:10px;border-radius:10px}
.ics-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5;text-align:center}
.viewer-banner{position:fixed;top:8px;left:50%;transform:translateX(-50%);background:var(--surf2);color:var(--muted);font-size:11px;font-weight:700;padding:5px 14px;border-radius:20px;border:1px solid var(--border);z-index:40;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.mm-remove-btn{width:100%;margin-top:12px;padding:11px;border-radius:11px;border:1px solid rgba(194,78,61,.3);background:rgba(194,78,61,.06);color:var(--red);font-size:13px;font-weight:700;cursor:pointer}
/* Discount toggle */
.disc-toggle{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;flex-shrink:0;height:44px}
.disc-tbtn{width:46px;background:var(--surf);border:none;font-size:16px;font-weight:700;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.disc-tbtn+.disc-tbtn{border-left:1px solid var(--border)}
.disc-tbtn.active{background:var(--teal);color:#fff}
#invDiscountValue{height:44px;box-sizing:border-box}
/* GST mode */
.gst-mode-row{display:flex;gap:8px}
.gst-mbtn,.gst-sbtn{flex:1;padding:11px 8px;border-radius:10px;border:1.5px solid var(--border);background:var(--surf);color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;text-align:center;line-height:1.2}
.gst-mbtn.active,.gst-sbtn.active{background:var(--blue);border-color:var(--blue);color:#fff}
.gst-sbtn{font-size:11.5px;padding:10px 6px}
.gst-hint{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.4}
/* Custom fields */
.cf-row{display:flex;gap:6px;margin-bottom:8px;align-items:center}
.cf-row .cf-label{flex:1;min-width:0;height:42px;box-sizing:border-box}
.cf-row .cf-value{flex:1.3;min-width:0;height:42px;box-sizing:border-box}
.cf-del{background:var(--surf2);border:none;color:var(--red);font-size:14px;cursor:pointer;width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cf-add-btn{background:none;border:1px dashed var(--border);border-radius:10px;padding:11px;width:100%;color:var(--teal);font-size:13px;font-weight:600;cursor:pointer;margin-top:4px}
.ip-custom{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;padding:10px 12px;background:#f6f8fc;border-radius:6px}
.ip-cf{font-size:11.5px;color:#333}

/* ══ RESPONSIVE & LAYOUT FIXES ══ */
/* Section labels for cards (NON-absolute, always visible — unlike floating .fl-label) */
.sec-label{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.4;letter-spacing:.2px}
/* Cards: allow content to show (the old rule clipped with overflow:hidden), consistent spacing */
.add-card{overflow:visible!important;margin-bottom:14px!important;padding:16px 14px!important}
/* More breathing room between the discount / GST / custom cards */
#page-invoice-edit .add-card{margin-top:14px}
#page-invoice-edit .inv-totals{margin:14px 0}
/* Header: enough top padding so title is fully visible */
.page-head{padding-top:14px;padding-bottom:6px;min-height:44px;display:flex;align-items:center;gap:8px}
.page-head h2{line-height:1.3;margin:0}
/* Toast: sit ABOVE bottom nav + save area, never cover them */
.toast{bottom:96px!important;max-width:calc(100vw - 32px)!important;white-space:normal!important;line-height:1.35;padding:11px 18px!important}
/* Ensure pages have bottom padding so the Save button clears the nav bar */
.page{padding-bottom:96px}
/* Labels never clipped (only for field-wrapper labels, not the absolute floating ones) */
/* Inputs & textareas: full width, comfortable touch target (44px min) */
.fl-input{box-sizing:border-box;width:100%;min-height:44px;font-size:15px}
textarea.fl-input{min-height:72px;resize:vertical;line-height:1.4}
#invNotes,#invTerms{min-height:80px}
/* Buttons: min 44px touch target */
.add-btn,.modal-btn,.gst-mbtn,.gst-sbtn,.disc-tbtn{min-height:44px}
.add-btn{font-size:15px;font-weight:800;letter-spacing:.3px}
/* Save invoice button — always visible, full width, clear spacing */
#invSaveBtn{width:100%;margin-top:14px;position:relative;z-index:1}
/* GST buttons: responsive, wrap gracefully, readable on small screens */
.gst-mode-row{display:flex;gap:8px;flex-wrap:wrap}
.gst-mbtn,.gst-sbtn{flex:1 1 0;min-width:0;box-sizing:border-box;white-space:normal;line-height:1.25}
.gst-sbtn{font-size:11px;padding:10px 4px;flex:1 1 46%}
/* Discount row: toggle + input align, no overlap */
.disc-toggle{height:44px}
.disc-tbtn{min-width:44px}
/* Custom field rows: responsive, delete button aligned, no overlap */
.cf-row{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.cf-row .cf-label,.cf-row .cf-value{min-height:44px;font-size:14px}
.cf-del{width:38px;height:38px;min-width:38px;flex-shrink:0}
/* Totals: consistent alignment */
.inv-tot-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;gap:12px}
/* Section headers: never overlap, clear spacing */
.inv-items-hdr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
/* Modal close buttons / icons: proper touch target */
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-btn{flex:1 1 0;min-width:100px}
/* Prevent horizontal overflow app-wide */
.page,.add-card,.inv-totals{max-width:100%}
input,textarea,select{max-width:100%}
/* Space above custom-card's Notes/Terms so they don't crowd the Add-field button */
#invCustomFields{margin-bottom:8px}
.cf-add-btn{margin-bottom:14px}
/* Per-item custom fields (Batch No, Expiry, etc.) */
.inv-item-cf{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.inv-item-cf-f{flex:1 1 45%;min-width:0;display:flex;flex-direction:column;gap:3px}
.inv-item-cf-f label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.inv-item-cf-f input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surf);color:var(--text);font-size:14px}
.biz-guide-item{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.biz-guide-item .bg-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;flex-shrink:0}
.biz-guide-item .bg-t{font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:2px}
.biz-guide-item .bg-d{font-size:12px;color:var(--muted);line-height:1.45}
.biz-guide-tip{margin:4px 18px 16px;padding:11px 13px;background:var(--teal-soft);border-radius:11px;font-size:12px;color:var(--text);line-height:1.5}
.biz-guide-card .add-btn{margin:0 18px}
.biz-guide-skip{display:block;width:calc(100% - 36px);margin:10px 18px 0;background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:6px}
/* Business Transactions page */
.biz-period-row{display:flex;gap:8px;margin-bottom:14px}
.biz-period{flex:1;padding:9px;border-radius:10px;border:1.5px solid var(--border);background:var(--surf2);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.biz-period.active{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.biz-txn-summary{display:flex;gap:9px;margin-bottom:14px}
.bts-item{flex:1;background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:12px 10px;text-align:center}
.bts-lbl{display:block;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.bts-val{display:block;font-family:var(--font-num);font-size:16px;font-weight:800;color:var(--text)}
.bts-in .bts-val{color:var(--green)}
.bts-out .bts-val{color:var(--red)}
.bts-net{background:linear-gradient(135deg,rgba(30,75,143,.08),rgba(46,138,130,.06))}
.biz-txn-filter{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.btf-chip{padding:7px 15px;border-radius:20px;border:1.5px solid var(--border);background:var(--surf);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0}
.btf-chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
/* Business Reports page */
.rep-pl-card{background:linear-gradient(135deg,#2F8F63,#25B3A6);border-radius:18px;padding:22px;text-align:center;margin-bottom:16px;box-shadow:0 10px 26px rgba(47,143,99,.28)}
.rep-pl-card.loss{background:linear-gradient(135deg,#C24E3D,#E0913A);box-shadow:0 10px 26px rgba(194,78,61,.28)}
.rep-pl-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:6px}
.rep-pl-value{font-family:var(--font-num);font-size:34px;font-weight:800;color:#fff;letter-spacing:-.5px}
.rep-pl-sub{font-size:12px;color:rgba(255,255,255,.8);margin-top:4px}
.rep-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.rep-stat{display:flex;align-items:center;gap:11px;background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:13px}
.rep-stat-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex-shrink:0;color:#fff}
.rep-stat-ic.rep-in{background:var(--green)}
.rep-stat-ic.rep-out{background:var(--red)}
.rep-stat-ic.rep-gst{background:#6B5BD4}
.rep-stat-ic.rep-ref{background:var(--orange)}
.rep-stat-lbl{font-size:10.5px;color:var(--muted);margin-bottom:2px}
.rep-stat-val{font-family:var(--font-num);font-size:16px;font-weight:800;color:var(--text)}
.rep-section-label{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--muted);margin-bottom:12px}
.rep-cat-row{margin-bottom:13px}
.rep-cat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.rep-cat-name{font-size:13px;font-weight:700;color:var(--text)}
.rep-cat-amt{font-family:var(--font-num);font-size:13px;font-weight:800;color:var(--text)}
.rep-cat-bar{height:8px;background:var(--surf2);border-radius:5px;overflow:hidden}
.rep-cat-fill{height:100%;border-radius:5px;transition:width .6s ease}
.rep-export-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surf2);border:1.5px solid var(--border);border-radius:13px;padding:14px;color:var(--blue);font-size:14px;font-weight:700;cursor:pointer;margin-top:16px}
/* Business Add — type selector */
.bza-type-row{display:flex;gap:8px;margin-bottom:16px}
.bza-type{flex:1;padding:13px 8px;border-radius:13px;border:2px solid var(--border);background:var(--surf);color:var(--muted);font-size:14px;font-weight:800;cursor:pointer;transition:transform .1s}
.bza-type:active{transform:scale(.96)}
.bza-type.sale.active{background:var(--green);border-color:var(--green);color:#fff}
.bza-type.expense.active{background:var(--red);border-color:var(--red);color:#fff}
.bza-type.refund.active{background:var(--orange);border-color:var(--orange);color:#fff}
/* Business dashboard — quick actions + recent */
.biz-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}
.biz-action{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:12px 4px;cursor:pointer;font-size:11px;font-weight:700;color:var(--text);transition:transform .12s}
.biz-action:active{transform:scale(.95)}
.biz-action-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff}
.biz-recent-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.biz-recent-hdr span{font-size:13px;font-weight:800;color:var(--text)}
.biz-recent-hdr a{font-size:12px;font-weight:700;color:var(--blue);cursor:pointer}
/* Party badges + edit */
.pty-badge{font-size:9px;font-weight:800;letter-spacing:.3px;padding:2px 7px;border-radius:12px;vertical-align:middle;margin-left:4px}
.pty-badge.client{background:var(--green-soft,rgba(47,143,99,.14));color:var(--green)}
.pty-badge.vendor{background:rgba(224,145,58,.14);color:var(--orange)}
.biz-party-card{position:relative}
.pty-edit{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--surf2);color:var(--muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pty-edit:active{transform:scale(.9)}
/* Invoices */
.inv-card{display:flex;justify-content:space-between;align-items:center;background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:14px;margin-bottom:9px;cursor:pointer}
.inv-card:active{transform:scale(.99)}
.inv-card-no{font-size:15px;font-weight:800;color:var(--text)}
.inv-card-client{font-size:12px;color:var(--muted);margin-top:2px}
.inv-card-right{text-align:right}
.inv-card-amt{font-family:var(--font-num);font-size:15px;font-weight:800;color:var(--text)}
.inv-status{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:12px;margin-top:4px}
.inv-status.paid{background:var(--green-soft,rgba(47,143,99,.14));color:var(--green)}
.inv-status.unpaid{background:rgba(224,145,58,.14);color:var(--orange)}
.inv-items-hdr{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}
.inv-items-hdr span{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.inv-items-hdr button{background:var(--teal-soft);color:var(--teal);border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.inv-item{background:var(--surf);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:9px}
.inv-item-desc{width:100%;border:none;border-bottom:1px solid var(--border);background:transparent;font-size:14px;font-weight:600;color:var(--text);padding:4px 0 8px;outline:none;margin-bottom:8px}
.inv-item-row{display:flex;gap:8px;align-items:flex-end}
.inv-item-f{flex:1}
.inv-item-f label{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.inv-item-f input{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surf2);padding:8px;font-size:13px;font-weight:700;color:var(--text);outline:none}
.inv-item-del{width:32px;height:32px;border:none;border-radius:8px;background:rgba(194,78,61,.1);color:var(--red);font-size:14px;cursor:pointer;flex-shrink:0}
.inv-item-amt{font-size:11px;color:var(--muted);margin-top:8px}
.inv-item-amt b{color:var(--text)}
.inv-totals{background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:14px;margin-bottom:14px}
.inv-tot-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:4px 0}
.inv-tot-row span:last-child{font-family:var(--font-num);font-weight:700;color:var(--text)}
.inv-tot-grand{border-top:1px dashed var(--border);margin-top:6px;padding-top:10px;font-weight:800}
.inv-tot-grand span{font-size:17px!important;color:var(--text)!important}
.inv-client-opt{padding:11px 12px;border-radius:9px;font-size:14px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border)}
.inv-client-opt:active{background:var(--surf2)}
.inv-client-new{color:var(--teal);font-weight:700;border-bottom:none}
/* Invoice view + paper */
.inv-view-actions{display:flex;gap:8px;margin-bottom:14px}
.inv-act-btn{flex:1;padding:11px;border-radius:11px;border:1.5px solid var(--border);background:var(--surf);color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.inv-act-btn.primary{background:linear-gradient(135deg,#1E4B8F,#2E8A82);color:#fff;border-color:transparent}
.inv-act-btn.share{background:linear-gradient(135deg,#2F8F63,#25B3A6);color:#fff;border-color:transparent}
.invoice-paper{background:#fff;border:1px solid var(--border);border-radius:8px;padding:0;position:relative;color:#222;overflow:hidden}
/* Clean classic invoice — light blue header bar */
.ip-bar{display:flex;justify-content:space-between;align-items:center;background:#3EA6C9;color:#fff;padding:14px 22px}
.ip-bar-name{font-size:18px;font-weight:800;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
.ip-logo{max-height:34px;max-width:90px;object-fit:contain;background:#fff;padding:3px;border-radius:3px}
.ip-bar-title{font-size:17px;font-weight:800;letter-spacing:1px;text-align:right}
.ip-proforma-tag{font-size:8px;font-weight:600;color:#ffe6e0;letter-spacing:.3px;margin-top:1px}
.ip-body{padding:20px 22px 24px}
.ip-bizinfo{margin-bottom:22px}
.ip-bizinfo-name{font-size:15px;font-weight:800;color:#222;margin-bottom:3px}
.ip-line{font-size:11px;color:#555;line-height:1.55}
/* Meta row: Bill To / Ship To / Invoice details */
.ip-meta{width:100%;border-collapse:collapse;margin-bottom:20px}
.ip-meta-col{vertical-align:top;width:33%;padding-right:12px}
.ip-meta-right{text-align:right;padding-right:0}
.ip-col-lbl{font-size:11px;font-weight:800;color:#222;margin-bottom:4px}
.ip-col-name{font-size:12.5px;font-weight:700;color:#222;margin-bottom:2px}
.ip-metatable{margin-left:auto;border-collapse:collapse}
.ip-metatable .mk{font-size:11px;font-weight:700;color:#444;text-align:right;padding:2px 10px 2px 0}
.ip-metatable .mv{font-size:11px;color:#333;text-align:right;padding:2px 0}
/* Items table — clean bordered */
.ip-table{width:100%;border-collapse:collapse;margin-bottom:0;border:1px solid #d0d5dd}
.ip-table th{background:#f4f6f8;font-size:10px;font-weight:700;letter-spacing:.3px;color:#333;text-transform:uppercase;padding:9px 8px;text-align:left;border:1px solid #d0d5dd}
.ip-table th.num,.ip-table td.num{text-align:right}
.ip-table td{font-size:11.5px;color:#333;padding:9px 8px;border:1px solid #e4e8ee}
/* Totals */
.ip-totwrap{width:100%;border-collapse:collapse;margin-top:0}
.ip-totwrap>tbody>tr>td:first-child{width:52%}
.ip-totcell{border:1px solid #d0d5dd;border-top:none}
.ip-tot-row{display:flex;justify-content:space-between;font-size:12px;color:#444;padding:7px 12px;border-bottom:1px solid #eaedf1}
.ip-tot-row span:last-child{font-weight:700;color:#222}
.ip-grand{background:#f4f6f8;border-bottom:none;font-size:14px!important;font-weight:800}
.ip-grand span{font-size:14px!important;color:#222!important;font-weight:800}
/* Notes / terms / bank */
.ip-notes{font-size:11px;color:#555;margin-top:18px;line-height:1.5}
.ip-terms,.ip-bank{font-size:11px;color:#555;margin-top:16px;line-height:1.55}
.ip-terms-lbl{font-size:11px;font-weight:800;color:#222;margin-bottom:4px}
.ip-status-stamp{position:absolute;top:150px;right:34px;font-size:26px;font-weight:800;letter-spacing:3px;padding:5px 14px;border:3px solid;border-radius:6px;transform:rotate(-12deg);opacity:.16}
.ip-status-stamp.paid{color:#2F8F63;border-color:#2F8F63}
.ip-status-stamp.unpaid{color:#C24E3D;border-color:#C24E3D}
.ip-footer{text-align:center;font-size:10px;color:#aaa;margin-top:26px;padding-top:12px;border-top:1px solid #eee}
/* Print: show only the invoice paper */
@media print{
  body.printing-invoice *{visibility:hidden!important}
  body.printing-invoice #invoicePaper,body.printing-invoice #invoicePaper *{visibility:visible!important}
  body.printing-invoice #invoicePaper{position:absolute;left:0;top:0;width:100%;border:none;border-radius:0;box-shadow:none;padding:20px}
  .no-print{display:none!important}
}
/* Business dashboard */
.biz-hero{background:linear-gradient(135deg,#1E4B8F,#2E8A82);border-radius:20px;padding:20px;color:#fff;margin-bottom:16px;box-shadow:0 10px 26px rgba(30,75,143,.28)}
.biz-hero-top{display:flex;align-items:center;margin-bottom:14px}
.biz-hero-name{font-size:22px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:6px}
.biz-hero-name::after{content:'⌄';opacity:.7}
.biz-hero-label{font-size:14px;opacity:.9;font-weight:600}
.biz-hero-amt{font-family:var(--font-num);font-size:40px;font-weight:800;margin:2px 0 8px}
.biz-hero-sub{font-size:12px;opacity:.8}
.biz-periods{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.biz-daterange{font-size:14px;font-weight:700;color:var(--text)}
.biz-period-tabs{display:flex;gap:6px}
.biz-ptab{padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:var(--surf);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.biz-ptab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.biz-qbtns{display:flex;gap:10px;flex-wrap:wrap}
.biz-qbtn{flex:1;min-width:100px;padding:13px;border-radius:13px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent}
.biz-qbtn.sale{background:rgba(47,143,99,.12);color:var(--green);border-color:rgba(47,143,99,.3)}
.biz-qbtn.expense{background:rgba(194,78,61,.1);color:var(--red);border-color:rgba(194,78,61,.28)}
.biz-qbtn.refund{background:rgba(224,145,58,.12);color:var(--orange);border-color:rgba(224,145,58,.3)}
.biz-qbtn.sel{outline:2.5px solid currentColor;outline-offset:1px}
.biz-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.biz-stat{background:var(--surf);border-radius:16px;padding:15px;box-shadow:0 3px 12px rgba(30,75,143,.07)}
.biz-stat-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}
.biz-stat-lbl{font-size:12px;color:var(--muted);font-weight:600}
.biz-stat-val{font-family:var(--font-num);font-size:22px;font-weight:800;margin-top:3px}
.biz-catrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.biz-catrow:last-child{border-bottom:none}
.biz-catrow-name{flex:1;font-size:13px;font-weight:600}
.biz-catrow-amt{font-weight:800;font-size:14px}
/* Business Overview|List tabs */
.biz-viewtabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:14px}
.biz-vtab{flex:1;padding:12px;background:none;border:none;font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;position:relative}
.biz-vtab.active{color:var(--blue)}
.biz-vtab.active::after{content:'';position:absolute;bottom:-2px;left:20%;right:20%;height:3px;background:var(--blue);border-radius:3px}
.biz-sec-hdr{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:800;margin-bottom:10px}
.biz-empty{font-size:12px;color:var(--muted);text-align:center;padding:12px}
.biz-txn{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.biz-txn:last-child{border-bottom:none}
.biz-txn-info{flex:1;min-width:0}
.biz-txn-name{font-size:14px;font-weight:700;color:var(--text)}
.biz-txn-meta{font-size:11px;color:var(--muted);margin-top:2px}
.biz-txn-amt{font-weight:800;font-size:15px;flex-shrink:0}
.book-mini-btn.star-on{color:var(--gold)}
/* Add-expense quick action buttons (SMS / Scan on one line) */
.quick-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:13px;padding:13px;font-size:13.5px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:transform .12s}
.quick-action-btn:active{transform:scale(.97)}
.quick-action-btn.sms{background:var(--teal-soft);color:var(--teal);border-color:rgba(46,138,130,.28)}
.quick-action-btn.scan{background:var(--blue-soft);color:var(--blue);border-color:rgba(61,111,224,.28)}
/* Compact colorful calendar chip (date) */
.date-chip{position:relative;flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:linear-gradient(135deg,#1E4B8F,#2E8A82);border-radius:14px;padding:8px;cursor:pointer;box-shadow:0 4px 12px rgba(30,75,143,.25);transition:transform .12s}
.date-chip:active{transform:scale(.96)}
.date-chip-ic{color:#fff;display:flex;align-items:center;justify-content:center}
.date-chip-label{color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.date-chip input[type=date]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none}
.date-chip input[type=date]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
/* Colorful payment mode + bank fields */
.pm-field{background:linear-gradient(135deg,rgba(61,111,224,.1),rgba(46,138,130,.06))!important;border-color:rgba(61,111,224,.25)!important}
.ba-field{background:linear-gradient(135deg,rgba(47,143,99,.1),rgba(37,179,166,.06))!important;border-color:rgba(47,143,99,.25)!important}
.pm-field .fl-display-ic,.ba-field .fl-display-ic{color:var(--blue)}
/* Inline payment mode picker (expands under the field) */
.pm-inline{margin:-2px 0 10px;animation:pmExpand .2s ease-out}
@keyframes pmExpand{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.pm-inline-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pm-inline-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;background:var(--surf2);border:1.5px solid var(--border);cursor:pointer;transition:transform .12s}
.pm-inline-item:active{transform:scale(.95)}
.pm-inline-item.sel{border-color:var(--blue);background:var(--blue-soft)}
.pm-inline-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.pm-inline-ic svg{width:17px;height:17px}
.pm-inline-label{font-size:10.5px;font-weight:700;color:var(--text);text-align:center;line-height:1.1}
#pmChevron{transition:transform .2s}
.hp-amt{font-family:var(--font-num);font-size:22px;font-weight:800;color:var(--blue);flex-shrink:0}
/* Offline pending expense marker */
.exp-entry.exp-pending{opacity:.72}
.pend-dot{font-size:11px;opacity:.7;margin-left:3px}
.fam-book-banner{display:flex;align-items:flex-start;gap:8px;background:var(--blue-soft,rgba(74,107,168,.08));border:1px solid rgba(74,107,168,.2);border-radius:11px;padding:11px 13px;margin-bottom:12px;font-size:12px;color:var(--text);line-height:1.5}
/* This Month vs Last Month comparison */
.cmp-summary{font-size:13px;font-weight:700;text-align:center;margin-bottom:2px}
.cmp-row{display:flex;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid var(--border)}
.cmp-row:last-child{border-bottom:none}
.cmp-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.cmp-name{flex:1;font-size:13px;font-weight:600;color:var(--text)}
.cmp-sub{font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px;font-family:var(--font-num,inherit)}
.cmp-change{font-size:12px;font-weight:700;text-align:right;font-family:var(--font-num,inherit);white-space:nowrap}
.amort-summary{font-size:11px;color:var(--muted);text-align:center;margin-bottom:8px}
.amort-table{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:9px}
.amort-row{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:4px;padding:7px 9px;font-size:11px;font-family:var(--font-num,inherit);border-bottom:1px solid var(--border)}
.amort-row:last-child{border-bottom:none}
.amort-row>div:not(:first-child){text-align:right}
.amort-head{position:sticky;top:0;background:var(--surf2);font-weight:700;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);font-family:var(--font-ui)}
.emi-hist-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border)}
.emi-hist-row:last-child{border-bottom:none}
.emi-undo-btn{padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surf2);color:var(--red);font-size:11px;font-weight:700;cursor:pointer}
.emi-catchup{background:var(--surf2);border:1px dashed var(--border);border-radius:10px;padding:10px;margin-bottom:10px}
.emi-catchup-chips{display:flex;flex-wrap:wrap;gap:6px}
.emi-catchup-chip{padding:6px 11px;border-radius:16px;border:1px solid var(--gold);background:var(--gold-soft,rgba(201,162,39,.1));color:var(--gold);font-size:11px;font-weight:700;cursor:pointer}
.lc-btn{background:var(--surf2);border:1px solid var(--border);border-radius:9px;padding:7px 9px;cursor:pointer;color:var(--text);display:flex;align-items:center}
.lc-btn svg.icon{font-size:14px}
.lc-prepay-badge{display:flex;align-items:center;gap:7px;background:var(--green-soft);border:1px solid rgba(63,168,118,.25);border-radius:9px;padding:8px 10px;margin-top:10px;cursor:pointer}
.lc-prepay-badge svg.icon{color:var(--green);font-size:15px;flex-shrink:0}
.lc-prepay-badge .ppb-text{flex:1;font-size:11px;color:var(--text)}
.lc-prepay-badge .ppb-text b{color:var(--green);font-family:var(--font-num)}
.lc-prepay-badge .ppb-chevron{color:var(--muted);transition:transform .2s}
.lc-prepay-badge.expanded .ppb-chevron{transform:rotate(90deg)}
.lc-prepay-history{display:none;margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
.lc-prepay-history.show{display:block}
.pph-row{display:flex;justify-content:space-between;align-items:center;padding:7px 2px;font-size:11px;cursor:pointer;border-radius:8px;transition:background .15s}
.pph-row:active{background:var(--surf2)}
.pph-row .pph-date{color:var(--muted)}
.pph-row .pph-amt{font-weight:700;color:var(--green);font-family:var(--font-num)}
.pph-row .pph-note{color:var(--muted);font-size:10px;display:block;margin-top:1px}
.pph-amt-edit{display:flex;align-items:center;gap:6px}
.pph-edit-icon{color:var(--muted);flex-shrink:0;display:flex}
.pph-edit-icon svg.icon{font-size:13px}
.lc-priority-tag{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:10px;background:var(--gold-soft);color:var(--gold);margin-bottom:8px}
.lc-priority-tag svg.icon{font-size:11px}

/* SAVINGS */
.sav-hero{background:linear-gradient(135deg,rgba(155,127,212,.15),rgba(155,127,212,.05));border:1px solid rgba(155,127,212,.25);border-radius:13px;padding:16px;text-align:center;margin-bottom:11px}
.sh-lbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--purple);margin-bottom:6px}
.sh-val{font-family:var(--font-num);font-size:34px;font-weight:700;color:var(--purple);margin-bottom:3px}.sh-sub{font-size:11px;color:var(--muted)}
.sav-card{background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:13px;margin-bottom:11px;display:flex;align-items:center;gap:12px;cursor:pointer;box-shadow:0 1px 2px rgba(80,65,40,.05),0 3px 10px -3px rgba(80,65,40,.08);transition:box-shadow .15s,transform .15s}
html[data-theme="dark"] .sav-card{box-shadow:0 1px 2px rgba(0,0,0,.15),0 3px 10px -3px rgba(0,0,0,.2)}
.sav-card:active{transform:scale(.99) translateY(1px);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sav-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.sav-icon svg.icon{color:#fff}
.sav-info{flex:1}.sav-name{font-size:14.5px;font-weight:600}.sav-meta{font-size:11px;color:var(--muted);margin-top:2px}
.sav-amt{font-size:17px;font-weight:800;color:var(--purple);font-family:var(--font-num)}

/* EXPENSES */
.exp-hero{background:var(--surf);border:1px solid var(--border);border-radius:15px;padding:12px 14px;margin-bottom:8px;position:relative;overflow:hidden;box-shadow:0 3px 12px rgba(30,75,143,.06)}
.exp-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(135deg,rgba(61,111,224,.10),rgba(46,138,130,.06));pointer-events:none}
.exp-hero>*{position:relative}
.exp-hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.exp-lbl{font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.exp-val{font-family:var(--font-num);font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1;display:inline-block}
.exp-of{font-size:12px;color:var(--muted);font-weight:600;display:inline-block;margin-left:7px}
.exp-rem-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:800;white-space:nowrap}
.exp-rem-badge.ok{background:var(--green-soft,rgba(47,143,99,.12));color:var(--green)}
.exp-rem-badge.over{background:rgba(194,78,61,.12);color:var(--red)}
.exp-btrack{height:9px;background:var(--surf2);border-radius:6px;overflow:hidden;margin-bottom:5px;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.exp-bfill{height:100%;border-radius:6px;transition:width .8s cubic-bezier(.22,1,.36,1);max-width:100%;position:relative}
.exp-bfill.safe{background:linear-gradient(90deg,#1E4B8F,#25B3A6)}
.exp-bfill.warn{background:linear-gradient(90deg,#E0913A,#E8C66A)}
.exp-bfill.over{background:linear-gradient(90deg,#C24E3D,#E0913A)}
/* Smart forecast pill */
.burn-pill{display:flex;align-items:center;gap:7px;margin-top:8px;padding:7px 10px;border-radius:10px;font-size:11px;font-weight:600}
.burn-pill.ok{background:var(--green-soft,rgba(47,143,99,.1));color:var(--green)}
.burn-pill.over{background:rgba(194,78,61,.1);color:var(--red)}
.burn-pill-ic{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.burn-pill-text{flex:1;line-height:1.3}
.burn-pill-text b{font-weight:800}
.burn-pill-val{font-family:var(--font-num);font-size:15px;font-weight:800;flex-shrink:0}
.exp-bfill::after{content:"";position:absolute;top:0;right:0;width:3px;height:100%;background:rgba(255,255,255,.8);border-radius:3px;opacity:.0;transition:opacity .3s}
.exp-bfill[style*="width: 0"]::after{opacity:0}
.exp-bfill.safe{background:linear-gradient(90deg,#34a673,#3FA876)}.exp-bfill.warn{background:linear-gradient(90deg,#e8a13f,#f0b95a)}.exp-bfill.over{background:linear-gradient(90deg,#d14f4f,#e86a6a)}
.exp-blbls{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.mbar{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;margin-bottom:11px}
.mbar{align-items:center;justify-content:center;gap:14px;overflow:visible}
.mnav-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surf2);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.mnav-label{font-size:15px;font-weight:700;min-width:120px;text-align:center;color:var(--text)}
/* Expenses page header: title + month nav + calendar on one line */
.exp-head{display:flex;align-items:center;gap:8px;margin-bottom:13px;flex-wrap:wrap}
.exp-head-title{font-size:26px;font-weight:800;margin:0;flex-shrink:0}
.exp-head-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.exp-head-nav .mnav-btn{width:30px;height:30px;border-radius:8px}
.exp-head-nav .mnav-label{font-size:13px;min-width:74px}
.exp-cal-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surf2);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.fam-month-nav{display:flex;align-items:center;gap:6px}
.fam-month-label{font-size:12px;font-weight:600;color:var(--text);min-width:78px;text-align:center}
.spend-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
.spend-tile{background:var(--surf);border:1px solid var(--border);border-radius:12px;padding:10px 6px;text-align:center}
.st-label{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.st-value{font-size:14px;font-weight:800;font-family:var(--font-num,inherit);color:var(--text)}
.exp-empty-state{text-align:center;padding:34px 20px}
.exp-empty-ic{width:84px;height:84px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.exp-empty-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px}
.exp-empty-sub{font-size:13px;color:var(--muted);line-height:1.6;max-width:280px;margin:0 auto 18px}
.exp-empty-tip{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:var(--surf2);border-radius:20px;padding:8px 14px}
.mbar::-webkit-scrollbar{display:none}
.mchip{flex-shrink:0;padding:5px 11px;border-radius:16px;font-size:11px;border:1px solid var(--border);background:var(--surf2);color:var(--muted);cursor:pointer}
.mchip.active{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.add-card{background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:12px 13px 11px;margin-bottom:11px;position:relative;overflow:hidden}
.add-card::before{content:"";position:absolute;top:0;left:0;right:0;height:46px;background:linear-gradient(135deg,rgba(61,111,224,.08),rgba(91,63,216,.05));pointer-events:none}
.add-card>*{position:relative}
.add-row{display:flex;gap:7px;margin-bottom:8px}
.ei{flex:1;background:var(--surf2);border:1px solid var(--border);border-radius:9px;padding:10px 11px;color:var(--text);font-size:13px;outline:none;min-width:0;font-family:var(--font-ui)}
.ei:focus{border-color:var(--gold)}.ei::placeholder{color:var(--muted)}
.ei.amt{width:95px;flex:none;font-weight:700;font-size:15px}
.ei.date-i{font-size:12px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px}
.cat-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px;border-radius:11px;border:1px solid var(--border);background:var(--surf2);cursor:pointer;font-size:9.5px;font-weight:600;color:var(--muted);text-transform:uppercase;font-family:var(--font-ui)}
.cat-btn.sel{border-color:var(--gold);background:var(--gold-soft);color:var(--gold)}
.cat-btn .cat-btn-ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;box-shadow:0 2px 5px rgba(0,0,0,.22)}
.add-btn{width:100%;padding:13px;border-radius:12px;border:none;background:linear-gradient(135deg,#1E4B8F,#2E8A82);color:#fff;font-size:14px;font-weight:800;cursor:pointer;letter-spacing:.5px;margin-top:2px;box-shadow:0 6px 16px rgba(30,75,143,.3)}
.add-btn:active{opacity:.8}
.cat-sum{background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:13px;margin-bottom:11px}
.cs-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1A1F2B}
.cs-row:last-child{border-bottom:none}
.cs-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:14px;box-shadow:0 2px 5px rgba(0,0,0,.22)}
.cs-bw{flex:1;height:5px;background:var(--surf2);border-radius:5px;overflow:hidden}
.cs-b{height:100%;border-radius:5px}.cs-amt{font-size:13.5px;font-weight:700;min-width:60px;text-align:right;font-family:var(--font-num)}
.exp-list{background:var(--surf);border:1px solid var(--border);border-radius:13px;overflow:hidden;margin-bottom:11px}
.exp-lhdr{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border-bottom:1px solid var(--border)}
.exp-ltitle{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.exp-clr{background:none;border:none;color:var(--red);font-size:11px;cursor:pointer;letter-spacing:1px}
.exp-entry{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid #1A1F2B;animation:eIn .2s ease}
@keyframes eIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.exp-entry:last-child{border-bottom:none}
.eicon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.eicon svg.icon{color:#fff;stroke-width:2}
.einfo{flex:1;min-width:0}.ename{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emeta{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}.eby{font-size:11px;color:var(--blue);margin-top:1px}
.eamt{font-size:16px;font-weight:800;color:var(--red);flex-shrink:0;font-family:var(--font-num)}
.edel{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;flex-shrink:0;display:flex}
.edel svg.icon{font-size:14px}
.exp-empty{padding:26px 13px;text-align:center;color:var(--muted);font-size:12px;line-height:1.8}

/* YEARLY PAYMENTS */
.yp-card{background:var(--surf);border:1px solid var(--border);border-radius:13px;padding:13px;margin-bottom:11px;display:flex;align-items:center;gap:11px;cursor:pointer}
.yp-icon{width:38px;height:38px;border-radius:10px;background:var(--orange);background:rgba(212,154,74,.15);display:flex;align-items:center;justify-content:center;color:var(--orange);flex-shrink:0}
.yp-icon svg.icon{font-size:18px}
.yp-info{flex:1;min-width:0}.yp-name{font-size:13px;font-weight:600}
.yp-meta{font-size:10px;color:var(--muted);margin-top:2px}
.yp-due-soon{color:var(--red)!important;font-weight:600}
.yp-right{text-align:right;flex-shrink:0}
.yp-amt{font-size:14px;font-weight:800;color:var(--orange);font-family:var(--font-num)}
.yp-monthly{font-size:9px;color:var(--muted);margin-top:2px}
.yp-paid-badge{background:var(--green-soft);color:var(--green);font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;margin-top:4px;display:inline-block}

/* PROFILE / FAMILY */
.qr-wrap{background:#fff;border-radius:14px;padding:14px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.invite-code{font-family:var(--font-num);font-size:26px;font-weight:700;letter-spacing:4px;color:var(--gold);text-align:center;padding:14px;background:var(--surf2);border-radius:12px;margin-bottom:10px}
.member-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #1A1F2B}
.member-row:last-child{border-bottom:none}
.member-avatar{width:36px;height:36px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--gold);flex-shrink:0;font-family:var(--font-num)}
.member-info{flex:1}.member-name{font-size:13px;font-weight:600}.member-mobile{font-size:10px;color:var(--muted)}
.pending-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #1A1F2B}
.pending-row:last-child{border-bottom:none}
.pending-actions{display:flex;gap:6px}
.pending-actions button{padding:7px 12px;border-radius:8px;border:none;font-size:11px;font-weight:700;cursor:pointer}
.btn-approve{background:var(--green-soft);color:var(--green);border:1px solid rgba(63,168,118,.3)}
.btn-reject{background:var(--red-soft);color:var(--red);border:1px solid rgba(209,96,79,.3)}
/* PROFILE — clean header card + grouped rows with colored icon badges, matching reference design,
   sized consistently with the rest of the app's .sitm/.srow pattern rather than a separate scale. */
.profile-header-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#1E4B8F,#2E8A82);border:none;border-radius:20px;padding:20px 18px;margin-bottom:18px;box-shadow:0 10px 26px rgba(30,75,143,.28);position:relative;overflow:hidden}
.profile-header-card::after{content:"";position:absolute;top:-30px;right:-20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.profile-avatar-circle{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;flex-shrink:0;font-family:var(--font-num);box-shadow:0 4px 12px rgba(0,0,0,.2);position:relative}
.profile-header-info{flex:1;min-width:0;position:relative}
.profile-header-info{flex:1;min-width:0}
.profile-header-name{font-size:19px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-header-sub{font-size:12px;color:rgba(255,255,255,.85);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-edit-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:8px 14px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;position:relative}
.profile-edit-btn svg.icon{font-size:13px}

.sitm-clean{background:var(--surf);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:2px}
.srow-clean{display:flex;align-items:center;gap:12px;padding:13px;border-bottom:1px solid var(--border);cursor:pointer}
.srow-clean:last-child{border-bottom:none}
.srow-clean:active{background:var(--surf2)}
.srow-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:inset 0 1px 2px rgba(255,255,255,.25),inset 0 -2px 3px rgba(0,0,0,.15)}
.srow-text{flex:1;min-width:0}
.srow-title{font-size:13px;color:var(--text)}
.srow-sub{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow-chevron{color:var(--muted);font-size:14px;flex-shrink:0}

/* SETTINGS */
.sg{margin-bottom:18px}.slbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding-left:3px}
.sitm{background:var(--surf);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:2px}
.srow{display:flex;justify-content:space-between;align-items:center;padding:13px 13px;border-bottom:1px solid var(--border);cursor:pointer}
.srow:last-child{border-bottom:none}.srow:active{background:var(--surf2)}
.srlbl{font-size:13px}.srnote{font-size:10px;color:var(--muted);margin-top:2px}
.srv{font-size:14px;font-weight:700;color:var(--gold);font-family:var(--font-num)}

/* REPORTS */
.rpt-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}
.rpt-tile{background:var(--surf2);border-radius:12px;padding:12px;border:1px solid var(--border)}
.rpt-tile .rl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.rpt-tile .rv{font-family:var(--font-num);font-size:19px;font-weight:700}
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:140px;padding:0 4px;margin-bottom:6px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bar-fill{width:100%;border-radius:6px 6px 2px 2px;background:var(--blue);min-height:3px;transition:height .5s ease}
.bar-label{font-size:9px;color:var(--muted)}
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:7px}
.donut-leg-row{display:flex;align-items:center;gap:7px;font-size:11px}
.donut-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.donut-leg-row span.amt{margin-left:auto;font-weight:700;font-family:var(--font-num)}
.export-btn{width:100%;padding:11px;border-radius:11px;border:1px solid var(--border);background:var(--surf2);color:var(--gold);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:4px}

/* MODALS */
.moverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;align-items:flex-end;justify-content:center}
.moverlay.open{display:flex}
.modal{background:var(--surf);border-radius:20px 20px 0 0;padding:20px 16px 36px;width:100%;max-width:480px;animation:slideUp .3s ease;max-height:90dvh;overflow-y:auto;box-shadow:0 -8px 32px rgba(0,0,0,.35);border-top:1px solid color-mix(in srgb,var(--border) 60%,var(--text))}
.modal::-webkit-scrollbar{display:none}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* ── Skeleton shimmer loaders ── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,var(--surf2) 25%,var(--surf3) 50%,var(--surf2) 75%);background-size:800px 100%;animation:shimmer 1.3s infinite linear;border-radius:9px}
.skel-line{height:13px;margin:7px 0}
.skel-line.sk-lg{height:22px;width:60%}
.skel-line.sk-sm{width:40%}
.skel-card{height:70px;border-radius:14px;margin-bottom:11px}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
/* ── Save success checkmark ── */
@keyframes checkPop{0%{transform:scale(0);opacity:0}55%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes checkRing{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.save-success-ov{position:fixed;inset:0;z-index:2200;display:none;align-items:center;justify-content:center;pointer-events:none}
.save-success-ov.show{display:flex}
.save-check{width:88px;height:88px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;position:relative;animation:checkPop .4s cubic-bezier(.22,1.4,.4,1) both;box-shadow:0 8px 30px rgba(47,143,99,.45)}
.save-check svg{width:44px;height:44px;stroke:#fff;stroke-width:4;fill:none}
.save-check::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--green);animation:checkRing .6s ease-out .1s both}
.save-check-path{stroke-dasharray:48;stroke-dashoffset:48;animation:drawCheck .35s ease-out .15s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
/* ── Celebration (goal reached / debt-free) ── */
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(320px) rotate(540deg);opacity:0}}
.celebrate-ov{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.4);padding:24px}
.celebrate-ov.show{display:flex}
.celebrate-box{background:var(--surf);border-radius:20px;padding:28px 24px;text-align:center;max-width:320px;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:checkPop .45s cubic-bezier(.22,1.4,.4,1) both;position:relative;z-index:2}
.celebrate-emoji{font-size:52px;margin-bottom:10px;display:block;animation:checkPop .5s cubic-bezier(.22,1.5,.4,1) .1s both}
.celebrate-title{font-size:19px;font-weight:800;color:var(--text);margin-bottom:6px}
.celebrate-msg{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.celebrate-btn{padding:11px 28px;border:none;border-radius:11px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.confetti-pc{position:absolute;top:0;width:9px;height:9px;border-radius:2px;animation:confettiFall linear forwards}
/* ── Home hero: subtle moving sheen ── */
#homeHero{position:relative;overflow:hidden}
#homeHero::before{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.13) 50%,transparent 100%);transform:skewX(-18deg);animation:heroSheen 5.5s ease-in-out infinite;pointer-events:none}
@keyframes heroSheen{0%{left:-60%}55%{left:130%}100%{left:130%}}
/* Sparkline dots pop in after the line draws */
.spark-dot{opacity:0;animation:sparkDot .3s ease-out forwards}
@keyframes sparkDot{from{opacity:0}to{opacity:1}}
.spark-area{opacity:0;animation:fadeInArea .6s ease-out .6s forwards}
@keyframes fadeInArea{to{opacity:1}}
/* Home stat tiles: staggered pop-in */
.sgrid .stile{animation:tilePop .45s cubic-bezier(.22,1.3,.4,1) both}
.sgrid .stile:nth-child(1){animation-delay:.05s}
.sgrid .stile:nth-child(2){animation-delay:.12s}
.sgrid .stile:nth-child(3){animation-delay:.19s}
.sgrid .stile:nth-child(4){animation-delay:.26s}
@keyframes tilePop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  #homeHero::before{animation:none}
  .sgrid .stile{animation:none}
  .spark-dot,.spark-area{animation:none;opacity:1}
}
.modal h3{font-size:17px;font-weight:800;margin-bottom:3px}.modal-sub{font-size:11px;color:var(--muted);margin-bottom:14px}
.mi{width:100%;background:var(--surf2);border:1px solid var(--border);border-radius:10px;padding:12px 13px;color:var(--text);font-size:17px;font-weight:700;outline:none;margin-bottom:11px;transition:border-color .2s;font-family:var(--font-ui)}
select.mi{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717C92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:38px}
.lc-category-tag{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:9px;background:var(--surf2);color:var(--muted);margin-left:7px;vertical-align:middle}
.mi:focus{border-color:var(--gold)}.mi.sm{font-size:14px;font-weight:400}
.mbtns{display:flex;gap:8px}
.btn{flex:1;padding:13px;border-radius:11px;border:none;font-size:14px;font-weight:700;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn-p{background:linear-gradient(165deg,var(--gold),color-mix(in srgb,var(--gold) 80%,#000));color:#10131A;box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.2),0 3px 10px rgba(201,162,39,.28),0 1px 2px rgba(0,0,0,.18)}
.btn-p:active{box-shadow:0 1px 4px rgba(201,162,39,.2)}
.btn-s{background:var(--surf2);color:var(--text);border:1px solid var(--border)}
.btn-d{background:var(--red-soft);color:var(--red);border:1px solid rgba(209,96,79,.3)}
.btn-g{background:var(--green-soft);color:var(--green);border:1px solid rgba(63,168,118,.3)}
.mlbl{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:5px}
.mgrid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}
.calc-preview{background:var(--green-soft);border:1px solid rgba(63,168,118,.2);border-radius:10px;padding:11px;margin-bottom:11px;font-size:11px;line-height:1.9;display:none}
.calc-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(63,168,118,.15);padding-bottom:5px;margin-bottom:5px}
.calc-row:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.pp-box{background:var(--surf2);border-radius:10px;padding:11px 13px;margin-bottom:13px}
.pp-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.pp-val{font-size:22px;font-weight:800;color:var(--red);font-family:var(--font-num)}
.toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--green);color:#fff;padding:9px 17px;border-radius:20px;font-size:12px;font-weight:700;opacity:0;transition:all .3s;z-index:300;white-space:nowrap;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast.err{background:var(--red)}
.add-fab{width:100%;padding:12px;border-radius:11px;border:2px dashed var(--border);background:transparent;color:var(--gold);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.5px;margin-bottom:11px;display:flex;align-items:center;justify-content:center;gap:7px}
.type-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.type-btn{padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surf2);color:var(--muted);font-size:11px;cursor:pointer}
.type-btn.sel{border-color:var(--gold);background:var(--gold-soft);color:var(--gold)}
.loan-total-card{background:linear-gradient(135deg,var(--red-soft),rgba(209,96,79,.02));border:1px solid rgba(209,96,79,.25);border-radius:13px;padding:13px;margin-bottom:11px}
.lt-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.lt-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.lt-val{font-family:var(--font-num);font-size:24px;font-weight:700;color:var(--red)}
.lt-right{text-align:right}.lt-rl{font-size:10px;color:var(--muted);margin-bottom:3px}.lt-rv{font-size:16px;font-weight:800;color:var(--text);font-family:var(--font-num)}

/* ══ NEW: PAYMENT MODE PICKER ══ */
.pm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:9px}
.pm-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:9px;border:1px solid var(--border);background:var(--surf2);cursor:pointer;font-size:7.5px;color:var(--muted);text-transform:uppercase;font-family:var(--font-ui)}
.pm-btn.sel{border-color:var(--gold);background:var(--gold-soft);color:var(--gold)}
.pm-btn svg.icon{font-size:16px}
.pm-tag{display:inline-flex;align-items:center;gap:3px;font-size:9px;padding:2px 6px;border-radius:8px;font-weight:600}
.pm-tag.upi{background:rgba(91,127,191,.15);color:var(--blue)}
.pm-tag.cash{background:rgba(63,168,118,.15);color:var(--green)}
.pm-tag.debit{background:rgba(201,162,39,.15);color:var(--gold)}
.pm-tag.credit{background:rgba(209,96,79,.15);color:var(--red)}
.pm-tag.netbanking{background:rgba(155,127,212,.15);color:var(--purple)}

/* ══ NEW: INSIGHT CALLOUTS ══ */
.insight-card{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:11px;margin-bottom:9px;font-size:12px;line-height:1.5}
.insight-card.up{background:var(--red-soft);border:1px solid rgba(209,96,79,.25)}
.insight-card.down{background:var(--green-soft);border:1px solid rgba(63,168,118,.25)}
.insight-card.neutral{background:var(--surf2);border:1px solid var(--border)}
.insight-card svg.icon{flex-shrink:0;margin-top:1px;font-size:16px}
.insight-card b{font-weight:700}
.insight-arrow{font-weight:800}
.insight-arrow.up{color:var(--red)}
.insight-arrow.down{color:var(--green)}

/* ══ NEW: BURN RATE / FORECAST ══ */
.burn-card{background:linear-gradient(135deg,rgba(212,154,74,.13),rgba(212,154,74,.02));border:1px solid rgba(212,154,74,.3);border-radius:13px;padding:13px;margin-bottom:11px}
.burn-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.burn-label{font-size:11px;color:var(--muted)}
.burn-value{font-family:var(--font-num);font-size:18px;font-weight:700;color:var(--orange)}
.burn-track{height:8px;background:var(--surf2);border-radius:6px;overflow:hidden;display:flex}
.burn-elapsed{background:linear-gradient(90deg,#34a673,#3FA876);border-radius:6px;transition:width .8s cubic-bezier(.22,1,.36,1)}
.burn-proj{transition:width .5s}

/* ══ NEW: RECURRING TEMPLATES ══ */
.rec-card{background:var(--surf);border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.rec-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.22)}
.rec-info{flex:1;min-width:0}.rec-name{font-size:13.5px;font-weight:600}.rec-meta{font-size:11px;color:var(--muted);margin-top:2px}
.rec-amt{font-size:14.5px;font-weight:700;font-family:var(--font-num);flex-shrink:0}
.rec-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;flex-shrink:0;display:flex}

/* ══ NEW: CREDIT CARD TRACKER ══ */
.cc-card{background:linear-gradient(135deg,rgba(209,96,79,.1),rgba(209,96,79,.02));border:1px solid rgba(209,96,79,.25);border-radius:13px;padding:13px;margin-bottom:11px;position:relative}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.cc-name{font-size:14px;font-weight:700}.cc-bank{font-size:10px;color:var(--muted);margin-top:2px}
.cc-amt-label{font-size:9px;color:var(--muted);letter-spacing:1px;text-align:right}
.cc-amt{font-size:19px;font-weight:800;color:var(--red);font-family:var(--font-num);text-align:right}
.cc-due{font-size:10px;color:var(--muted);margin-top:8px}
.cc-btns{display:flex;gap:6px;position:absolute;top:11px;right:11px}

/* ══ NEW: PERSON BREAKDOWN ══ */
.person-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1A1F2B}
.person-row:last-child{border-bottom:none}
.person-avatar{width:30px;height:30px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold);flex-shrink:0;font-family:var(--font-num)}
.person-info{flex:1}.person-name{font-size:12px;font-weight:600}.person-cnt{font-size:10px;color:var(--muted)}
.person-amt{font-size:13px;font-weight:700;font-family:var(--font-num)}

/* ══ NEW: NET POSITION / TRAJECTORY CHART ══ */
.traj-chart{display:flex;align-items:flex-end;gap:4px;height:120px;padding:0 2px;margin-bottom:6px}
.traj-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.traj-fill{width:100%;border-radius:4px 4px 1px 1px;background:var(--red);min-height:2px;transition:height .5s ease}
.traj-label{font-size:8px;color:var(--muted)}
.traj-amt{font-size:7.5px;color:var(--text);font-weight:700;font-family:var(--font-num);white-space:nowrap}
.networth-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #1A1F2B}
.networth-row:last-child{border-bottom:none}

/* ══ NEW: SECTION TABS (analysis sub-nav within Reports) ══ */
.subtab-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:11px}
.subtab-bar::-webkit-scrollbar{display:none}
.subtab{flex-shrink:0;padding:7px 13px;border-radius:18px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--surf2);color:var(--muted);cursor:pointer}
.subtab.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.subpage{display:none}.subpage.on{display:block}

/* ── ONBOARDING WIZARD ── */
.onboard-overlay{display:none;position:fixed;inset:0;background:var(--bg);z-index:500;align-items:center;justify-content:center;padding:24px 20px}
.onboard-overlay.show{display:flex}
.onboard-card{width:100%;max-width:380px;position:relative}
.onboard-progress{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.onboard-dot{width:28px;height:4px;border-radius:4px;background:var(--surf2);transition:background .2s}
.onboard-dot.active{background:var(--gold)}
.onboard-dot.done{background:var(--green)}
.onboard-skip-all{position:absolute;top:-2px;right:0;background:none;border:none;color:var(--muted);font-size:11.5px;cursor:pointer;text-decoration:underline}
.onboard-step{text-align:left}
.onboard-icon{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px}
.onboard-step h3{font-size:19px;font-weight:800;text-align:center;margin-bottom:6px}
.onboard-sub{font-size:12.5px;color:var(--muted);text-align:center;margin-bottom:20px;line-height:1.6}
.onboard-btns{display:flex;gap:9px;margin-top:6px}
.onboard-btns .btn{flex:1}

/* ── 50/30/20 RULE CARD ── */
.r532-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.r532-row:last-child{margin-bottom:0}
.r532-label{font-size:11.5px;font-weight:600;width:48px;flex-shrink:0;color:var(--text)}
.r532-track{flex:1;height:8px;background:var(--surf2);border-radius:8px;overflow:hidden;position:relative}
.r532-fill{height:100%;border-radius:8px;transition:width .5s ease}
.r532-target{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);opacity:.5}
.r532-pct{font-size:12px;font-weight:700;font-family:var(--font-num);width:54px;flex-shrink:0;text-align:right}
.r532-of{color:var(--muted);font-weight:400;font-size:10px;font-family:var(--font-ui)}
.r532-note{display:flex;align-items:flex-start;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
.r532-note svg.icon{color:var(--orange);font-size:15px;flex-shrink:0;margin-top:1px}
.r532-note-text{font-size:12px;color:var(--text);line-height:1.5}
.r532-link{background:none;border:none;color:var(--gold);font-weight:700;font-size:12px;cursor:pointer;padding:0;margin-left:2px}

/* ── 50/30/20 RULE — REPORTS DETAIL ── */
.r532-detail-row{margin-bottom:16px}
.r532-detail-row:last-child{margin-bottom:0}
.r532-detail-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.r532-detail-name{font-size:13px;font-weight:700}
.r532-detail-amt{font-size:12px;color:var(--muted)}
.r532-guidance-card{background:var(--orange);background:rgba(212,154,74,.1);border:1px solid rgba(212,154,74,.3);border-radius:12px;padding:13px;margin-bottom:11px;display:flex;gap:10px;align-items:flex-start}
.r532-guidance-card svg.icon{color:var(--orange);font-size:18px;flex-shrink:0;margin-top:1px}
.r532-guidance-text{font-size:12.5px;line-height:1.6;color:var(--text)}
.r532-guidance-text b{color:var(--orange)}
.r532-guidance-btn{background:var(--surf2);border:1px solid var(--border);color:var(--gold);font-size:11px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;margin-top:8px;display:inline-block}
.r532-top-cats{margin-top:4px}
.r532-cat-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #1A1F2B}
.r532-cat-row:last-child{border-bottom:none}
.r532-cat-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}
.r532-cat-name{flex:1;font-size:12px;font-weight:600}
.r532-cat-pct{font-size:11px;color:var(--muted)}
.r532-cat-amt{font-size:12.5px;font-weight:700;font-family:var(--font-num);min-width:64px;text-align:right}

/* ── CATEGORY BUDGET TRACKER (colorful progress bars, like reference image) ── */
.cb-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #1A1F2B}
.cb-row:last-child{border-bottom:none}
.cb-icon-ring{position:relative;width:42px;height:42px;flex-shrink:0}
.cb-icon-ring svg.ring-svg{position:absolute;top:0;left:0;transform:rotate(-90deg)}
.cb-icon-center{position:absolute;inset:3px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.cb-info{flex:1;min-width:0}
.cb-top-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.cb-name{font-size:13.5px;font-weight:700}
.cb-amt{font-size:13.5px;font-weight:800;font-family:var(--font-num)}
.cb-amt .cb-limit{color:var(--muted);font-weight:400;font-size:11px}
.cb-track{height:6px;background:var(--surf2);border-radius:6px;overflow:hidden;margin-bottom:4px}
.cb-fill{height:100%;border-radius:6px;transition:width .5s ease}
.cb-cnt{font-size:10.5px;color:var(--muted)}
.cb-over .cb-amt{color:var(--red)}

/* Category budget edit list (inside modal) */
.cbe-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.cbe-row:last-child{border-bottom:none}
.cbe-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0}
.cbe-name{flex:1;font-size:13px;font-weight:600}
.cbe-input{width:100px;background:var(--surf2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;font-weight:600;outline:none;text-align:right}
.cbe-input:focus{border-color:var(--gold)}

/* ── DATE-GROUPED EXPANDABLE EXPENSE LIST ── */
.day-group{border-bottom:1px solid var(--border)}
.day-group:last-child{border-bottom:none}
.day-header{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;transition:background .15s}
.day-header:active{background:var(--surf2)}
.day-num{width:38px;height:38px;border-radius:10px;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;font-family:var(--font-num);color:var(--gold);flex-shrink:0}
.day-info{flex:1;min-width:0}
.day-label{font-size:13px;font-weight:600}
.day-sub{font-size:10.5px;color:var(--muted);margin-top:1px}
.day-totals{text-align:right;flex-shrink:0}
.day-total-amt{font-size:14px;font-weight:800;font-family:var(--font-num);color:var(--red)}
.day-cnt{font-size:10px;color:var(--muted);margin-top:1px}
.day-chevron{color:var(--muted);transition:transform .2s;flex-shrink:0;margin-left:4px}
.day-chevron.open{transform:rotate(90deg)}
.day-entries{display:none;background:var(--surf2)}
.day-entries.open{display:block}

/* ── EXPENSE SEARCH ── */
.search-row{display:flex;gap:8px;margin-bottom:11px}
.search-input{flex:1;background:var(--surf2);border:1px solid var(--border);border-radius:11px;padding:11px 14px;color:var(--text);font-size:14px;outline:none}
.search-input:focus{border-color:var(--gold)}
.search-input::placeholder{color:var(--muted)}
.search-filter-btn{width:44px;background:var(--surf2);border:1px solid var(--border);border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--gold);cursor:pointer;flex-shrink:0}
.search-filter-btn svg.icon{font-size:18px}
.search-filter-btn.active{border-color:var(--gold);background:var(--gold-soft)}
.search-result-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid #1A1F2B;background:var(--surf);border-radius:0}
.search-result-row:first-child{border-radius:13px 13px 0 0}
.search-result-row:last-child{border-bottom:none;border-radius:0 0 13px 13px}
.search-result-month{font-size:9px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.search-empty{text-align:center;padding:30px 13px;color:var(--muted);font-size:12px;background:var(--surf);border-radius:13px;}
.search-count{font-size:11px;color:var(--muted);margin-bottom:9px;padding-left:2px}

/* ── GOALS ── */
.goal-card{background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;cursor:pointer}
.goal-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.goal-icon{width:42px;height:42px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.goal-info{flex:1;min-width:0}
.goal-name{font-size:14px;font-weight:700}
.goal-meta{font-size:10.5px;color:var(--muted);margin-top:2px}
.goal-pct-badge{font-size:13px;font-weight:800;font-family:var(--font-num);color:var(--gold);flex-shrink:0}
.goal-track{height:8px;background:var(--surf2);border-radius:8px;overflow:hidden;margin-bottom:8px}
.goal-fill{height:100%;border-radius:8px;background:var(--gold);transition:width .5s ease}
.goal-fill.complete{background:var(--green)}
.goal-bottom-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.goal-bottom-row b{color:var(--text);font-family:var(--font-num)}
.goal-preview-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #1A1F2B}
.goal-preview-row:last-child{border-bottom:none}
.goal-preview-icon{width:32px;height:32px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.goal-preview-info{flex:1;min-width:0}.goal-preview-name{font-size:12.5px;font-weight:600}
.goal-preview-bar{height:4px;background:var(--surf2);border-radius:4px;overflow:hidden;margin-top:4px}
.goal-preview-fill{height:100%;background:var(--gold);border-radius:4px}
.goal-preview-pct{font-size:12px;font-weight:700;font-family:var(--font-num);color:var(--gold);flex-shrink:0}

/* ── ACTIVITY LOG ── */
.activity-row{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid #1A1F2B}
.activity-row:last-child{border-bottom:none}
.activity-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px}
.activity-icon.created{background:var(--green-soft);color:var(--green)}
.activity-icon.updated{background:var(--blue-soft);color:var(--blue)}
.activity-icon.deleted{background:var(--red-soft);color:var(--red)}
.activity-icon.cleared{background:var(--red-soft);color:var(--red)}
.activity-text{flex:1;font-size:12.5px;line-height:1.5}
.activity-text b{font-weight:700}
.activity-detail{font-size:10.5px;color:var(--muted);margin-top:1px}
.activity-time{font-size:10px;color:var(--muted);margin-top:2px}

/* ── MONTH-END SUMMARY ── */
.me-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(201,162,39,.15)}
.me-row:last-child{border-bottom:none}
.me-label{font-size:12px;color:var(--text)}
.me-value{font-size:13px;font-weight:700;font-family:var(--font-num)}
.me-value.up{color:var(--red)}.me-value.down{color:var(--green)}

/* ── LOAN BALANCE HISTORY ── */
.lc-balhist-badge{display:flex;align-items:center;gap:7px;background:var(--blue-soft);border:1px solid rgba(91,127,191,.25);border-radius:9px;padding:8px 10px;margin-top:8px;cursor:pointer}
.lc-balhist-badge svg.icon{color:var(--blue);font-size:15px;flex-shrink:0}
.lc-balhist-badge .ppb-text{flex:1;font-size:11px;color:var(--text)}
.lc-balhist-badge .ppb-chevron{color:var(--muted);transition:transform .2s}
.lc-balhist-badge.expanded .ppb-chevron{transform:rotate(90deg)}
.lc-balhist-chart{display:none;margin-top:8px;border-top:1px solid var(--border);padding-top:10px}
.lc-balhist-chart.show{display:block}
.bh-summary{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:10px}
.bh-summary b{font-family:var(--font-num)}
.bh-chart{display:flex;align-items:flex-end;gap:4px;height:70px;padding:0 2px}
.bh-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bh-bar{width:100%;max-width:22px;background:var(--blue);border-radius:4px 4px 0 0;transition:height .3s ease}
.bh-bar.verified{background:var(--green)}
.bh-bar-label{font-size:8.5px;color:var(--muted);margin-top:4px}

/* ── FLOATING-LABEL FORM FIELDS (replacing placeholder-only inputs) ── */
.fl-row{display:flex;gap:9px}
.fl-field{position:relative;border:1px solid var(--border);border-radius:11px;background:var(--surf2);padding:12px 13px 7px;margin-bottom:8px;transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.fl-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.fl-label{position:absolute;top:7px;left:13px;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600;pointer-events:none}
.fl-input{width:100%;background:none;border:none;outline:none;color:var(--text);font-size:15px;font-family:var(--font-ui);padding:0;line-height:1.3}
.fl-input::placeholder{color:transparent}
#expDesc::placeholder{color:var(--muted);opacity:.7}
.fl-icon{position:absolute;right:13px;top:50%;transform:translateY(-2px);color:var(--gold);font-size:15px;font-weight:700;pointer-events:none}
.fl-tap{cursor:pointer;display:flex;align-items:center;transition:transform .1s,box-shadow .15s}
.fl-tap:active{transform:scale(.985)}
.fl-tap .fl-label{position:absolute}
/* Notched outline style: label sits ON the top border line (used for the description box) */
.fl-notch{overflow:visible}
.fl-notch .fl-label{top:-7px;left:11px;background:var(--surf2);padding:0 5px;font-size:12px;color:var(--blue)}
.fl-display{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--text);width:100%;padding-right:20px}
.fl-display-ic{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:13px;box-shadow:inset 0 1px 2px rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.18),0 2px 5px rgba(0,0,0,.15)}
.fl-display-ic svg.icon{width:11px;height:11px}
.fl-display-ic .fl-emoji{font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.fl-chevron{font-size:18px;font-weight:600;color:var(--gold);transform:translateY(-3px);width:22px;height:22px;border-radius:50%;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;line-height:1}

/* ── BOTTOM-SHEET PICKER (category / payment mode) ── */
.picker-sheet{display:none;position:fixed;left:0;right:0;bottom:66px;top:auto;max-height:calc(88vh - 66px);background:var(--surf);z-index:200;flex-direction:column;padding:16px 16px 0;border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);animation:sheetUp .28s cubic-bezier(.22,1,.36,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.picker-sheet.show{display:flex}
.picker-sheet::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:3px;background:var(--border)}
.picker-hdr{display:flex;justify-content:space-between;align-items:center;margin:6px 0 12px;flex-shrink:0}
.picker-title{font-size:17px;font-weight:800;color:var(--text)}
.picker-close{background:none;border:none;color:var(--blue);font-size:14px;font-weight:700;cursor:pointer;padding:6px 4px}
.picker-search{width:100%;background:var(--surf2);border:1px solid var(--border);border-radius:11px;padding:11px 14px;color:var(--text);font-size:14px;outline:none;margin-bottom:14px;flex-shrink:0;font-family:var(--font-ui)}
.picker-search:focus{border-color:var(--blue)}
.picker-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content;align-content:start;gap:10px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:20px;min-height:0}
.picker-backdrop{display:none;position:fixed;inset:0;background:rgba(15,25,45,.4);z-index:199;animation:fadeIn .2s ease}
.picker-backdrop.show{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.picker-sheet .picker-grid{flex:0 1 auto}
.picker-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;border-radius:13px;border:1px solid var(--border);background:var(--surf);cursor:pointer;transition:border-color .15s,transform .1s}
.picker-item:active{transform:scale(.96)}
.picker-item.sel{border-color:var(--gold);background:var(--gold-soft)}
.picker-item-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.picker-item-label{font-size:10px;font-weight:600;color:var(--text);text-align:center;letter-spacing:.2px}

/* ── TRANSFERS PAGE — FIRST-TIME GUIDANCE ── */
.tr-explain{background:linear-gradient(135deg,var(--blue-soft),rgba(91,127,191,.02));border-color:rgba(91,127,191,.25);position:relative;padding-right:38px}
.tr-explain-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.tr-explain-title{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.tr-explain-text{font-size:12px;color:var(--text);line-height:1.6}
.tr-setup-banner{display:none;align-items:center;gap:11px;background:var(--gold-soft);border-color:rgba(201,162,39,.3);cursor:pointer}
.tr-setup-icon{font-size:22px;flex-shrink:0}
.tr-setup-text{flex:1;min-width:0}
.tr-setup-title{font-size:13px;font-weight:700;color:var(--gold)}
.tr-setup-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5}
.tr-setup-arrow{font-size:22px;color:var(--gold);flex-shrink:0}

/* NOTIFICATIONS PAGE */
.notif-row{display:flex;align-items:flex-start;gap:12px;background:var(--surf);border:1px solid var(--border);border-radius:14px;padding:13px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.15),0 3px 10px -3px rgba(0,0,0,.2)}
.notif-row-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}
.notif-row-text{flex:1;min-width:0}
.notif-row-title{font-size:13px;font-weight:700;color:var(--text)}
.notif-row-body{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}

/* PAGE TITLE — large bold headline above each non-Home page, matching reference apps that lead
   with a heavy display-style title (e.g. "Transactions") before any cards. */
.pg-title{font-family:var(--font-num);font-size:30px;font-weight:800;color:var(--text);letter-spacing:-.6px;line-height:1.1;margin-bottom:14px}

/* FAMILY PAGE — subtitle + pill action buttons, matching reference app pattern */
.fam-subtitle{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px;margin-top:-4px}
.fam-pill-row{display:flex;gap:10px;margin-bottom:16px}
.fam-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:14px;border:none;font-size:13.5px;font-weight:700;cursor:pointer;color:#fff}
.fam-pill svg.icon{font-size:15px}
.fam-pill-share{background:linear-gradient(165deg,var(--gold),color-mix(in srgb,var(--gold) 78%,#000));color:#10131A;box-shadow:0 3px 10px rgba(201,162,39,.28),0 1px 2px rgba(0,0,0,.18)}
.fam-pill-join{background:linear-gradient(165deg,var(--green),color-mix(in srgb,var(--green) 75%,#000));box-shadow:0 3px 10px rgba(63,168,118,.28),0 1px 2px rgba(0,0,0,.18)}
.fam-pill:active{transform:translateY(1px)}

/* Empty-state illustration for member list — centered icon circle + message, matching reference
   apps' "No family groups yet" style empty states instead of leaving a blank list. */
.fam-empty{text-align:center;padding:30px 16px}
.fam-empty-circle{width:84px;height:84px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.fam-empty-circle svg.icon{font-size:38px;color:var(--blue)}
.fam-empty-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px}
.fam-empty-sub{font-size:12px;color:var(--muted);line-height:1.6;max-width:240px;margin:0 auto}