:root{
  --bg:#08090f;--bg2:#0d0f1a;
  --glass:rgba(255,255,255,0.055);--glass2:rgba(255,255,255,0.085);--glass3:rgba(255,255,255,0.13);
  --border:rgba(255,255,255,0.09);--border2:rgba(255,255,255,0.16);
  --accent:#3b82f6;--accent2:#60a5fa;--accent3:#93c5fd;
  --green:#22c55e;--red:#ef4444;--yellow:#f59e0b;
  --text:#eef2ff;--text2:#94a3b8;--text3:#475569;
  --r:16px;--r2:22px;--sh:0 8px 40px rgba(0,0,0,0.55);
  --sb:230px;
}
.light{
  --bg:#f0f4ff;--bg2:#e8edf9;
  --glass:rgba(255,255,255,0.58);--glass2:rgba(255,255,255,0.75);--glass3:rgba(255,255,255,0.9);
  --border:rgba(59,130,246,0.1);--border2:rgba(59,130,246,0.22);
  --text:#0f172a;--text2:#3b4a6b;--text3:#64748b;
  --sh:0 8px 40px rgba(59,130,246,0.1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);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(59,130,246,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(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);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(59,130,246,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,#93c5fd,#3b82f6);-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(59,130,246,0.2),rgba(96,165,250,0.1));border:1px solid rgba(59,130,246,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 */
body.light .nav-pill{background:linear-gradient(135deg,rgba(37,99,235,0.12),rgba(96,165,250,0.06));border-color:rgba(37,99,235,0.2)}
.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,#3b82f6,#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;border-bottom:1px solid var(--border);gap:8px;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(59,130,246,0.06);border-color:rgba(59,130,246,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}
.light .ios-seg{background:rgba(0,0,0,0.07)}
.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,#1d4ed8,#3b82f6);box-shadow:0 8px 28px rgba(59,130,246,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)}

/* 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}
.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}
.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}
.light .fi{background:rgba(255,255,255,0.55)}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,0.14)}
.fi option{background:#1a1d2e;color:#eef2ff}
.light .fi option{background:#fff;color:#0f172a}
.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,#1d4ed8,#3b82f6);color:white;box-shadow:0 4px 18px rgba(59,130,246,0.38)}
.bp:hover{transform:translateY(-1px);box-shadow:0 7px 24px rgba(59,130,246,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}
.light .fs option{background:#fff;color:#0f172a}

/* Modal */
.mo{position:fixed;inset:0;background:rgba(5,7,15,0.78);backdrop-filter:blur(18px);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}
.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(59,130,246,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}
.light .bc-fi{background:rgba(255,255,255,0.5)}

/* 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(59,130,246,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,#3b82f6,#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}

/* 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(59,130,246,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(59,130,246,0.08)}
.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(59,130,246,0.18),rgba(96,165,250,0.08));border:1px solid rgba(59,130,246,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}
.fp-search{background:rgba(255,255,255,0.05);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--border);border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 35px rgba(0,0,0,0.25),0 1px 3px rgba(0,0,0,0.06);font-size:22px;color:var(--text);flex-shrink:0;transition:background .2s ease,transform .2s ease}
.fp-search:hover{background:rgba(255,255,255,0.08);transform:scale(1.05)}

/* Light-mode adaptive glass — gentle on bright backgrounds */
body.light .fp-bar,body.light .fp-search{background:rgba(255,255,255,0.65);border-color:rgba(0,0,0,0.08);box-shadow:0 10px 35px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.03)}
body.light .fp-pill{background:linear-gradient(135deg,rgba(37,99,235,0.12),rgba(96,165,250,0.06));border-color:rgba(37,99,235,0.22)}

/* 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}
  .fp-search{width:48px;height:48px;font-size:18px}
}
@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:calc(100vw - 160px);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}
}

/* ── 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}

/* 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}