/* =============================================
   EMILOAN v3.0 – Enhanced Banking App CSS
   ============================================= */

:root {
  --primary: #2563eb; --primary-d: #1e50c8; --primary-glow: rgba(37,99,235,.25);
  --accent: #f59e0b; --success: #10b981; --danger: #f43f5e;
  --warning: #f59e0b; --info: #38bdf8;
  --sidebar-w: 240px; --topbar-h: 60px; --radius: 14px; --radius-sm: 8px; --trans: .2s ease;
}
[data-theme="dark"] {
  --bg:#080e1d; --bg-card:rgba(255,255,255,.05); --bg-card-hover:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.1); --text:#e2e8f0; --muted:#64748b;
  --sidebar-bg:#0d1526; --topbar-bg:rgba(8,14,29,.85);
  --input-bg:rgba(255,255,255,.06); --shadow:0 8px 32px rgba(0,0,0,.4);
  --balance-grad:linear-gradient(135deg,#1e3a8a,#1e50c8,#2563eb);
}
[data-theme="light"] {
  --bg:#eef2f9; --bg-card:#ffffff; --bg-card-hover:#f5f8fd;
  --border:#e7edf6; --text:#162038; --muted:#9aa6bd;
  --sidebar-bg:#ffffff; --topbar-bg:rgba(238,242,249,.92);
  --input-bg:#f4f7fc; --shadow:0 8px 28px rgba(23,42,84,.07);
  --balance-grad:linear-gradient(135deg,#2f6bf4,#1e50c8,#1746b8);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;transition:background var(--trans),color var(--trans)}
input,select,button,textarea{font-family:inherit;font-size:inherit}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

/* =============================================
   LOGIN
   ============================================= */
/* ── Auth Screen Layout ── */
.screen-login{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
.login-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.18}
.blob-1{width:600px;height:600px;background:var(--primary);top:-200px;left:-200px;animation:blobMove 8s ease-in-out infinite alternate}
.blob-2{width:500px;height:500px;background:var(--accent);bottom:-150px;right:-150px;animation:blobMove 10s ease-in-out infinite alternate-reverse}
@keyframes blobMove{from{transform:scale(1)}to{transform:scale(1.1) translate(30px,20px)}}

.login-card{
  background:var(--bg-card);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:24px;
  padding:2rem 2.25rem 2.25rem;
  width:100%;max-width:430px;
  box-shadow:var(--shadow);
  position:relative;z-index:1;
  animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both;
  max-height:94vh;overflow-y:auto;
  scrollbar-width:none;
}
.login-card::-webkit-scrollbar{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ── Brand ── */
.auth-brand{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-bottom:1.25rem}
.brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.brand-icon{width:38px;height:38px;background:var(--balance-grad);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;font-weight:800;flex-shrink:0}
.brand-name{font-size:1.45rem;font-weight:800;color:var(--primary)}

/* ── Auth Tab Switcher ── */
.auth-tabs{
  display:flex;position:relative;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:4px;
  margin-bottom:1.35rem;
  gap:2px;
}
.auth-tab{
  flex:1;padding:.45rem .5rem;
  border:none;border-radius:9px;
  background:transparent;
  color:var(--muted);font-size:.85rem;font-weight:600;
  cursor:pointer;
  transition:color .2s,background .25s;
  position:relative;z-index:1;
}
.auth-tab.active{
  background:var(--bg-card);
  color:var(--primary);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.auth-tab-bar{display:none} /* not needed with background approach */

/* ── Form fields with icons ── */
.auth-form{display:flex;flex-direction:column;gap:.85rem}
.fi-wrap{
  position:relative;display:flex;align-items:center;
  background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color .2s;
}
.fi-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.fi-icon{width:17px;height:17px;flex-shrink:0;margin:0 .6rem 0 .75rem;stroke:var(--muted)}
.fi-wrap input{
  flex:1;padding:.62rem .6rem .62rem 0;
  background:transparent;border:none;outline:none;
  color:var(--text);font-size:.9rem;min-width:0;
}
.fi-eye{
  background:none;border:none;padding:0 .65rem;
  cursor:pointer;color:var(--muted);
  display:flex;align-items:center;
  transition:color .2s;
}
.fi-eye:hover{color:var(--primary)}
.fi-eye svg{width:16px;height:16px}
.fi-cc{
  padding:0 .5rem 0 .75rem;
  font-size:.82rem;font-weight:700;color:var(--muted);
  border-right:1px solid var(--border);
  line-height:1;align-self:stretch;
  display:flex;align-items:center;
  flex-shrink:0;
}
.fi-verify-tag{color:var(--success);font-weight:700;padding-right:.7rem;font-size:.9rem}
.fi-hint{font-size:.75rem;margin:.3rem 0 0;padding:0 .1rem}
.fi-hint.ok{color:var(--success)} .fi-hint.err{color:var(--danger)}
.fi-two-col{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:400px){.fi-two-col{grid-template-columns:1fr}}

/* ── Login meta row ── */
.login-meta-row{display:flex;align-items:center;justify-content:space-between;margin:-.2rem 0 .1rem}
.remember-label{display:flex;align-items:center;gap:.35rem;font-size:.8rem;cursor:pointer;color:var(--muted)}

/* ── Submit button ── */
.auth-submit-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;font-size:.9rem;letter-spacing:.01em}
.auth-arrow{width:16px;height:16px;flex-shrink:0}
.auth-spinner{
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Or divider ── */
.auth-divider{position:relative;text-align:center;margin:.9rem 0;color:var(--muted);font-size:.78rem}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:var(--border)}
.auth-divider::before{left:0} .auth-divider::after{right:0}
.auth-divider span{background:var(--bg-card);padding:0 .6rem}

/* ── Secure badge ── */
.secure-badge{text-align:center;color:var(--muted);font-size:.72rem;margin-top:1.1rem;line-height:1.6}

/* ── Form misc ── */
.req{color:var(--danger);font-weight:700}
.optional-tag{font-size:.72rem;color:var(--muted);font-weight:400;margin-left:.2rem}
.terms-label{display:flex;align-items:flex-start;gap:.5rem;font-size:.8rem;cursor:pointer;color:var(--muted);line-height:1.5}
.terms-label input{margin-top:.15rem;flex-shrink:0}

/* ── Password strength ── */
.pass-strength-wrap{display:flex;align-items:center;gap:.6rem;margin-top:.3rem}
.pass-strength-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.pass-strength-bar{height:100%;border-radius:2px;transition:width .3s ease,background .3s}
.pass-strength-lbl{font-size:.72rem;font-weight:600;white-space:nowrap}

.btn-ghost{background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:.4rem .8rem;border-radius:var(--radius-sm);font-size:.82rem;transition:var(--trans);cursor:pointer}
.btn-ghost:hover{background:var(--bg-card-hover)}

/* =============================================
   APP SHELL
   ============================================= */
.hidden{display:none!important}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;overflow-y:auto;transition:transform var(--trans)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1rem;border-bottom:1px solid var(--border)}
.sidebar-profile{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid var(--border)}
.sidebar-nav{flex:1;padding:.5rem 0}
.nav-section-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.75rem 1rem .3rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;color:var(--muted);border-radius:var(--radius-sm);margin:.1rem .5rem;transition:var(--trans);cursor:pointer;position:relative;font-size:.88rem}
.nav-item:hover,.nav-item.active{background:var(--primary-glow);color:var(--primary);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:0;top:20%;height:60%;width:3px;background:var(--primary);border-radius:0 3px 3px 0}
.nav-icon{font-size:1rem;width:20px;text-align:center}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:.65rem;font-weight:700;padding:.1rem .4rem;border-radius:99px;line-height:1.4}
.new-badge{background:var(--success)}
.sidebar-footer{padding:1rem;border-top:1px solid var(--border)}
.main-area{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}

/* TOPBAR */
.topbar{height:var(--topbar-h);background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:100}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:.6rem}
.page-title{font-size:1rem;font-weight:700}
.icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:var(--trans);border:1px solid transparent;font-size:1rem;position:relative;cursor:pointer;background:none}
.icon-btn:hover{background:var(--bg-card);color:var(--text)}
.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--danger);border-radius:50%;border:2px solid var(--topbar-bg)}
.avatar-sm{width:34px;height:34px;border-radius:50%;background:var(--balance-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700}
.avatar-lg{width:48px;height:48px;border-radius:50%;background:var(--balance-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;font-weight:700;flex-shrink:0}
.avatar-xl{width:72px;height:72px;border-radius:50%;background:var(--balance-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;font-weight:700;margin:0 auto}

/* SEARCH */
.search-wrap{display:none;align-items:center;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.search-wrap.active{display:flex}
.search-input{background:none;border:none;padding:.4rem .75rem;color:var(--text);outline:none;width:200px;font-size:.85rem}
.search-clear{border:none;background:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:.25rem .5rem}
.search-results{position:absolute;top:calc(var(--topbar-h) + 8px);right:1rem;width:320px;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:300;max-height:300px;overflow-y:auto}
.search-result-item{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);font-size:.83rem;cursor:pointer;transition:var(--trans)}
.search-result-item:hover{background:var(--bg-card)}
.search-result-item:last-child{border-bottom:none}

/* NOTIFICATION PANEL */
.notif-panel{position:absolute;top:calc(var(--topbar-h)+8px);right:1rem;width:320px;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:300;overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.88rem}
.notif-item{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);font-size:.8rem;transition:var(--trans)}
.notif-item:hover{background:var(--bg-card)}
.notif-item.unread{background:rgba(37,99,235,.05)}
.notif-item p{color:var(--muted);font-size:.76rem;margin-top:.1rem}
.notif-item small{color:var(--muted);font-size:.7rem}
.notif-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0}
.notif-icon.success{background:rgba(16,185,129,.15);color:var(--success)}
.notif-icon.warning{background:rgba(245,158,11,.15);color:var(--warning)}
.notif-icon.info{background:rgba(56,189,248,.15);color:var(--info)}
.notif-icon.danger{background:rgba(244,63,94,.15);color:var(--danger)}

/* =============================================
   PAGES
   ============================================= */
.pages{flex:1;overflow-y:auto}
.page{display:none;animation:fadeUp .3s ease}
.page.active{display:block}
.page-inner{padding:1.5rem;max-width:1300px;margin:0 auto}
.section-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:.75rem 0 .5rem}

/* =============================================
   COMMON COMPONENTS
   ============================================= */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;backdrop-filter:blur(8px);transition:var(--trans)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;font-size:.9rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;transition:var(--trans);white-space:nowrap;cursor:pointer;border:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d);transform:translateY(-1px);box-shadow:0 4px 16px var(--primary-glow)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{background:var(--bg-card);border-color:var(--primary);color:var(--primary)}
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:.35rem .75rem;font-size:.76rem;border-radius:6px}
.link-text{color:var(--primary);font-size:.82rem;font-weight:600;background:none;border:none;cursor:pointer;padding:0}
.link-text:hover{text-decoration:underline}
.text-muted{color:var(--muted)}
.clr-success{color:var(--success)}
.clr-danger{color:var(--danger)}
.clr-warning{color:var(--warning)}
.form-stack{display:flex;flex-direction:column;gap:.9rem}
.form-group{display:flex;flex-direction:column;gap:.3rem}
.form-group label{font-size:.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.form-group input,.form-group select,.form-group textarea{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .85rem;color:var(--text);transition:var(--trans);outline:none}
.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.form-group input[type="range"]{padding:0;height:4px;background:var(--border);border:none;accent-color:var(--primary);cursor:pointer;border-radius:99px;margin-top:.3rem}
select{cursor:pointer}
.input-row{display:flex;gap:.5rem}
.input-row input{flex:1}
.verify-tag{font-size:.76rem;margin-top:.2rem;min-height:.9rem}
.tabs{display:flex;gap:.25rem;margin-bottom:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.3rem;flex-wrap:wrap}
.tab{padding:.38rem .8rem;border-radius:6px;font-size:.8rem;font-weight:600;color:var(--muted);transition:var(--trans);cursor:pointer;background:none;border:none}
.tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeUp .25s ease}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.badge-tag{font-size:.7rem;font-weight:700;padding:.18rem .55rem;border-radius:99px}
.success-tag{background:rgba(16,185,129,.15);color:var(--success)}
.info-box{background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);border-radius:var(--radius-sm);padding:1rem}
.info-box h3{margin-bottom:.5rem;color:var(--primary)}
.toggle{position:relative;display:inline-block;cursor:pointer}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.tog-track{display:block;width:40px;height:22px;background:var(--border);border-radius:99px;transition:var(--trans);position:relative}
.tog-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:var(--trans)}
.toggle input:checked ~ .tog-track{background:var(--primary)}
.toggle input:checked ~ .tog-track::after{transform:translateX(18px)}
.pref-select{background:transparent;border:1px solid var(--border);color:var(--text);padding:.3rem .5rem;border-radius:6px;font-size:.8rem}

/* =============================================
   DASHBOARD
   ============================================= */
/* Offers */
.offers-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.25rem;scrollbar-width:none}
.offers-scroll::-webkit-scrollbar{display:none}
.offer-card{flex:0 0 220px;background:linear-gradient(135deg, color-mix(in srgb, var(--oc,#2563eb) 20%, transparent), color-mix(in srgb, var(--oc,#2563eb) 10%, transparent));border:1px solid color-mix(in srgb, var(--oc,#2563eb) 30%, transparent);border-radius:var(--radius);padding:1rem;position:relative;overflow:hidden}
.offer-card{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2)}
.offer-card:nth-child(2){background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.2)}
.offer-card:nth-child(3){background:rgba(217,119,6,.1);border-color:rgba(217,119,6,.2)}
.offer-card:nth-child(4){background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.2)}
.offer-tag{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:#000;padding:.15rem .5rem;border-radius:99px;display:inline-block;margin-bottom:.5rem}
.offer-card strong{display:block;font-size:.9rem;margin-bottom:.25rem}
.offer-card p{font-size:.75rem;color:var(--muted);margin-bottom:.75rem}
.offer-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:.3rem .75rem;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;transition:var(--trans)}
.offer-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Balance card */
.balance-card{background:var(--balance-grad);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem;position:relative;overflow:hidden}
.balance-card::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06);top:-100px;right:-100px;pointer-events:none}
.balance-card::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);bottom:-80px;left:60%;pointer-events:none}
.balance-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}
.balance-label{color:rgba(255,255,255,.7);font-size:.82rem}
.balance-amount{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-1px;margin-top:.2rem}
.balance-logo{font-size:3rem;color:rgba(255,255,255,.12);font-weight:800}
.balance-stats{display:flex;gap:1.25rem;flex-wrap:wrap}
.bstat{display:flex;align-items:center;gap:.5rem;color:#fff}
.bstat small{font-size:.7rem;color:rgba(255,255,255,.65)}
.bstat strong{display:block;font-size:.9rem}
.bstat-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem}
.bstat-icon.income{background:rgba(16,185,129,.35)}
.bstat-icon.expense{background:rgba(244,63,94,.35)}
.bstat-icon.savings{background:rgba(245,158,11,.35)}
.bstat-icon.reward{background:rgba(167,139,250,.35)}
.bstat-div{width:1px;height:32px;background:rgba(255,255,255,.2)}

/* Quick actions */
.quick-actions{display:grid;grid-template-columns:repeat(8,1fr);gap:.6rem;margin-bottom:1.25rem}
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem .5rem;color:var(--text);font-size:.72rem;font-weight:600;transition:var(--trans);cursor:pointer}
.qa-btn:hover{background:var(--bg-card-hover);border-color:var(--primary);transform:translateY(-2px)}
.qa-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

/* Transactions */
.tx-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.tx-item:last-child{border-bottom:none}
.tx-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0}
.tx-icon.debit{background:rgba(244,63,94,.12);color:var(--danger)}
.tx-icon.credit{background:rgba(16,185,129,.12);color:var(--success)}
.tx-info{flex:1}
.tx-name{font-weight:600;font-size:.85rem}
.tx-meta{color:var(--muted);font-size:.73rem}
.tx-amt{font-weight:700;font-size:.85rem}
.tx-amt.debit{color:var(--danger)}
.tx-amt.credit{color:var(--success)}

/* Donut chart */
.donut-wrap{position:relative;width:150px;height:150px;margin:1rem auto}
.donut-svg{width:100%;height:100%}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-center strong{font-size:.95rem;font-weight:800}
.donut-center small{font-size:.65rem;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:.4rem;margin-top:.75rem}
.legend-item{display:flex;align-items:center;justify-content:space-between;font-size:.78rem}
.legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* Loans summary */
.loan-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.75rem;transition:var(--trans)}
.loan-card:hover{transform:translateY(-1px)}
.loan-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}
.loan-type{font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.4rem}
.loan-badge{font-size:.68rem;padding:.12rem .45rem;border-radius:99px;background:rgba(16,185,129,.15);color:var(--success)}
.loan-amt{font-size:1rem;font-weight:800;margin:.2rem 0}
.loan-progress-wrap{background:var(--border);border-radius:99px;height:5px;margin:.5rem 0;overflow:hidden}
.loan-progress{height:100%;border-radius:99px}
.loan-meta{display:flex;justify-content:space-between;font-size:.73rem;color:var(--muted)}

/* AI Insight */
.ai-insight-card{display:flex;align-items:flex-start;gap:.75rem;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);border-radius:var(--radius);padding:1rem;margin-top:1.25rem}
.ai-insight-icon{font-size:1.6rem;flex-shrink:0}
.ai-insight-body{flex:1;font-size:.85rem}
.ai-insight-body strong{display:block;margin-bottom:.25rem}

/* Credit score */
.credit-score-card{text-align:center}
.cs-gauge-wrap{position:relative;width:140px;margin:0 auto}
.cs-gauge{width:100%;overflow:visible}
.cs-value{position:absolute;bottom:0;left:50%;transform:translateX(-50%);text-align:center}
.cs-value strong{font-size:1.6rem;font-weight:800;color:var(--success)}
.cs-value small{display:block;font-size:.68rem;color:var(--muted)}
.cs-label{font-size:1rem;font-weight:700;color:var(--success);margin-top:.5rem}
.cs-range{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin:.3rem 0 .75rem;padding:0 .5rem}
.cs-range-bad{color:var(--danger)}
.cs-range-good{color:var(--success)}
.cs-tips{display:flex;flex-direction:column;gap:.35rem;text-align:left}
.cs-tip{font-size:.75rem;padding:.3rem .6rem;border-radius:6px}
.success-tip{background:rgba(16,185,129,.08);color:var(--success)}
.warn-tip{background:rgba(245,158,11,.08);color:var(--warning)}

/* Upcoming bills */
.upcoming-bill-item{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.82rem}
.upcoming-bill-item:last-child{border-bottom:none}
.bill-due-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}

/* =============================================
   TRANSFER
   ============================================= */
.bene-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);cursor:pointer;transition:var(--trans);font-size:.83rem}
.bene-item:hover{color:var(--primary)}
.bene-item:last-child{border-bottom:none}
.bene-av{width:34px;height:34px;border-radius:50%;background:var(--balance-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700;flex-shrink:0}
.bene-bank{color:var(--muted);font-size:.73rem}
.limit-info{display:flex;flex-direction:column;gap:.45rem;font-size:.83rem}
.limit-row{display:flex;justify-content:space-between;align-items:center}
.limit-track{background:var(--border);border-radius:99px;height:6px;overflow:hidden}
.limit-fill{height:100%;background:linear-gradient(90deg,var(--success),var(--primary));border-radius:99px}
.sched-item{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--border)}
.sched-item:last-child{border-bottom:none}

/* =============================================
   UPI
   ============================================= */
.upi-id-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.upi-id-text{font-size:1rem;font-weight:700;color:var(--primary)}
.upi-amount-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip-btn{background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:.25rem .65rem;border-radius:99px;font-size:.75rem;cursor:pointer;transition:var(--trans)}
.chip-btn:hover{border-color:var(--primary);color:var(--primary)}
.upi-recent-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.upi-recent-item:last-child{border-bottom:none}
.upi-av{width:34px;height:34px;border-radius:50%;background:var(--bg-card-hover);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}

/* QR */
.qr-box{width:155px;height:155px;border:2px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;color:var(--text);margin:.75rem auto;background:var(--bg-card)}
.center-content{text-align:center;display:flex;flex-direction:column;align-items:center}
.scanner-frame{width:175px;height:175px;border-radius:var(--radius);background:var(--input-bg);border:1px solid var(--border);margin:.75rem auto;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sc-corner{position:absolute;width:20px;height:20px;border-color:var(--primary);border-style:solid}
.sc-corner.tl{top:8px;left:8px;border-width:3px 0 0 3px}
.sc-corner.tr{top:8px;right:8px;border-width:3px 3px 0 0}
.sc-corner.bl{bottom:8px;left:8px;border-width:0 0 3px 3px}
.sc-corner.br{bottom:8px;right:8px;border-width:0 3px 3px 0}
.scanner-line{position:absolute;left:12px;right:12px;height:2px;background:var(--primary);top:50%;animation:scan 2s ease-in-out infinite}
@keyframes scan{0%,100%{top:20%}50%{top:80%}}
.autopay-item{display:flex;align-items:center;gap:.75rem;padding:.85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.65rem}
.autopay-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--bg-card-hover)}
.autopay-info{flex:1;font-size:.83rem}
.autopay-amt{font-weight:700}
.autopay-status{font-size:.7rem;padding:.12rem .45rem;border-radius:99px;display:inline-block}
.autopay-status.active{background:rgba(16,185,129,.15);color:var(--success)}
.autopay-status.paused{background:rgba(245,158,11,.15);color:var(--warning)}

/* =============================================
   LOANS
   ============================================= */
.active-loan-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.25rem}
.alc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.9rem}
.alc-type{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.alc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin:.75rem 0}
.alc-stat{background:var(--input-bg);border-radius:var(--radius-sm);padding:.55rem}
.alc-stat small{color:var(--muted);display:block;margin-bottom:.18rem;font-size:.72rem}
.alc-stat strong{font-size:.88rem}
.alc-progress-wrap{background:var(--border);border-radius:99px;height:8px;overflow:hidden;margin:.65rem 0}
.alc-progress{height:100%;border-radius:99px}
.alc-foot{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.emi-result-box{display:flex;flex-direction:column;gap:.65rem}
.emi-main{text-align:center;padding:1rem;background:rgba(37,99,235,.08);border-radius:var(--radius-sm)}
.emi-main h2{font-size:1.9rem;font-weight:800;color:var(--primary);margin-top:.2rem}
.emi-breakdown{display:flex;flex-direction:column;gap:.4rem;font-size:.83rem}
.emi-row{display:flex;justify-content:space-between}
.total-row{padding-top:.4rem;border-top:1px solid var(--border);font-weight:700}
.mini-donut-wrap{display:flex;align-items:center;gap:1rem;margin-top:.5rem}
.mini-donut{width:76px;height:76px;flex-shrink:0}
.mini-donut-label{text-align:center}
.pct-num{font-size:1rem;font-weight:800;display:block;color:var(--primary)}
.mini-donut-label small{color:var(--muted);font-size:.73rem}
.emi-legend{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--muted)}
.dot-legend{display:inline-block;width:9px;height:9px;border-radius:50%}
.elig-placeholder{text-align:center;padding:2rem;color:var(--muted)}
.elig-result-content{text-align:center;padding:.5rem}
.elig-score-ring{width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1rem;border:6px solid}
.elig-score-ring strong{font-size:1.7rem;font-weight:800}
.elig-score-ring small{font-size:.7rem;color:var(--muted)}
.elig-detail{display:flex;flex-direction:column;gap:.45rem;margin-top:1rem;text-align:left;font-size:.83rem}
.elig-detail-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:.3rem}
.loan-types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.lt-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center;transition:var(--trans);cursor:pointer}
.lt-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15);border-color:var(--primary)}
.lt-icon{font-size:1.8rem;margin-bottom:.4rem}
.lt-type{font-weight:700;margin-bottom:.35rem;font-size:.9rem}
.lt-detail{font-size:.75rem;color:var(--muted);display:flex;flex-direction:column;gap:.18rem}
.lt-rate{font-size:1rem;font-weight:700;margin:.35rem 0}
.referral-body{padding:.5rem}
.ref-prog-bar-wrap{background:var(--border);border-radius:99px;height:8px;overflow:hidden;margin:.75rem 0}
.ref-prog-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:99px}
.ref-code-box{display:flex;align-items:center;justify-content:space-between;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem 1rem;margin-top:.75rem;font-size:.83rem}
.ref-list{display:flex;flex-direction:column;gap:.4rem}
.ref-item{display:flex;align-items:center;gap:.75rem;padding:.6rem;border-radius:var(--radius-sm);font-size:.83rem}
.success-ref{background:rgba(16,185,129,.06)}
.pending-ref{background:rgba(245,158,11,.06)}
.ref-av{width:34px;height:34px;border-radius:50%;background:var(--balance-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700;flex-shrink:0}
.ref-item > span:last-child{margin-left:auto;font-weight:700}

/* =============================================
   BILL PAYMENTS
   ============================================= */
.bills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.5rem}
.bill-cat-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem .75rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;transition:var(--trans);font-size:.8rem;font-weight:600;color:var(--text)}
.bill-cat-btn:hover,.bill-cat-btn.active-cat{background:rgba(37,99,235,.1);border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.bill-cat-icon{font-size:1.6rem}
.bill-form-area{animation:fadeUp .25s ease}
.bill-hist-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.bill-hist-item:last-child{border-bottom:none}
.saved-biller-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.saved-biller-item:last-child{border-bottom:none}

/* =============================================
   CARDS PAGE
   ============================================= */
.cards-layout{display:grid;grid-template-columns:360px 1fr;gap:1.5rem;align-items:start}
.virtual-card-wrap{perspective:1000px}
.virtual-card{background:linear-gradient(135deg,#1a237e 0%,#283593 35%,#1565c0 65%,#0277bd 100%);border-radius:20px;padding:1.4rem 1.6rem;position:relative;overflow:hidden;color:#fff;width:100%;aspect-ratio:1.586;box-shadow:0 20px 50px rgba(26,35,126,.5);transition:transform .3s}
.virtual-card:hover{transform:translateY(-4px) rotateX(2deg)}
.vc-circles{position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.04);top:-70px;right:-70px}
.vc-circles::after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.04);top:40px;left:40px}
.vc-shimmer{position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
.vc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.vc-chip{display:flex;align-items:center;justify-content:center}
.vc-network{font-size:1.1rem;font-style:italic;font-weight:900;letter-spacing:-1px;opacity:.9}
.vc-number{font-size:1rem;letter-spacing:.2em;font-weight:600;font-family:'Courier New',monospace;margin:.5rem 0}
.vc-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:.5rem}
.vc-bottom small{font-size:.6rem;color:rgba(255,255,255,.65);display:block;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.1rem}
.vc-bottom strong{font-size:.82rem;letter-spacing:.05em}
.vc-frozen-overlay{position:absolute;inset:0;background:rgba(8,14,29,.8);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;transition:opacity .3s}
.vc-frozen-overlay p{color:#fff;font-size:.9rem;margin-top:.5rem;font-weight:600}
.card-controls-list{display:flex;flex-direction:column;gap:.25rem}
.ctrl-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--border);font-size:.86rem}
.ctrl-row:last-child{border-bottom:none}
.ctrl-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.ctrl-row > div{flex:1}
.reward-summary{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 .75rem}
.reward-big strong{font-size:2rem;font-weight:800;color:var(--primary)}
.reward-big small{display:block;font-size:.73rem;color:var(--muted)}
.reward-tier{background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;font-size:.75rem;font-weight:700;padding:.3rem .8rem;border-radius:99px}
.reward-breakdown{display:flex;flex-direction:column;gap:.4rem;font-size:.83rem;border-top:1px solid var(--border);padding-top:.75rem}
.reward-row{display:flex;justify-content:space-between}
.card-actions-list{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.card-action-btn{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--text);transition:var(--trans)}
.card-action-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(37,99,235,.06)}
.card-action-btn span{font-size:1.3rem}

/* =============================================
   INVESTMENTS
   ============================================= */
.portfolio-card{background:linear-gradient(135deg,#064e3b,#065f46,#047857);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem;position:relative;overflow:hidden}
.portfolio-card::before{content:'';position:absolute;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.05);top:-80px;right:-80px}
.port-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.1rem}
.port-pnl{text-align:right;color:#fff}
.pnl-arrow{font-size:1.5rem;color:#6ee7b7}
.port-pnl strong{display:block;font-size:1.1rem;font-weight:800;color:#6ee7b7}
.port-pnl small{color:rgba(255,255,255,.7);font-size:.8rem}
.port-stats{display:flex;gap:1rem}
.port-stat{color:#fff}
.port-stat small{font-size:.7rem;color:rgba(255,255,255,.65);display:block}
.port-stat strong{font-size:.88rem}
.port-stat-div{width:1px;background:rgba(255,255,255,.2)}
.mf-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin-bottom:.75rem;transition:var(--trans)}
.mf-card:hover{transform:translateX(3px);border-color:var(--primary)}
.mf-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.6rem}
.mf-name{font-weight:700;font-size:.88rem}
.mf-cat{font-size:.7rem;color:var(--muted);margin-top:.1rem}
.mf-return{font-size:1rem;font-weight:800;text-align:right}
.mf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;font-size:.75rem}
.mf-stat{background:var(--input-bg);border-radius:6px;padding:.4rem .5rem}
.mf-stat small{color:var(--muted);display:block;margin-bottom:.1rem;font-size:.65rem}
.mf-progress-wrap{background:var(--border);border-radius:99px;height:4px;overflow:hidden;margin-top:.6rem}
.mf-progress{height:100%;border-radius:99px}
.sip-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.65rem}
.sip-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.sip-status{font-size:.7rem;padding:.12rem .45rem;border-radius:99px}
.sip-status.active{background:rgba(16,185,129,.15);color:var(--success)}
.fd-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin-bottom:.75rem}
.fd-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.6rem}
.fd-progress-wrap{background:var(--border);border-radius:99px;height:6px;overflow:hidden;margin:.6rem 0}
.fd-progress{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));border-radius:99px}
.holdings-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.holdings-item:last-child{border-bottom:none}

/* =============================================
   FINANCE INSIGHTS
   ============================================= */
.cat-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.cat-item:last-child{border-bottom:none}
.cat-bar-track{flex:1;background:var(--border);border-radius:99px;height:5px;overflow:hidden}
.cat-bar-fill{height:100%;border-radius:99px}
.bar-chart{display:flex;align-items:flex-end;gap:.6rem;height:130px;padding:.5rem 0;overflow-x:auto}
.bar-group{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:44px;flex:1}
.bar-pair{display:flex;gap:2px;align-items:flex-end;height:96px}
.bar{width:13px;border-radius:4px 4px 0 0;transition:height .5s ease;cursor:pointer}
.bar:hover{opacity:.8}
.bar-label{font-size:.68rem;color:var(--muted)}
.bar-legend{display:flex;gap:1rem;margin-top:.75rem;font-size:.76rem}
.goal-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.goal-item:last-child{border-bottom:none}
.goal-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:var(--bg-card-hover);flex-shrink:0}
.goal-progress-wrap{flex:1}
.goal-meta{display:flex;justify-content:space-between;margin-bottom:.3rem}
.goal-bar-track{background:var(--border);border-radius:99px;height:6px;overflow:hidden}
.goal-bar-fill{height:100%;border-radius:99px}
.budget-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.budget-item:last-child{border-bottom:none}
.budget-info{flex:1}
.budget-bar-track{background:var(--border);border-radius:99px;height:5px;overflow:hidden;margin-top:.2rem}
.budget-bar-fill{height:100%;border-radius:99px}

/* =============================================
   SETTINGS
   ============================================= */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.setting-list{display:flex;flex-direction:column}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.86rem}
.setting-row:last-child{border-bottom:none}
.setting-row p{color:var(--muted);font-size:.73rem;margin-top:.1rem}

/* =============================================
   MODAL
   ============================================= */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-box{background:var(--sidebar-bg);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:480px;box-shadow:var(--shadow);animation:fadeUp .25s ease}
.modal-head{padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:1.4rem}
.modal-foot{padding:.9rem 1.4rem;border-top:1px solid var(--border);display:flex;gap:.65rem;justify-content:flex-end}
.modal-pin{display:flex;gap:.65rem;justify-content:center;margin:1rem 0}
.pin-box{width:48px;height:48px;border:2px solid var(--border);border-radius:var(--radius-sm);text-align:center;font-size:1.5rem;background:var(--input-bg);color:var(--text);font-weight:700}
.pin-box:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);outline:none}
.success-anim{text-align:center;padding:1.5rem}
.success-circle{width:70px;height:70px;border-radius:50%;background:rgba(16,185,129,.15);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto .75rem;animation:popIn .4s cubic-bezier(.68,-.55,.27,1.55) both}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* =============================================
   TOAST
   ============================================= */
#toastContainer{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.45rem;z-index:600}
.toast{background:var(--sidebar-bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem 1rem;font-size:.83rem;font-weight:600;box-shadow:var(--shadow);display:flex;align-items:center;gap:.45rem;animation:toastIn .3s ease;min-width:200px}
.toast.success{border-left:3px solid var(--success)}
.toast.danger{border-left:3px solid var(--danger)}
.toast.info{border-left:3px solid var(--info)}
.toast.warning{border-left:3px solid var(--warning)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* =============================================
   CHATBOT
   ============================================= */
.chatbot-widget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:700}
.chat-fab{width:54px;height:54px;border-radius:50%;background:var(--primary);color:#fff;font-size:1.4rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--primary-glow);transition:var(--trans);border:none;cursor:pointer;position:relative}
.chat-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px var(--primary-glow)}
.chat-fab-badge{position:absolute;top:-3px;right:-3px;width:18px;height:18px;background:var(--danger);border-radius:50%;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;border:2px solid var(--bg)}
.chat-window{position:absolute;bottom:68px;right:0;width:310px;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;animation:fadeUp .3s ease;overflow:hidden}
.chat-head{padding:.7rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(124,58,237,.1))}
.chat-bot-info{display:flex;align-items:center;gap:.55rem}
.chat-bot-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:1rem}
.chat-bot-info strong{display:block;font-size:.85rem}
.chat-status{font-size:.68rem;color:var(--success)}
.chat-msgs{height:220px;overflow-y:auto;padding:.65rem;display:flex;flex-direction:column;gap:.45rem}
.msg-bot,.msg-user{max-width:88%;padding:.5rem .8rem;border-radius:12px;font-size:.8rem;line-height:1.55;white-space:pre-wrap}
.msg-bot{background:var(--bg-card);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:3px}
.msg-user{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.msg-typing{display:flex;gap:4px;align-items:center;padding:.5rem .8rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;border-bottom-left-radius:3px;align-self:flex-start}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typingAnim .8s ease infinite}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typingAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.chat-chips{padding:.45rem;border-top:1px solid var(--border);display:flex;gap:.3rem;flex-wrap:wrap}
.chat-chips button{background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:.25rem .6rem;border-radius:99px;font-size:.72rem;cursor:pointer;transition:var(--trans)}
.chat-chips button:hover{border-color:var(--primary);color:var(--primary)}
.chat-input-row{display:flex;gap:.4rem;padding:.55rem;border-top:1px solid var(--border)}
.chat-input-row input{flex:1;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .7rem;color:var(--text);font-size:.8rem;outline:none}
.chat-input-row input:focus{border-color:var(--primary)}
.chat-send-btn{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;flex-shrink:0}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1100px){.quick-actions{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-area{margin-left:0}
  .dash-grid,.two-col,.settings-grid,.cards-layout{grid-template-columns:1fr}
  .loan-types-grid{grid-template-columns:1fr 1fr}
  .alc-grid{grid-template-columns:1fr 1fr}
  .bills-grid{grid-template-columns:repeat(4,1fr)}
  .balance-amount{font-size:1.6rem}
  .quick-actions{grid-template-columns:repeat(4,1fr)}
  .port-stats{flex-wrap:wrap}
}
@media(max-width:540px){
  .page-inner{padding:1rem}
  .quick-actions{grid-template-columns:repeat(4,1fr);gap:.4rem}
  .bills-grid{grid-template-columns:repeat(2,1fr)}
  .loan-types-grid{grid-template-columns:1fr}
  .balance-card{padding:1.1rem}
  .balance-stats{flex-wrap:wrap;gap:.65rem}
  .bstat-div{display:none}
  .tabs{gap:.15rem}
  .tab{padding:.32rem .55rem;font-size:.72rem}
  .notif-panel,.chat-window{width:calc(100vw - 1.5rem);right:.5rem}
  .card-actions-list{grid-template-columns:1fr}
  .mf-stats{grid-template-columns:1fr 1fr}
  .alc-grid{grid-template-columns:1fr 1fr}
}

/* ===== RBAC ROLE SWITCHER ===== */
.role-switcher-wrap{margin:.75rem 1rem;padding:.75rem;background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.18);border-radius:var(--radius-sm)}
.role-switcher-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}
.role-badge-current{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem;font-size:.85rem;font-weight:600}
.role-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
.role-dot-lg{display:inline-block;width:13px;height:13px;border-radius:50%;flex-shrink:0}
.role-select{width:100%;padding:.35rem .55rem;border-radius:var(--radius-sm);background:var(--input-bg);border:1px solid var(--border);color:var(--text);font-size:.82rem}
.branch-select-wrap{margin-top:.25rem}

/* Admin nav badge variants */
.danger-badge{background:rgba(244,63,94,.15);color:#f43f5e}

/* ===== ADMIN PAGES SHARED ===== */
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.65rem;margin-bottom:1rem}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{padding:.6rem 1rem;text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.admin-table td{padding:.7rem 1rem;border-bottom:1px solid var(--border);font-size:.88rem;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:rgba(37,99,235,.05)}
.role-chip{display:inline-block;padding:.18rem .6rem;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap}
.status-badge{display:inline-block;padding:.18rem .65rem;border-radius:20px;font-size:.76rem;font-weight:600}
.status-badge.active{background:rgba(16,185,129,.12);color:#10b981}
.status-badge.pending{background:rgba(245,158,11,.12);color:#f59e0b}
.status-badge.blocked{background:rgba(244,63,94,.12);color:#f43f5e}
.action-btns{display:flex;gap:.35rem}
.action-btns button{padding:.25rem .6rem;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:.8rem}
.action-btns button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.branch-list{display:flex;flex-direction:column;gap:.6rem}
.branch-row{display:flex;align-items:center;gap:.75rem;padding:.6rem;border-radius:var(--radius-sm);background:var(--input-bg)}
.branch-icon{font-size:1.3rem}
.branch-row>div{flex:1}
.mfa-badge{display:inline-block;padding:.12rem .5rem;border-radius:10px;font-size:.72rem;font-weight:600}
.mfa-on{background:rgba(16,185,129,.12);color:#10b981}
.mfa-off{background:rgba(244,63,94,.12);color:#f43f5e}

/* ===== RBAC PAGE ===== */
.role-tree{display:flex;flex-direction:column;align-items:center;gap:0;padding:.5rem 0}
.role-node{display:flex;align-items:center;gap:.75rem;padding:.65rem 1.1rem;border-radius:10px;background:var(--input-bg);width:90%;border:1px solid var(--border)}
.role-node strong{font-size:.9rem}
.role-node small{display:block;color:var(--muted);font-size:.75rem}
.role-tree-line{width:2px;height:18px;background:var(--border);margin:0 auto}
.db-schema-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;padding:1rem}
.db-table{border-radius:8px;border:1px solid var(--border);overflow:hidden;font-size:.8rem}
.db-table-head{padding:.45rem .7rem;font-weight:700;font-size:.78rem}
.users-head{background:rgba(37,99,235,.2);color:#93c5fd}
.roles-head{background:rgba(245,158,11,.2);color:#fcd34d}
.perms-head{background:rgba(16,185,129,.2);color:#6ee7b7}
.rp-head{background:rgba(124,58,237,.2);color:#c4b5fd}
.audit-head{background:rgba(244,63,94,.2);color:#fca5a5}
.db-field{padding:.3rem .7rem;border-top:1px solid var(--border);color:var(--muted)}
.perm-matrix{width:100%;border-collapse:collapse}
.perm-matrix th,.perm-matrix td{padding:.6rem 1rem;border-bottom:1px solid var(--border);text-align:center;font-size:.82rem}
.perm-matrix th:first-child,.perm-matrix td:first-child{text-align:left}
.perm-matrix tr:hover td{background:rgba(37,99,235,.05)}
.perm-check{color:#10b981;font-size:1rem}
.perm-cross{color:var(--border);font-size:.9rem}

/* ===== AUDIT LOGS ===== */
.audit-timeline{display:flex;flex-direction:column;gap:0}
.audit-tl-item{display:flex;gap:1rem;padding:.75rem 0;position:relative}
.audit-tl-item:not(:last-child)::before{content:'';position:absolute;left:12px;top:36px;bottom:-4px;width:2px;background:var(--border)}
.audit-tl-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;margin-top:.1rem}
.audit-tl-dot.info{background:rgba(37,99,235,.15);color:#2563eb}
.audit-tl-dot.warning{background:rgba(245,158,11,.15);color:#f59e0b}
.audit-tl-dot.critical{background:rgba(244,63,94,.15);color:#f43f5e}
.audit-tl-body strong{font-size:.88rem}
.audit-tl-body p{font-size:.8rem;color:var(--muted);margin:.1rem 0 0}
.audit-level{display:inline-block;padding:.1rem .45rem;border-radius:10px;font-size:.72rem;font-weight:600}
.audit-level.INFO{background:rgba(37,99,235,.1);color:#60a5fa}
.audit-level.WARNING{background:rgba(245,158,11,.1);color:#fbbf24}
.audit-level.CRITICAL{background:rgba(244,63,94,.1);color:#f87171}

/* ===== FRAUD MONITOR ===== */
.fraud-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin-bottom:1.25rem}
.fraud-kpi{padding:1rem;border-radius:var(--radius);text-align:center;border:1px solid var(--border)}
.fraud-kpi.danger{border-color:rgba(244,63,94,.3);background:rgba(244,63,94,.06)}
.fraud-kpi.warning{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.06)}
.fraud-kpi.success{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.06)}
.fraud-kpi.info{border-color:rgba(37,99,235,.3);background:rgba(37,99,235,.06)}
.fkpi-val{font-size:1.6rem;font-weight:800}
.fkpi-label{font-size:.76rem;color:var(--muted);margin-top:.2rem}
.fraud-alert-card{padding:.85rem;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid rgba(244,63,94,.25);margin-bottom:.65rem}
.fraud-alert-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.fraud-alert-badge{padding:.12rem .6rem;border-radius:20px;font-size:.72rem;font-weight:700;background:rgba(244,63,94,.15);color:#f43f5e}
.fraud-alert-badge.medium{background:rgba(245,158,11,.15);color:#f59e0b}
.fraud-alert-actions{display:flex;gap:.5rem;margin-top:.6rem}
.risk-score-display{display:flex;align-items:center;gap:1.2rem;margin-top:1rem;padding:.75rem;background:var(--input-bg);border-radius:var(--radius-sm)}
.risk-score-ring{position:relative;width:80px;height:80px;flex-shrink:0}
.risk-score-ring svg{width:80px;height:80px}
.risk-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800}
.risk-verdict{flex:1}
.risk-label{display:inline-block;padding:.2rem .7rem;border-radius:20px;font-size:.8rem;font-weight:700}
.risk-label.success{background:rgba(16,185,129,.15);color:#10b981}
.risk-label.warning{background:rgba(245,158,11,.15);color:#f59e0b}
.risk-label.danger{background:rgba(244,63,94,.15);color:#f43f5e}
.geo-alert{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border)}
.geo-alert:last-child{border-bottom:none}
.geo-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.geo-dot.danger{background:#f43f5e}
.geo-dot.warning{background:#f59e0b}
.geo-dot.success{background:#10b981}
.geo-alert>div{flex:1}
.ml-model-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.ml-model-card{padding:.85rem;background:var(--input-bg);border-radius:var(--radius-sm);border:1px solid var(--border)}
.ml-model-name{font-weight:600;font-size:.85rem;margin-bottom:.5rem}
.ml-stat{display:flex;justify-content:space-between;font-size:.8rem;padding:.2rem 0}

/* ===== TRANSFER RISK INDICATOR ===== */
.risk-indicator{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-radius:var(--radius-sm);margin:.5rem 0;font-size:.82rem}
.risk-indicator.low{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:#10b981}
.risk-indicator.medium{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);color:#f59e0b}
.risk-indicator.high{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.25);color:#f43f5e}
.risk-indicator-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ===== BOTTOM NAV — NATIVE MOBILE ===== */
:root{--bn-safe:env(safe-area-inset-bottom,0px)}
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:calc(62px + var(--bn-safe));
  padding:0 0 var(--bn-safe);
  z-index:200;
  isolation:isolate;
}
.bottom-nav::before{
  content:'';
  position:absolute;inset:0;
  background:var(--bn-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--border);
}
[data-theme="dark"]  { --bn-glass:rgba(7,12,24,0.90); }
[data-theme="light"] { --bn-glass:rgba(245,248,255,0.90); }
@media(max-width:900px){
  body.app-active .bottom-nav{display:flex;align-items:flex-start}
  body.app-active .pages{padding-bottom:calc(68px + var(--bn-safe))}
  .chat-fab{bottom:calc(1.25rem + 62px + var(--bn-safe))}
}
/* Mobile app-shell chrome only exists once you're signed in (never on splash/login) */
body:not(.app-active) .bottom-nav,
body:not(.app-active) .pay-dial,
body:not(.app-active) .more-drawer,
body:not(.app-active) .more-drawer-overlay,
body:not(.app-active) .chat-fab { display:none !important; }

/* Tab button */
.btab{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  padding-top:9px;gap:2px;
  background:none;border:none;
  color:var(--muted);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
  position:relative;z-index:1;
  min-height:44px;
  transition:color .22s ease;
  outline:none;
}
.btab.active{color:var(--primary)}

/* Icon wrapper — the pill bubble */
.btab-iw{
  position:relative;
  width:46px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:transparent;
  transition:background .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.btab.active .btab-iw{
  background:rgba(37,99,235,.13);
}
[data-theme="dark"] .btab.active .btab-iw{
  background:rgba(37,99,235,.22);
}

/* SVG icon */
.btab-svg{
  width:21px;height:21px;
  stroke-width:1.6;
  transition:stroke-width .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  position:relative;z-index:1;
}
.btab.active .btab-svg{
  stroke-width:2.4;
  transform:translateY(-1px) scale(1.06);
}

/* Press feedback */
.btab:active .btab-iw{transform:scale(.82)}

/* Label */
.btab-lbl{
  font-size:.62rem;font-weight:500;
  letter-spacing:.01em;line-height:1;
  transition:font-weight .2s, color .2s;
}
.btab.active .btab-lbl{font-weight:700;letter-spacing:.02em}

/* Notification badge */
.btab-badge{
  position:absolute;top:-5px;right:1px;
  min-width:17px;height:17px;
  background:#f43f5e;color:#fff;
  font-size:.58rem;font-weight:800;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
  border:2px solid var(--bg);
  z-index:2;
  animation:badge-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badge-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Loans chevron */
.btab-loans-chevron{
  position:absolute;top:-8px;right:1px;
  width:11px;height:8px;
  stroke-width:1.8;
  opacity:.7;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.btab-loans.submenu-open .btab-loans-chevron{transform:rotate(180deg);opacity:1}

/* Tab press bounce keyframe */
@keyframes bn-bounce{
  0%  {transform:scale(1)}
  35% {transform:scale(.84)}
  70% {transform:scale(1.12)}
  100%{transform:scale(1)}
}
.btab.bn-tap .btab-iw{animation:bn-bounce .36s cubic-bezier(.34,1.56,.64,1) forwards}

/* ===== LOANS BOTTOM SHEET ===== */
.lbs-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  z-index:300;
  opacity:0;
  animation:lbs-fade-in .25s ease forwards;
}
.lbs-overlay.hidden{display:none}
@keyframes lbs-fade-in{to{opacity:1}}

.lbs-sheet{
  position:fixed;bottom:0;left:0;right:0;
  z-index:301;
  background:var(--bg-card);
  border-radius:24px 24px 0 0;
  padding:0 0 calc(12px + var(--bn-safe));
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.25);
}
.lbs-sheet.lbs-open{transform:translateY(0)}
.lbs-sheet.hidden{display:none}

.lbs-handle-bar{
  width:36px;height:4px;
  background:var(--border);
  border-radius:2px;
  margin:12px auto 0;
}
.lbs-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.25rem .6rem;
  border-bottom:1px solid var(--border);
}
.lbs-title{font-size:1rem;font-weight:700;margin:0}
.lbs-sub{font-size:.78rem;color:var(--muted);margin:.1rem 0 0}
.lbs-close{
  width:30px;height:30px;
  border-radius:50%;
  background:var(--input-bg);
  border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--muted);
  flex-shrink:0;
}
.lbs-close svg{width:14px;height:14px}

.lbs-row{display:flex;flex-direction:column;padding:.35rem 0}
.lbs-btn{
  display:flex;align-items:center;gap:.85rem;
  padding:.82rem 1.25rem;
  background:none;border:none;
  text-align:left;cursor:pointer;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
  width:100%;
}
.lbs-btn:active{background:var(--input-bg)}
.lbs-icon{
  width:42px;height:42px;flex-shrink:0;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.lbs-icon svg{width:20px;height:20px;stroke-width:1.7}
.lbs-btn-text{flex:1}
.lbs-btn-text strong{display:block;font-size:.88rem;font-weight:600}
.lbs-btn-text span{font-size:.76rem;color:var(--muted)}
.lbs-arrow{width:16px;height:16px;color:var(--border);flex-shrink:0;stroke-width:2.2}

/* =============================================
   CRUD UI SYSTEM
   ============================================= */

/* Toolbar */
.crud-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem;padding-bottom:.55rem;border-bottom:1px solid var(--border)}

/* CRUD action buttons (inline row icons) */
.crud-row-actions{display:flex;align-items:center;gap:.28rem;flex-shrink:0}
.cbtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:.78rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,transform .15s;flex-shrink:0;padding:0}
.cbtn:active{transform:scale(.88)}
.cbtn-add{width:auto;padding:0 .65rem;height:28px;background:rgba(37,99,235,.1);color:var(--primary);border-color:rgba(37,99,235,.25);font-weight:600;font-size:.78rem;border-radius:7px;white-space:nowrap}
.cbtn-add:hover{background:rgba(37,99,235,.18)}
.cbtn-edit{color:var(--primary);border-color:rgba(37,99,235,.2)}
.cbtn-edit:hover{background:rgba(37,99,235,.1)}
.cbtn-del{color:var(--danger,#ef4444);border-color:rgba(239,68,68,.2)}
.cbtn-del:hover{background:rgba(239,68,68,.1)}
.cbtn-ok{color:#10b981;border-color:rgba(16,185,129,.25);font-size:.9rem;font-weight:700}
.cbtn-ok:hover{background:rgba(16,185,129,.1)}
.cbtn-warn{color:#f59e0b;border-color:rgba(245,158,11,.25)}
.cbtn-warn:hover{background:rgba(245,158,11,.1)}

/* crudModal foot layout */
.crud-foot{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}
.crud-del-btn{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.25);border-radius:var(--radius-sm,8px);padding:.4rem .9rem;font-weight:600;cursor:pointer;font-size:.82rem;transition:background .18s}
.crud-del-btn:hover{background:rgba(239,68,68,.22)}

/* Confirm/action modal body */
.del-confirm-body{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.25rem 0;text-align:center}
.del-confirm-body strong{font-size:1rem}

/* Form helpers */
.req-star{color:var(--danger,#ef4444);margin-left:2px}
.hint-text{font-size:.73rem;color:var(--muted);margin:.2rem 0 0;line-height:1.35}
.readonly-field{opacity:.55;cursor:not-allowed;background:var(--input-bg)}
.crud-textarea{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm,8px);padding:.55rem .65rem;color:var(--text);font:inherit;resize:none;box-sizing:border-box}
.crud-divider{padding:.4rem 0 .2rem;font-size:.73rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* Empty state inline */
.empty-state-sm{padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.empty-state-sm p{margin:0}

/* EMI Schedule table */
.emi-table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:420px}
.emi-table th{padding:.4rem .6rem;text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.emi-table td{padding:.4rem .6rem;border-bottom:1px solid var(--border)}
.emi-table tr:last-child td{border-bottom:none}

/* FD Detail Grid */
.fd-detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.65rem;margin-bottom:.75rem}
.fd-stat-cell{background:var(--input-bg);border-radius:8px;padding:.5rem .65rem}
.fd-stat-cell small{display:block;font-size:.7rem;color:var(--muted);margin-bottom:.15rem}
.fd-stat-cell strong{font-size:.88rem}
@media(max-width:400px){.fd-detail-grid{grid-template-columns:1fr 1fr}}

/* =============================================
   FEATURE ENHANCEMENTS CSS
   ============================================= */

/* Step indicator (loan application) */
.step-bar{display:flex;align-items:center;margin-bottom:.25rem;gap:0}
.step-dot{width:28px;height:28px;border-radius:50%;background:var(--input-bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--muted);flex-shrink:0;position:relative}
.step-dot span{position:absolute;top:32px;left:50%;transform:translateX(-50%);font-size:.65rem;white-space:nowrap;color:var(--muted)}
.step-dot.sactive{background:var(--primary);border-color:var(--primary);color:#fff}
.step-line{flex:1;height:2px;background:var(--border)}
.step-line.sactive{background:var(--primary)}

/* Loan EMI preview box */
.loan-emi-box{background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.18);border-radius:10px;padding:.75rem 1rem;margin-top:.5rem}
.loan-emi-row{display:flex;justify-content:space-between;align-items:center;padding:.18rem 0;font-size:.82rem}
.loan-emi-row:not(:last-child){border-bottom:1px solid var(--border)}

/* CIBIL bar */
.cibil-bar-wrap{margin-top:.25rem}
.cibil-bar{height:8px;border-radius:4px;background:var(--input-bg);border:1px solid var(--border);overflow:hidden}
.cibil-fill{height:100%;border-radius:4px}

/* FD preview */
.fd-preview{background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.18);border-radius:10px;padding:.75rem 1rem;margin-top:.5rem}

/* Review card (loan step 3) */
.review-card{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.review-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 1rem;font-size:.85rem}
.review-row:not(:last-child){border-bottom:1px solid var(--border)}
.review-row.last{background:rgba(37,99,235,.06);font-weight:600}
.terms-check{font-size:.8rem;display:flex;align-items:flex-start;gap:.4rem}
.terms-check input{margin-top:2px;flex-shrink:0}

/* Reward header in modal */
.reward-header-modal{display:flex;align-items:baseline;gap:.5rem;padding:.5rem 0 1rem}
.reward-header-modal strong{font-size:1.6rem;font-weight:800}

/* QR scanner box */
.qr-scanner-box{width:200px;height:200px;border:2px solid var(--border);border-radius:12px;margin:0 auto;position:relative;background:rgba(0,0,0,.04)}
.qr-corner{width:20px;height:20px;position:absolute;border-color:var(--primary);border-style:solid}
.qr-corner.tl{top:6px;left:6px;border-width:3px 0 0 3px;border-radius:4px 0 0 0}
.qr-corner.tr{top:6px;right:6px;border-width:3px 3px 0 0;border-radius:0 4px 0 0}
.qr-corner.bl{bottom:6px;left:6px;border-width:0 0 3px 3px;border-radius:0 0 0 4px}
.qr-corner.br{bottom:6px;right:6px;border-width:0 3px 3px 0;border-radius:0 0 4px 0}
.qr-scan-line{position:absolute;top:15%;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);animation:qr-scan 2s ease-in-out infinite}
@keyframes qr-scan{0%,100%{top:15%}50%{top:75%}}

/* Amount in words */
.amt-words{font-size:.72rem;color:var(--primary);margin:.2rem 0 0;min-height:.9rem;font-weight:500}

/* Change PIN � inline pin row */
.modal-pin{display:flex;gap:.4rem;flex-wrap:wrap}

/* ==============================================================
   MOBILE-NATIVE ENHANCEMENT — Premium UX Layer
   ============================================================== */

/* ---- Centre PAY FAB ---- */
.btab-pay-wrap {
  flex: 1; display: flex; align-items: flex-start;
  justify-content: center; position: relative; pointer-events: none;
}
.btab-pay {
  pointer-events: all; position: absolute; top: -20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,99,235,.5), 0 0 0 5px rgba(37,99,235,.12);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent; outline: none; z-index: 10;
}
.btab-pay:active { transform: scale(.86); }
.btab-pay.dial-open {
  background: linear-gradient(135deg, #f43f5e 0%, #f97316 100%);
  transform: rotate(45deg);
  box-shadow: 0 4px 24px rgba(244,63,94,.55), 0 0 0 5px rgba(244,63,94,.12);
}
.btab-pay::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.3); animation: fab-ring 2.5s ease infinite;
}
.btab-pay.dial-open::after { display: none; }
@keyframes fab-ring {
  0%   { transform: scale(1);    opacity: .8; }
  60%  { transform: scale(1.22); opacity: 0;  }
  100% { transform: scale(1);    opacity: 0;  }
}

/* ---- PAY SPEED-DIAL ---- */
.pay-dial {
  position: fixed; inset: 0; z-index: 195; pointer-events: none;
}
.pay-dial.open { pointer-events: all; }
.pay-dial-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.pay-dial.open .pay-dial-bg { opacity: 1; }
.pay-dial-items {
  position: absolute;
  bottom: calc(70px + var(--bn-safe, 0px) + 16px);
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: stretch;
  gap: .65rem; min-width: 210px;
}
.pd-item {
  display: flex; align-items: center; gap: .85rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px; padding: .72rem 1.3rem .72rem .62rem;
  cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(16px) scale(.92);
  transition: opacity .22s ease calc(var(--di,0)*.055s),
              transform .28s cubic-bezier(.34,1.56,.64,1) calc(var(--di,0)*.055s),
              background .15s;
  -webkit-tap-highlight-color: transparent;
}
.pay-dial.open .pd-item { opacity: 1; transform: none; }
.pd-item:active { background: var(--bg-card-hover); transform: scale(.96) !important; }
.pd-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pd-lbl { font-size: .9rem; font-weight: 600; color: var(--text); }

/* ---- MORE DRAWER ---- */
.more-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  z-index: 210; transition: opacity .28s ease;
}
.more-drawer-overlay.hidden { opacity: 0; pointer-events: none; }
.more-drawer-overlay:not(.hidden) { opacity: 1; }
.more-drawer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top-left-radius: 26px; border-top-right-radius: 26px;
  z-index: 211;
  padding: .65rem 1.25rem calc(1.5rem + var(--bn-safe, 0px));
  box-shadow: 0 -12px 60px rgba(0,0,0,.35);
  border-top: 1px solid var(--border);
  transition: transform .38s cubic-bezier(.32,.72,0,1);
  transform: translateY(100%); will-change: transform;
}
.more-drawer:not(.hidden) { transform: translateY(0); }
.more-drawer-handle {
  width: 40px; height: 4px; background: var(--border);
  border-radius: 99px; margin: 0 auto .85rem; cursor: grab;
}
.more-drawer-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); text-align: center; margin-bottom: 1.1rem;
}
.more-drawer-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; margin-bottom: 1rem;
}
.mdr-item {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer; padding: .75rem .4rem;
  border-radius: 14px; transition: background .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.mdr-item:active { background: var(--bg-card-hover); transform: scale(.93); }
.mdr-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.mdr-item span:last-child {
  font-size: .72rem; font-weight: 600; color: var(--text); text-align: center;
}
.more-drawer-logout { border-top: 1px solid var(--border); padding-top: .85rem; }

/* ---- AI SMART SUGGESTIONS ---- */
.smart-suggest { margin-bottom: 1.15rem; }
.ss-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: .55rem;
}
.ss-ai-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 6px var(--primary);
  animation: ai-pulse 1.8s ease infinite;
}
@keyframes ai-pulse {
  0%,100%{ opacity:1; transform:scale(1);   }
  50%    { opacity:.4; transform:scale(.68); }
}
.smart-suggest-scroll {
  display: flex; gap: .55rem; overflow-x: auto;
  scrollbar-width: none; padding-bottom: .2rem;
}
.smart-suggest-scroll::-webkit-scrollbar { display: none; }
.ss-chip {
  display: flex; align-items: center; gap: .45rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px; padding: .48rem .9rem;
  white-space: nowrap; cursor: pointer;
  font-size: .8rem; font-weight: 500; color: var(--text);
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateX(12px);
  animation: chip-in .3s ease calc(var(--ci,0)*.07s) both;
  transition: background .15s, transform .15s;
}
@keyframes chip-in { to { opacity:1; transform:none; } }
.ss-chip:active { transform: scale(.94) !important; background: var(--bg-card-hover); }
.ss-chip-urgent { border-color: var(--danger); }
.ss-chip-urgent .ss-chip-icon { color: var(--danger); }
.ss-chip-success { border-color: var(--success); }
.ss-chip-success .ss-chip-icon { color: var(--success); }
.ss-chip-icon { font-size: .9rem; }

/* ---- PULL-TO-REFRESH ---- */
.ptr-indicator {
  position: fixed; top: 70px; left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px; padding: .42rem 1rem;
  font-size: .78rem; color: var(--muted);
  display: flex; align-items: center; gap: .5rem;
  box-shadow: var(--shadow); z-index: 99; pointer-events: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  opacity: 0; white-space: nowrap;
}
.ptr-indicator.ptr-visible { transform: translateX(-50%) translateY(0px); opacity: 1; }
.ptr-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: ptr-spin .7s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ---- PAGE SLIDE TRANSITIONS ---- */
.page.page-enter-right {
  animation: slideInRight .22s cubic-bezier(.25,.46,.45,.94) both;
}
.page.page-enter-left {
  animation: slideInLeft .22s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes slideInRight {
  from { opacity:.7; transform:translateX(28px); }
  to   { opacity:1;  transform:none; }
}
@keyframes slideInLeft {
  from { opacity:.7; transform:translateX(-28px); }
  to   { opacity:1;  transform:none; }
}

/* ---- QUICK ACTIONS SCROLL (mobile) ---- */
@media (max-width: 540px) {
  .quick-actions {
    display: flex; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; padding-bottom: .5rem; gap: .45rem;
  }
  .quick-actions::-webkit-scrollbar { display: none; }
  .qa-btn { flex: 0 0 74px; min-width: 74px; }
  .balance-card { border-radius: 20px; }
  .mdr-icon { width: 46px; height: 46px; border-radius: 14px; }
}

/* ---- BOTTOM NAV 5-TAB OVERFLOW FIX ---- */
@media (max-width: 900px) {
  body.app-active .bottom-nav { display: flex; align-items: flex-start; overflow: visible; }
  body.app-active .pages { padding-bottom: calc(78px + var(--bn-safe, 0px)); }
  .chat-fab { bottom: calc(1.25rem + 68px + var(--bn-safe, 0px)); }
}

/* ---- TOUCH FEEDBACK REFINEMENT ---- */
.qa-btn { -webkit-tap-highlight-color: transparent; }
.qa-btn:active { transform: scale(.91); }
.offer-card { -webkit-tap-highlight-color: transparent; }
.offer-card:active { transform: scale(.98); opacity:.92; }
.btab { -webkit-tap-highlight-color: transparent; }

/* ---- SIDEBAR SWIPE HINT BAR ---- */
.swipe-bar-hint {
  position: fixed; top: 50%; left: 0;
  transform: translateY(-50%);
  width: 4px; height: 60px; border-radius: 0 4px 4px 0;
  background: rgba(37,99,235,.25); z-index: 50;
  display: none;
}
@media (max-width: 900px) { .swipe-bar-hint { display: block; } }

/* ---- TOPBAR COMPACT ON MOBILE ---- */
@media (max-width: 540px) {
  .page-title { font-size: .95rem; }
  .role-chip  { font-size: .62rem; padding: .2rem .5rem; }
}

/* ============================================================
   CORE BUSINESS ENHANCEMENT — Financial Health & Analytics
   ============================================================ */

/* ---- Financial Health Score ---- */
.fin-health-inner {
  display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap;
}
.fin-health-ring-wrap {
  position: relative; flex-shrink: 0;
}
.fin-health-svg {
  width: 110px; height: 110px; transform: rotate(0deg);
}
.fin-health-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fin-health-metrics {
  flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .65rem;
}
.fin-metric {}
.fin-metric-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; font-weight: 600; margin-bottom: .25rem;
}
.fin-metric-bar-track {
  height: 6px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.fin-metric-bar {
  height: 100%; border-radius: 99px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.fin-metric-hint {
  font-size: .68rem; color: var(--muted); margin-top: .18rem;
}

/* ---- Part Pay Preview ---- */
#partPayPreview .loan-emi-row { padding: .4rem 0; border-bottom: 1px solid var(--border); }
#partPayPreview .loan-emi-row:last-child { border-bottom: none; }

/* ---- Foreclosure Detail Grid ---- */
.fd-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .65rem; font-size: .82rem; }

/* ---- Active Loan Pending Badge ---- */
.loan-status-pending {
  font-size: .65rem; font-weight: 700; padding: .18rem .55rem; border-radius: 99px;
  background: rgba(245,158,11,.15); color: var(--warning); margin-left: .5rem;
}
.loan-status-active {
  font-size: .65rem; font-weight: 700; padding: .18rem .55rem; border-radius: 99px;
  background: rgba(16,185,129,.12); color: var(--success); margin-left: .5rem;
}

/* ---- Bill History Enhanced ---- */
.bill-hist-item { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.bill-hist-item:last-child { border-bottom: none; }

/* ---- SIP Projection Button ---- */
.sip-card { background: var(--bg-card-hover); border-radius: 14px; padding: .85rem; margin-bottom: .65rem; border: 1px solid var(--border); }
.sip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.sip-status { font-size: .65rem; font-weight: 700; padding: .18rem .55rem; border-radius: 99px; }
.sip-status.active  { background: rgba(16,185,129,.12); color: var(--success); }
.sip-status.paused  { background: rgba(245,158,11,.12); color: var(--warning); }

/* ---- EMI Table Enhancement ---- */
.emi-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.emi-table th { background: rgba(37,99,235,.08); padding: .5rem .65rem; text-align: left; font-weight: 700; font-size: .73rem; }
.emi-table td { padding: .5rem .65rem; border-bottom: 1px solid var(--border); }
.emi-table tr:last-child td { border-bottom: none; }
.emi-table tr:hover td { background: var(--bg-card-hover); }

/* ---- Portfolio Card Live ---- */
.port-top { display: flex; justify-content: space-between; align-items: flex-start; }
.port-pnl { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.pnl-arrow { font-size: 1.2rem; }
.port-stats { display: flex; gap: .5rem; align-items: center; margin-top: .85rem; flex-wrap: wrap; }
.port-stat { display: flex; flex-direction: column; gap: .1rem; }
.port-stat small { font-size: .65rem; color: rgba(255,255,255,.6); }
.port-stat strong { font-size: .88rem; }
.port-stat-div { width: 1px; height: 28px; background: rgba(255,255,255,.2); margin: 0 .35rem; }

/* ---- Danger Tag ---- */
.danger-tag { background: rgba(244,63,94,.12); color: var(--danger); }

/* ---- Mobile Layout Fixes for Finance ---- */
@media (max-width: 540px) {
  .fin-health-inner { flex-direction: column; gap: 1rem; }
  .fin-health-ring-wrap { align-self: center; }
  .fin-health-metrics { min-width: unset; width: 100%; }
}

/* ============================================================
   LOAN SERVICING SUITE — Amortization & Statement
   ============================================================ */

/* ---- Amortization summary strip ---- */
.amort-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  margin-bottom: .85rem;
}
.amort-stat {
  background: var(--bg-card-hover); border: 1px solid var(--border);
  border-radius: 12px; padding: .55rem .6rem; display: flex; flex-direction: column; gap: .15rem;
}
.amort-stat small { font-size: .64rem; color: var(--muted); }
.amort-stat strong { font-size: .9rem; }

/* ---- Loan statement ---- */
.stmt-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--border);
}
.stmt-section { margin-top: 1rem; }
.stmt-section-title {
  font-size: .8rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem;
}

@media (max-width: 540px) {
  .amort-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   UNIFIED MONEY ENGINE — Live Budget Summary
   ============================================================ */
.budget-summary {
  background: var(--bg-card-hover); border: 1px solid var(--border);
  border-radius: 14px; padding: .85rem 1rem; margin-bottom: .9rem;
}
.budget-summary-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .5rem; font-size: .82rem; color: var(--muted);
}
.budget-summary-top strong { font-size: 1.05rem; color: var(--text); }
.budget-summary .budget-bar-track { height: 7px; }
.budget-summary-foot { font-size: .72rem; margin-top: .4rem; }

/* ============================================================
   MASTER SETTINGS — super-admin governed config panel
   ============================================================ */
.ms-wrap { display: flex; flex-direction: column; gap: .15rem; }
.ms-wrap.ms-locked { opacity: .65; }
.ms-group-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: .85rem 0 .35rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}
.ms-group-title:first-child { margin-top: 0; }
.ms-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .4rem 0;
}
.ms-row label { font-size: .85rem; color: var(--text); flex: 1; }
.ms-input-wrap { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.ms-input-wrap input {
  width: 130px; text-align: right; padding: .4rem .55rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: .85rem; font-weight: 600;
}
.ms-input-wrap input:focus { border-color: var(--primary); outline: none; }
.ms-input-wrap input:disabled { cursor: not-allowed; opacity: .7; }
.ms-suffix { font-size: .8rem; color: var(--muted); min-width: 14px; }
.ms-actions {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border);
}
@media (max-width: 540px) {
  .ms-input-wrap input { width: 104px; }
}

/* ============================================================
   BUSINESS CORE CONSOLE — modules, plans, environment, AI
   ============================================================ */
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bc-span { grid-column: 1 / -1; }

/* Subscription plans */
.bc-plans { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.bc-plan {
  position: relative; text-align: left; cursor: pointer;
  background: var(--bg-card-hover); border: 1.5px solid var(--border);
  border-radius: 14px; padding: .85rem; transition: all .18s; color: var(--text);
}
.bc-plan:hover:not(:disabled) { border-color: var(--pc); transform: translateY(-2px); }
.bc-plan.active { border-color: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent); }
.bc-plan:disabled { cursor: not-allowed; opacity: .6; }
.bc-plan-name { font-weight: 700; font-size: .95rem; color: var(--pc); }
.bc-plan-price { font-size: .8rem; font-weight: 600; margin: .15rem 0; }
.bc-plan-blurb { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.bc-plan-badge { position: absolute; top: .6rem; right: .6rem; font-size: .6rem; font-weight: 700; background: var(--pc); color: #fff; padding: .12rem .45rem; border-radius: 99px; }

/* Environment / tenant */
.bc-tenants { display: flex; flex-direction: column; gap: .5rem; }
.bc-tenant {
  display: flex; align-items: center; gap: .65rem; text-align: left; cursor: pointer;
  background: var(--bg-card-hover); border: 1.5px solid var(--border); border-radius: 12px;
  padding: .6rem .75rem; color: var(--text); transition: all .15s;
}
.bc-tenant:hover:not(:disabled) { border-color: var(--primary); }
.bc-tenant.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--bg-card-hover)); }
.bc-tenant:disabled { cursor: not-allowed; opacity: .6; }
.bc-tenant-ico { font-size: 1.4rem; flex-shrink: 0; }
.bc-tenant small { display: block; color: var(--muted); font-size: .72rem; }
.bc-tenant-check { margin-left: auto; color: var(--success); font-weight: 700; }

/* Module grid */
.bc-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .65rem; }
.bc-mod {
  background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 12px;
  padding: .7rem .8rem; transition: all .15s; opacity: .6;
}
.bc-mod.on { opacity: 1; border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.bc-mod.locked { opacity: .5; }
.bc-mod-top { display: flex; justify-content: space-between; align-items: center; }
.bc-mod-ico { font-size: 1.25rem; }
.bc-mod-name { font-weight: 700; font-size: .85rem; margin-top: .35rem; }
.bc-mod-desc { font-size: .7rem; color: var(--muted); line-height: 1.3; margin: .15rem 0 .45rem; min-height: 1.8em; }
.bc-mod-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.bc-plan-tag { font-size: .6rem; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); padding: .12rem .45rem; border-radius: 99px; }
.bc-mod-lock { font-size: .64rem; color: var(--warning); }
.bc-mod-core { font-size: .64rem; color: var(--muted); }
.toggle.is-disabled { opacity: .5; pointer-events: none; }

/* AI advisor */
.bc-rec { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; margin-bottom: .5rem; border: 1px solid var(--border); background: var(--bg-card-hover); }
.bc-rec:last-child { margin-bottom: 0; }
.bc-rec.warn   { border-left: 3px solid var(--warning); }
.bc-rec.danger { border-left: 3px solid var(--danger); }
.bc-rec.info   { border-left: 3px solid var(--info, #2563eb); }
.bc-rec.ok     { border-left: 3px solid var(--success); }
.bc-rec-ico { font-size: 1.15rem; flex-shrink: 0; }
.bc-rec strong { font-size: .85rem; }
.bc-rec p { font-size: .74rem; color: var(--muted); margin: .12rem 0 0; line-height: 1.35; }

@media (max-width: 820px) {
  .bc-grid { grid-template-columns: 1fr; }
  .bc-plans { grid-template-columns: 1fr; }
}

/* ── Per-module settings cog ── */
.bc-mod-foot-right { display: flex; align-items: center; gap: .4rem; }
.bc-mod-cog {
  font-size: .64rem; font-weight: 700; cursor: pointer;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 99px; padding: .14rem .5rem; transition: all .15s;
}
.bc-mod-cog:hover:not(:disabled) { background: var(--primary); color: #fff; }
.bc-mod-cog:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   CONFIG GOVERNANCE — version history, rollback, import/export
   ============================================================ */
.bc-gov-actions { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; flex-wrap: wrap; }
.bc-versions { display: flex; flex-direction: column; gap: 0; max-height: 320px; overflow-y: auto; }
.bc-ver {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .2rem;
  border-bottom: 1px solid var(--border); position: relative;
}
.bc-ver:last-child { border-bottom: none; }
.bc-ver-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--border); border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border);
}
.bc-ver.current .bc-ver-dot { background: var(--success); box-shadow: 0 0 0 1px var(--success), 0 0 8px color-mix(in srgb, var(--success) 60%, transparent); }
.bc-ver-info { flex: 1; min-width: 0; }
.bc-ver-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bc-ver-top strong { font-size: .82rem; color: var(--primary); }
.bc-ver-label { font-size: .82rem; font-weight: 600; }
.bc-ver-now { font-size: .6rem; font-weight: 700; background: var(--success); color: #fff; padding: .1rem .4rem; border-radius: 99px; }
.bc-ver-meta { font-size: .7rem; color: var(--muted); margin-top: .12rem; }

/* ============================================================
   QR TRANSFER — scan-to-pay confirm + collect pulse
   ============================================================ */
.qr-payee { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 12px; }
.qr-payee-av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,var(--primary),var(--accent,#7c3aed)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.qr-payee strong { font-size: .92rem; }
.qr-verified { margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); padding: .15rem .5rem; border-radius: 99px; }
@keyframes qr-pulse-anim { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 55%,transparent);} 70%{ box-shadow:0 0 0 14px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.qr-pulse { animation: qr-pulse-anim .8s ease-out; border-radius: 12px; }

/* ============================================================
   NEW NATIVE SCREENS — splash, transfer options, deposits,
   upload, profile, FAQs, support, terms (light theme)
   ============================================================ */

/* ---- Splash ---- */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg,#2f6bf4,#1746b8);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { text-align: center; color: #fff; animation: fadeUp .6s ease both; }
.splash-logo {
  width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 24px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.splash-name { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.splash-tag { font-size: .9rem; opacity: .85; margin-top: .25rem; }
.splash-spinner {
  width: 30px; height: 30px; margin: 1.75rem auto 0; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Transfer options ---- */
.tmethod-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: .85rem; }
.tmethod-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.1rem; cursor: pointer; transition: all .18s; box-shadow: var(--shadow);
}
.tmethod-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.tmethod-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .6rem; }
.tmethod-name { font-weight: 700; font-size: .95rem; }
.tmethod-desc { font-size: .72rem; color: var(--muted); margin-top: .1rem; }

/* ---- Deposits ---- */
.dep-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-bottom: 1.1rem; }
.dep-sum-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: .85rem; box-shadow: var(--shadow); }
.dep-sum-card small { font-size: .68rem; color: var(--muted); display: block; }
.dep-sum-card strong { font-size: 1.1rem; }
.deposit-item { display: flex; align-items: center; gap: .8rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: .8rem .9rem; margin-bottom: .65rem; box-shadow: var(--shadow); }
.dep-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* ---- Upload dropzone ---- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  border: 2px dashed var(--border); border-radius: 14px; padding: 1.5rem 1rem;
  cursor: pointer; color: var(--muted); font-size: .82rem; text-align: center; transition: all .18s;
}
.dropzone:hover { border-color: var(--primary); background: var(--bg-card-hover); color: var(--primary); }
.dz-ico { font-size: 1.8rem; }

/* ---- Profile ---- */
.profile-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.profile-av { width: 60px; height: 60px; border-radius: 50%; background: var(--balance-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; flex-shrink: 0; }
.profile-id { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.profile-id strong { font-size: 1.1rem; }
.profile-id .badge-tag { align-self: flex-start; margin-top: .2rem; }
.kv-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.kv-row:last-child { border-bottom: none; }

/* ---- FAQs ---- */
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: .6rem; overflow: hidden; box-shadow: var(--shadow); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: .9rem 1rem; font-weight: 600; font-size: .88rem; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-caret { transition: transform .2s; color: var(--muted); }
.faq-item.open .faq-caret { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; padding: 0 1rem; color: var(--muted); font-size: .83rem; line-height: 1.5; }
.faq-item.open .faq-a { max-height: 240px; padding: 0 1rem 1rem; }

/* ---- Support ---- */
.support-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: .85rem; }
.support-ch { display: flex; align-items: center; gap: .8rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; cursor: pointer; box-shadow: var(--shadow); transition: all .18s; }
.support-ch:hover { transform: translateY(-2px); border-color: var(--primary); }
.support-ico { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.support-ch p { font-size: .74rem; }

/* ---- Terms ---- */
.legal-doc { max-width: 760px; }
.legal-doc h2 { font-size: 1.3rem; margin-bottom: .1rem; }
.legal-doc h3 { font-size: .95rem; margin: 1.1rem 0 .3rem; }
.legal-doc p { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.terms-accept { display: flex; align-items: center; gap: .55rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 600; cursor: pointer; }

/* ============================================================
   SECTION SUB-TAB NAVIGATION (native secondary nav)
   ============================================================ */
.subtab-bar {
  display: flex; gap: .5rem; align-items: center;
  padding: .55rem 1.5rem; flex-shrink: 0;
  overflow-x: auto; overflow-y: hidden;
  background: var(--bg); border-bottom: 1px solid var(--border);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subtab-bar::-webkit-scrollbar { display: none; }
.subtab-bar.hidden { display: none; }
.subtab {
  flex-shrink: 0; padding: .42rem .95rem; border-radius: 99px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--muted); font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .18s;
}
.subtab:hover { color: var(--primary); border-color: var(--primary); }
.subtab.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 4px 12px var(--primary-glow);
}
@media (max-width: 900px) { .subtab-bar { padding: .5rem 1rem; } }

/* ============================================================
   ADAPTIVE DEFAULTS ENGINE — context-aware config
   ============================================================ */
.adp-context { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .85rem; }
.adp-ctx { background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 12px; padding: .55rem .8rem; min-width: 130px; }
.adp-ctx small { font-size: .64rem; color: var(--muted); display: block; }
.adp-ctx strong { font-size: .9rem; }
.adp-risk-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.adp-risk {
  padding: .4rem .9rem; border-radius: 99px; border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--muted); font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .16s;
}
.adp-risk:hover:not(:disabled) { border-color: var(--rc); color: var(--rc); }
.adp-risk.active { background: var(--rc); border-color: var(--rc); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb,var(--rc) 35%,transparent); }
.adp-risk:disabled { opacity: .5; cursor: not-allowed; }
.adp-diff { color: var(--primary); font-weight: 700; }
.adp-row-man td { background: color-mix(in srgb, var(--warning) 7%, transparent); }
.adp-badge { font-size: .6rem; font-weight: 700; padding: .12rem .45rem; border-radius: 99px; }
.adp-badge.ok   { background: rgba(16,185,129,.14); color: var(--success); }
.adp-badge.man  { background: rgba(245,158,11,.16); color: var(--warning); }
.adp-badge.pend { background: rgba(37,99,235,.12); color: var(--primary); }
.adp-unlock { margin-left: .35rem; border: none; background: none; cursor: pointer; color: var(--muted); font-size: .85rem; }
.adp-unlock:hover { color: var(--primary); }
.adp-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .85rem; }

/* ============================================================
   CONFIG HEALTH & INTEGRITY
   ============================================================ */
.health-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .85rem; flex-wrap: wrap; }
.health-score {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: baseline; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: var(--hc);
  border: 3px solid var(--hc);
  background: color-mix(in srgb, var(--hc) 8%, transparent);
}
.health-score small { font-size: .62rem; color: var(--muted); font-weight: 600; }
.health-meta strong { font-size: 1.05rem; }
.health-act { margin-left: auto; display: flex; gap: .5rem; }
.health-list { display: flex; flex-direction: column; gap: .5rem; }
.health-issue {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card-hover); font-size: .82rem;
}
.health-issue.error { border-left: 3px solid var(--danger); }
.health-issue.warn  { border-left: 3px solid var(--warning); }
.health-issue.info  { border-left: 3px solid var(--primary); }
.hi-ico { flex-shrink: 0; }
.hi-msg { flex: 1; line-height: 1.35; }
.hi-adv { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.health-ok { padding: .8rem; text-align: center; color: var(--success); font-weight: 600; font-size: .88rem; background: color-mix(in srgb,var(--success) 8%,transparent); border-radius: 12px; }

/* ============================================================
   SETTINGS FINDER — unified config search
   ============================================================ */
.settings-finder { position: relative; margin-bottom: 1rem; }
.sf-ico { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; opacity: .7; }
.sf-input {
  width: 100%; padding: .7rem 1rem .7rem 2.4rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  font-size: .88rem; box-shadow: var(--shadow); transition: border-color .15s;
}
.sf-input:focus { outline: none; border-color: var(--primary); }
.ss-results {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 60;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(23,42,84,.14); overflow: hidden; max-height: 360px; overflow-y: auto;
}
.ss-results.hidden { display: none; }
.ss-hit {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .65rem .9rem; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s;
}
.ss-hit:last-child { border-bottom: none; }
.ss-hit:hover { background: var(--bg-card-hover); }
.ss-hit-label { font-weight: 600; font-size: .85rem; }
.ss-hit-group { font-size: .7rem; color: var(--muted); margin-top: .1rem; }
.ss-hit-val { font-weight: 700; font-size: .85rem; color: var(--primary); flex-shrink: 0; }
.ss-empty { padding: .9rem; text-align: center; color: var(--muted); font-size: .84rem; }
@keyframes ss-flash-anim { 0%,100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--primary-glow); border-color: var(--primary); } }
.ss-flash { animation: ss-flash-anim 1.2s ease; }

/* ============================================================
   OVERDUE EMI — dynamic late fee (CONFIG.loan.latePenaltyPct)
   ============================================================ */
.loan-overdue {
  margin: .6rem 0; padding: .55rem .75rem; border-radius: 10px;
  font-size: .76rem; line-height: 1.4;
}
.loan-overdue.grace { background: rgba(245,158,11,.12); color: var(--warning); border: 1px solid rgba(245,158,11,.3); }
.loan-overdue.late  { background: rgba(244,63,94,.1); color: var(--danger); border: 1px solid rgba(244,63,94,.3); }
.loan-badge.overdue-badge { background: rgba(244,63,94,.15); color: var(--danger); }

/* ============================================================
   APPROVALS WORKFLOW — pending loan queue
   ============================================================ */
.approval-card {
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--warning);
  border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .85rem; box-shadow: var(--shadow);
}
.apr-head { display: flex; align-items: center; gap: .8rem; }
.apr-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.apr-amt { font-size: 1.15rem; font-weight: 800; flex-shrink: 0; }
.apr-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; margin: .85rem 0; }
.apr-grid > div { background: var(--bg-card-hover); border-radius: 10px; padding: .5rem .6rem; }
.apr-grid small { font-size: .64rem; color: var(--muted); display: block; }
.apr-grid strong { font-size: .88rem; }
.apr-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .65rem; border-top: 1px solid var(--border); }
.apr-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.loan-badge.pending-badge { background: rgba(245,158,11,.16); color: var(--warning); }
@media (max-width: 540px) { .apr-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   STANDING INSTRUCTIONS (scheduled & recurring transfers)
   ============================================================ */
.sched-due-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  color: var(--warning); border-radius: 12px; padding: .6rem .85rem; margin-bottom: .75rem;
  font-size: .82rem; font-weight: 600;
}
.sched-item {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: .65rem .8rem; margin-bottom: .55rem;
}
.sched-item.sched-paused { opacity: .62; }
.sched-tag { font-size: .6rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; }
.sched-tag.due { background: rgba(245,158,11,.16); color: var(--warning); }
.sched-tag.paused { background: var(--border); color: var(--muted); }
.sched-actions { display: flex; gap: .3rem; flex-shrink: 0; }

/* ============================================================
   AUTOMATION SCHEDULER (simulated clock)
   ============================================================ */
.sched-clock { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.sched-clock strong { font-size: 1.05rem; display: block; }
.sched-clock-due { font-size: .8rem; font-weight: 700; padding: .25rem .65rem; border-radius: 99px; background: var(--bg-card-hover); color: var(--muted); }
.sched-clock-due.has-due { background: rgba(245,158,11,.14); color: var(--warning); }
.sched-clock-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============================================================
   MAKER VIEW — own requests pending approval
   ============================================================ */
.mypend-card { border-left: 3px solid var(--warning); }
.mypend-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.mypend-item:last-of-type { border-bottom: none; }
.mypend-item strong { font-size: .9rem; }

/* ============================================================
   TRANSACTION DETAIL + QUICK REPEAT
   ============================================================ */
.tx-tappable { cursor: pointer; transition: background .14s, transform .14s; border-radius: 10px; }
.tx-tappable:hover { background: var(--bg-card-hover); }
.tx-tappable:active { transform: scale(.99); }
.txd-head { text-align: center; padding: .5rem 0 .25rem; }
.txd-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto .6rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700;
}
.txd-icon.debit { background: rgba(244,63,94,.12); color: var(--danger); }
.txd-icon.credit { background: rgba(16,185,129,.12); color: var(--success); }
.txd-amt { font-size: 1.7rem; font-weight: 800; }
.txd-name { font-size: .95rem; color: var(--muted); margin: .1rem 0 .5rem; }

/* ============================================================
   QUICK SEND — frequent payee chips
   ============================================================ */
.quick-send-strip {
  display: flex; gap: .85rem; overflow-x: auto; padding: .25rem .1rem .5rem;
  scrollbar-width: none; margin-bottom: 1rem;
}
.quick-send-strip::-webkit-scrollbar { display: none; }
.qs-chip {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: none; border: none; cursor: pointer; flex-shrink: 0; width: 60px;
}
.qs-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg,#2f6bf4,#1746b8);
  box-shadow: var(--shadow); transition: transform .15s;
}
.qs-av.upi { background: linear-gradient(135deg,#7c3aed,#5b21b6); }
.qs-av.qs-add { background: var(--bg-card); color: var(--primary); border: 1.5px dashed var(--primary); font-size: 1.4rem; box-shadow: none; }
.qs-chip:hover .qs-av { transform: translateY(-3px); }
.qs-chip:active .qs-av { transform: scale(.94); }
.qs-name { font-size: .72rem; color: var(--muted); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   ONBOARDING TOUR (guided spotlight)
   ============================================================ */
.tour-overlay { position: fixed; inset: 0; z-index: 9998; }
.tour-overlay.hidden { display: none; }
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8,14,29,.68);
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}
.tour-tip {
  position: fixed; width: 280px; max-width: calc(100vw - 24px); z-index: 9999;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1rem 1.1rem; box-shadow: 0 18px 50px rgba(0,0,0,.32);
  animation: tipIn .25s ease both;
}
@keyframes tipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tour-step-count { font-size: .68rem; color: var(--primary); font-weight: 700; letter-spacing: .03em; margin-bottom: .25rem; }
.tour-tip strong { font-size: 1.02rem; }
.tour-tip p { font-size: .84rem; color: var(--muted); margin: .35rem 0 .85rem; line-height: 1.5; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* ============================================================
   ACCOUNT STATEMENT
   ============================================================ */
.stmt-periods { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: .85rem; scrollbar-width: none; }
.stmt-periods::-webkit-scrollbar { display: none; }
.stmt-chip {
  flex-shrink: 0; padding: .4rem .9rem; border-radius: 99px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--muted);
  font-size: .82rem; font-weight: 600; transition: all .15s;
}
.stmt-chip:hover { color: var(--primary); border-color: var(--primary); }
.stmt-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px var(--primary-glow); }
.stmt-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; margin-bottom: .5rem; }
.stmt-sum-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: .75rem .85rem; box-shadow: var(--shadow); }
.stmt-sum-cell small { font-size: .66rem; color: var(--muted); display: block; }
.stmt-sum-cell strong { font-size: 1.02rem; }
.stmt-meta { font-size: .76rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .stmt-summary-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   CONVERT PURCHASE TO EMI
   ============================================================ */
.emi-offer {
  display: flex; align-items: center; gap: .7rem; margin-top: 1rem;
  padding: .75rem .85rem; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  transition: all .15s;
}
.emi-offer:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.emi-offer-ico { font-size: 1.4rem; }
.emi-ten-row { display: flex; gap: .45rem; flex-wrap: wrap; }
.emi-ten {
  flex: 1; min-width: 52px; padding: .5rem 0; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-card); color: var(--muted);
  font-weight: 700; font-size: .85rem; transition: all .15s;
}
.emi-ten:hover { border-color: var(--primary); color: var(--primary); }
.emi-ten.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============================================================
   BUSINESS PERFORMANCE — revenue dashboard
   ============================================================ */
.biz-kpis { display: grid; grid-template-columns: repeat(5,1fr); gap: .75rem; }
.biz-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: .85rem .9rem; box-shadow: var(--shadow); }
.biz-kpi small { font-size: .66rem; color: var(--muted); display: block; }
.biz-kpi strong { font-size: 1.15rem; display: block; margin: .15rem 0; }
.biz-kpi span { font-size: .68rem; }
.biz-kpi-hero { background: var(--balance-grad); color: #fff; border: none; }
.biz-kpi-hero small, .biz-kpi-hero span { color: rgba(255,255,255,.85); }
.biz-up { color: #6ee7b7 !important; font-weight: 600; }
.biz-streams { display: flex; flex-direction: column; gap: .7rem; }
.biz-stream-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; margin-bottom: .3rem; }
.biz-bar-track { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.biz-bar { height: 100%; border-radius: 99px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.biz-levers { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: .6rem; }
.biz-lever { background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .15rem; }
.biz-lever span { font-size: .7rem; color: var(--muted); }
.biz-lever strong { font-size: .95rem; }
@media (max-width: 900px) { .biz-kpis { grid-template-columns: repeat(2,1fr); } .biz-kpi-hero { grid-column: 1 / -1; } }

/* ============================================================
   CUSTOMER MEMBERSHIP
   ============================================================ */
.mbr-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.mbr-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 18px;
  padding: 1.25rem; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.mbr-card.active { border-color: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb,var(--mc) 16%,transparent); }
.mbr-top { display: flex; align-items: center; justify-content: space-between; }
.mbr-top strong { font-size: 1.1rem; color: var(--mc); }
.mbr-badge { font-size: .6rem; font-weight: 700; background: var(--mc); color: #fff; padding: .12rem .5rem; border-radius: 99px; }
.mbr-price { font-size: 1.7rem; font-weight: 800; margin: .35rem 0 .1rem; }
.mbr-price small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.mbr-blurb { font-size: .78rem; color: var(--muted); margin-bottom: .85rem; }
.mbr-benefits { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.mbr-benefits li { font-size: .82rem; color: var(--text); }
.mbr-upsell {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; cursor: pointer;
  padding: .8rem .9rem; border-radius: 14px;
  background: color-mix(in srgb, var(--mc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc) 32%, transparent); transition: all .15s;
}
.mbr-upsell:hover { background: color-mix(in srgb, var(--mc) 16%, transparent); }
.mbr-upsell-ico { font-size: 1.5rem; }

/* ============================================================
   MOBILE-NATIVE RESPONSIVE ENHANCEMENTS
   (notch-safe chrome, iOS zoom guard, native scroll feel)
   ============================================================ */

/* Stop iOS from inflating text on orientation change */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Native momentum scroll + no rubber-band chaining to the page behind */
.pages,
.notif-panel,
.chat-msgs,
.bc-versions,
.search-results { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
body { overscroll-behavior-y: none; }

/* Kill the grey tap flash on every interactive element (native feel) */
a, button, .btab, .qa-btn, .mdr-item, .offer-card, [onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  /* --- Notch-safe topbar ---
     status bar is black-translucent, so web content runs under the notch.
     Pad the bar down by the safe-area inset; border-box keeps the content row
     at --topbar-h, and the blurred bar fills the status-bar strip. */
  .topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Dropdowns anchored to the bar follow it below the notch */
  .notif-panel, .search-results {
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px);
  }

  /* --- iOS input-zoom guard ---
     any text field under 16px makes Safari auto-zoom on focus. Force 16px so
     focusing a field never yanks the viewport. */
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
  select, textarea { font-size: 16px; }

  /* Comfortable minimum tap target on the dense nav/icon buttons */
  .icon-btn, .btab, .mdr-item, .qa-btn { min-height: 44px; }

  /* Respect the left/right safe area (landscape / curved screens) */
  .page-inner { padding-left: max(1rem, env(safe-area-inset-left));
                padding-right: max(1rem, env(safe-area-inset-right)); }
}

/* Honour the user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   RESPONSIVE TABLES -> STACKED CARDS (User Mgmt / Audit) on phones
   Each <td> carries data-label (or .at-primary / .at-actions);
   below 640px rows reflow into labelled cards instead of scrolling.
   ============================================================ */
@media (max-width: 640px) {
  .admin-table, .admin-table tbody { display: block; width: 100%; }
  /* visually hide the header row (labels move into each cell) */
  .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .admin-table tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .65rem .85rem;
    margin: .6rem;
    box-shadow: var(--shadow);
  }
  .admin-table tr:hover td { background: transparent; }
  .admin-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .34rem 0; border: none; text-align: right; min-height: 0;
  }
  .admin-table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted); font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .04em;
    text-align: left; flex-shrink: 0;
  }
  /* first cell = card header: full width, no label, bottom rule */
  .admin-table td.at-primary {
    text-align: left;
    border-bottom: 1px solid var(--border);
    padding-bottom: .55rem; margin-bottom: .35rem;
  }
  /* actions = full-width wrapping button row */
  .admin-table td.at-actions { padding-top: .5rem; }
  .admin-table td.at-actions .action-btns { width: 100%; display: flex; flex-wrap: wrap; gap: .4rem; }
  .admin-table td.at-actions .action-btns button { flex: 1 1 auto; }
}

/* ============================================================
   PREMIUM BOTTOM BAR
   Elevated glass slab · glowing active indicator · gradient
   active pill + label · glossier FAB. Applies on every mobile
   page (>=900px hidden, so desktop is untouched).
   ============================================================ */
@media (max-width: 900px) {
  .bottom-nav { height: calc(66px + var(--bn-safe)); }

  /* Floating frosted slab: rounded top, layered lift, deeper blur */
  .bottom-nav::before {
    border-top: none;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -12px 34px rgba(15, 30, 70, .12), inset 0 1px 0 0 rgba(255,255,255,.45);
    -webkit-backdrop-filter: saturate(190%) blur(26px);
    backdrop-filter: saturate(190%) blur(26px);
  }
  [data-theme="dark"] .bottom-nav::before {
    box-shadow: 0 -12px 34px rgba(0,0,0,.5), inset 0 1px 0 0 rgba(255,255,255,.06);
  }
  /* Glassy hairline highlight across the top edge */
  .bottom-nav::after {
    content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    pointer-events: none; z-index: 1;
  }
  [data-theme="dark"] .bottom-nav::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  }

  /* Glowing capsule indicator above the active tab's icon */
  .btab { padding-top: 11px; }
  .btab::before {
    content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    width: 0; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow: 0 0 10px rgba(37, 99, 235, .7);
    opacity: 0; transition: width .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  }
  .btab.active::before { width: 20px; opacity: 1; }

  /* Premium active pill: gradient fill + soft glow + inner ring */
  .btab.active .btab-iw {
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.16));
    box-shadow: 0 6px 16px rgba(37,99,235,.28), inset 0 0 0 1px rgba(37,99,235,.20);
  }
  [data-theme="dark"] .btab.active .btab-iw {
    background: linear-gradient(135deg, rgba(37,99,235,.34), rgba(124,58,237,.30));
  }
  .btab.active .btab-svg { filter: drop-shadow(0 2px 6px rgba(37,99,235,.5)); }

  /* Active label as gradient text */
  .btab.active .btab-lbl {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--primary);
  }

  /* Refined Pay FAB: deeper elevation, halo ring in the bar tint, glossy top */
  .btab-pay {
    top: -22px; width: 58px; height: 58px;
    box-shadow:
      0 10px 24px rgba(37,99,235,.45),
      0 2px 8px rgba(124,58,237,.35),
      0 0 0 6px color-mix(in srgb, var(--bn-glass) 72%, transparent);
  }
  .btab-pay::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 55%);
  }
}

/* ============================================================
   PREMIUM BOTTOM BAR v2 — single GLIDING active indicator
   One glowing capsule physically slides between tabs (JS sets
   the transform). Replaces the per-tab fade capsule.
   ============================================================ */
@media (max-width: 900px) {
  .btab::before { display: none !important; } /* superseded by #btabSlider */

  .btab-slider {
    position: absolute; top: 3px; left: 0;
    width: 26px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow: 0 0 12px rgba(37,99,235,.8), 0 0 4px rgba(124,58,237,.6);
    opacity: 0; z-index: 3; pointer-events: none;
    transform: translateX(0);
    transition: transform .42s cubic-bezier(.5, 1.35, .45, 1), opacity .3s ease;
    will-change: transform;
  }
}

/* ============================================================
   PREMIUM BOTTOM BAR v3 — auto-hide on scroll
   Bar slides down out of view as you scroll a page down, and
   springs back when you scroll up (revealed near the top and on
   every navigation). Gives every page more reading space.
   ============================================================ */
@media (max-width: 900px) {
  body.app-active .bottom-nav {
    transition: transform .34s cubic-bezier(.33, 0, .12, 1);
    will-change: transform;
  }
  /* translateY past the bar height + the FAB that protrudes above it */
  body.app-active .bottom-nav.bn-hidden {
    transform: translateY(calc(100% + 34px));
  }
}
@media (prefers-reduced-motion: reduce) {
  body.app-active .bottom-nav { transition: none; }
}

/* ============================================================
   FLOATING SECTION SUB-TABS (mobile)
   Rises above the bottom nav when a section has multiple
   screens; "reopens" with a staggered animation when you tap
   the section's tab. Replaces the top sub-tab bar on phones.
   ============================================================ */
body:not(.app-active) .bottom-subtabs { display: none !important; }

@media (max-width: 900px) {
  .subtab-bar { display: none !important; } /* replaced by the floating bottom row */

  .bottom-subtabs {
    display: none;
    position: fixed; left: 0; right: 0;
    bottom: calc(66px + var(--bn-safe) + 34px); /* clears the raised Pay FAB */
    z-index: 199;
    gap: .5rem; padding: 0 1rem;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    overflow-x: auto; scrollbar-width: none;
    opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: opacity .26s ease, transform .36s cubic-bezier(.34, 1.56, .64, 1);
  }
  body.app-active .bottom-subtabs { display: flex; }
  .bottom-subtabs::-webkit-scrollbar { display: none; }
  .bottom-subtabs.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .bst-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .95rem .42rem .48rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; white-space: nowrap;
    color: var(--text); cursor: pointer;
    background: var(--bn-glass);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(15, 30, 70, .18);
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s ease, color .2s, background .2s, box-shadow .2s;
  }
  /* Glyph sits in a soft tile tinted to the active section's accent */
  .bst-ico {
    width: 23px; height: 23px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; line-height: 1; flex-shrink: 0;
    background: color-mix(in srgb, var(--sec-a) 15%, transparent);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease;
  }
  .bst-chip.active .bst-ico { background: rgba(255,255,255,.26); transform: scale(1.08); }
  .bst-chip:active { transform: scale(.92); }
  .bst-chip.active {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 10px 24px var(--primary-glow);
  }

  /* Staggered rise — only while "reopening", so within-section
     sub-tab switches just move the highlight (no flicker). */
  .bottom-subtabs.reopening .bst-chip {
    opacity: 0; transform: translateY(12px);
    animation: bst-rise .4s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: calc(var(--i, 0) * .05s + .04s);
  }
  @keyframes bst-rise { to { opacity: 1; transform: translateY(0); } }
  /* icon tile gives a little pop as each chip lands */
  .bottom-subtabs.reopening .bst-ico {
    animation: bst-ico-pop .46s cubic-bezier(.34, 1.56, .64, 1) backwards;
    animation-delay: calc(var(--i, 0) * .05s + .1s);
  }
  @keyframes bst-ico-pop { 0% { transform: scale(.45); } 65% { transform: scale(1.15); } 100% { transform: scale(1); } }

  /* Room so page content clears the floating sub-tabs — only while they're
     actually open; the space is reclaimed when they auto-collapse. */
  body.app-active .pages { transition: padding-bottom .3s ease; }
  body.app-active.subtabs-open .pages {
    padding-bottom: calc(150px + var(--bn-safe));
  }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-subtabs { transition: opacity .2s ease; }
  .bottom-subtabs.reopening .bst-chip { animation: none; opacity: 1; transform: none; }
  .bottom-subtabs.reopening .bst-ico { animation: none; }
}

/* ============================================================
   HD / RETINA VISUAL QUALITY
   Crisper type, precise icon edges, and true hairline dividers
   on 2x+ displays (a 1px border = 2-3 device px on Retina and
   reads as heavy). Font smoothing applies everywhere; hairlines
   only kick in on high-density screens.
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Vector icons stay razor-sharp at any size / zoom */
svg { shape-rendering: geometricPrecision; }
.btab-svg, .qa-icon svg, .nav-icon svg { shape-rendering: geometricPrecision; }
/* Crisp compositing for the animated premium chrome (no blurry sub-pixel edges) */
.bottom-nav, .btab-slider, .btab-pay, .bottom-subtabs, .balance-card {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* True 1-device-pixel hairlines for the chrome + dividers */
  .topbar { border-bottom-width: 0.5px; }
  .subtab, .bst-chip, .more-drawer, .pay-dial,
  .notif-panel, .search-results, .card { border-width: 0.5px; }
  .admin-table th, .admin-table td { border-bottom-width: 0.5px; }
  .subtab-bar { border-bottom-width: 0.5px; }
  .bottom-subtabs .bst-chip { border-width: 0.5px; }
  /* slightly tighter letter-spacing reads cleaner at high density */
  .balance-amount { letter-spacing: -0.015em; }
}

/* On 3x screens, go to a genuine 1px = 0.33 device-px hairline */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .subtab, .bst-chip, .card, .more-drawer,
  .admin-table th, .admin-table td { border-width: 0.33px; }
}

/* ============================================================
   WIDE-GAMUT (Display-P3) GRADIENT BOOST
   On P3-capable screens (modern iPhone/iPad/Mac), re-state the
   brand gradients in display-p3 so blues/violets/ambers reach
   beyond sRGB for richer, deeper colour. sRGB stays the default.
   ============================================================ */
@supports (color: color(display-p3 1 0 0)) {
  :root {
    --p3-blue:   color(display-p3 0.13 0.39 0.95);
    --p3-amber:  color(display-p3 0.98 0.62 0.00);
    --p3-violet: color(display-p3 0.49 0.20 0.96);
    --p3-rose:   color(display-p3 0.97 0.22 0.36);
    --p3-orange: color(display-p3 0.99 0.45 0.05);
  }

  /* Balance hero card (per theme) */
  [data-theme="light"] {
    --balance-grad: linear-gradient(135deg,
      color(display-p3 0.18 0.43 0.98), color(display-p3 0.10 0.31 0.80), color(display-p3 0.06 0.27 0.74));
  }
  [data-theme="dark"] {
    --balance-grad: linear-gradient(135deg,
      color(display-p3 0.10 0.22 0.55), color(display-p3 0.10 0.31 0.80), color(display-p3 0.14 0.39 0.95));
  }

  /* Premium bottom-bar chrome */
  .btab-pay { background: linear-gradient(135deg, var(--p3-blue) 0%, var(--p3-violet) 100%); }
  .btab-pay.dial-open { background: linear-gradient(135deg, var(--p3-rose) 0%, var(--p3-orange) 100%); }
  .btab.active .btab-iw {
    background: linear-gradient(135deg,
      color(display-p3 0.13 0.39 0.95 / .20), color(display-p3 0.49 0.20 0.96 / .18));
  }
  .btab-slider,
  .btab.active .btab-lbl,
  .ref-prog-bar { background: linear-gradient(90deg, var(--p3-blue), var(--p3-amber)); }
  .bst-chip.active { background: linear-gradient(135deg, var(--p3-blue), var(--p3-amber)); }

  /* Splash + auth hero */
  .splash { background: linear-gradient(160deg, color(display-p3 0.18 0.43 0.98), color(display-p3 0.06 0.27 0.74)); }
}

/* ============================================================
   PER-SECTION ACCENT THEMING (mobile bottom bar)
   The active indicator, icon, pill, label and floating sub-tab
   chip adopt the colour of the current section, so each area of
   the app feels distinct. Driven by body[data-section] (JS).
   FAB stays constant brand blue->violet for recognisability.
   ============================================================ */
:root { --sec-a:#2563eb; --sec-b:#7c3aed; --sec-glow:rgba(37,99,235,.7); }
body[data-section="Home"]     { --sec-a:#2563eb; --sec-b:#6366f1; --sec-glow:rgba(37,99,235,.7); }
body[data-section="Transfer"] { --sec-a:#06b6d4; --sec-b:#2563eb; --sec-glow:rgba(6,182,212,.7); }
body[data-section="Cards"]    { --sec-a:#8b5cf6; --sec-b:#d946ef; --sec-glow:rgba(139,92,246,.7); }
body[data-section="More"]     { --sec-a:#f59e0b; --sec-b:#f43f5e; --sec-glow:rgba(245,158,11,.7); }

@media (max-width: 900px) {
  .btab-slider {
    background: linear-gradient(90deg, var(--sec-a), var(--sec-b));
    box-shadow: 0 0 12px var(--sec-glow), 0 0 4px var(--sec-glow);
    transition: transform .42s cubic-bezier(.5,1.35,.45,1), opacity .3s ease, box-shadow .35s ease;
  }
  .btab.active { color: var(--sec-a); transition: color .35s ease; }
  .btab.active .btab-iw {
    background: linear-gradient(135deg, color-mix(in srgb, var(--sec-a) 18%, transparent), color-mix(in srgb, var(--sec-b) 16%, transparent));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--sec-a) 28%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--sec-a) 20%, transparent);
    transition: box-shadow .35s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .btab.active .btab-svg { filter: drop-shadow(0 2px 6px var(--sec-glow)); transition: filter .35s ease, stroke-width .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
  .btab.active .btab-lbl {
    background: linear-gradient(90deg, var(--sec-a), var(--sec-b));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--sec-a);
  }
  .bst-chip.active {
    background: linear-gradient(135deg, var(--sec-a), var(--sec-b));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--sec-a) 35%, transparent);
  }
}

/* P3 boost for the per-section accents (chrome auto-upgrades via the vars) */
@supports (color: color(display-p3 1 0 0)) {
  body[data-section="Home"]     { --sec-a: color(display-p3 0.13 0.39 0.95); --sec-b: color(display-p3 0.40 0.42 0.98); --sec-glow: color(display-p3 0.13 0.39 0.95 / .7); }
  body[data-section="Transfer"] { --sec-a: color(display-p3 0.00 0.70 0.85); --sec-b: color(display-p3 0.13 0.39 0.95); --sec-glow: color(display-p3 0.00 0.70 0.85 / .7); }
  body[data-section="Cards"]    { --sec-a: color(display-p3 0.55 0.36 0.97); --sec-b: color(display-p3 0.85 0.18 0.93); --sec-glow: color(display-p3 0.55 0.36 0.97 / .7); }
  body[data-section="More"]     { --sec-a: color(display-p3 0.98 0.62 0.00); --sec-b: color(display-p3 0.97 0.22 0.36); --sec-glow: color(display-p3 0.98 0.62 0.00 / .7); }
}

/* Dark-theme pill must also follow the section accent (beats the
   earlier [data-theme="dark"] .btab.active .btab-iw override). */
@media (max-width: 900px) {
  [data-theme="dark"] .btab.active .btab-iw {
    background: linear-gradient(135deg, color-mix(in srgb, var(--sec-a) 34%, transparent), color-mix(in srgb, var(--sec-b) 30%, transparent));
  }
}

/* ============================================================
   BOTTOM-NAV AMBIENT AURA
   A soft, section-tinted glow blooms behind the active tab's
   icon — makes the whole bar feel lit by the current section.
   ============================================================ */
@media (max-width: 900px) {
  .btab { isolation: isolate; }
  .btab::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: 0; left: 50%; transform: translateX(-50%) scale(.4);
    width: 52px; height: 40px; border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--sec-glow), transparent 72%);
    filter: blur(7px);
    opacity: 0;
    transition: opacity .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), background .35s ease;
  }
  .btab.active::after { opacity: .45; transform: translateX(-50%) scale(1); }
  /* keep the icon + label above the aura */
  .btab .btab-iw, .btab .btab-lbl { position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btab::after { transition: opacity .2s ease; }
}

/* ============================================================
   BOTTOM-NAV ENTRANCE
   On sign-in the bar slides up and the Pay FAB pops in, instead
   of snapping into place. One-shot (no fill) so it never fights
   the auto-hide transform afterwards.
   ============================================================ */
@media (max-width: 900px) {
  body.app-active .bottom-nav { animation: bn-enter .55s cubic-bezier(.34, 1.4, .5, 1); }
  @keyframes bn-enter {
    from { transform: translateY(108%); opacity: .35; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  body.app-active .btab-pay { animation: fab-pop .5s cubic-bezier(.34, 1.7, .5, 1) .22s backwards; }
  @keyframes fab-pop {
    0%   { transform: scale(.3); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
  }
  /* sub-tabs and slider settle in just after the bar lands */
  body.app-active .btab-slider { animation: bn-fade .4s ease .35s backwards; }
  @keyframes bn-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  body.app-active .bottom-nav,
  body.app-active .btab-pay,
  body.app-active .btab-slider { animation: none; }
}

/* ============================================================
   BOTTOM-TAB LONG-PRESS QUICK MENU
   Press-and-hold a tab → a thumb-anchored shortcut popover with
   a downward arrow pointing at the tab. Section-accent tinted.
   ============================================================ */
.btab-quick-backdrop { position: fixed; inset: 0; z-index: 319; background: transparent; }
.btab-quick {
  position: fixed; z-index: 320;
  min-width: 184px; max-width: 70vw; padding: .4rem;
  background: var(--bn-glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 30, 70, .30);
  transform-origin: bottom center;
  opacity: 0; transform: translateY(10px) scale(.94);
  transition: opacity .2s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.btab-quick.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.btab-quick-arrow {
  position: absolute; bottom: -6px; left: var(--arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 13px; height: 13px; background: var(--bn-glass);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.bq-item {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .58rem .65rem; border: none; background: none; cursor: pointer;
  color: var(--text); font-size: .86rem; font-weight: 600; text-align: left;
  border-radius: 11px;
  opacity: 0; transform: translateX(-6px);
  animation: bq-in .28s ease forwards; animation-delay: calc(var(--qi, 0) * .04s + .05s);
  transition: background .15s ease, transform .12s ease;
}
@keyframes bq-in { to { opacity: 1; transform: none; } }
.bq-item:active { background: color-mix(in srgb, var(--sec-a) 16%, transparent); transform: scale(.98); }
.bq-ico {
  width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; background: color-mix(in srgb, var(--sec-a) 15%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .btab-quick { transition: opacity .15s ease; }
  .bq-item { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   BOTTOM-NAV RESPONSIVE TUNING
   Small phones: keep the 5-tab row + chips comfortable.
   Landscape / short viewports: compact, icon-only bar so it
   doesn't eat scarce vertical space. Heights cascade to the
   floating sub-tabs and content padding so nothing drifts.
   ============================================================ */

/* ---- Very small phones (<=360px) ---- */
@media (max-width: 360px) {
  .btab-lbl { font-size: .55rem; letter-spacing: 0; }
  .btab-svg { width: 19px; height: 19px; }
  .btab-iw { width: 40px; height: 28px; }
  .btab-pay { width: 52px; height: 52px; top: -20px; }
  .bst-chip { font-size: .74rem; padding: .38rem .7rem .38rem .42rem; gap: .35rem; }
  .bst-ico { width: 20px; height: 20px; font-size: .78rem; }
  .btab-quick { min-width: 168px; }
}

/* ---- Landscape phones / short viewports: compact icon-only bar ---- */
@media (max-width: 900px) and (max-height: 470px) and (orientation: landscape) {
  .bottom-nav { height: calc(50px + var(--bn-safe)); }
  .btab { padding-top: 7px; }
  .btab-lbl { display: none; }                 /* icon-only to reclaim vertical space */
  .btab-iw { height: 30px; }
  .btab-pay { top: -15px; width: 48px; height: 48px; }
  .btab-slider { top: 2px; }
  .btab::after { top: -1px; height: 34px; }
  body.app-active .pages { padding-bottom: calc(56px + var(--bn-safe)); }
  /* keep the floating sub-tabs glued just above the shorter bar */
  .bottom-subtabs { bottom: calc(50px + var(--bn-safe) + 26px); }
  body.app-active.subtabs-open .pages { padding-bottom: calc(116px + var(--bn-safe)); }
  .bst-chip { padding: .34rem .8rem .34rem .4rem; }
}

/* ============================================================
   NO HORIZONTAL OVERFLOW  (fixes bottom bar + content cut off)
   A flex child defaults to min-width:auto and can be forced wider
   than the screen by its content, which pushes the whole layout
   (and the fixed bottom bar) past the viewport edge. Clamp it so
   the 5-tab bar always fits and nothing is clipped on the right.
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
.app-shell { max-width: 100vw; overflow-x: hidden; }
.main-area { min-width: 0; max-width: 100%; }
.pages { min-width: 0; }
.page, .page-inner { min-width: 0; max-width: 100%; }

@media (max-width: 900px) {
  .pages { overflow-x: hidden; }
  .bottom-nav,
  .bottom-subtabs { left: 0; right: 0; width: 100%; max-width: 100vw; }
  /* never let a card/grid/flex row spill past the screen */
  .page-inner > *, .card { max-width: 100%; }
}

/* ===== Multi-SMTP manager (admin) ===== */
.smtp-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .25rem; border-bottom: 1px solid var(--border);
}
.smtp-row:last-child { border-bottom: none; }
.smtp-main { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; }
.smtp-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; }
.smtp-dot.on  { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.smtp-dot.off { background: var(--muted); }
.smtp-prio {
  font-size: .64rem; font-weight: 800; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: .1rem .4rem; border-radius: 99px; vertical-align: middle;
}
.smtp-actions { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.smtp-actions .icon-btn { font-size: .95rem; padding: .3rem .4rem; }
@media (max-width: 540px) {
  .smtp-row { flex-direction: column; align-items: stretch; }
  .smtp-actions { justify-content: flex-end; }
}

/* ===== Self-hosted CAPTCHA (login / register) ===== */
.captcha-row { display: flex; align-items: center; gap: .5rem; }
.captcha-img {
  height: 48px; width: 150px; flex-shrink: 0; object-fit: cover;
  border: 1px solid var(--border); border-radius: 8px; background: #eef2f9;
}
.captcha-refresh {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--primary); font-size: 1.15rem; cursor: pointer; line-height: 1;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .15s;
  -webkit-tap-highlight-color: transparent;
}
.captcha-refresh:hover { background: var(--bg-card-hover); }
.captcha-refresh:active { transform: rotate(-180deg) scale(.9); }
.captcha-input { flex: 1; min-width: 0; letter-spacing: .12em; font-weight: 700; }