/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  --bg:       #080c14;
  --bg-card:  rgba(255,255,255,0.055);
  --accent:   #00e5ff;
  --accent2:  #7c4dff;
  --gold:     #ffd54f;
  --danger:   #ff4757;
  --success:  #00e676;
  --warn:     #ffa726;
  --text:     #f0f4ff;
  --muted:    #8899bb;
  --border:   rgba(0,229,255,0.15);
  --glow:     0 0 28px rgba(0,229,255,0.22);
  --r:        16px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 65% 55% at 10% 15%, rgba(0,229,255,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 55% 65% at 90% 85%, rgba(124,77,255,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(255,213,79,0.03) 0%, transparent 70%);
}

/* ══════════════════════════════════════
   LOGIN
══════════════════════════════════════ */
#user-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(8,12,20,0.97);
  backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
}

.login-box {
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:24px; padding:48px 40px;
  width:90%; max-width:420px; text-align:center;
  box-shadow:0 0 80px rgba(0,229,255,0.1), 0 40px 80px rgba(0,0,0,0.5);
  animation:fadeUp .5s ease;
}

.login-logo {
  font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:4px;
}

.login-sub { color:var(--muted); font-size:.82rem; margin-bottom:32px; }

.login-box input {
  width:100%; padding:13px 16px; margin-bottom:12px;
  border-radius:10px; border:1px solid var(--border);
  background:rgba(0,0,0,0.35); color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:.95rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.login-box input:focus { border-color:var(--accent); box-shadow:var(--glow); }

/* ══════════════════════════════════════
   NAVIGATION PRINCIPALE
══════════════════════════════════════ */
#main-nav {
  position:sticky; top:0; z-index:500;
  background:rgba(8,12,20,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  display:none;
}

.nav-inner {
  max-width:900px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:58px;
}

.nav-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.15rem;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.nav-tabs {
  display:flex; gap:4px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.nav-tabs::-webkit-scrollbar { display:none; }

.nav-tab {
  padding:7px 14px; border-radius:99px;
  font-size:.8rem; font-weight:500; white-space:nowrap;
  cursor:pointer; border:1px solid transparent;
  background:transparent; color:var(--muted);
  transition:all .2s;
}
.nav-tab.active { background:var(--accent); color:#000; font-weight:600; border-color:var(--accent); }
.nav-tab:hover:not(.active) { color:var(--text); border-color:var(--border); }

.nav-user {
  display:flex; align-items:center; gap:10px;
  font-size:.8rem; color:var(--muted);
}

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.app-page {
  display:none; width:92%; max-width:860px;
  margin:2rem auto 5rem; position:relative; z-index:1;
}
.app-page.active { display:block; animation:fadeUp .35s ease; }

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px; padding:26px;
  margin-bottom:20px;
  backdrop-filter:blur(18px);
  transition:box-shadow .3s, transform .3s;
}
.card:hover { box-shadow:var(--glow); transform:translateY(-2px); }

.card-title {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:.9rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent);
  margin-bottom:18px; display:flex; align-items:center; gap:8px;
}

/* ══════════════════════════════════════
   GRID HELPERS
══════════════════════════════════════ */
.two-col   { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

/* ══════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════ */
.field { margin-bottom:12px; }
.field label { display:block; font-size:.72rem; color:var(--muted); margin-bottom:5px; letter-spacing:.05em; text-transform:uppercase; }

.field input,
.field select,
.field textarea {
  width:100%; padding:11px 14px;
  border-radius:10px; border:1px solid var(--border);
  background:rgba(0,0,0,0.38); color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:.88rem;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,
.field select:focus { border-color:var(--accent); box-shadow:var(--glow); }
.field select option { background:#141824; }

/* ══════════════════════════════════════
   BOUTONS
══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:11px 18px; border-radius:10px; border:none;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  font-size:.88rem; font-weight:500;
  transition:all .25s ease; white-space:nowrap;
}
.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; width:100%;
}
.btn-primary:hover { box-shadow:0 0 22px rgba(0,229,255,0.4); transform:scale(1.02); }
.btn-danger  { background:linear-gradient(135deg,var(--danger),#c0392b); color:#fff; }
.btn-success { background:#1D6F42; color:#fff; }
.btn-gold    { background:linear-gradient(135deg,var(--gold),#ff8f00); color:#000; }
.btn-ghost   { background:rgba(255,255,255,0.07); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { background:rgba(255,255,255,0.12); }
.btn-sm { padding:7px 12px; font-size:.78rem; }
.btn-full { width:100%; }

/* ══════════════════════════════════════
   STATS
══════════════════════════════════════ */
.stats-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:16px 0; }
.stat-card {
  background:linear-gradient(135deg,rgba(0,229,255,0.07),rgba(124,77,255,0.07));
  border:1px solid var(--border);
  border-radius:14px; padding:14px 12px; text-align:center;
}
.stat-label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.stat-value { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:700; margin-top:4px; word-break:break-all; }
.stat-value.pos { color:var(--success); }
.stat-value.war { color:var(--warn); }
.stat-value.neg { color:var(--danger); }
.stat-value.gld { color:var(--gold); }

/* ══════════════════════════════════════
   PROGRESS
══════════════════════════════════════ */
.prog-wrap { margin:10px 0 16px; }
.prog-label { font-size:.72rem; color:var(--muted); margin-bottom:6px; display:flex; justify-content:space-between; }
.prog-bg { height:7px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; }
.prog-fill {
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--success),var(--accent));
  transition:width .5s ease, background .4s;
}
.prog-fill.warn { background:linear-gradient(90deg,var(--warn),#ff6d00); }
.prog-fill.over { background:linear-gradient(90deg,var(--danger),#ff1744); }

/* ══════════════════════════════════════
   BUDGET CHIPS (multi-budget selector)
══════════════════════════════════════ */
.budget-chips {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;
}
.budget-chip {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:99px; cursor:pointer;
  border:1px solid var(--border); background:rgba(255,255,255,0.05);
  font-size:.8rem; transition:all .2s;
}
.budget-chip.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }
.budget-chip .chip-del {
  background:none; border:none; cursor:pointer;
  color:inherit; font-size:.75rem; line-height:1;
  padding:0 0 0 2px; opacity:.7;
}
.budget-chip .chip-del:hover { opacity:1; }
.budget-chip .chip-type { font-size:.65rem; opacity:.7; }

.period-badge {
  display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:.65rem; font-weight:600; background:rgba(0,229,255,0.15);
  color:var(--accent); border:1px solid rgba(0,229,255,0.2);
}

/* ══════════════════════════════════════
   EXPENSE LIST
══════════════════════════════════════ */
.expense-item {
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:12px; padding:13px 16px;
  margin-bottom:9px;
  display:grid; grid-template-columns:1fr auto auto auto auto;
  align-items:center; gap:12px;
  transition:background .2s, transform .2s;
}
.expense-item:hover { background:rgba(255,255,255,0.07); transform:translateX(4px); }
.expense-item .e-name { font-weight:500; font-size:.9rem; }
.expense-item .e-meta { font-size:.7rem; color:var(--muted); margin-top:2px; }
.expense-item .e-amount {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:.88rem; color:var(--accent); white-space:nowrap;
}
.icon-btn {
  background:transparent; border:none; cursor:pointer;
  color:var(--muted); font-size:.9rem; padding:4px;
  transition:color .2s, transform .2s;
}
.icon-btn.edit-btn:hover { color:var(--accent); transform:scale(1.2); }
.icon-btn.del-btn:hover  { color:var(--danger);  transform:scale(1.2); }

/* ══════════════════════════════════════
   FILTER BAR
══════════════════════════════════════ */
.filter-bar {
  display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;
}
.filter-bar input, .filter-bar select {
  flex:1; min-width:110px; padding:9px 12px;
  border-radius:9px; border:1px solid var(--border);
  background:rgba(0,0,0,0.35); color:var(--text);
  font-size:.82rem; outline:none; font-family:'DM Sans',sans-serif;
}

/* ══════════════════════════════════════
   CHART TABS
══════════════════════════════════════ */
.tabs { display:flex; gap:6px; flex-wrap:wrap; }
.tab {
  padding:7px 16px; border-radius:99px; font-size:.78rem;
  cursor:pointer; border:1px solid var(--border);
  background:transparent; color:var(--muted); transition:all .2s;
}
.tab.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }

/* ══════════════════════════════════════
   SAVINGS GOALS
══════════════════════════════════════ */
.goal-card {
  background:linear-gradient(135deg,rgba(255,213,79,0.07),rgba(255,143,0,0.07));
  border:1px solid rgba(255,213,79,0.2);
  border-radius:14px; padding:16px; margin-bottom:12px;
}
.goal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.goal-name { font-weight:600; font-size:.92rem; }
.goal-amounts { font-size:.75rem; color:var(--muted); margin-top:2px; }
.goal-prog-bg { height:8px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; }
.goal-prog-fill {
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--gold),#ff8f00);
  transition:width .5s ease;
}
.goal-pct { font-family:'Syne',sans-serif; font-size:.85rem; font-weight:700; color:var(--gold); }

/* ══════════════════════════════════════
   HISTORY / ARCHIVE
══════════════════════════════════════ */
.history-item {
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:14px; padding:16px;
  margin-bottom:12px; cursor:pointer;
  transition:background .2s, transform .2s;
}
.history-item:hover { background:rgba(255,255,255,0.07); transform:translateX(3px); }
.history-item-header { display:flex; justify-content:space-between; align-items:center; }
.history-item-name { font-weight:600; font-size:.95rem; }
.history-item-date { font-size:.72rem; color:var(--muted); }
.history-item-stats { display:flex; gap:20px; margin-top:8px; }
.history-stat { font-size:.78rem; color:var(--muted); }
.history-stat span { font-family:'Syne',sans-serif; font-weight:700; color:var(--text); margin-left:4px; }

/* Comparaison bar */
.compare-bar-wrap { margin-top:6px; }
.compare-bar {
  height:4px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,0.06);
}
.compare-bar-fill { height:100%; border-radius:99px; transition:width .6s ease; }

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(8,12,20,0.88); backdrop-filter:blur(12px);
  align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
.modal-box {
  background:#111829; border:1px solid var(--border);
  border-radius:20px; padding:32px; width:92%; max-width:480px;
  box-shadow:0 0 60px rgba(0,229,255,0.12), 0 40px 80px rgba(0,0,0,0.5);
  animation:fadeUp .3s ease;
}
.modal-title {
  font-family:'Syne',sans-serif; font-weight:700; font-size:1.1rem;
  margin-bottom:20px; color:var(--accent);
}
.modal-close { float:right; background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.2rem; }

/* ══════════════════════════════════════
   EXPORT BUTTONS
══════════════════════════════════════ */
.export-row { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.export-row .btn { flex:1; min-width:100px; }

/* ══════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════ */
.empty-state { text-align:center; padding:36px 20px; color:var(--muted); font-size:.88rem; }
.empty-state i { font-size:2.2rem; margin-bottom:12px; display:block; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
#toast {
  position:fixed; bottom:28px; left:50%; z-index:9999;
  transform:translateX(-50%) translateY(60px);
  background:rgba(14,22,40,0.97); border:1px solid var(--border);
  color:var(--text); padding:11px 22px; border-radius:99px;
  font-size:.82rem; opacity:0;
  transition:transform .35s cubic-bezier(.175,.885,.32,1.275), opacity .3s;
  white-space:nowrap; max-width:90vw; text-align:center;
}
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#toast.success { border-color:var(--success); }
#toast.error   { border-color:var(--danger); }
#toast.info    { border-color:var(--accent); }

/* ══════════════════════════════════════
   PWA INSTALL BANNER
══════════════════════════════════════ */
#pwa-banner {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:linear-gradient(135deg,rgba(0,229,255,0.12),rgba(124,77,255,0.12));
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  padding:14px 20px; z-index:4000;
  align-items:center; justify-content:space-between; gap:12px;
}
#pwa-banner.show { display:flex; animation:slideUp .4s ease; }
.pwa-text { font-size:.82rem; }
.pwa-text strong { color:var(--accent); }
.pwa-actions { display:flex; gap:8px; }

/* ══════════════════════════════════════
   UPLOAD ZONE (CSV)
══════════════════════════════════════ */
.upload-zone {
  border:2px dashed var(--border); border-radius:14px;
  padding:32px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s;
  margin-bottom:16px;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color:var(--accent); background:rgba(0,229,255,0.04);
}
.upload-zone i { font-size:2rem; color:var(--muted); margin-bottom:8px; }
.upload-zone p { font-size:.85rem; color:var(--muted); }

/* ══════════════════════════════════════
   CSV PREVIEW TABLE
══════════════════════════════════════ */
.csv-table { width:100%; border-collapse:collapse; font-size:.82rem; margin-top:12px; }
.csv-table th {
  background:rgba(0,229,255,0.1); color:var(--accent);
  padding:8px 10px; text-align:left; font-weight:600;
  border-bottom:1px solid var(--border);
}
.csv-table td { padding:7px 10px; border-bottom:1px solid rgba(255,255,255,0.04); }
.csv-table tr:hover td { background:rgba(255,255,255,0.03); }

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes slideUp {
  from { transform:translateY(100%); } to { transform:translateY(0); }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 640px) {
  .two-col, .three-col { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .export-row { flex-direction:column; }
  .expense-item { grid-template-columns:1fr auto auto auto; }
  .expense-item .e-amount { display:none; }
  .login-box { padding:32px 24px; }
  .nav-tabs { max-width:calc(100vw - 180px); }
}

/* ══════════════════════════════════════
   LANG TOGGLE
══════════════════════════════════════ */
.lang-toggle {
  font-size:.78rem; padding:6px 12px; 
  border:1px solid var(--border);
  transition:all .2s;
}
.lang-toggle:hover { border-color:var(--accent); color:var(--accent); }