:root{
  --bg:#0c0907;--bg2:#16110a;
  --glass:rgba(18,18,22,0.65);--glass2:rgba(255,255,255,0.085);--moc-bg:rgba(255,255,255,0.04);--moc-bd:rgba(255,255,255,0.12);--glass3:rgba(255,255,255,0.13);
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.16);
  --accent:#f2741d;--accent2:#ff9a4d;--accent3:#ffb877;
  --green:#22c55e;--red:#ef4444;--yellow:#f59e0b;
  --text:#ffffff;--text2:#cbdee1;--text3:#8e8e93;
  --r:16px;--r2:22px;--sh:inset 0 1px 0 rgba(255,255,255,0.08),0 8px 32px rgba(0,0,0,0.4);
  --sb:230px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{font-family:'Inter',system-ui,sans-serif;background:radial-gradient(1100px circle at 15% -12%,rgba(242,116,29,0.32),transparent 62%),radial-gradient(980px circle at 94% 110%,rgba(237,106,38,0.26),transparent 60%),radial-gradient(760px circle at 55% 45%,rgba(211,95,16,0.12),transparent 55%),var(--bg);background-attachment:fixed;color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 10% 10%,rgba(242,116,29,0.1) 0%,transparent 50%),radial-gradient(ellipse at 90% 90%,rgba(167,139,250,0.06) 0%,transparent 50%);pointer-events:none;z-index:0}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border)}
.glass2{background:var(--glass2);backdrop-filter:blur(32px) saturate(2);-webkit-backdrop-filter:blur(32px) saturate(2);border:1px solid var(--border2)}
.glass3{background:var(--glass3);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--border2)}

/* Loaders */
.loading-overlay{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}
.page-loader{position:fixed;inset:0;background:rgba(8,9,15,0.75);backdrop-filter:blur(12px);z-index:8000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.page-loader.on{display:flex}
.spin{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.spin-sm{width:16px;height:16px;border:2px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.auth-card{border-radius:32px;padding:44px 40px;width:420px;max-width:100%;box-shadow:var(--sh)}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:6px;justify-content:center}
.logo-icon{width:52px;height:52px;border-radius:16px;background:#0f172a;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(242,116,29,0.35),0 0 24px rgba(0,150,255,0.15),0 4px 16px rgba(0,0,0,0.4);flex-shrink:0}
.logo-icon svg{width:30px;height:30px;overflow:visible}
.logo-name{font-size:28px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#ffb877,#f2741d);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-sub{text-align:center;margin-bottom:26px}
.enc-b{display:inline-flex;align-items:center;gap:5px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.22);color:#4ade80;border-radius:99px;padding:4px 11px;font-size:11px;font-weight:700}
.seg{display:flex;background:rgba(0,0,0,0.25);border-radius:14px;padding:4px;position:relative;margin-bottom:22px}
.seg-track{position:absolute;top:4px;bottom:4px;border-radius:11px;background:var(--glass3);box-shadow:0 2px 10px rgba(0,0,0,0.3);transition:left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none}
.seg-btn{flex:1;padding:9px;text-align:center;border-radius:11px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);transition:color .25s;position:relative;z-index:1;user-select:none}
.seg-btn.on{color:var(--text)}
.auth-msg{padding:11px 14px;border-radius:12px;font-size:13px;margin-bottom:14px;display:none;font-weight:500}
.auth-err{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:#fca5a5}
.auth-ok{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:#86efac}
.forgot-link{font-size:12px;color:var(--accent2);cursor:pointer;text-align:right;display:block;margin-top:6px;font-weight:500}
.rem-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.rem-row input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.rem-row label{font-size:13px;color:var(--text2);cursor:pointer}
.forgot-view{display:none}.forgot-view.on{display:block}
.back-link{font-size:13px;color:var(--accent2);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:5px;margin-bottom:20px}
.countdown{font-size:12px;color:var(--text3);text-align:center;margin-top:10px;min-height:18px}

/* Layout */
.layout{display:flex;min-height:100vh;position:relative;z-index:1}

/* Sidebar */
.sidebar{width:var(--sb);display:flex;flex-direction:column;position:fixed;height:100vh;z-index:20;border-right:1px solid var(--border);transition:width .3s cubic-bezier(.4,0,.2,1)}
.sidebar.collapsed{width:64px}
.sidebar-top{padding:16px 14px 0 14px;flex-shrink:0;overflow:hidden}
.sidebar-logo-row{display:flex;align-items:center;gap:10px;min-width:0;padding-bottom:12px}
.sidebar-logo .logo-icon{width:34px;height:34px;border-radius:10px;flex-shrink:0}
.sidebar-logo .logo-icon svg{width:18px;height:18px}
.sidebar-logo .logo-name{font-size:17px;white-space:nowrap;overflow:hidden;transition:opacity .25s,max-width .3s;max-width:160px}
.sidebar.collapsed .logo-name{opacity:0;max-width:0}
.sidebar-toggle-row{display:none}
.collapse-btn{position:fixed;top:50%;transform:translateY(-50%);left:calc(var(--sb) - 1px);z-index:50;width:20px;height:48px;border-radius:0 10px 10px 0;border:1px solid var(--border);border-left:none;background:var(--glass2);backdrop-filter:blur(16px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text2);transition:left .3s cubic-bezier(.4,0,.2,1),background .2s,color .2s;line-height:1;padding:0}
.collapse-btn:hover{background:var(--glass3);color:var(--accent2)}
nav{flex:1;padding:10px 8px;overflow-y:auto;overflow-x:hidden}
.ni{display:flex;align-items:center;gap:11px;padding:11px 12px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);transition:all .2s;margin:2px 0;border-radius:13px;white-space:nowrap;overflow:hidden}
.ni:hover{background:var(--glass2);color:var(--text)}
.ni.on{color:var(--accent2);font-weight:700;position:relative;z-index:2}
.ni{position:relative;z-index:2}
#userPillBtn{position:relative;z-index:2;transition:color .25s cubic-bezier(.25,.8,.25,1)}
#userPillBtn.on .u-name{color:var(--accent2);font-weight:700}
.nav-pill{position:absolute;left:0;top:0;width:0;height:0;background:linear-gradient(135deg,rgba(242,116,29,0.2),rgba(255,154,77,0.1));border:1px solid rgba(242,116,29,0.22);border-radius:13px;pointer-events:none;z-index:1;opacity:0;will-change:transform,width,height;transition:transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),height .4s cubic-bezier(.25,.8,.25,1),opacity .25s ease,background .25s ease,border-color .25s ease}
.nav-pill.active{opacity:1}
/* Light-mode soften: same accent feel, gentler on bright backgrounds */
.ni-ico{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.ni span.ni-label{transition:opacity .2s,width .3s;overflow:hidden}
.sidebar.collapsed .ni-label{opacity:0;width:0}
.sidebar-bottom{padding:10px 8px;border-top:1px solid var(--border);flex-shrink:0;overflow:hidden}
.user-pill{padding:9px 10px;border-radius:12px;display:flex;align-items:center;gap:9px;overflow:hidden}
.u-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f2741d,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;flex-shrink:0;overflow:hidden}
.u-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.u-name{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;transition:opacity .2s}
.sidebar.collapsed .u-name{opacity:0;width:0}

/* Topbar */
.topbar{position:fixed;top:0;right:0;left:var(--sb);height:56px;z-index:9;display:flex;align-items:center;justify-content:flex-end;padding:0 20px;gap:8px;background:transparent;-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);transition:left .3s cubic-bezier(.4,0,.2,1)}
.topbar.sb-collapsed{left:64px}
.top-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;border:1px solid var(--border);background:var(--glass);transition:all .2s;position:relative;flex-shrink:0}
.top-btn:hover{background:var(--glass2)}
.notif-badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-radius:50%;background:var(--red);color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.signout-btn{padding:6px 14px;border-radius:10px;border:1px solid var(--border);background:var(--glass);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;white-space:nowrap}
.signout-btn:hover{background:rgba(239,68,68,0.12);color:#f87171;border-color:rgba(239,68,68,0.3)}

/* Notif drawer */
.notif-drawer{position:fixed;top:56px;right:0;width:340px;max-height:calc(100vh - 56px);background:var(--glass2);backdrop-filter:blur(32px);border-left:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0 0 0 20px;z-index:500;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--sh)}
.notif-drawer.open{transform:translateX(0)}
.nd-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.nd-header h3{font-size:15px;font-weight:700}
.nd-list{flex:1;overflow-y:auto;padding:8px}
.nd-item{padding:12px 14px;border-radius:12px;margin-bottom:6px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.nd-item:hover{background:var(--glass);border-color:var(--border)}
.nd-item.unread{background:rgba(242,116,29,0.06);border-color:rgba(242,116,29,0.15)}
.nd-item-title{font-size:13px;font-weight:600;margin-bottom:3px}
.nd-item-msg{font-size:12px;color:var(--text2);line-height:1.4}
.nd-item-time{font-size:11px;color:var(--text3);margin-top:4px}
.nd-empty{text-align:center;padding:40px;color:var(--text3);font-size:13px}

/* Main */
.main{margin-left:var(--sb);margin-top:56px;flex:1;padding:24px 28px;min-height:calc(100vh - 56px);transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
.main.sb-collapsed{margin-left:64px}
.page{display:none}.page.on{display:block;animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.pt{font-size:24px;font-weight:800;letter-spacing:-.5px}
.ps{font-size:13px;color:var(--text3);margin-top:3px}
.hr{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* iOS Seg */
.ios-seg{display:inline-flex;background:rgba(0,0,0,0.2);border-radius:12px;padding:3px;position:relative}
.ios-track{position:absolute;top:3px;bottom:3px;border-radius:9px;background:var(--glass3);box-shadow:0 2px 8px rgba(0,0,0,0.25);transition:left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none}
.ios-opt{padding:6px 14px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;border-radius:9px;transition:color .25s;position:relative;z-index:1;user-select:none;white-space:nowrap}
.ios-opt.on{color:var(--text)}

/* Stat cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.sc{border-radius:22px;padding:22px 20px;position:relative;overflow:hidden}
.sc::after{content:'';position:absolute;top:-40px;right:-40px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,0.06);pointer-events:none}
.sc-lb{font-size:11px;text-transform:uppercase;letter-spacing:.9px;margin-bottom:9px;font-weight:700;opacity:.75;color:white}
.sc-v{font-size:22px;font-weight:800;letter-spacing:-.5px;color:white}
.sc-s{font-size:11px;margin-top:5px;opacity:.65;color:white;font-weight:500}
.c-blue{background:linear-gradient(135deg,#c2560d,#f2741d);box-shadow:0 8px 28px rgba(242,116,29,0.38)}
.c-grn{background:linear-gradient(135deg,#065f46,#22c55e);box-shadow:0 8px 28px rgba(34,197,94,0.3)}
.c-red{background:linear-gradient(135deg,#991b1b,#ef4444);box-shadow:0 8px 28px rgba(239,68,68,0.3)}
/* S216 — Net worth hero KPI + header greeting responsive */
.ov-kpis{grid-template-columns:1fr 1fr}
.ov-kpis .sc-hero{grid-column:1/-1;padding:26px 24px}
.ov-kpis .sc-hero .sc-v{font-size:36px}
.ov-kpis .sc-hero .sc-lb{font-size:12px;letter-spacing:1px}
@media (max-width:640px){.ov-kpis .sc-hero .sc-v{font-size:30px}#hdrGreetingDate{display:none}#hdrGreetingText{font-size:13px}}
/* S217 — quick-action chips, empty states, overview rhythm */
.qa-row{display:flex;gap:10px;flex-wrap:wrap}
.qa-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:12px;background:var(--glass2);border:1px solid var(--border2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s ease,border-color .2s ease}
.qa-chip:hover{transform:translateY(-1px);border-color:var(--accent2)}
.qa-chip i{font-size:17px;line-height:1}
.qa-chip.qa-inc i{color:var(--green)}
.qa-chip.qa-exp i{color:var(--red)}
.qa-chip.qa-tr i{color:var(--accent2)}
.ov-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:22px 16px;color:var(--text3)}
.ov-empty-ico{font-size:30px;opacity:.85;margin-bottom:6px}
.ov-empty-tx{font-size:13px;color:var(--text3);max-width:240px;line-height:1.5}
#page-overview.on{display:flex;flex-direction:column;gap:18px}
#page-overview>*{margin-top:0!important;margin-bottom:0!important}

/* Section */
.sec{border-radius:var(--r2);padding:20px 22px;margin-bottom:18px}
.sec-t{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Budget bar */
.bb-bg{height:10px;background:rgba(0,0,0,0.2);border-radius:99px;overflow:hidden}
.bb-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}

/* Charts */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.cw{position:relative;height:210px}

/* Tx list */
.txl{border-radius:var(--r2);overflow:hidden}
.txl-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.txl-hd h3{font-size:14px;font-weight:700}
.tx-day-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 8px 20px;position:sticky;top:0;z-index:2;background:linear-gradient(to bottom,var(--bg2,var(--glass)) 70%,transparent);backdrop-filter:blur(8px)}
.tx-day-header .tx-day-label{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.3px}
.tx-day-header .tx-day-total{font-size:11px;font-weight:600;color:var(--text3);font-variant-numeric:tabular-nums}
/* S299 — footer for the progressively-rendered transaction list. */
.tx-more-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px 20px}
.tx-more-bar .tx-more-count{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.tx-day-header + .txi{border-top:none}
@media screen and (max-width:360px){.tx-day-header{padding:11px 12px 6px 12px}.tx-day-header .tx-day-label{font-size:11px}}
.txi{display:flex;align-items:center;gap:13px;padding:13px 20px;border-bottom:1px solid var(--border);transition:background .15s}
.txi:hover{background:rgba(255,255,255,0.025)}
.txi:last-child{border-bottom:none}
.tx-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 1px rgba(255,255,255,0.05),0 2px 6px rgba(0,0,0,0.3);box-sizing:border-box}
.tx-inf{flex:1;min-width:0}
.tx-nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-mt{font-size:11px;color:var(--text3);margin-top:2px;overflow-wrap:anywhere;min-width:0}
.tx-rt{text-align:right;flex-shrink:0}
.tx-vl{font-size:14px;font-weight:700}
.tx-bs{font-size:11px;color:var(--text3);margin-top:1px}
.inc{color:#4ade80}.exp{color:#f87171}

/* Forms */
.fg{margin-bottom:14px;position:relative}
.fg label{display:block;font-size:12px;color:var(--text2);margin-bottom:6px;font-weight:600}
.fi{width:100%;background:rgba(0,0,0,0.2);border:1px solid var(--border);border-radius:12px;padding:11px 15px;font-size:14px;color:var(--text);outline:none;transition:all .2s;font-family:'Inter',sans-serif}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,116,29,0.14)}
.fi option{background:#1a1d2e;color:#eef2ff}
.iw{position:relative}.iw .fi{padding-right:44px}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);font-size:15px;padding:4px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* Buttons */
.btn{padding:10px 18px;border-radius:12px;border:none;cursor:pointer;font-size:13px;font-weight:700;transition:all .2s;font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:7px}
.bp{background:linear-gradient(135deg,#c2560d,#f2741d);color:white;box-shadow:0 4px 18px rgba(242,116,29,0.38)}
.bp:hover{transform:translateY(-1px);box-shadow:0 7px 24px rgba(242,116,29,0.5)}
.bp:disabled{opacity:.5;cursor:not-allowed;transform:none}
.bg{background:var(--glass);color:var(--text);border:1px solid var(--border);backdrop-filter:blur(12px)}
.bg:hover{background:var(--glass2)}
.bd{background:linear-gradient(135deg,#991b1b,#ef4444);color:white}
.bd:hover{transform:translateY(-1px)}
.bs{padding:7px 14px;font-size:12px;border-radius:10px}
.bxs{padding:5px 10px;font-size:11px;border-radius:8px}
.b-ico{width:34px;height:34px;padding:0;justify-content:center;border-radius:10px}

/* Filter bar */
.fb{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.fs{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:8px 13px;font-size:13px;color:var(--text);outline:none;font-family:'Inter',sans-serif;font-weight:500}
.fs option{background:#1a1d2e;color:#eef2ff}

/* Modal */
.mo{position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.mo.on{display:flex;animation:mfade .2s ease}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.md{border-radius:28px;padding:30px;width:460px;max-width:100%;box-shadow:var(--sh);animation:mup .22s ease}
@keyframes mup{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.md h2{font-size:19px;font-weight:800;margin-bottom:18px}
.tt{display:flex;gap:7px;margin-bottom:16px}
.ttb{flex:1;padding:9px;border-radius:11px;border:1.5px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-size:13px;font-weight:700;transition:all .2s;text-align:center;font-family:'Inter',sans-serif}
.ttb.ai{background:rgba(34,197,94,0.14);border-color:#22c55e;color:#4ade80}
.ttb.ae{background:rgba(239,68,68,0.14);border-color:#ef4444;color:#f87171}
.ma{display:flex;gap:9px;margin-top:20px;justify-content:flex-end}
.amd{border-radius:22px;padding:28px;width:340px;max-width:100%;text-align:center}
.amd .a-ico{font-size:38px;margin-bottom:11px}
.amd h3{font-size:17px;font-weight:700;margin-bottom:8px}
.amd p{font-size:13px;color:var(--text2);margin-bottom:18px;line-height:1.55}
/* S173 — unified modal-card look: every popup window shares the glass recipe via tokens */
.mo-c,.mo .md,.mo .amd{background:var(--moc-bg);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border:1px solid var(--moc-bd);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15)}
.aa{display:flex;gap:9px;justify-content:center}
.aa .btn{flex:1;justify-content:center}

/* Settings */
.ss{border-radius:var(--r2);padding:22px;margin-bottom:14px}
.ss h3{font-size:15px;font-weight:700;margin-bottom:16px}
.sr{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.sr:last-child{border-bottom:none}
.sl{font-size:14px;font-weight:500}
.ssb{font-size:12px;color:var(--text3);margin-top:2px}

/* FX */
.fx-pr{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap}
.fx-st{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}
.fx-sc{border-radius:15px;padding:15px;text-align:center}
.fx-sv{font-size:17px;font-weight:800;color:var(--accent2)}
.fx-sl{font-size:11px;color:var(--text3);margin-top:3px;font-weight:500}
.cur-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px}
.cur-row:last-child{border-bottom:none}
.cur-sym{width:34px;height:34px;border-radius:9px;background:rgba(242,116,29,0.12);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--accent2);flex-shrink:0}
.cur-code{font-weight:700;min-width:44px}
.cur-name{color:var(--text2);flex:1;font-size:12px}
.cur-rate{font-weight:600;color:var(--text);text-align:right}

/* Budget cat */
.bc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px;margin-bottom:14px}
.bc-card{border-radius:15px;padding:15px}
.bc-nm{font-size:13px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.bc-fi{width:100%;background:rgba(0,0,0,0.18);border:1px solid var(--border);border-radius:9px;padding:7px 10px;font-size:12px;color:var(--text);outline:none;font-family:'Inter',sans-serif;margin-bottom:6px}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-day-hd{text-align:center;font-size:11px;font-weight:700;color:var(--text3);padding:6px 0}
.cal-cell{border-radius:10px;padding:5px;min-height:60px;cursor:pointer;border:1px solid transparent;transition:all .18s}
.cal-cell:hover{background:var(--glass2);border-color:var(--border2)}
.cal-cell.today{border-color:var(--accent)!important;background:rgba(242,116,29,0.08)}
.cal-cell.other-month{opacity:.3}
.cal-dn{font-size:12px;font-weight:600;margin-bottom:3px;color:var(--text)}
.cal-inc{font-size:10px;font-weight:600;color:#4ade80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-exp{font-size:10px;font-weight:600;color:#f87171;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-nav-title{font-size:16px;font-weight:700}

/* Profile */
.prof-av-wrap{position:relative;width:80px;height:80px;margin:0 auto 16px;cursor:pointer}
.prof-av{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#f2741d,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:white;overflow:hidden}
.prof-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.prof-av-edit{position:absolute;bottom:0;right:0;width:26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid var(--bg);cursor:pointer}
.pf-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.pf-row:last-child{border-bottom:none}
.pf-label{font-size:12px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.pf-val{font-size:14px;font-weight:600}
.pf-pending{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#ffb84d;font-weight:600;line-height:1.5;background:rgba(255,184,77,0.08);border:1px solid rgba(255,184,77,0.22);border-radius:11px;padding:10px 12px;margin:0 0 12px}
.pf-pending-ic{flex-shrink:0;font-size:13px}

/* Hide number spinners globally */
input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Number input wrapper */
.num-wrap{display:flex;align-items:center;gap:6px;width:100%}
.num-wrap input{flex:1;min-width:0;padding:7px 10px;text-align:left}
.num-btns{display:flex;gap:4px;flex-shrink:0}
.num-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--glass);color:var(--text2);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;transition:all .15s;flex-shrink:0;padding:0}
.num-btn:hover{background:var(--glass2);color:var(--text);border-color:var(--border2)}
/* Remove toast box */
.notif-box{display:none!important}

/* Notification dropdown */
.notif-dropdown{position:fixed;top:56px;right:12px;width:320px;max-height:420px;border-radius:18px;z-index:8000;display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px var(--border2);animation:mup .2s ease}
.notif-dropdown.open{display:flex}
.nd-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.nd-hdr-title{font-size:14px;font-weight:700}
.nd-hdr-actions{display:flex;gap:6px}
.nd-scroll{flex:1;overflow-y:auto;max-height:340px}
.nd-row{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.nd-row:last-child{border-bottom:none}
.nd-row:hover{background:rgba(255,255,255,0.04)}
.nd-row.unread{background:rgba(242,116,29,0.05)}
.nd-row-ico{font-size:18px;flex-shrink:0;margin-top:1px}
.nd-row-body{flex:1;min-width:0}
.nd-row-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.nd-row-msg{font-size:12px;color:var(--text2);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-row-time{font-size:10px;color:var(--text3);margin-top:3px;font-weight:500}
.nd-empty{text-align:center;padding:32px;color:var(--text3);font-size:13px}
.cat-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);margin-bottom:6px;cursor:grab;background:var(--glass);transition:all .2s;user-select:none}
.cat-item:active{cursor:grabbing;opacity:.7;transform:scale(.98)}
.cat-item.dragging{opacity:.4;border-style:dashed}
.cat-item.drag-over{border-color:var(--accent);background:rgba(242,116,29,0.08)}
.cat-drag-handle,.acct-drag-handle{touch-action:none;cursor:grab}
.cat-drag-handle{color:var(--text3);font-size:14px;cursor:grab;flex-shrink:0}
.cat-type-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px}
.badge-inc{background:rgba(34,197,94,0.15);color:#4ade80}
.badge-exp{background:rgba(239,68,68,0.15);color:#f87171}

/* Notif toast */
.notif-box{position:fixed;top:72px;right:20px;z-index:9000;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:340px}
.notif{border-radius:16px;padding:14px 16px;pointer-events:all;display:flex;align-items:flex-start;gap:11px;animation:nIn .3s ease forwards;backdrop-filter:blur(20px)}
.notif.out{animation:nOut .3s ease forwards}
@keyframes nIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes nOut{from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}
.n-ico{font-size:18px;flex-shrink:0;margin-top:1px}
.n-title{font-size:13px;font-weight:700;margin-bottom:2px}
.n-msg{font-size:11px;color:var(--text2);line-height:1.4}
.n-close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;line-height:1;padding:0 0 0 6px;flex-shrink:0}
.n-close:hover{color:var(--text)}
.n-bar-wrap{height:2px;border-radius:99px;margin-top:8px;background:rgba(255,255,255,0.12);overflow:hidden}
.n-bar{height:100%;border-radius:99px;width:100%;transition:width 5s linear}

.empty{text-align:center;padding:44px;color:var(--text3)}
.empty-ico{font-size:38px;margin-bottom:10px;opacity:.35}
.period-lbl{font-size:11px;color:var(--text3);font-weight:500}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

@media(max-width:900px){
  :root{--sb:230px}
  .charts-row,.fx-st{grid-template-columns:1fr}.cards3{grid-template-columns:1fr}
}
@media(max-width:640px){.fr{grid-template-columns:1fr}.fx-st{grid-template-columns:1fr 1fr}}

/* ===== Desktop hover-expand sidebar (S12 + S18 topbar sync) ===== */
@media screen and (min-width:769px){
  .sidebar{width:72px!important;overflow:hidden!important;transition:width .3s cubic-bezier(.25,.8,.25,1)!important}
  .sidebar:hover{width:240px!important;box-shadow:10px 0 30px rgba(0,0,0,.25)!important}
  .sidebar .ni-label,.sidebar .logo-name,.sidebar .u-name{opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .2s ease;white-space:nowrap;overflow:hidden}
  .sidebar:hover .ni-label,.sidebar:hover .logo-name,.sidebar:hover .u-name{opacity:1;transform:translateX(0)}
  /* S44: animated typography logo */
  .logo-main-text,.logo-sub-text{opacity:0!important;transform:translateX(-15px)!important;transition:opacity .25s cubic-bezier(.25,.8,.25,1),transform .25s cubic-bezier(.25,.8,.25,1)!important}
  .sidebar:hover .logo-main-text{opacity:1!important;transform:translateX(0)!important}
  .sidebar:hover .logo-sub-text{opacity:1!important;transform:translateX(0)!important;transition-delay:.05s!important}
  /* S18: topbar + main slide in sync with the sidebar via existing transitions */
  .topbar{left:72px!important}
  .sidebar:hover ~ .topbar{left:240px!important}
  .main{margin-left:72px!important;transition:margin-left .3s cubic-bezier(.25,.8,.25,1)!important}
  .sidebar:hover ~ .main{margin-left:240px!important}
  .collapse-btn{display:none!important}
}
/* ===== Mobile bottom tab bar (S11) + topbar pointer-events safety (S19) ===== */
@media screen and (max-width:768px){
  .sidebar{width:100%!important;height:64px!important;position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;flex-direction:row!important;padding:4px 0!important;border-right:none!important;border-top:1px solid var(--border)!important;z-index:9999!important;justify-content:space-around!important;-webkit-backdrop-filter:blur(25px)!important;backdrop-filter:blur(25px)!important}
  .sidebar-top,.sidebar-bottom{display:none!important}
  .sidebar-brand-wrapper{display:none!important}
  .sidebar nav{flex-direction:row!important;justify-content:space-around!important;width:100%!important;padding:0!important;gap:0!important;align-items:center!important}
  .sidebar .ni{flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:6px 4px!important;font-size:9px!important;gap:2px!important;width:auto!important;min-width:0!important;margin:0!important}
  .sidebar .ni-label{font-size:9px!important;opacity:1!important;transform:none!important}
  /* S18: full-width topbar on mobile, no left offset */
  .topbar{left:0!important;right:0!important;width:100%!important;padding:0 12px!important}
  .main{margin-left:0!important;padding-bottom:80px!important;padding-left:12px!important;padding-right:12px!important}
  input.fi,select.fi{min-height:44px;font-size:16px}
  .btn{min-height:40px}
  .collapse-btn{display:none!important}
  #wysemGlobalClock{display:none!important}
  /* S19: keep topbar bg from blocking touches; re-enable on its actual buttons */
  .topbar{pointer-events:none!important}
  .topbar button,.topbar .top-btn,.topbar .signout-btn,.topbar .notif-badge{pointer-events:auto!important}
}

/* ===== Section 5: Apple-style scrollbar for goal list ===== */
#goalsCardsContainer::-webkit-scrollbar{width:6px!important;height:6px!important}
#goalsCardsContainer::-webkit-scrollbar-track{background:transparent!important}
#goalsCardsContainer::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15)!important;border-radius:10px!important;border:1px solid rgba(255,255,255,0.05)!important;transition:background 0.2s ease!important}
#goalsCardsContainer::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.3)!important}
#goalsCardsContainer{scrollbar-width:thin!important;scrollbar-color:rgba(128,128,128,0.25) transparent!important}

/* ===== Floating Pill Nav (theme-adaptive replacement for sidebar) ===== */
.sidebar{display:none!important}
.main{margin-left:0!important;margin-top:0!important;padding-top:80px!important}
.topbar{left:0!important;right:0!important;width:100%!important}
@media screen and (min-width:769px){
  .sidebar:hover ~ .topbar,.sidebar:hover ~ .main{left:0!important;margin-left:0!important}
}
.main{padding-bottom:120px!important}

.fp-nav{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:9999;width:max-content;max-width:calc(100vw - 24px);font-family:Inter,system-ui,sans-serif}
/* S62: smooth slide-down when hidden over modals or on auth page */
.wysem-nav-pill-wrapper{transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .3s ease!important;opacity:1!important}
.wysem-nav-pill-wrapper.hidden-state{transform:translateX(-50%) translateY(140px)!important;opacity:0!important;pointer-events:none!important}
.fp-bar{position:relative;background:rgba(255,255,255,0.05);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--border);border-radius:40px;padding:8px;display:flex;align-items:center;gap:2px;box-shadow:0 10px 35px rgba(0,0,0,0.25),0 1px 3px rgba(0,0,0,0.06)}
.fp-btn{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px 14px;min-width:64px;min-height:56px;border-radius:32px;color:var(--text2);transition:color .2s ease;font-family:inherit}
.fp-btn .fp-ico{font-size:20px;line-height:1}
.fp-btn .fp-lbl{font-size:11px;font-weight:600;margin-top:4px;letter-spacing:-0.1px;color:inherit}
.fp-btn.on{color:var(--accent2)}
.fp-btn.on .fp-lbl{font-weight:700}
.fp-pill{position:absolute;top:8px;left:0;width:0;height:56px;background:linear-gradient(135deg,rgba(242,116,29,0.18),rgba(255,154,77,0.08));border:1px solid rgba(242,116,29,0.22);border-radius:32px;z-index:1;pointer-events:none;opacity:0;will-change:transform,width;transition:transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),opacity .25s ease,background .25s ease,border-color .25s ease}
.fp-pill.active{opacity:1}

/* Light-mode adaptive glass — gentle on bright backgrounds */

/* Compact phone layout — labels stay visible but everything tightens */
@media screen and (max-width:560px){
  .fp-nav{gap:8px;bottom:14px;max-width:calc(100vw - 16px)}
  .fp-bar{padding:6px;border-radius:32px;gap:0}
  .fp-btn{min-width:50px;padding:6px 8px;min-height:48px;border-radius:26px}
  .fp-btn .fp-ico{font-size:17px}
  .fp-btn .fp-lbl{font-size:9px;margin-top:2px}
  .fp-pill{top:6px;height:48px;border-radius:26px}
  
}
@media screen and (max-width:380px){
  .fp-btn .fp-lbl{display:none}
  .fp-btn{min-width:40px;padding:6px}
}

/* S71: Text truncation utility for transaction descriptions */
.tx-truncate-description{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media screen and (min-width:769px){.tx-truncate-description{max-width:550px}}

/* S77: Scrollable notification drawer with Apple-thin glass scrollbar */
#notifList{max-height:60vh;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
#notifList::-webkit-scrollbar{width:5px}
#notifList::-webkit-scrollbar-track{background:transparent}
#notifList::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.25);border-radius:10px}
#notifList::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,0.45)}

/* ── S86.1 — Lock per-button width so the floating nav capsule stays the same physical size across languages (EN/ZH/etc.). Wrapper rules left untouched so .fp-search keeps its slot and the JS-driven .fp-pill highlight still recalcs cleanly. */
.fp-btn{width:88px!important}
.fp-lbl{white-space:nowrap!important}
@media screen and (max-width:600px){
  .fp-btn{width:64px!important}
}
/* S150 — Very narrow phones (e.g. Z Flip 6 ~360px CSS width): the fixed 64px lock made
   the 5 tabs + the round search button overflow, clipping the search button and forcing
   labels off. Drop the lock so buttons shrink to content; keep labels down to ~330px,
   then go icon-only so the search button always stays on screen. */
@media screen and (max-width:400px){
  .fp-btn{width:auto!important;min-width:0!important;padding:7px 9px!important}
  .fp-btn .fp-lbl{display:block!important}
  .fp-nav{gap:6px;max-width:calc(100vw - 10px)}
  .fp-bar{padding:5px}
  
}
@media screen and (max-width:330px){
  .fp-btn .fp-lbl{display:none!important}
  .fp-btn{padding:7px!important}
  
}

/* ── S86.2 — Calendar cell overflow: only the cash rows clip, day numbers (.cal-dn) untouched. Mobile shrinks just the cash labels. */
/* S88 — The grid item itself (.cal-cell) must be width-constrained, otherwise the child's
   ellipsis has nothing to clip against and the cell expands past its 1fr column. */
.cal-cell{min-width:0!important;overflow:hidden!important}
.cal-inc,.cal-exp{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media screen and (max-width:480px){
  .cal-inc,.cal-exp{font-size:8px!important;letter-spacing:-0.3px!important}
}

/* S89 — Legal modal: show one language at a time, driven by <html lang>. */
.legal-lang{display:none}
html[lang="en"] .legal-en{display:block}
html[lang="zh"] .legal-zh{display:block}
html[lang="id"] .legal-id{display:block}
html[lang="ja"] .legal-ja{display:block}

/* S90 — Disabled state for primary buttons (used by the legal-consent gate). */
.btn[disabled],.btn:disabled{opacity:0.45;cursor:not-allowed;filter:grayscale(0.3)}
.btn[disabled]:hover,.btn:disabled:hover{transform:none}

/* ─── S92 — Apple Bento App-Tile Icon Badge ───────────────────────────────
   Continuous-radius squircle with dark slate fill and subtle glass trim.
   Used on standalone surfaces (notification bell, future settings shortcuts).
   NOT applied to the floating nav pill (it IS the tile metaphor already)
   nor to transaction row icons (those need their income/expense color coding). */
.apple-app-icon-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:#1c1c1e;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.05),0 2px 6px rgba(0,0,0,0.3);
  box-sizing:border-box;
  transition:background .2s ease,transform .1s ease;
}
.apple-app-icon-badge i{font-size:18px;color:#f2f2f7;line-height:1}
button:hover .apple-app-icon-badge{background:#2c2c2e}

/* S92 — Theme toggle visually hidden but logic preserved (toggleTheme(),
   body.light class, S.theme state, user_settings.theme column). Re-enable
   by removing this one rule when accessibility/light-mode needs return. */
#themeBtn{display:none}

/* S92 — Bell becomes a transparent shell so its inner .apple-app-icon-badge
   is the visible chrome. Keeps .top-btn's position:relative so .notif-badge
   anchors correctly in the corner. */
#bellBtn{background:transparent;border:none;padding:0}

/* S117 — FAQ accordion polish. Inherits all surface styling from the inline
   styles on each <details>; this rule only handles the chevron rotation when
   open + a subtle border-color shift to indicate active row. */
.faq-item[open] {
  border-color: rgba(242,116,29,0.32) !important;
  background: rgba(242,116,29,0.045) !important;
}
.faq-item[open] .faq-chev {
  transform: rotate(180deg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
/* S117 — FAQ trigger button mirrors #bellBtn's transparent shell so the inner
   apple-app-icon-badge is the visible chrome. */
#faqHdrBtn { background: transparent; border: none; padding: 0; }

/* S118 — Dashboard loading spinner. Used by #zfDashLoader during the post-auth
   data pipeline. Pure CSS, no external assets — ~600 bytes. */
.zf-dash-spinner {
  width: 52px;
  height: 52px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #f2741d;
  border-radius: 50%;
  animation: zfDashSpin 0.9s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
  box-shadow: 0 0 24px rgba(242,116,29,0.25);
}
@keyframes zfDashSpin {
  to { transform: rotate(360deg); }
}

/* S119 — FAQ accordion overrides. The .amd modal class sets text-align:center
   for its body content, which we don't want bleeding into the FAQ rows. Force
   left alignment for both questions and answers, and enable pre-line so any
   \n in the answer string (e.g. numbered steps) renders as a real line break. */
#faqList .faq-item summary > span:first-child {
  text-align: left;
  flex: 1;
}
#faqList .faq-item p {
  text-align: left !important;
  white-space: pre-line;
}

/* S119 — ToC modal scrollbar matches the savings-goals/notif scrollbar style.
   The default Webkit bar (wide white) clashed with the dark glass aesthetic;
   this gives it the same thin, dim track + slightly brighter thumb on hover.
   S120 — Added !important to defeat the global ::-webkit-scrollbar rule at
   line 331 which was overriding our scoped styles.
   S121 — Bumped to html-body specificity. Some Chromium variants ignore the
   plain ID selector for scrollbar pseudo-elements when there are competing
   global rules; the longer selector path forces our styles to win.
   Also forced the scroll body's overall scrollbar-color (Firefox) and removed
   the inline scrollbar-width:thin hint via CSS override. */
html body #wysemLegalScrollBody {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.15) transparent !important;
}
html body #wysemLegalScrollBody::-webkit-scrollbar { width: 6px !important; height: 6px !important; background: transparent !important; }
html body #wysemLegalScrollBody::-webkit-scrollbar-track { background: transparent !important; border: none !important; }
html body #wysemLegalScrollBody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: background 0.2s ease !important;
}
html body #wysemLegalScrollBody::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}
html body #wysemLegalScrollBody::-webkit-scrollbar-corner { background: transparent !important; }

/* S119 — 6-box MFA digit widget. One row of six square inputs, each 48×56px on
   desktop and proportionally smaller on phones. Focused box gets the iOS blue
   accent — matches the rest of the app's focus-state language. */
.mfa-code-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.mfa-digit {
  width: 46px;
  height: 56px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  border: 1px solid rgba(128, 128, 128, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
  caret-color: #f2741d;
}
.mfa-digit:focus {
  border-color: #f2741d;
  background: rgba(242, 116, 29, 0.08);
  transform: translateY(-1px);
}
.mfa-digit:not(:placeholder-shown), 
.mfa-digit[value]:not([value=""]) {
  border-color: rgba(242, 116, 29, 0.45);
}
@media (max-width: 420px) {
  .mfa-code-row { gap: 6px; }
  .mfa-digit { width: 40px; height: 50px; font-size: 21px; border-radius: 9px; }
}

/* ── S135 — WysemConfirm: compact unified confirm dialog system ─────────────
   A lightweight Promise-based confirmation overlay system. Used to replace
   simple confirm-style .mo modals (signOut, delete tx, delete category,
   disable MFA, etc.) with a higher-density centered card layout.

   IMPORTANT INVARIANTS:
   - z-index 100002: above recovery overlay (99999) and boosted MFA modal
     (100001) so confirms always appear on top regardless of context
   - All colors via theme tokens (--bg, --glass, --border, --text, --text2,
     --accent, --red, --sh) so light/dark mode and future theme tweaks work
   - No hardcoded fonts — inherits the global typography stack
   - Used ONLY for confirm dialogs; complex form modals stay on the .mo class
   ─────────────────────────────────────────────────────────────────────────── */
.wm-cf-back {
  position: fixed; inset: 0; z-index: 100002;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.wm-cf-back.on { opacity: 1; pointer-events: auto; }
.wm-cf-panel {
  background: var(--moc-bg);
  backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid var(--moc-bd);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  box-sizing: border-box;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.wm-cf-back.on .wm-cf-panel { transform: scale(1); }
.wm-cf-ico { font-size: 32px; margin-bottom: 10px; line-height: 1; }
.wm-cf-title {
  color: var(--text);
  font-size: 16px; font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.3px;
  line-height: 1.4;
}
.wm-cf-body {
  color: var(--text2);
  font-size: 12.5px; font-weight: 400;
  line-height: 1.6;
  margin: 0 0 24px 0;
  padding: 0 4px;
}
.wm-cf-body strong { color: var(--text); font-weight: 700; }
.wm-cf-body em { color: var(--text3); font-style: normal; }
.wm-cf-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.wm-cf-actions--single { grid-template-columns: 1fr; }
.wm-cf-btn {
  border: none;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  padding: 12px 0;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.wm-cf-btn:active { filter: brightness(0.85); }
.wm-cf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wm-cf-btn-sec {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text);
}
.wm-cf-btn-dest { background: var(--red); color: #fff; }
.wm-cf-btn-pri  { background: var(--accent); color: #fff; }
/* S150 — When a dialog has only one button (hideCancel, e.g. the calendar "Add on …"
   action), span the full row so a long label stays on one line instead of wrapping. */
.wm-cf-btn { white-space: nowrap; }
.wm-cf-actions:has(.wm-cf-btn:only-child) { grid-template-columns: 1fr; }

/* ── S156: Transaction filter revamp ── */
.fb2{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.fsearch{position:relative;display:flex;align-items:center}
.fsearch-ico{position:absolute;left:12px;font-size:13px;opacity:.6;pointer-events:none}
.fsearch input{width:100%;box-sizing:border-box;padding:10px 34px;border-radius:12px;border:1px solid var(--border);background:var(--glass);color:var(--text);font-size:13px;outline:none}
.fsearch input:focus{border-color:var(--accent2)}
.fsearch-clr{position:absolute;right:8px;width:24px;height:24px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:12px;border-radius:50%}
.fsearch-clr:hover{background:rgba(128,128,128,.15)}
.fseg{display:inline-flex;background:rgba(128,128,128,.1);border-radius:10px;padding:3px;gap:2px;align-self:flex-start;max-width:100%}
.fseg-b{flex:1;border:none;background:transparent;color:var(--text2);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:all .15s}
.fseg-b.active{background:var(--accent);color:#fff}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{border:1px solid var(--border);background:var(--glass);color:var(--text2);font-size:12px;font-weight:500;padding:6px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:all .15s}
.fchip.active{background:rgba(242,116,29,.12);border-color:var(--accent2);color:var(--accent2);font-weight:600}
.fcustom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fcustom .fs{flex:1;min-width:130px}
.frow2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fmore{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--glass);color:var(--text2);font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:10px;cursor:pointer}
.fmore.active{border-color:var(--accent2);color:var(--accent2)}
.fcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px}
.fclear{border:none;background:transparent;color:var(--red);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 4px}
.fmorepanel{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:rgba(128,128,128,.05);border:1px solid var(--border);border-radius:12px}
.fmorepanel .fs{flex:1;min-width:140px}
.famt{display:flex;align-items:center;gap:8px;flex:1 1 100%}
.famt .fs{flex:1;min-width:0}

/* ── S156: Quick-add templates ── */
.tpl-section{margin:0 0 14px}
.tpl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tpl-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.tpl-save{border:1px solid var(--border);background:var(--glass);color:var(--accent2);font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer}
.tpl-save:hover{border-color:var(--accent2)}
.tpl-chips{display:flex;flex-wrap:wrap;gap:7px}
.tpl-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(128,128,128,.08);border:1px solid var(--border);border-radius:999px;padding:6px 8px 6px 11px;cursor:pointer;font-size:12.5px;color:var(--text);transition:all .15s;max-width:100%}
.tpl-chip:hover{border-color:var(--accent2);background:rgba(242,116,29,.08)}
.tpl-chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.tpl-chip-dot.inc{background:var(--green)}
.tpl-chip-dot.exp{background:var(--red)}
.tpl-chip-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.tpl-chip-x{border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:11px;width:18px;height:18px;border-radius:50%;flex-shrink:0}
.tpl-chip-x:hover{background:rgba(239,68,68,.15);color:var(--red)}

/* ── S158: font parity for new controls, favourites scrollbar + inline error ── */
.fsearch input,.fseg-b,.fchip,.fmore,.fclear,.tpl-chip,.tpl-save,.tpl-chip-x,.tpl-chip-lbl,.tpl-err{font-family:'Inter',sans-serif}
.tpl-chips{max-height:104px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(128,128,128,0.25) transparent}
.tpl-chips::-webkit-scrollbar{width:5px}
.tpl-chips::-webkit-scrollbar-track{background:transparent}
.tpl-chips::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.25);border-radius:10px}
.tpl-err{display:none;font-size:12px;color:var(--red);margin-top:8px;font-weight:600;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);border-radius:8px;padding:8px 11px}

/* S165 — Accounts / Wallets */
.acct-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.acct-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:background .15s ease}
.acct-row:hover{background:rgba(255,255,255,0.07)}
.acct-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;background:rgba(255,255,255,0.06);flex-shrink:0}
.acct-meta{flex:1;min-width:0}
.acct-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-sub{font-size:11.5px;color:var(--text3);margin-top:2px}
.acct-bal{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.acct-bal.neg{color:var(--red)}
.acct-empty{font-size:12.5px;color:var(--text3);padding:10px 2px}
.acct-add{margin-top:14px;width:100%}
.acct-err{display:none;font-size:12px;color:var(--red);font-weight:600;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);border-radius:8px;padding:8px 11px;margin-bottom:12px}

/* S166 — account name preset dropdown */
.acct-name-wrap{position:relative}
.acct-name-chev{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:4px;line-height:1}
.acct-presets{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:240px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,0.45);padding:6px}
.acct-presets.on{display:block}
.acct-presets-group{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--text3);padding:9px 10px 4px}
.acct-preset-item{padding:9px 11px;border-radius:8px;font-size:13.5px;color:var(--text);cursor:pointer}
.acct-preset-item:hover{background:rgba(255,255,255,0.07)}
.acct-presets::-webkit-scrollbar{width:5px}
.acct-presets::-webkit-scrollbar-track{background:transparent}
.acct-presets::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.25);border-radius:10px}
.acct-presets{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,0.25) transparent}

/* S167 — unify dropdown chevrons (Name/Type/Currency) + archived accounts */
#acctType,#acctCur,.acct-name-wrap .fi{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0ae' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.acct-name-chev{position:absolute;right:0;top:0;height:100%;width:44px;background:none;border:none;cursor:pointer;padding:0;font-size:0}
.acct-arch-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--text3);padding:14px 2px 6px}
.acct-row.arch{opacity:0.55;cursor:default}
.acct-row.arch:hover{background:rgba(255,255,255,0.04)}
.acct-restore{background:rgba(255,255,255,0.08);border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.acct-restore:hover{background:rgba(255,255,255,0.14)}

/* S169 — dashboard per-account cards */
.acct-card{background:var(--glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--sh);display:flex;align-items:center;justify-content:space-between;gap:10px}
.acct-card-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.acct-card-name{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-card-bal{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-0.5px;min-width:0;overflow-wrap:anywhere}
.acct-card-bal.neg{color:var(--red)}
.acct-card-ico{width:40px;height:40px;min-width:40px;border-radius:12px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:18px}
.acct-card-pay{font-size:11px;font-weight:700;padding:8px 14px;height:36px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0}

/* S172 — transfer modal */
.tr-lbl{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px}
.tr-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.tr-row:last-child{border-bottom:none}
.tr-row-acc{font-size:13px;font-weight:600;color:var(--text);white-space:normal;word-break:break-word;line-height:1.35}
.tr-row-sub{font-size:11px;color:var(--text3)}
.tr-row-amt{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.tr-row-del{color:var(--text3);cursor:pointer;font-size:15px}
.tr-row-del:hover{color:var(--red)}
#trList{max-height:160px;overflow-y:auto}

/* S181 — credit utilization bar */
.acct-util{display:flex;align-items:center;gap:6px;margin-top:5px}
.acct-util-bar{flex:1;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;max-width:90px}
.acct-util-fill{height:100%;border-radius:2px;transition:width 0.3s ease}
.acct-util-lbl{font-size:10px;color:var(--text3);white-space:nowrap}

/* S182 — tall popups scroll internally with a themed thin scrollbar (mobile UX) */
.mo-c,.mo .md,.wm-cf-panel{max-height:90vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(128,128,128,0.25) transparent}
.mo-c::-webkit-scrollbar,.mo .md::-webkit-scrollbar,.wm-cf-panel::-webkit-scrollbar{width:6px}
.mo-c::-webkit-scrollbar-track,.mo .md::-webkit-scrollbar-track,.wm-cf-panel::-webkit-scrollbar-track{background:transparent}
.mo-c::-webkit-scrollbar-thumb,.mo .md::-webkit-scrollbar-thumb,.wm-cf-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:10px}
.mo-c::-webkit-scrollbar-thumb:hover,.mo .md::-webkit-scrollbar-thumb:hover,.wm-cf-panel::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.3)}

/* S186 — drag-to-reorder Accounts & Wallets (mirrors category reordering) */
.acct-row[draggable="true"]{cursor:grab}
.acct-row.dragging{opacity:.4;border-style:dashed}
.acct-row.drag-over{border-color:var(--accent);background:rgba(242,116,29,0.08)}
.acct-drag-handle{color:var(--text3);font-size:14px;cursor:grab;flex-shrink:0}

/* ── S187 — Navbar redesign: independent glass circles housed in the bar; active item expands into a stadium pill (wysem blue, --accent). border-radius:9999px guarantees a true circle when icon-only and a true capsule when expanded. The sliding .fp-pill is retired (each item carries its own background); search stays its own independent circle. ── */
.fp-pill{display:none!important}
.fp-bar{background:rgba(30,32,40,0.55);border:1px solid rgba(255,255,255,0.1);border-radius:9999px;padding:6px;gap:5px;box-shadow:none}
.fp-btn{flex-direction:row!important;align-items:center;justify-content:center;width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;gap:0;border-radius:9999px!important;background:rgba(255,255,255,0.09)!important;border:1px solid rgba(255,255,255,0.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.13);color:var(--text2);overflow:hidden;transition:width .42s cubic-bezier(.25,.8,.25,1),padding .42s cubic-bezier(.25,.8,.25,1),background .28s ease,color .28s ease,box-shadow .28s ease,border-color .28s ease}
.fp-btn .fp-ico{font-size:20px;line-height:1;flex:0 0 auto;margin:0}
.fp-btn .fp-lbl{display:block!important;max-width:0;opacity:0;margin:0;white-space:nowrap!important;font-size:13px;font-weight:600;letter-spacing:-0.1px;overflow:hidden;color:inherit;transition:max-width .42s cubic-bezier(.25,.8,.25,1),opacity .3s ease,margin-left .42s cubic-bezier(.25,.8,.25,1)}
.fp-btn.on{width:auto!important;min-width:0!important;padding:0 16px!important;background:var(--accent)!important;border-color:rgba(255,255,255,0.3)!important;color:#fff!important;box-shadow:0 0 22px rgba(242,116,29,0.5),0 6px 16px rgba(0,0,0,0.35)}
.fp-btn.on .fp-lbl{max-width:140px;opacity:1;margin-left:8px}
.fp-btn:not(.on):active{transform:scale(.92)}

@media(max-width:480px){
  .fp-bar{padding:5px;gap:4px}
  .fp-btn{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important}
  .fp-btn .fp-ico{font-size:18px}
  .fp-btn.on{padding:0 13px!important}
  .fp-btn.on .fp-lbl{font-size:12px;max-width:120px;margin-left:7px}
  
  .fp-nav{gap:8px}
}
@media(max-width:360px){
  .fp-bar{padding:4px;gap:3px}
  .fp-btn{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
  .fp-btn .fp-ico{font-size:17px}
  .fp-btn.on{padding:0 11px!important}
  .fp-btn.on .fp-lbl{font-size:11.5px;max-width:110px;margin-left:6px}
  
  .fp-nav{gap:6px}
}

/* ── S188 — Glassmorphism 2.0 for collapsible panels (.gl2 = every FAQ + Settings <details>): inset top highlight + layered shadows give a raised 3D pane; opening it lifts the hierarchy with an accent-blue glow. Keeps the existing translucent glass + blue accent; the inline backdrop-blur is preserved. ── */
.gl2{background:rgba(255,255,255,0.045)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 -1px 1px rgba(0,0,0,0.22),0 10px 30px rgba(0,0,0,0.38),0 2px 6px rgba(0,0,0,0.2)!important;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease!important}
.gl2:hover{border-color:rgba(255,255,255,0.17)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -1px 1px rgba(0,0,0,0.22),0 14px 38px rgba(0,0,0,0.44),0 2px 6px rgba(0,0,0,0.22)!important}
.gl2[open]{background:rgba(255,255,255,0.06)!important;border-color:rgba(255,154,77,0.32)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 0 26px rgba(242,116,29,0.18),0 16px 42px rgba(0,0,0,0.48),0 2px 8px rgba(0,0,0,0.26)!important}
.gl2 > summary > span:last-child{transition:transform .3s cubic-bezier(.25,.8,.25,1)}
.gl2[open] > summary > span:last-child{transform:rotate(180deg)}

/* ── S189 — Glass 2.0 parity for default (non-collapsible) content cards + the Login/auth surface. Brings the static .glass cards up to the same raised-glass depth as the .gl2 collapse panels, gives the auth card the system liquid-glass treatment, and stops browser autofill from leaking a flat light fill into the glass inputs. Existing colours + blur untouched — this is depth + consistency only; chrome (topbar/sidebar/user-pill) left as-is. ── */
.sec.glass,.card.glass,.ss.glass,.txl.glass{box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 8px 32px rgba(0,0,0,0.4),0 2px 6px rgba(0,0,0,0.18)}
.auth-card{box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 0 30px rgba(242,116,29,0.1),0 24px 60px rgba(0,0,0,0.5),0 4px 12px rgba(0,0,0,0.3)}
.fi:-webkit-autofill,.fi:-webkit-autofill:hover,.fi:-webkit-autofill:focus,.fi:-webkit-autofill:active{-webkit-text-fill-color:var(--text)!important;-webkit-box-shadow:0 0 0 1000px rgba(28,30,38,0.92) inset!important;caret-color:var(--text);transition:background-color 9999s ease-out 0s}

/* ── S190 — Login liquid-glass backdrop + settings card colour tally. (1) The auth screen had a flat black background, so the glass card had nothing to refract; soft accent glows behind it give the same liquid-glass refraction the in-app modals get (they blur the colourful dashboard). (2) Keamanan + Data cards matched to the account/base-currency card colour inline. ── */
.auth-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(440px circle at 22% 26%,rgba(242,116,29,0.30),transparent 60%),radial-gradient(480px circle at 82% 74%,rgba(211,95,16,0.26),transparent 62%),radial-gradient(360px circle at 72% 10%,rgba(255,154,77,0.22),transparent 60%),radial-gradient(400px circle at 10% 88%,rgba(240,140,40,0.20),transparent 60%)}
.auth-card{position:relative;z-index:1}

/* ── S191 — Tally ALL .ss.glass cards (Budget Overall / By Category / Month Summary + Keamanan + Data) to the account & base-currency .card.glass colour: fill rgba(255,255,255,0.03) + border rgba(128,128,128,0.18), in both themes (the .card.glass inline value is theme-agnostic). Single source of truth; no per-card inline. ── */
.ss.glass{background:rgba(255,255,255,0.03)!important;border:1px solid rgba(128,128,128,0.18)!important}

/* ── S192 — orange theme: light-mode background glow (subtler than dark so the light surface stays readable). Dark-mode glow lives in the body{} rule. ── */

/* ── S193 — 3D glass-2.0 depth on the remaining boxes so EVERY box matches: KPI stat cards (.sc — kept as vibrant gradients but now raised with an inset top-gloss + layered shadow) and dashboard account cards (.acct-card — upgraded from the flat var(--sh) to the same liquid-glass depth as the content cards). ── */
.sc{box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 10px 30px rgba(0,0,0,0.34),0 2px 6px rgba(0,0,0,0.2)}
.acct-card{box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 8px 26px rgba(0,0,0,0.32),0 2px 6px rgba(0,0,0,0.18)}

/* ── S194 — full-width "See all / Show less" toggle for the capped dashboard account cards ── */
.acct-toggle{grid-column:1/-1;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--accent2);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.acct-toggle:hover{background:rgba(255,255,255,0.07);border-color:var(--accent2)}

/* ── S197 — glass-2.0 depth on per-category budget cards (.bc-card in "Anggaran per Kategori"), matching every other box. ── */
.bc-card.glass{box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 8px 26px rgba(0,0,0,0.32),0 2px 6px rgba(0,0,0,0.18)}

/* ── S202 — Dashboard overview re-balance: bento symmetry + responsive ── */
/* Reusable thin custom scrollbar helper (used by Goals + Upcoming inner lists). */
.faq-scroll-wrapper{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(160,160,160,0.35) transparent}
.faq-scroll-wrapper::-webkit-scrollbar{width:6px}
.faq-scroll-wrapper::-webkit-scrollbar-track{background:transparent}
.faq-scroll-wrapper::-webkit-scrollbar-thumb{background:rgba(160,160,160,0.35);border-radius:3px}
.faq-scroll-wrapper::-webkit-scrollbar-thumb:hover{background:var(--accent)}
/* Uniform static height so Savings + Upcoming line up on desktop; inner lists scroll. */
.ov-track-card{height:400px;display:flex;flex-direction:column;overflow:hidden}
/* Mobile: relax fixed heights so cards grow naturally for thumb scrolling; shrink big numbers. */
@media(max-width:640px){
  /* S292 — was height:auto;overflow:visible, which let the Savings/Upcoming card grow
     without bound: with several goals it became an endless column and the inner list never
     scrolled (the desktop 400px cap is what makes it scroll). Keep the card from dominating
     the screen by capping it to a share of the viewport and letting the inner list scroll,
     while still allowing it to shrink below that when there are only one or two goals. */
  .ov-track-card{height:auto;max-height:min(70vh,520px);overflow:hidden}
  .sc-v{font-size:18px}
  .sc{padding:18px 16px}
}
/* S292 — the goals list styles a scrollbar but never actually enabled scrolling, so it
   could only ever grow. flex:1 + min-height:0 bound it inside .ov-track-card; overflow-y
   is what lets it scroll. (.faq-scroll-wrapper sets overflow-y:auto, but the inline
   style attribute on the element wins over the class, so state it explicitly.) */
#goalsCardsContainer{overflow-y:auto!important;-webkit-overflow-scrolling:touch}
/* S298 — Upcoming Commitments had the identical defect: it carries .faq-scroll-wrapper and
   flex:1/min-height:0, but its inline style attribute beat the class's overflow-y, so a long
   list of recurring payments grew instead of scrolling. Same fix as the goals list above. */
#upcomingBillsList{overflow-y:auto!important;-webkit-overflow-scrolling:touch}

/* ── S205 — Liquid-glass 2.0 + 3D depth on the insights cards (matches .gl2 / .card.glass language). ── */
.ins-cell{background:var(--glass2);border:1px solid var(--border2);border-radius:16px;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--sh);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ins-cell:hover{transform:translateY(-2px);border-color:rgba(255,154,77,0.35);box-shadow:var(--sh),0 0 24px rgba(242,116,29,0.16)}

/* ── S208 — Credit-card account cards stack vertically so a long balance never collides with the Pay button. ── */
.acct-card-cc{flex-direction:column;align-items:stretch;gap:12px}
.acct-card-cc .acct-card-pay{width:100%;justify-content:center}

/* ── S210 — Shared external chart tooltip (HTML element, never clipped by the canvas; one style for every chart). ── */
.wysem-tip{position:absolute;left:0;top:0;pointer-events:none;z-index:10001;transform:translate(-50%,calc(-100% - 12px));background:#1c1c1e;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:8px 10px;font-size:11.5px;line-height:1.55;color:#cbd5e1;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,0.45);opacity:0;transition:opacity .12s ease}
.wysem-tip .wt-h{font-weight:700;color:#fff;margin-bottom:3px}
.wysem-tip .wt-r{display:flex;align-items:center;gap:6px}
.wysem-tip .wt-d{width:9px;height:9px;border-radius:2px;flex-shrink:0}
/* S292 — very narrow phones (<=360px). The S229 rule below stops at 480px and still leaves
   20px side padding + a 40px icon + 13px gaps + the delete button, so a long amount like
   "-39.64 AED" gets squeezed until it wraps onto its own line. Reclaim the horizontal space
   and let the amount keep its own line-free column: the description already truncates with
   an ellipsis, so it is the right thing to give ground. */
@media screen and (max-width:360px){
  .txi{padding:11px 12px;gap:8px}
  .tx-ic{width:32px;height:32px;font-size:14px;border-radius:9px}
  .tx-nm{font-size:12.5px}
  .tx-mt{font-size:10px}
  .tx-vl{font-size:12.5px;white-space:nowrap}
  .tx-bs{font-size:9.5px;white-space:nowrap}
  .tx-rt{flex-shrink:0;min-width:0}
  /* the delete ✕ is the least important thing in the row — shrink it, never the amount */
  .txi .btn.bxs.b-ico{padding:0 6px!important;min-width:26px}
}

/* S229 — mobile: tighten transaction rows so long IDR amounts don't overflow the row */
@media screen and (max-width:480px){
  .txi{padding:12px 12px;gap:9px}
  .tx-ic{width:36px;height:36px;font-size:16px}
  .tx-vl{font-size:13px}
  .tx-bs{font-size:10px}
  .ph .hr .btn{padding:0 10px!important}
}

/* ── S234: Narrow-width transaction row revamp (≤400px). ──
   S233 stopped the clipping but left an empty icon-gutter beneath the amount and the
   delete button wrapping to a lonely line. This turns each row into a tidy stacked card:
   icon + [name / meta / amount] column, with the delete ✕ pinned top-right.
   Fully gated behind max-width media queries — wider phones / tablets / desktop are
   completely unaffected. */
@media screen and (max-width:400px){
  /* Header: full-width stacked action buttons (kept from S233 — works well). */
  #page-transactions .ph{flex-direction:column;align-items:stretch;gap:12px}
  #page-transactions .ph .hr{flex-direction:column;align-items:stretch;width:100%;gap:8px;flex-wrap:nowrap}
  #page-transactions .ph .hr .btn{width:100%;justify-content:center}

  /* Transaction row -> stacked card. */
  .txi{position:relative;flex-wrap:wrap;align-items:flex-start;gap:0 10px;row-gap:2px;padding:12px 12px}
  .tx-ic{margin-top:1px}
  .tx-inf{flex:1 1 auto;min-width:0;padding-right:34px}                 /* clear the ✕ */
  .tx-rt{flex:1 1 100%;text-align:left;padding-left:50px;min-width:0;margin-top:2px} /* amount under description */
  .tx-vl{font-size:15px;white-space:nowrap;line-height:1.25}
  .txi > .b-ico{position:absolute;top:10px;right:10px;margin:0}         /* delete ✕ pinned top-right */

  /* Big balances / net-worth: shrink-wrap rather than clip. */
  .acct-bal{white-space:normal;overflow-wrap:anywhere}
  .ov-kpis .sc-hero .sc-v{overflow-wrap:anywhere}
  .md{padding:24px 20px}
}
/* Narrowest foldable cover screens. */
@media screen and (max-width:340px){
  .tx-ic{width:34px;height:34px;font-size:15px}
  .tx-rt{padding-left:44px}
  .tx-vl{font-size:14px}
}

/* ── S240: Currency Converter modal narrow-width fit (≤400px). ──
   Additive & gated behind max-width — wider phones / tablets / desktop untouched.
   Companion to the inline grid fix (minmax(min(100%,320px),1fr)) + select min-width:0.
   Trims nested modal padding, collapses the cheat sheet to one column, and eases the
   hero heading so long currency names (e.g. "Indonesian Rupiah") fit on ~320px phones. */
@media screen and (max-width:400px){
  #wysemFxModalOverlay{padding:10px!important}
  #wysemFxModalOverlay .mo-c{padding:16px!important}
  #quickCheatGrid{grid-template-columns:1fr!important}
  #calcMainHeading{font-size:22px!important}
  #calcSubHeading{font-size:13px!important}
}
@media screen and (max-width:340px){
  #calcMainHeading{font-size:20px!important}
}

/* ── S251: Glassmorphism info tooltip (tap + hover, mobile + desktop). ──
   position:fixed + JS-positioned so it escapes card overflow:hidden and stays in-viewport. */
.zf-tip{position:fixed;z-index:9999;max-width:320px;padding:13px 15px;font-size:12.5px;line-height:1.55;font-weight:500;text-align:left;color:var(--text);
  background:linear-gradient(135deg,rgba(48,38,30,0.62),rgba(18,14,11,0.74));
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,0.14);border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,0.5),0 4px 10px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(0,0,0,0.25);
  opacity:0;transform:translateY(-6px) scale(.96) perspective(600px) rotateX(8deg);transform-origin:top center;
  pointer-events:none;transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);}
.zf-tip.on{opacity:1;transform:translateY(0) scale(1) perspective(600px) rotateX(0);pointer-events:auto;}
@media (max-width:480px){.zf-tip{font-size:13px;padding:14px 16px;border-radius:18px;}}

/* ── S263: type-to-confirm input inside WysemConfirm (replaces native window.prompt). ──
   Matches the existing .wm-cf-* dialog language: theme tokens only, no hardcoded colours. */
.wm-cf-input{
  width:100%;
  box-sizing:border-box;
  margin:0 0 20px 0;
  padding:12px 14px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  text-align:center;
  color:var(--text);
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.wm-cf-input::placeholder{color:var(--text3);font-weight:500;letter-spacing:1px;opacity:.55}
.wm-cf-input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}
.wm-cf-btn:disabled{cursor:not-allowed;opacity:.45}

/* ─────────────────────────────────────────────────────────────────────────────
   S281 — Privacy shield for the app switcher / recents screen.

   HONEST LIMITATION: a web app cannot control the OS screenshot that iOS and
   Android take for the app-switcher thumbnail. Native apps use FLAG_SECURE
   (Android) or an overlay on willResignActive (iOS); neither is available to a
   website, and there is no web standard for it.

   What we CAN do: the moment the page is hidden or loses focus, cover the UI
   with an opaque branded panel. The OS snapshot is usually taken at (or just
   after) that point, so in practice the thumbnail shows the shield rather than
   the user's balances. It is a strong mitigation, not a guarantee.
   ───────────────────────────────────────────────────────────────────────────── */
#zfPrivacyShield{
  position:fixed;
  inset:0;
  /* S282 — Must sit above EVERYTHING, including .wm-cf-back (100002), the floating nav,
     modals and toasts. !important so no inline style can ever push a dialog over it. */
  z-index:2147483647 !important;
  /* S283 — Kept permanently laid out. Toggling display:none->flex forced a reflow+paint,
     and on mobile the OS app-switcher snapshot could land inside that ~0.2s gap, briefly
     exposing the modal underneath. visibility/opacity are compositor-only: instant, no
     reflow, nothing to race. */
  display:flex;
  visibility:hidden;
  /* S308 — opacity is NOT used to hide the shield any more. An opacity change is
     composited and can land a frame late, which is the flash being reported. visibility
     applies in the same style pass, so it wins the race. Kept at 1 permanently. */
  opacity:1;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  background:var(--bg);
  /* Opaque, not translucent — a blur alone would still leak the figures. */
  transition:none !important;/* never animate the shield in — it must be instant */
}
#zfPrivacyShield.on{visibility:visible;opacity:1;pointer-events:auto;}
/* S307 — the shield must appear INSTANTLY. Any transition/animation means the OS can
   snapshot a half-faded shield with the balances still legible behind it. */
#zfPrivacyShield{transition:none !important;animation:none !important;}
body.zf-shielded > *:not(#zfPrivacyShield){transition:none !important;animation:none !important;}
/* S305 — the shield is permanently laid out (S283) so it must not swallow clicks while
   hidden. visibility:hidden already blocks hit-testing, but being explicit protects
   against a future change that swaps visibility for opacity alone. */
#zfPrivacyShield{pointer-events:none;}

/* S282 — z-index alone is not enough: an element inside its own stacking context can still
   paint above the shield. So when the shield is up we also make the app content itself
   invisible. `visibility` (not display) avoids reflow/scroll-jump, and the shield is
   excluded so it stays visible. This is what guarantees nothing leaks into the snapshot. */
body.zf-shielded .main,
body.zf-shielded .sidebar,
body.zf-shielded .topbar,
body.zf-shielded .fp-nav,
body.zf-shielded .mo,
body.zf-shielded .wm-cf-back,
body.zf-shielded .notif-box,
body.zf-shielded .notif-drawer,
body.zf-shielded .notif-dropdown,
body.zf-shielded .collapse-btn,
body.zf-shielded #goalAdjustBackdrop,
body.zf-shielded #deleteGoalConfirmBackdrop,
body.zf-shielded .loading-overlay,
body.zf-shielded .page-loader,
body.zf-shielded .zf-tip,
body.zf-shielded .wysem-tip{
  visibility:hidden !important;
}
/* S307 — CATCH-ALL. The notif-drawer (S305) and the savings-goal modals (S307) both
   leaked because a new overlay was added and this list was not updated. Hide EVERY direct
   child of body except the shield, so anything added in future is covered by default. */
body.zf-shielded > *:not(#zfPrivacyShield){visibility:hidden !important;}
body.zf-shielded #zfPrivacyShield{visibility:visible !important;opacity:1 !important;}
body.zf-shielded #zfPrivacyShield *{visibility:visible !important;}
/* S283 — suppress transitions on the hidden chrome, so a modal mid-animation cannot paint
   a frame after the shield is already up. */
body.zf-shielded .mo,
body.zf-shielded .mo-c,
body.zf-shielded .md{transition:none !important;animation:none !important;}
#zfPrivacyShield img{width:72px;height:72px;border-radius:18px;opacity:.9}
#zfPrivacyShield .zf-ps-name{
  font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text);
}
#zfPrivacyShield .zf-ps-sub{
  font-size:12px;color:var(--text3);font-weight:500;
}