:root{
  --bg:#0b0f1a;
  --card:#10172a;
  --text:#e8edf7;
  --muted:#98a2b3;
  --line:rgba(255,255,255,.08);
  --pos:#41d17b;
  --neg:#ff6b6b;
  --accent:#7c5cff;
  --warn:#ffb020;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --r:18px;
  --safe-b: env(safe-area-inset-bottom);
  --safe-t: env(safe-area-inset-top);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 600px at 100% 10%, rgba(65,209,123,.18), transparent 55%),
              var(--bg);
  color:var(--text);
}

.app{min-height:100%; display:flex; flex-direction:column;}

.topbar{
  position:sticky; top:0;
  padding: calc(12px + var(--safe-t)) 14px 12px;
  backdrop-filter: blur(10px);
  background: rgba(11,15,26,.65);
  border-bottom: 1px solid var(--line);
  z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
}

.brand{display:flex; gap:10px; align-items:center;}
.dot{
  width:12px; height:12px; border-radius:999px;
  background: linear-gradient(180deg, var(--accent), rgba(124,92,255,.25));
  box-shadow: 0 0 0 6px rgba(124,92,255,.12);
}
.title{font-weight:700; letter-spacing:.2px}
.subtitle{font-size:12px; color:var(--muted); margin-top:2px}

.main{
  padding: 14px 14px 110px;
  /* Correction Mobile : Espace supplémentaire pour éviter que le menu cache le contenu */
  padding-bottom: calc(130px + var(--safe-b));
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.grid{
  display:grid; grid-template-columns: 1fr; gap:12px;
}
@media(min-width:900px){
  .grid{grid-template-columns: 1fr 1fr;}
}

.card{
  background: linear-gradient(180deg, rgba(16,23,42,.92), rgba(16,23,42,.75));
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px;
}
.card-inner{box-shadow:none; background: rgba(255,255,255,.02);}
.card-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px;}

.kpi-label{font-size:12px; color:var(--muted);}
.kpi-value{font-size:28px; font-weight:800; margin-top:4px;}
.small-muted{font-size:12px; color:var(--muted)}
.mono{font-variant-numeric: tabular-nums; font-family: monospace;}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)}

.kpi-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px}
.kpi-mini{background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius: 14px; padding:10px;}
.kpi-mini-label{font-size:11px; color:var(--muted)}
.kpi-mini-value{margin-top:4px; font-weight:700}

.pill{
  font-size:12px; background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.25);
  color: var(--text); padding: 8px 10px; border-radius: 999px; white-space: nowrap;
}

.btn, .ghost{
  border-radius: 14px; padding: 10px 12px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--text); cursor:pointer;
}
.btn:hover, .ghost:hover{background: rgba(255,255,255,.06)}
.btn.primary{background: rgba(124,92,255,.18); border-color: rgba(124,92,255,.35)}
.btn.danger{background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.25)}
.ghost{padding: 8px 10px; font-size: 13px}

.row{display:flex; gap:10px; flex-wrap:wrap}
.month-nav{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.chart-wrap{background: rgba(255,255,255,.02); border:1px solid var(--line); border-radius: var(--r); padding: 10px;}

.goals{display:grid; gap:12px; margin: 10px 0 12px}
.goal-top{display:flex; justify-content:space-between; gap:10px; font-size:13px}
.progress{height:10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid var(--line); overflow:hidden}
.bar{height:100%; width:0%; background: linear-gradient(90deg, rgba(65,209,123,.9), rgba(124,92,255,.9));}

.table{border:1px solid var(--line); border-radius: var(--r); overflow:hidden}
.thead, .trow{gap:10px; padding: 10px 12px; align-items:center; display:grid;}
.thead{background: rgba(255,255,255,.04); font-size:12px; color: var(--muted);}
.tbody .trow{border-top: 1px solid var(--line); background: rgba(255,255,255,.01);}
.right{text-align:right}

.thead-tx, .trow-tx{grid-template-columns: 110px 1fr 140px 110px 140px 100px;}
.thead-inv, .trow-inv{grid-template-columns: 120px 1fr 140px 110px;}
.thead-cat, .trow-cat{grid-template-columns: 1fr 160px;}
@media(max-width:720px){
  .thead-tx, .trow-tx{grid-template-columns: 90px 1fr 110px 90px 120px 80px;}
}

.view.hidden{display:none}

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  padding: 10px 10px calc(10px + var(--safe-b));
  background: rgba(11,15,26,.72); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); z-index: 30;
  display:flex; gap:8px;
}
.nav-item{
  flex:1; border-radius: 14px; border:1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--text);
  padding: 10px 8px; cursor:pointer; font-size: 13px;
}
.nav-item.active{background: rgba(124,92,255,.18); border-color: rgba(124,92,255,.35);}

.fab{
  position:fixed; right: 14px; bottom: calc(78px + var(--safe-b));
  width: 56px; height: 56px; border-radius: 999px;
  border:1px solid rgba(124,92,255,.4);
  background: linear-gradient(180deg, rgba(124,92,255,.95), rgba(124,92,255,.55));
  color: white; font-size: 28px; line-height: 0; cursor:pointer;
  box-shadow: 0 18px 40px rgba(124,92,255,.25); z-index: 40;
}
.fab:active{transform: translateY(1px)}

.modal.hidden{display:none}
.modal{position:fixed; inset:0; z-index: 50; display:flex; align-items:flex-end; justify-content:center;}
.backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55);}
.sheet{
  position:relative; width: min(720px, 100%);
  border-radius: 22px 22px 0 0; background: rgba(16,23,42,.96);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 14px; padding-bottom: calc(18px + var(--safe-b)); z-index: 2;
}
.sheet-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 10px;}
.sheet-title{font-weight:800}

.form{display:grid; gap:12px}
.field label{display:block; font-size:12px; color: var(--muted); margin-bottom:6px}
.field input, .field select{
  width:100%; border-radius: 14px; border:1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--text); padding: 12px; outline:none;
}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sep{height:1px; background: var(--line); margin: 10px 0}
.text p{margin: 0 0 10px; line-height:1.45}
.alloc, .loans{display:grid; gap:10px}
.alloc-row, .loan-card{
  padding: 10px 12px; border:1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02);
}
.alloc-row{display:flex; justify-content:space-between; gap:10px;}
.input-inline{
  flex:1; border-radius: 14px; border:1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--text); padding: 10px 12px; outline:none;
}
.list{display:grid; gap:8px; margin-top:10px}
.list-item{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.02);
}
.badge{
  font-size:12px; padding: 4px 8px; border-radius: 999px;
  border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted);
}
.grid-2{display:grid; grid-template-columns: 1fr; gap:10px;}
@media(min-width:900px){.grid-2{grid-template-columns: 1fr 1fr;}}

.chat{display:grid; gap:10px}
.chat-log{
  height: 320px; overflow:auto; border:1px solid var(--line); border-radius: var(--r);
  padding: 10px; background: rgba(255,255,255,.02);
}
.msg{margin:0 0 10px; line-height:1.45}
.msg .who{font-weight:800}
.chat-input{display:flex; gap:10px}
.chat-input input{
  flex:1; border-radius: 14px; border:1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--text); padding: 12px; outline:none;
}
.budgetbar{
  border:1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.02);
}
.budgetbar-top{display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:8px}
.budgetbar-name{font-weight:700}
.budgetbar-meta{font-size:12px; color:var(--muted)}
.budgetbar-track{
  height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid var(--line); overflow:hidden;
}
.budgetbar-fill{
  height:100%; width:0%; background: linear-gradient(90deg, rgba(124,92,255,.9), rgba(255,176,32,.9));
}