/* ── THEME VARIABLES ──────────────────────────────────────────────────────── */
  :root {
    --bg: #0a0f1e;
    --bg2: #0f172a;
    --bg3: #111827;
    --border: #1f2937;
    --border2: #334155;
    --text: #f1f5f9;
    --text2: #e2e8f0;
    --text3: #94a3b8;
    --text4: #475569;
    --text5: #64748b;
    --card-bg: #111827;
    --input-bg: #0f172a;
    --nav-bg: rgba(10,15,30,.97);
    --sidebar-bg: #004d4d;
    --hero-bg: linear-gradient(135deg,#003333,#004d4d);
    --savings-bg: linear-gradient(135deg,#002929,#003333);
    --accent: #008080;
    --accent2: #4caf50;
    --accent-rgb: 0,128,128;
  }
  [data-theme="light"] {
    --bg: #f0f4f8;
    --bg2: #e8edf4;
    --bg3: #ffffff;
    --border: #d1dae6;
    --border2: #b8c5d6;
    --text: #0f172a;
    --text2: #1e293b;
    --text3: #475569;
    --text4: #64748b;
    --text5: #94a3b8;
    --card-bg: #ffffff;
    --input-bg: #f8fafc;
    --nav-bg: rgba(240,244,248,.97);
    --sidebar-bg: #004d4d;
    --hero-bg: linear-gradient(135deg,#e0f7f7,#e8f5e9);
    --savings-bg: linear-gradient(135deg,#f0fdf4,#e0f7f7);
    --accent: #008080;
    --accent2: #4caf50;
    --accent-rgb: 0,128,128;
  }

  /* ── PREMIUM THEMES ───────────────────────────────────────────────────────── */

  /* Emerald — lush deep green */
  [data-theme="emerald"] {
    --bg: #041a0f;
    --bg2: #071f12;
    --bg3: #0a2918;
    --border: #0f3d22;
    --border2: #1a5c35;
    --text: #ecfdf5;
    --text2: #d1fae5;
    --text3: #6ee7b7;
    --text4: #34d399;
    --text5: #10b981;
    --card-bg: #0a2918;
    --input-bg: #071f12;
    --nav-bg: rgba(4,26,15,.97);
    --sidebar-bg: #020f08;
    --hero-bg: linear-gradient(135deg,#064e3b,#065f46);
    --savings-bg: linear-gradient(135deg,#022c22,#064e3b);
    --accent: #10b981;
    --accent2: #059669;
    --accent-rgb: 16,185,129;
  }

  /* Burgundy — rich wine red */
  [data-theme="burgundy"] {
    --bg: #160508;
    --bg2: #1e080d;
    --bg3: #270b12;
    --border: #3d1019;
    --border2: #621828;
    --text: #fff1f2;
    --text2: #fecdd3;
    --text3: #fda4af;
    --text4: #fb7185;
    --text5: #f43f5e;
    --card-bg: #270b12;
    --input-bg: #1e080d;
    --nav-bg: rgba(22,5,8,.97);
    --sidebar-bg: #0d0305;
    --hero-bg: linear-gradient(135deg,#4c0519,#881337);
    --savings-bg: linear-gradient(135deg,#3b0764,#4c0519);
    --accent: #f43f5e;
    --accent2: #e11d48;
    --accent-rgb: 244,63,94;
  }

  /* Ocean — deep sea blue */
  [data-theme="ocean"] {
    --bg: #030d1a;
    --bg2: #051222;
    --bg3: #071829;
    --border: #0c2a47;
    --border2: #1a4a7a;
    --text: #f0f9ff;
    --text2: #e0f2fe;
    --text3: #7dd3fc;
    --text4: #38bdf8;
    --text5: #0ea5e9;
    --card-bg: #071829;
    --input-bg: #051222;
    --nav-bg: rgba(3,13,26,.97);
    --sidebar-bg: #020910;
    --hero-bg: linear-gradient(135deg,#0c4a6e,#1e3a5f);
    --savings-bg: linear-gradient(135deg,#1e1b4b,#0c4a6e);
    --accent: #38bdf8;
    --accent2: #0284c7;
    --accent-rgb: 56,189,248;
  }

  /* Rose — warm blush pink */
  [data-theme="rose"] {
    --bg: #160a10;
    --bg2: #1f0d17;
    --bg3: #2a101e;
    --border: #3d1530;
    --border2: #6b2150;
    --text: #fff0f6;
    --text2: #fce7f3;
    --text3: #f9a8d4;
    --text4: #f472b6;
    --text5: #ec4899;
    --card-bg: #2a101e;
    --input-bg: #1f0d17;
    --nav-bg: rgba(22,10,16,.97);
    --sidebar-bg: #0e060a;
    --hero-bg: linear-gradient(135deg,#831843,#9d174d);
    --savings-bg: linear-gradient(135deg,#4a044e,#831843);
    --accent: #f472b6;
    --accent2: #db2777;
    --accent-rgb: 244,114,182;
  }

  /* Purple — cosmic violet */
  [data-theme="purple"] {
    --bg: #0d0618;
    --bg2: #130822;
    --bg3: #190b2e;
    --border: #2e1065;
    --border2: #4c1d95;
    --text: #faf5ff;
    --text2: #ede9fe;
    --text3: #c4b5fd;
    --text4: #a78bfa;
    --text5: #8b5cf6;
    --card-bg: #190b2e;
    --input-bg: #130822;
    --nav-bg: rgba(13,6,24,.97);
    --sidebar-bg: #080412;
    --hero-bg: linear-gradient(135deg,#3b0764,#4c1d95);
    --savings-bg: linear-gradient(135deg,#1e1b4b,#3b0764);
    --accent: #a78bfa;
    --accent2: #7c3aed;
    --accent-rgb: 167,139,250;
  }

  /* Midnight — cool charcoal + gold */
  [data-theme="midnight"] {
    --bg: #0a0a0f;
    --bg2: #111118;
    --bg3: #18181f;
    --border: #27272f;
    --border2: #3f3f50;
    --text: #fefce8;
    --text2: #fef9c3;
    --text3: #fde68a;
    --text4: #fbbf24;
    --text5: #f59e0b;
    --card-bg: #18181f;
    --input-bg: #111118;
    --nav-bg: rgba(10,10,15,.97);
    --sidebar-bg: #07070b;
    --hero-bg: linear-gradient(135deg,#1c1200,#292400);
    --savings-bg: linear-gradient(135deg,#0f1a2e,#1c1200);
    --accent: #fbbf24;
    --accent2: #d97706;
    --accent-rgb: 251,191,36;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
  body{font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}
  input,select,textarea{background:var(--input-bg)!important;color:var(--text)!important;border:1.5px solid var(--border2)!important;border-radius:12px!important;padding:12px 14px!important;font-family:'Bricolage Grotesque',sans-serif!important;font-size:15px!important;width:100%;outline:none!important;transition:all .2s;-webkit-appearance:none}
  input:focus,select:focus{border-color:#008080!important;box-shadow:0 0 0 3px rgba(0,128,128,.12)!important}
  input[type=checkbox]{width:18px!important;height:18px!important;padding:0!important;accent-color:#008080;flex-shrink:0}
  input[type=file]{padding:8px!important;font-size:13px!important}
  select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:36px!important}
  .card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;box-shadow:0 2px 16px rgba(0,0,0,.06);transition:background .3s,box-shadow .3s}
  .gradient-text{background:linear-gradient(135deg,#008080,#4caf50);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 24px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:all .2s;font-family:'Bricolage Grotesque',sans-serif;white-space:nowrap;min-height:44px;touch-action:manipulation;-webkit-appearance:none;letter-spacing:.01em}
  .btn-primary{background:linear-gradient(135deg,#008080,#006666);color:#fff;box-shadow:0 4px 16px rgba(0,128,128,.35)}
  .btn-primary:hover{box-shadow:0 6px 20px rgba(0,128,128,.45);transform:translateY(-1px)}
  .btn-primary:active{transform:scale(.97)}
  .btn-secondary{background:var(--bg2);color:var(--text2);border:1.5px solid var(--border2)}
  .btn-ghost{background:transparent;color:var(--text3);border:1.5px solid var(--border2)}
  .btn-danger{background:#7f1d1d;color:#fca5a5;border:1px solid #991b1b;border-radius:999px}
  .btn-pink{background:linear-gradient(135deg,#008080,#4caf50);color:#fff;box-shadow:0 4px 16px rgba(0,128,128,.3)}
  .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.06);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom,0px)}
  .bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 2px 8px;cursor:pointer;border:none;background:transparent;color:var(--text4);font-size:10px;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;transition:all .2s;min-width:0;touch-action:manipulation}
  .bnav-item.active{color:#008080}
  .fab{width:52px;height:52px;background:linear-gradient(135deg,#008080,#006666);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,128,128,.5)}
  .sidebar{width:260px;background:var(--sidebar-bg);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:30;overflow-y:auto;--text:#fff;--text2:rgba(255,255,255,.9);--text3:rgba(255,255,255,.7);--text4:rgba(255,255,255,.5);--text5:rgba(255,255,255,.38);--border:rgba(255,255,255,.1);--bg2:rgba(255,255,255,.08)}
  .nav-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;cursor:pointer;font-size:14px;font-weight:600;color:rgba(255,255,255,.6);border:none;background:transparent;width:100%;text-align:left;transition:all .2s;font-family:'Bricolage Grotesque',sans-serif;touch-action:manipulation}
  .nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
  .nav-item.active{background:rgba(0,128,128,.35);color:#fff;border:1px solid rgba(0,128,128,.5)}
  .main-with-sidebar{margin-left:260px}
  .page{display:none;padding:1.25rem;padding-bottom:96px;max-width:800px;margin:0 auto}
  .page.active{display:block;animation:fadeUp .3s ease}
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);z-index:100;display:none;align-items:flex-end;justify-content:center}
  .modal-backdrop.open{display:flex}
  .modal{background:var(--card-bg);border:1px solid var(--border);border-radius:24px 24px 0 0;padding:1.5rem;width:100%;max-height:92vh;overflow-y:auto;animation:sheetUp .3s cubic-bezier(.34,1.56,.64,1)}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .modal-handle{width:40px;height:5px;background:#374151;border-radius:3px;margin:0 auto 1.25rem}
  .hero-card{background:var(--hero-bg);border:1px solid rgba(0,128,128,.2);border-radius:22px;padding:1.5rem;overflow:hidden;position:relative}
  .stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:1.375rem;box-shadow:0 2px 12px rgba(0,0,0,.05);transition:background .3s}
  .ai-bubble{background:linear-gradient(135deg,rgba(0,128,128,.07),rgba(76,175,80,.05));border:1px solid rgba(0,128,128,.18);border-radius:16px;padding:1rem}
  .progress-track{background:var(--border);border-radius:999px;overflow:hidden}
  .progress-fill{height:100%;border-radius:999px;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
  .badge{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
  .expense-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
  .expense-row:last-child{border-bottom:none}
  .cat-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
  .shimmer{background:linear-gradient(90deg,var(--bg2) 25%,var(--border) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
  @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
  .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 22px;border-radius:14px;font-size:14px;font-weight:700;z-index:200;opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  #lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:300;display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:1rem}
  #lightbox.open{display:flex}
  .loading-screen{position:fixed;inset:0;background:#004d4d;display:flex;align-items:center;justify-content:center;z-index:500;flex-direction:column;gap:1rem}
  .loading-dot{width:8px;height:8px;border-radius:50%;background:#008080;animation:ldot 1.2s infinite}
  .loading-dot:nth-child(2){animation-delay:.2s;background:#4caf50}
  .loading-dot:nth-child(3){animation-delay:.4s;background:#ffc107}
  @keyframes ldot{0%,80%,100%{transform:scale(0.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}
  ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1f2937;border-radius:2px}
  @media(min-width:768px){
    .bottom-nav{display:none}.sidebar{display:flex}.main-with-sidebar{margin-left:260px}
    .page{padding:2rem;padding-bottom:2rem;max-width:1000px}
    .modal-backdrop{align-items:center;padding:1.5rem}
    .modal{border-radius:24px;max-width:560px}
    @keyframes sheetUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
    .modal-handle{display:none}.toast{bottom:2rem}
  }
  @media(max-width:767px){html{font-size:14px}.sidebar{display:none}.main-with-sidebar{margin-left:0}}
  /* Folder/space tabs */
  .folder-tab{padding:5px 12px;border-radius:999px;border:1px solid var(--border2);background:transparent;color:var(--text4);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:'Bricolage Grotesque',sans-serif;transition:all .15s}
  .folder-tab:hover{background:var(--bg2);color:var(--text2)}
  .folder-tab-active{background:linear-gradient(135deg,rgba(0,128,128,.2),rgba(76,175,80,.15));color:#008080;border-color:rgba(0,128,128,.3)}
  .folder-tab-add{color:var(--text5);border-style:dashed;font-size:14px;padding:4px 10px}
  /* Folder wrap: each folder + its edit button */
  .folder-tab-wrap{display:flex;align-items:center;gap:3px;width:100%}
  .folder-tab-wrap .folder-tab{flex:1;border-radius:8px}
  .folder-edit-btn{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:12px;padding:4px 5px;border-radius:6px;opacity:0;transition:opacity .15s;color:var(--text5)}
  .folder-tab-wrap:hover .folder-edit-btn{opacity:1}
  @media(max-width:767px){.folder-edit-btn{opacity:1}}
  /* Spaces page cards */
  .folder-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:1.25rem;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;text-align:center}
  .folder-card:hover{border-color:rgba(0,128,128,.4);transform:translateY(-2px)}
  .folder-card-active{border-color:rgba(0,128,128,.5)!important;background:linear-gradient(135deg,rgba(0,128,128,.08),rgba(76,175,80,.05))}
  /* Dashboard spacing & card padding */
  #page-dashboard > div { margin-bottom: 1.5rem; }
  #page-dashboard .card { padding: 1.5rem; }
  .page { padding: 1.5rem; padding-bottom: 100px; }
  @media(min-width:768px){ .page { padding: 2.5rem; padding-bottom: 2.5rem; } }

  /* ── NEW ONBOARDING ──────────────────────────────────────────────────────── */
  .ob-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1.75rem; background:#ffffff; }
  .ob-btn-primary {
    background:linear-gradient(135deg,#16a34a,#0d9488);
    color:#fff; border:none; border-radius:14px;
    padding:14px 32px; font-size:15px; font-weight:800;
    font-family:'Bricolage Grotesque',sans-serif;
    cursor:pointer; transition:transform .15s, box-shadow .15s;
    box-shadow:0 4px 20px rgba(22,163,74,.35);
  }
  .ob-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(22,163,74,.45); }
  .ob-btn-choice {
    padding:14px 20px; border:2px solid #e2e8f0; border-radius:14px;
    font-size:15px; font-weight:700;
    font-family:'Bricolage Grotesque',sans-serif;
    background:#fff; color:#111827; cursor:pointer; transition:all .2s;
    width:100%;
  }
  .ob-btn-choice:hover,.ob-btn-choice.selected { border-color:#16a34a; background:#f0fdf4; color:#16a34a; }
  .ob-feature-card {
    display:flex; align-items:center; gap:1rem;
    padding:1rem 1.25rem; background:#f8fafc;
    border:1.5px solid #e2e8f0; border-radius:16px;
    transition:opacity .5s ease, transform .5s ease;
    width:100%;
  }
  .ob-feat-icon { font-size:1.75rem; flex-shrink:0; }
  .ob-feat-title { font-size:15px; font-weight:800; color:#111827; margin:0 0 2px; }
  .ob-feat-sub { font-size:13px; color:#64748b; line-height:1.5; margin:0; }
  .ob-goal-pill {
    padding:12px 8px; border:2px solid #e2e8f0; border-radius:12px;
    font-size:13px; font-weight:700;
    font-family:'Bricolage Grotesque',sans-serif;
    background:#fff; color:#374151; cursor:pointer; transition:all .2s;
    text-align:center;
  }
  .ob-goal-pill:hover,.ob-goal-pill.selected { border-color:#16a34a; background:#f0fdf4; color:#16a34a; }
  .ob-input {
    width:100%; padding:13px 16px; border:2px solid #e2e8f0;
    border-radius:12px; font-size:16px;
    font-family:'Bricolage Grotesque',sans-serif;
    color:#111827; background:#fafafa; outline:none;
    transition:border-color .2s; box-sizing:border-box;
  }
  .ob-input:focus { border-color:#16a34a; }
  .ob-label {
    display:block; font-size:11px; font-weight:700; color:#94a3b8;
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;
  }