/* ═══════════════════════════════════════════════════════════════════════
   VAULT V8 — AGENCY-GRADE FINANCIAL OS
   Fully Responsive · Premium Animations · World-Class Design
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ DARK THEME ══ */
[data-theme="dark"] {
  --bg:#030509;--bg1:#07091a;--bg2:#0b0f1e;--bg3:#10142a;--bg4:#161c32;--bg5:#1e253c;
  --glass:rgba(7,9,26,.88);--glass2:rgba(255,255,255,.025);
  --border:rgba(255,255,255,.052);--border2:rgba(255,255,255,.095);--border3:rgba(255,255,255,.16);
  --text:#edf0ff;--text2:#5e6882;--text3:#2c3354;
  --shadow:0 24px 64px rgba(0,0,0,.8);--shadow2:0 4px 24px rgba(0,0,0,.55);
  --card-s:0 2px 20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.032);
  --input-bg:#0d1120;--topbar-bg:rgba(3,5,9,.94);
  --skel-from:rgba(255,255,255,.032);--skel-to:rgba(255,255,255,.068);
  --apos:#1fc855;--aneg:#ff3558;
}
[data-theme="light"] {
  --bg:#f0f4ff;--bg1:#ffffff;--bg2:#fafbff;--bg3:#f0f3fc;--bg4:#e8ecf8;--bg5:#dde4f5;
  --glass:rgba(255,255,255,.96);--glass2:rgba(0,0,0,.018);
  --border:rgba(99,102,241,.08);--border2:rgba(99,102,241,.14);--border3:rgba(99,102,241,.22);
  --text:#0a0d1e;--text2:#4a5280;--text3:#8891b8;
  --shadow:0 12px 48px rgba(99,102,241,.1);--shadow2:0 4px 20px rgba(99,102,241,.08);
  --card-s:0 2px 20px rgba(99,102,241,.07),0 0 0 1px rgba(99,102,241,.06);
  --input-bg:#f8f9ff;--topbar-bg:rgba(240,244,255,.97);
  --skel-from:#e8edf8;--skel-to:#d4dcf0;
  --apos:#16a34a;--aneg:#dc2626;
  --lime:#6366f1;--lime2:#4f52d9;--lime3:#818cf8;
  --lime-glow:rgba(99,102,241,.12);--lime-glow2:rgba(99,102,241,.28);--lime-glow3:rgba(99,102,241,.07);
  --cyan:#0ea5e9;--cyan-glow:rgba(14,165,233,.12);
}
:root {
  --lime:#c5f235;--lime2:#a8d020;--lime3:#dcff6e;
  --lime-glow:rgba(197,242,53,.14);--lime-glow2:rgba(197,242,53,.32);--lime-glow3:rgba(197,242,53,.08);
  --cyan:#00ddf8;--cyan-glow:rgba(0,221,248,.13);
  --red:#ff3558;--red-glow:rgba(255,53,88,.13);
  --amber:#ffb520;--amber-glow:rgba(255,181,32,.13);
  --violet:#8b5cf6;--green:#1fc855;
  --r:8px;--r2:12px;--r3:16px;--r4:22px;--r5:30px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --sb-w:66px;--sb-exp:264px;--tb-h:60px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-d:'Inter',system-ui,sans-serif;
  --font-m:'JetBrains Mono','Courier New',monospace;
  --bot-nav-h:64px;
}

/* ══ RESET ══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:var(--font);
  height:100%;
  overflow:hidden; /* needed for app shell — content scrolls inside .content */
  transition:background .4s,color .4s;line-height:1.5;
  padding-top:var(--safe-top);
}
button,input,select,textarea{font-family:inherit;outline:none;color:inherit;background:none;border:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(197,242,53,.22)}

/* ══ GRAIN OVERLAY ══ */
[data-theme="dark"] body::before{
  content:'';pointer-events:none;position:fixed;inset:0;z-index:9998;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* ══════════════════════════════════════════════
   LOADING SCREEN — Premium animated splash
══════════════════════════════════════════════ */
#app-loader{
  position:fixed;inset:0;z-index:99999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .55s var(--ease-out), visibility .55s;
}
#app-loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-ring{
  position:relative;width:80px;height:80px;margin-bottom:28px;
}
.loader-ring::before,.loader-ring::after{
  content:'';position:absolute;inset:0;border-radius:50%;
}
.loader-ring::before{
  border:2px solid var(--border);
  animation:ringPulse 2s ease-in-out infinite;
}
.loader-ring::after{
  border:2px solid transparent;
  border-top-color:var(--lime);
  border-right-color:rgba(197,242,53,.3);
  animation:ringSpinSlower 1.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes ringSpinSlower{to{transform:rotate(360deg)}}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.08);opacity:.15}}

.loader-logo-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.loader-logo-ico{
  width:44px;height:44px;background:var(--lime);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;color:#000;font-family:var(--font-d);
  box-shadow:0 0 32px var(--lime-glow2),0 8px 20px rgba(197,242,53,.2);
  animation:logoFloat 2s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.loader-text-wrap{text-align:center}
.loader-brand{font-size:22px;font-weight:900;color:var(--text);font-family:var(--font-d);letter-spacing:-.5px;margin-bottom:4px}
.loader-sub{font-size:11px;color:var(--text3);letter-spacing:2.5px;text-transform:uppercase;font-weight:700}
.loader-bar-track{
  width:120px;height:2px;background:var(--border);border-radius:99px;
  margin-top:22px;overflow:hidden;
}
.loader-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--lime),var(--cyan));
  border-radius:99px;
  animation:barLoad 1.8s var(--ease-out) forwards;
}
@keyframes barLoad{from{width:0}to{width:100%}}

/* ══ AMBIENT ORBS ══ */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;will-change:transform}
[data-theme="dark"] .orb-1{width:1000px;height:1000px;top:-380px;left:-280px;background:radial-gradient(circle,rgba(197,242,53,.026),transparent 55%);filter:blur(100px);animation:orbA 26s ease-in-out infinite}
[data-theme="dark"] .orb-2{width:800px;height:800px;bottom:-280px;right:-220px;background:radial-gradient(circle,rgba(0,221,248,.019),transparent 55%);filter:blur(100px);animation:orbA 22s ease-in-out infinite;animation-delay:-12s}
[data-theme="dark"] .orb-3{width:640px;height:640px;top:42%;left:36%;background:radial-gradient(circle,rgba(139,92,246,.014),transparent 55%);filter:blur(90px);animation:orbA 30s ease-in-out infinite;animation-delay:-7s}
[data-theme="light"] .orb-1{width:900px;height:900px;top:-300px;left:-200px;background:radial-gradient(circle,rgba(99,102,241,.06),transparent 55%);filter:blur(80px);animation:orbA 26s ease-in-out infinite;display:block}
[data-theme="light"] .orb-2{width:700px;height:700px;bottom:-200px;right:-150px;background:radial-gradient(circle,rgba(14,165,233,.05),transparent 55%);filter:blur(80px);animation:orbA 22s ease-in-out infinite;animation-delay:-12s;display:block}
[data-theme="light"] .orb-3{display:none}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(44px,-30px) scale(1.06)}65%{transform:translate(-22px,38px) scale(.95)}}

.apos{color:var(--apos)}.aneg{color:var(--aneg)}

/* ══════════════════════════════════════
   APP SHELL
══════════════════════════════════════ */
.app{display:flex;height:100%;position:relative;z-index:1;overflow:hidden;}

/* ══════════════════════════════════════
   SIDEBAR — Enhanced
══════════════════════════════════════ */
.sidebar{
  width:var(--sb-w);height:100%;flex-shrink:0;
  background:var(--bg1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:width .38s var(--ease-out);
  overflow:hidden;z-index:200;position:relative;
}
.sidebar.exp{width:var(--sb-exp)}
.sidebar.exp .nvt,.sidebar.exp .nvl,.sidebar.exp .logo-w,
.sidebar.exp .unm,.sidebar.exp .nbdg,.sidebar.exp .sync-lbl{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
}
.sidebar.exp .logo-ico,.sidebar.exp .sb-tip{display:none}

/* Logo zone */
.logo-zone{
  width:100%;padding:14px 10px 12px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  position:relative;min-height:var(--tb-h);flex-shrink:0;
}
.logo-ico{
  width:38px;height:38px;background:var(--lime);border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:900;color:#000;cursor:pointer;flex-shrink:0;
  font-family:var(--font-d);
  box-shadow:0 0 22px var(--lime-glow),0 4px 12px rgba(197,242,53,.22);
  transition:transform .24s var(--ease-spring),box-shadow .24s;
}
.logo-ico:hover{transform:scale(1.12) rotate(-5deg);box-shadow:0 0 38px var(--lime-glow2)}
.logo-w{opacity:0;transform:translateX(-10px);transition:all .26s .07s;pointer-events:none;visibility:hidden;position:absolute;left:58px;white-space:nowrap}
.brand{font-size:18px;font-weight:900;color:var(--lime);letter-spacing:-.7px;line-height:1;font-family:var(--font-d)}
.brand-s{font-size:10px;color:var(--text2);font-weight:400;margin-top:2px;letter-spacing:.2px}
.sb-arrow{
  position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:8px;color:var(--text2);
  transition:all .18s;z-index:10;
}
.sb-arrow:hover{background:var(--lime);color:#000;border-color:var(--lime);transform:translateY(-50%) scale(1.1)}

/* Nav */
.nv{flex:1;width:100%;padding:10px 8px;overflow-y:auto;overflow-x:hidden}
.nv::-webkit-scrollbar{width:0}
.nv-grp{margin-bottom:4px}
.nvl{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);
  padding:10px 11px 4px;opacity:0;transform:translateX(-5px);
  transition:all .26s .06s;pointer-events:none;visibility:hidden;white-space:nowrap;font-weight:700;
}
.nvi{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:10px;cursor:pointer;color:var(--text2);
  transition:all .16s var(--ease-out);white-space:nowrap;
  min-height:42px;border:1px solid transparent;position:relative;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.nvi:hover{background:var(--bg3);color:var(--text)}
.nvi:active{transform:scale(.96)}
.nvi.on{background:rgba(197,242,53,.076);border-color:rgba(197,242,53,.14);color:var(--lime)}
.nvi-ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .18s}
.nvi-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nvi.on .nvi-ico svg{stroke:var(--lime);filter:drop-shadow(0 0 5px rgba(197,242,53,.5))}
.nvi:hover .nvi-ico{transform:scale(1.14)}
.nvt{font-size:13px;font-weight:500;opacity:0;transform:translateX(-7px);transition:all .24s .03s;pointer-events:none;visibility:hidden;flex:1}
.nbdg{margin-left:auto;min-width:16px;height:15px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px;opacity:0;visibility:hidden;transition:opacity .26s .08s}
.sb-tip{
  position:absolute;left:calc(var(--sb-w) + 9px);top:50%;transform:translateY(-50%);
  background:var(--bg4);border:1px solid var(--border2);border-radius:8px;
  padding:5px 10px;font-size:12px;font-weight:600;color:var(--text);
  white-space:nowrap;pointer-events:none;opacity:0;z-index:9999;
  transition:opacity .14s;box-shadow:var(--shadow2);
}
.nvi:hover .sb-tip{opacity:1}

/* Sidebar footer */
.sb-ft{width:100%;padding:8px 8px 10px;border-top:1px solid var(--border);flex-shrink:0;padding-bottom:calc(10px + var(--safe-bot))}
.sync-row{display:flex;align-items:center;gap:7px;padding:3px 11px 6px;min-height:24px}
.sync-lbl{font-size:10.5px;color:var(--text2);opacity:0;visibility:hidden;transition:opacity .26s .08s;white-space:nowrap}
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:background .3s;position:relative}
.sync-dot.ok{background:var(--green)}
.sync-dot.saving{background:var(--amber);animation:pDot .9s infinite}
.sync-dot.err{background:var(--red)}.sync-dot.local{background:var(--text3)}
.sync-dot.ok::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--green);animation:syncOkRing 2s ease-out infinite}
@keyframes syncOkRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes pDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}
.upill{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .16s;min-height:50px;-webkit-tap-highlight-color:transparent}
.upill:hover{background:var(--bg3)}
.uav{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--lime),var(--cyan));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#000;flex-shrink:0;position:relative;font-family:var(--font-d)}
.uav-dot{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--green);border:2px solid var(--bg1)}
.unm{font-size:13px;font-weight:600;opacity:0;transform:translateX(-7px);transition:all .26s .08s;pointer-events:none;visibility:hidden;min-width:0;overflow:hidden}
.unm span{display:block;font-size:10.5px;color:var(--text2);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══════════════════════════════════════
   MAIN
══════════════════════════════════════ */
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:0;}

/* ══════════════════════════════════════
   TOPBAR — Enhanced glassmorphism
══════════════════════════════════════ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;height:var(--tb-h);gap:10px;flex-shrink:0;
  background:var(--topbar-bg);
  backdrop-filter:blur(32px) saturate(1.6);
  -webkit-backdrop-filter:blur(32px) saturate(1.6);
  border-bottom:1px solid var(--border);
  position:relative;z-index:50;
}
.topbar::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(197,242,53,.22) 40%,transparent);
  pointer-events:none;
}
.tb-left{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:2px;flex:1;overflow:hidden}
.pg-eye{
  font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);
  line-height:1;font-weight:700;display:flex;align-items:center;gap:6px;
}
.pg-eye::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--lime);flex-shrink:0}
.pg-title{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-d)}
.pg-title em{font-style:italic;color:var(--lime)}
.tb-right{display:flex;gap:7px;align-items:center;flex-shrink:0}

/* ══════════════════════════════════════
   CONTENT
══════════════════════════════════════ */
.content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px 22px 88px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  /* iOS Safari scroll fix */
  min-height:0;
}
.content::-webkit-scrollbar{width:3px}
.content::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:99px}

/* ══════════════════════════════════════
   PAGE TRANSITIONS — Polished
══════════════════════════════════════ */
.page{display:none}
.page.on{
  display:flex;
  flex-direction:column;
  min-height:100%;
  animation:pgIn .28s var(--ease-out) both;
}
@keyframes pgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════
   CARDS — Enhanced
══════════════════════════════════════ */
.card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);
  padding:20px 22px;box-shadow:var(--card-s);
  transition:border-color .22s,box-shadow .22s,transform .22s var(--ease-out);
  position:relative;overflow:hidden;
}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-1px)}
.card-glow{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,var(--lime) 50%,transparent 90%);opacity:0;transition:opacity .3s}
.card:hover .card-glow{opacity:.45}
.card-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:10px}
.card-ttl{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px;font-family:var(--font-d)}
.card-sub{font-size:11px;color:var(--text2);margin-top:2px}

/* ══════════════════════════════════════
   GRIDS
══════════════════════════════════════ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mb14{margin-bottom:14px}.mb18{margin-bottom:18px}.mt14{margin-top:14px}

/* ══════════════════════════════════════
   STAT CARDS — Premium KPIs
══════════════════════════════════════ */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.sc{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);
  padding:18px 20px;position:relative;overflow:hidden;
  transition:border-color .22s,transform .24s var(--ease-out),box-shadow .24s;
  box-shadow:var(--card-s);cursor:default;
}
.sc:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:var(--shadow)}
.sc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .24s;border-radius:var(--r3) var(--r3) 0 0}
.sc:hover::after{opacity:1}
.scl::after{background:linear-gradient(90deg,transparent,var(--lime),transparent)}
.scr::after{background:linear-gradient(90deg,transparent,var(--red),transparent)}
.scc::after{background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.sca::after{background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.sc-glow-bg{display:none!important}
.sc-lbl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-bottom:8px;display:flex;align-items:center;gap:5px;font-weight:700}
.sc-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.scl .sc-dot{background:var(--lime)}.scr .sc-dot{background:var(--red)}.scc .sc-dot{background:var(--cyan)}.sca .sc-dot{background:var(--amber)}
.sc-val{font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1.1;transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .3s;font-family:var(--font-d)}
.sc:hover .sc-val{transform:scale(1.03)}
.scl .sc-val,.sc-val.cl{color:var(--lime)}.scr .sc-val,.sc-val.cr{color:var(--red)}.scc .sc-val,.sc-val.cc{color:var(--cyan)}.sca .sc-val,.sc-val.ca{color:var(--amber)}
.sc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.sc-sub{font-size:10px;color:var(--text2)}
.sc-trend{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.trend-up{color:var(--green);background:rgba(31,200,85,.1)}.trend-dn{color:var(--red);background:rgba(255,53,88,.1)}
.trend-dn.inv{color:var(--green);background:rgba(31,200,85,.1)}.trend-up.inv{color:var(--red);background:rgba(255,53,88,.1)}
/* Stagger animation */
.sg .sc{animation:scIn .45s var(--ease-out) both}
.sg .sc:nth-child(1){animation-delay:.04s}.sg .sc:nth-child(2){animation-delay:.10s}
.sg .sc:nth-child(3){animation-delay:.16s}.sg .sc:nth-child(4){animation-delay:.22s}
@keyframes scIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* Skeleton */
.skel{background:linear-gradient(90deg,var(--skel-from) 25%,var(--skel-to) 50%,var(--skel-from) 75%);background-size:200% 100%;border-radius:6px;animation:shimmer 1.8s ease-in-out infinite;color:transparent!important;pointer-events:none;user-select:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ══════════════════════════════════════
   BUTTONS — Premium interactions
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border-radius:10px;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:all .16s var(--ease-out);white-space:nowrap;
  user-select:none;position:relative;overflow:hidden;
  letter-spacing:.1px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn:active{transform:scale(.93)}
.btn:disabled{opacity:.38;pointer-events:none}
/* Ripple */
.btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.2);transform:scale(0);animation:ripple .52s ease-out;pointer-events:none}
.bl .btn-ripple{background:rgba(0,0,0,.14)}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.bl{background:var(--lime);color:#000;font-weight:700;box-shadow:0 2px 12px rgba(197,242,53,.2)}
.bl:hover{background:var(--lime2);box-shadow:0 6px 24px var(--lime-glow2);transform:translateY(-1px)}
.bg{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.bg:hover{border-color:var(--border3);background:var(--bg4)}
.bd{background:rgba(255,53,88,.08);color:var(--red);border:1px solid rgba(255,53,88,.18)}
.bd:hover{background:rgba(255,53,88,.16)}
.bsm{padding:6px 12px;font-size:12px}.bxs{padding:4px 10px;font-size:11px;border-radius:7px}
.bico{padding:8px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;cursor:pointer;color:var(--text2);transition:all .16s;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bico:hover{border-color:var(--lime);color:var(--lime);background:var(--lime-glow3)}
.bico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:12px;transition:all .15s;color:var(--text3);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ab.ed:hover{background:rgba(197,242,53,.1);color:var(--lime)}.ab.de:hover{background:var(--red-glow);color:var(--red)}

/* ══════════════════════════════════════
   THEME TOGGLE — Smooth
══════════════════════════════════════ */
.tt{width:40px;height:22px;border-radius:99px;background:var(--bg3);border:1px solid var(--border2);cursor:pointer;position:relative;transition:background .26s;flex-shrink:0;touch-action:manipulation}
[data-theme="dark"] .tt{background:rgba(197,242,53,.12);border-color:rgba(197,242,53,.2)}
.tt::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text2);transition:transform .28s var(--ease-spring),background .26s;box-shadow:0 1px 4px rgba(0,0,0,.35)}
[data-theme="dark"] .tt::after{transform:translateX(18px);background:var(--lime)}

/* ══════════════════════════════════════
   MONTH NAV
══════════════════════════════════════ */
.mnav{display:flex;align-items:center;gap:3px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:3px;transition:border-color .15s}
.mnav:hover{border-color:var(--border2)}
.mnav-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:7px;cursor:pointer;font-size:15px;color:var(--text2);transition:all .14s;font-weight:600;touch-action:manipulation}
.mnav-btn:hover{background:var(--bg2);color:var(--text)}
.mnav-lbl{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;padding:0 6px;min-width:96px;text-align:center;font-family:var(--font-d)}

/* ══════════════════════════════════════
   SEARCH BAR
══════════════════════════════════════ */
.srch{
  display:flex;align-items:center;gap:7px;
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;
  padding:6px 12px;transition:all .18s;
}
.srch:focus-within{border-color:var(--lime);background:var(--bg2);box-shadow:0 0 0 3px var(--lime-glow3)}
.srch input{font-size:12.5px;color:var(--text);background:none;border:none;outline:none;width:128px;font-family:var(--font)}
.srch input::placeholder{color:var(--text3)}

/* ══════════════════════════════════════
   TABLE — Clean
══════════════════════════════════════ */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-weight:700;padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--border);transition:background .12s}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--bg3)}
.tbl tbody tr{transition:background .12s;cursor:default}
.tw{overflow-x:auto;border-radius:var(--r2);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tw::-webkit-scrollbar{height:3px}.tw::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:99px}

/* ══════════════════════════════════════
   TAGS & BADGES
══════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;line-height:1.5}
.badge-ok{background:rgba(31,200,85,.1);color:var(--green)}
.badge-err{background:rgba(255,53,88,.1);color:var(--red)}
.badge-warn{background:rgba(255,181,32,.1);color:var(--amber)}
.badge-info{background:rgba(0,221,248,.1);color:var(--cyan)}

/* ══════════════════════════════════════
   ALERTS
══════════════════════════════════════ */
.alert{border-radius:10px;padding:11px 13px;display:flex;align-items:flex-start;gap:9px;font-size:12px}
.al-c{background:rgba(197,242,53,.06);border:1px solid rgba(197,242,53,.15)}
.al-l{background:rgba(31,200,85,.06);border:1px solid rgba(31,200,85,.15)}
.al-r{background:rgba(255,53,88,.06);border:1px solid rgba(255,53,88,.15)}
.al-a{background:rgba(255,181,32,.06);border:1px solid rgba(255,181,32,.15)}
.al-ic{font-size:14px;flex-shrink:0;margin-top:1px}
.al-ttl{font-weight:700;font-size:12.5px;margin-bottom:2px}
.al-msg{color:var(--text2);font-size:11.5px;line-height:1.55}

/* ══════════════════════════════════════
   EMPTY STATES
══════════════════════════════════════ */
.empty{
  text-align:center;padding:44px 20px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;min-height:200px;
}
.empty-ico{font-size:40px;margin-bottom:4px;filter:grayscale(.2);opacity:.8}
.empty-ttl{font-size:15px;font-weight:700;color:var(--text);font-family:var(--font-d)}
.empty-sub{font-size:12px;color:var(--text2);line-height:1.65;max-width:280px}
.empty .em-btn{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:6px;padding:9px 18px;
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:10px;font-size:12.5px;font-weight:600;
  cursor:pointer;color:var(--text);transition:all .16s;
  touch-action:manipulation;
}
.empty .em-btn:hover{border-color:var(--lime);color:var(--lime);background:var(--lime-glow3)}

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.pgn{display:flex;align-items:center;gap:5px;padding:10px 0 0;justify-content:flex-end;flex-wrap:wrap}
.pgn-btn{min-width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);transition:all .14s;border:1px solid transparent;touch-action:manipulation}
.pgn-btn:hover{background:var(--bg3);color:var(--text)}
.pgn-btn.on{background:var(--lime-glow3);border-color:rgba(197,242,53,.2);color:var(--lime)}
.pgn-btn:disabled{opacity:.3;pointer-events:none}
.pgn-info{font-size:11px;color:var(--text2);margin-right:auto}

/* ══════════════════════════════════════
   FILTER TABS
══════════════════════════════════════ */
.ftab{display:flex;gap:4px;flex-wrap:wrap}
.ftab-b{padding:5px 12px;border-radius:8px;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--text2);border:1px solid transparent;transition:all .14s;touch-action:manipulation}
.ftab-b:hover{background:var(--bg3);color:var(--text)}
.ftab-b.on{background:rgba(197,242,53,.08);border-color:rgba(197,242,53,.18);color:var(--lime)}

/* ══════════════════════════════════════
   CREDIT CARDS — Visual
══════════════════════════════════════ */
.cc{
  border-radius:18px;padding:20px;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;cursor:default;
  transition:transform .24s var(--ease-out),box-shadow .24s;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.cc:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 50px rgba(0,0,0,.45)}
.cc-pattern{position:absolute;inset:0;opacity:.06}
.cc-nm{font-size:11px;font-weight:700;letter-spacing:.3px;color:rgba(255,255,255,.7);text-transform:uppercase}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start}
.cc-ic{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:15px;backdrop-filter:blur(4px)}
.cc-chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#d4af37,#f5e56b,#d4af37);position:relative;overflow:hidden}
.cc-chip::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(0,0,0,.22)}
.cc-num{font-family:var(--font-m);font-size:12.5px;color:rgba(255,255,255,.45);letter-spacing:3px;margin-top:8px}
.cc-bot{display:flex;justify-content:space-between;align-items:flex-end}
.cc-ml .lbl{font-size:9px;color:rgba(255,255,255,.26);text-transform:uppercase;letter-spacing:1.2px}
.cc-ml .val{font-size:12px;color:rgba(255,255,255,.68);margin-top:2px;font-weight:600}
.cc-bal{font-size:22px;font-weight:800;font-family:var(--font-d)}
.cc-bar{height:2px;background:rgba(255,255,255,.08);border-radius:99px;margin-top:10px;overflow:hidden}
.cc-bf{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lime),var(--cyan))}

/* ══════════════════════════════════════
   GOAL CARDS
══════════════════════════════════════ */
.goal-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:20px;transition:all .24s var(--ease-out);box-shadow:var(--card-s);position:relative;overflow:hidden}
.goal-card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:var(--shadow)}
.goal-card.done{opacity:.55}
.goal-card.done::after{content:'✓ CONCLUÍDA';position:absolute;top:12px;right:12px;background:var(--green);color:#000;font-size:9px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.5px}
.goal-em{font-size:28px;margin-bottom:8px}.goal-nm{font-size:14px;font-weight:700;margin-bottom:4px;font-family:var(--font-d)}.goal-mt{font-size:11px;color:var(--text2);margin-bottom:12px;line-height:1.55}
.goal-bar{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden;margin-bottom:7px}
.goal-bf{height:100%;border-radius:99px;transition:width 1.4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.goal-bf::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 50%,transparent);animation:shimmerBar 2.4s ease-in-out infinite}
@keyframes shimmerBar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.goal-ft{display:flex;justify-content:space-between;align-items:center;font-size:11.5px}
.goal-pct{font-weight:800;font-size:14px;font-family:var(--font-d)}

/* ══════════════════════════════════════
   MODALS — Bottom sheet / Centered
══════════════════════════════════════ */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:10000;align-items:flex-end;justify-content:center;padding:0}
.ov.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg1);border:1px solid var(--border2);
  border-radius:var(--r4) var(--r4) 0 0;
  width:100%;max-width:100%;max-height:92vh;
  overflow:hidden;display:flex;flex-direction:column;
  animation:sheetUp .3s var(--ease-out);
  box-shadow:0 -12px 50px rgba(0,0,0,.55);
  padding-bottom:var(--safe-bot);
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal::before{content:'';display:block;width:38px;height:4px;border-radius:99px;background:var(--border3);margin:12px auto 0;flex-shrink:0}
.mhd{padding:12px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.mttl{font-size:18px;font-weight:800;letter-spacing:-.3px;font-family:var(--font-d)}
.mcls{width:30px;height:30px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);cursor:pointer;font-size:12px;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all .15s;touch-action:manipulation}
.mcls:hover{background:rgba(255,53,88,.1);color:var(--red)}
.mbd{padding:18px 22px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.mbd::-webkit-scrollbar{width:3px}.mbd::-webkit-scrollbar-thumb{background:var(--bg4)}
.mft{padding:12px 22px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:7px;flex-shrink:0}

/* ══════════════════════════════════════
   FORMS — iOS Optimized
══════════════════════════════════════ */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ff{grid-column:1/-1}
.fgrp{display:flex;flex-direction:column;gap:5px}
.flb{font-size:10px;font-weight:700;color:var(--text2);letter-spacing:.8px;text-transform:uppercase}
.fin,.fse{
  background:var(--input-bg);border:1.5px solid var(--border2);border-radius:10px;
  padding:11px 13px;font-size:16px;/* 16px PREVENTS iOS ZOOM */
  color:var(--text);transition:all .16s;width:100%;font-family:var(--font);
  -webkit-appearance:none;appearance:none;
}
.fin:focus,.fse:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(197,242,53,.09);background:var(--bg2);outline:none}
.fin.err{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(255,53,88,.07)!important}
.fin::placeholder{color:var(--text3)}
.fse option{background:var(--bg2);color:var(--text)}
.fse{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235e6882' stroke-width='2.5' 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:32px}
input[type="date"]{min-height:44px}
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none}

/* ══════════════════════════════════════
   TOAST — Polished
══════════════════════════════════════ */
#toastwrap{position:fixed;bottom:calc(22px + var(--safe-bot));right:18px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(320px,calc(100vw - 34px))}
.toast{
  display:flex;align-items:flex-start;gap:10px;padding:13px 16px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:14px;
  font-size:12.5px;box-shadow:0 10px 32px rgba(0,0,0,.5);
  pointer-events:auto;animation:tSlide .3s var(--ease-spring);
  position:relative;overflow:hidden;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.toast::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:100%;background:var(--lime);animation:tBar 4s linear forwards}
.toast.tr::after{background:var(--red)}.toast.ta::after{background:var(--amber)}
@keyframes tSlide{from{opacity:0;transform:translateX(42px) scale(.92)}to{opacity:1;transform:none}}
@keyframes tBar{from{width:100%}to{width:0}}
@keyframes tOut{to{opacity:0;transform:translateX(42px) scale(.88)}}
.toast.out{animation:tOut .22s forwards}
.t-ic{font-size:15px;flex-shrink:0;margin-top:1px}
.t-ttl{font-weight:700;font-size:13px;color:var(--text);font-family:var(--font-d)}.t-sub{font-size:11px;color:var(--text2);margin-top:2px}

/* ══════════════════════════════════════
   CONFIRM DIALOG
══════════════════════════════════════ */
#conf-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);z-index:20000;align-items:center;justify-content:center;padding:16px}
#conf-ov.open{display:flex}
.conf-box{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r4);padding:30px;max-width:340px;width:100%;text-align:center;animation:mPop .24s var(--ease-spring);box-shadow:0 32px 70px rgba(0,0,0,.55)}
@keyframes mPop{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:none}}
.conf-ico{font-size:36px;margin-bottom:12px}.conf-ttl{font-size:18px;font-weight:800;margin-bottom:5px;font-family:var(--font-d)}.conf-msg{font-size:12.5px;color:var(--text2);margin-bottom:20px;line-height:1.65}

/* ══════════════════════════════════════
   NOTIFICATIONS PANEL
══════════════════════════════════════ */
.nf-ov{display:none;position:fixed;inset:0;z-index:4999;background:rgba(0,0,0,.35)}
.nf-ov.open{display:block;animation:fadeIn .18s ease}
.nf-pnl{position:fixed;top:0;right:0;bottom:0;width:min(340px,100vw);background:var(--bg1);border-left:1px solid var(--border2);z-index:5000;transform:translateX(100%);transition:transform .32s var(--ease-out);display:flex;flex-direction:column;box-shadow:-6px 0 40px rgba(0,0,0,.4);padding-bottom:var(--safe-bot)}
.nf-pnl.open{transform:none}
.nf-hd{padding:18px 18px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.nf-bd{padding:14px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nf-item{padding:11px 13px;border-radius:10px;border:1px solid var(--border);margin-bottom:7px;transition:background .14s;cursor:pointer}
.nf-item:hover{background:var(--bg3)}.nf-item.unr{border-color:rgba(197,242,53,.14);background:rgba(197,242,53,.025)}
.ndot{width:6px;height:6px;border-radius:50%;background:var(--lime);flex-shrink:0;margin-top:4px}.ndot.rd{background:var(--text3)}
.nbell{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ncnt{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg1)}
.ncnt{animation:ncntPulse 2.5s ease-in-out infinite}
@keyframes ncntPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

/* ══════════════════════════════════════
   AUTH SCREEN — Complete Redesign
══════════════════════════════════════ */
#auth-screen{
  display:none;position:fixed;inset:0;z-index:50000;
  background:var(--bg);overflow:hidden;
}
#auth-screen.show{display:flex}

.auth-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.auth-orb.a1{width:800px;height:800px;top:-280px;left:-220px;background:radial-gradient(circle,rgba(197,242,53,.05),transparent 60%);animation:orbA 22s ease-in-out infinite}
.auth-orb.a2{width:700px;height:700px;bottom:-220px;right:-180px;background:radial-gradient(circle,rgba(0,221,248,.038),transparent 60%);animation:orbA 18s ease-in-out infinite;animation-delay:-9s}

/* Two-panel layout */
.auth-inner{
  display:flex;width:100%;height:100%;position:relative;z-index:1;
}

/* Left panel — branding (desktop only) */
.auth-panel-left{
  flex:1;display:none;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:60px 48px;border-right:1px solid var(--border);
  background:linear-gradient(160deg,rgba(197,242,53,.04) 0%,transparent 60%);
  position:relative;overflow:hidden;
}
.auth-panel-left::before{
  content:'';position:absolute;bottom:0;right:0;width:1px;height:60%;
  background:linear-gradient(to bottom,transparent,rgba(197,242,53,.15),transparent);
}
.auth-brand-logo{
  width:60px;height:60px;background:var(--lime);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;color:#000;
  font-family:var(--font-d);margin-bottom:28px;
  box-shadow:0 0 40px var(--lime-glow),0 12px 28px rgba(197,242,53,.2);
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{0%,100%{box-shadow:0 0 40px var(--lime-glow),0 12px 28px rgba(197,242,53,.2)}50%{box-shadow:0 0 60px var(--lime-glow2),0 12px 36px rgba(197,242,53,.28)}}
.auth-brand-name{font-size:42px;font-weight:900;font-family:var(--font-d);letter-spacing:-1.5px;color:var(--text);line-height:1;margin-bottom:8px}
.auth-brand-tagline{font-size:15px;color:var(--text2);line-height:1.6;max-width:340px;margin-bottom:36px}
.auth-features{display:flex;flex-direction:column;gap:14px}
.auth-feat{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text2)}
.auth-feat-ico{width:36px;height:36px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.auth-feat strong{display:block;color:var(--text);font-weight:600;margin-bottom:1px;font-size:13px}

/* Right panel — form */
.auth-panel-right{
  width:100%;display:flex;align-items:center;justify-content:center;
  padding:20px 20px calc(20px + var(--safe-bot));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.auth-box{
  background:var(--bg1);border:1px solid var(--border2);border-radius:26px;
  width:100%;max-width:400px;overflow:hidden;
  box-shadow:0 48px 100px rgba(0,0,0,.6);
  animation:mPop .45s var(--ease-spring);
}
.auth-top{
  padding:32px 30px 22px;text-align:center;border-bottom:1px solid var(--border);
  background:linear-gradient(155deg,var(--bg3) 0%,var(--bg1) 100%);
}
/* Mobile logo (hidden on desktop when left panel shows) */
.auth-logo{
  width:54px;height:54px;background:var(--lime);border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:#000;margin-bottom:18px;
  box-shadow:0 0 30px var(--lime-glow),0 8px 22px rgba(197,242,53,.2);
  font-family:var(--font-d);animation:logoPulse 3s ease-in-out infinite;
}
.auth-title{font-size:24px;font-weight:900;letter-spacing:-.5px;margin-bottom:5px;font-family:var(--font-d)}
.auth-sub{font-size:12.5px;color:var(--text2);line-height:1.6}
.auth-body{padding:22px 26px 28px}
.auth-tabs{display:flex;background:var(--bg3);border-radius:10px;padding:4px;gap:3px;margin-bottom:20px}
.auth-tab{flex:1;padding:8px;border-radius:8px;text-align:center;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .18s;touch-action:manipulation}
.auth-tab.on{background:var(--bg1);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.auth-form{display:none}.auth-form.on{display:block;animation:pgIn .22s ease}
.auth-err{background:rgba(255,53,88,.08);border:1px solid rgba(255,53,88,.18);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--red);margin-bottom:14px;display:none}
.auth-err.show{display:block;animation:pgIn .2s ease}
.auth-ok{background:rgba(197,242,53,.06);border:1px solid rgba(197,242,53,.18);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--lime);margin-bottom:14px;display:none}
.auth-ok.show{display:block}
.auth-div{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--text3);font-size:11.5px}
.auth-div::before,.auth-div::after{content:'';flex:1;height:1px;background:var(--border)}
.mb12{margin-bottom:12px}.mb10{margin-bottom:10px}.mb14{margin-bottom:14px}.mb18{margin-bottom:18px}

/* ══════════════════════════════════════
   DB CONFIG
══════════════════════════════════════ */
#db-cfg{display:none;position:fixed;inset:0;z-index:49999;background:rgba(0,0,0,.92);backdrop-filter:blur(16px);align-items:center;justify-content:center;padding:16px}
#db-cfg.show{display:flex}
.db-box{background:var(--bg1);border:1px solid var(--border2);border-radius:24px;padding:30px;max-width:520px;width:100%;animation:mPop .28s var(--ease-spring);max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.db-box::-webkit-scrollbar{width:3px}.db-box::-webkit-scrollbar-thumb{background:var(--bg4)}
.db-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(197,242,53,.08);border:1px solid rgba(197,242,53,.2);border-radius:99px;padding:4px 13px;font-size:11.5px;color:var(--lime);font-weight:700;margin-bottom:18px}
.db-ttl{font-size:20px;font-weight:900;margin-bottom:5px;letter-spacing:-.4px;font-family:var(--font-d)}
.db-sub{font-size:12.5px;color:var(--text2);margin-bottom:20px;line-height:1.65}
.db-section-lbl{font-size:11px;font-weight:800;color:var(--lime);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.db-step{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;padding:11px;background:var(--bg3);border-radius:10px;font-size:12.5px;color:var(--text2);line-height:1.65;border:1px solid var(--border);transition:border-color .15s}
.db-step:hover{border-color:var(--border2)}
.db-step.sm{font-size:12px}
.db-n{width:22px;height:22px;background:var(--lime);border-radius:50%;color:#000;font-weight:800;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.db-n.cyan{background:var(--cyan)}
.db-alt{margin-top:16px;padding:16px;background:rgba(0,221,248,.04);border:1px solid rgba(0,221,248,.13);border-radius:14px}
.db-alt-t{font-size:12.5px;font-weight:700;color:var(--cyan);margin-bottom:8px}
.db-alt-sub{font-size:11.5px;color:var(--text2);margin-bottom:12px;line-height:1.65}
.btn-pb{background:rgba(0,221,248,.1);color:var(--cyan);border:1px solid rgba(0,221,248,.22);width:100%;justify-content:center;display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .16s}
.btn-pb:hover{background:rgba(0,221,248,.18);transform:translateY(-1px)}

/* ══════════════════════════════════════
   ONBOARD WIZARD
══════════════════════════════════════ */
#ob-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.97);backdrop-filter:blur(18px);z-index:30000;align-items:center;justify-content:center;padding:16px}
#ob-ov.show{display:flex}
.wz{background:var(--bg1);border:1px solid var(--border2);border-radius:24px;max-width:440px;width:100%;overflow:hidden;animation:mPop .4s var(--ease-spring);box-shadow:0 40px 80px rgba(0,0,0,.6)}
.wz-top{background:linear-gradient(145deg,var(--bg3),var(--bg1));padding:30px 30px 20px;text-align:center;border-bottom:1px solid var(--border)}
.wz-em{font-size:44px;display:block;margin-bottom:12px;animation:emojiFloat 2.5s ease-in-out infinite}
@keyframes emojiFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(4deg)}}
.wz-dots{display:flex;gap:5px;justify-content:center;margin-bottom:16px}
.wz-dot{height:3px;border-radius:99px;background:var(--bg4);transition:all .3s var(--ease-out)}
.wz-dot.on{background:var(--lime);width:34px}.wz-dot.dn{background:rgba(197,242,53,.3);width:20px}.wz-dot.nd{width:20px}
.wz-ttl{font-size:22px;font-weight:900;margin-bottom:5px;letter-spacing:-.5px;font-family:var(--font-d)}.wz-sub{font-size:12.5px;color:var(--text2);line-height:1.55}
.wz-bd{padding:22px 26px}.wz-ft{padding:14px 26px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}

/* ══════════════════════════════════════
   PWA BANNER — Enhanced
══════════════════════════════════════ */
.pwa-b{
  position:fixed;bottom:calc(16px + var(--safe-bot));left:50%;
  transform:translateX(-50%) translateY(130px);
  background:var(--bg2);border:1px solid var(--border2);border-radius:16px;
  padding:14px 18px;z-index:8000;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  max-width:min(380px,calc(100% - 32px));width:100%;
  transition:transform .46s var(--ease-spring),opacity .32s;opacity:0;
}
.pwa-b.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ══════════════════════════════════════
   FAB — Premium floating action
══════════════════════════════════════ */
.fab{
  position:fixed;bottom:calc(22px + var(--safe-bot));right:20px;z-index:3000;
  width:56px;height:56px;border-radius:18px;
  background:var(--lime);cursor:pointer;display:none;
  align-items:center;justify-content:center;
  font-size:26px;font-weight:900;color:#000;
  box-shadow:0 8px 28px var(--lime-glow2),0 2px 10px rgba(0,0,0,.25);
  transition:transform .24s var(--ease-spring),box-shadow .24s,border-radius .24s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.fab:hover{box-shadow:0 14px 40px var(--lime-glow2);transform:translateY(-2px) scale(1.04)}
.fab:active{transform:scale(.88)}
.fab.open{transform:rotate(45deg);border-radius:50%}
.fab.open:active{transform:rotate(45deg) scale(.88)}
.fab-menu{
  position:fixed;bottom:calc(92px + var(--safe-bot));right:16px;z-index:3001;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;pointer-events:none;
  transform:translateY(12px) scale(.94);
  transition:all .26s var(--ease-spring);transform-origin:bottom right;
}
.fab-menu.open{opacity:1;pointer-events:auto;transform:none}
.fab-opt{
  display:flex;align-items:center;gap:9px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:13px;
  padding:11px 16px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:all .16s;white-space:nowrap;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.fab-opt:active{transform:scale(.95)}
.fab-opt:hover{background:var(--bg3);border-color:var(--lime);color:var(--lime)}
.fab-opt:nth-child(1){animation-delay:.04s}
.fab-opt:nth-child(2){animation-delay:.09s}

/* ══════════════════════════════════════
   HAMBURGER
══════════════════════════════════════ */
.hbg{
  display:none;position:fixed;top:calc(10px + var(--safe-top));left:14px;
  z-index:6000;width:40px;height:40px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:12px;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4.5px;
  transition:border-color .16s,box-shadow .16s;box-shadow:0 2px 12px rgba(0,0,0,.2);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
}
.hbg:hover{border-color:var(--lime);box-shadow:0 2px 16px var(--lime-glow3)}
.hbg span{width:16px;height:1.5px;background:var(--text);border-radius:99px;transition:all .28s var(--ease-spring);display:block;pointer-events:none}
.hbg.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hbg.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hbg.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mob-ov{display:none;position:fixed;inset:0;z-index:4500;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mob-ov.open{display:block;animation:fadeIn .22s ease}

/* ══════════════════════════════════════
   MOBILE BOTTOM NAV — New Component
══════════════════════════════════════ */
.bot-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--bot-nav-h) + var(--safe-bot));
  padding-bottom:var(--safe-bot);
  background:var(--topbar-bg);
  backdrop-filter:blur(32px) saturate(1.5);
  -webkit-backdrop-filter:blur(32px) saturate(1.5);
  border-top:1px solid var(--border);
  z-index:9000;
  flex-direction:row;align-items:stretch;
  box-shadow:0 -4px 30px rgba(0,0,0,.3);
}
.bot-nav::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(197,242,53,.18),transparent);
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:pointer;padding:8px 4px;position:relative;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:opacity .14s;
  user-select:none;
  /* Ensure full tap area */
  min-height:44px;
}
.bn-item:active{opacity:.7}
.bn-ico{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  transition:transform .22s var(--ease-spring),filter .2s;
  position:relative;
}
.bn-ico svg{width:20px;height:20px;stroke:var(--text2);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}
.bn-lbl{font-size:9.5px;font-weight:600;color:var(--text2);transition:color .18s;letter-spacing:.1px;white-space:nowrap}
.bn-item.on .bn-ico svg{stroke:var(--lime);filter:drop-shadow(0 0 4px rgba(197,242,53,.5))}
.bn-item.on .bn-lbl{color:var(--lime)}
.bn-item.on .bn-ico{transform:translateY(-2px)}
.bn-dot{position:absolute;top:-2px;right:-4px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid var(--bg1);display:none}
.bn-dot.show{display:block}
/* Active indicator bar */
.bn-item.on::after{
  content:'';position:absolute;top:0;left:20%;right:20%;height:2px;
  background:var(--lime);border-radius:0 0 4px 4px;
  box-shadow:0 0 8px rgba(197,242,53,.4);
}

/* ══════════════════════════════════════
   OCR
══════════════════════════════════════ */
.ocr-zone{border:2px dashed var(--border2);border-radius:14px;padding:26px;text-align:center;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg3)}
.ocr-zone:hover,.ocr-zone.drag{border-color:var(--lime);background:rgba(197,242,53,.03);box-shadow:0 0 0 4px var(--lime-glow3)}
.ocr-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ocr-pb{height:4px;background:var(--bg3);border-radius:99px;overflow:hidden;margin-top:9px}
.ocr-pf{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lime),var(--cyan));transition:width .35s}

/* ══════════════════════════════════════
   SETTINGS
══════════════════════════════════════ */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);transition:background .15s,padding .15s}
.set-row:last-child{border:none}
.set-row:hover{background:var(--glass2);border-radius:var(--r);padding-inline:10px;margin-inline:-10px}
.set-lbl{font-size:13.5px;font-weight:600}.set-hint{font-size:11px;color:var(--text2);margin-top:2px}

/* ══════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════ */
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chart-desc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ══════════════════════════════════════
   MISC HELPERS
══════════════════════════════════════ */
.flex{display:flex}.ic{align-items:center}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:99px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(197,242,53,.2);border-top-color:var(--lime);border-radius:50%;animation:spinAnim .65s linear infinite}
@keyframes spinAnim{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════
   CHART CONTAINERS
══════════════════════════════════════ */
[id$="-c"]{display:block}
.chart-wrap{position:relative;overflow:hidden;border-radius:var(--r2)}
#page-relatorios .card .g2>div{min-width:0}

/* ══════════════════════════════════════
   RESPONSIVE — Mobile-First
══════════════════════════════════════ */

/* ≤1280px */
@media(max-width:1280px){
  .sg{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .g3{grid-template-columns:1fr}
}

/* ≤960px — Mobile mode */
@media(max-width:960px){
  :root{--sb-w:0px;--tb-h:54px}

  .sidebar{
    position:fixed!important;left:0;top:0;bottom:0;
    width:var(--sb-exp)!important;
    transform:translateX(-110%)!important;
    transition:transform .32s var(--ease-out)!important;
    z-index:5000!important;height:100%!important;
  }
  .sidebar.mob-o{
    transform:translateX(0)!important;
    box-shadow:8px 0 60px rgba(0,0,0,.7)!important;
  }
  .sidebar .nvt,.sidebar .nvl,.sidebar .logo-w,
  .sidebar .unm,.sidebar .nbdg,.sidebar .sync-lbl{
    opacity:1!important;transform:none!important;
    pointer-events:auto!important;visibility:visible!important;
  }
  .sidebar .logo-ico{display:none!important}
  .sidebar .logo-w{position:relative!important;left:0!important;opacity:1!important;transform:none!important;visibility:visible!important}
  .sidebar .sb-tip{display:none!important}
  .sb-arrow{display:none!important}

  /* No hamburger on mobile — bottom nav handles navigation */
  .hbg{display:none!important}
  .sidebar{display:none!important}
  .mob-ov{display:none!important}
  .topbar{padding:0 12px!important}
  .content{padding:12px 14px calc(16px + var(--bot-nav-h) + var(--safe-bot))!important;}

  .g2,.g3{grid-template-columns:1fr}
  .fab{display:flex!important}
  .tb-right .srch{display:none}
  .tb-right .btn.bg{display:none}
  .tb-right .tt{display:none}

  /* Bottom nav visible on mobile */
  .bot-nav{display:flex!important}

  /* Adjust toast above FAB */
  #toastwrap{bottom:calc(var(--bot-nav-h) + 16px + var(--safe-bot));right:14px}

  /* FAB above bottom nav */
  .fab{bottom:calc(var(--bot-nav-h) + 14px + var(--safe-bot))!important}
  .fab-menu{bottom:calc(var(--bot-nav-h) + 80px + var(--safe-bot))!important}

  /* Modals */
  .ov{align-items:flex-end;padding:0}
  .modal{border-radius:var(--r4) var(--r4) 0 0;max-width:100%;max-height:95vh}

  /* Auth */
  .auth-panel-left{display:none!important}
  .auth-panel-right{padding:20px 16px calc(20px + var(--safe-bot))}
}

/* ≤640px */
@media(max-width:640px){
  .sg{grid-template-columns:1fr 1fr}
  .pg-title{font-size:18px}
  .sc-val{font-size:20px}
  .mnav-lbl{min-width:90px;font-size:11px}
  .fg{grid-template-columns:1fr}
  .ff{grid-column:auto}
  [style*="height:150px"],[style*="height:185px"],[style*="height:195px"]{height:140px!important}
}

/* ≤420px */
@media(max-width:420px){
  :root{--tb-h:50px}
  .sg{grid-template-columns:1fr 1fr;gap:9px}
  .sc{padding:14px 15px}
  .sc-val{font-size:19px;letter-spacing:-.5px}
  .sc-lbl{font-size:8.5px;margin-bottom:5px}
  .pg-title{font-size:16px}
  .card{padding:14px 15px}
  .topbar{padding:0 10px!important}
  .content{padding:10px 12px calc(12px + var(--bot-nav-h) + var(--safe-bot))!important;}
  .auth-box{border-radius:20px}
  .auth-top{padding:26px 22px 20px}
  .auth-body{padding:20px 22px 24px}
  #toastwrap{right:10px;max-width:calc(100vw - 20px)}
  .nf-pnl{width:100%}
  .mbd{padding:15px 18px}
  .mhd{padding:11px 18px}
  .mft{padding:10px 18px 14px}
  .fab{width:52px;height:52px;font-size:24px;right:16px}
}

/* Desktop: auth has left panel, modal centered */
@media(min-width:961px){
  .auth-panel-left{display:flex!important}
  .auth-panel-right{flex:0 0 440px;padding:28px}
  .auth-box{max-width:none}
  .ov{align-items:center;padding:16px}
  .modal{border-radius:var(--r4);max-width:530px;animation:mPop .26s var(--ease-spring)}
  .modal::before{display:none}
  #toastwrap{bottom:calc(24px + var(--safe-bot))}
}

/* Better hover on touch */
@media(hover:none){
  .card:hover{border-color:var(--border);box-shadow:var(--card-s);transform:none}
  .sc:hover{border-color:var(--border);transform:none;box-shadow:var(--card-s)}
  .goal-card:hover{border-color:var(--border);transform:none}
  .cc:hover{transform:none;box-shadow:0 8px 32px rgba(0,0,0,.3)}
  .bl:hover{transform:none}
  .btn-pb:hover{transform:none}
}

/* Print */
@media print{
  #print-hdr{display:block!important}
  .sg{grid-template-columns:repeat(4,1fr)!important}
  .g2{grid-template-columns:1fr 1fr!important}
  .card{break-inside:avoid}
  .page.on{display:block!important;animation:none}
  .content{overflow:visible!important;max-height:none!important}
  .sidebar,.hbg,.btn,#toastwrap,.nf-pnl,.pwa-b,.fab,.fab-menu,#conf-ov,.orb,.bot-nav{display:none!important}
  body{background:#fff;color:#000}
}

/* ══════════════════════════════════════
   ENHANCED MICRO-INTERACTIONS
══════════════════════════════════════ */
/* Notification badge pulse */
.ncnt-pulse{animation:ncntPulse 2.5s ease-in-out infinite}

/* Stat card on reveal */
.sg .sc:hover .sc-glow-bg{opacity:.17}

/* Progress bar shimmer */
.goal-bf{transition:width 1.4s cubic-bezier(.22,1,.36,1)}

/* Loading states */
body.offline-shifted .topbar{margin-top:30px}

/* Touch targets WCAG */
.ab{min-width:32px;min-height:32px}
.bico{min-width:38px;min-height:38px}
.pgn-btn{min-width:38px;min-height:38px}
.mnav-btn{min-height:38px}
.nvi{min-height:44px}
.bn-item{min-height:44px}

/* ═══════════════════════════════════════
   VAULT V8 FIX — Missing Utility Classes
   ═══════════════════════════════════════ */

/* Typography utilities */
.bold{font-weight:700}
.small{font-size:11.5px}
.muted{color:var(--text2)}
.muted.small{font-size:11px;color:var(--text3)}

/* Chip / Badge */
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;line-height:1.6;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.chl{background:rgba(197,242,53,.13);color:#c5f235}
.chr{background:rgba(255,53,88,.13);color:#ff5572}
.chg{background:rgba(34,197,94,.13);color:#22c55e}
.chc{background:rgba(139,92,246,.13);color:#a78bfa}
.cha{background:rgba(255,181,32,.13);color:#ffb520}

/* Progress bars */
.pw{margin-bottom:9px}
.pi{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.pl{font-size:12px;color:var(--text);font-weight:500}
.pv{font-size:12px;font-weight:700}
.pt{height:5px;background:var(--bg3);border-radius:99px;overflow:hidden}
.pf{height:100%;border-radius:99px;transition:width 1s cubic-bezier(.22,1,.36,1)}

/* Report / Summary rows */
.sr{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.sr:last-child{border-bottom:none}
.sk{font-size:12.5px;color:var(--text2)}
.sk.bold{color:var(--text);font-weight:700}
.sv{font-size:13px;font-weight:700;font-family:var(--font-m)}
.divl{height:1px;background:var(--border);margin:6px 0}

/* Credit card shine effects */
.cc-shine{position:absolute;top:-60%;left:-30%;width:60%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.055) 50%,transparent 60%);pointer-events:none;transform:skewX(-12deg)}
.cc-shine2{position:absolute;top:-60%;right:-30%;width:40%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%);pointer-events:none;transform:skewX(-12deg)}

/* OCR zone enhancements */
.ocr-zone{position:relative;border:2px dashed var(--border);border-radius:14px;padding:28px 20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.ocr-zone:hover,.ocr-zone.drag{border-color:var(--lime);background:rgba(197,242,53,.04)}

/* Table utility — tr = text-right */
.tr{text-align:right}

/* ═══════════════════════════════════════
   VAULT V9 — MISSING UTILITY CLASSES
   Complete fix for all undefined classes
   ═══════════════════════════════════════ */

/* Layout helpers */
.g6{gap:6px}
.jb{justify-content:space-between}
.w100{width:100%}

/* Empty state subclasses */
.em-i{font-size:36px;display:block;margin-bottom:8px;opacity:.7}
.em-t{font-size:14px;font-weight:700;font-family:var(--font-d);color:var(--text)}
.em-s{font-size:12px;color:var(--text2);line-height:1.65;max-width:260px;margin:4px auto 0}

/* Pagination buttons wrapper */
.pgn-btns{display:flex;gap:4px;align-items:center}

/* Credit card type gradients */
.cc.to{background:linear-gradient(135deg,#1a2744,#0f1c3a)}
.cc.tp{background:linear-gradient(135deg,#1a3830,#0f2820)}
.cc.tc{background:linear-gradient(135deg,#2e1a44,#200f3a)}
.cc.ts{background:linear-gradient(135deg,#2a2010,#1c1508)}

/* Ensure flex display on card with flex class */
.card.flex{display:flex}

/* Skel animation */
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{
  background:linear-gradient(90deg,var(--skel-from) 25%,var(--skel-to) 50%,var(--skel-from) 75%);
  background-size:200% 100%;
  animation:skelShimmer 1.4s ease-in-out infinite;
  border-radius:6px;color:transparent!important;pointer-events:none;user-select:none;
}
.skel *{opacity:0}

/* Fix g3 card flex alignment */
#page-dashboard .g3>.card.flex{flex-direction:column;align-items:center;justify-content:center}

/* Mobile topbar adjustments — ensure hamburger doesn't overlap */
@media(max-width:960px){
  .topbar{padding:0 12px 0 62px!important}
}
@media(max-width:420px){
  .topbar{padding:0 10px 0 58px!important}
}

/* Fix content padding on mobile with bottom nav */
@media(max-width:960px){
  .content{padding:16px 16px calc(76px + var(--bot-nav-h) + var(--safe-bot))!important}
}

/* Ensure sc-val color variants work standalone */
.sc-val.cl{color:var(--lime)}
.sc-val.cr{color:var(--red)}
.sc-val.cc{color:var(--cyan)}
.sc-val.ca{color:var(--amber)}

/* Fix: .btn as label element */
label.btn{display:inline-flex;cursor:pointer}

/* Pagination info */
.pgn-info{font-size:11px;color:var(--text2);white-space:nowrap}

/* Fix fab text/icon when open */
.fab.open{font-size:20px}

/* Ensure empty state inside td renders properly */
td .empty{padding:28px 14px;min-height:120px}
td .empty .em-i{font-size:28px}

/* cc type: ensure background override works */
.cc.to,.cc.tp,.cc.tc,.cc.ts{
  border:1px solid rgba(255,255,255,.09);
}

/* Reduce animation for users who prefer reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}




/* ════════════════════════════════════════════════════════════
   VAULT — DEFINITIVE LAYOUT & RESPONSIVE
   Single source of truth. Replaces all previous patches.
   ════════════════════════════════════════════════════════════ */

/* ── UTILITY ── */
.sc-val.cl{color:var(--lime)}
.sc-val.cr{color:var(--red)}
.sc-val.cc{color:var(--cyan)}
.sc-val.ca{color:var(--amber)}
label.btn{display:inline-flex;cursor:pointer}
.pgn-info{font-size:11px;color:var(--text2);white-space:nowrap}
td .empty{padding:28px 14px;min-height:120px}
td .empty .em-i{font-size:28px}
.cc.to,.cc.tp,.cc.tc,.cc.ts{border:1px solid rgba(255,255,255,.09)}
.page.on:not(.animated){animation:none}
#page-dashboard .g3>.card.flex{flex-direction:column;align-items:center;justify-content:center}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── APP SHELL — position:fixed fills exact viewport on all browsers/iOS ── */
html,body{height:100%;margin:0;padding:0;overflow:hidden}
.app{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  display:flex;
  flex-direction:row;
  overflow:hidden;
  z-index:1;
}

/* ── SIDEBAR ── */
.sidebar{flex-shrink:0;height:100%;overflow:hidden;display:flex;flex-direction:column;}

/* ── MAIN COLUMN ── */
.main{
  flex:1 1 0;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ── TOPBAR — never scrolls ── */
.topbar{flex-shrink:0}

/* ── PAGES ── */
.page{display:none;flex:1 1 0;flex-direction:column;min-height:0;overflow:hidden}
.page.on{display:flex}

/* ── CONTENT — the ONE scroll container ── */
.content{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:20px 22px 40px;
}

/* ── MAIS MENU (mobile popup) ── */
.mais-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:16px 8px;border-radius:14px;cursor:pointer;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);font-size:12px;font-weight:600;
  transition:all .14s;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;width:100%;
}
.mais-btn:active{background:var(--bg4);transform:scale(.96)}
.mais-btn svg{width:22px;height:22px;stroke:var(--text2)}

/* ── AUTH SCREEN ── */
#auth-screen{
  display:none;position:fixed;inset:0;z-index:50000;
  background:var(--bg);
}
#auth-screen.show{display:block}
.auth-scroll{
  height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px max(24px,env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.auth-card{
  width:100%;max-width:400px;
  background:var(--bg1);border:1px solid var(--border2);border-radius:24px;
  padding:32px 28px;box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.auth-head{text-align:center;margin-bottom:28px}
.auth-logo-box{
  width:56px;height:56px;background:var(--lime);border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;color:#000;margin-bottom:16px;
  box-shadow:0 0 32px rgba(197,242,53,.3);
}
.auth-h1{font-size:28px;font-weight:900;color:var(--text);margin:0 0 6px;letter-spacing:-.5px}
.auth-p{font-size:13px;color:var(--text2);margin:0;line-height:1.5}
.auth-info-box{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(197,242,53,.06);border:1px solid rgba(197,242,53,.15);
  border-radius:12px;padding:14px;margin-bottom:16px;font-size:13px;
}
.auth-info-box span{font-size:20px;flex-shrink:0}
.auth-info-box strong{display:block;color:var(--text);margin-bottom:3px;font-size:13px}
.auth-info-box p{margin:0;color:var(--text2);font-size:12px}
.auth-btn-primary{
  display:block;width:100%;padding:14px;background:var(--lime);color:#000;
  border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;
  margin-bottom:10px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:opacity .15s,transform .15s;
}
.auth-btn-primary:active{opacity:.85;transform:scale(.98)}
.auth-btn-primary:disabled{opacity:.6;cursor:not-allowed}
.auth-btn-secondary{
  display:block;width:100%;padding:13px;background:var(--bg3);color:var(--text);
  border:1px solid var(--border2);border-radius:12px;font-size:14px;font-weight:600;
  cursor:pointer;margin-bottom:8px;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.auth-btn-secondary:active{background:var(--bg4)}
.auth-hint{font-size:11.5px;color:var(--text3);margin:6px 0 0;line-height:1.55}
.auth-tabs{display:flex;background:var(--bg3);border-radius:10px;padding:4px;gap:4px;margin-bottom:20px}
.auth-tab{flex:1;padding:9px;border-radius:8px;border:none;background:none;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .16s;touch-action:manipulation}
.auth-tab.on{background:var(--bg1);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.auth-form{display:none}
.auth-form.on{display:block}
.auth-err{background:rgba(255,53,88,.08);border:1px solid rgba(255,53,88,.2);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:14px;display:none;line-height:1.45}
.auth-err.show{display:block}
.auth-ok{background:rgba(197,242,53,.07);border:1px solid rgba(197,242,53,.2);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--lime);margin-bottom:14px;display:none}
.auth-ok.show{display:block}
.auth-divider{text-align:center;color:var(--text3);font-size:12px;margin:16px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border)}
.auth-divider::before{left:0}
.auth-divider::after{right:0}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── DESKTOP ≥769px: sidebar + main, no bottom nav ── */
@media(min-width:769px){
  .bot-nav{display:none!important}
  #mais-menu,#mais-ov{display:none!important}
  .hbg{display:none!important}
  .mob-ov{display:none!important}
  .topbar{padding:0 22px!important;height:60px!important}
  .content{padding:20px 22px 40px!important}
}

/* ── MOBILE ≤768px: no sidebar, bottom nav only ── */
@media(max-width:768px){
  .sidebar{display:none!important}
  .hbg{display:none!important}
  .mob-ov{display:none!important}
  .sb-arrow{display:none!important}

  .bot-nav{display:flex!important}

  .topbar{padding:0 12px!important;height:52px!important}
  .pg-title{font-size:18px!important}

  /* Content: pad bottom for bottom nav */
  .content{
    padding:12px 14px calc(var(--bot-nav-h,64px) + 16px + env(safe-area-inset-bottom,0px)) 14px!important;
  }

  /* 1-col layouts */
  .g2,.g3{grid-template-columns:1fr!important}
  .sg{grid-template-columns:1fr 1fr!important}

  /* FAB above bottom nav */
  .fab{
    display:flex!important;
    bottom:calc(var(--bot-nav-h,64px) + 12px + env(safe-area-inset-bottom,0px))!important;
    right:16px!important;
  }
  .fab-menu{
    bottom:calc(var(--bot-nav-h,64px) + 76px + env(safe-area-inset-bottom,0px))!important;
    right:16px!important;
  }

  /* Toast above bottom nav */
  #toastwrap{
    bottom:calc(var(--bot-nav-h,64px) + 12px + env(safe-area-inset-bottom,0px))!important;
    right:12px!important;max-width:calc(100vw - 24px)!important;
  }

  /* Modals as bottom sheet */
  .ov{align-items:flex-end!important;padding:0!important}
  .modal{
    border-radius:20px 20px 0 0!important;
    max-width:100%!important;
    max-height:93vh!important;
    padding-bottom:env(safe-area-inset-bottom,0)!important;
  }

  /* Auth - no left panel */
  .auth-panel-left{display:none!important}

  /* Hide desktop-only topbar elements */
  .tb-right .srch,.tb-right .btn.bg,.tb-right .tt{display:none!important}

  /* Auth card on very small screens */
  .auth-card{padding:24px 18px;border-radius:20px}
  .auth-scroll{align-items:flex-start;padding:16px 12px max(16px,env(safe-area-inset-bottom))}
  .auth-h1{font-size:24px}
}

/* ── VERY SMALL ≤380px ── */
@media(max-width:380px){
  .sg{grid-template-columns:1fr 1fr!important;gap:8px}
  .sc{padding:12px 13px}
  .sc-val{font-size:17px!important}
  .card{padding:12px 13px}
  .bn-lbl{font-size:9px}
  .topbar{padding:0 10px!important}
}

/* ── TABLET 769-1024px ── */
@media(min-width:769px)and(max-width:1024px){
  .content{padding:16px 18px 40px!important}
  .g3{grid-template-columns:1fr 1fr!important}
}

/* ════════════════════════════════════════════════════════════
   VAULT — PREMIUM ANIMATION SYSTEM
   Stagger · 3D Tilt · Pill Nav · Page Transitions · Glow
   ════════════════════════════════════════════════════════════ */

/* ── PAGE TRANSITIONS ── */
@keyframes pageIn {
  from { opacity:0; transform:translateY(18px) scale(.99); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
@keyframes pageOut {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(-12px); }
}
.page.on {
  animation: pageIn .38s cubic-bezier(.22,1,.36,1) both;
}
.page.page-leaving {
  animation: pageOut .22s cubic-bezier(.4,0,1,1) both;
  pointer-events: none;
}

/* ── STAGGER CHILDREN ── */
/* Cards, stat cards, table rows, list items all stagger in */
@keyframes staggerIn {
  from { opacity:0; transform:translateY(22px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
@keyframes staggerLeft {
  from { opacity:0; transform:translateX(-18px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes staggerRight {
  from { opacity:0; transform:translateX(18px); }
  to   { opacity:1; transform:translateX(0); }
}

.stagger > * {
  animation: staggerIn .44s cubic-bezier(.22,1,.36,1) both;
}
.stagger > *:nth-child(1)  { animation-delay: .03s }
.stagger > *:nth-child(2)  { animation-delay: .08s }
.stagger > *:nth-child(3)  { animation-delay: .13s }
.stagger > *:nth-child(4)  { animation-delay: .18s }
.stagger > *:nth-child(5)  { animation-delay: .23s }
.stagger > *:nth-child(6)  { animation-delay: .28s }
.stagger > *:nth-child(7)  { animation-delay: .33s }
.stagger > *:nth-child(8)  { animation-delay: .38s }

/* Stat card grid stagger */
.sg .sc {
  animation: staggerIn .48s cubic-bezier(.22,1,.36,1) both;
}
.sg .sc:nth-child(1) { animation-delay: .04s }
.sg .sc:nth-child(2) { animation-delay: .10s }
.sg .sc:nth-child(3) { animation-delay: .16s }
.sg .sc:nth-child(4) { animation-delay: .22s }

/* Cards stagger in .g2 and .g3 */
.g2 > .card, .g3 > .card {
  animation: staggerIn .46s cubic-bezier(.22,1,.36,1) both;
}
.g2 > .card:nth-child(1), .g3 > .card:nth-child(1) { animation-delay: .08s }
.g2 > .card:nth-child(2), .g3 > .card:nth-child(2) { animation-delay: .16s }
.g3 > .card:nth-child(3) { animation-delay: .24s }

/* ── 3D TILT CARDS ── */
.card-3d {
  transform-style: preserve-3d;
  transition: transform .06s linear, box-shadow .3s;
  will-change: transform;
}
.card-3d:hover {
  box-shadow: 0 32px 64px rgba(0,0,0,.4), 0 0 0 1px var(--border2);
}

/* ── STAT CARD GLOW NUMBERS ── */
.sc-val.cl { color:var(--lime); text-shadow: 0 0 28px var(--lime-glow2) }
.sc-val.cr { color:var(--red);  text-shadow: 0 0 28px var(--red-glow)   }
.sc-val.cc { color:var(--cyan); text-shadow: 0 0 28px var(--cyan-glow)  }
.sc-val.ca { color:var(--amber);text-shadow: 0 0 28px var(--amber-glow) }

/* Glow pulse on value change */
@keyframes glowPulse {
  0%   { filter: brightness(1) }
  40%  { filter: brightness(1.5) drop-shadow(0 0 12px currentColor) }
  100% { filter: brightness(1) }
}
.sc-val.flash { animation: glowPulse .6s ease-out; }

/* ── BOTTOM NAV — Animated pill ── */
.bot-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bot-nav-h) + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border-top: 1px solid var(--border2);
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 9000;
  display: none; /* shown in mobile breakpoint */
  overflow: hidden;
}
/* The animated pill indicator */
.bot-nav::before {
  content: '';
  position: absolute;
  top: 6px;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime-glow2);
  transition: left .35s cubic-bezier(.34,1.56,.64,1), width .35s cubic-bezier(.34,1.56,.64,1);
  /* JS sets --pill-left and --pill-w via CSS variables */
  left: var(--pill-left, 0px);
  width: var(--pill-w, 20%);
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 6px 4px 8px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .18s;
  user-select: none;
  min-height: 44px;
  border: none;
  background: none;
  color: var(--text2);
}
.bn-item.on {
  color: var(--lime);
}
.bn-item:active {
  transform: scale(.88);
}
.bn-ico {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.bn-item.on .bn-ico {
  transform: translateY(-2px) scale(1.12);
}
.bn-ico svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s;
}
.bn-item.on .bn-ico svg {
  filter: drop-shadow(0 0 6px var(--lime-glow2));
}
.bn-lbl {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  transition: opacity .2s, transform .2s;
  letter-spacing: .2px;
}
.bn-item:not(.on) .bn-lbl {
  opacity: .55;
}
.bn-dot {
  position: absolute;
  top: -2px; right: -3px;
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  display: none;
}
.bn-dot.show { display: block; animation: dotPop .3s var(--ease-spring) both }
@keyframes dotPop { from{transform:scale(0)} to{transform:scale(1)} }

/* ── MAIS POPUP — Premium ── */
#mais-menu {
  display: none;
  position: fixed;
  bottom: calc(var(--bot-nav-h) + 10px + env(safe-area-inset-bottom, 0px));
  left: 10px; right: 10px;
  z-index: 8999;
  background: var(--glass);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  border: 1px solid var(--border2);
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 -8px 48px rgba(0,0,0,.35);
  transform-origin: bottom center;
}
#mais-menu.open {
  display: block;
  animation: maisIn .32s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes maisIn {
  from { opacity:0; transform:scale(.9) translateY(20px) }
  to   { opacity:1; transform:scale(1)  translateY(0)    }
}

/* ── CARD HOVER GLOW ── */
.card {
  transition: box-shadow .28s var(--ease-out), transform .28s var(--ease-out);
}
.card:hover {
  box-shadow: var(--card-s), 0 0 0 1px var(--border2), 0 24px 48px rgba(0,0,0,.18);
  transform: translateY(-2px);
}

/* ── CARD ENTRANCE ── */
@keyframes cardReveal {
  from { opacity:0; transform:translateY(24px) scale(.98) }
  to   { opacity:1; transform:none }
}

/* ── FLOAT ANIMATION for featured cards ── */
@keyframes float {
  0%,100% { transform:translateY(0) }
  50%      { transform:translateY(-6px) }
}

/* ── SIDEBAR NAV HOVER ── */
.nvi {
  position: relative;
  overflow: hidden;
}
.nvi::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lime-glow3);
  opacity: 0;
  transition: opacity .2s;
}
.nvi:hover::after { opacity: 1; }
.nvi.on::after { opacity: 0; }

/* ── TOAST ANIMATIONS ── */
@keyframes toastIn {
  from { opacity:0; transform:translateX(120%) scale(.9) }
  to   { opacity:1; transform:translateX(0) scale(1) }
}
@keyframes toastOut {
  from { opacity:1; transform:translateX(0) scale(1) }
  to   { opacity:0; transform:translateX(120%) scale(.9) }
}
.toast {
  animation: toastIn .36s cubic-bezier(.34,1.56,.64,1) both;
}
.toast.out {
  animation: toastOut .22s ease-in both;
}

/* ── MODAL ANIMATIONS ── */
.ov { transition: opacity .22s }
.modal {
  animation: modalIn .36s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modalIn {
  from { opacity:0; transform:translateY(40px) scale(.96) }
  to   { opacity:1; transform:translateY(0)    scale(1)   }
}
@media (max-width:768px) {
  .modal {
    animation: sheetIn .38s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes sheetIn {
    from { transform:translateY(100%) }
    to   { transform:translateY(0) }
  }
}

/* ── CONFIRM DIALOG ── */
.conf-box {
  animation: confIn .32s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes confIn {
  from { opacity:0; transform:scale(.85) }
  to   { opacity:1; transform:scale(1) }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── PULSE DOT ── */
@keyframes pulseDot {
  0%,100% { transform:scale(1); opacity:1 }
  50%      { transform:scale(1.5); opacity:.5 }
}
.pulse-dot {
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--lime);
  animation:pulseDot 1.8s ease-in-out infinite;
}

/* ── CHART ENTRANCE ── */
@keyframes chartGrow {
  from { transform:scaleY(0); transform-origin:bottom }
  to   { transform:scaleY(1); transform-origin:bottom }
}

/* ── NUMBER SHINE ── */
@keyframes numShine {
  0%   { background-position: -200% center }
  100% { background-position:  200% center }
}
.sc-val {
  background-clip: text;
  -webkit-background-clip: text;
  transition: color .3s;
}

/* ── LIGHT THEME OVERRIDES ── */
[data-theme="light"] .card:hover {
  box-shadow: var(--card-s), 0 0 0 1px rgba(99,102,241,.1), 0 20px 40px rgba(99,102,241,.1);
}
[data-theme="light"] .nvi.on {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.16);
  color: var(--lime); /* remapped to indigo in light */
}
[data-theme="light"] .nvi.on .nvi-ico svg {
  filter: drop-shadow(0 0 5px rgba(99,102,241,.4));
}
[data-theme="light"] .topbar::after {
  background: linear-gradient(90deg,transparent,rgba(99,102,241,.2) 40%,transparent);
}
[data-theme="light"] .logo-ico {
  background: var(--lime);
  box-shadow: 0 0 22px rgba(99,102,241,.2), 0 4px 12px rgba(99,102,241,.2);
}
[data-theme="light"] .logo-ico:hover {
  box-shadow: 0 0 38px rgba(99,102,241,.35);
}
[data-theme="light"] .bl {
  background: var(--lime);
  color: #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,.28);
}
[data-theme="light"] .bl:hover {
  background: var(--lime2);
  box-shadow: 0 6px 24px rgba(99,102,241,.35);
}
[data-theme="light"] .sc-val.cl {
  color: var(--lime);
  text-shadow: 0 0 24px rgba(99,102,241,.18);
}
[data-theme="light"] .ftab-b.on {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.2);
  color: var(--lime);
}
[data-theme="light"] .pgn-btn.on {
  background: rgba(99,102,241,.07);
  border-color: rgba(99,102,241,.2);
  color: var(--lime);
}
[data-theme="light"] .bot-nav::before {
  background: var(--lime);
  box-shadow: 0 0 16px rgba(99,102,241,.3);
}
[data-theme="light"] .bn-item.on { color: var(--lime) }
[data-theme="light"] .bn-item.on .bn-ico svg {
  filter: drop-shadow(0 0 6px rgba(99,102,241,.35));
}
[data-theme="light"] .tt {
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.2);
}
[data-theme="light"] .tt::after {
  transform: translateX(18px);
  background: var(--lime);
}
[data-theme="dark"] .tt::after {
  transform: translateX(18px);
  background: var(--lime);
}
[data-theme="light"] .loader-logo-ico {
  background: var(--lime);
  box-shadow: 0 0 32px rgba(99,102,241,.25);
  color: #fff;
}
[data-theme="light"] .loader-bar-fill {
  background: linear-gradient(90deg, var(--lime), var(--cyan));
}
[data-theme="light"] #mais-menu {
  box-shadow: 0 -8px 48px rgba(99,102,241,.12);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   VAULT PREMIUM — Next-level visual refinements
   Typography · Cards · Micro-interactions · Polish
   ════════════════════════════════════════════════════════════ */

/* ── PREMIUM FONTS — load better display font ── */
:root {
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-d: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', monospace;
}

/* ── PREMIUM STAT CARDS ── */
.sc {
  background: linear-gradient(145deg, var(--bg2) 0%, var(--bg1) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: border-color .28s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  box-shadow: var(--card-s);
  isolation: isolate;
}
.sc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-glow, transparent), transparent);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
[data-theme="dark"] .sc:hover::before { opacity: 1; }
[data-theme="light"] .sc::before { display: none; }
.scl { --accent-glow: rgba(197,242,53,.08); }
.scr { --accent-glow: rgba(255,53,88,.07);  }
.scc { --accent-glow: rgba(0,221,248,.07);  }
.sca { --accent-glow: rgba(255,181,32,.07); }

.sc-lbl {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-family: var(--font);
}
.sc-val {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .3s;
  font-family: var(--font-d);
  margin-bottom: 4px;
}
.sc:hover .sc-val { transform: scale(1.04) translateX(2px); }

/* ── PREMIUM CARDS ── */
.card {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: var(--card-s);
  transition: border-color .28s, box-shadow .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.card-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197,242,53,.6) 30%,
    rgba(0,221,248,.4) 60%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity .35s;
}
.card:hover .card-glow { opacity: 1; }
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(197,242,53,.03), transparent);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card-ttl {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
  font-family: var(--font-d);
}

/* ── PREMIUM TOPBAR ── */
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border-bottom: 1px solid var(--border);
}
.pg-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
  font-family: var(--font-d);
}

/* ── PREMIUM SIDEBAR ── */
.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
}
[data-theme="dark"] .sidebar {
  background: rgba(3,5,9,.98);
}
.nvi {
  border-radius: 12px;
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.nvi.on {
  background: linear-gradient(135deg, rgba(197,242,53,.1), rgba(197,242,53,.04));
  border-color: rgba(197,242,53,.18);
}
.logo-ico {
  border-radius: 13px;
}

/* ── PREMIUM BUTTONS ── */
.btn {
  border-radius: 11px;
  letter-spacing: -.1px;
  font-weight: 600;
}
.bl {
  background: linear-gradient(135deg, var(--lime) 0%, var(--lime2) 100%);
  box-shadow: 0 4px 16px rgba(197,242,53,.25), 0 1px 3px rgba(0,0,0,.2);
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.bl:hover {
  box-shadow: 0 8px 28px rgba(197,242,53,.35), 0 2px 6px rgba(0,0,0,.2);
  transform: translateY(-2px);
}

/* ── PREMIUM TABLE ── */
.tbl tbody tr {
  transition: background .15s, transform .15s;
}
.tbl tbody tr:hover {
  background: var(--bg3);
}
.tbl tbody tr:hover td:first-child {
  padding-left: 16px;
}
.tbl td {
  transition: padding .15s;
}

/* ── PREMIUM MODAL ── */
.modal {
  border-radius: 28px;
  background: var(--bg1);
  border: 1px solid var(--border2);
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px var(--border);
}
.mhd {
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}
.mttl {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-d);
  letter-spacing: -.4px;
}
.mbd {
  padding: 20px 24px;
}
.mft {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.fin {
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, background .18s;
  width: 100%;
}
.fin:focus {
  border-color: var(--lime);
  background: var(--bg2);
  box-shadow: 0 0 0 4px var(--lime-glow3);
  outline: none;
}
.flb {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
  display: block;
  letter-spacing: .1px;
}

/* ── PREMIUM AUTH ── */
.auth-card {
  border-radius: 28px;
  background: var(--bg1);
  border: 1px solid var(--border2);
  padding: 36px 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,.35), 0 0 0 1px var(--border);
}
[data-theme="dark"] .auth-card {
  background: linear-gradient(145deg, var(--bg1), var(--bg));
}
.auth-logo-box {
  width: 64px; height: 64px;
  border-radius: 20px;
  font-size: 30px;
}
.auth-h1 {
  font-family: var(--font-d);
  font-size: 32px;
  letter-spacing: -.8px;
}

/* ── PREMIUM SCROLLBAR ── */
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 99px;
  transition: background .2s;
}
.content::-webkit-scrollbar-thumb:hover { background: var(--border3); }

/* ── PREMIUM BOTTOM NAV ── */
.bot-nav {
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(2);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  border-top: 1px solid var(--border2);
  box-shadow: 0 -8px 32px rgba(0,0,0,.15);
}
.bn-item {
  border-radius: 14px;
  margin: 4px 2px;
  flex: 1;
  padding: 6px 4px;
  transition: background .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bn-item.on {
  background: var(--lime-glow3);
}
.bn-item:active {
  transform: scale(.85);
}
.bn-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  font-family: var(--font);
}

/* ── PREMIUM CHIPS ── */
.chip {
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  letter-spacing: .1px;
}
.chl { background: rgba(197,242,53,.1);  color: var(--lime);  border: 1px solid rgba(197,242,53,.18); }
.chr { background: rgba(255,53,88,.09);  color: var(--red);   border: 1px solid rgba(255,53,88,.15); }
.chg { background: rgba(31,200,85,.09);  color: var(--green); border: 1px solid rgba(31,200,85,.14); }
.chc { background: rgba(139,92,246,.09); color: #a78bfa;      border: 1px solid rgba(139,92,246,.14); }
.cha { background: rgba(255,181,32,.09); color: var(--amber); border: 1px solid rgba(255,181,32,.14); }

/* ── PREMIUM ALERTS ── */
.alert {
  border-radius: 14px;
  padding: 13px 15px;
}

/* ── MAIS MENU ── */
.mais-btn {
  border-radius: 16px;
  padding: 18px 10px;
  gap: 8px;
}
.mais-btn svg { width: 24px; height: 24px; }

/* ── SYNC DOT RING ── */
.sync-dot.ok::after {
  animation: syncOkRing 2.4s ease-out infinite;
}

/* ── PROGRESS BARS ── */
.pf {
  border-radius: 99px;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.pf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmerBar 2s ease-in-out infinite;
}
@keyframes shimmerBar {
  from { background-position: 200% 0 }
  to   { background-position: -200% 0 }
}

/* ── LIGHT THEME PREMIUM ── */
[data-theme="light"] .card {
  background: #fff;
  box-shadow: 0 2px 24px rgba(99,102,241,.07), 0 0 0 1px rgba(99,102,241,.06);
}
[data-theme="light"] .sc {
  background: linear-gradient(145deg, #fff, #f8f9ff);
  box-shadow: 0 2px 20px rgba(99,102,241,.07), 0 0 0 1px rgba(99,102,241,.05);
}
[data-theme="light"] .card-glow {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.4), rgba(14,165,233,.3), transparent);
}
[data-theme="light"] .sc::before {
  background: radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-glow, transparent), transparent);
}
[data-theme="light"] .scl { --accent-glow: rgba(99,102,241,.07); }
[data-theme="light"] .bl {
  background: linear-gradient(135deg, #6366f1, #4f52d9);
  color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,.3);
}
[data-theme="light"] .bl:hover {
  box-shadow: 0 8px 28px rgba(99,102,241,.4);
}
[data-theme="light"] .modal {
  background: #fff;
  box-shadow: 0 32px 80px rgba(99,102,241,.12), 0 0 0 1px rgba(99,102,241,.08);
}
[data-theme="light"] .fin:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}
[data-theme="light"] .bot-nav {
  box-shadow: 0 -4px 24px rgba(99,102,241,.08);
}
[data-theme="light"] .auth-card {
  background: #fff;
  box-shadow: 0 24px 64px rgba(99,102,241,.1), 0 0 0 1px rgba(99,102,241,.07);
}
[data-theme="light"] .sidebar {
  background: #fafbff;
  border-right-color: rgba(99,102,241,.08);
}
[data-theme="light"] .topbar {
  background: rgba(248,249,255,.97);
  border-bottom-color: rgba(99,102,241,.08);
}

/* ── MICRO: FAB PREMIUM ── */
.fab {
  box-shadow: 0 8px 28px rgba(197,242,53,.3), 0 4px 12px rgba(0,0,0,.25) !important;
  border-radius: 18px !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s !important;
}
.fab:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 14px 40px rgba(197,242,53,.4), 0 6px 20px rgba(0,0,0,.3) !important;
}
.fab.open {
  transform: rotate(45deg) !important;
  box-shadow: 0 8px 28px rgba(197,242,53,.25) !important;
}

/* ── TOAST PREMIUM ── */
.toast {
  border-radius: 16px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 1px var(--border2) !important;
}

/* ── NOTIFICATION PANEL ── */
.nf-pnl {
  border-radius: 24px 0 0 24px;
}

/* ── GAUGE ARC GLOW ── */
#gauge-arc {
  filter: drop-shadow(0 0 8px rgba(197,242,53,.5));
}

/* ── GOAL CARDS PREMIUM ── */
.goal-card {
  border-radius: 20px;
  background: linear-gradient(145deg, var(--bg2), var(--bg1));
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.goal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,.25);
}
.goal-bf {
  transition: width 1.4s cubic-bezier(.22,1,.36,1) !important;
  background: linear-gradient(90deg, var(--lime), var(--cyan)) !important;
  position: relative;
}
.goal-bf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  background-size: 200% 100%;
  animation: shimmerBar 2.5s ease-in-out infinite;
}

/* ── CREDIT CARDS PREMIUM ── */
.cc {
  border-radius: 22px !important;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s !important;
}
.cc:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.4) !important;
}

/* ── SELECTION HIGHLIGHT ── */
::selection {
  background: var(--lime-glow2);
  color: var(--text);
}

/* ── FOCUS VISIBLE — Accessible ── */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── ACTIVE PRESS SCALE — ALL interactive ── */
button:active:not(.fab):not(.tt),
[role="button"]:active {
  transform: scale(.94) !important;
  transition-duration: .08s !important;
}

/* ════════════════════════════════════════════════════════════
   VAULT — VISUAL FIXES (based on real screenshots)
   ════════════════════════════════════════════════════════════ */

/* ── FIX 1: sc-glow-bg — remove white box artifact ── */
/* The blur creates a visible white rectangle on light theme.
   Use opacity:0 on light and fix dark */
.sc-glow-bg{display:none!important}

/* ── FIX 2: skel height inline style creates white card appearance ──
   The inline style="height:26px;width:68%" on .sc-val.skel causes
   the neumorphism look. Fix by removing height constraint visually */
.sc-val.skel {
  min-height: 28px !important;
  width: 65% !important;
  border-radius: 8px !important;
  display: block !important;
}

/* ── FIX 3: MOBILE TOPBAR — restructure for small screens ── */
@media (max-width: 768px) {

  /* Topbar: left side only (title + date), right side minimal */
  .topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 14px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .tb-left {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pg-eye {
    font-size: 9px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .pg-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Right side: only show bell + month nav + primary action btn */
  .tb-right {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .tb-right .srch { display: none !important; }
  .tb-right .btn.bg { display: none !important; }
  .tb-right .tt { display: none !important; }
  /* Hide filter tabs in topbar on mobile — move below in content */
  .tb-right .ftab { display: none !important; }
  .tb-right #exp-ftab { display: none !important; }

  /* Month nav — compact */
  .mnav { padding: 2px !important; }
  .mnav-lbl { min-width: 80px !important; font-size: 10.5px !important; }
  .mnav-btn { width: 22px !important; height: 22px !important; font-size: 13px !important; }

  /* Primary button — compact */
  .tb-right .btn.bl {
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  /* Stat card grid — always 2x2 */
  .sg {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Stat cards — proper size on mobile */
  .sc {
    padding: 14px 16px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
  }
  .sc-val {
    font-size: 20px !important;
    letter-spacing: -.6px !important;
  }
  .sc-lbl {
    font-size: 9px !important;
    margin-bottom: 6px !important;
    letter-spacing: 1.2px !important;
  }
  .sc-sub { font-size: 10px !important; }

  /* Content padding */
  .content {
    padding: 14px 12px calc(var(--bot-nav-h, 64px) + 20px + env(safe-area-inset-bottom, 0px)) 12px !important;
  }

  /* Cards */
  .card {
    padding: 16px 16px !important;
    border-radius: 20px !important;
  }
  .card-ttl { font-size: 14px !important; }

  /* 1-col card grids */
  .g2, .g3 { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ── FIX 4: FILTER TABS on mobile — show in content, not topbar ── */
/* On despesas page, show filter tabs below topbar inside content */
@media (max-width: 768px) {
  #page-despesas .content > .sg { margin-top: 0 !important; }

  /* Filters shown as sticky row inside content on mobile */
  .mobile-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    margin-bottom: 14px;
    scrollbar-width: none;
  }
  .mobile-filters::-webkit-scrollbar { display: none; }
  .mobile-filters .ftab-b {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 12px;
  }
}
@media (min-width: 769px) {
  .mobile-filters { display: none !important; }
}

/* ── FIX 5: BOTTOM NAV — correct colors ── */
.bn-item { color: var(--text3) !important; }
.bn-item.on { color: var(--lime) !important; }
[data-theme="light"] .bn-item { color: #8891b8 !important; }
[data-theme="light"] .bn-item.on { color: #6366f1 !important; }

/* Bottom nav background — more opaque on light */
[data-theme="light"] .bot-nav {
  background: rgba(248, 249, 255, 0.97) !important;
  border-top: 1px solid rgba(99, 102, 241, 0.1) !important;
}

/* ── FIX 6: STAT CARD — no nested card appearance ── */
/* Ensure skel never looks like a floating card */
.sc-val.skel {
  background: linear-gradient(90deg, var(--skel-from) 25%, var(--skel-to) 50%, var(--skel-from) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── FIX 7: VERY SMALL PHONES ≤380px ── */
@media (max-width: 380px) {
  .sc { padding: 11px 12px !important; border-radius: 16px !important; }
  .sc-val { font-size: 17px !important; }
  .mnav-lbl { min-width: 68px !important; font-size: 10px !important; }
  .tb-right .btn.bl { padding: 6px 10px !important; font-size: 11px !important; }
  .sg { gap: 8px !important; }
  .content { padding: 12px 10px calc(var(--bot-nav-h, 64px) + 16px + env(safe-area-inset-bottom, 0px)) 10px !important; }
}

/* ── FIX 8: LIGHT THEME stat cards — clean background ── */
[data-theme="light"] .sc {
  background: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.07) !important;
  box-shadow: 0 2px 16px rgba(99, 102, 241, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.04) !important;
}
[data-theme="light"] .sc::before { display: none !important; }
[data-theme="light"] .card {
  background: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.07) !important;
  box-shadow: 0 2px 16px rgba(99, 102, 241, 0.06) !important;
}

/* ── FIX 9: GAUGE ARC — light theme ── */
[data-theme="light"] #gauge-arc {
  filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.4)) !important;
  stroke: #6366f1 !important;
}
[data-theme="light"] #gauge-arc + path { stroke: #e8ecf8 !important; }

/* ── FIX 10: TOPBAR ACCENT LINE — light theme ── */
[data-theme="light"] .topbar::after {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.18) 40%, transparent) !important;
}

/* ── FIX 11: NOTIFICATION BELL count badge ── */
.ncnt {
  position: absolute !important;
  top: -3px !important; right: -3px !important;
  min-width: 16px !important; height: 16px !important;
  background: var(--red) !important;
  border-radius: 99px !important;
  font-size: 9px !important; font-weight: 700 !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 4px !important;
  border: 2px solid var(--bg) !important;
  animation: dotPop .3s var(--ease-spring) both !important;
}

/* ── FIX 12: MODAL on light theme ── */
[data-theme="light"] .modal {
  background: #fff !important;
}
[data-theme="light"] .fin {
  background: #f4f6ff !important;
  border-color: rgba(99, 102, 241, 0.14) !important;
}
[data-theme="light"] .fse {
  background: #f4f6ff !important;
  border-color: rgba(99, 102, 241, 0.14) !important;
}

/* ════════════════════════════════════════════════════════════
   AUTH SCREEN V2 — Unified, always shows login/register
   ════════════════════════════════════════════════════════════ */

/* DB status bar */
.auth-db-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text2);
}
.auth-db-bar span:first-child { font-size: 14px; flex-shrink: 0; }
#auth-db-lbl { flex: 1; font-weight: 500; }
.auth-db-cfg-btn {
  background: rgba(197,242,53,.1);
  border: 1px solid rgba(197,242,53,.2);
  color: var(--lime);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background .15s;
}
.auth-db-cfg-btn:active { background: rgba(197,242,53,.2); }
.auth-db-bar.db-ok { background: rgba(197,242,53,.05); border-color: rgba(197,242,53,.15); }
.auth-db-bar.db-ok #auth-db-lbl { color: var(--lime); }

/* Password field with eye button */
.auth-pw-wrap {
  position: relative;
}
.auth-pw-wrap .fin {
  padding-right: 44px;
}
.auth-pw-eye {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  transition: color .15s;
  touch-action: manipulation;
}
.auth-pw-eye:hover { color: var(--text2); }
.auth-pw-eye svg { width: 16px; height: 16px; }

/* Light theme overrides */
[data-theme="light"] .auth-db-bar {
  background: #f0f4ff;
  border-color: rgba(99,102,241,.1);
}
[data-theme="light"] .auth-db-cfg-btn {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.2);
  color: #6366f1;
}
[data-theme="light"] .auth-db-bar.db-ok {
  background: rgba(99,102,241,.05);
  border-color: rgba(99,102,241,.15);
}
[data-theme="light"] .auth-db-bar.db-ok #auth-db-lbl { color: #6366f1; }


/* ═══ DEFINITIVE FIX: Remove all nested card artifacts ═══ */
.sc-glow-bg { display: none !important; }

/* Skeleton must never look like a card */
.sc-val.skel,
.sc .skel {
  background: linear-gradient(90deg, var(--skel-from) 25%, var(--skel-to) 50%, var(--skel-from) 75%) !important;
  background-size: 200% 100% !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 8px !important;
  display: block !important;
  height: 28px !important;
  width: 65% !important;
}

/* Light theme: cards completely flat, no internal shadows */
[data-theme="light"] .sc {
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,.08) !important;
  box-shadow: 0 1px 12px rgba(99,102,241,.06) !important;
}
[data-theme="light"] .sc::before,
[data-theme="light"] .sc::after,
[data-theme="light"] .sc-glow-bg { 
  display: none !important; 
}

/* Stat card value — no nested box */
.sc-val {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}


/* ═══ FINAL FIX: Stat card skel visibility ═══ */
/* Light theme: make skel visible against white card */
[data-theme="light"] .skel {
  background: linear-gradient(90deg, #dde4f5 25%, #c5d0ea 50%, #dde4f5 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.8s ease-in-out infinite !important;
}

/* The sc-val in skel state must be a thin bar, not a large block */
[data-theme="light"] .sc-val.skel,
[data-theme="dark"] .sc-val.skel {
  display: block !important;
  height: 28px !important;
  width: 70% !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure sc-val never has box/card appearance */
.sc-val {
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;
}

/* Fix: sc on light theme has slightly off-white bg so skel is visible */
[data-theme="light"] .sc {
  background: #f8f9ff !important;
}
[data-theme="light"] .sc.scl { background: linear-gradient(145deg, #f8fff0, #f8f9ff) !important; }
[data-theme="light"] .sc.scr { background: linear-gradient(145deg, #fff8f8, #f8f9ff) !important; }
[data-theme="light"] .sc.scc { background: linear-gradient(145deg, #f0f9ff, #f8f9ff) !important; }
[data-theme="light"] .sc.sca { background: linear-gradient(145deg, #fffaf0, #f8f9ff) !important; }


/* OCR Result states */
.ocr-res-waiting {
  display: none !important;
}
/* When JS removes the class, result becomes visible */
#ocr-res:not(.ocr-res-waiting) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.ocr-pgw-hidden {
  display: none !important;
}