@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Cairo:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#06090F;--bg2:#0C1018;--card:#111722;--card2:#171F2E;--card3:#1C2538;
  --green:#10D9A8;--gd:rgba(16,217,168,.1);--gb:rgba(16,217,168,.28);
  --red:#FF3D50;--rd:rgba(255,61,80,.1);--rb:rgba(255,61,80,.28);
  --purple:#9B6EF8;--pd:rgba(155,110,248,.1);--pb:rgba(155,110,248,.28);
  --gold:#FBBF24;--god:rgba(251,191,36,.1);--gob:rgba(251,191,36,.28);
  --blue:#60A5FA;--bld:rgba(96,165,250,.1);
  --orange:#FB923C;--od:rgba(251,146,60,.1);
  --cyan:#22D3EE;--cd:rgba(34,211,238,.1);
  --pink:#F472B6;--pkd:rgba(244,114,182,.1);
  --txt:#F0F4FF;--txt2:#8B98B8;--txt3:#3E4D6C;
  --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.12);
  --r:14px;--rs:9px;--sh:0 16px 48px rgba(0,0,0,.6);--shs:0 4px 16px rgba(0,0,0,.4);
}
body.light{
  --bg:#F1F5FB;--bg2:#fff;--card:#fff;--card2:#F7F9FE;--card3:#EEF2FA;
  --txt:#0F172A;--txt2:#475569;--txt3:#94A3B8;
  --border:rgba(0,0,0,.09);--border2:rgba(0,0,0,.16);
  --sh:0 8px 32px rgba(0,0,0,.13);--shs:0 2px 12px rgba(0,0,0,.08);
}
body.light .topbar{background:rgba(255,255,255,.95)}
body.light .sb{box-shadow:2px 0 24px rgba(0,0,0,.09)}
*{margin:0;padding:0;box-sizing:border-box;transition:background-color .25s,border-color .2s,color .15s}
html{scroll-behavior:smooth}
body{font-family:'Cairo','Inter',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden}
.app{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sb{width:256px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;position:fixed;right:0;top:0;bottom:0;z-index:202;overflow-y:auto;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.sb-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:201;backdrop-filter:blur(3px)}
.logo-w{padding:18px 16px 13px;border-bottom:1px solid var(--border)}
.logo{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--green),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-v{font-size:10px;color:var(--txt3);margin-top:1px;letter-spacing:2px;text-transform:uppercase}
.cur-w{padding:8px 13px 10px;border-bottom:1px solid var(--border)}
.cur-l{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:4px}
.cur-s{width:100%;background:var(--card);border:1px solid var(--border);border-radius:7px;padding:6px 10px;color:var(--txt);font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:600;outline:none;cursor:pointer}
.cur-s:focus{border-color:var(--green)}.cur-s option{background:var(--card2)}
.nav{padding:7px 8px;flex:1}
.ns{font-size:9.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:2px;padding:0 8px;margin:11px 0 4px;font-weight:700}
.ni{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--txt2);font-size:12px;font-weight:600;transition:all .15s;margin-bottom:1px;border:1px solid transparent;position:relative}
.ni:hover{background:var(--card);color:var(--txt)}
.ni.active{background:var(--gd);color:var(--green);border-color:var(--gb)}
.ni-i{font-size:13px;width:17px;text-align:center;flex-shrink:0}
.ni-b{margin-right:auto;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:999px;display:none}
.ni-b.on{display:block}
.sb-foot{padding:10px 13px;border-top:1px solid var(--border);flex-shrink:0;font-size:10px;color:var(--txt3);text-align:center;line-height:1.7}

/* ── TOPBAR ── */
.main{flex:1;margin-right:256px;min-height:100vh;display:flex;flex-direction:column;transition:margin-right .3s cubic-bezier(.4,0,.2,1)}
.main.sb-collapsed{margin-right:0}
.topbar{background:rgba(12,16,24,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 24px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:10px}
.tb-l{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mb{display:flex;width:31px;height:31px;background:var(--card);border:1px solid var(--border);border-radius:7px;cursor:pointer;font-size:14px;align-items:center;justify-content:center;color:var(--txt2);flex-shrink:0}
.sb.collapsed{transform:translateX(256px)}
.pg-t{font-size:14.5px;font-weight:700;white-space:nowrap}
.srch-w{position:relative;flex:0 0 auto}
.srch-i{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:6px 12px 6px 32px;color:var(--txt);font-family:'Cairo',sans-serif;font-size:11.5px;width:170px;outline:none;transition:all .22s}
.srch-i:focus{border-color:var(--green);width:230px;background:var(--card2)}
.srch-i::placeholder{color:var(--txt3)}
.srch-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:12px;pointer-events:none}
.srch-r{position:absolute;top:calc(100% + 5px);right:0;left:0;background:var(--card2);border:1px solid var(--border2);border-radius:9px;box-shadow:var(--sh);z-index:300;max-height:280px;overflow-y:auto;display:none}
.srch-r.open{display:block}
.sri{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.sri:hover{background:var(--card3)}.sri:last-child{border-bottom:none}
.sri-i{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.sri-n{font-size:12px;font-weight:600}.sri-m{font-size:10.5px;color:var(--txt3)}
.sri-a{font-size:11.5px;font-weight:800;font-family:'Inter',sans-serif;white-space:nowrap}
.tb-r{display:flex;gap:6px;align-items:center;flex-shrink:0}
.cbadge{font-size:11px;font-weight:700;padding:4px 9px;background:var(--god);color:var(--gold);border-radius:999px;border:1px solid var(--gob);white-space:nowrap}
.ico-btn{width:31px;height:31px;background:var(--card);border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--txt2);transition:all .18s;position:relative;flex-shrink:0}
.ico-btn:hover{border-color:var(--border2);color:var(--txt)}
.ico-btn.nd::after{content:'';position:absolute;top:4px;left:4px;width:7px;height:7px;background:var(--red);border-radius:50%;border:1.5px solid var(--bg2)}
.btn{padding:6px 13px;border-radius:7px;border:none;cursor:pointer;font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:700;transition:all .18s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.btn-g{background:var(--green);color:#06090F}.btn-g:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-r{background:var(--red);color:#fff}.btn-r:hover{filter:brightness(1.1)}
.btn-p{background:var(--purple);color:#fff}.btn-p:hover{filter:brightness(1.1)}
.btn-gh{background:transparent;color:var(--txt2);border:1px solid var(--border)}.btn-gh:hover{background:var(--card);color:var(--txt);border-color:var(--border2)}
.btn-sm{padding:4px 10px;font-size:11px}.btn-xs{padding:2px 7px;font-size:11px}
.iact{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--card2);border:1px solid var(--border);color:var(--txt2);cursor:pointer;font-size:13px;transition:all .16s;flex-shrink:0}
.iact:hover{transform:translateY(-1px)}
.iact-edit:hover{background:rgba(96,165,250,.15);border-color:var(--blue);color:var(--blue)}
.iact-del:hover{background:rgba(255,61,80,.15);border-color:var(--red);color:var(--red)}

/* ── CONTENT ── */
.content{padding:18px 24px;flex:1}
.page{display:none;animation:fu .2s ease}.page.active{display:block}
@keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── STAT CARDS ── */
.sg{display:grid;gap:10px;margin-bottom:14px}
.sg4{grid-template-columns:repeat(4,1fr)}
.sg3{grid-template-columns:repeat(3,1fr)}
.sg2{grid-template-columns:repeat(2,1fr)}
.sc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:15px 17px;position:relative;overflow:hidden;transition:all .2s;cursor:default}
.sc:hover{background:var(--card2);transform:translateY(-2px);box-shadow:var(--shs)}
.sc::after{content:'';position:absolute;top:0;right:0;left:0;height:2px;border-radius:2px 2px 0 0}
.cg::after{background:linear-gradient(90deg,var(--green),transparent)}.cr::after{background:linear-gradient(90deg,var(--red),transparent)}
.cgo::after{background:linear-gradient(90deg,var(--gold),transparent)}.cp::after{background:linear-gradient(90deg,var(--purple),transparent)}
.cb::after{background:linear-gradient(90deg,var(--blue),transparent)}.co::after{background:linear-gradient(90deg,var(--orange),transparent)}
.cc::after{background:linear-gradient(90deg,var(--cyan),transparent)}.cpk::after{background:linear-gradient(90deg,var(--pink),transparent)}
.slbl{font-size:10.5px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:5px}
.sv{font-size:21px;font-weight:900;font-family:'Inter',sans-serif;letter-spacing:-1px;line-height:1}
.vg{color:var(--green)}.vr{color:var(--red)}.vgo{color:var(--gold)}.vp{color:var(--purple)}.vb{color:var(--blue)}.vo{color:var(--orange)}.vc{color:var(--cyan)}.vpk{color:var(--pink)}
.ss{font-size:11.5px;color:var(--txt3);margin-top:4px}
.str{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;margin-top:4px;padding:2px 6px;border-radius:5px}
.tup{background:var(--gd);color:var(--green)}.tdn{background:var(--rd);color:var(--red)}.tfl{background:var(--card2);color:var(--txt3)}
.sbg{position:absolute;bottom:-8px;left:6px;font-size:44px;opacity:.045;pointer-events:none}

/* ── HEALTH BAR ── */
.hrow{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px;transition:background .2s}
.hrow:hover{background:var(--card2)}
.hl{font-size:10.5px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap}
.ht{flex:1;height:5px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden}
.hf{height:100%;border-radius:999px;transition:width 1.4s cubic-bezier(.4,0,.2,1);background:linear-gradient(90deg,var(--red),var(--gold),var(--green))}
.hs{font-size:15px;font-weight:900;font-family:'Inter',sans-serif;white-space:nowrap}
.hb{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}

/* ── CHARTS ── */
.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:14px}
.cc2{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:15px;transition:background .2s}
.cc2:hover{background:var(--card2)}
.ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ct{font-size:12.5px;font-weight:700}
.cbody{position:relative;height:200px}
.ctabs{display:flex;gap:4px}
.ctab{padding:3px 9px;border-radius:5px;font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--txt3);font-family:'Cairo',sans-serif;transition:all .15s}
.ctab.active{background:var(--gd);color:var(--green);border-color:var(--gb)}

/* ── TX LIST ── */
.lc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.lh{padding:11px 15px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.lt{font-size:12.5px;font-weight:700}
.tx{display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid var(--border);transition:background .12s;position:relative}
.tx:hover{background:var(--card2)}.tx:last-child{border-bottom:none}
.tx-i{width:33px;height:33px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.tx-in{flex:1;min-width:0}
.tx-n{font-size:12.5px;font-weight:600;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-m{font-size:11px;color:var(--txt3)}
.tx-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10.5px;font-weight:600;background:var(--card3);color:var(--txt2);border:1px solid var(--border)}
.tx-r{text-align:left;flex-shrink:0}
.tx-a{font-size:12.5px;font-weight:800;font-family:'Inter',sans-serif;white-space:nowrap}
.tx-nt{font-size:10.5px;color:var(--txt3);margin-top:1px}
.tx-acc{font-size:10.5px;color:var(--txt3);margin-top:1px}
.tx-del{display:none}
.tx-acts{flex-shrink:0;display:flex;gap:4px}
.tx{align-items:flex-start}

/* ── CATEGORY BARS ── */
.catr{padding:9px 15px;border-bottom:1px solid var(--border)}
.catr:last-child{border-bottom:none}
.cath{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.catn{font-size:12px;font-weight:600}.cata{font-size:12px;font-weight:800;font-family:'Inter',sans-serif}
.catt{height:4px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden}
.catf{height:100%;border-radius:999px;transition:width .8s ease}

/* ── ACCOUNTS ── */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.acc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;transition:all .2s;position:relative;overflow:hidden;cursor:default}
.acc-card:hover{background:var(--card2);transform:translateY(-2px);box-shadow:var(--shs)}
.acc-card::before{content:'';position:absolute;top:0;right:0;bottom:0;width:3px;border-radius:0 0 0 0}
.acc-ico{font-size:22px;margin-bottom:8px}
.acc-name{font-size:12.5px;font-weight:700;margin-bottom:2px}
.acc-type{font-size:10.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:1px;margin-bottom:9px}
.acc-bal{font-size:19px;font-weight:900;font-family:'Inter',sans-serif;letter-spacing:-.5px}
.acc-sub{font-size:11px;color:var(--txt3);margin-top:3px}
.acc-actions{display:flex;gap:5px;margin-top:10px;opacity:0;transition:opacity .18s}
.acc-card:hover .acc-actions{opacity:1}

/* ── RECURRING ── */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:14px}
.rec-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;transition:all .2s;position:relative}
.rec-card:hover{background:var(--card2);transform:translateY(-2px);box-shadow:var(--shs)}
.rec-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px}
.rec-ico{font-size:20px}
.rec-freq{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--card3);color:var(--txt3)}
.rec-name{font-size:13px;font-weight:700;margin-bottom:2px}
.rec-desc{font-size:11px;color:var(--txt2);margin-bottom:8px}
.rec-amt{font-size:17px;font-weight:900;font-family:'Inter',sans-serif}
.rec-next{font-size:11.5px;color:var(--txt3);margin-top:4px}
.rec-actions{display:flex;gap:5px;margin-top:9px;opacity:0;transition:opacity .18s}
.rec-card:hover .rec-actions{opacity:1}

/* ── DEBT CARDS ── */
.dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.dc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:15px;transition:all .2s;position:relative;overflow:hidden}
.dc:hover{background:var(--card2);transform:translateY(-2px);box-shadow:var(--shs)}
.dc.owe::before{content:'';position:absolute;top:0;right:0;left:0;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.dc.owed::before{content:'';position:absolute;top:0;right:0;left:0;height:2px;background:linear-gradient(90deg,var(--green),transparent)}
.dbadge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;margin-bottom:8px}
.db-owe{background:var(--rd);color:var(--red)}.db-owed{background:var(--gd);color:var(--green)}
.dperson{font-size:14px;font-weight:700;margin-bottom:2px}
.ddesc{font-size:11px;color:var(--txt2);margin-bottom:10px;line-height:1.5}
.damt{font-size:19px;font-weight:900;font-family:'Inter',sans-serif;letter-spacing:-.5px}
.da-owe{color:var(--red)}.da-owed{color:var(--green)}
.dmeta{font-size:11px;color:var(--txt3);margin-top:4px;line-height:1.7}
.dact{display:flex;gap:5px;margin-top:9px;opacity:0;transition:opacity .18s}
.dc:hover .dact{opacity:1}
.dprog{margin-top:9px}
.dprog-l{display:flex;justify-content:space-between;font-size:10.5px;color:var(--txt3);margin-bottom:4px}
.dprog-t{height:4px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden}
.dprog-f{height:100%;border-radius:999px;transition:width .8s ease}
.dtag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10.5px;font-weight:700;margin-top:3px}
.dt-ov{background:var(--rd);color:var(--red)}.dt-sn{background:var(--god);color:var(--gold)}.dt-ok{background:var(--gd);color:var(--green)}.dt-pd{background:var(--cd);color:var(--cyan)}

/* ── CALENDAR ── */
.cal-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.cal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.cal-month{font-size:14px;font-weight:700}
.cal-nav{display:flex;gap:7px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-dow{padding:8px 4px;font-size:11.5px;font-weight:700;color:var(--txt3);border-bottom:1px solid var(--border)}
.cal-day{padding:7px 4px;font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;transition:background .15s;min-height:46px;position:relative}
.cal-day:hover{background:var(--card2)}
.cal-day.today{color:var(--green);font-weight:900}
.cal-day.has-event::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--green)}
.cal-day.has-debt::after{background:var(--red)}
.cal-day.other-month{opacity:.3}
.cal-events{padding:14px 16px;border-top:1px solid var(--border);max-height:200px;overflow-y:auto}
.cal-event{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;margin-bottom:6px;border:1px solid var(--border);background:var(--card2);transition:background .15s}
.cal-event:hover{background:var(--card3)}
.cal-event:last-child{margin-bottom:0}
.cal-event-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cal-event-info{flex:1;min-width:0}
.cal-event-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-event-meta{font-size:11px;color:var(--txt3)}
.cal-event-amt{font-size:12px;font-weight:800;font-family:'Inter',sans-serif;white-space:nowrap}

/* ── BUDGET ── */
.budget-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:14px}
.bcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:15px;transition:all .2s;position:relative;overflow:hidden}
.bcard:hover{background:var(--card2);transform:translateY(-2px);box-shadow:var(--shs)}
.bcard-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px}
.bcard-name{font-size:13px;font-weight:700;margin-bottom:2px}
.bcard-meta{font-size:11px;color:var(--txt3);margin-bottom:8px}
.bcard-bar-t{height:6px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden;margin-bottom:7px}
.bcard-bar-f{height:100%;border-radius:999px;transition:width .9s ease}
.bcard-row{display:flex;justify-content:space-between;font-size:11.5px}
.bcard-spent{color:var(--txt2);font-weight:600}.bcard-remain{font-weight:700}
.bcard-actions{display:flex;gap:5px;margin-top:9px;opacity:0;transition:opacity .18s}
.bcard:hover .bcard-actions{opacity:1}
.btag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10.5px;font-weight:700;margin-top:3px}
.bt-ok{background:var(--gd);color:var(--green)}.bt-warn{background:var(--god);color:var(--gold)}.bt-over{background:var(--rd);color:var(--red)}

/* ── INVEST ── */
.ig{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-bottom:14px}
.iv-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:0;transition:all .2s;position:relative;overflow:hidden;display:flex;flex-direction:column}
.iv-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.iv-top{height:4px}
.iv-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 14px 0}
.iv-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.iv-units-pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--card2);color:var(--txt2);white-space:nowrap}
.iv-body{padding:10px 14px 0}
.iv-value{font-size:23px;font-weight:900;font-family:'Inter',sans-serif;line-height:1.2}
.iv-sub{font-size:11px;color:var(--txt2);margin-top:2px}
.iv-pnl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 14px 0;padding:8px 11px;border-radius:8px}
.iv-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 14px 0}
.iv-mini-box{background:var(--card2);border-radius:8px;padding:7px 9px}
.iv-mini-lbl{font-size:10.5px;color:var(--txt3);margin-bottom:2px}
.iv-mini-val{font-size:12px;font-weight:700}
.iv-meta{font-size:11px;color:var(--txt3);padding:9px 14px 0;line-height:1.8}
.iv-actions{display:flex;gap:6px;padding:11px 14px 14px;margin-top:auto}
.iv-actions .iact{flex:1;width:auto}
.iv-primary-btn{flex:2 !important;background:var(--card2);font-weight:700}
.iv-primary-btn:hover{background:rgba(16,217,168,.15);border-color:var(--green);color:var(--green)}
.icard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:15px;transition:all .2s}
.icard:hover{transform:translateY(-3px);box-shadow:var(--sh);background:var(--card2)}

/* ── GOALS ── */
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.gc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:15px;transition:all .2s}
.gc:hover{background:var(--card2);transform:translateY(-2px)}
.gtr{height:6px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden}
.gf{height:100%;border-radius:999px;transition:width 1.1s ease}
.gdel{opacity:0;transition:opacity .18s;cursor:pointer;color:var(--txt3);font-size:11px;background:none;border:none;font-family:'Cairo',sans-serif}
.gc:hover .gdel{opacity:1}

/* ── REPORTS ── */
.rt{width:100%;border-collapse:collapse}
.rt th,.rt td{padding:9px 13px;text-align:right;border-bottom:1px solid var(--border);font-size:11.5px}
.rt th{font-weight:700;color:var(--txt3);text-transform:uppercase;font-size:10.5px;letter-spacing:1px;background:var(--bg);position:sticky;top:0;z-index:2}
.rt tr:hover td{background:var(--card2)}

/* ── CALCULATORS ── */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.calc-result{background:var(--card2);border:1px solid var(--border);border-radius:var(--rs);padding:13px;margin-top:12px;font-size:13px;line-height:1.8}
.calc-result-big{font-size:22px;font-weight:900;font-family:'Inter',sans-serif;margin-bottom:4px}

/* ── FORECAST ── */
.forecast-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12.5px}
.forecast-item:last-child{border-bottom:none}
.forecast-label{font-weight:600}
.forecast-val{font-weight:800;font-family:'Inter',sans-serif}
.forecast-change{font-size:11.5px;font-weight:700;padding:2px 6px;border-radius:5px}

/* ── NET WORTH ── */
.nwh{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center;margin-bottom:14px;position:relative;overflow:hidden}
.nwh::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(16,217,168,.07),transparent 60%);pointer-events:none}
.nwl{font-size:10.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:2px;font-weight:700;margin-bottom:7px}
.nwv{font-size:40px;font-weight:900;font-family:'Inter',sans-serif;letter-spacing:-2px;line-height:1}
.nws{font-size:11.5px;color:var(--txt3);margin-top:7px}
.nwc{display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;margin-top:8px;background:var(--card2)}

/* ── AI ── */
.aiw{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.aih{padding:14px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,rgba(155,110,248,.08),rgba(16,217,168,.03))}
.aibadge{background:var(--purple);color:#fff;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:1px;flex-shrink:0}
.aib{padding:16px}
.qr{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.qbtn{padding:5px 11px;background:var(--bg);border:1px solid var(--border);border-radius:999px;color:var(--txt2);font-size:11px;font-weight:600;cursor:pointer;font-family:'Cairo',sans-serif;transition:all .15s}
.qbtn:hover{border-color:var(--pb);color:var(--purple);background:var(--pd)}
.ai-row{display:flex;gap:7px;margin-bottom:11px}
.ai-inp{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--txt);font-family:'Cairo',sans-serif;font-size:12.5px;outline:none;transition:border-color .18s}
.ai-inp:focus{border-color:var(--purple)}.ai-inp::placeholder{color:var(--txt3)}
.ai-out{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:13px;min-height:80px;font-size:12.5px;line-height:1.9;color:var(--txt2);white-space:pre-wrap}

/* ── MODAL ── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(7px);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s}
.ov.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;width:480px;max-width:96vw;padding:22px;transform:translateY(14px) scale(.98);transition:transform .22s;max-height:92vh;overflow-y:auto}
.ov.open .modal{transform:translateY(0) scale(1)}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.mt{font-size:14.5px;font-weight:700}
.mx{width:27px;height:27px;background:var(--card);border:1px solid var(--border);border-radius:6px;cursor:pointer;color:var(--txt3);font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .18s}
.mx:hover{color:var(--red);border-color:var(--rb)}
.fg{margin-bottom:11px}
.fl{font-size:10.5px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px;display:block}
.fc{width:100%;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--txt);font-family:'Cairo',sans-serif;font-size:12.5px;outline:none;transition:border-color .18s}
.fc:focus{border-color:var(--green)}.fc::placeholder{color:var(--txt3)}
select.fc option{background:var(--card2)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tysel{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:12px}
.tybtn{padding:7px 3px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--txt3);cursor:pointer;font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:700;text-align:center;transition:all .15s;line-height:1.5}
.tybtn.ai{background:var(--gd);color:var(--green);border-color:var(--gb)}
.tybtn.ae{background:var(--rd);color:var(--red);border-color:var(--rb)}
.tybtn.av{background:var(--pd);color:var(--purple);border-color:var(--pb)}
.tybtn.aow{background:var(--rd);color:var(--red);border-color:var(--rb)}
.tybtn.aod{background:var(--gd);color:var(--green);border-color:var(--gb)}

/* ── TAGS INPUT ── */
.tags-inp-w{display:flex;flex-wrap:wrap;gap:5px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:text;transition:border-color .18s;align-items:center;min-height:38px}
.tags-inp-w.focused{border-color:var(--green)}
.tag-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--gd);color:var(--green);border:1px solid var(--gb)}
.tag-pill-x{cursor:pointer;font-size:12px;opacity:.7;transition:opacity .15s}
.tag-pill-x:hover{opacity:1}
.tags-input{border:none;background:transparent;outline:none;color:var(--txt);font-family:'Cairo',sans-serif;font-size:12px;min-width:80px;flex:1}
.tags-input::placeholder{color:var(--txt3)}

/* ── SKELETON LOADING ── */
.skel{background:linear-gradient(90deg,var(--card2) 25%,var(--card3) 37%,var(--card2) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite;border-radius:var(--rs)}
@keyframes skel-shimmer{0%{background-position:100% 50%}100%{background-position:0% 50%}}
.skel-stat{height:76px;border:1px solid var(--border)}
.skel-line{height:11px;border-radius:4px;margin:10px 15px}

/* ── MISC ── */
.empty{padding:36px;text-align:center;color:var(--txt3);font-size:12px}
.ei{font-size:30px;margin-bottom:8px;display:block;opacity:.35}
.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sht{font-size:13px;font-weight:700}
.two{display:grid;grid-template-columns:1.3fr .7fr;gap:10px;margin-bottom:14px}
.er{display:flex;gap:6px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.fsel{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:5px 9px;color:var(--txt);font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:600;outline:none;cursor:pointer}
.fsel:focus{border-color:var(--green)}.fsel option{background:var(--card2)}
.dots{display:inline-flex;gap:3px;align-items:center}
.dots span{width:5px;height:5px;background:var(--purple);border-radius:50%;animation:db 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes db{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-5px);opacity:1}}
.ip{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ipico{cursor:pointer;font-size:18px;padding:4px 6px;border-radius:6px;border:1px solid var(--border);transition:all .15s;display:inline-block}
.ipico:hover,.ipico.sel{background:var(--gd);border-color:var(--gb)}
.section-divider{height:1px;background:var(--border);margin:18px 0}

/* ── TOAST & OFFLINE ── */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--card2);border:1px solid var(--border2);border-radius:9px;padding:8px 17px;font-size:12.5px;font-weight:600;color:var(--txt);box-shadow:var(--sh);z-index:999;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:7px;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.tg{border-color:var(--gb);color:var(--green)}.toast.tr{border-color:var(--rb);color:var(--red)}
.offline-bar{position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--gold);color:#0F172A;text-align:center;font-size:12px;font-weight:700;padding:6px;transform:translateY(-100%);transition:transform .3s ease}
.offline-bar.show{transform:translateY(0)}

/* ── PWA BANNER ── */
.pwa-banner{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--bg2);border:1px solid var(--gb);border-radius:13px;padding:13px 17px;display:flex;align-items:center;gap:11px;box-shadow:var(--sh);z-index:990;transition:transform .4s cubic-bezier(.4,0,.2,1);min-width:300px;max-width:400px}
.pwa-banner.show{transform:translateY(0)}

/* ── KEYBOARD SHORTCUTS ── */
.kb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.kb-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--card2);border-radius:7px;border:1px solid var(--border)}
.kb-key{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 5px;background:var(--card);border:1px solid var(--border2);border-bottom:2px solid var(--border2);border-radius:4px;font-size:11.5px;font-weight:700;font-family:'Inter',sans-serif;color:var(--txt);flex-shrink:0}
.kb-desc{font-size:11px;color:var(--txt2);font-weight:500}
.kb-sec{font-size:10px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin:9px 0 3px;grid-column:1/-1}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

/* ── RESPONSIVE ── */
@media(max-width:1150px){.sg4{grid-template-columns:repeat(2,1fr)}.charts-row{grid-template-columns:1fr}.calc-grid{grid-template-columns:1fr}}
@media(max-width:900px){.two{grid-template-columns:1fr}}
@media(max-width:768px){
  .sb{transform:translateX(256px)}.sb:not(.collapsed){transform:translateX(0)}
  .sb-ov.open{display:block}
  .main{margin-right:0}.content{padding:12px 10px}
  .srch-i{width:110px}.srch-i:focus{width:150px}
  .sg4{grid-template-columns:1fr 1fr}.sg3{grid-template-columns:1fr 1fr}
  .tysel{grid-template-columns:repeat(3,1fr)}.fr{grid-template-columns:1fr}
  .topbar{padding:0 12px}.kb-grid{grid-template-columns:1fr}
  .acc-grid,.rec-grid,.ig,.gg,.dg,.budget-grid{grid-template-columns:1fr}
}
@media(max-width:480px){.sg4,.sg3{grid-template-columns:1fr}.content{padding:9px}.cbadge{display:none}}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.07);border-radius:999px}

/* ══════════════════════════════════════════
   RESPONSIVE FIXES v4.1
   ══════════════════════════════════════════ */

/* Sidebar — fix overflow on mobile */
.sb {
  transform: translateX(calc(100% + 2px));
  box-shadow: none;
}
.sb.open {
  transform: translateX(0);
  box-shadow: -4px 0 32px rgba(0,0,0,.5);
}
.sb-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 201; }
.sb-ov.open { display: block; }

/* Desktop — always show sidebar */
@media (min-width: 769px) {
  .sb { transform: translateX(0) !important; box-shadow: none !important; }
  .sb-ov { display: none !important; }
  .mb { display: none !important; }
}

/* ── TOPBAR ── */
.topbar {
  flex-wrap: nowrap;
  overflow: hidden;
}
.tb-r { flex-wrap: nowrap; }

/* Hide search on very small screens */
@media (max-width: 480px) {
  .srch-w { display: none; }
  .cur-badge { display: none; }
  .tb-r .btn-gh { display: none; }
}
@media (max-width: 600px) {
  .cur-badge { display: none; }
}

/* ── CONTENT ── */
.content {
  overflow-x: hidden;
  max-width: 100%;
}
.page { overflow-x: hidden; }

/* ── STAT GRIDS ── */
@media (max-width: 900px) {
  .sg4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .sg4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sg3 { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 360px) {
  .sg4 { grid-template-columns: 1fr; }
  .sg3 { grid-template-columns: 1fr; }
}

/* ── STAT CARD values ── */
@media (max-width: 600px) {
  .sv { font-size: 18px; }
  .slbl { font-size: 10px; }
  .sc { padding: 12px 14px; }
}

/* ── CHARTS ── */
@media (max-width: 900px) {
  .charts-row { grid-template-columns: 1fr; }
  .cb2 { height: 200px; }
}

/* ── TWO COL ── */
@media (max-width: 900px) {
  .two { grid-template-columns: 1fr; }
}

/* ── MODAL ── */
.modal {
  width: min(500px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  margin: 16px;
}
@media (max-width: 600px) {
  .modal { 
    width: 100%; 
    max-width: 100vw;
    margin: 0;
    border-radius: 18px 18px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
  }
  .ov {
    align-items: flex-end;
  }
}

/* ── FORMS ── */
@media (max-width: 600px) {
  .fr { grid-template-columns: 1fr; }
  .tysel { grid-template-columns: repeat(3, 1fr); gap: 5px; }
}

/* ── TRANSACTION ROWS ── */
@media (max-width: 500px) {
  .tx { padding: 9px 12px; gap: 8px; }
  .tx-del { display: none; }
  .tx:active .tx-del { display: block; opacity: 1; }
  .tx-n { font-size: 12px; }
  .tx-a { font-size: 12px; }
}

/* ── DEBT GRID ── */
@media (max-width: 600px) {
  .dg { grid-template-columns: 1fr; }
}

/* ── ACC GRID ── */
@media (max-width: 600px) {
  .acc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .acc-grid { grid-template-columns: 1fr; }
}

/* ── BUDGET GRID ── */
@media (max-width: 600px) {
  .budget-grid { grid-template-columns: 1fr; }
}

/* ── GOALS GRID ── */
@media (max-width: 600px) {
  .gg { grid-template-columns: 1fr; }
}

/* ── INVEST GRID ── */
@media (max-width: 600px) {
  .ig { grid-template-columns: 1fr 1fr; }
}

/* ── RECURRING GRID ── */
@media (max-width: 600px) {
  .rec-grid { grid-template-columns: 1fr; }
}

/* ── CALENDAR ── */
@media (max-width: 600px) {
  .cal-day { min-height: 44px; padding: 3px; }
  .cal-day-num { font-size: 10px; }
  .cal-event { font-size: 8px; padding: 1px 3px; }
  .cal-header { padding: 10px 12px; }
  .cal-legend { padding: 8px 12px; gap: 8px; }
  .cal-legend-item { font-size: 9.5px; }
}

/* ── HEALTH ROW ── */
@media (max-width: 500px) {
  .hrow { flex-wrap: wrap; gap: 8px; }
  .hl { width: 100%; }
  .ht { order: 3; width: 100%; }
}

/* ── NET WORTH ── */
@media (max-width: 500px) {
  .nwv { font-size: 32px; }
  .nwh { padding: 18px; }
}

/* ── REPORTS TABLE ── */
.rt-wrap { overflow-x: auto; max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .rt th, .rt td { padding: 7px 10px; font-size: 11px; }
}

/* ── MAIN margin ── */
@media (min-width: 769px) {
  .main { margin-right: 258px; }
}
@media (max-width: 768px) {
  .main { margin-right: 0 !important; }
  .content { padding: 14px 12px; }
}
@media (max-width: 480px) {
  .content { padding: 10px 8px; }
}

/* ── LIST HEAD wrap ── */
.lh { flex-wrap: wrap; gap: 8px; }
@media (max-width: 500px) {
  .lh { padding: 10px 12px; }
  .lt { font-size: 12.5px; }
}

/* ── EXPORT ROW ── */
.er { flex-wrap: wrap; gap: 6px; }
@media (max-width: 500px) {
  .er .fsel, .er .btn { font-size: 11px; padding: 4px 8px; }
}

/* ── SECTION HEADER ── */
@media (max-width: 500px) {
  .sh { flex-wrap: wrap; gap: 8px; }
  .sht { font-size: 13px; }
}

/* ── DEBT CALC ── */
@media (max-width: 600px) {
  .method-tabs { flex-direction: column; }
  .mtab { text-align: center; }
}

/* ── KEYBOARD SHORTCUTS MODAL ── */
@media (max-width: 600px) {
  .kb-grid { grid-template-columns: 1fr; }
}

/* ── PWA BANNER ── */
@media (max-width: 500px) {
  .pwa-banner { 
    min-width: unset; 
    width: calc(100vw - 24px);
    flex-direction: column;
    text-align: center;
    bottom: 60px;
  }
  .pwa-banner-btns { justify-content: center; }
}

/* ══ EDIT/DELETE ACTIONS — always visible on touch ══ */
@media (hover: none) {
  .tx-del { opacity: 1; position: static; margin-top: 4px; }
  .acc-actions { opacity: 1; }
  .bcard-actions { opacity: 1; }
  .dact { opacity: 1; }
  .rec-actions { opacity: 1; }
  .gdel { opacity: 1; }
}

/* ══ TOUCH TARGETS — bigger tap area on touch devices (44px min per iOS/Android guidelines) ══ */
@media (hover: none) {
  .mb, .ico-btn { width: 40px; height: 40px; font-size: 15px; }
  .iact { width: 34px; height: 34px; font-size: 14px; }
  .mx { width: 34px; height: 34px; font-size: 14px; }
  .gdel { padding: 6px; font-size: 12px; }
}

/* ── Overflow protection global ── */
* { max-width: 100%; }
img, video, canvas { max-width: 100% !important; }
table { table-layout: auto; }
pre, code { overflow-x: auto; white-space: pre-wrap; }