/* ══════════════════════════════════════════════
   RAPH · FINANCES  —  Design System v3
   Aesthetic: Warm Parchment × Terracotta × Gold
══════════════════════════════════════════════ */

:root{
  --bg:#ece7dd;
  --bg2:#e4ddd1;
  --surface:#faf7f2;
  --surface2:#f2ede4;
  --surface3:#e9e3d8;
  --glass:rgba(250,247,242,.78);
  --border:rgba(0,0,0,.08);
  --border2:rgba(0,0,0,.14);
  --text:#18150f;
  --text2:#2c2820;
  --muted:#857e74;
  --muted2:#aea69b;
  --accent:#c84b2f;
  --accent-light:#f6e9e5;
  --accent-glow:rgba(200,75,47,.2);
  --green:#1a6438;
  --green-light:#e2f0e8;
  --amber:#b06c08;
  --amber-light:#f5edda;
  --blue:#1f4e9e;
  --blue-light:#e2eaf9;
  --sw:260px;
  --r:18px;
  --r-sm:13px;
  --r-xs:10px;
  --sh-sm:0 1px 3px rgba(0,0,0,.05),0 3px 8px rgba(0,0,0,.06);
  --sh:0 2px 4px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.06);
  --sh-lg:0 4px 8px rgba(0,0,0,.07),0 12px 28px rgba(0,0,0,.10),0 28px 60px rgba(0,0,0,.08);
  --sh-accent:0 4px 18px rgba(200,75,47,.28),0 1px 4px rgba(200,75,47,.18);
  --t:.2s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --bg:#111009;
  --bg2:#0e0c07;
  --surface:#1c1914;
  --surface2:#232019;
  --surface3:#2a261e;
  --glass:rgba(28,25,20,.88);
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.14);
  --text:#f5f0e8;
  --text2:#d8d2c8;
  --muted:#7a7468;
  --muted2:#484038;
  --accent:#e05a3a;
  --accent-light:rgba(224,90,58,.14);
  --accent-glow:rgba(224,90,58,.22);
  --green:#28975a;
  --green-light:rgba(40,151,90,.14);
  --amber:#d08c1a;
  --amber-light:rgba(208,140,26,.14);
  --blue:#4a7fd4;
  --blue-light:rgba(74,127,212,.14);
  --sh-sm:0 1px 3px rgba(0,0,0,.25),0 3px 8px rgba(0,0,0,.25);
  --sh:0 2px 4px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.28);
  --sh-lg:0 4px 8px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45),0 28px 60px rgba(0,0,0,.38);
  --sh-accent:0 4px 18px rgba(224,90,58,.32),0 1px 4px rgba(224,90,58,.22);
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{overflow-x:hidden;max-width:100vw;}

body{
  font-family:'Figtree',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  transition:background var(--t),color var(--t);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{font-family:'Figtree',sans-serif;font-weight:700;letter-spacing:-.03em;}

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

/* ── Layout ── */
#app-shell{display:flex;height:auto;overflow-x:hidden;width:100%;}

#sidebar{
  width:var(--sw);
  flex-shrink:0;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface2) 100%);
  border-right:1px solid var(--border);
  position:fixed;top:0;left:0;
  height:100vh;
  display:flex;flex-direction:column;
  z-index:200;
  transition:transform .3s cubic-bezier(.4,0,.2,1),background .22s ease;
  box-shadow:inset -1px 0 0 var(--border),3px 0 24px rgba(0,0,0,.05);
}


/* ── FIX PRINCIPAL : #main sans height:100vh bloquant ── */
#main{
  margin-left:var(--sw);
  flex:1;
  min-height:100vh;
  height:auto;
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  background:var(--bg);
}

.pwrap{
  max-width:880px;
  margin:0 auto;
  padding:2.2rem 1.8rem 5rem;
  width:100%;box-sizing:border-box;
}

/* ── Sidebar ── */
.sb-logo{
  padding:1.3rem 1.1rem 1rem;
  font-family:'Figtree',sans-serif;
  font-size:.95rem;font-weight:400;
  letter-spacing:-.01em;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  display:flex;align-items:center;gap:.55rem;
  overflow:hidden;
}
.sb-logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.sb-logo-text span{color:var(--accent);}
.sb-logo-icon{
  width:30px;height:30px;
  background:linear-gradient(135deg,#d05030,var(--accent));
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;flex-shrink:0;
  box-shadow:var(--sh-accent);
}
.sb-user{
  padding:.5rem 1.1rem;
  font-size:.69rem;color:var(--muted);
  border-bottom:1px solid var(--border);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex-shrink:0;font-weight:500;letter-spacing:-.01em;
}
.sb-nav{flex:1;padding:.7rem .6rem;display:flex;flex-direction:column;gap:1px;overflow-y:auto;}
.sb-section{
  font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted2);padding:.75rem .7rem .28rem;margin-top:.2rem;
}
.sb-btn{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .75rem;
  border-radius:var(--r-xs);border:none;background:transparent;
  color:var(--muted);font-family:'Figtree',sans-serif;
  font-size:.82rem;font-weight:400;cursor:pointer;
  transition:all var(--t);width:100%;text-align:left;
  position:relative;
}
.sb-btn:hover{background:var(--surface2);color:var(--text2);}
.sb-btn:active{transform:scale(.97);background:var(--surface3);}
.sb-btn.active{
  background:linear-gradient(90deg,var(--accent-light),transparent);
  color:var(--accent);font-weight:600;
}
[data-theme="dark"] .sb-btn.active{background:linear-gradient(90deg,var(--accent-light),transparent);}
.sb-btn.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:0 3px 3px 0;
  background:var(--accent);margin-left:-1px;
  box-shadow:0 0 8px rgba(200,75,47,.4);
}
.sb-btn .ni{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--surface2);
  flex-shrink:0;transition:all var(--t);
  color:var(--muted);
}
.sb-btn.active .ni{
  background:var(--accent);
  color:#fff;
  box-shadow:0 2px 10px rgba(200,75,47,.35);
}
.sb-btn:hover .ni{background:var(--surface3);}
.sb-foot{padding:.75rem 1.1rem 1.2rem;border-top:1px solid var(--border);flex-shrink:0;}
.sb-ovl{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;backdrop-filter:blur(10px);}

/* ── Mobile nav ── */
#mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--border);z-index:100;padding:.28rem .05rem calc(.28rem + env(safe-area-inset-bottom));gap:0;}
#mob-hdr{display:none;position:sticky;top:0;z-index:150;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:.65rem 1rem;align-items:center;justify-content:space-between;}
.ham{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text);}
.mn-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.35rem .05rem;border-radius:8px;border:none;background:transparent;color:var(--muted);font-size:.5rem;font-weight:500;cursor:pointer;font-family:'Figtree',sans-serif;transition:color var(--t);min-width:0;overflow:hidden;}
.mn-btn .mi{line-height:1.15;}
.mn-btn.active{color:var(--accent);}

/* ── Cards ── */
.card{
  background:var(--surface);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  border:1px solid var(--border);
  padding:1.4rem;
  transition:box-shadow .2s ease,transform .2s ease,background .22s ease;
  position:relative;overflow:hidden;
}
.card:hover{box-shadow:var(--sh);transform:translateY(-2px);}
.card::after{
  content:'';position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 55%);
  pointer-events:none;
}

/* ── Stat cards ── */
.sc{
  border-radius:var(--r);
  padding:1rem 1.15rem 1.05rem;
  border:1px solid var(--border);
  background:var(--surface);
  position:relative;overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease;
}
.sc:hover{box-shadow:var(--sh);transform:translateY(-2px);}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--border2);border-radius:var(--r) var(--r) 0 0;}
.sc-green::before{background:linear-gradient(90deg,var(--green),#2e9a58);}
.sc-accent::before{background:linear-gradient(90deg,var(--accent),#e07050);}
.sc-amber::before{background:linear-gradient(90deg,var(--amber),#d48a18);}
.sc-blue::before{background:linear-gradient(90deg,var(--blue),#4a7fd4);}
.sc-purple::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa);}
.sc[style*="--sc-color"]::before{background:var(--sc-color,var(--border2));}

.sv{
  font-family:'Figtree',sans-serif;
  font-size:1.6rem;line-height:1.1;
  margin-top:.2rem;letter-spacing:-.03em;
}

/* ── Hero card ── */
.hero-card{
  background:linear-gradient(135deg,#d4503a 0%,var(--accent) 45%,#8c2e18 100%);
  border-radius:var(--r);
  padding:1.5rem 1.6rem;
  color:#fff;
  position:relative;overflow:hidden;
  margin-bottom:.85rem;
  box-shadow:0 8px 32px rgba(200,75,47,.35),0 2px 8px rgba(200,75,47,.2);
  transition:box-shadow var(--t);
}
.hero-card:hover{box-shadow:0 10px 40px rgba(200,75,47,.45),0 3px 10px rgba(200,75,47,.25);}
.hero-card::before{
  content:'';position:absolute;
  top:-80px;right:-80px;
  width:280px;height:280px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
}
.hero-card::after{
  content:'';position:absolute;
  bottom:-90px;left:30px;
  width:200px;height:200px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
}

/* ── Inputs ── */
input,select,textarea{
  background:var(--surface2);color:var(--text);
  border:1.5px solid var(--border);
  border-radius:var(--r-xs);
  padding:.7rem 1rem;
  font-family:'Figtree',sans-serif;font-size:.88rem;
  width:100%;
  transition:border-color .16s ease,box-shadow .16s ease,background .18s ease;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow),0 1px 4px rgba(0,0,0,.06);
  background:var(--surface);
}
input::placeholder{color:var(--muted2);}
label{font-size:.7rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.38rem;
  padding:.68rem 1.3rem;border-radius:10px;
  font-size:.84rem;font-weight:500;cursor:pointer;border:none;
  transition:all .15s cubic-bezier(.4,0,.2,1);
  font-family:'Figtree',sans-serif;
  white-space:nowrap;letter-spacing:-.005em;
  position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.95) translateY(0) !important;}
.btn::after{
  content:'';position:absolute;inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,0);
  transition:background .15s;pointer-events:none;
}
.btn:active::after{background:rgba(255,255,255,.18);}
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);animation:ripple .5s linear;pointer-events:none;
}
@keyframes ripple{to{transform:scale(4);opacity:0;}}

.btn-p{
  background:linear-gradient(135deg,#d05030,var(--accent));
  color:#fff;box-shadow:var(--sh-accent);
}
.btn-p:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 8px 24px rgba(200,75,47,.42);}
.btn-g{
  background:linear-gradient(135deg,#1f7540,var(--green));
  color:#fff;box-shadow:0 2px 8px rgba(30,107,62,.22);
}
.btn-g:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(30,107,62,.35);}
.btn-gh{
  background:var(--surface2);color:var(--text2);
  border:1.5px solid var(--border2);
}
.btn-gh:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:translateY(-1px);}
.btn-sm{padding:.34rem .7rem;font-size:.76rem;border-radius:8px;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

/* ── FAB ── */
#fab{
  position:fixed;bottom:2rem;right:1.75rem;z-index:150;
  width:50px;height:50px;border-radius:15px;
  background:linear-gradient(135deg,#d05030,var(--accent));
  color:#fff;border:none;cursor:pointer;
  box-shadow:var(--sh-accent);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,opacity .22s ease;
  display:flex;align-items:center;justify-content:center;
}
#fab:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 10px 32px rgba(200,75,47,.5);}
#fab:active{transform:scale(.95);}
@media(min-width:768px){#fab{bottom:2rem;right:2rem;}}

/* ── Pages ── */
.page{display:none;will-change:auto;background:var(--bg);}
.page.active{display:block;}
.page.slide-in-right{animation:slideInRight .34s cubic-bezier(.22,.68,0,1.15) both;}
.page.slide-in-left{animation:slideInLeft .34s cubic-bezier(.22,.68,0,1.15) both;}
.page.slide-out-right{animation:slideOutRight .22s cubic-bezier(.55,0,1,.45) both;}
.page.slide-out-left{animation:slideOutLeft .22s cubic-bezier(.55,0,1,.45) both;}
@keyframes slideInRight{from{opacity:0;transform:translateX(36px) translateZ(0);}to{opacity:1;transform:translateX(0) translateZ(0);}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-36px) translateZ(0);}to{opacity:1;transform:translateX(0) translateZ(0);}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(28px);}}
@keyframes slideOutLeft{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(-28px);}}

/* ── Page title ── */
.page-title{
  font-family:'Figtree',sans-serif;
  font-size:1.8rem;font-weight:400;
  letter-spacing:-.03em;
  margin-bottom:1.3rem;
  display:flex;align-items:center;gap:.5rem;
  line-height:1.1;
}
.page-title em{color:var(--muted);}

/* ── TX items ── */
.txi{
  display:flex;justify-content:space-between;align-items:center;
  padding:.85rem 1.2rem;
  border-bottom:1px solid var(--border);
  transition:background .12s ease;
  animation:fi .2s ease;
}
.txi:last-child{border-bottom:none;}
.txi:hover{background:var(--surface2);}
.txi.rem{animation:so .28s ease forwards;}
@keyframes fi{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:translateY(0);}}
@keyframes so{to{opacity:0;transform:translateX(60px);}}

.tx-icon{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
  background:var(--surface2);
  transition:transform var(--t);
}
.txi:hover .tx-icon{transform:scale(1.1);}

/* ── Tabs ── */
.tp{flex:1;padding:.54rem .8rem;border-radius:var(--r-xs);font-weight:500;font-size:.82rem;border:none;cursor:pointer;transition:background .14s ease,color .14s ease;font-family:'Figtree',sans-serif;color:var(--muted);background:transparent;}
.tp.ae{background:#fee2e2;color:#b91c1c;}
.tp.ai{background:#dcfce7;color:#166534;}
[data-theme="dark"] .tp.ae{background:rgba(185,28,28,.15);color:#f87171;}
[data-theme="dark"] .tp.ai{background:rgba(22,101,52,.15);color:#4ade80;}

/* ── Badges ── */
.bdg{display:inline-flex;align-items:center;padding:.18rem .58rem;border-radius:99px;font-size:.68rem;font-weight:600;letter-spacing:-.01em;}
.br{background:#fde8e8;color:#b91c1c;}
.bg{background:#dcfce7;color:#166534;}
.ba{background:#fef3c7;color:#92400e;}
[data-theme="dark"] .br{background:rgba(185,28,28,.2);color:#f87171;}
[data-theme="dark"] .bg{background:rgba(22,101,52,.2);color:#4ade80;}
[data-theme="dark"] .ba{background:rgba(146,64,14,.2);color:#fbbf24;}

/* ── Progress ── */
.pb{background:var(--surface3);border-radius:99px;height:6px;overflow:hidden;}
.pbf{height:100%;border-radius:99px;transition:width 1.1s cubic-bezier(.4,0,.2,1);}

/* ── Modal ── */
#modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(10px);}
#modal-bg.open{display:flex;}
@media(min-width:580px){#modal-bg{align-items:center;}}
.mbox{
  background:var(--surface);
  border-radius:24px 24px 0 0;width:100%;max-width:500px;
  max-height:92vh;overflow-y:auto;
  padding:1.4rem;
  animation:mUp .36s cubic-bezier(.34,1.42,.64,1);
  border:1px solid var(--border);border-bottom:none;
  box-shadow:var(--sh-lg);
}
@media(min-width:580px){.mbox{border-radius:24px;border-bottom:1px solid var(--border);}}
@keyframes mUp{from{transform:translateY(56px) scale(.96);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.mhandle{width:36px;height:4px;background:var(--border2);border-radius:99px;margin:0 auto 1.1rem;}
@media(min-width:580px){.mhandle{display:none;}}

/* ── Chips ── */
.chip{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.28rem .65rem;border-radius:99px;
  font-size:.74rem;font-weight:500;cursor:pointer;
  border:1.5px solid var(--border);background:var(--surface2);
  color:var(--muted);transition:all var(--t);
}
.chip:hover,.chip.on{border-color:var(--accent);background:var(--accent-light);color:var(--accent);}
.chip:active{transform:scale(.94);}

/* ── Auth ── */
#auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.auth-card{
  width:100%;max-width:390px;
  background:linear-gradient(160deg,var(--surface),var(--surface2));
  border-radius:24px;box-shadow:var(--sh-lg);
  border:1px solid var(--border);padding:2.4rem 1.9rem;
}
.atab{flex:1;padding:.55rem;border:none;background:transparent;cursor:pointer;font-family:'Figtree',sans-serif;font-weight:500;font-size:.84rem;color:var(--muted);border-radius:8px;transition:background .14s ease,color .14s ease;}
.atab.active{
  background:linear-gradient(135deg,#d05030,var(--accent));
  color:#fff;box-shadow:0 2px 8px rgba(200,75,47,.3);
}
.aerr{background:#fee2e2;color:#b91c1c;border-radius:var(--r-xs);padding:.65rem 1rem;font-size:.82rem;margin-bottom:1rem;border:1px solid rgba(185,28,28,.2);}
[data-theme="dark"] .aerr{background:rgba(185,28,28,.15);color:#f87171;}

/* ── Spinner ── */
.spin{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:rot .65s linear infinite;display:inline-block;}
@keyframes rot{to{transform:rotate(360deg);}}

/* ── Toast ── */
#toasts{position:fixed;top:1.1rem;right:1.1rem;z-index:9999;display:flex;flex-direction:column;gap:.38rem;pointer-events:none;align-items:flex-end;}
.ti{
  background:var(--glass);color:var(--text);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  padding:.58rem 1rem;border-radius:12px;
  font-size:.8rem;font-weight:500;
  box-shadow:var(--sh);
  backdrop-filter:blur(12px);
  animation:tsin .24s cubic-bezier(.34,1.42,.64,1),tsout .28s ease 2.7s forwards;
  max-width:calc(100vw - 1.5rem);
}
@keyframes tsin{from{opacity:0;transform:translateX(18px) scale(.94);}to{opacity:1;transform:translateX(0) scale(1);}}
@keyframes tsout{to{opacity:0;transform:translateX(14px) scale(.96);}}

/* ── Skeleton ── */
.sk{background:linear-gradient(90deg,var(--surface3) 0%,var(--surface2) 40%,var(--surface3) 80%);background-size:300% 100%;animation:sk 1.5s ease-in-out infinite;border-radius:8px;}
@keyframes sk{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── Loading ── */
#load{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9998;flex-direction:column;gap:.85rem;transition:opacity .35s;}
#load.hidden{opacity:0;pointer-events:none;}

/* ── Theme toggle ── */
.ttog{
  width:48px;height:26px;border-radius:99px;
  border:none;cursor:pointer;position:relative;
  background:var(--muted2);
  transition:background .3s ease,box-shadow .3s;
  will-change:background;flex-shrink:0;
  -webkit-appearance:none;appearance:none;
}
.ttog:active{transform:scale(.93);}
.ttog::after{
  content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s;
  transform:translateX(0px);will-change:transform;
  -webkit-backface-visibility:hidden;
}
.ttog.on{background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.ttog.on::after{transform:translateX(22px);}
.ttog:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ── Alert ── */
.alert{padding:.78rem .95rem;border-radius:var(--r-sm);font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;}
.alert-d{background:#fde8e8;color:#b91c1c;border:1px solid rgba(185,28,28,.15);}
[data-theme="dark"] .alert-d{background:rgba(185,28,28,.15);color:#f87171;}

/* ── Sort buttons ── */
.srt{background:none;border:1.5px solid var(--border);border-radius:7px;padding:.26rem .58rem;font-size:.73rem;cursor:pointer;font-family:'Figtree',sans-serif;color:var(--muted);transition:all .14s ease;font-weight:500;}
.srt.on,.srt:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.srt:active{transform:scale(.93);}
[data-theme="dark"] .srt.on,[data-theme="dark"] .srt:hover{background:var(--accent-light);}

/* ── Table ── */
.stbl{width:100%;border-collapse:collapse;font-size:.82rem;}
.stbl th{text-align:left;padding:.5rem .85rem;font-weight:600;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;border-bottom:1.5px solid var(--border2);}
.stbl td{padding:.65rem .85rem;border-bottom:1px solid var(--border);}
.stbl tr:last-child td{border-bottom:none;}
.stbl tr:hover td{background:var(--surface2);}

/* ── Settings ── */
.srow{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--border);}
.srow:last-child{border-bottom:none;}

/* ── Pagination ── */
.pn{min-width:30px;height:30px;border-radius:7px;border:1.5px solid var(--border);background:none;cursor:pointer;font-size:.76rem;font-family:'Figtree',sans-serif;color:var(--muted);transition:all var(--t);font-weight:500;}
.pn.on,.pn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}

/* ── Grids ── */
.rg2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
.rg3{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;}
.rg4{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;}

/* ── Card entrance (desktop) ── */
@keyframes cardIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media(min-width:768px){
  .page.slide-in-right .card,.page.slide-in-left .card{animation:cardIn .3s ease both;}
  .page.slide-in-right .card:nth-child(1),.page.slide-in-left .card:nth-child(1){animation-delay:.05s;}
  .page.slide-in-right .card:nth-child(2),.page.slide-in-left .card:nth-child(2){animation-delay:.1s;}
  .page.slide-in-right .card:nth-child(3),.page.slide-in-left .card:nth-child(3){animation-delay:.15s;}
}

/* ── Number highlight ── */
.num-pos{color:var(--green);font-family:'Figtree',sans-serif;}
.num-neg{color:var(--accent);font-family:'Figtree',sans-serif;}
.num-neu{color:var(--blue);font-family:'Figtree',sans-serif;}

/* ── Touch interactions ── */
button,a,.btn,.sb-btn,.mn-btn,.chip,.tp,.srt,.pn,.atab,input,select,textarea,label{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.card,.txi{-webkit-tap-highlight-color:transparent;}

/* ── Badge pop ── */
@keyframes pop{0%{transform:scale(1);}40%{transform:scale(1.14);}100%{transform:scale(1);}}
.pop{animation:pop .3s cubic-bezier(.34,1.56,.64,1);}

/* ── Page content fade-stagger ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
#page-dashboard.active .hero-card{animation:fadeUp .3s ease .03s both;}
#page-dashboard.active .rg3{animation:fadeUp .3s ease .08s both;}
#page-dashboard.active .rg2{animation:fadeUp .3s ease .13s both;}

/* ==== MOBILE <=767px ==== */
@media(max-width:767px){
  html,body{overflow-x:hidden;max-width:100vw;}
  #sidebar{display:none !important;}
  .sb-ovl{display:none !important;}
  #mob-hdr{display:none !important;}
  #app-shell{overflow-x:hidden;max-width:100vw;}
  #sidebar{transform:translateX(-110%);width:78vw;max-width:290px;z-index:400;}
  #sidebar.open{transform:translateX(0);}

  #main{
    margin-left:0 !important;
    width:100vw;max-width:100vw;
    overflow-x:hidden;overflow-y:auto;
    height:auto !important;
    min-height:calc(100vh - 62px);
    padding-top:0;
  }
  .pwrap{padding:1rem .85rem calc(5.5rem + env(safe-area-inset-bottom));max-width:100%;overflow-x:hidden;}
  #mob-hdr{display:flex;}
  #mob-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    height:calc(62px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--border);
    z-index:300;align-items:stretch;
    padding:0 0 env(safe-area-inset-bottom);overflow:hidden;
  }
  .mn-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;border:none;background:transparent;color:var(--muted);
    font-size:.48rem;font-weight:500;cursor:pointer;
    font-family:'Figtree',sans-serif;transition:color .15s;padding:0;min-width:0;
  }
  .mn-btn .mi{font-size:1.2rem;line-height:1.2;}
  .mn-btn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .mn-btn.active{color:var(--accent);}
  .mn-btn.active .mi{filter:drop-shadow(0 0 4px rgba(200,75,47,.4));}
  h2{font-size:1.2rem !important;}
  .sv{font-size:1.15rem !important;}
  .card{padding:.85rem;border-radius:12px;}
  .sc{padding:.65rem .8rem;border-radius:10px;}
  .rg2,.rg3,.rg4{grid-template-columns:1fr 1fr !important;gap:.5rem !important;}
  #page-dashboard .rg2,#page-marches .rg2{grid-template-columns:1fr !important;}
  #page-dashboard .rg3,#page-invest .rg3{grid-template-columns:1fr 1fr !important;}
  .srow{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.65rem 0;width:100%;box-sizing:border-box;}
  .srow>div{width:100%;max-width:100%;}
  .srow input,.srow select{width:100% !important;box-sizing:border-box;}
  .srow .btn,.srow button.btn{width:100%;justify-content:center;box-sizing:border-box;}
  .srow:has(.ttog){flex-direction:row;align-items:center;justify-content:space-between;}
  .srow .ttog{width:40px !important;flex-shrink:0;}
  .stbl{font-size:.72rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .stbl th,.stbl td{padding:.35rem .45rem;white-space:nowrap;}
  .txi{padding:.55rem .75rem;}
  #modal-bg{align-items:flex-end;}
  .mbox{border-radius:20px 20px 0 0;max-height:90vh;padding:.9rem;width:100%;box-sizing:border-box;}
  .mbox input,.mbox select,.mbox textarea{font-size:16px;}
  .chip{font-size:.69rem;padding:.18rem .42rem;}
  .btn-sm{font-size:.72rem;padding:.28rem .55rem;}
  #toasts{top:.5rem;right:.5rem;left:.5rem;align-items:stretch;}
  .ti{white-space:normal;text-align:left;}
  #fab{bottom:66px;right:.85rem;width:46px;height:46px;font-size:1.4rem;}
  .alert{font-size:.78rem;padding:.65rem .8rem;}
  .page.active .card{animation:none !important;}
  .page.active .sc{animation:none !important;}
  .card:hover{transform:none !important;}
  .sc:hover{transform:none !important;}
  .txi{animation:none !important;}
}

@media(max-width:380px){
  .pwrap{padding:.6rem .65rem 5.5rem;}
  h2{font-size:1.05rem !important;}
  .sv{font-size:1rem !important;}
  .mn-btn{font-size:.42rem;}
  .mn-btn .mi{font-size:1rem;}
}

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

/* ── Empty states ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:2.5rem 1rem;text-align:center;
  gap:.5rem;
}
.empty-icon{font-size:2.5rem;opacity:.5;margin-bottom:.3rem;}
.empty-title{font-size:.95rem;font-weight:700;color:var(--text2);}
.empty-sub{font-size:.8rem;color:var(--muted);max-width:240px;line-height:1.5;}