/* Montserrat — default font */
/* ═══ TOKENS ════════════════════════════════════════ */
:root {
  --f:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --fnum:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;

  /* Dark palette */
  --bg-a:#060b18; --bg-b:#0d1528; --bg-c:#111d35;
  --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  --grad-bg:linear-gradient(160deg,#060b18 0%,#0d1528 40%,#0a1930 70%,#0d1528 100%);

  /* Glass */
  --glass:rgba(13,21,40,0.60);
  --glass-h:rgba(17,29,53,0.80);
  --glass-b:rgba(100,160,255,0.10);
  --glass-b2:rgba(100,160,255,0.20);
  --glass-shine:rgba(255,255,255,0.05);
  --glass-blur:blur(20px) saturate(160%);

  /* Text */
  --t:#e8eeff; --t2:#8ba5d4; --t3:#3d5a8a; --t4:#1e3060;

  /* Accent */
  --a:#4d8fff; --a2:#7ab3ff; --abg:rgba(77,143,255,0.12); --abg2:rgba(77,143,255,0.22);
  --g:#22e89a;  --gbg:rgba(34,232,154,0.10);
  --r:#ff5e5e;  --rbg:rgba(255,94,94,0.10);
  --am:#ffb347; --ambg:rgba(255,179,71,0.10);
  --pu:#b57fff; --pubg:rgba(181,127,255,0.10);
  --cy:#38d9f5; --cybg:rgba(56,217,245,0.10);

  --sh:0 8px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
  --sh-sm:0 4px 16px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.2);
  --sh-lg:0 20px 60px rgba(0,0,0,.6),0 4px 20px rgba(0,0,0,.4);
  --sh-glow:0 0 20px rgba(77,143,255,.25),0 8px 32px rgba(0,0,0,.4);

  --r0:6px;--r1:10px;--r2:14px;--r3:18px;--r4:24px;--r5:32px;
  --sw:230px; --th:72px;
  --grad:linear-gradient(135deg,#4d8fff 0%,#b57fff 100%);
  --grad2:linear-gradient(135deg,#22e89a 0%,#4d8fff 100%);
  --tr:0.3s cubic-bezier(0.4,0,0.2,1);
}

[data-theme=light] {
  --bg-a:#eef2fb; --bg-b:#e3e9f6; --bg-c:#d8e0f0;
  --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  --grad-bg:linear-gradient(160deg,#dce8ff 0%,#eef2fb 40%,#d8e4f8 70%,#e4edf9 100%);
  --glass:rgba(255,255,255,0.55); --glass-h:rgba(255,255,255,0.80);
  --glass-b:rgba(77,143,255,0.14); --glass-b2:rgba(77,143,255,0.28);
  --glass-shine:rgba(255,255,255,0.6);
  --t:#0f1c3a; --t2:#3d5a8a; --t3:#7a9bc4; --t4:#b0c8e8;
  --a:#2563eb; --a2:#4d8fff; --abg:rgba(37,99,235,0.10); --abg2:rgba(37,99,235,0.20);
  --g:#059669; --gbg:rgba(5,150,105,0.10);
  --r:#dc2626; --rbg:rgba(220,38,38,0.10);
  --am:#d97706; --ambg:rgba(217,119,6,0.10);
  --pu:#7c3aed; --pubg:rgba(124,58,237,0.10);
  --cy:#0891b2; --cybg:rgba(8,145,178,0.10);
  --sh:0 4px 20px rgba(37,99,235,.12),0 1px 6px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.8);
  --sh-sm:0 2px 10px rgba(37,99,235,.10),0 1px 3px rgba(0,0,0,.06);
  --sh-lg:0 12px 40px rgba(37,99,235,.16),0 2px 12px rgba(0,0,0,.1);
  --sh-glow:0 0 16px rgba(37,99,235,.2),0 6px 24px rgba(0,0,0,.12);
}

/* ═══ RESET ════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;padding:0;overflow-x:hidden}
html{font-size:17.5px;scroll-behavior:smooth}
body{
  font-family:var(--f);
  background:transparent;
  color:var(--t);min-height:100vh;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:color var(--tr);
  position:relative;
}
/* App background canvas (both modes, behind everything) */
#bg-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
#app,#landing,.spin-wrap{position:relative;z-index:1;}
a{text-decoration:none;color:inherit;cursor:pointer}
button{cursor:pointer;border:none;background:none;font-family:var(--f)}
input,select,textarea{font-family:var(--f)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--t4);border-radius:99px}
:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:var(--r0)}
/* ═══ HEADING SCALE (h1-h6) ════════════════════════════════ */
h1{font-size:40px;font-weight:800;line-height:1.15;letter-spacing:-.03em}
h2{font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
h3{font-size:26px;font-weight:700;line-height:1.25}
h4{font-size:20px;font-weight:600;line-height:1.3}
h5{font-size:18px;font-weight:600;line-height:1.35}
h6{font-size:16px;font-weight:600;line-height:1.4}


/* number font helper */
.fnum{font-family:var(--fnum)}

/* ═══ GLASS MIXIN ══════════════════════════════════ */
.glass-panel {
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-b);
}

/* ═══ LOADER ═══════════════════════════════════════ */
.spin-wrap{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;
  background:#060b18;
  transition:opacity .5s ease;
}
[data-theme=light] .spin-wrap{background:#eef2fb;}
.spin-wrap.hide{opacity:0;pointer-events:none}
.loader{position:relative;display:flex;gap:0.3em}
.loader::before{content:"";position:absolute;left:0;top:0;width:100%;height:2em;filter:blur(45px);background-color:#e299ff;background-image:radial-gradient(at 52% 57%,hsla(11,83%,72%,1) 0px,transparent 50%),radial-gradient(at 37% 57%,hsla(175,78%,66%,1) 0px,transparent 50%)}
.loader__circle{--size__loader:0.6em;width:var(--size__loader);height:var(--size__loader);border-radius:50%;animation:loader__circle__jumping 2s infinite;background-color:#b499ff}
.loader__circle:nth-child(2n){animation-delay:300ms;background-color:#e499ff}
.loader__circle:nth-child(3n){animation-delay:600ms}
@keyframes loader__circle__jumping{0%,100%{transform:translateY(0px)}25%{transform:translateY(-15px) scale(0.5)}50%{transform:translateY(0px)}75%{transform:translateY(5px) scale(0.9)}}
.loader-brand{font-family:var(--f);font-size:14px;font-weight:700;letter-spacing:2px;margin-top:8px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ═══ ANIMATED BACKGROUND CANVAS ═══════════════════ */
/* Landing + app background canvas — always active */
.cosmic-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  display:block;opacity:1;
}
/* Landing — transparent so canvas behind shows through */
.landing{ background:transparent; }

/* ═══ MOUSE GLOW ════════════════════════════════════ */
.mouse-glow{
  position:fixed;width:480px;height:480px;
  border-radius:50%;pointer-events:none;z-index:3;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .5s ease;
  mix-blend-mode:screen;
}
[data-theme=dark] .mouse-glow{
  background:radial-gradient(circle, rgba(77,143,255,0.12) 0%, rgba(139,92,246,0.06) 40%, transparent 70%);
}
[data-theme=light] .mouse-glow{
  background:radial-gradient(circle, rgba(37,99,235,0.08) 0%, rgba(124,58,237,0.04) 40%, transparent 70%);
  mix-blend-mode:multiply;
}
.landing .mouse-glow{ opacity:1; }

/* overflow-x:clip avoids the WebKit bug where overflow:hidden+position:relative clips fixed children */
.landing{overflow-x:clip;position:relative}
.land-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;min-height:72px;padding:0 5%;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-b);transition:box-shadow var(--tr),background var(--tr)
}
.land-nav.scrolled{box-shadow:var(--sh)}
.llogo{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.llogo-svg,.auth-logo-svg,.tb-logo-svg{flex-shrink:0;display:block}
.llogo-txt{font-size:20px;font-weight:800;display:flex;align-items:baseline;gap:0;overflow:visible;line-height:1.3}
.llogo-splurge{font-family:"Maven Pro",sans-serif;font-weight:800;font-size:20px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.3}
.llogo-allocator{font-family:"Maven Pro",sans-serif;font-weight:700;font-size:20px;line-height:1.3}
.lnav-r{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hero{min-height:100vh;display:flex;align-items:center;padding:108px 6% 60px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 30% 50%,rgba(77,143,255,.1) 0%,transparent 70%)}
.blob{position:absolute;border-radius:50%;filter:blur(100px);animation:blobf 10s ease-in-out infinite}
.blob.b1{width:500px;height:500px;background:rgba(77,143,255,.14);top:-150px;left:-200px}
.blob.b2{width:380px;height:380px;background:rgba(181,127,255,.10);bottom:-80px;right:-120px;animation-delay:4s}
.blob.b3{width:260px;height:260px;background:rgba(34,232,154,.08);top:45%;left:48%;animation-delay:7s}
@keyframes blobf{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(22px,-14px) scale(1.04)}66%{transform:translate(-14px,8px) scale(.97)}}
/* Split hero layout */
.hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:1100px;margin:0 auto;width:100%;position:relative;z-index:1}
.hero-c{text-align:left}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--abg);border:1px solid var(--abg2);color:var(--a2);border-radius:99px;padding:5px 16px;font-size:11px;font-weight:700;margin-bottom:24px;letter-spacing:.8px;text-transform:uppercase;animation:fadeup .6s ease both}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--a);animation:bpulse 2s infinite}
@keyframes bpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero-h1{font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:800;line-height:1.08;letter-spacing:-.035em;margin-bottom:20px;animation:fadeup .6s .1s ease both}
.hero-h1 .g{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-p{font-size:1rem;color:var(--t2);line-height:1.8;max-width:440px;margin:0 0 32px;animation:fadeup .6s .2s ease both}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;animation:fadeup .6s .3s ease both}
/* Hero right — visual dashboard card */
.hero-visual{position:relative;animation:fadeup .7s .2s ease both}
.hero-dash-card{
  background:var(--glass);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid var(--glass-b);border-radius:var(--r4);padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(100,160,255,.08);
  position:relative;overflow:hidden;
}
.hero-dash-card::before{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.5}
.hdc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;position:relative;z-index:1}
.hdc-title{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--t2)}
.hdc-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(34,232,154,.12);color:#22e89a;border:1px solid rgba(34,232,154,.2)}
.hdc-live-dot{width:6px;height:6px;border-radius:50%;background:#22e89a;flex-shrink:0;position:relative}
.hdc-live-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(34,232,154,.4);animation:live-pulse 1.8s ease-out infinite}
@keyframes live-pulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:0}}
.hdc-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;position:relative;z-index:1}
.hdc-stat{background:rgba(255,255,255,.03);border:1px solid var(--glass-b);border-radius:var(--r2);padding:12px 14px}
.hdc-stat-lbl{font-size:10px;color:var(--t3);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.hdc-stat-val{font-size:1.15rem;font-weight:800;font-family:var(--fnum);letter-spacing:-.02em}
.hdc-stat-val.pos{color:#22e89a}.hdc-stat-val.neg{color:#ff7070}.hdc-stat-val.blue{color:#4d8fff}.hdc-stat-val.pur{color:#a78bfa}
.hdc-graph{position:relative;z-index:1;margin-bottom:16px}
.hdc-canvas{width:100%;height:90px;display:block}
.hdc-items{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.hdc-item{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.hdc-item-l{display:flex;align-items:center;gap:8px;color:var(--t2)}
.hdc-item-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hdc-item-r{font-weight:700;font-family:var(--fnum)}
/* Floating accent orbs behind hero card */
.hero-orb{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;animation:blobf 8s ease-in-out infinite}
.hero-orb1{width:220px;height:220px;background:rgba(77,143,255,.12);top:-40px;right:-60px;animation-delay:2s}
.hero-orb2{width:160px;height:160px;background:rgba(139,92,246,.1);bottom:-30px;left:-30px;animation-delay:5s}
@keyframes fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.feats{padding:0 5% 64px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.fpill{display:flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-b);border-radius:99px;padding:7px 16px;font-size:13px;color:var(--t2);box-shadow:var(--sh-sm);opacity:0;transform:translateY(14px);transition:all .45s ease}
.fpill.vis{opacity:1;transform:translateY(0)}
.lsec{padding:64px 5%}.lsec-c{text-align:center}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
.lh2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.025em;margin-bottom:12px;line-height:1.2}
.lp{font-size:.95rem;color:var(--t2);max-width:460px;margin:0 auto 44px;line-height:1.75}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;max-width:860px;margin:0 auto}
.step{
  background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-b);border-radius:var(--r4);padding:28px 24px;text-align:left;
  position:relative;overflow:hidden;box-shadow:var(--sh-sm);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);opacity:0;transform:translateY(30px)
}
.step::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.6}
.step.vis{opacity:1;transform:translateY(0)}
.step:hover{transform:translateY(-5px) scale(1.01);box-shadow:var(--sh-glow);border-color:var(--glass-b2)}
.step-num{font-size:10px;font-weight:700;letter-spacing:2px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px}
.step-ico{width:48px;height:48px;border-radius:var(--r2);margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--abg);border:1px solid var(--glass-b)}
.step-ttl{font-size:15px;font-weight:700;margin-bottom:8px}
.step-desc{font-size:13px;color:var(--t2);line-height:1.7}
/* Hero responsive */
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-c{text-align:center}
  .hero-p{max-width:100%;margin:0 auto 32px}
  .hero-btns{justify-content:center}
  .hero-visual{max-width:480px;margin:0 auto;width:100%}
}
.lstats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:580px;margin:0 auto 44px;text-align:center}
.lstat-v{font-size:2.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.03em;font-family:var(--fnum)}
.lstat-l{font-size:12px;color:var(--t3);margin-top:4px}
.cta-band-wrap{padding:0 5% 64px}
.cta-band{
  padding:64px 48px;border-radius:var(--r5);
  background:var(--grad);text-align:center;position:relative;overflow:hidden;
  box-shadow:0 0 60px rgba(77,143,255,.25),0 20px 60px rgba(0,0,0,.3);
}
.cta-band-bg{position:absolute;inset:0;background:var(--noise);pointer-events:none}
.cta-band-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.cta-orb1{width:300px;height:300px;background:rgba(255,255,255,.08);top:-80px;right:-60px;animation:blobf 12s ease-in-out infinite}
.cta-orb2{width:200px;height:200px;background:rgba(181,127,255,.15);bottom:-60px;left:-40px;animation:blobf 9s ease-in-out infinite reverse}
.cta-band-inner{position:relative;z-index:1}
.cta-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);border-radius:99px;padding:5px 14px;
  font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  margin-bottom:20px;
}
.cta-eyebrow svg{stroke:rgba(255,255,255,.9)}
.cta-band h2{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.025em}
.cta-band p{color:rgba(255,255,255,.78);margin-bottom:30px;font-size:.95rem;line-height:1.7}
.cta-main-btn{background:#fff!important;color:#0d1528!important;padding:13px 32px;font-size:14px;font-weight:700}
.cta-secondary-link{display:block;margin-top:14px;font-size:13px;color:rgba(255,255,255,.7);text-decoration:none;cursor:pointer;transition:color .2s}
.cta-secondary-link:hover{color:#fff}
.cta-trust-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.cta-trust-row span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.65);font-weight:500}
.cta-trust-row svg{stroke:rgba(255,255,255,.65)}

/* ═══ AESTHETIC CALLOUTS ════════════════════════════ */
.callouts-section{padding:0 5% 64px}
.callouts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;margin:0 auto}
.callout-card{
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-b);border-radius:var(--r3);padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:opacity .5s ease,transform .5s ease,box-shadow .3s ease,border-color .3s;
  opacity:0;transform:translateY(20px);
  transform-style:preserve-3d;will-change:transform,opacity;
}
.callout-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(100,160,255,0.07) 0%, transparent 65%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0;border-radius:var(--r3);
}
.callout-card:hover::before{opacity:1}
.callout-card.vis{opacity:1;transform:translateY(0)}
.callout-card:hover{box-shadow:0 20px 48px rgba(0,0,0,.28);border-color:var(--glass-b2)}
.callout-icon{
  width:38px;height:38px;border-radius:var(--r2);
  background:var(--abg);border:1px solid var(--glass-b);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.callout-icon svg{stroke:var(--a)}
.callout-icon-g{background:rgba(34,232,154,.12);border-color:rgba(34,232,154,.2)}
.callout-icon-g svg{stroke:#22e89a}
.callout-icon-p{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.22)}
.callout-icon-p svg{stroke:#a78bfa}
.callout-icon-a{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.2)}
.callout-icon-a svg{stroke:#fbbf24}
.callout-label{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--t3)}
.callout-val{font-size:14px;font-weight:700;color:var(--t);margin-top:1px}
.callout-text{flex:1}
.callout-badge{
  display:inline-flex;font-size:10.5px;font-weight:700;padding:4px 12px;
  border-radius:99px;letter-spacing:.4px;width:fit-content;
}
.callout-badge-g{background:rgba(34,232,154,.12);color:#22e89a;border:1px solid rgba(34,232,154,.2)}
.callout-badge-p{background:rgba(139,92,246,.12);color:#a78bfa;border:1px solid rgba(139,92,246,.2)}
.callout-line-graph{height:44px;position:relative}
.callout-spark{width:100%;height:44px;display:block}

@media(max-width:860px){.callouts-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.callouts-row{grid-template-columns:1fr}}
.lfooter{
  padding:28px 5% 20px;
  border-top:1px solid var(--glass-b);
  display:flex;flex-direction:column;align-items:center;gap:16px;
  background:var(--bg);
  text-align:center;
}
[data-theme=dark] .lfooter{background:rgba(6,11,24,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lfooter-brand{font-size:14px;font-weight:800;color:var(--t);display:flex;align-items:center;gap:6px}
.lfooter-brand .g{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lfooter-center{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 20px}
.lfooter-link{font-size:12px;color:var(--t2);cursor:pointer;transition:color .2s;font-weight:500;white-space:nowrap}
.lfooter-link:hover{color:var(--a2)}
.lfooter-dot{width:3px;height:3px;border-radius:50%;background:var(--t4)}
.lfooter-t{font-size:12px;color:var(--t3)}
.lfooter-copy{font-size:11px;color:var(--t3);padding-top:4px}

/* ═══ HERO GRAPH ════════════════════════════════════ */
.hero-graph-wrap{margin:36px auto 0;max-width:480px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-b);border-radius:var(--r4);padding:16px 16px 12px;position:relative;animation:fadeup .6s .4s ease both}
.hero-spark{width:100%;height:80px;display:block}
.hero-graph-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#22e89a;font-weight:600;margin-top:8px;padding:4px 10px;background:rgba(34,232,154,.1);border-radius:99px;border:1px solid rgba(34,232,154,.2)}
.hero-btn-sec{padding:11px 22px;font-size:14px;background:rgba(255,255,255,.06);color:var(--t);border:1px solid var(--glass-b)}

/* ═══ BENTO GRID ════════════════════════════════════ */
.bento-section{padding-bottom:80px}
.bento-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(180px,auto);
  gap:16px;
  max-width:1100px;margin:0 auto;
  text-align:left;
}
.bento-card{
  background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-b);border-radius:var(--r4);padding:28px 26px;
  position:relative;overflow:hidden;
  transition:opacity .55s ease,transform .55s ease,box-shadow .35s ease,border-color .3s ease;
  opacity:0;transform:perspective(900px) translateY(28px);
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
.bento-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(100,160,255,0.08) 0%, transparent 65%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0;border-radius:var(--r4);
}
.bento-card:hover::before{opacity:1}
.bento-card::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.5}
.bento-card.vis{opacity:1;transform:perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0)}
.bento-card:hover{box-shadow:0 28px 64px rgba(0,0,0,.38),0 0 0 1px var(--glass-b2);border-color:var(--glass-b2)}
.bento-xl{grid-column:span 7;grid-row:span 2}
.bento-md{grid-column:span 5;grid-row:span 2}
.bento-sm{grid-column:span 4;grid-row:span 2}
.bento-wide{grid-column:span 8;grid-row:span 1}
.bento-card-icon{
  width:40px;height:40px;border-radius:var(--r2);background:var(--abg);border:1px solid var(--glass-b);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;z-index:1;
}
.bento-card-icon svg{stroke:var(--a)}
.bento-icon-purple{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.25)}
.bento-icon-purple svg{stroke:#a78bfa}
.bento-icon-green{background:rgba(34,232,154,.12);border-color:rgba(34,232,154,.2)}
.bento-icon-green svg{stroke:#22e89a}
.bento-icon-amber{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.2)}
.bento-icon-amber svg{stroke:#fbbf24}
.bento-icon-blue{background:rgba(77,143,255,.14);border-color:rgba(77,143,255,.22)}
.bento-icon-blue svg{stroke:#6db3ff}
.bento-icon-teal{background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.2)}
.bento-icon-teal svg{stroke:#2dd4bf}
.bento-icon-pink{background:rgba(236,72,153,.1);border-color:rgba(236,72,153,.18)}
.bento-icon-pink svg{stroke:#f472b6}
.bento-card-label{font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--t3);margin-bottom:6px;position:relative;z-index:1}
.bento-card-ttl{font-size:15px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px;position:relative;z-index:1}
.bento-card-desc{font-size:12.5px;color:var(--t2);line-height:1.7;position:relative;z-index:1}

/* Bento graph */
.bento-graph-area{margin-top:20px;position:relative;z-index:1}
.bento-canvas{width:100%;height:110px;display:block}
.bento-graph-badge{
  position:absolute;top:8px;right:0;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:#22e89a;
  background:rgba(34,232,154,.1);border:1px solid rgba(34,232,154,.2);
  border-radius:99px;padding:4px 10px;
}

/* Mini calendar */
.bento-mini-cal{margin-top:18px;position:relative;z-index:1}
.bmc-row{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px;text-align:center}
.bmc-hdr span{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;padding:2px 0}
.bmc-d{font-size:10px;color:var(--t2);padding:4px 2px;border-radius:4px;cursor:default}
.bmc-today{background:var(--grad);color:#fff!important;font-weight:700;border-radius:6px}
.bmc-due{background:rgba(255,94,94,.15);color:#ff7070;font-weight:700;border-radius:6px;position:relative}

/* Savings goals list */
.bento-goals-list{margin-top:18px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.bgl-item{}
.bgl-top{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--t2);margin-bottom:5px}
.bgl-pct{color:var(--t)}
.bgl-bar{height:5px;background:var(--glass-b);border-radius:99px;overflow:hidden}
.bgl-fill{height:100%;border-radius:99px;transition:width 1.2s ease}

/* Notification list */
.bento-notif-list{margin-top:18px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.bnl-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r2);border:1px solid transparent;font-size:11.5px}
.bnl-item svg{flex-shrink:0;margin-top:1px}
.bnl-ttl{font-weight:600;margin-bottom:1px}
.bnl-sub{font-size:10.5px;color:var(--t3)}
.bnl-warn{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.18);color:var(--t)}
.bnl-warn svg{stroke:#fbbf24}
.bnl-red{background:rgba(255,94,94,.07);border-color:rgba(255,94,94,.16);color:var(--t)}
.bnl-red svg{stroke:#ff7070}
.bnl-ok{background:rgba(34,232,154,.07);border-color:rgba(34,232,154,.15);color:var(--t)}
.bnl-ok svg{stroke:#22e89a}

/* Budget bars */
.bento-budget-bars{margin-top:20px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.bbb-item{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;color:var(--t2)}
.bbb-item>span:first-child{width:72px;flex-shrink:0}
.bbb-track{flex:1;height:5px;background:var(--glass-b);border-radius:99px;overflow:hidden}
.bbb-fill{height:100%;border-radius:99px;background:var(--grad);transition:width 1.2s ease}
.bbb-warn{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.bbb-ok{background:linear-gradient(90deg,#22e89a,#17c68a)}
.bbb-pct{width:30px;text-align:right;color:var(--t)}
.bbb-pct-warn{color:#fbbf24}

/* Forecast chips */
.bento-forecast-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;position:relative;z-index:1}
.bfc-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:99px;border:1px solid var(--glass-b);color:var(--t2);background:var(--abg)}
.bfc-chip svg{stroke:var(--a)}
.bfc-chip-r{border-color:rgba(255,94,94,.2);background:rgba(255,94,94,.06);color:var(--t)}
.bfc-chip-r svg{stroke:#ff7070}
.bfc-chip-g{border-color:rgba(34,232,154,.2);background:rgba(34,232,154,.07);color:var(--t)}
.bfc-chip-g svg{stroke:#22e89a}

/* Theme dots */
.bento-theme-dots{display:flex;gap:8px;margin-top:20px;position:relative;z-index:1}
.btd{width:20px;height:20px;border-radius:50%;border:2px solid var(--glass-b)}
.btd.dark{background:#0d1528}
.btd.light{background:#f0f5ff}
.btd.purple{background:linear-gradient(135deg,#1a0d2e,#7c3aed)}

/* Step icon wrap (replace emoji) */
.step-ico-wrap{width:48px;height:48px;border-radius:var(--r2);margin-bottom:14px;display:flex;align-items:center;justify-content:center;background:var(--abg);border:1px solid var(--glass-b);position:relative;z-index:1}
.step-ico-wrap svg{stroke:var(--a)}

/* Auth action button */
.auth-action-btn{width:100%;justify-content:center;margin-bottom:0}
.auth-alt-row{display:flex;justify-content:center;margin:14px 0 4px}
.auth-ghost-btn{display:inline-flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--glass-b);border-radius:99px;padding:8px 18px;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .2s}
.auth-ghost-btn:hover{background:var(--abg);color:var(--t);border-color:var(--glass-b2)}
.auth-ghost-btn svg{stroke:var(--a)}
.auth-switch-row{display:flex;justify-content:space-between;margin-top:16px}

/* Scroll-reveal stagger for bento cards */
.bento-card:nth-child(1){transition-delay:.05s}
.bento-card:nth-child(2){transition-delay:.1s}
.bento-card:nth-child(3){transition-delay:.15s}
.bento-card:nth-child(4){transition-delay:.2s}
.bento-card:nth-child(5){transition-delay:.25s}
.bento-card:nth-child(6){transition-delay:.3s}
.bento-card:nth-child(7){transition-delay:.35s}

/* Scroll-in transitions for sections */
.scroll-fade{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.scroll-fade.vis{opacity:1;transform:translateY(0)}

/* Light mode fixes for bento and footer */
[data-theme=light] .bento-card{background:rgba(255,255,255,.85);border-color:rgba(37,99,235,.1);box-shadow:0 2px 12px rgba(0,0,0,.06)}
[data-theme=light] .bento-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.12)}
[data-theme=light] .bnl-warn{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25)}
[data-theme=light] .bnl-red{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.18)}
[data-theme=light] .bnl-ok{background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.2)}
[data-theme=light] .hero-grid{opacity:.18}
[data-theme=light] .lfooter{background:#f8faff;border-top-color:rgba(37,99,235,.12)}
[data-theme=light] .lfooter-t{color:#64748b}
[data-theme=light] .lfooter-brand{color:#0d1528}

/* ═══ AUTH ════════════════════════════════════════ */
.auth-ov{position:fixed;inset:0;z-index:2000;background:rgba(6,11,24,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:16px}
.auth-ov.open{opacity:1;pointer-events:all}
.auth-modal{
  background:var(--glass-h);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid var(--glass-b2);border-radius:var(--r5);padding:36px 32px;
  width:420px;max-width:100%;max-height:92vh;overflow-y:auto;
  box-shadow:var(--sh-lg);position:relative;
  transform:translateY(24px) scale(.96);transition:transform .35s cubic-bezier(.34,1.56,.64,1)
}
.auth-modal::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;border-radius:var(--r5);opacity:.8}
.auth-ov.open .auth-modal{transform:translateY(0) scale(1)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;position:relative;z-index:1}
.auth-logo{width:38px;height:38px;border-radius:var(--r2);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;box-shadow:var(--sh-glow);flex-shrink:0}
.auth-bname{font-size:15px;font-weight:800;display:flex;align-items:center;gap:0}
.auth-btag{font-size:11px;color:var(--t3);letter-spacing:1px}
.auth-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:16px;transition:all .2s;cursor:pointer;background:var(--glass);z-index:2}
.auth-x:hover{background:var(--rbg);color:var(--r)}
.av{display:none;position:relative;z-index:1}.av.on{display:block}
.auth-ttl{font-size:1.75rem;font-weight:800;letter-spacing:-.025em;margin-bottom:4px}
.auth-sub{font-size:13.5px;color:var(--t2);margin-bottom:22px}
.auth-div{display:flex;align-items:center;gap:10px;margin:16px 0}
.auth-div span{font-size:11px;color:var(--t3);white-space:nowrap}
.auth-div::before,.auth-div::after{content:'';flex:1;height:1px;background:var(--glass-b)}
.auth-ft{display:flex;justify-content:space-between;margin-top:16px}
.alabel{font-size:12.5px;color:var(--a2);cursor:pointer;transition:color .2s}
.alabel:hover{color:var(--t)}
.aerr{font-size:12.5px;color:var(--r);min-height:18px;margin-bottom:5px}
.aok{font-size:12.5px;color:var(--g);background:var(--gbg);border-radius:var(--r1);padding:10px 14px;margin-bottom:10px}
.mbox{background:var(--abg);border:1px solid var(--glass-b2);border-radius:var(--r2);padding:14px;margin:10px 0;text-align:center}
.mtok{font-size:11px;color:var(--a);word-break:break-all;margin-top:6px;font-family:var(--fnum)}

/* ═══ APP LAYOUT ════════════════════════════════════ */
#app{display:flex;flex-direction:column;min-height:100vh;position:relative;}

/* ── SIDEBAR ──────────────────────────────────────────── */
.sidebar{
  width:var(--sw);
  background:var(--bg-a);
  border-right:1px solid var(--glass-b);
  position:fixed;
  top:var(--th);
  bottom:0;
  height:auto;
  display:flex;flex-direction:column;
  z-index:300;overflow-y:auto;overflow-x:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1),background var(--tr),box-shadow var(--tr);
  transform:translateX(-100%);
}
.sidebar.open{transform:translateX(0);box-shadow:4px 0 40px rgba(0,0,0,.22)}

/* ── SIDEBAR HEADER: burger left, logo right ── */
.sbhdr{
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;
  flex-direction:row-reverse;
  gap:10px;position:relative;flex-shrink:0;
}
.sblogo-row{display:flex;align-items:center;gap:9px;min-width:0;flex-direction:row-reverse}
.sblogo{width:32px;height:32px;border-radius:var(--r2);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 3px 12px rgba(77,143,255,.35)}
.sbname{font-size:14px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.sbname .g{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ── ANIMATED HAMBURGER INSIDE SIDEBAR ── */
.sb-toggle-wrap{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex-shrink:0;cursor:pointer;
  border-radius:var(--r1);
  transition:background .18s;
}
.sb-toggle-wrap:hover{background:var(--abg)}
#checkbox{display:none}
.toggle{
  position:relative;width:18px;height:12px;cursor:pointer;display:block;
}
.bar{
  position:absolute;left:0;right:0;height:2px;border-radius:1px;
  background:var(--t2);
  transition:all 0.35s cubic-bezier(.5,-0.35,.35,1.5);
}
.bar--top{top:0;transition-property:top,margin,transform;transition-delay:.35s,0s,0s}
.bar--middle{top:50%;transform:translateY(-50%);transition-property:top,opacity;transition-duration:.35s,0s;transition-delay:.455s,.455s}
.bar--bottom{bottom:0;transition-property:bottom,transform;transition-delay:0s}
#checkbox:checked + .toggle .bar--top{top:50%;transform:translateY(-50%) rotate(45deg);transition-delay:.105s,.455s,.455s}
#checkbox:checked + .toggle .bar--middle{opacity:0;transition-duration:.35s,0s;transition-delay:0s,.35s}
#checkbox:checked + .toggle .bar--bottom{bottom:50%;transform:translateY(50%) rotate(-45deg);transition-delay:.455s,.455s}

/* ── PROFILE SECTION: centered, photo in middle ── */
.sb-profile-top{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:20px 16px 18px;
  border-bottom:1px solid var(--glass-b);
  cursor:pointer;transition:background .2s;flex-shrink:0;
  position:relative;
}
.sb-profile-top:hover{background:var(--abg)}
.sb-profile-pic{
  width:62px;height:62px;border-radius:50%;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
  box-shadow:0 3px 14px rgba(77,143,255,.32);
  overflow:hidden;margin-bottom:10px;
  border:2px solid rgba(255,255,255,.12);
}
.sb-profile-pic img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sb-profile-info{min-width:0;width:100%}
.sb-profile-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t)}
.sb-profile-tag{font-size:10px;color:var(--a2);letter-spacing:.4px;margin-top:2px;text-transform:uppercase}
.sb-logout-btn{
  position:absolute;top:12px;right:12px;
  width:24px;height:24px;border-radius:var(--r1);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);background:transparent;border:1px solid var(--glass-b);
  flex-shrink:0;cursor:pointer;transition:all .2s;padding:0;
}
.sb-logout-btn:hover{background:var(--rbg);color:var(--r);border-color:rgba(255,94,94,.25)}

/* ── NAV ITEMS ── */
.sbnav{flex:1;padding:10px 7px}
.sbgrp{margin-bottom:18px}
.sbgl{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t3);padding:0 7px;margin-bottom:5px}
.sbi{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;
  color:var(--t2);transition:color .3s .1s ease-in;
  margin-bottom:1px;user-select:none;
  position:relative;overflow:hidden;
  border-bottom:1px solid transparent;
}
/* Sweep fill — slides in from left on hover */
.sbi::after{
  content:'';
  position:absolute;
  left:0;bottom:0;height:100%;
  background:var(--abg);
  width:0;
  transition:width .28s ease-in;
  z-index:0;
  border-radius:10px;
}
.sbi:hover::after{width:100%}
.sbi:hover{color:var(--t)}
.sbi > *{position:relative;z-index:1}
.sbi svg{width:14px;height:14px;flex-shrink:0;stroke-width:1.8;transition:stroke .2s;position:relative;z-index:1}
.sbi.on{background:var(--abg2);color:var(--a);font-weight:600}
.sbi.on::after{width:100%;background:var(--abg2)}
.sbi.on::before{content:'';position:absolute;left:0;top:18%;height:64%;width:2.5px;background:var(--grad);border-radius:0 2px 2px 0;z-index:2}

.sbft{padding:10px 14px;border-top:1px solid var(--glass-b);display:flex;flex-direction:column;gap:8px}
.sb-brand-mini{display:flex;align-items:center;justify-content:center;gap:7px;padding:4px 0}
.sb-logout-full{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px;border-radius:10px;cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--t3);background:transparent;border:1px solid var(--glass-b);
  transition:all .2s;letter-spacing:.2px;
}
.sb-logout-full:hover{background:var(--rbg);color:var(--r);border-color:rgba(255,94,94,.25)}
#sb-av{background:var(--grad)}

/* ── TOPBAR HAMBURGER (small) ── */
.hamburger{
  position:relative;width:24px;height:18px;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  background:none;border:none;padding:0;flex-shrink:0;
}
.hamburger .hb{
  display:block;height:2.5px;border-radius:2px;
  background:var(--t2);
  transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .25s ease,width .25s ease,background .2s;
  transform-origin:center;
  width:100%;
}
.hamburger .hb-t{width:100%}
.hamburger .hb-m{width:66%;margin-left:auto}
.hamburger .hb-b{width:100%}
.hamburger:hover .hb{background:var(--a2)}
.hamburger.active .hb-t{transform:translateY(8px) rotate(45deg);width:100%;background:var(--a2)}
.hamburger.active .hb-m{opacity:0;width:0}
.hamburger.active .hb-b{transform:translateY(-8px) rotate(-45deg);background:var(--a2)}

/* ── LIGHT MODE SIDEBAR OVERRIDES ── */
[data-theme=light] .sidebar{background:#f4f8ff;border-right-color:rgba(77,143,255,.12)}

[data-theme=light] .sb-profile-top{border-bottom-color:rgba(77,143,255,.12)}
[data-theme=light] .sbi::after{background:rgba(77,143,255,.07)}
[data-theme=light] .sbi.on{background:rgba(77,143,255,.12);color:var(--a)}
[data-theme=light] .sbi.on::after{background:rgba(77,143,255,.12)}
[data-theme=light] .bar{background:var(--t2)}
[data-theme=dark] .sidebar{background:#0a0f20;border-right-color:rgba(77,143,255,.1)}

.veil{display:none;position:fixed;inset:0;background:rgba(6,11,24,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:299}
.veil.open{display:block}
.main{margin-left:0;flex:1;min-height:100vh;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding-top:var(--th)}
.topbar{
  position:fixed;top:0;left:0;right:0;
  z-index:400;min-height:var(--th);padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-b);transition:background var(--tr);
  width:100%;
}
.tb-l{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.tb-ttl{font-size:14px;font-weight:800;letter-spacing:-.01em}
.tb-sub{font-size:12px;color:var(--t3);margin-top:1px;letter-spacing:.5px}
.tb-r{display:flex;align-items:center;gap:7px;flex-shrink:0}
.icoBtn{width:32px;height:32px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;color:var(--t2);background:var(--glass);border:1px solid var(--glass-b);transition:all .2s;cursor:pointer;position:relative}
.icoBtn:hover{background:var(--abg);color:var(--a2);border-color:var(--glass-b2);transform:translateY(-1px)}
.notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--r);border:2px solid var(--bg-a);animation:bpulse 2s infinite}

/* ═══ DARK MODE SWITCH ══════════════════════════════ */
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch #input,.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#2196f3;transition:0.4s;z-index:0;overflow:hidden}
.sun-moon{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:yellow;transition:0.4s}
.switch input:checked+.slider{background-color:black}
.switch input:focus+.slider{box-shadow:0 0 1px #2196f3}
.switch input:checked+.slider .sun-moon{transform:translateX(20px);background-color:white;animation:rotate-center 0.6s ease-in-out both}
.moon-dot{opacity:0;transition:0.4s;fill:gray}
.switch input:checked+.slider .sun-moon .moon-dot{opacity:1}
.slider.round{border-radius:26px}
.slider.round .sun-moon{border-radius:50%}
.moon-dot:nth-child(1){left:7px;top:2px;position:absolute;width:5px;height:5px;z-index:4}
.moon-dot:nth-child(2){left:2px;top:7px;position:absolute;width:8px;height:8px;z-index:4}
.moon-dot:nth-child(3){left:12px;top:13px;position:absolute;width:2px;height:2px;z-index:4}
.light-ray:nth-child(4){left:-6px;top:-6px;position:absolute;width:33px;height:33px;z-index:-1;fill:white;opacity:10%}
.light-ray:nth-child(5){left:-50%;top:-50%;position:absolute;width:42px;height:42px;z-index:-1;fill:white;opacity:10%}
.light-ray:nth-child(6){left:-14px;top:-14px;position:absolute;width:46px;height:46px;z-index:-1;fill:white;opacity:10%}
.cloud-light{position:absolute;fill:#eee;animation-name:cloud-move;animation-duration:6s;animation-iteration-count:infinite}
.cloud-dark{position:absolute;fill:#ccc;animation-name:cloud-move;animation-duration:6s;animation-iteration-count:infinite;animation-delay:1s}
.cloud-dark:nth-child(7){left:23px;top:11px;width:30px}
.cloud-dark:nth-child(8){left:34px;top:8px;width:15px}
.cloud-dark:nth-child(9){left:14px;top:18px;width:23px}
.cloud-light:nth-child(10){left:28px;top:14px;width:30px}
.cloud-light:nth-child(11){left:37px;top:11px;width:15px}
.cloud-light:nth-child(12){left:17px;top:20px;width:23px}
@keyframes cloud-move{0%{transform:translateX(0px)}40%{transform:translateX(4px)}80%{transform:translateX(-4px)}100%{transform:translateX(0px)}}
.stars{transform:translateY(-26px);opacity:0;transition:0.4s}
.star{fill:white;position:absolute;transition:0.4s;animation-name:star-twinkle;animation-duration:2s;animation-iteration-count:infinite}
.switch input:checked+.slider .stars{transform:translateY(0);opacity:1}
.star:nth-child(1){width:15px;top:1px;left:2px;animation-delay:0.3s}
.star:nth-child(2){width:5px;top:12px;left:2px}
.star:nth-child(3){width:9px;top:15px;left:8px;animation-delay:0.6s}
.star:nth-child(4){width:14px;top:0px;left:14px;animation-delay:1.3s}
@keyframes star-twinkle{0%{transform:scale(1)}40%{transform:scale(1.2)}80%{transform:scale(0.8)}100%{transform:scale(1)}}
@keyframes rotate-center{0%{transform:translateX(20px) rotate(0)}100%{transform:translateX(20px) rotate(360deg)}}

/* ═══ PAGE ══════════════════════════════════════════ */
.page{display:none}
.page.on{display:block;animation:pgIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.phdr{padding:20px 28px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;margin-bottom:20px;min-height:0}
.phdr:empty{display:none;margin-bottom:0;padding:0}
.phdr-title{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.phdr-title .tb-ttl{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phdr-title .tb-sub{font-size:13px;color:var(--t3);letter-spacing:.6px;text-transform:uppercase}
.ph1{font-size:1.4rem;font-weight:800;letter-spacing:-.025em}
.psub{font-size:10px;color:var(--t3);margin-top:2px;letter-spacing:.5px}
.pbody{padding:0 28px 72px}

/* ═══ GLASS CARD ════════════════════════════════════ */
.card{
  background:var(--glass);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-b);border-radius:var(--r4);padding:22px 24px;
  box-shadow:var(--sh-sm);transition:border-color .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--glass-shine)}
.card::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.5}
.card>*{position:relative;z-index:1}
.card:hover{border-color:var(--glass-b2);box-shadow:var(--sh)}
.card-sm{background:rgba(255,255,255,0.04);border:1px solid var(--glass-b);border-radius:var(--r2);padding:12px 14px}
[data-theme=light] .card-sm{background:rgba(255,255,255,0.5)}

/* CARD MINIMIZE */
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--glass-b)}
.card-title{font-size:15px;font-weight:700;color:var(--t2);letter-spacing:.6px;text-transform:uppercase}
.card-controls{display:flex;align-items:center;gap:4px}
.minimize-btn{width:22px;height:22px;border-radius:var(--r0);display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:all .2s;font-size:14px;border:none;background:none}
.minimize-btn:hover{background:var(--abg);color:var(--a2)}
.card-body{transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);overflow:visible;max-height:4000px}
.card-body.scrollable{overflow-y:auto;overflow-x:hidden;max-height:360px;scrollbar-width:thin;scrollbar-color:var(--t4) transparent}
.card-body.scrollable::-webkit-scrollbar{width:3px}
.card-body.scrollable::-webkit-scrollbar-track{background:transparent}
.card-body.scrollable::-webkit-scrollbar-thumb{background:var(--t4);border-radius:99px}
.card-body.collapsed{max-height:0!important;opacity:0!important;overflow:hidden!important;margin:0;padding:0}

/* ═══ METRICS ═══════════════════════════════════════ */
.mrow{display:grid;gap:16px;margin-bottom:20px}
.metric{
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-b);border-radius:var(--r3);padding:16px 18px;
  position:relative;overflow:hidden;box-shadow:var(--sh-sm);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.metric::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--glass-shine)}
.metric::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.5}
.metric>*{position:relative;z-index:1}
.metric:hover{transform:translateY(-2px) scale(1.01);box-shadow:var(--sh-glow);border-color:var(--glass-b2)}
.mtop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px}
.mlbl{font-size:13px;color:var(--t3);font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.mico{width:30px;height:30px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center}
.mico svg{width:14px;height:14px;stroke-width:1.8}
.mval{font-family:var(--fnum);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin-bottom:2px}
.mnote{font-size:14px;color:var(--t3)}
.mbar{position:absolute;bottom:0;left:0;right:0;height:2px}
.mg .mico{background:var(--gbg);color:var(--g)}.mg .mbar{background:linear-gradient(90deg,var(--g),transparent)}
.mg .mval{background:linear-gradient(135deg,#22e89a,#38d9f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mr .mico{background:var(--rbg);color:var(--r)}.mr .mbar{background:linear-gradient(90deg,var(--r),transparent)}
.mr .mval{background:linear-gradient(135deg,#ff5e5e,#ff8a65);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mb .mico{background:var(--cybg);color:var(--cy)}.mb .mbar{background:linear-gradient(90deg,var(--cy),transparent)}
.mb .mval{background:linear-gradient(135deg,#38d9f5,#4d8fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ma .mico{background:var(--ambg);color:var(--am)}.ma .mbar{background:linear-gradient(90deg,var(--am),transparent)}
.ma .mval{background:linear-gradient(135deg,#ffb347,#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mp .mico{background:var(--pubg);color:var(--pu)}.mp .mbar{background:linear-gradient(90deg,var(--pu),transparent)}
.mp .mval{background:linear-gradient(135deg,#b57fff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ═══ BUTTONS ═══════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r1);font-size:13px;font-weight:700;transition:all .2s cubic-bezier(.34,1.56,.64,1);border:1px solid transparent;cursor:pointer;white-space:nowrap;letter-spacing:.2px;font-family:var(--f)}
.btn:active{transform:scale(.96)}
.bp{background:var(--grad);color:#fff;border-color:transparent!important;box-shadow:0 3px 14px rgba(77,143,255,.35)}
.bp:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 20px rgba(77,143,255,.45)}
.bp:hover::before{opacity:1}
.bp:hover{box-shadow:0 6px 28px rgba(124,58,237,.6),0 2px 12px rgba(0,0,0,.25);transform:translateY(-1px)}
.bp:active{transform:scale(.96)}
.bp>*,.bp svg,.btn.bp>*{position:relative;z-index:1}
.bo{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--glass-b2);color:var(--t2)}
.bo:hover{background:var(--abg);color:var(--a2);border-color:var(--glass-b2);transform:translateY(-1px)}
.bg2b{background:transparent;color:var(--t2)}
.bg2b:hover{background:var(--abg);color:var(--a2)}
.bd{background:var(--rbg);color:var(--r);border-color:transparent}
.bd:hover{border-color:var(--r);transform:translateY(-1px)}
.bs{background:var(--gbg);color:var(--g);border-color:transparent}
.bs:hover{border-color:var(--g);transform:translateY(-1px)}
.bsm{padding:5px 12px;font-size:11.5px}
.bxs{padding:4px 9px;font-size:11px;border-radius:var(--r0)}
.bico{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r1);color:var(--t2);transition:all .2s;border:none;background:none}
.bico:hover{background:var(--abg);color:var(--a2);transform:scale(1.1)}
.bico svg{width:13px;height:13px;stroke-width:1.8}
.bfull{width:100%;justify-content:center}
.bgrad{background:linear-gradient(135deg,#4d8fff 0%,#b57fff 100%);color:#fff;border:none;box-shadow:0 4px 18px rgba(77,143,255,.45),0 0 0 0 rgba(77,143,255,.2)}
.bgrad:hover{opacity:1;transform:translateY(-2px);box-shadow:0 8px 28px rgba(77,143,255,.55),0 0 20px rgba(181,127,255,.3);filter:brightness(1.08)}
.brow{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ═══ FORMS ════════════════════════════════════════ */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:13px;font-weight:700;color:var(--t2);margin-bottom:5px;letter-spacing:.3px}
.fc{
  width:100%;background:rgba(255,255,255,0.07);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(120,150,200,0.2);
  border-radius:var(--r2);padding:10px 14px;font-size:13.5px;color:var(--t);
  transition:all .2s;outline:none;font-family:var(--f);font-weight:500;
  line-height:1.5;
}
.fc:focus{border-color:var(--a);background:rgba(77,143,255,.06);box-shadow:0 0 0 3px rgba(77,143,255,.1)}
.fc::placeholder{color:var(--t3)}
[data-theme=light] .fc{background:rgba(255,255,255,.85);border-color:rgba(77,143,255,.2);color:#1a2a4a}
[data-theme=light] .fc:focus{background:#fff;border-color:var(--a)}
select.fc option{background:rgba(24,28,38,1);color:var(--t);padding:8px 12px}
[data-theme=light] select.fc option{background:#ffffff;color:#1a2a4a}
select.fc{
  appearance:none;-webkit-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='%238ba5d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:34px;cursor:pointer;
}
textarea.fc{resize:vertical;min-height:76px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.ttabs{display:flex;gap:7px;margin-bottom:14px}
.ttab{flex:1;padding:9px;border-radius:var(--r1);border:1.5px solid var(--glass-b);text-align:center;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s;color:var(--t2);background:var(--glass)}
.ttab.ti{background:var(--gbg);border-color:var(--g);color:var(--g)}
.ttab.te{background:var(--rbg);border-color:var(--r);color:var(--r)}

/* ═══ MONTH TABS ════════════════════════════════════ */
.month-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.mtab{padding:5px 12px;border-radius:99px;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .2s;color:var(--t2);background:var(--glass);border:1px solid var(--glass-b);white-space:nowrap}
.mtab:hover{background:var(--abg);color:var(--a2)}
.mtab.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(77,143,255,.3)}

/* ═══ BADGES ════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;letter-spacing:.1px;font-family:var(--fnum)}
.bgg{background:rgba(34,232,154,.1);color:var(--g);border:none!important;box-shadow:none!important}
.bgr{background:rgba(255,94,94,.1);color:var(--r);border:none!important;box-shadow:none!important}
.bga{background:rgba(255,180,71,.1);color:var(--am);border:none!important;box-shadow:none!important}
.bgb{background:var(--cybg);color:var(--cy);border:none!important;box-shadow:none!important}
.bgp{background:var(--pubg);color:var(--pu);border:none!important;box-shadow:none!important}
.bggr{background:rgba(100,130,180,.12);color:var(--t2)}

/* ═══ PROGRESS ══════════════════════════════════════ */
.prog{background:rgba(255,255,255,.06);border-radius:99px;height:5px;overflow:hidden}
[data-theme=light] .prog{background:rgba(0,0,0,.08)}
.pf{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.pfg{background:linear-gradient(90deg,var(--g),rgba(34,232,154,.5))}
.pfr{background:linear-gradient(90deg,var(--r),rgba(255,94,94,.5))}
.pfa{background:linear-gradient(90deg,var(--am),rgba(255,179,71,.5))}
.pfb{background:var(--grad)}

/* ═══ TABLES ════════════════════════════════════════ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:13px;font-weight:700;color:var(--t3);letter-spacing:.8px;text-transform:uppercase;padding:0 10px 10px;border-bottom:1px solid var(--glass-b)}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(77,143,255,.04)}
tbody td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--t2);vertical-align:middle}
[data-theme=light] tbody td{border-bottom:1px solid rgba(0,0,0,.05)}
tbody td.tdp{color:var(--t);font-weight:600}
.ap{color:var(--g);font-family:var(--fnum);font-weight:600}
.an{color:var(--r);font-family:var(--fnum);font-weight:600}
.am2{font-family:var(--fnum)}

/* ═══ NOTIFICATION PANEL ════════════════════════════ */
.notif-panel{
  position:fixed;top:calc(var(--th) + 6px);right:12px;z-index:500;
  width:320px;max-height:440px;overflow-y:auto;
  background:var(--glass-h);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border:1px solid var(--glass-b2);border-radius:var(--r3);
  box-shadow:var(--sh-lg);
  transform:translateY(-8px) scale(.97);opacity:0;pointer-events:none;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.notif-panel::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;border-radius:var(--r3)}
.notif-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.notif-hdr{padding:14px 16px 10px;border-bottom:1px solid var(--glass-b);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.notif-title{font-size:12px;font-weight:700;color:var(--t)}
.notif-count{font-size:10px;background:var(--rbg);color:var(--r);border-radius:99px;padding:2px 7px;font-weight:700;font-family:var(--fnum)}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s;position:relative;z-index:1;border:none!important}
.notif-item:hover{background:var(--abg)}
.notif-item:last-child{border-bottom:none}
.notif-ico{width:30px;height:30px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.notif-txt{flex:1;min-width:0}
.notif-name{font-size:12px;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-sub{font-size:10.5px;color:var(--t3);margin-top:1px}
.notif-badge{font-size:10px;font-weight:600;border-radius:5px;padding:1px 6px;font-family:var(--fnum);white-space:nowrap}
.notif-empty{padding:24px 16px;text-align:center;color:var(--t3);font-size:12px;position:relative;z-index:1}

/* ═══ BILL TICKER ═══════════════════════════════════ */
.bill-ticker{
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,179,71,.2);border-radius:var(--r2);
  padding:10px 14px;margin-bottom:14px;overflow:hidden;position:relative;
}
.bill-ticker::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.5}
.bill-ticker-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px;position:relative;z-index:1;min-height:26px}
.bill-ticker-count{position:relative;z-index:1;font-size:10px;color:var(--t3)}
.ticker-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--ambg);border:none;
  color:var(--t);border-radius:99px;padding:3px 10px;font-size:12px;white-space:nowrap;
}
.ticker-pill strong{color:var(--am);font-weight:700}

/* ═══ MODAL ════════════════════════════════════════ */
.mov{position:fixed;inset:0;z-index:900;background:rgba(6,11,24,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:16px}
.mov.open{opacity:1;pointer-events:all}
.modal{
  background:var(--glass-h);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid var(--glass-b2);border-radius:var(--r4);
  width:500px;max-width:100%;max-height:92vh;overflow-y:auto;
  box-shadow:var(--sh-lg);position:relative;
  transform:translateY(24px) scale(.95);transition:transform .3s cubic-bezier(.34,1.56,.64,1)
}
.modal::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;border-radius:var(--r4);opacity:.6}
.modal>*{position:relative;z-index:1}
.mov.open .modal{transform:translateY(0) scale(1)}
.mhdr{padding:18px 20px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--glass-b);padding-bottom:12px;margin-bottom:0}
.mhdr h3{font-size:14px;font-weight:800;letter-spacing:-.01em}
.mx{width:26px;height:26px;border-radius:var(--r0);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:15px;transition:all .18s;cursor:pointer;background:var(--glass)}
.mx:hover{background:var(--rbg);color:var(--r)}
.mbody{padding:16px 20px 22px}

/* Delete confirm modal */
.del-warn{background:var(--rbg);border:1px solid rgba(255,94,94,.25);border-radius:var(--r2);padding:14px;margin-bottom:14px}
.del-warn-ttl{font-size:12px;font-weight:700;color:var(--r);margin-bottom:5px}
.del-warn-body{font-size:12.5px;color:var(--t2)}

/* ═══ TOAST NOTIFICATION ══════════════════════════════════════════════════ */
:root{--toast-inset:1.4rem;}

.splurge-toast{
  position:fixed;top:0;right:0;z-index:9999;
  margin:var(--toast-inset);
  width:22rem;max-width:calc(100vw - 2.8rem);
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 12px 12px 14px;
  border-radius:10px;overflow:hidden;
  /* Light mode base — overridden in dark */
  background:#ffffff;
  box-shadow:0 4px 20px rgba(0,0,0,.13),0 1px 4px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.08);
  color:rgba(0,0,0,.75);
  transform:translateX(calc(100% + var(--toast-inset)));
  transition:transform .0001s;
  pointer-events:none;
}
/* countdown bar */
.splurge-toast__bar{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:currentColor;transform-origin:left;
  opacity:.0;
}
.splurge-toast.show{
  transform:translateX(0);
  transition:transform .38s cubic-bezier(.22,.68,0,1.3);
  pointer-events:auto;
  animation:_toast-slidein .38s cubic-bezier(.22,.68,0,1.3) forwards,
             _toast-slideout .38s cubic-bezier(.4,0,.6,1) 3.62s forwards;
}
.splurge-toast.show .splurge-toast__bar{
  opacity:1;
  animation:_toast-countdown 4s linear forwards;
}
/* pause on hover */
.splurge-toast:hover{animation-play-state:paused!important;}
.splurge-toast:hover .splurge-toast__bar{animation-play-state:paused!important;}

@keyframes _toast-slidein{from{transform:translateX(calc(100% + var(--toast-inset)))}to{transform:translateX(0)}}
@keyframes _toast-slideout{from{transform:translateX(0)}to{transform:translateX(calc(100% + var(--toast-inset)))}}
@keyframes _toast-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* icon circle */
.splurge-toast__icon{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.splurge-toast.ok  .splurge-toast__icon{background:rgba(34,232,154,.15);color:var(--g,#22e89a);}
.splurge-toast.err .splurge-toast__icon{background:rgba(255,94,94,.15); color:var(--r,#ff5e5e);}
.splurge-toast.inf .splurge-toast__icon{background:rgba(77,143,255,.15);color:var(--a,#4d8fff);}

/* accent bar color */
.splurge-toast.ok  .splurge-toast__bar{background:var(--g,#22e89a);}
.splurge-toast.err .splurge-toast__bar{background:var(--r,#ff5e5e);}
.splurge-toast.inf .splurge-toast__bar{background:var(--a,#4d8fff);}

/* body */
.splurge-toast__body{flex:1;min-width:0;}
.splurge-toast__header{
  font-size:13px;font-weight:700;margin:0 0 2px;
  color:rgba(0,0,0,.88);letter-spacing:.2px;line-height:1.3;
}
.splurge-toast__msg{
  font-size:12px;margin:0;line-height:1.45;
  color:rgba(0,0,0,.55);word-break:break-word;
}

/* close button */
.splurge-toast__close{
  flex-shrink:0;background:none;border:none;padding:2px 4px;
  cursor:pointer;font-size:12px;line-height:1;margin-top:1px;
  color:rgba(0,0,0,.35);border-radius:4px;transition:all .15s;
}
.splurge-toast__close:hover{color:rgba(0,0,0,.7);background:rgba(0,0,0,.07);}

/* ── DARK MODE overrides ── */
[data-theme="dark"] .splurge-toast,
:root:not([data-theme="light"]) .splurge-toast{
  background:var(--glass-h,rgba(15,22,41,.96));
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-b2,rgba(77,143,255,.18));
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  color:var(--t,#e8eeff);
}
[data-theme="dark"] .splurge-toast__header,
:root:not([data-theme="light"]) .splurge-toast__header{
  color:var(--t,#e8eeff);
}
[data-theme="dark"] .splurge-toast__msg,
:root:not([data-theme="light"]) .splurge-toast__msg{
  color:var(--t2,#8ba5d4);
}
[data-theme="dark"] .splurge-toast__close,
:root:not([data-theme="light"]) .splurge-toast__close{
  color:var(--t3,#4a5a80);
}
[data-theme="dark"] .splurge-toast__close:hover,
:root:not([data-theme="light"]) .splurge-toast__close:hover{
  color:var(--t,#e8eeff);background:rgba(255,255,255,.06);
}

/* mobile */
@media(max-width:480px){
  :root{--toast-inset:0.8rem;}
  .splurge-toast{width:calc(100vw - 1.6rem);}
}


/* ═══ CALENDAR ══════════════════════════════════════ */
.cnav{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.cmlbl{font-size:15px;font-weight:700;flex:1;text-align:center;letter-spacing:.5px;font-family:var(--fnum)}
.cdaynames{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cdayname{text-align:center;font-size:13px;font-weight:700;color:var(--t3);padding:7px 0;text-transform:uppercase;letter-spacing:.8px}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ccell{background:rgba(255,255,255,.03);border:1px solid var(--glass-b);border-radius:var(--r1);padding:9px 5px;min-height:106px;cursor:pointer;transition:all .2s}
[data-theme=light] .ccell{background:rgba(255,255,255,.4)}
.ccell:hover{border-color:rgba(77,143,255,.3);background:var(--abg);transform:scale(1.02)}
.ccell.today{border-color:var(--a)!important;background:var(--abg)}
.ccell.otherM .cdate{color:var(--t4);opacity:.4}
.ccell.hasBill{border-color:rgba(255,179,71,.3)}
.cdate{font-size:17px;font-weight:800;margin-bottom:5px;font-family:var(--fnum)}
.ccell.today .cdate{color:var(--a);font-weight:700}
.cdots{display:flex;flex-wrap:wrap;gap:2px}
.cdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.cdi{background:var(--g)}.cde{background:var(--r)}.cdb{background:var(--am)}
.camt{font-size:11px;font-family:var(--fnum);color:var(--t3);margin-top:2px}

/* ═══ BILL ROW ══════════════════════════════════════ */
.brow2{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--glass-b);transition:all .15s}
.brow2:last-child{border-bottom:none}
.brow2:hover{background:var(--abg);border-radius:var(--r1);padding-left:6px;margin:0 -6px;padding-right:6px}
.bico2{width:26px;height:26px;border-radius:var(--r0);background:var(--ambg);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;border:1px solid var(--glass-b)}
.binf{flex:1;min-width:0}
.bnm{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmt{font-size:9.5px;color:var(--t3);margin-top:1px}
.bamt{font-family:var(--fnum);font-size:11.5px;font-weight:600;color:var(--r);white-space:nowrap}

/* ═══ HEALTH ════════════════════════════════════════ */
.hbox{background:var(--abg);border:1px solid var(--glass-b2);border-radius:var(--r3);padding:12px 14px}
.hrow{display:flex;align-items:center;gap:10px;padding:10px 0}
.hrow:first-child{padding-top:0}
.hrow:last-child{padding-bottom:0}
.hrow+.hrow{border-top:1px solid var(--glass-b)}
.hico{width:32px;height:32px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hico svg{width:15px;height:15px;stroke-width:1.8}
.hlbl{font-size:9.5px;color:var(--t3);margin-bottom:2px;letter-spacing:.5px;text-transform:uppercase}
.hstat{font-size:12.5px;font-weight:700}
.hnote{font-size:13px;color:var(--t3);margin-top:2px}
.hbdg{margin-left:auto;flex-shrink:0}
.hse{color:var(--g)}.hsg{color:var(--cy)}.hsf{color:var(--am)}.hsp{color:var(--r)}

/* ═══ PAGINATION ════════════════════════════════════ */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--glass-b);margin-top:4px}
.page-info{font-size:11px;color:var(--t3);font-family:var(--fnum)}
.page-btns{display:flex;gap:5px;align-items:center}
.page-btn{min-width:28px;height:28px;border-radius:var(--r1);border:1px solid var(--glass-b);background:var(--glass);color:var(--t2);font-size:11.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:var(--fnum)}
.page-btn:hover{background:var(--abg);color:var(--a2);border-color:var(--glass-b2)}
.page-btn.active{background:var(--grad);color:#fff;border:none}
.page-btn:disabled{opacity:.3;cursor:default}

/* ═══ NOTE CARD ════════════════════════════════════ */
.notecard{background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-b);border-radius:var(--r2);padding:12px 13px;transition:all .2s;position:relative;overflow:hidden}
.notecard::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.5}
.notecard>*{position:relative;z-index:1}
.notecard:hover{border-color:var(--glass-b2);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.goalcard,.debtcard{background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-b);border-radius:var(--r3);padding:16px;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.goalcard::after,.debtcard::after{content:'';position:absolute;inset:0;background:var(--noise);pointer-events:none;opacity:.5}
.goalcard>*,.debtcard>*{position:relative;z-index:1}
.goalcard:hover,.debtcard:hover{border-color:var(--glass-b2);transform:translateY(-3px);box-shadow:var(--sh-glow)}

/* ═══ FILTER BAR ════════════════════════════════════ */
.fbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.srch{position:relative;flex:1;min-width:140px;max-width:260px}
.srch-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}
.srch-ico svg{width:13px;height:13px}
.srch .fc{padding-left:30px;padding-top:6px;padding-bottom:6px;font-size:12.5px}

/* ═══ HISTORY TABLE ═════════════════════════════════ */
.htbl{width:100%;border-collapse:collapse;font-size:12.5px}
.htbl th{text-align:left;font-size:9.5px;font-weight:700;color:var(--t3);letter-spacing:1px;text-transform:uppercase;padding:7px 12px;border-bottom:1px solid var(--glass-b)}
.htbl td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
[data-theme=light] .htbl td{border-bottom:1px solid rgba(0,0,0,.05)}
.htbl tr.avgrow{background:var(--abg);font-weight:700}

/* ═══ TOGGLE ════════════════════════════════════════ */
.tsw{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:8px}
.tsw input{position:absolute;opacity:0;width:0;height:0}
.ttrk{width:36px;height:20px;background:rgba(255,255,255,.1);border-radius:99px;transition:background .25s,border-color .25s;border:1.5px solid var(--glass-b);position:relative;cursor:pointer}
.tsw input:checked+.ttrk{background:var(--a);border-color:var(--a)}
.tthm{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:left .25s;pointer-events:none}
.tsw input:checked+.ttrk .tthm{left:18px}

/* ═══ UTILS ════════════════════════════════════════ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gd{display:grid;grid-template-columns:4fr 1.6fr;gap:16px;align-items:start}
.gd > *:last-child{position:sticky;top:calc(var(--th) + 12px)}
.gdr{display:grid;grid-template-columns:2fr 3fr;gap:20px}
.fl{display:flex}.aic{align-items:center}.jb{justify-content:space-between}
.g4b{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.tsm{font-size:16px}.txs{font-size:14px}.t2{color:var(--t2)}.t3{color:var(--t3)}
.tg{color:var(--g)}.tr{color:var(--r)}.ta{color:var(--am)}.tbl{color:var(--cy)}.tacc{color:var(--a2)}
.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}
.divv{border:none;border-top:1px solid var(--glass-b);margin:12px 0}
.empty{text-align:center;padding:36px 16px;color:var(--t3)}
.eico{font-size:34px;margin-bottom:10px;opacity:.35;display:flex;align-items:center;justify-content:center;color:var(--t3)}
.ettl{font-size:13.5px;color:var(--t2);margin-bottom:4px;font-weight:700}
.esub{font-size:12px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
.chw{position:relative;width:100%}
.chart-legend{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.chart-legend-item{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.chart-legend-left{display:flex;align-items:center;gap:7px}
.chart-legend-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.chart-legend-name{color:var(--t2)}
.chart-legend-right{display:flex;align-items:center;gap:7px}
.chart-legend-pct{font-family:var(--fnum);font-size:10.5px;color:var(--t3)}
.chart-legend-val{font-family:var(--fnum);font-size:12px;font-weight:600}

/* ═══ THEME SWITCH ══════════════════════════════════ */
.theme-switch{display:flex;align-items:center;gap:8px;cursor:pointer}
.theme-track{width:42px;height:22px;background:var(--glass);border:1px solid var(--glass-b2);border-radius:99px;position:relative;transition:background var(--tr);flex-shrink:0}
.theme-track.dark-on{background:rgba(77,143,255,.2)}
.theme-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--grad);transition:transform var(--tr),box-shadow var(--tr);box-shadow:0 2px 8px rgba(77,143,255,.4)}
[data-theme=light] .theme-thumb{transform:translateX(20px);background:linear-gradient(135deg,#fbbf24,#f59e0b)}

/* ═══ RESPONSIVE — TABLET ═══════════════════════════ */
@media(max-width:960px){
  .g4{grid-template-columns:1fr 1fr}
  .gd,.gdr{grid-template-columns:1fr}
  .gd > *:last-child{position:static;max-height:none;overflow:visible}
  .g3{grid-template-columns:1fr 1fr}
  :root{--sw:0px}
  .main{margin-left:0}
  .sidebar{width:260px}
  .veil.open{display:block}
}

/* ═══ RESPONSIVE — MOBILE ═══════════════════════════ */
@media(max-width:640px){
  :root{--sw:0px;--th:60px}
  .sidebar{transform:translateX(-280px);width:280px}
  .sidebar.open{transform:translateX(0);box-shadow:var(--sh-lg)}
  .veil.open{display:block}
  .hamburger{display:flex}
  .main{margin-left:0;height:100vh;overflow-y:auto}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .fr,.fr3{grid-template-columns:1fr}
  .phdr{padding:14px 14px 0;gap:8px}
  .pbody{padding:0 14px 36px}
  .topbar{padding:0 14px;gap:12px}
  .mrow{grid-template-columns:1fr 1fr!important}
  .ccell{min-height:58px;padding:5px 3px}
  .modal{border-radius:var(--r3)}
  .auth-modal{padding:24px 18px}
  .card{padding:13px 14px}
  .metric{padding:13px 15px}
  .mval{font-size:1rem}
  .notif-panel{right:8px;width:calc(100vw - 16px)}
  .lstats{grid-template-columns:repeat(3,1fr);gap:12px}
  .bento-xl{grid-column:span 12}
  .bento-md{grid-column:span 12}
  .bento-sm{grid-column:span 6}
  .bento-wide{grid-column:span 12}
  .bento-grid{grid-auto-rows:auto}
}

@media(max-width:560px){
  .bento-sm{grid-column:span 12}
  .bento-forecast-chips{flex-direction:column}
}

@media(max-width:400px){
  .g4{grid-template-columns:1fr}
  .mrow{grid-template-columns:1fr!important}
  .hero-btns{flex-direction:row;align-items:center;justify-content:center}
  .cta-band{padding:32px 20px}
  .cta-band h2{font-size:1.4rem}
  .phdr .fl{flex-wrap:nowrap;gap:6px;flex-shrink:0}
  .pbody{padding:0 10px 28px}
  /* old toast - replaced */
  .month-tabs{gap:4px}
  .mtab{padding:4px 10px;font-size:11px}
}

/* ── DEBT DUE DOT ON CALENDAR ─────────────────────────────────── */
.cdr{background:var(--r)}
.ccell.hasDebt{border-color:rgba(255,94,94,.25)}

/* ── HISTORY MONTH CALENDAR ──────────────────────────────────────── */
.hist-cal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.hist-cal-year{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hist-cal-ylbl{font-size:14px;font-weight:700;font-family:var(--fnum)}
.hcal-cell{
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-b);border-radius:var(--r2);
  padding:10px 8px;text-align:center;cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
.hcal-cell:hover{border-color:var(--glass-b2);background:var(--abg);transform:translateY(-2px)}
.hcal-cell.on{background:var(--grad);border-color:transparent;box-shadow:0 3px 12px rgba(77,143,255,.35)}
.hcal-cell.on .hcal-m,.hcal-cell.on .hcal-dot{color:#fff}
.hcal-cell.on .hcal-amt{color:rgba(255,255,255,.85)}
.hcal-cell.has-data{border-color:rgba(77,143,255,.25)}
.hcal-m{font-size:12px;font-weight:700;color:var(--t);margin-bottom:2px}
.hcal-amt{font-size:10px;font-family:var(--fnum);color:var(--t3);margin-top:2px}
.hcal-dot{width:5px;height:5px;border-radius:50%;background:var(--a);margin:3px auto 0;opacity:.7}
.hcal-cell.no-data{opacity:.4;cursor:default}
.hcal-cell.no-data:hover{transform:none;background:var(--glass);border-color:var(--glass-b)}
@media(max-width:480px){.hist-cal{grid-template-columns:repeat(3,1fr)}}

/* ── CATEGORY COLOR LEGEND ──────────────────────────────────────── */
.cat-legend{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 2px}
.cat-legend-item{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.2px;background:var(--glass);border:1px solid var(--glass-b);cursor:default;transition:transform .15s}
.cat-legend-item:hover{transform:translateY(-1px)}
.cat-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cat-legend-wrap{padding:4px 0 10px}
.cat-legend-label{font-size:10.5px;color:var(--t3);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}

/* z-index layering */
#spinner { position: fixed; z-index: 9999; }
#landing { position: relative; z-index: 1; }

/* ── BORDER GLOW (mouse-tracking radial gradient) ────────────────── */
.card, .metric, .goalcard, .debtcard { isolation: isolate; }

.card .border-glow-layer,
.metric .border-glow-layer,
.goalcard .border-glow-layer,
.debtcard .border-glow-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
  /* The radial gradient position is driven by JS via --mx / --my */
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(77,143,255,0.13) 0%,
    rgba(34,232,154,0.07) 40%,
    transparent 70%
  );
}

.card:hover .border-glow-layer,
.metric:hover .border-glow-layer,
.goalcard:hover .border-glow-layer,
.debtcard:hover .border-glow-layer { opacity: 1; }

/* Ensure card children sit above the glow layer */
.card > *:not(.border-glow-layer),
.metric > *:not(.border-glow-layer),
.goalcard > *:not(.border-glow-layer),
.debtcard > *:not(.border-glow-layer) { position: relative; z-index: 1; }

/* ═══ DISPLAY SETTINGS ═══════════════════════════════ */
.bg-upload-wrap{}
.bg-preview{
  width:100%;height:110px;border-radius:var(--r2);border:1.5px dashed var(--glass-b2);
  background:var(--glass);display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;transition:border-color .2s;
}
.bg-preview-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--t3);font-size:11px}
.theme-swatches{display:flex;gap:8px;flex-wrap:wrap}
.theme-swatch{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  padding:10px 14px;border-radius:var(--r2);border:1.5px solid var(--glass-b);
  background:var(--glass);transition:all .2s;font-size:11px;font-weight:600;color:var(--t2);flex:1;min-width:72px;
}
.theme-swatch:hover{border-color:var(--a);color:var(--t)}
.theme-swatch.active{border-color:var(--a);background:var(--abg);color:var(--a2)}
.theme-swatch-preview{width:100%;height:28px;border-radius:var(--r0);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.theme-prev-dark{background:linear-gradient(135deg,#060b18 0%,#0d1528 100%)}
.theme-prev-light{background:linear-gradient(135deg,#eef2fb 0%,#dce8ff 100%)}
.theme-prev-system{background:linear-gradient(135deg,#060b18 0%,#0d1528 50%,#eef2fb 50%,#dce8ff 100%)}

.font-options{display:flex;gap:7px;flex-wrap:wrap}
.font-option{
  padding:7px 13px;border-radius:var(--r1);border:1.5px solid var(--glass-b);
  background:var(--glass);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--t2);
  transition:all .2s;
}
.font-option:hover{border-color:var(--a);color:var(--t)}
.font-option.active{border-color:var(--a);background:var(--abg);color:var(--a2)}

.color-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.color-dot{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  transition:transform .15s,border-color .15s;flex-shrink:0;
}
.color-dot:hover{transform:scale(1.15)}
.color-dot.active{border-color:var(--a)!important}
.color-custom-wrap{}

/* ═══ SETTINGS LAYOUT ════════════════════════════════ */
.settings-layout{display:flex;flex-direction:column;gap:20px;max-width:860px}
.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.settings-display-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.settings-row,.settings-display-grid{grid-template-columns:1fr}}

/* ═══ NOTIFICATION PREFS ══════════════════════════════ */
.notif-pref-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--glass-b)}
.notif-pref-types{display:flex;flex-direction:column;gap:14px;transition:opacity .2s}
.notif-pref-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:var(--r2);background:var(--glass);border:1px solid var(--glass-b)}

/* ═══ DROPDOWN CONTEXT MENU ══════════════════════════ */
.ctx-menu{
  width:190px;
  background-color:rgba(24,28,38,0.97);
  background-image:linear-gradient(139deg,rgba(24,28,38,1) 0%,rgba(24,28,38,1) 0%,rgba(28,20,34,1) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:10px 0;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3);
  position:absolute;z-index:500;
  animation:fadeup .15s ease both;
}
[data-theme=light] .ctx-menu{background-color:rgba(255,255,255,.97);background-image:none;border-color:rgba(0,0,0,.1)}
.ctx-sep{border-top:1.5px solid rgba(255,255,255,.07);margin:2px 0}
[data-theme=light] .ctx-sep{border-color:rgba(0,0,0,.08)}
.ctx-list{list-style:none;display:flex;flex-direction:column;gap:4px;padding:0 8px}
.ctx-item{
  display:flex;align-items:center;color:#7e8590;gap:9px;
  transition:all .25s ease-out;padding:6px 8px;border-radius:6px;cursor:pointer;
  font-size:12.5px;font-weight:600;
}
.ctx-item svg{width:16px;height:16px;flex-shrink:0;transition:stroke .25s}
.ctx-item:hover{background-color:#5353ff;color:#fff;transform:translate(1px,-1px)}
.ctx-item:hover svg{stroke:#fff!important}
.ctx-item:active{transform:scale(0.98)}
.ctx-item.danger:hover{background-color:#8e2a2a}
.ctx-item.accent{color:#bd89ff}
.ctx-item.accent svg{stroke:#bd89ff}
.ctx-item.accent:hover{background-color:rgba(56,45,71,.85);color:#bd89ff}
.ctx-item.accent:hover svg{stroke:#bd89ff!important}

/* ═══ GLOWING BUTTON ═════════════════════════════════ */
/* glow button standalone class */
.btn-glow{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border:0;position:relative;overflow:hidden;border-radius:10rem;font-weight:700;cursor:pointer;color:rgb(20,10,50);z-index:0;font-family:var(--f);font-size:12.5px;background:rgba(255,255,255,.93)}

/* ═══ CUSTOM SELECT ══════════════════════════════════ */
.cs-wrap{position:relative;width:100%}
.cs-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,0.07);
  border:1.5px solid rgba(120,150,200,0.2);border-radius:var(--r2);padding:10px 14px;
  font-size:13.5px;color:var(--t);font-family:var(--f);cursor:pointer;
  transition:all .2s;text-align:left;outline:none;font-weight:500;
  height:auto;min-height:42px;
}
.cs-trigger:hover{border-color:var(--glass-b2)}
.cs-trigger:focus,.cs-wrap:focus-within .cs-trigger{border-color:var(--a);background:rgba(77,143,255,.06);box-shadow:0 0 0 3px rgba(77,143,255,.1)}
.cs-trigger svg{flex-shrink:0;opacity:.6;transition:transform .2s}
.cs-wrap .cs-panel.open ~ .cs-trigger svg,.cs-panel.open+* svg{transform:rotate(180deg)}
.cs-val{flex:1;white-space:normal;word-break:break-word;overflow:visible;min-width:0}
[data-theme=light] .cs-trigger{background:rgba(255,255,255,.85);border-color:rgba(77,143,255,.2);color:#1a2a4a}

.cs-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:600;min-width:100%;
  background:var(--cs-panel-bg,rgba(18,24,40,0.97));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--cs-panel-border,rgba(120,150,220,0.18));border-radius:var(--r2);
  padding:6px 0;box-shadow:0 12px 40px rgba(0,0,0,.15),0 2px 12px rgba(0,0,0,.1);
  display:none;flex-direction:column;gap:0;
  max-height:260px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
  animation:fadeup .12s ease both;
}
.cs-panel.open{display:flex}
[data-theme=light] .cs-panel{background:rgba(255,255,255,.99);border-color:rgba(77,143,255,.18);box-shadow:0 8px 32px rgba(77,143,255,.12)}

.cs-list{list-style:none;padding:0 8px;display:flex;flex-direction:column;gap:2px}
.cs-item{
  display:flex;align-items:center;color:#7e8590;gap:10px;
  transition:all .2s ease-out;padding:7px 10px;border-radius:6px;
  cursor:pointer;font-size:13px;font-weight:600;font-family:var(--f);
  white-space:normal;word-break:break-word;
}
.cs-item:hover{background:rgba(83,83,255,.85);color:#fff;transform:translateX(2px)}
.cs-item:active{transform:scale(.99)}
.cs-item.cs-active{color:var(--a2);background:var(--abg)}
.cs-item.cs-active:hover{background:#5353ff;color:#fff}
[data-theme=light] .cs-item{color:#1a2a4a;font-weight:600}
[data-theme=light] .cs-item:hover{background:var(--a);color:#fff}
[data-theme=light] .cs-item.cs-active{color:var(--a);background:rgba(37,99,235,.1)}

/* ═══ AUTH SLIDE DESIGN ══════════════════════════════ */
.auth-slide-wrap{
  width:420px;max-width:96vw;height:560px;max-height:94vh;
  overflow:hidden;padding:0;position:relative;border-radius:var(--r5);
}
.auth-slide-login{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(13,21,40,0.96);backdrop-filter:blur(40px);
  border-radius:var(--r5) var(--r5) 0 0;
  padding:32px 32px 28px;
  transition:transform .75s cubic-bezier(.77,0,.18,1);
  z-index:2;
}
.auth-slide-login.slide-up{transform:translateY(-100%)}
.auth-slide-reg{
  position:absolute;top:0;left:0;right:0;
  background:linear-gradient(160deg,#060b18,#0d1528 60%,#1a0d2e);
  border-radius:0 0 var(--r5) var(--r5);
  padding:32px 32px 28px;
  transform:translateY(-100%);
  transition:transform .75s cubic-bezier(.77,0,.18,1);
  z-index:1;
}
.auth-slide-reg.slide-down{transform:translateY(0)}
.auth-slide-inner{position:relative;z-index:1}
[data-theme=light] .auth-slide-login{background:rgba(240,245,255,0.97)}
[data-theme=light] .auth-slide-reg{background:linear-gradient(160deg,#dce8ff,#eef2fb 60%,#e4d4f8)}

/* ═══ BUDGET STATUS BADGES ═══════════════════════════ */
.bud-status{
  display:inline-flex;align-items:center;padding:5px 13px;border-radius:99px;
  font-size:12px;font-weight:700;letter-spacing:.3px;white-space:nowrap;
  border:none!important;box-shadow:none!important;
}
.bud-status-ok{background:rgba(34,232,154,.15);color:#22e89a;}
.bud-status-warn{background:rgba(255,179,71,.15);color:#ffb347;}
.bud-status-crit{background:rgba(255,94,94,.15);color:#ff7070;}
.bud-status-over{background:rgba(255,50,50,.18);color:#ff4444;animation:bpulse 1.8s ease infinite}
[data-theme=light] .bud-status-ok{background:rgba(5,150,105,.1);color:#047857;}
[data-theme=light] .bud-status-warn{background:rgba(217,119,6,.1);color:#b45309;}
[data-theme=light] .bud-status-crit{background:rgba(220,38,38,.1);color:#dc2626;}
[data-theme=light] .bud-status-over{background:rgba(220,38,38,.15);color:#b91c1c;}

/* ═══ ASSETS STAT CARDS ══════════════════════════════ */
.assets-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
.asset-stat-card{
  border-radius:var(--r2);padding:14px 16px;border:1px solid var(--glass-b);
  display:flex;flex-direction:column;gap:6px;transition:all .2s;
}
.asset-stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.asset-stat-icon{width:32px;height:32px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.asset-stat-icon svg{width:15px;height:15px;stroke-width:1.8}
.asset-stat-lbl{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--t3)}
.asset-stat-val{font-size:1.15rem;font-weight:700;font-family:var(--fnum);letter-spacing:-.02em}

/* ═══ LABEL/FG TEXT SIZES ════════════════════════════ */
.fg label{font-size:13px;font-weight:600;color:var(--t2);margin-bottom:6px;display:block}
table th{font-size:11.5px;letter-spacing:.5px}
table td{font-size:13.5px}

/* ═══ AUTH SLIDE MODAL ═══════════════════════════════════════════════════════ */
.auth-slide-modal{
  width:420px;max-width:96vw;
  position:relative;border-radius:var(--r5);
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 4px 20px rgba(0,0,0,.3);
  border:1px solid var(--glass-b2);
}
.auth-login-panel,.auth-register-panel{
  width:100%;
  transition:transform .7s cubic-bezier(.77,0,.18,1),opacity .4s ease;
}
.auth-login-panel{
  background:var(--glass-h);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
  transform:translateY(0);
}
.auth-login-panel.slide-up{
  transform:translateY(-100%);
  position:absolute;top:0;left:0;right:0;z-index:2;
}
.auth-register-panel{
  background:linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 60%,rgba(26,13,46,.95) 100%);
  transform:translateY(0);
  position:relative;
}
.auth-register-panel.slide-hidden{
  position:absolute;top:0;left:0;right:0;
  transform:translateY(-105%);
  pointer-events:none;
  z-index:1;
}
[data-theme=light] .auth-login-panel{background:rgba(245,249,255,.98)}
[data-theme=light] .auth-register-panel{background:linear-gradient(160deg,#dce8ff,#eef2fb 60%,#e4d4f8)}
.auth-panel-body{padding:36px 32px 32px;position:relative;z-index:1}
@media(max-width:480px){.auth-panel-body{padding:28px 20px 24px}}

.auth-close-btn{
  position:absolute;top:14px;right:14px;z-index:20;
  width:30px;height:30px;border-radius:var(--r1);
  background:var(--glass);border:1px solid var(--glass-b);
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);cursor:pointer;transition:all .2s;
}
.auth-close-btn:hover{background:var(--rbg);color:var(--r);border-color:var(--r)}

.auth-switch-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex-wrap:wrap;gap:8px}
.auth-switch-row .alabel{font-size:12.5px;color:var(--a2);cursor:pointer;font-weight:600}
.auth-switch-row .alabel:hover{text-decoration:underline}

/* ═══ MEMOPAD NOTES ══════════════════════════════════════════════════════════ */
.memo-wrap{display:flex;flex-direction:column;gap:0}
.memo-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--glass-b);
  position:relative;
}
.memo-item:last-of-type{border-bottom:none}
.memo-pin{
  width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;
  background:var(--a);box-shadow:0 0 6px rgba(77,143,255,.5);
}
.memo-content{flex:1;min-width:0}
.memo-text{
  font-size:13.5px;line-height:1.55;color:var(--t);margin:0 0 6px;
  word-break:break-word;
}
.memo-footer{display:flex;align-items:center;justify-content:space-between}
.memo-more-btn{
  display:flex;align-items:center;gap:5px;
  margin-top:10px;padding:6px 12px;border-radius:var(--r1);
  background:var(--glass);border:1px solid var(--glass-b);
  color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;
  transition:all .2s;width:100%;justify-content:center;
}
.memo-more-btn:hover{background:var(--abg);color:var(--a2);border-color:var(--a)}

/* ═══ BUDGET STATUS ROW ══════════════════════════════════════════════════════ */
.bud-status-row{padding:20px 0 16px;border-bottom:1px solid var(--glass-b)}
.bud-status-row:last-child{border-bottom:none;padding-bottom:2px}
.bud-status-row .fl.jb.aic{margin-bottom:10px}

/* ═══ NOTES | BUDGET STATUS SIDE-BY-SIDE GRID ═══════════════════════════════ */
.dash-nb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;align-items:start}
@media(max-width:960px){.dash-nb-grid{grid-template-columns:1fr}}

/* Notes stack inside card */
.notes-stack{display:flex;flex-direction:column;gap:0}
.notes-more-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:10px;padding:7px 14px;width:100%;
  background:var(--glass);border:1px solid var(--glass-b);
  border-radius:var(--r1);color:var(--t3);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.notes-more-btn:hover{background:var(--abg);color:var(--a2);border-color:var(--a)}
.notes-more-btn svg{flex-shrink:0}

/* ═══ SIDEBAR NAV ICON COLORS ═══════════════════════════════════════════════ */
.bico2{background:var(--glass);color:var(--t2);font-size:14px}
.sbi svg{stroke:var(--t3)}
.sbi.on svg{stroke:var(--a)}

/* ═══ SETTINGS TOGGLE FIX ═══════════════════════════════════════════════════ */
.tsw{cursor:pointer}
.ttrk{cursor:pointer;min-width:36px}
.tsw:hover .ttrk{border-color:var(--a);background:rgba(77,143,255,.12)}

/* ═══ LIGHT MODE DROPDOWN ITEMS (consolidated) ═══════════════════════════════ */
[data-theme=light] .cs-panel{background:rgba(255,255,255,.99);border-color:rgba(77,143,255,.18)}
[data-theme=light] .cs-item{color:#1a2a4a;background:transparent}
[data-theme=light] .cs-item:hover{background:var(--a);color:#fff}
[data-theme=light] .cs-item.cs-active{background:rgba(37,99,235,.1);color:var(--a)}

/* ═══ DASHBOARD NOTES + BUDGET SIDE BY SIDE ════════════════════════════════ */
.dash-nb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}
@media(max-width:900px){.dash-nb-grid{grid-template-columns:1fr}}
@media(max-width:860px){
  .bento-xl{grid-column:span 12}
  .bento-md{grid-column:span 12}
  .bento-wide{grid-column:span 12}
  .bento-sm{grid-column:span 6}
}

/* ═══ NOTES STACK + MORE BUTTON ════════════════════════════════════════════ */
.notes-stack{display:flex;flex-direction:column;gap:0}
.notes-more-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;padding:6px 14px;border-radius:var(--r1);
  background:var(--glass);border:1px solid var(--glass-b);
  color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;
  transition:all .2s;width:100%;justify-content:center;
  font-family:var(--f);
}
.notes-more-btn:hover{background:var(--abg);color:var(--a2);border-color:var(--a)}
.notes-more-btn svg{flex-shrink:0}

/* ═══ UIVERSE BUTTON (Wendell47) ══════════════════════════════════════════ */
.uv-button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;border:0;position:relative;overflow:hidden;
  border-radius:10rem;transition:all .02s;font-weight:700;cursor:pointer;
  color:rgb(37,37,37);z-index:0;background:#e8f0fe;
  box-shadow:0 0px 7px -5px rgba(0,0,0,.5);
  font-family:var(--f);font-size:13.5px;
}
.uv-button span{
  position:relative;z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;
}
.uv-button:hover{background:rgb(193,228,248);color:rgb(33,0,85)}
.uv-button:active{transform:scale(.97)}
.uv-button .hoverEffect{
  position:absolute;bottom:0;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;z-index:1;
}
.uv-button .hoverEffect div{
  background:linear-gradient(90deg,rgba(222,0,75,1) 0%,rgba(191,70,255,1) 49%,rgba(0,212,255,1) 100%);
  border-radius:40rem;width:10rem;height:10rem;
  transition:.4s;filter:blur(20px);
  animation:uvSpin 3s linear infinite;opacity:.5;
}
.uv-button:hover .hoverEffect div{width:8rem;height:8rem}
@keyframes uvSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.uv-button.bfull{width:100%;justify-content:center}
/* Compact in modal brow */
.brow .uv-button{padding:10px 22px;font-size:13px}
/* Mobile: stack brow buttons */
@media(max-width:640px){
  .brow{flex-direction:column;gap:8px}
  .brow .uv-button,.brow .btn.bo{width:100%;justify-content:center}
}

/* ═══ NOTES ENHANCEMENTS ════════════════════════════════════════════════════ */
.memo-item{position:relative;overflow:hidden}
.memo-color-bg{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  transition:background .3s;
}
.memo-colored{border-radius:var(--r2)}
.memo-colored .memo-content{position:relative;z-index:1}
.notes-all-list{display:flex;flex-direction:column;gap:0;max-height:60vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--t4) transparent;}
/* note color swatch hover */
#all-notes-list .memo-item{cursor:default}

/* ═══ GOAL REACHED BADGE ════════════════════════════════════════════════════ */
.goal-reached-badge{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--g);font-size:12px;font-weight:600;
  letter-spacing:.1px;margin-bottom:12px;
  padding:3px 10px;border-radius:6px;
  background:rgba(34,232,154,.1);border:none;
}
.goal-reached-badge svg{flex-shrink:0;stroke:var(--g)}

/* ═══ METRIC GRADIENT VALUES - light mode fallback ══════════════════════════ */
[data-theme=light] .mg .mval{background:linear-gradient(135deg,#059669,#0891b2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme=light] .mr .mval{background:linear-gradient(135deg,#dc2626,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme=light] .mb .mval{background:linear-gradient(135deg,#0891b2,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme=light] .ma .mval{background:linear-gradient(135deg,#d97706,#b45309);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme=light] .mp .mval{background:linear-gradient(135deg,#7c3aed,#4f46e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ═══ BUDGET STATUS ROW - name/badge spacing ════════════════════════════════ */
.bud-status-row .tsm.fw6{font-size:15px;font-weight:700}
.bud-status-row .fl.jb{align-items:center;margin-bottom:10px}

/* ═══ CALENDAR MOBILE ═══════════════════════════════════════════════════════ */
@media(max-width:640px){
  .cdate{font-size:14px}
  .cdayname{font-size:11px}
  .ccell{min-height:72px;padding:6px 3px}
}

/* Filter bar custom-select fix */
.fbar .cs-wrap{min-width:120px;width:auto}
.fbar .cs-trigger{min-width:120px;font-size:13px;padding:8px 12px}

/* Notes: disable color background customization */
.memo-color-bg{display:none!important}
.memo-colored{border-radius:var(--r2)}

/* ── INCOME ACCOUNTS GRID ─────────────────────────────────────────── */
.inc-accts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:4px}
.inc-acct-card{transition:transform .2s,box-shadow .2s}
.inc-acct-card:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}

/* ── FILTER BAR — ensure no text cut-off ─────────────────────────── */
.fbar .cs-wrap{min-width:130px;width:auto;flex-shrink:0}
.fbar select.fc{min-width:130px}

/* ── CARD BODY COLLAPSED ANIMATION FIX ───────────────────────────── */
.card-body.collapsed{max-height:0!important;opacity:0!important;overflow:hidden!important;margin:0;padding:0;pointer-events:none}

/* ── NOTES — no color bg ─────────────────────────────────────────── */
.memo-color-bg{display:none!important}
.memo-pin{width:10px;height:10px;border-radius:50%;background:var(--glass-b2);position:absolute;top:12px;right:12px;flex-shrink:0}
.memo-item{position:relative}

/* ── PHDR TITLE SUBTITLE SIZE ────────────────────────────────────── */
.phdr-title .tb-sub{font-size:12px}

/* ── ANIMATED BACKGROUND CANVAS ────────────────────────────────────── */
#nebula-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body{background:transparent!important}
[data-theme=dark] body{background:transparent!important}
[data-theme=light] body{background:transparent!important}

/* Make glass elements more opaque over the animated bg */
[data-theme=dark] .card{background:rgba(10,16,35,0.72)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
[data-theme=dark] .metric{background:rgba(10,16,35,0.68)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
[data-theme=dark] .sidebar{background:#0a0f20!important;border-right-color:rgba(77,143,255,.1)!important}
[data-theme=dark] .topbar{background:rgba(6,10,24,0.92)!important;backdrop-filter:blur(20px)!important}
[data-theme=dark] .modal{background:rgba(10,16,35,0.95)!important;backdrop-filter:blur(28px)!important}
[data-theme=light] .card{background:rgba(255,255,255,0.75)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
[data-theme=light] .metric{background:rgba(255,255,255,0.72)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
[data-theme=light] .sidebar{background:#f4f8ff!important;border-right-color:rgba(77,143,255,.12)!important}
[data-theme=light] .topbar{background:rgba(248,252,255,0.94)!important;backdrop-filter:blur(20px)!important}
[data-theme=light] .modal{background:rgba(255,255,255,0.96)!important;backdrop-filter:blur(28px)!important}

/* ── TRANSACTION TOOLBAR (history + filters inline) ─────────────────── */
.txn-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.txn-toolbar-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.txn-filter-pills{display:flex;align-items:center;gap:6px}
.txn-pill-select{appearance:none;-webkit-appearance:none;background:var(--glass);border:1px solid var(--glass-b);border-radius:99px;color:var(--t2);font-size:12px;font-family:var(--f);font-weight:600;padding:5px 28px 5px 11px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ba5d4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:12px;white-space:nowrap;flex-shrink:0;min-width:0;transition:all .2s}
.txn-pill-select:hover{border-color:var(--glass-b2);color:var(--t)}
.txn-pill-select:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(77,143,255,.1)}
[data-theme=light] .txn-pill-select{background-color:rgba(255,255,255,.85);color:#3d5a8a}
@media(max-width:600px){.txn-toolbar{flex-direction:column;align-items:flex-start}.txn-toolbar .srch{width:100%}}

/* ── PROFILE PICTURE ────────────────────────────────────────────────── */
.profile-pic-section{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.profile-pic-wrap{position:relative;width:72px;height:72px}
.profile-pic-preview{width:72px;height:72px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;overflow:hidden;border:2px solid var(--glass-b2);box-shadow:0 4px 16px rgba(77,143,255,.2)}
.profile-pic-preview img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pp-initials{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px}
.pp-edit-btn{position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:var(--a);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .2s}
.pp-edit-btn:hover{background:var(--a2);transform:scale(1.1)}
.pp-picker{padding:4px 0}
.pp-section-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3)}
.pp-defaults{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.pp-option{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:8px;border-radius:var(--r2);border:2px solid transparent;transition:all .2s}
.pp-option:hover{border-color:var(--glass-b2);background:var(--glass)}
.pp-option.pp-selected{border-color:var(--a);background:var(--abg)}
.pp-option img{width:52px;height:52px;border-radius:50%;display:block}
.pp-opt-lbl{font-size:11px;color:var(--t3);font-weight:600}
.ml8{margin-left:8px}

/* ── MINIMAL MONTH PICKER ─────────────────────────────────────────── */
.fc-month-picker, .txn-month-pick {
  appearance: none; -webkit-appearance: none;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--f);
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: 8px;
  color: var(--t2);
  cursor: pointer;
  transition: all .2s;
  width: auto;
  min-width: 110px;
  max-width: 140px;
}
.fc-month-picker:hover, .txn-month-pick:hover { background: var(--abg); border-color: var(--glass-b2); color: var(--t); }
.fc-month-picker:focus, .txn-month-pick:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 2px rgba(77,143,255,.12); }
[data-theme=light] .fc-month-picker, [data-theme=light] .txn-month-pick { background: rgba(255,255,255,.85); color: #3d5a8a; }

/* ── DASHBOARD WELCOME MESSAGE ──────────────────────────────────────── */
.dash-welcome{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:16px;background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dash-welcome-wave{font-size:24px;flex-shrink:0;animation:wave 2.2s ease-in-out infinite;transform-origin:70% 70%;display:inline-block}
@keyframes wave{0%,60%,100%{transform:rotate(0deg)}10%,30%{transform:rotate(18deg)}20%,40%{transform:rotate(-8deg)}}
.dash-welcome-msg{font-size:15px;font-weight:700;color:var(--t);line-height:1.3}
.dash-welcome-sub{margin-top:2px;letter-spacing:.2px}
[data-theme=light] .dash-welcome{background:rgba(255,255,255,.72)}

/* ── DEBT CARD BUTTON ROW ───────────────────────────────────────────── */
.flex-wrap{flex-wrap:wrap}

/* ── NEBULA BUDGET ALLOCATION CHECKBOX ──────────────────────────────── */
.bud-alloc-row{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:10px 14px;background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r2)}
.container{display:inline-block;position:relative;cursor:pointer;user-select:none;flex-shrink:0}
.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.checkbox-wrapper{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.checkmark{position:absolute;width:24px;height:24px;background:linear-gradient(135deg,#0a0a23,#1c2526);border:2px solid #4b5eaa;border-radius:8px;transition:transform .4s cubic-bezier(.68,-.55,.265,1.55),background .3s,border-color .3s,border-radius .3s;box-shadow:0 0 8px rgba(75,94,170,.3)}
.container:hover .checkmark{transform:scale(1.1);box-shadow:0 0 12px rgba(75,94,170,.5)}
.container input:checked~.checkbox-wrapper .checkmark{background:linear-gradient(135deg,#ff5e62,#ffd452);border-color:#ffd452;border-radius:50%;transform:rotate(45deg) scale(1.2);box-shadow:0 0 20px rgba(255,212,82,.8);animation:nebula-bounce .4s cubic-bezier(.68,-.55,.265,1.55)}
.checkmark::after{content:"";position:absolute;display:none;left:50%;top:50%;width:8px;height:8px;background:transparent;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s cubic-bezier(.4,0,.2,1.6),opacity .3s}
.container input:checked~.checkbox-wrapper .checkmark::after{display:block;transform:translate(-50%,-50%) scale(1);opacity:1}
.nebula-glow{position:absolute;width:32px;height:32px;background:radial-gradient(circle,rgba(75,94,170,.3) 10%,transparent 70%);border-radius:50%;opacity:.5;transition:opacity .3s,transform .5s}
.container input:checked~.checkbox-wrapper .nebula-glow{opacity:1;transform:rotate(180deg);background:radial-gradient(circle,rgba(255,94,170,.5) 10%,rgba(255,212,82,.3) 70%);animation:nebula-swirl 1.5s infinite cubic-bezier(.4,0,.2,1)}
@keyframes nebula-swirl{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.sparkle-container{position:absolute;width:100%;height:100%;pointer-events:none}
.sparkle-container::before,.sparkle-container::after{content:"";position:absolute;width:3px;height:3px;background:#ffd452;border-radius:50%;opacity:0;transition:all .6s}
.container input:checked~.checkbox-wrapper .sparkle-container::before{transform:translate(10px,-10px);opacity:1;animation:nebula-twinkle .8s cubic-bezier(.5,0,.5,1) forwards}
.container input:checked~.checkbox-wrapper .sparkle-container::after{transform:translate(-10px,10px);background:#ff5e62;opacity:1;animation:nebula-twinkle .8s cubic-bezier(.5,0,.5,1) .2s forwards}
@keyframes nebula-twinkle{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5) translate(8px,-8px);opacity:0}}
.checkbox-wrapper::before{content:"";position:absolute;width:36px;height:36px;background:rgba(75,94,170,.2);border-radius:50%;transform:scale(0);transition:transform .4s cubic-bezier(.4,0,.2,1.4);z-index:-1}
.container:hover .checkbox-wrapper::before{transform:scale(1)}
@keyframes nebula-bounce{0%,100%{transform:rotate(45deg) scale(1.2)}50%{transform:rotate(45deg) scale(1.4)}}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS IMPROVEMENTS (v19)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tighter topbar on phone ─────────────────────────────── */
@media(max-width:640px){
  .topbar{min-height:60px;padding:0 14px;height:auto}
  .tb-ttl{font-size:14px; font-weight: 800; display: block!important;}
  .topbar .tb-sub{display:none}
  .tb-r{gap:4px}
  .icoBtn{width:30px;height:30px}

  /* page header */
  .phdr{padding:12px 12px 0;gap:6px;flex-wrap:nowrap;flex-direction:row !important;align-items:center !important;justify-content:space-between !important}
  .phdr-title .ph1, .phdr-title .tb-ttl {font-size:17px !important; font-weight: 800 !important; display: block !important;}
  .phdr-title .psub, .phdr-title .tb-sub {font-size:11px !important; display: block !important;}
  .pbody{padding:0 12px 60px !important}

  /* metrics row — 2 col always */
  .mrow{grid-template-columns:1fr 1fr!important;gap:10px}
  .metric{padding:12px 13px}
  .mval{font-size:1rem}
  .mlbl{font-size:11px}
  .mnote{font-size:11px}

  /* cards */
  .card{padding:13px 14px}
  .card-title{font-size:13px}

  /* tables full-width scroll */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
  table{min-width:520px}
  thead th{font-size:10px;padding:0 7px 8px;white-space:nowrap}
  tbody td{padding:9px 7px;font-size:12px}

  /* income accounts grid — single col */
  .inc-accts-grid{grid-template-columns:1fr!important;gap:10px}

  /* grids */
  .gdr{grid-template-columns:1fr}
  .gd{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}

  /* modal full width */
  .modal{width:calc(100vw - 16px);border-radius:var(--r3)}
  .mhdr{padding:14px 16px 10px}
  .mbody{padding:12px 16px 18px}
  .brow{flex-direction:column;gap:6px}
  .brow .btn,.brow .uv-button{width:100%;justify-content:center}

  /* forms */
  .fr,.fr3{grid-template-columns:1fr}
  .fg{margin-bottom:10px}
  .fg label{font-size:12px}
  .fc{font-size:13px;padding:9px 12px}

  /* filter bar */
  .fbar{flex-direction:column;gap:8px}
  .fbar .srch,.fbar select.fc{width:100%;min-width:0}

  /* sidebar overlay */
  .sidebar{width:72%;max-width:260px}
  .sbi{font-size:13px;padding:10px 9px}
  .sbgrp{margin-bottom:12px}

  /* month tabs */
  .month-tabs{gap:4px}
  .mtab{padding:5px 10px;font-size:11px}

  /* pagination */
  .pagination{flex-direction:column;gap:8px;align-items:flex-start}

  /* toast bottom safe area - handled by splurge-toast mobile rule */


  /* calendar */
  .ccell{min-height:62px;padding:5px 3px}
  .cdate{font-size:13px}
  .cdayname{font-size:10px;padding:5px 0}

  /* history calendar */
  .hist-cal{grid-template-columns:repeat(3,1fr);gap:6px}
  .hcal-cell{padding:8px 6px}
  .hcal-m{font-size:11px}
  .hcal-amt{font-size:9px}

  /* assets grid */
  .assets-grid{grid-template-columns:1fr 1fr}

  /* bill ticker */
  .bill-ticker-inner{flex-wrap:wrap;gap:4px}
  .ticker-pill{font-size:11px;padding:3px 8px}

  /* notif panel */
  .notif-panel{width:calc(100vw - 16px);right:8px;left:8px}

  /* settings */
  .settings-layout{gap:14px}
  .settings-row,.settings-display-grid{grid-template-columns:1fr}

  /* bento landing */
  .bento-xl,.bento-md,.bento-wide{grid-column:span 12}
  .bento-sm{grid-column:span 12}
  .bento-grid{gap:10px;padding:0 4%}

  /* callouts */
  .callouts-row{grid-template-columns:1fr}

  /* hero */
  .hero{padding:80px 4% 40px}
  .hero-inner{gap:28px}
  .hero-dash-card{padding:16px}
  .hdc-stats{gap:8px}
  .hdc-stat{padding:9px 10px}

  /* steps */
  .steps{gap:12px}
  .step{padding:20px 18px}

  /* cta band */
  .cta-band{padding:36px 20px}
  .cta-band h2{font-size:1.4rem}

  /* lstats */
  .lstats{grid-template-columns:repeat(3,1fr);gap:10px}
  .lstat-v{font-size:1.9rem}
}

/* ── Extra small (≤400px) ─────────────────────────────────── */
@media(max-width:400px){
  .g4{grid-template-columns:1fr}
  .mrow{grid-template-columns:1fr!important}
  .hdc-stats{grid-template-columns:1fr 1fr}
  .assets-grid{grid-template-columns:1fr}
  .lstats{gap:6px}
  .lstat-v{font-size:1.6rem}
  table{min-width:420px}
  .inc-accts-grid{gap:8px}
}

/* ── Sidebar safe zone on narrow phones ──────────────────── */
@media(max-width:380px){
  .sidebar{width:80%}
  .phdr-title .tb-ttl{font-size:16px}
}

/* ── Landscape phone — keep sidebar hidden ───────────────── */
@media(max-height:500px) and (max-width:900px){
  .sidebar{transform:translateX(-280px)}
  .main{margin-left:0}
  :root{--sw:0px}
  .hamburger{display:flex}
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE FX ENHANCEMENTS (v19)
   ═══════════════════════════════════════════════════════════════════ */

/* Particles canvas */
#particles-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}

/* Hero grid lines */
.hero-grid{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  opacity:0.06;
}
[data-theme=light] .hero-grid{opacity:0.04}

/* ── Tilt cards: will-change for GPU acceleration ────────── */
.callout-card,.bento-card,.step,.hero-dash-card{
  will-change:transform;
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
  transition:box-shadow .3s ease,border-color .3s ease;
}

/* ── Radial glow overlay on tilt cards ───────────────────── */
.callout-card::before,.bento-card::before,.step::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(100,160,255,.1) 0%, transparent 65%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0;
}
.callout-card:hover::before,.bento-card:hover::before,.step:hover::before{opacity:1}

/* ── Step cards — tilt-compatible ───────────────────────── */
.step{
  position:relative;overflow:hidden;
}
.step::before{
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(77,143,255,.08) 0%, transparent 65%);
}

/* ── Mouse glow enhanced ──────────────────────────────────── */
.mouse-glow{
  position:fixed;width:600px;height:600px;border-radius:50%;
  pointer-events:none;z-index:2;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .6s ease;
  mix-blend-mode:screen;
}
[data-theme=dark] .mouse-glow{
  background:radial-gradient(circle,rgba(77,143,255,.15) 0%,rgba(181,127,255,.07) 35%,transparent 65%);
}
[data-theme=light] .mouse-glow{
  background:radial-gradient(circle,rgba(37,99,235,.09) 0%,rgba(124,58,237,.04) 35%,transparent 65%);
  mix-blend-mode:multiply;
}

/* ── Animated hero badge cursor blink ───────────────────── */
.hero-badge::after{
  content:'|';
  animation:cursor-blink .8s step-end infinite;
  color:var(--a2);
  margin-left:1px;
  font-weight:400;
}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Moving line graph enhanced styles ───────────────────── */
.hdc-canvas{
  border-radius:var(--r1);
  overflow:hidden;
}

/* ── Callout cards enhanced ──────────────────────────────── */
.callout-card{
  cursor:default;
}
.callout-card:hover{
  transform:perspective(900px) rotateX(-2deg) rotateY(2deg) scale(1.02);
  border-color:var(--glass-b2);
  box-shadow:0 20px 48px rgba(0,0,0,.28),0 0 20px rgba(77,143,255,.08);
}

/* ── Scroll-reveal with stagger classes ─────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
.bento-card{opacity:0;transform:perspective(900px) translateY(28px);transition:opacity .55s ease,transform .55s ease,box-shadow .3s,border-color .3s}
.bento-card.vis{opacity:1;transform:perspective(900px) translateY(0)}
.fpill{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.fpill.vis{opacity:1;transform:translateY(0)}
.step{opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .5s ease,box-shadow .3s,border-color .3s}
.step.vis{opacity:1;transform:translateY(0)}

/* ── Pulsing dots on bill alerts ────────────────────────── */
@keyframes dot-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.6);opacity:.5}
}

/* ── Hero section — overlay z-indices ──────────────────── */
.hero{overflow:hidden}
.hero-bg{z-index:0}
.blob{z-index:0}
.hero-inner{z-index:2;position:relative}

/* ── Animated gradient border on callouts on hover ─────── */
.callout-card{
  position:relative;
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-b);
  overflow:hidden;
}
.callout-card::after{
  content:'';position:absolute;inset:0;
  background:var(--noise);pointer-events:none;opacity:.5;z-index:0;
}
.callout-card>*{position:relative;z-index:1}

/* ── Steps hover upgrade ────────────────────────────────── */
.step:hover{
  transform:perspective(900px) rotateX(-1deg) translateY(-4px) scale(1.01) !important;
  box-shadow:0 24px 56px rgba(0,0,0,.32),0 0 20px rgba(77,143,255,.1);
  border-color:var(--glass-b2);
}

/* ── Hero visual card float animation ───────────────────── */
.hero-dash-card{
  animation:float-card 5s ease-in-out infinite;
}
@keyframes float-card{
  0%,100%{transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(0)}
  50%{transform:perspective(900px) rotateX(-1deg) rotateY(1deg) translateY(-8px)}
}
.hero-dash-card:hover{
  animation-play-state:paused;
  transform:perspective(900px) rotateX(0deg) rotateY(0deg) scale(1.01) !important;
}

/* ── Feature pills animation stagger ────────────────────── */
.feats .fpill:nth-child(1){transition-delay:.05s}
.feats .fpill:nth-child(2){transition-delay:.1s}
.feats .fpill:nth-child(3){transition-delay:.15s}
.feats .fpill:nth-child(4){transition-delay:.2s}
.feats .fpill:nth-child(5){transition-delay:.25s}
.feats .fpill:nth-child(6){transition-delay:.3s}
.feats .fpill:nth-child(7){transition-delay:.35s}
.feats .fpill:nth-child(8){transition-delay:.4s}

/* ── Callout rows stagger ────────────────────────────────── */
.callouts-row .callout-card:nth-child(1){transition-delay:.0s}
.callouts-row .callout-card:nth-child(2){transition-delay:.08s}
.callouts-row .callout-card:nth-child(3){transition-delay:.16s}
.callouts-row .callout-card:nth-child(4){transition-delay:.24s}

/* ── Animated accent line above CTA band ────────────────── */
.cta-band-wrap{position:relative}
.cta-band-wrap::before{
  content:'';display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(77,143,255,.4),rgba(181,127,255,.4),transparent);
  margin-bottom:0;
  animation:slide-line 3s ease infinite;
}
@keyframes slide-line{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ── Lstat v counter glow ────────────────────────────────── */
.lstat-v{
  text-shadow:0 0 20px rgba(77,143,255,.25);
}

/* ── Mobile: disable heavy animations for performance ───── */
@media(max-width:640px){
  .hero-dash-card{animation:none}
  #particles-canvas{opacity:0.3}
  .mouse-glow{display:none}
  .callout-card:hover,.bento-card:hover,.step:hover{
    transform:none!important;
  }
  .hero-badge::after{display:none}
}

/* ── Reduced motion ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero-dash-card{animation:none}
  #particles-canvas{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   v20 FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* ── CALENDAR: horizontal scroll wrapper on mobile ───────── */
.cal-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding-bottom: 4px;
}
.cal-scroll-wrap::-webkit-scrollbar { height: 3px; }
.cal-scroll-wrap::-webkit-scrollbar-thumb { background: var(--t4); border-radius: 99px; }

/* Min-width so calendar doesn't collapse on tiny screens */
.cdaynames, .cgrid {
  min-width: 420px;
}

/* Scroll hint — faint gradient at right edge */
@media(max-width:600px) {
  .cal-scroll-wrap {
    position: relative;
  }
  .cdaynames, .cgrid { min-width: 380px; }
  .ccell { min-height: 58px; padding: 5px 3px; }
  .cdate { font-size: 12px; }
  .camt  { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cdayname { font-size: 9px; padding: 5px 0; }
}

/* ── MOBILE PHDR: prevent crowding ───────────────────────── */
@media(max-width:640px) {
  .phdr {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px 14px 0;
  }
  .phdr > div.fl { flex-wrap: nowrap; gap: 6px; flex-shrink: 0; }
  .phdr .uv-button { flex: 0 0 auto; white-space: nowrap; }
  .phdr .btn.bo   { flex: 0 0 auto; white-space: nowrap; }
  .phdr input[type="month"] { flex: 0 0 auto; min-width: 110px; max-width: 140px; }
  /* Reports export button full width on mobile */
  .phdr a.btn { white-space: nowrap; }
}

/* ── COLOR LEGEND (minimal dot style) ────────────────────── */
.cal-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
  margin-top: 4px;
  border-top: 1px solid var(--glass-b);
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--t3);
  font-weight: 600;
  letter-spacing: .3px;
}
.cal-legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── DEBT PAYMENT: show balance & disable when 0 ─────────── */
.debt-paid-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(34,232,154,.1); border: none;
  color: var(--g); border-radius: 6px;
  padding: 2px 8px; font-size: 11px; font-weight: 600;
}

/* ── PHDR mobile: icons don't overflow ───────────────────── */
@media(max-width:480px) {
  .phdr-title .tb-ttl { font-size: 16px; }
  .topbar { padding: 0 10px; }
  .tb-r .icoBtn:nth-child(n+4) { display: none; } /* hide extra icons if very narrow */
  /* Theme toggle visible on mobile */
}

/* ── TILT: ensure no transition conflict ─────────────────── */
.callout-card, .bento-card, .step, .hero-dash-card {
  transition: box-shadow .3s ease, border-color .3s ease !important;
}
/* Disable float animation on hero card so tilt works cleanly */
.hero-dash-card { animation: none !important; }

/* ── Remove hero grid canvas if rendered ─────────────────── */
.hero-grid { display: none !important; }

/* ── Calendar legend below grid ──────────────────────────── */
.dcal-legend-wrap {
  padding: 8px 0 0;
  border-top: 1px solid var(--glass-b);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   v21 UPGRADES
   ═══════════════════════════════════════════════════════════════════ */

/* ── MOBILE: Smaller buttons so they don't dominate small screens ── */
@media(max-width:480px) {
  /* uv-button (primary gradient buttons) */
  .uv-button {
    padding: 8px 14px !important;
    font-size: 11.5px !important;
  }
  /* Standard .btn */
  .btn {
    padding: 6px 11px !important;
    font-size: 11.5px !important;
  }
  .btn.bsm {
    padding: 5px 9px !important;
    font-size: 10.5px !important;
  }
  .lnav-r { gap: 6px !important; }
  /* Auth modal buttons */
  .auth-action-btn {
    font-size: 13px !important;
  }
  /* icoBtn slightly smaller */
  .icoBtn { width: 28px !important; height: 28px !important; }
  /* hamburger — keep small */
  .hamburger { width: 22px !important; height: 16px !important; }
}

/* ── TRANSACTIONS PAGE: Tab navigation ──────────────────────────── */
.txn-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--glass-b);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.txn-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t3);
  background: transparent;
  border: 1px solid var(--glass-b);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.txn-tab:hover { background: var(--abg); color: var(--t2); border-color: var(--glass-b2); }
.txn-tab.active { background: var(--abg2); color: var(--a2); border-color: var(--a); font-weight: 700; }
.txn-tab svg { width: 12px; height: 12px; }
.txn-tab-badge {
  background: var(--abg);
  color: var(--a2);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}
.txn-tab.active .txn-tab-badge { background: var(--a); color: #fff; }

/* ── REPORTS: Tabbed organization ─────────────────────────────── */
.rep-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--glass-b);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.rep-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t3);
  background: transparent;
  border: 1px solid var(--glass-b);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.rep-tab:hover { background: var(--abg); color: var(--t2); border-color: var(--glass-b2); }
.rep-tab.active { background: var(--abg2); color: var(--a2); border-color: var(--a); font-weight: 700; }
.rep-tab svg { width: 13px; height: 13px; }

/* ── REPORTS: Section panels ──────────────────────────────────── */
.rep-panel { display: none; }
.rep-panel.active { display: block; animation: pgIn .25s ease; }

/* ── REPORTS: Detailed history table ─────────────────────────── */
.htbl-detailed thead tr th {
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 700;
  background: var(--glass);
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-b);
  white-space: nowrap;
}
.htbl-detailed tbody tr td {
  padding: 10px 12px;
  font-size: 12.5px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(100,160,255,0.05);
}
.htbl-detailed tbody tr:hover td { background: var(--abg); }
.htbl-detailed .avgrow td {
  background: var(--glass);
  font-weight: 700;
  border-top: 1px solid var(--glass-b2);
  color: var(--t2);
}

/* ── Sidebar nav group labels with emoji ──────────────────────── */
.sbgl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: none;
  color: var(--t3);
  padding: 0 7px;
  margin-bottom: 5px;
}

/* ── REPORTS: summary stat row ────────────────────────────────── */
.rep-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media(max-width:600px) {
  .rep-summary-row { grid-template-columns: 1fr 1fr; }
}
.rep-sum-card {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--r2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rep-sum-lbl { font-size: 10.5px; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.rep-sum-val { font-size: 16px; font-weight: 700; font-family: var(--fnum); letter-spacing: -.02em; }


/* ── v22 IMPROVEMENTS ─────────────────────────────────────────── */

/* Hide old txn-tabs (replaced with dropdowns) */
.txn-tabs { display: none !important; }

/* Dashboard welcome — no wave icon needed */
.dash-welcome-wave { display: none; }
.dash-welcome { gap: 10px; }

/* Compact search bar */
.srch { max-width: 240px; }
.fbar .srch { max-width: 100%; }
@media(max-width:700px) { .srch { max-width: 100%; } }

/* Sidebar group labels — cleaner, no emoji */
.sbgl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t4);
  padding: 0 8px;
  margin-bottom: 4px;
  margin-top: 4px;
}

/* Toolbar dropdowns in cashflow page */
.txn-toolbar-l select.fc {
  height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* Budget status — improved row spacing */
.bud-status-row { padding: 10px 0; border-bottom: 1px solid var(--glass-b); }
.bud-status-row:last-child { border-bottom: none; }

/* Income page header with History + Add Account side by side */
.phdr .fl.g8 { flex-wrap: wrap; }

/* Reports simplified — hide rep-summary-row in overview (merged) */
#rep-panel-overview .rep-summary-row { display: none; }

/* ── Reports mobile export button ───────────────────────── */
.rep-export-mobile {
  display: none;
  position: fixed;
  top: 10px;
  right: 56px;
  z-index: 250;
  width: 34px; height: 34px;
  background: var(--abg2);
  border: 1px solid var(--glass-b2);
  border-radius: var(--r1);
  align-items: center;
  justify-content: center;
  color: var(--a2);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.rep-export-mobile:hover { background: var(--abg); color: var(--a); }
.rep-export-desktop { display: inline-flex; }

@media (max-width: 640px) {
  .rep-export-desktop { display: none; }
  .rep-export-mobile { display: flex; }
}

/* ═══════════════════════════════════════════════════════════
   IMPROVEMENT PATCH — Mobile & UX Fixes
   ═══════════════════════════════════════════════════════════ */

/* ── phdr: keep title left, buttons always right ── */
.phdr {
  justify-content: space-between;
  align-items: center;
}
.phdr .phdr-title { flex: 1 1 auto; min-width: 0; }
.phdr > div.fl,
.phdr > .fl,
.phdr > button { flex: 0 0 auto; margin-left: auto; }

/* ── phdr mobile: keep buttons on right side ── */
@media(max-width:640px){
  .phdr {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .phdr .phdr-title { flex: 1 1 0; min-width: 0; overflow: visible; }
  .phdr > div.fl,
  .phdr > .fl {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    margin-left: auto;
  }
  .phdr .uv-button { flex: 0 0 auto !important; white-space: nowrap; padding: 8px 12px; font-size: 11.5px; }
  .phdr .btn.bo   { flex: 0 0 auto !important; white-space: nowrap; padding: 7px 10px; font-size: 11.5px; }
  .phdr input[type="month"] { flex: 0 0 auto !important; min-width: 100px; max-width: 140px; }
}
@media(max-width:400px){
  .phdr { gap: 6px !important; padding: 10px 10px 0 !important; }
  .phdr .uv-button { font-size: 10.5px !important; padding: 6px 8px !important; }
  .phdr .btn.bo   { font-size: 10.5px !important; padding: 5px 7px !important; }
  .phdr input[type="month"] { min-width: 80px !important; max-width: 100px !important; font-size: 10.5px !important; padding: 5px 6px !important; }
}

/* ── Reports: export button fix — not overlapping header ── */
.rep-export-mobile {
  position: static !important;
  display: none;
  width: 34px; height: 34px;
  background: var(--abg2);
  border: 1px solid var(--glass-b2);
  border-radius: var(--r1);
  align-items: center;
  justify-content: center;
  color: var(--a2);
  text-decoration: none;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
@media(max-width:640px){
  .rep-export-desktop { display: none !important; }
  .rep-export-mobile  { display: flex !important; }
}

/* ── Reports: mobile — prevent tab clutter ── */
@media(max-width:600px){
  .rep-tabs {
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rep-tabs::-webkit-scrollbar { display: none; }
  .rep-tab { white-space: nowrap; font-size: 11.5px; padding: 7px 12px; }
}

/* ── Reports: summary/spending/history mobile layout ── */
@media(max-width:600px){
  .rep-summary-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .rep-sum-card { padding: 10px 10px; }
  .rep-sum-lbl { font-size: 9.5px; }
  .rep-sum-val { font-size: 14px; }
  /* Assets grid */
  .assets-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .asset-stat-card { padding: 12px; }
  .asset-stat-val { font-size: 14px; }
}
@media(max-width:400px){
  .rep-summary-row { grid-template-columns: 1fr; }
  .assets-grid { grid-template-columns: 1fr; }
}

/* ── Charts: horizontal scroll container ── */
.rep-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-b) transparent;
  border-radius: var(--r1);
}
.rep-scroll-wrap::-webkit-scrollbar { height: 4px; }
.rep-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.rep-scroll-wrap::-webkit-scrollbar-thumb { background: var(--glass-b2); border-radius: 2px; }

/* ── Cashflow chart: scrollable on mobile ── */
@media(max-width:640px){
  #card-rep-cf .chw,
  #card-rep-cf .rep-scroll-wrap { min-width: 0; }
  #card-rep-cf .rep-scroll-wrap > .chw { min-width: 480px; }
  /* Forecast: scrollable vertically */
  #card-rep-forecast .rep-scroll-wrap {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* ── Income page: search + date filter side by side ── */
.fbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.fbar .srch { flex: 1 1 0; min-width: 0; max-width: none !important; }
.fbar select.fc { flex: 0 0 auto; min-width: 110px; max-width: 140px; }
@media(max-width:480px){
  .fbar { flex-wrap: nowrap !important; gap: 6px !important; }
  .fbar .srch { min-width: 0; }
  .fbar select.fc { min-width: 90px; font-size: 12px; }
}

/* ── Debt history tabs ── */
#dh-pay-panel, #dh-exp-panel { margin-top: 4px; }

/* ── Calendar budget month picker — improve design ── */
.hcal-cell {
  border-radius: var(--r2);
  padding: 10px 6px;
  transition: all .18s;
}
.hcal-cell.has-data { cursor: pointer; }
.hcal-cell.has-data:hover { background: var(--abg2); border-color: var(--a); }
.hcal-cell.on { background: var(--abg2) !important; border-color: var(--a) !important; }
.hist-cal-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--r2);
}
.hist-cal-ylbl { font-size: 15px; font-weight: 700; color: var(--t2); letter-spacing: -.01em; }

/* ═══════════════════════════════════════════════════════════════
   UI REFRESH — HAMBURGER / SIDEBAR / BADGES / MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* ── NEW HAMBURGER WRAPPER in topbar ─────────────────────────── */
.hamburger-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
}

/* ── TOPBAR: less crowded — push title left, compress right ──── */
.topbar { gap: 0; }
.tb-l { flex: 1; min-width: 0; }
.tb-r { gap: 6px; flex-shrink: 0; flex-wrap: nowrap; }

/* ── PAGE TITLE: always visible including mobile ─────────────── */
@media (max-width: 640px) {
  .phdr {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
    padding: 12px 14px 0 !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .phdr:empty { display: flex !important; } /* Force display even if content is empty */
  .phdr-title {
    display: flex !important; flex-direction: column !important; gap: 2px !important;
    visibility: visible !important; opacity: 1 !important;
    flex: 1 1 auto; min-width: 0; /* Allow title to take space and prevent overflow */
  }
  .phdr-title .tb-ttl,
  .phdr-title .ph1 { display: block !important; font-size: 17px !important; font-weight: 800; color: var(--t); }
  .phdr-title .tb-sub,
  .phdr-title .psub { display: block !important; font-size: 11px !important; }
  /* Keep topbar clean — hide sub-label from topbar on mobile since phdr shows title */
  .topbar .tb-l .tb-sub { display: none !important; }
}

/* ── LANDING: nav-r is always a flex row, never collapsed ── */
.lnav-r {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* ── SIDEBAR REFRESH ──────────────────────────────────────────── */
.sbgrp { margin-bottom: 14px; }
.sbgl {
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--t3);
  padding: 0 10px; margin-bottom: 4px; opacity: .7;
}
.sbnav { padding: 8px 6px; }
.sbi svg { opacity: .75; transition: opacity .18s; }
.sbi:hover svg, .sbi.on svg { opacity: 1; }

/* sidebar header border */

/* ── PILL / BADGE overrides — all chips minimal ──────────────── */
/* Budget overspent / percentage chips */
.bud-pct-pill, .pct-pill, .overspent-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0;
}
/* status inline spans used in buildHistTable */
#rep-panel-history span[style*="border-radius:99px"] {
  border-radius: 5px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
}
/* budget module inline status spans */
.pfr ~ *, .pfa ~ * { }

/* Force all pill-like inline spans to be minimal */
span[style*="border-radius:99px"]:not(.badge):not(.fpill):not(.hdc-badge) {
  border-radius: 5px !important;
}

/* ── TOPBAR: hide user avatar pill on very small screens ─────── */
@media (max-width: 380px) {
  .tb-r > div[style*="border-radius:99px"] { display: none; }
}

/* ── SIDEBAR FOOTER ───────────────────────────────────────────── */
.sbft { padding: 8px 12px; border-top: 1px solid var(--glass-b); }

/* ── VEIL (overlay when sidebar open) ────────────────────────── */
.veil { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* ═══════════════════════════════════════════════════════════════
   UI POLISH: Landing nav buttons / Section title / Sidebar
   ═══════════════════════════════════════════════════════════════ */

/* ── Landing header buttons: compact, no overflow (desktop only — hidden on mobile via hamburger) ── */
.lnav-btn {
  padding: 7px 18px !important;
  font-size: 12.5px !important;
  white-space: nowrap;
  min-width: 0 !important;
}
/* keep lnav-r .uv-button compact for any uv-button that might end up in the nav */
.lnav-r .uv-button {
  padding: 7px 16px !important;
  font-size: 12px !important;
  white-space: nowrap;
  min-width: 0 !important;
}
/* Features nav link */
.lnav-features-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.lnav-features-link:hover {
  background: var(--card);
  color: var(--acc);
}

/* Landing nav logo sizing is now handled by clamp() rules above */

/* ══════════════════════════════════════════════════════
   QUICK TOUR / WALKTHROUGH
   ══════════════════════════════════════════════════════ */

/* Welcome modal overlay */
.tour-welcome-ov {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.tour-welcome-ov.open { display: flex; }

.tour-welcome-box {
  background: #ffffff;
  border-radius: 20px;
  max-width: 480px; width: 100%;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.3);
  animation: tourPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
[data-theme=dark] .tour-welcome-box {
  background: #161b2e;
  border: 1px solid rgba(77,143,255,.15);
}
@keyframes tourPop {
  from { transform: scale(.88) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.tour-welcome-hero {
  background: linear-gradient(135deg,#4d8fff 0%,#a855f7 60%,#22e89a 100%);
  padding: 36px 32px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tour-welcome-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.15) 0%, transparent 60%);
}
.tour-welcome-emoji { font-size: 52px; margin-bottom: 10px; display: block; }
.tour-welcome-hero-title {
  font-size: 22px; font-weight: 800; color: #fff;
  margin-bottom: 6px;
}
.tour-welcome-hero-sub { font-size: 13px; color: rgba(255,255,255,.8); }

.tour-welcome-body { padding: 28px 28px 24px; }
.tour-welcome-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.tour-welcome-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; color: #3d5a8a; line-height: 1.5;
}
[data-theme=dark] .tour-welcome-list li { color: #8ba5d4; }
.tour-welcome-list li .twi {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg,#4d8fff22,#a855f722);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.tour-welcome-list li strong { color: #0f1c3a; display: block; font-size: 13px; }
[data-theme=dark] .tour-welcome-list li strong { color: #e8eeff; }

.tour-welcome-actions {
  display: flex; gap: 10px; flex-direction: column;
}
.tour-btn-start {
  background: linear-gradient(135deg,#4d8fff,#a855f7);
  color: #fff; border: none; border-radius: 12px;
  padding: 14px 0; font-size: 14px; font-weight: 700;
  cursor: pointer; width: 100%;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 16px rgba(77,143,255,.35);
}
.tour-btn-start:hover { opacity: .9; transform: translateY(-1px); }
.tour-btn-start:active { transform: scale(.97); }
.tour-btn-skip-welcome {
  background: none; border: none;
  color: #8ba5d4; font-size: 13px; cursor: pointer;
  padding: 6px; text-align: center; width: 100%;
  transition: color .2s;
}
.tour-btn-skip-welcome:hover { color: #4d8fff; }

/* Tour step overlay (dims the background) */
.tour-overlay {
  position: fixed; inset: 0; z-index: 3500;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  pointer-events: all;
}

/* Highlighted element during tour */
.tour-highlight {
  position: relative !important;
  z-index: 3600 !important;
  border-radius: var(--r1);
  box-shadow: 0 0 0 4px #4d8fff, 0 0 0 8px rgba(77,143,255,.25), 0 0 32px rgba(77,143,255,.4) !important;
  pointer-events: none;
  animation: tourPulse 1.8s ease-in-out infinite;
}
@keyframes tourPulse {
  0%,100% { box-shadow: 0 0 0 4px #4d8fff, 0 0 0 8px rgba(77,143,255,.25), 0 0 32px rgba(77,143,255,.4); }
  50%      { box-shadow: 0 0 0 4px #a855f7, 0 0 0 10px rgba(168,85,247,.3), 0 0 40px rgba(168,85,247,.45); }
}

/* Tour tooltip card */
.tour-tooltip {
  position: fixed; z-index: 3700;
  width: 340px;
  background: #ffffff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15);
  border: 1px solid rgba(77,143,255,.2);
  animation: tourFadeIn .25s ease both;
}
[data-theme=dark] .tour-tooltip {
  background: #161b2e;
  border-color: rgba(77,143,255,.2);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
@keyframes tourFadeIn {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.tour-tip-progress {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.tour-tip-dots { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; max-width: 200px; }
.tour-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(77,143,255,.25);
  transition: all .25s;
}
.tour-dot.active {
  width: 14px; border-radius: 3px;
  background: linear-gradient(90deg,#4d8fff,#a855f7);
}
.tour-tip-counter { font-size: 11px; color: #8ba5d4; font-weight: 600; }

.tour-tip-title {
  font-size: 15px; font-weight: 700; color: #0f1c3a;
  margin-bottom: 8px;
}
[data-theme=dark] .tour-tip-title { color: #e8eeff; }

.tour-tip-body {
  font-size: 12.5px; color: #3d5a8a; line-height: 1.65;
  margin-bottom: 18px;
}
[data-theme=dark] .tour-tip-body { color: #8ba5d4; }

.tour-tip-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.tour-btn-skip {
  background: none; border: none;
  color: #8ba5d4; font-size: 11.5px; cursor: pointer;
  padding: 0; transition: color .2s;
}
.tour-btn-skip:hover { color: #ef4444; }
.tour-btn-prev {
  background: var(--glass,rgba(255,255,255,.08));
  border: 1px solid rgba(77,143,255,.2);
  color: #4d8fff; border-radius: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.tour-btn-prev:hover { background: rgba(77,143,255,.1); }
.tour-btn-next {
  background: linear-gradient(135deg,#4d8fff,#a855f7);
  color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 12px rgba(77,143,255,.3);
}
.tour-btn-next:hover { opacity: .9; transform: translateY(-1px); }
.tour-btn-next:active { transform: scale(.96); }

/* Restart tour button in settings */
.tour-restart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid rgba(77,143,255,.3);
  color: #4d8fff; border-radius: 8px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.tour-restart-btn:hover { background: rgba(77,143,255,.08); border-color: #4d8fff; }

@media (max-width: 520px) {
  .tour-tooltip { width: calc(100vw - 32px); left: 16px !important; }
}

/* ── Uiverse custom checkbox (Terms & Privacy) ── */
.checkbox-wrapper * {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.checkbox-wrapper input[type="checkbox"] {
  display: none;
}
.checkbox-wrapper label {
  --size: 28px;
  --shadow: calc(var(--size) * .07) calc(var(--size) * .1);
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  margin: 0;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  border-radius: 50%;
  box-shadow: 0 var(--shadow) #ffbeb8;
  cursor: pointer;
  transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
  overflow: hidden;
  z-index: 1;
}
.checkbox-wrapper label:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: calc(var(--size) * .7);
  height: calc(var(--size) * .7);
  margin: 0 auto;
  background-color: #fff;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: inset 0 var(--shadow) #ffbeb8;
  transition: 0.2s ease width, 0.2s ease height;
}
.checkbox-wrapper label:hover:before {
  width: calc(var(--size) * .55);
  height: calc(var(--size) * .55);
  box-shadow: inset 0 var(--shadow) #ff9d96;
}
.checkbox-wrapper label:active {
  transform: scale(0.9);
}
.checkbox-wrapper .tick_mark {
  position: absolute;
  top: -1px;
  right: 0;
  left: calc(var(--size) * -.05);
  width: calc(var(--size) * .6);
  height: calc(var(--size) * .6);
  margin: 0 auto;
  margin-left: calc(var(--size) * .14);
  transform: rotateZ(-40deg);
}
.checkbox-wrapper .tick_mark:before,
.checkbox-wrapper .tick_mark:after {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 2px;
  opacity: 0;
  transition: 0.2s ease transform, 0.2s ease opacity;
}
.checkbox-wrapper .tick_mark:before {
  left: 0;
  bottom: 0;
  width: calc(var(--size) * .1);
  height: calc(var(--size) * .3);
  box-shadow: -2px 0 5px rgba(0,0,0,.23);
  transform: translateY(calc(var(--size) * -.68));
}
.checkbox-wrapper .tick_mark:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--size) * .1);
  box-shadow: 0 3px 5px rgba(0,0,0,.23);
  transform: translateX(calc(var(--size) * .78));
}
.checkbox-wrapper input[type="checkbox"]:checked + label {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  box-shadow: rgba(0,0,0,.3) 0px 19px 38px, rgba(0,0,0,.22) 0px 15px 12px;
}
.checkbox-wrapper input[type="checkbox"]:checked + label:before {
  width: 0;
  height: 0;
}
.checkbox-wrapper input[type="checkbox"]:checked + label .tick_mark:before,
.checkbox-wrapper input[type="checkbox"]:checked + label .tick_mark:after {
  transform: translate(0);
  opacity: 1;
}

/* ── Privacy & Terms overlay ── */
.privacy-ov{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:none;align-items:flex-start;justify-content:center;
  padding:40px 16px 32px;overflow-y:auto;
}
.privacy-ov.open{display:flex;}
.privacy-modal-box{
  width:100%;max-width:680px;
  border-radius:16px;overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  max-height:82vh;
  display:flex;flex-direction:column;
}
[data-theme=dark] .privacy-modal-box{
  background:#161b2e;
  border-color:rgba(77,143,255,.15);
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.privacy-modal-hdr{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 16px;
  background:#ffffff;
  border-bottom:1px solid rgba(0,0,0,.1);
  flex-shrink:0;
}
[data-theme=dark] .privacy-modal-hdr{
  background:#161b2e;
  border-bottom-color:rgba(77,143,255,.12);
}
.privacy-modal-title{
  font-size:17px;font-weight:700;
  color:#0f1c3a;
}
[data-theme=dark] .privacy-modal-title{color:#e8eeff;}
.privacy-modal-body{
  padding:24px;
  overflow-y:auto;
  flex:1;
  color:#1e3060;
  font-size:13px;line-height:1.7;
}
[data-theme=dark] .privacy-modal-body{color:#8ba5d4;}
.privacy-modal-body p{margin-bottom:8px;}
.privacy-modal-body ul{padding-left:20px;margin-bottom:8px;}
.privacy-modal-body li{margin-bottom:4px;}
.privacy-section-title{
  font-size:14px;font-weight:700;
  color:#2563eb;
  margin:0 0 10px;
}
[data-theme=dark] .privacy-section-title{color:#4d8fff;}
.privacy-field-title{
  font-size:13px;font-weight:600;
  color:#0f1c3a;
  margin:14px 0 5px;
}
[data-theme=dark] .privacy-field-title{color:#e8eeff;}
.privacy-divider{
  border:none;border-top:1px solid rgba(0,0,0,.08);
  margin:20px 0;
}
[data-theme=dark] .privacy-divider{border-top-color:rgba(77,143,255,.12);}

/* ─────────────────────────────────────────────────────────
   LANDING NAV — fluid / auto-scaling (mobile-first, no hamburger)
   Uses clamp() so everything scales continuously between breakpoints.
   ───────────────────────────────────────────────────────── */

/* Logo SVG: 22px → 36px across 280–640px */
.land-nav .llogo-svg {
  width:  clamp(22px, 6vw, 36px) !important;
  height: clamp(22px, 6vw, 36px) !important;
}
/* "Splurge" wordmark */
.land-nav .llogo-splurge {
  font-size: clamp(12px, 4.2vw, 20px) !important;
  line-height: 1.3 !important;
}
/* "Allocator" wordmark — same size and font as Splurge, aligned */
.land-nav .llogo-allocator {
  font-size: clamp(12px, 4.2vw, 20px) !important;
  line-height: 1.3 !important;
  display: inline !important;
}
@media (max-width: 340px) {
  .land-nav .llogo-allocator { display: none !important; }
}

/* Nav container padding */
.land-nav {
  padding: 0 clamp(8px, 3vw, 5%) !important;
}

/* Nav right gap */
.lnav-r {
  gap: clamp(4px, 1.2vw, 10px) !important;
}

/* Theme toggle visible at all screen sizes */

/* Landing nav buttons — fluid padding + font, never wrap, never resize abruptly */
.lnav-btn {
  padding: clamp(5px, 1.4vw, 9px) clamp(8px, 2.6vw, 18px) !important;
  font-size: clamp(10px, 2.8vw, 12.5px) !important;
  white-space: nowrap !important;
}

/* ── Dashboard topbar logo — fluid on narrow screens ── */
.tb-logo-svg {
  width:  clamp(22px, 6vw, 36px);
  height: clamp(22px, 6vw, 36px);
}
.tb-logo .llogo-splurge {
  font-size: clamp(12px, 4vw, 20px);
  line-height: 1.3;
}
.tb-logo .llogo-allocator {
  font-size: clamp(12px, 4vw, 20px);
  line-height: 1.3;
  font-family: "Maven Pro", sans-serif;
  font-weight: 700;
}
@media (max-width: 360px) {
  .tb-logo .llogo-allocator { display: none !important; }
  .topbar { padding: 0 8px !important; }
}
@media (max-width: 320px) {
  .topbar { padding: 0 6px !important; }
}

/* ── Section title: always visible, never clipped ── */
.phdr { overflow: visible !important; }
.phdr-title {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  flex: 1 1 auto;
  min-width: 0;
}
.phdr-title .tb-ttl,
.phdr-title .ph1 {
  display: block !important;
  color: var(--t) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 640px) {
  .phdr-title .tb-ttl,
  .phdr-title .ph1 { font-size: 20px !important; font-weight: 800 !important; }
  .phdr-title .tb-sub,
  .phdr-title .psub { font-size: 11px !important; display: block !important; }
}

/* ── Sidebar: animated open/close, hamburger inside stays visible ── */
.sb-toggle-wrap { flex-shrink: 0; }
/* Sync checkbox state when sidebar opens/closes via JS */
.sidebar.open #checkbox { /* checked via JS */ }

/* ── Topbar hamburger size ── */
.hamburger { width: 24px !important; height: 18px !important; }
.hamburger .hb { height: 2.5px; }

/* ── BUDGET SUMMARY: horizontal scroll on mobile ── */
.rep-bud-stat-scroll::-webkit-scrollbar{display:none}
.rep-bud-stat-scroll{-ms-overflow-style:none;scrollbar-width:none}

/* ── SIDEBAR: light/dark theme compatibility ── */
[data-theme=light] .sb-toggle-wrap:hover{background:rgba(77,143,255,.1)}
[data-theme=light] .bar{background:var(--t2)}
[data-theme=light] .sb-logout-full{color:var(--t2);border-color:rgba(77,143,255,.18)}
[data-theme=light] .sb-logout-full:hover{background:rgba(255,94,94,.08);color:var(--r);border-color:rgba(255,94,94,.25)}
[data-theme=dark] .bar{background:var(--t2)}

/* ── SIDEBAR RESPONSIVE ── */
@media(max-width:767px){
  .sbhdr{padding:12px 14px}
  .sbname{font-size:13px}
}
@media(max-width:480px){
  .sblogo{width:28px;height:28px;font-size:12px}
  .sbname{font-size:12px}
  .sbi{padding:9px 10px;font-size:12.5px}
  .sb-profile-pic{width:52px;height:52px}
}

/* ════════════════════════════════════════════════════════════
   PUSH SIDEBAR — desktop pushes main, mobile overlays
   ════════════════════════════════════════════════════════════ */

/* Both: sidebar hidden by default, slides in */
.sidebar {
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
}
.sidebar.open {
  transform: translateX(0) !important;
  box-shadow: 4px 0 40px rgba(0,0,0,.22) !important;
}

/* Desktop: sidebar pushes main content right */
@media (min-width: 961px) {
  .main {
    margin-left: 0;
    transition: margin-left .32s cubic-bezier(.4,0,.2,1);
  }
  .main.pushed {
    margin-left: var(--sw);
  }
  .veil { display: none !important; }
}

/* Mobile: sidebar overlays with veil */
@media (max-width: 960px) {
  .main { margin-left: 0 !important; }
  .veil.open { display: block; }
}

/* ════════════════════════════════════════════════════════════
   TOPBAR: logo beside hamburger (left side)
   ════════════════════════════════════════════════════════════ */
.tb-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--t);
  opacity: 1;
  transition: opacity .3s;
}
.tb-logo .tb-logo-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.tb-logo .g { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* Hide logo when sidebar is open (it appears in sidebar header) */
.sidebar.open ~ .main .tb-logo,
#app.sb-open .main .tb-logo { opacity: 0; pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   PILL MARQUEE BAR — landing page
   ════════════════════════════════════════════════════════════ */
.pill-marquee-bar {
  width: 100%;
  overflow: hidden;
  height: 34px;
  background: linear-gradient(90deg, var(--a) 0%, #b57fff 50%, var(--a) 100%);
  background-size: 200% 100%;
  animation: gradShift 6s linear infinite;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
  flex-shrink: 0;
}
@keyframes gradShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.pill-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: pillScroll 32s linear infinite;
  will-change: transform;
}
.pill-marquee-bar:hover .pill-marquee-track { animation-play-state: paused; }
@keyframes pillScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pill-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 34px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0,0,0,.75);
  flex-shrink: 0;
}
.pill-marquee-item .pmidot {
  width: 3px; height: 3px;
  background: rgba(0,0,0,.35);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Landing hero subtitle line */
.hero-subline {
  font-size: .95rem;
  color: var(--t2);
  font-style: italic;
  margin: -12px 0 20px;
  max-width: 440px;
  animation: fadeup .6s .15s ease both;
}

/* Tablet: center hero-subline (iPad Mini 768, iPad Air 820, Surface Duo 540, Asus ZenFold Duo 884) */
@media (min-width: 540px) and (max-width: 1024px) {
  .hero-subline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ════════════════════════════════════════════════════════════
   TOPBAR: ALWAYS full-width fixed — never moves or shifts
   ════════════════════════════════════════════════════════════ */
/* Topbar is fixed at top:0, left:0, right:0 — width:100% always */
.topbar { left: 0 !important; right: 0 !important; width: 100% !important; }
.tb-logo { opacity: 1 !important; pointer-events: auto !important; }

/* Hamburger X animation */
.hamburger.active .hb-t { transform: translateY(8px) rotate(45deg) !important; width: 100% !important; }
.hamburger.active .hb-m { opacity: 0 !important; width: 0 !important; }
.hamburger.active .hb-b { transform: translateY(-8px) rotate(-45deg) !important; }

/* ── Landing page hero padding accounts for pill bar ── */
.landing .hero { padding-top: 140px; }

/* ── Hero pill rotator transition ── */
#hero-pill-text {
  display: inline-block;
  transition: opacity .28s ease, transform .28s ease;
}

/* ── Remove pill marquee bar top padding compensation ── */
.landing .hero { padding-top: 108px !important; }

/* ── Landing nav buttons: smaller on narrow mobile (≤480px) ── */
@media (max-width: 480px) {
  .lnav-btn,
  .lnav-r .uv-button {
    padding: 4px 9px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
  }
}

/* ── Tour welcome modal: scaled down for small phones (375×667, iPhone SE) ── */
@media (max-width: 480px) {
  .tour-welcome-ov { padding: 10px; }
  .tour-welcome-box {
    border-radius: 14px;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }
  .tour-welcome-hero { padding: 18px 18px 14px; }
  .tour-welcome-emoji { font-size: 34px; margin-bottom: 6px; }
  .tour-welcome-hero-title { font-size: 17px; margin-bottom: 4px; }
  .tour-welcome-hero-sub { font-size: 11px; }
  .tour-welcome-body { padding: 14px 16px 14px; }
  .tour-welcome-list { gap: 8px; margin-bottom: 14px; }
  .tour-welcome-list li { font-size: 11px; gap: 8px; line-height: 1.4; }
  .tour-welcome-list li .twi { width: 24px; height: 24px; flex-shrink: 0; font-size: 12px; border-radius: 6px; }
  .tour-welcome-list li strong { font-size: 11.5px; }
  .tour-welcome-actions { gap: 6px; }
  .tour-btn-start { padding: 10px 0; font-size: 13px; border-radius: 10px; }
  .tour-btn-skip-welcome { font-size: 11px; padding: 4px; }
}

/* ── Savings / Budget / Cash Flow / Income: 2-row phdr at mobile ── */
@media (max-width: 430px) {
  #pg-savings .phdr,
  #pg-budget .phdr,
  #pg-transactions .phdr,
  #pg-income .phdr {
    flex-wrap: wrap !important;
    gap: 6px 0 !important;
    padding-bottom: 10px !important;
  }
  #pg-savings .phdr .phdr-title,
  #pg-budget .phdr .phdr-title,
  #pg-transactions .phdr .phdr-title,
  #pg-income .phdr .phdr-title {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #pg-savings .phdr > div.fl,
  #pg-savings .phdr > .fl,
  #pg-budget .phdr > div.fl,
  #pg-budget .phdr > .fl,
  #pg-transactions .phdr > div.fl,
  #pg-transactions .phdr > .fl,
  #pg-income .phdr > div.fl,
  #pg-income .phdr > .fl {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
}

/* ── Theme toggle switch: always visible in both navbars at ALL screen sizes ── */
.lnav-r > .switch,
.tb-r > .switch {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  width: 46px !important;
  height: 26px !important;
}

/* ── phdr narrow fix: single row, title visible, buttons pinned right ── */
@media (max-width: 480px) {
  .phdr {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 14px 12px 0 !important;
  }
  .phdr .phdr-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .phdr .phdr-title .tb-ttl,
  .phdr .phdr-title .ph1 {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 17px !important;
  }
  .phdr .phdr-title .tb-sub,
  .phdr .phdr-title .psub {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .phdr > div.fl,
  .phdr > .fl,
  .phdr > button {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-left: auto !important;
  }
  .phdr .uv-button { font-size: 11px !important; padding: 7px 10px !important; }
  .phdr .btn.bo   { font-size: 11px !important; padding: 6px 8px !important; }
  .phdr input[type="month"] { min-width: 88px !important; max-width: 110px !important; font-size: 11px !important; padding: 6px 8px !important; }
}