*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[data-theme="light"]{
  --bg:#f4f6fb;--bg2:#eceef5;--surface:#ffffff;--surface2:#f0f2f8;
  --border:#e2e5ef;--text:#0f1117;--text2:#6b7280;--text3:#adb5bd;
  --shadow:0 2px 12px rgba(0,0,0,0.07);--shadow-lg:0 8px 32px rgba(0,0,0,0.11);
  --topbar-bg:#ffffff;--nav-bg:#ffffff;--modal-bg:#ffffff;--input-bg:#f5f6fa;
  --card-hover:#f8f9ff;
}
[data-theme="dark"]{
  --bg:#0a0a0f;--bg2:#0f0f18;--surface:#13131a;--surface2:#1c1c27;
  --border:#2a2a3a;--text:#f0f0f8;--text2:#8888aa;--text3:#555577;
  --shadow:0 2px 12px rgba(0,0,0,0.4);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);
  --topbar-bg:#13131a;--nav-bg:#13131a;--modal-bg:#13131a;--input-bg:#1c1c27;
  --card-hover:#1a1a25;
}
[data-theme="amoled"]{
  --bg:#000000;--bg2:#000000;--surface:#0a0a0a;--surface2:#121212;
  --border:#1e1e1e;--text:#f0f0f0;--text2:#8a8a8a;--text3:#525252;
  --shadow:0 0 0 1px rgba(255,255,255,.05);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.07),0 12px 32px rgba(0,0,0,.6);
  --topbar-bg:#000000;--nav-bg:#000000;--modal-bg:#0a0a0a;--input-bg:#0e0e0e;
  --card-hover:#161616;
}
[data-theme="glass"]{
  --bg:var(--glass-bg-dynamic, linear-gradient(165deg,#0b0a12 0%,#171224 40%,#1f1530 75%,#140f1e 100%));
  --bg2:var(--bg);
  --surface:rgba(255,255,255,.055);--surface2:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.14);--text:#f5f5fa;--text2:#b4b4c6;--text3:#7d7d92;
  --shadow:0 8px 28px rgba(0,0,0,.35);--shadow-lg:0 20px 50px rgba(0,0,0,.5);
  --topbar-bg:rgba(18,15,28,.55);--nav-bg:rgba(14,12,22,.6);
  --modal-bg:rgba(22,18,32,.78);--input-bg:rgba(255,255,255,.07);
  --card-hover:rgba(255,255,255,.1);
}
:root{
  --blue:#1a73e8;--blue-light:#4285f4;--blue-dark1:#1557b0;--blue-dark2:#0d3c8a;
  --blue-rgb:26,115,232;--green:#1e8e3e;--green-light:#34a853;
  --red:#d93025;--red-light:#ea4335;--yellow:#f9ab00;
  --radius:16px;--radius-sm:10px;--nav-h:68px;--header-h:60px;
}
html,body{height:100%;width:100%;background:var(--bg);color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;overflow:hidden;
  -webkit-font-smoothing:antialiased;}
#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:relative;}

/* SCREENS */
.screen{display:none;flex-direction:column;height:100%;width:100%;
  position:absolute;top:0;left:0;background:var(--bg);}
.screen.active{display:flex;animation:fadeUp .3s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* LOGIN */
#login-screen{justify-content:center;align-items:center;padding:32px 28px;}
.login-logo-wrap{text-align:center;margin-bottom:36px;}
.app-logo{display:block;object-fit:contain;background:transparent;}
.login-logo-img{height:44px;width:auto;}
.topbar-logo{height:26px;width:auto;}
.login-tagline{font-size:12px;color:var(--text2);margin-top:8px;letter-spacing:.3px;}
.login-card{width:100%;max-width:380px;background:var(--surface);border-radius:24px;
  padding:28px 24px;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
.login-card-title{font-size:20px;font-weight:700;margin-bottom:20px;color:var(--text);}
.field-group{margin-bottom:14px;}
.field-label{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:6px;}
input,select,textarea{background:var(--input-bg);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;
  padding:13px 14px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(var(--blue-rgb),.12);}
input::placeholder{color:var(--text3);}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
select option{background:var(--surface);color:var(--text);}
.btn{border:none;border-radius:var(--radius-sm);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;
  padding:14px 20px;cursor:pointer;width:100%;
  transition:opacity .15s,transform .1s,box-shadow .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.2px;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue);color:#fff;
  box-shadow:0 4px 14px rgba(var(--blue-rgb),.35);margin-top:6px;}
.btn-sm{padding:10px 16px;font-size:13px;width:auto;}
.btn-ghost{background:var(--surface2);color:var(--text);}
.btn-danger{background:rgba(217,48,37,.1);color:var(--red);box-shadow:none;margin-top:6px;}
.login-err{color:var(--red);font-size:12px;text-align:center;min-height:16px;
  margin-bottom:8px;font-weight:500;}

/* MAIN */
#main-screen{position:relative;}
.main-body{flex:1;overflow-y:auto;overflow-x:hidden;
  padding-bottom:calc(var(--nav-h) + 8px);-webkit-overflow-scrolling:touch;}
.main-body::-webkit-scrollbar{display:none;}

/* TOPBAR */
.topbar{height:var(--header-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;
  background:var(--topbar-bg);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;flex-shrink:0;box-shadow:var(--shadow);}
.topbar-logo{height:26px;object-fit:contain;mix-blend-mode:multiply;}
[data-theme="dark"] .topbar-logo,[data-theme="amoled"] .topbar-logo,[data-theme="glass"] .topbar-logo{mix-blend-mode:normal;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.topbar-greeting{font-size:13px;color:var(--text2);font-weight:500;}
.avatar-btn{width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;cursor:pointer;
  border:2px solid var(--border);transition:transform .15s;
  -webkit-tap-highlight-color:transparent;flex-shrink:0;}
.avatar-btn:active{transform:scale(.92);}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);
  background:var(--nav-bg);border-top:1px solid var(--border);
  display:flex;align-items:center;z-index:100;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(0,0,0,.06);}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;flex:1;padding:6px 0 4px;transition:color .2s;color:var(--text3);
  -webkit-tap-highlight-color:transparent;}
.nav-item.active{color:var(--blue);}
.nav-item svg{width:22px;height:22px;transition:transform .2s;}
.nav-item.active svg{transform:scale(1.1);}
.nav-label{font-size:10px;font-weight:600;letter-spacing:.2px;}

/* FAB */
.fab{position:fixed;bottom:calc(var(--nav-h) + 14px);right:18px;
  width:52px;height:52px;border-radius:16px;background:var(--blue);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(var(--blue-rgb),.4);z-index:101;
  transition:transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;}
.fab:active{transform:scale(.9);}
.fab svg{width:22px;height:22px;}

/* PAGES */
.page{display:none;padding:16px;animation:fadeUp .25s ease;}
.page.active{display:block;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.page-title{font-size:22px;font-weight:800;color:var(--text);}
.page-sub{font-size:12px;color:var(--text2);font-weight:500;}

/* DASHBOARD FILTER */
.dash-filter-bar{display:flex;gap:8px;margin-bottom:14px;
  overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.dash-filter-bar::-webkit-scrollbar{display:none;}
.dash-chip{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);background:var(--surface);color:var(--text2);
  white-space:nowrap;cursor:pointer;transition:all .15s;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;}
.dash-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.dash-range-row{display:none;gap:8px;margin-bottom:14px;}
.dash-range-row.show{display:flex;}
.dash-range-row input{flex:1;}

/* BALANCE CARD */
.balance-card{border-radius:20px;padding:22px 18px;margin-bottom:14px;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark1) 60%,var(--blue-dark2) 100%);
  box-shadow:0 8px 32px rgba(var(--blue-rgb),.35);}
.balance-card::before{content:'';position:absolute;top:-30px;right:-30px;
  width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);}
.balance-card::after{content:'';position:absolute;bottom:-40px;left:-20px;
  width:160px;height:100px;border-radius:50%;background:rgba(255,255,255,.05);}
.balance-label{font-size:11px;color:rgba(255,255,255,.65);letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:6px;font-weight:600;}
.balance-amount{font-size:34px;font-weight:800;letter-spacing:-1px;color:#fff;line-height:1;}
.balance-amount .currency{font-size:18px;font-weight:600;opacity:.8;margin-right:3px;}
.balance-row{display:flex;gap:10px;margin-top:18px;}
.balance-mini{flex:1;background:rgba(255,255,255,.12);border-radius:12px;
  padding:10px 12px;display:flex;align-items:center;gap:8px;backdrop-filter:blur(4px);}
.bm-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;}
.bm-icon svg{width:14px;height:14px;}
.bm-label{font-size:9px;color:rgba(255,255,255,.6);font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;}
.bm-val{font-size:15px;font-weight:700;color:#fff;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.stat-tile{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);}
.st-label{font-size:10px;color:var(--text2);font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;}
.st-val{font-size:20px;font-weight:800;line-height:1.2;}
.st-val.green{color:var(--green);}
.st-val.red{color:var(--red);}
.st-val.blue{color:var(--blue);}
.st-sub{font-size:10px;color:var(--text3);margin-top:2px;}

/* SECTION TITLE */
.sec-title{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:10px;margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;}

/* ENTRY LIST */
.entry-list{display:flex;flex-direction:column;gap:8px;}
.entry-item{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:13px 14px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);
  transition:background .15s;cursor:pointer;}
.entry-item:active{background:var(--card-hover);}
.entry-icon{width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.entry-icon svg{width:18px;height:18px;}
.entry-info{flex:1;min-width:0;}
.entry-cat{font-size:14px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entry-desc{font-size:12px;color:var(--text2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entry-date{font-size:10px;color:var(--text3);margin-top:2px;font-weight:500;}
.entry-right{text-align:right;flex-shrink:0;}
.entry-amount{font-size:15px;font-weight:700;}
.entry-pm{font-size:10px;color:var(--text3);margin-top:2px;}

/* FILTER CHIPS */
.filter-bar{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-chip{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);background:var(--surface);color:var(--text2);
  white-space:nowrap;cursor:pointer;transition:all .15s;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;}
.filter-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.page-total{font-size:26px;font-weight:800;margin-bottom:14px;line-height:1;}

/* LOANS */
.loan-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.loan-tile{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);}
.lt-label{font-size:10px;color:var(--text2);font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;}
.lt-val{font-size:22px;font-weight:800;}
.loan-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  margin-bottom:10px;cursor:pointer;transition:background .15s;}
.loan-card:active{background:var(--card-hover);}
.loan-card-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.loan-card-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.loan-person-avatar{width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;flex-shrink:0;}
.loan-person-info{min-width:0;}
.loan-person-name{font-size:15px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loan-person-meta{font-size:11px;color:var(--text2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loan-card-right{text-align:right;flex-shrink:0;}
.loan-amount{font-size:16px;font-weight:700;}
.loan-badge{display:inline-block;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:12px;margin-top:3px;letter-spacing:.3px;}
.loan-badge.lent{background:rgba(234,67,53,.12);color:var(--red);}
.loan-badge.borrowed{background:rgba(52,168,83,.12);color:var(--green);}
.loan-badge.settled{background:rgba(107,114,128,.12);color:var(--text2);}
.loan-progress-bar{height:3px;background:var(--border);margin:0 16px 14px;}
.loan-progress-fill{height:100%;border-radius:2px;transition:width .4s ease;}
.loan-settled-toggle{display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);margin-bottom:12px;font-size:13px;
  font-weight:600;color:var(--text2);cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* OVERLAYS */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:none;align-items:flex-end;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.overlay.open{display:flex;}
.sheet{background:var(--modal-bg);border-radius:24px 24px 0 0;width:100%;
  max-height:92dvh;overflow-y:auto;padding:8px 18px 40px;
  animation:sheetUp .32s cubic-bezier(.34,1.4,.64,1);}
.sheet::-webkit-scrollbar{display:none;}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:40px;height:4px;background:var(--border);border-radius:2px;
  margin:12px auto 16px;}
.sheet-title{font-size:20px;font-weight:800;margin-bottom:16px;color:var(--text);}
.sheet-tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--surface2);
  border-radius:12px;padding:4px;}
.sheet-tab{flex:1;padding:9px 6px;text-align:center;border-radius:9px;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;color:var(--text2);
  -webkit-tap-highlight-color:transparent;}
.sheet-tab.active{background:var(--blue);color:#fff;}
.form-group{margin-bottom:13px;}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* PROFILE */
.profile-user-block{display:flex;align-items:center;gap:14px;
  background:var(--surface2);border-radius:16px;padding:16px;
  margin-bottom:18px;border:1px solid var(--border);}
.profile-avatar{width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:#fff;}
.profile-name{font-size:17px;font-weight:700;color:var(--text);}
.profile-email{font-size:12px;color:var(--text2);margin-top:2px;}
.profile-sec-title{font-size:11px;font-weight:700;color:var(--text2);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;margin-top:16px;}
.profile-row{display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;
  transition:background .15s;-webkit-tap-highlight-color:transparent;}
.profile-row:active{background:var(--card-hover);}
.profile-row-left{display:flex;align-items:center;gap:12px;}
.profile-row-icon{width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.profile-row-icon svg{width:16px;height:16px;}
.profile-row-label{font-size:14px;font-weight:600;color:var(--text);}
.profile-row-sub{font-size:11px;color:var(--text2);margin-top:1px;}
.chevron{width:16px;height:16px;color:var(--text3);}
.toggle{position:relative;width:44px;height:24px;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;
  background:var(--border);border-radius:24px;transition:background .2s;}
.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;
  left:3px;top:3px;background:white;border-radius:50%;transition:transform .2s;}
.toggle input:checked+.toggle-slider{background:var(--blue);}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px);}

/* CONFIGURATION */
.config-section{margin-bottom:20px;}
.config-section-title{font-size:12px;font-weight:700;color:var(--text2);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--border);}
.config-item{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);margin-bottom:6px;}
.config-item-label{font-size:14px;font-weight:500;color:var(--text);}
.config-item-badge{font-size:10px;padding:2px 7px;border-radius:10px;
  background:var(--surface2);color:var(--text3);font-weight:600;margin-left:6px;}
.config-add-row{display:flex;gap:8px;margin-top:8px;}
.config-add-row input{flex:1;}
.checkbox{width:20px;height:20px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}

/* REPORT */
.report-type-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.report-chip{padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);background:var(--surface);color:var(--text2);
  cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.report-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.report-actions{display:flex;gap:8px;margin-bottom:14px;}
.report-actions .btn{flex:1;}
.report-output{background:var(--surface2);border-radius:14px;padding:16px;
  border:1px solid var(--border);min-height:80px;}
.report-stat-row{display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--border);}
.report-stat-row:last-child{border-bottom:none;}
.report-stat-label{font-size:13px;color:var(--text2);}
.report-stat-val{font-size:14px;font-weight:700;color:var(--text);}
.report-placeholder{text-align:center;color:var(--text3);padding:20px 0;font-size:13px;}

/* LOAN ACTION */
.la-header{background:var(--surface2);border-radius:14px;padding:14px;
  margin-bottom:16px;border:1px solid var(--border);}
.la-name{font-size:16px;font-weight:700;color:var(--text);}
.la-meta{font-size:12px;color:var(--text2);margin-top:3px;}
.la-prog-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:8px;}
.la-prog-fill{height:100%;border-radius:3px;}
.la-prog-text{display:flex;justify-content:space-between;font-size:11px;
  color:var(--text2);margin-top:4px;}
.loan-entry-item{display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px dashed var(--border);}
.loan-entry-item:last-child{border-bottom:none;}
.le-cat{font-size:12px;font-weight:600;}
.le-date{font-size:10px;color:var(--text3);margin-top:1px;}
.le-amt{font-size:13px;font-weight:700;}

/* LOADING / EMPTY */
.loading-wrap{display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 20px;gap:12px;}
.spinner{width:30px;height:30px;border:3px solid var(--border);
  border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:13px;color:var(--text2);font-weight:500;}
.empty-state{text-align:center;padding:40px 20px;}
.empty-state svg{width:44px;height:44px;color:var(--text3);margin-bottom:10px;}
.empty-state-text{font-size:14px;color:var(--text2);font-weight:500;}
.empty-state-sub{font-size:12px;color:var(--text3);margin-top:4px;}

/* TOAST */
.toast{position:fixed;bottom:calc(var(--nav-h) + 80px);left:50%;
  transform:translateX(-50%);background:var(--text);color:var(--bg);
  padding:11px 20px;border-radius:24px;font-size:13px;font-weight:600;
  z-index:400;white-space:nowrap;display:none;pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,.2);}
.toast.show{display:block;animation:toastIn .3s ease;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* ── EMI SPECIFIC ── */
.btn-danger{background:rgba(217,48,37,.1);color:var(--red);
  border:1.5px solid rgba(217,48,37,.2);box-shadow:none;margin-top:6px;}
.btn-danger:active{background:rgba(217,48,37,.2);}

/* ══════════════════════════════════════
   EMI RICH CARD
══════════════════════════════════════ */
.emi-card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  margin-bottom:14px;cursor:pointer;transition:background .15s;
}
.emi-card:active{background:var(--card-hover);}
.emi-card-top {
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:14px 16px 10px;gap:10px;
}
.emi-card-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.emi-icon {
  width:40px;height:40px;border-radius:12px;
  background:rgba(var(--blue-rgb),.12);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;letter-spacing:-.3px;
}
.emi-title{font-size:15px;font-weight:700;color:var(--text);}
.emi-meta{font-size:11px;color:var(--text2);margin-top:2px;}
.emi-badge {
  font-size:10px;font-weight:700;padding:4px 10px;border-radius:12px;
  letter-spacing:.3px;white-space:nowrap;flex-shrink:0;align-self:flex-start;
}
.emi-progress-row {
  display:flex;align-items:center;gap:10px;padding:2px 16px 10px;
}
.emi-prog-label{font-size:11px;color:var(--text2);font-weight:600;flex-shrink:0;min-width:52px;}
.emi-prog-label:last-child{text-align:right;}
.emi-prog-bar-wrap{flex:1;}
.emi-prog-bar-bg{height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.emi-prog-bar-fill{height:100%;border-radius:3px;transition:width .4s ease;}

.emi-stats-grid {
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border);
}
.emi-stat{
  padding:10px 16px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.emi-stat:nth-child(even){border-right:none;}
.emi-stat:nth-last-child(-n+2){border-bottom:none;}
.emi-stat-label{font-size:10px;color:var(--text2);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.emi-stat-val{font-size:16px;font-weight:700;color:var(--text);}

.emi-bill-row {
  display:flex;align-items:center;gap:6px;padding:10px 16px;
  font-size:12px;color:var(--text2);border-top:1px solid var(--border);
}
.emi-due-date{font-weight:700;color:var(--red);margin-left:auto;}

.emi-timeline-wrap{
  padding:10px 16px 12px;border-top:1px solid var(--border);
}
.emi-timeline{display:flex;flex-wrap:wrap;gap:4px;}
.emi-dot {
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;flex-shrink:0;
}
.emi-dot.paid     {background:var(--blue);color:#fff;}
.emi-dot.next     {background:var(--yellow);color:#000;}
.emi-dot.upcoming {background:var(--surface2);color:var(--text3);border:1px solid var(--border);}

/* ── CONFIRM DIALOG HIGHEST Z ── */
#confirm-overlay {
  z-index: 500 !important;
  align-items: center;
  justify-content: center;
}
#confirm-overlay > div {
  animation: fadeUp .2s ease;
}

/* ══════════════════════════════════════
   ENTRY DETAIL SHEET
══════════════════════════════════════ */
.detail-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--border);gap:12px;
}
.detail-row:last-child{border-bottom:none;}
.detail-label{font-size:12px;color:var(--text2);font-weight:600;
  min-width:110px;flex-shrink:0;}
.detail-val{font-size:14px;color:var(--text);font-weight:500;
  text-align:right;word-break:break-word;}
.detail-action-bar{
  display:flex;gap:10px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.detail-action-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;
  font-weight:700;cursor:pointer;border:none;transition:opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.detail-action-btn:active{opacity:.8;}
.detail-edit-btn{background:var(--surface2);color:var(--text);}
.detail-delete-btn{background:rgba(217,48,37,.1);color:var(--red);}

/* ── BALANCE AMOUNT TYPOGRAPHY ── */
.balance-amount { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  letter-spacing: -1px; color: #fff; line-height: 1; }
.bal-symbol { font-size: 20px; font-weight: 600; opacity: .75; margin-right: 2px;
  vertical-align: middle; }
.bal-main { font-size: 36px; font-weight: 800; }
.bal-dec  { font-size: 18px; font-weight: 600; opacity: .75; }

/* ══════════════════════════════════════
   THEME PICKER (Profile > Appearance)
══════════════════════════════════════ */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.theme-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  padding:10px;cursor:pointer;text-align:center;transition:border-color .15s,transform .1s;
  -webkit-tap-highlight-color:transparent;}
.theme-card:active{transform:scale(.97);}
.theme-card.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(var(--blue-rgb),.15);}
.theme-preview{height:46px;border-radius:9px;margin-bottom:8px;padding:7px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;overflow:hidden;position:relative;}
.theme-preview span{display:block;height:7px;border-radius:4px;}
.theme-preview span:first-child{width:55%;}
.theme-preview span:last-child{width:80%;}
.theme-preview-light{background:#eef1f8;border:1px solid #e2e5ef;}
.theme-preview-light span{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.theme-preview-dark{background:#0a0a0f;}
.theme-preview-dark span{background:#1c1c27;}
.theme-preview-amoled{background:#000;border:1px solid #1c1c1c;}
.theme-preview-amoled span{background:#141414;border:1px solid #232323;}
.theme-preview-glass{
  background:radial-gradient(circle at 25% 20%,rgba(var(--blue-rgb),.6),transparent 65%),
    linear-gradient(160deg,#171224,#0a0812);}
.theme-preview-glass span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.theme-card-label{font-size:11px;font-weight:700;color:var(--text2);}
.theme-card.active .theme-card-label{color:var(--blue);}

/* ACCENT COLOR PICKER */
.accent-row{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.accent-dot{width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:transform .15s;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;}
.accent-dot:active{transform:scale(.88);}
.accent-dot.active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px currentColor;}
.accent-dot-custom{background:var(--surface2);border:1.5px dashed var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text2);
  position:relative;overflow:hidden;}
.accent-dot-custom svg{width:15px;height:15px;pointer-events:none;}
.accent-dot-custom.active{border-style:solid;border-color:var(--text2);
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text3);}

/* ══════════════════════════════════════
   GLASS THEME — frosted translucency
══════════════════════════════════════ */
[data-theme="glass"] html,[data-theme="glass"] body{background:var(--bg);}
[data-theme="glass"] .topbar,
[data-theme="glass"] .bottom-nav,
[data-theme="glass"] .sheet,
[data-theme="glass"] .login-card{
  -webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%);
}
[data-theme="glass"] .loan-card,
[data-theme="glass"] .entry-item,
[data-theme="glass"] .stat-tile,
[data-theme="glass"] .loan-tile,
[data-theme="glass"] .emi-card,
[data-theme="glass"] .config-item,
[data-theme="glass"] .profile-row,
[data-theme="glass"] .profile-user-block,
[data-theme="glass"] .report-output,
[data-theme="glass"] .la-header,
[data-theme="glass"] .theme-card,
[data-theme="glass"] .loan-settled-toggle{
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.28);
}
[data-theme="glass"] .balance-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 40px rgba(var(--blue-rgb),.4);
}
[data-theme="glass"] input,[data-theme="glass"] select,[data-theme="glass"] textarea{
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}