:root{
  --ink:#1f2d27; --muted:rgba(31,45,39,.6);
  --emerald:#3a8b6a; --mint:#6fc4a5; --coral:#ff8a80; --glacier:#afc7e0;
  --bg:#f4f6f3;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px;
  --shadow-1:0 6px 18px rgba(0,0,0,.06); --shadow-2:0 12px 28px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

.app{min-height:100dvh; padding-bottom:96px;}
.container{padding:16px; max-width:980px; margin:0 auto;}
@media(min-width:960px){ .container{padding:24px} }

/* Topbar */
.topbar{
  position:sticky; top:0;
  background:linear-gradient(180deg,rgba(58,139,106,.96),rgba(58,139,106,.9));
  color:#fff; padding:12px 16px;
  z-index:5; backdrop-filter:saturate(1.1) blur(6px);
  display:flex; align-items:center; gap:12px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:32px;height:32px;border-radius:12px;
  background:linear-gradient(135deg,var(--mint),#2e6d56);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;box-shadow:var(--shadow-1)
}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name strong{font-weight:700}
.brand-name span{font-size:.75rem;opacity:.85}

/* Bouton Aide “?” — à droite */
.help-btn{
  margin-left:auto;
  background:rgba(255,255,255,.15);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  width:34px; height:34px;
  border-radius:10px;
  cursor:pointer; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-1);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.help-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.22); }
.help-btn:active{ transform:translateY(0); }
@media (min-width:720px){
  .help-btn{ width:36px; height:36px; }
}

/* Cards */
.card{
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-md); box-shadow:var(--shadow-1);
  padding:16px; margin:12px 0;
}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.h2{margin:0 0 12px 0; font-size:1.1rem}
.empty{
  text-align:center; padding:28px; border:1px dashed rgba(0,0,0,.15);
  border-radius:var(--radius-md); color:var(--muted); background:rgba(255,255,255,.6);
}

/* Focus / progression */
.focus-box{
  background:linear-gradient(135deg,rgba(111,196,165,.16),rgba(255,255,255,.9));
  border:1px solid rgba(111,196,165,.28); border-radius:var(--radius-md);
  padding:18px; box-shadow:var(--shadow-1)
}
.focus-line{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:8px}
.focus-label{font-size:.82rem; color:var(--emerald); font-weight:600}
.focus-amount-ink{font-weight:700; letter-spacing:-.02em; font-size:clamp(1.6rem, 7vw, 2.4rem); color:var(--ink)}
.focus-amount-ink.neg{color:#b94f49}
.month-progress{margin-top:10px}
.mp-top{display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); margin-bottom:6px}

/* Chips */
.chips{display:flex; gap:8px; overflow:auto; padding-bottom:4px}
.chips.wrap{flex-wrap:wrap}
.chips.compact .chip{padding:6px 10px}
.chip{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px; background:#fff;
  border:1px solid rgba(0,0,0,.08); color:var(--muted); white-space:nowrap; text-decoration:none;
}
.chip.ghost{background:rgba(0,0,0,.04)}
.chip.sel{background:linear-gradient(135deg,var(--emerald),var(--mint)); color:#fff; border-color:transparent}
.chip.add{border-style:dashed}
.chip-ico{margin-right:6px}

/* Buttons */
.quick{display:flex; gap:8px; flex-wrap:wrap}
.btn-primary{
  width:100%; margin-top:12px; background:linear-gradient(135deg,var(--emerald),var(--mint));
  color:#fff; border:none; padding:12px 16px; border-radius:12px; font-weight:600;
  box-shadow:var(--shadow-2); cursor:pointer;
}
.btn-secondary{
  background:#fff; color:var(--emerald);
  border:1px solid rgba(58,139,106,.25); padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn-danger{
  background:#fff; color:#b64646; border:1px solid rgba(182,70,70,.25);
  padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn-compact{
  align-self:flex-start;
  padding:8px 12px;
  font-size:.85rem;
}

/* Lists / rows */
.card-list{display:flex; flex-direction:column; gap:8px}
.row{
  display:flex; align-items:center; gap:10px; padding:12px;
  border-radius:12px; background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
}
.row-ico{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05)}
.row-main{flex:1}
.row-title{font-weight:600}
.row-sub{font-size:.85rem;color:var(--muted)}
.amount{margin-left:auto; font-weight:700}
.row.income .amount{color:var(--emerald)}
.row.expense .amount{color:var(--coral)}
.icon{background:transparent;border:none;cursor:pointer}
.icon.del{opacity:.7}
.badge.ok{
  background:rgba(58,139,106,.12); color:var(--emerald);
  border:1px solid rgba(58,139,106,.22); padding:4px 8px; border-radius:999px
}

/* Budgets */
.budgets{display:grid; gap:12px}
@media(min-width:720px){ .budgets{grid-template-columns:1fr 1fr} }
.budget-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.budget-name{font-weight:600}
.budget-nums{font-size:.9rem; color:var(--muted)}
.bar{height:10px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden}
.fill{height:100%; background:linear-gradient(90deg,var(--emerald),var(--mint)); width:0; transition:width .25s ease}
.fill.over{background:linear-gradient(90deg,var(--coral),#d45b57)}

/* Profil */
.grid-2{display:grid; gap:10px}
@media(min-width:720px){ .grid-2{grid-template-columns:1fr 1fr} }
label{display:flex; flex-direction:column; gap:6px; font-size:.9rem}
input, select{padding:10px 12px; border:1px solid rgba(0,0,0,.12); border-radius:12px; background:#fff; font:inherit}
.inline-new-cat{display:flex; gap:8px; margin:6px 0 0}
.inline-new-cat .emoji{width:60px}

/* Navigation bas */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; height:64px; background:#fff;
  border-top:1px solid rgba(0,0,0,.08); display:flex; justify-content:space-around; align-items:center;
  z-index:10; padding-bottom:max(0px, env(safe-area-inset-bottom));
}
.nav-item{display:flex; flex-direction:column; align-items:center; gap:2px; color:rgba(0,0,0,.55); background:transparent; border:none; font:inherit; cursor:pointer}
.nav-item.active{color:var(--emerald); font-weight:600}
.nav-ico{font-size:1.1rem}
.nav-lbl{font-size:.75rem}

/* FAB */
.fab{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--emerald),var(--mint)); color:#fff; border:none;
  font-size:2rem; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2); z-index:9; cursor:pointer
}

/* Bottom sheets */
.sheet{
  position:fixed; left:0; right:0; bottom:0;
  transform:translateY(100%); transition:transform .2s ease-out; z-index:20
}
.sheet.open{transform:translateY(0)}
.sheet-body{
  background:#fff; border-top-left-radius:24px; border-top-right-radius:24px;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-2); border:1px solid rgba(0,0,0,.06);
  display:flex; flex-direction:column; max-height:min(90vh,640px); overflow:hidden
}
.sheet-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.sheet-head .x{background:transparent;border:none;font-size:1.6rem;cursor:pointer}
.sheet-form{
  display:flex; flex-direction:column; gap:10px; flex:1;
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:4px
}
.input-num{font-size:1.4rem;height:56px}
.segment{display:flex; background:rgba(0,0,0,.06); padding:4px; border-radius:999px; gap:4px}
.segment button{flex:1; padding:10px 12px; border-radius:999px; border:none; background:transparent; cursor:pointer}
.segment button.active{background:#fff; box-shadow:var(--shadow-1)}

/* KPI grid + mini-lists */
.kpi-grid{display:grid; gap:12px; margin:12px 0}
@media(min-width:720px){ .kpi-grid{grid-template-columns:repeat(3,1fr)} }
.kpi-label{font-size:.9rem; color:var(--muted)}
.kpi-val{font-weight:700; font-size:1.3rem}
.kpi-val.pos{color:var(--emerald)} .kpi-val.neg{color:#b94f49}
.kpi-sub{font-size:.85rem; color:var(--muted); margin-top:2px}
.mini-list{display:flex; flex-direction:column; gap:8px}
.mini-row{display:flex; align-items:center; gap:10px; padding:10px; border:1px solid rgba(0,0,0,.06); border-radius:12px; background:#fff}
.mini-ico{width:34px;height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.05)}
.mini-main{flex:1}
.mini-title{font-weight:600}
.mini-sub{font-size:.85rem; color:var(--muted)}
.mini-amt{font-weight:700}
.mini-amt.pos{color:var(--emerald)} .mini-amt.neg{color:var(--coral)}

/* Snackbar — non bloquante, visible seulement si .open */
.snackbar{
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(140px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#2a2f2c; color:#fff; padding:12px 14px;
  border-radius:12px; box-shadow:var(--shadow-2);
  z-index:998; pointer-events:none;
  opacity:0; transform:translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.snackbar.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.snackbar button{background:transparent; border:none; color:#9ee0c2; font-weight:600; cursor:pointer}
.snk-x{color:#fff; opacity:.7}
@media(min-width:720px){ .snackbar{ bottom:110px; } }

/* a11y focus */
:focus-visible{
  outline:3px solid rgba(111,196,165,.6);
  outline-offset:2px;
}

/* Touch targets */
button, .chip, .nav-item, .help-btn{ min-height:44px; }