/* ══════════════════════════════════════════
   FinanzApp — styles.css
══════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }
html { font-size:16px; scroll-behavior:smooth }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition: background .3s, color .3s;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:3px; height:3px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px }

/* ══ SCREENS ══ */
.screen { display:none; min-height:100vh; animation:fadeIn .22s ease }
.screen.active { display:flex; flex-direction:column }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }

/* ══ AUTH ══ */
#s-login, #s-register {
  align-items:center; justify-content:center;
  background:var(--bg); position:relative; overflow:hidden; padding:20px;
}
#s-login::before { content:''; position:absolute; width:min(600px,90vw); height:min(600px,90vw); background:radial-gradient(circle,rgba(127,108,245,.13) 0%,transparent 70%); top:-15%; left:-10%; border-radius:50%; pointer-events:none }
#s-login::after  { content:''; position:absolute; width:min(400px,70vw);  height:min(400px,70vw);  background:radial-gradient(circle,rgba(45,212,160,.07) 0%,transparent 70%);  bottom:-10%; right:-10%; border-radius:50%; pointer-events:none }
.auth-card { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:clamp(24px,5vw,44px); width:100%; max-width:440px; position:relative; z-index:1; box-shadow:var(--shadow) }
.auth-logo { display:flex; align-items:center; gap:12px; margin-bottom:28px; justify-content:center }
.logo-icon { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--green)); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0 }
.logo-icon-img { width:52px; height:52px; border-radius:14px; flex-shrink:0; object-fit:cover }
.logo-txt { font-size:24px; font-weight:800; letter-spacing:-1px }
.logo-txt span { color:var(--accent) }
.f-group { margin-bottom:14px }
.f-group label { display:block; font-size:11px; font-weight:700; color:var(--text2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.6px }
.f-input { width:100%; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; padding:13px 16px; color:var(--text); font-size:15px; font-family:'Plus Jakarta Sans',sans-serif; outline:none; transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none }
.f-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,108,245,.15) }
.f-input option { background:var(--bg3) }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.g2 .span2 { grid-column:1/-1 }
.btn-primary { width:100%; background:linear-gradient(135deg,var(--accent),var(--accent-d)); border:none; border-radius:10px; padding:15px; color:#fff; font-size:15px; font-weight:700; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; transition:opacity .2s,transform .15s; letter-spacing:.2px }
.btn-primary:hover { opacity:.9 }
.btn-primary:active { transform:scale(.97) }
.auth-foot { text-align:center; margin-top:16px; font-size:13px; color:var(--text2) }
.auth-foot a { color:var(--accent); cursor:pointer; font-weight:600 }

/* ══ APP SHELL ══ */
#s-app { background:var(--bg) }

/* ── Topbar ── */
.topbar {
  height:64px; background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; padding:0 16px;
  position:sticky; top:0; z-index:200; flex-shrink:0;
  transition:background .3s,border-color .3s;
}
.tb-logo { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; letter-spacing:-.5px; flex-shrink:0 }
.tb-logo .dot { width:7px; height:7px; background:var(--accent); border-radius:50% }
.tb-logo-img { height:32px; border-radius:8px; display:none; object-fit:contain }
.tb-month { display:flex; align-items:center; gap:5px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:5px 10px; margin-left:auto }
.tb-month button { background:none; border:none; color:var(--text2); cursor:pointer; font-size:16px; padding:2px 4px; transition:color .15s; line-height:1 }
.tb-month button:hover { color:var(--text) }
.tb-month span { font-size:11px; font-weight:700; white-space:nowrap; min-width:96px; text-align:center; color:var(--text) }
.tb-right { display:flex; align-items:center; gap:8px }
.tb-clock { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text2); background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:5px 9px; white-space:nowrap; display:none }
@media(min-width:640px) { .tb-clock { display:block } }

/* Theme toggle button */
.theme-toggle { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:6px 9px; cursor:pointer; font-size:16px; color:var(--text2); transition:all .2s; line-height:1 }
.theme-toggle:hover { background:var(--bg4); color:var(--text) }

.tb-user { display:flex; align-items:center; gap:8px; cursor:pointer; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:5px 10px 5px 6px; position:relative; flex-shrink:0 }
.tb-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--green)); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0 }
.tb-name { font-size:12px; font-weight:600; display:none; color:var(--text) }
@media(min-width:480px) { .tb-name { display:block } }
.user-dd { display:none; position:absolute; top:calc(100% + 8px); right:0; background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:6px; min-width:180px; z-index:300; box-shadow:var(--shadow) }
.user-dd.open { display:block }
.dd-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--text); transition:background .15s }
.dd-item:hover { background:var(--bg3) }
.dd-item.danger { color:var(--red) }
.dd-sep { height:1px; background:var(--border); margin:4px 0 }

/* ── Layout ── */
.app-layout { display:flex; flex:1; overflow:hidden; position:relative }

/* ── Sidebar ── */
.sidebar { width:220px; background:var(--bg2); border-right:1px solid var(--border); padding:16px 10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex-shrink:0; transition:background .3s }
@media(max-width:1023px) { .sidebar { display:none } }
.nav-sec { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); padding:10px 10px 4px; margin-top:4px }
.nav-item { display:flex; align-items:center; gap:9px; padding:10px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; color:var(--text2); transition:all .15s; border:1px solid transparent }
.nav-item:hover { background:var(--bg3); color:var(--text) }
.nav-item.active { background:rgba(127,108,245,.12); color:var(--accent); border-color:rgba(127,108,245,.2) }
.nav-icon { font-size:15px; flex-shrink:0; width:18px; text-align:center }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:20px; display:none }
.nav-badge.show { display:inline-block }

/* ── Main scroll ── */
.main-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 16px 100px }
@media(min-width:640px)  { .main-scroll { padding:24px 24px 40px } }
@media(min-width:1024px) { .main-scroll { padding:28px 32px 40px } }

/* ── Bottom Nav ── */
.bottom-nav { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--bg2); border-top:1px solid var(--border); padding:0 4px; padding-bottom:env(safe-area-inset-bottom,0); height:72px; transition:background .3s }
@media(min-width:1024px) { .bottom-nav { display:none } }
.bn-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; font-size:10px; font-weight:600; color:var(--text3); transition:color .15s; padding:8px 2px; min-width:0; border:none; background:none; font-family:'Plus Jakarta Sans',sans-serif; position:relative }
.bn-item .bn-icon { font-size:20px; line-height:1 }
.bn-item.active { color:var(--accent) }
.bn-item.active .bn-icon { transform:scale(1.12) }
.bn-badge { position:absolute; top:6px; right:calc(50% - 16px); background:var(--red); color:#fff; font-size:9px; font-weight:700; padding:1px 5px; border-radius:10px; display:none; min-width:16px; text-align:center }
.bn-badge.show { display:block }

/* ══ SECTIONS ══ */
.sec { display:none }
.sec.active { display:block }
.page-h { margin-bottom:20px }
.page-h h1 { font-size:clamp(18px,4vw,24px); font-weight:800; letter-spacing:-.5px; color:var(--text) }
.page-h p { font-size:13px; color:var(--text2); margin-top:4px }

/* ── Tabs ── */
.tabs-wrap { display:flex; gap:4px; background:var(--bg3); border-radius:12px; padding:4px; margin-bottom:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.tabs-wrap::-webkit-scrollbar { display:none }
.tab-btn { padding:8px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text2); transition:all .15s; white-space:nowrap; background:none; border:none; font-family:'Plus Jakarta Sans',sans-serif }
.tab-btn.active { background:var(--bg2); color:var(--text); box-shadow:0 1px 6px rgba(0,0,0,.25) }
.tab-pane { display:none }
.tab-pane.active { display:block }

/* ── Cards ── */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:clamp(16px,3vw,24px); transition:background .3s,border-color .3s }
.form-card { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:clamp(16px,3vw,24px); transition:background .3s }
.card + .card, .card + .form-card, .form-card + .card { margin-top:16px }
.card-title { font-size:14px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; color:var(--text) }
.card-title .ci { font-size:17px }

/* ── Stats ── */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px }
@media(min-width:640px) { .stats-grid { grid-template-columns:repeat(4,1fr) } }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:16px; position:relative; overflow:hidden; transition:background .3s }
.stat-card::after { content:''; position:absolute; top:-28px; right:-28px; width:80px; height:80px; border-radius:50%; opacity:.07 }
.stat-card.inc::after { background:var(--green) }
.stat-card.exp::after { background:var(--red) }
.stat-card.dbt::after { background:var(--amber) }
.stat-card.bal::after { background:var(--accent) }
.stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); margin-bottom:6px }
.stat-val { font-size:clamp(15px,3.5vw,22px); font-weight:700; font-family:'JetBrains Mono',monospace; letter-spacing:-.5px }
.stat-val.c-inc { color:var(--green) }
.stat-val.c-exp { color:var(--red) }
.stat-val.c-dbt { color:var(--amber) }
.stat-val.c-bal { color:var(--accent) }
.stat-sub { font-size:11px; color:var(--text3); margin-top:5px }

/* ── Form grid ── */
.form-grid { display:grid; grid-template-columns:1fr; gap:14px }
@media(min-width:500px) { .form-grid { grid-template-columns:repeat(2,1fr) } }
@media(min-width:900px) { .form-grid { grid-template-columns:repeat(3,1fr) } }
.fg-full { grid-column:1/-1 }
.fg { display:flex; flex-direction:column; gap:6px }
.fg-label { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.5px }
.fi { background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:11px 14px; color:var(--text); font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; outline:none; width:100%; transition:border-color .2s,background .3s; -webkit-appearance:none; appearance:none }
.fi:focus { border-color:var(--accent) }
.fi option { background:var(--bg3) }

/* ── Buttons ── */
.btn-add { background:linear-gradient(135deg,var(--accent),var(--accent-d)); border:none; border-radius:8px; padding:11px 20px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; transition:opacity .2s,transform .15s; white-space:nowrap }
.btn-add:hover { opacity:.88 }
.btn-add:active { transform:scale(.97) }
.btn-sm { background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:5px 10px; color:var(--text2); font-size:12px; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; transition:all .15s }
.btn-sm:hover { background:var(--bg4); color:var(--text) }
.btn-del { background:rgba(244,111,111,.1)!important; border-color:rgba(244,111,111,.25)!important; color:var(--red)!important }
.btn-del:hover { background:rgba(244,111,111,.2)!important }
.btn-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }

/* ── Item cards (replaces tables on mobile) ── */
.item-list { display:flex; flex-direction:column; gap:10px }
.item-row { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px; transition:background .3s }
.item-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px }
.item-row-desc { font-size:14px; font-weight:600; color:var(--text) }
.item-row-amount { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; white-space:nowrap }
.item-row-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center }

/* ── Pills ── */
.pill { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap }
.pill.g  { background:rgba(45,212,160,.12);  color:var(--green) }
.pill.r  { background:rgba(244,111,111,.12); color:var(--red)   }
.pill.a  { background:rgba(245,185,66,.12);  color:var(--amber) }
.pill.b  { background:rgba(91,164,245,.12);  color:var(--blue)  }
.pill.p  { background:rgba(127,108,245,.12); color:var(--accent-l) }
.pill.pk { background:rgba(232,121,184,.12); color:var(--pink)  }

/* ── Progress ── */
.prog { height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; margin-top:8px }
.prog-fill { height:100%; border-radius:3px; transition:width .6s }
.prog-fill.g { background:var(--green) }
.prog-fill.r { background:var(--red)   }
.prog-fill.a { background:var(--amber) }
.prog-fill.p { background:var(--accent)}

/* ── Misc ── */
.sep { height:1px; background:var(--border); margin:16px 0 }
.total-row { display:flex; align-items:center; justify-content:space-between; padding-top:14px }
.total-row span:first-child { font-size:13px; color:var(--text2) }
.total-val { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700 }
.mb16 { margin-bottom:16px }
.mt8  { margin-top:8px  }
.mt12 { margin-top:12px }
.mt16 { margin-top:16px }
.mt20 { margin-top:20px }
.flex   { display:flex; align-items:center; gap:10px }
.flex-b { display:flex; align-items:center; justify-content:space-between; gap:8px }
.mono   { font-family:'JetBrains Mono',monospace }
.c-g  { color:var(--green)  }
.c-r  { color:var(--red)    }
.c-a  { color:var(--amber)  }
.c-p  { color:var(--accent-l) }
.small  { font-size:11px; color:var(--text3) }
.empty-state { text-align:center; padding:36px 20px; color:var(--text3); font-size:13px }
.empty-state .es-icon { font-size:34px; margin-bottom:10px; opacity:.5 }

/* ── Dashboard ── */
.dash-grid { display:grid; gap:16px; grid-template-columns:1fr }
@media(min-width:768px) { .dash-grid { grid-template-columns:1fr 1fr } }
.cat-chart { display:flex; flex-wrap:wrap; gap:8px }
.cat-chip { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:8px 12px; display:flex; align-items:center; gap:8px; font-size:12px; transition:background .3s }
.cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }

/* ── Bar chart ── */
.bar-chart { display:flex; align-items:flex-end; gap:6px; height:110px; padding-top:8px; overflow-x:auto; scrollbar-width:none }
.bar-chart::-webkit-scrollbar { display:none }
.bar-col { display:flex; flex-direction:column; align-items:center; flex:1; min-width:28px }
.bar-blk { width:100%; border-radius:4px 4px 0 0; min-height:4px; transition:opacity .2s; cursor:pointer }
.bar-blk:hover { opacity:.75 }
.bar-lbl { font-size:9px; color:var(--text3); margin-top:6px; white-space:nowrap }

/* ── Credit cards ── */
.cc-card { background:linear-gradient(135deg,var(--bg3),var(--bg2)); border:1px solid var(--border2); border-radius:20px; padding:20px; position:relative; overflow:hidden; margin-bottom:12px }
.cc-card::before { content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%; background:var(--accent); opacity:.07 }
.cc-name { font-size:16px; font-weight:700; margin-bottom:16px; color:var(--text) }
.cc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px }
.cc-stat .lbl { font-size:10px; color:var(--text3); font-weight:600; text-transform:uppercase; margin-bottom:4px }
.cc-stat .val { font-size:14px; font-weight:700; font-family:'JetBrains Mono',monospace }

/* ── Health ── */
.health-score-wrap { text-align:center; padding:24px 0 28px }
.health-num { font-size:clamp(60px,15vw,80px); font-weight:800; font-family:'JetBrains Mono',monospace; letter-spacing:-3px; line-height:1 }
.health-lbl { font-size:16px; font-weight:600; margin-top:8px }
.health-grid { display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media(min-width:640px) { .health-grid { grid-template-columns:repeat(4,1fr) } }
.health-card { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:14px; transition:background .3s }
.health-big { font-size:24px; font-weight:700; font-family:'JetBrains Mono',monospace }
.tip-item { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:8px; font-size:13px; margin-bottom:8px; color:var(--text2) }

/* ── Profile / themes ── */
.theme-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
@media(min-width:500px) { .theme-grid { grid-template-columns:repeat(5,1fr) } }
.theme-chip { display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; cursor:pointer; transition:all .2s; border:1.5px solid var(--border); background:var(--bg3) }
.theme-chip.active { border-width:2px; border-color:var(--accent); background:var(--bg4) }
.theme-dot { width:13px; height:13px; border-radius:50%; flex-shrink:0 }
.theme-name { font-size:12px; font-weight:600; color:var(--text) }
.logo-upload-area { width:64px; height:64px; border-radius:14px; background:var(--bg3); border:2px dashed var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:26px; overflow:hidden; flex-shrink:0 }

/* ── Drawer (mobile) ── */
.drawer-overlay { display:none; position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.6); backdrop-filter:blur(2px) }
.drawer-overlay.open { display:block }
.drawer { position:fixed; left:0; top:0; bottom:0; z-index:260; width:260px; background:var(--bg2); border-right:1px solid var(--border); padding:20px 10px; overflow-y:auto; transform:translateX(-100%); transition:transform .25s ease; display:flex; flex-direction:column; gap:2px }
.drawer.open { transform:translateX(0) }
.drawer-close { display:flex; align-items:center; gap:10px; padding:10px; margin-bottom:8px; cursor:pointer }
.drawer-close span { font-size:18px }
.drawer-close .dl { font-size:14px; font-weight:700; color:var(--text) }

/* ── Edit Modal ── */
.edit-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); align-items:center; justify-content:center; padding:16px }
.edit-overlay.open { display:flex }
.edit-box { background:var(--bg2); border:1px solid var(--border2); border-radius:22px; width:100%; max-width:500px; max-height:88vh; overflow-y:auto; padding:24px; box-shadow:0 24px 80px rgba(0,0,0,.5) }
.edit-box::-webkit-scrollbar { width:4px }
.edit-box::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px }
.edit-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px }
.edit-title { font-size:17px; font-weight:700; color:var(--text) }
.edit-footer { display:flex; gap:10px; margin-top:20px }
.edit-footer .btn-save { flex:1; background:var(--accent); color:#fff; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:700; cursor:pointer; transition:opacity .2s }
.edit-footer .btn-save:hover { opacity:.85 }
.edit-footer .btn-cancel { background:var(--bg4); color:var(--text2); border:1px solid var(--border); border-radius:12px; padding:13px 18px; font-size:14px; cursor:pointer }
.btn-edit { background:transparent; border:1px solid var(--border2); color:var(--accent); border-radius:7px; padding:3px 9px; font-size:12px; cursor:pointer; transition:background .15s }
.btn-edit:hover { background:var(--accent); color:#fff }

/* ── Light mode adjustments ── */
:root.light .tab-btn.active { box-shadow:0 1px 6px rgba(0,0,0,.12) }
:root.light .stat-card { box-shadow:0 2px 8px rgba(100,100,160,.06) }
:root.light .card { box-shadow:0 2px 8px rgba(100,100,160,.06) }
:root.light .nav-item.active { background:rgba(109,84,240,.08) }
:root.light .btn-sm { color:var(--text2) }

/* ══ TOAST NOTIFICATIONS ══ */
#toast-container { position:fixed; bottom:84px; right:16px; z-index:9999; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; max-width:300px }
@media(min-width:1024px) { #toast-container { bottom:20px } }
.toast { background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:12px 16px; font-size:13px; font-weight:600; color:var(--text); box-shadow:var(--shadow); transform:translateX(calc(100% + 20px)); transition:transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events:all; display:flex; align-items:center; gap:10px }
.toast.show { transform:translateX(0) }
.toast-icon { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; color:#fff }
.toast-success .toast-icon { background:var(--green) }
.toast-error   .toast-icon { background:var(--red) }
.toast-warn    .toast-icon { background:var(--amber) }
.toast-info    .toast-icon { background:var(--accent) }
.toast-success { border-left:3px solid var(--green) }
.toast-error   { border-left:3px solid var(--red) }
.toast-warn    { border-left:3px solid var(--amber) }
.toast-info    { border-left:3px solid var(--accent) }

/* ══ CERTIFICADOS ══ */
.cert-card { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:clamp(16px,3vw,22px); margin-bottom:12px; position:relative; overflow:hidden; transition:background .3s }
.cert-card::before { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background:var(--green); opacity:.05; pointer-events:none }

/* ══ DASHBOARD STRIP ══ */
.dash-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px }
@media(min-width:640px) { .dash-strip { grid-template-columns:repeat(4,1fr) } }
.strip-item { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; transition:background .3s }
.strip-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text3) }
.strip-val { font-size:15px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--text) }

/* ══ EXTRA UTILS ══ */
.mb12 { margin-bottom:12px }
.mt6  { margin-top:6px }

/* ── Button improvements ── */
.btn-add:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.btn-sm:focus-visible  { outline:2px solid var(--accent); outline-offset:2px }

/* ── Item row hover ── */
.item-row { transition:background .15s, border-color .15s }
.item-row:hover { background:var(--bg4); border-color:var(--border2) }

/* ── Stats card 5th (tasa ahorro) ── */
.stat-card.sav::after { background:var(--blue) }

/* ══════════════════════════════════════════
   RESPONSIVE — mejoras móvil & tablet
══════════════════════════════════════════ */

/* ── Fix: .tab-bar (Combustible / Ahorros) no tenía estilos ── */
.tab-bar {
  display:flex; gap:4px; background:var(--bg3); border-radius:12px;
  padding:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tab-bar::-webkit-scrollbar { display:none }

/* ── Fix: pantalla de registro se cortaba en móvil ── */
#s-register {
  overflow-y:auto;
  align-items:flex-start;
  justify-content:flex-start;
  padding-top:clamp(20px,6vh,56px);
  padding-bottom:32px;
}

/* ── Topbar: < 400 px ── */
@media(max-width:399px) {
  .topbar { padding:0 10px; gap:6px }
  .tb-logo { font-size:13px; flex-shrink:1; min-width:0; overflow:hidden; white-space:nowrap }
  .tb-logo .dot { display:none }
  .tb-month { padding:4px 8px }
  .tb-month span { font-size:10px; min-width:72px }
  .theme-toggle { padding:5px 6px; font-size:14px }
  .tb-user { padding:4px 8px 4px 5px }
  .tb-avatar { width:24px; height:24px; font-size:10px }
}

/* ── Formulario de registro: 1 columna en móvil ── */
@media(max-width:479px) {
  .g2 { grid-template-columns:1fr }
  .g2 .span2 { grid-column:1 }
}

/* ── Cards: menos padding en móvil ── */
@media(max-width:479px) {
  .card, .form-card { padding:14px }
  .cert-card { padding:14px }
  .card-title { margin-bottom:12px }
  .page-h { margin-bottom:14px }
}

/* ── Tarjetas de crédito: 2 cols en móvil ── */
@media(max-width:499px) {
  .cc-grid { grid-template-columns:repeat(2,1fr) }
}

/* ── Stats: 1 col en pantallas muy pequeñas ── */
@media(max-width:339px) {
  .stats-grid, .health-grid { grid-template-columns:1fr }
}

/* ── Dashboard strip: 3 cols entre 480-639 px ── */
@media(min-width:480px) and (max-width:639px) {
  .dash-strip { grid-template-columns:repeat(3,1fr) }
}

/* ── Auth card en pantallas muy pequeñas ── */
@media(max-width:359px) {
  .auth-card { padding:18px 14px; border-radius:16px }
  .logo-txt  { font-size:20px }
}

/* ── Edit modal: compacto en móvil ── */
@media(max-width:499px) {
  .edit-box { padding:16px; border-radius:16px }
  .edit-header { margin-bottom:14px }
  .edit-footer { flex-wrap:wrap }
  .edit-footer .btn-save { width:100% }
}

/* ── Touch targets: mínimo 44 px en móvil ── */
@media(max-width:1023px) {
  .fi, .f-input    { min-height:44px }
  .btn-add         { min-height:44px }
  .btn-primary     { min-height:50px }
  .tab-btn         { min-height:36px; padding:8px 16px }
  .bn-item         { min-height:52px }
  .btn-sm          { min-height:36px; padding:6px 12px }
}

/* ── Total row: envuelve en pantallas pequeñas ── */
.total-row { flex-wrap:wrap; gap:6px }

/* ── Bar chart: menos alto en móvil ── */
@media(max-width:479px) {
  .bar-chart  { height:90px }
  .bar-lbl    { font-size:8px }
}

/* ── Stat values: no desbordan ── */
.stat-val { word-break:break-all }

/* ── Form grid: 1 col forzado en pantallas < 320 px ── */
@media(max-width:319px) {
  .form-grid { grid-template-columns:1fr !important }
}

/* ── Drawer: ligeramente más angosto en 320 px ── */
@media(max-width:320px) {
  .drawer { width:240px }
}

/* ── Health score: más compacto ── */
@media(max-width:479px) {
  .health-score-wrap { padding:16px 0 20px }
}

/* ── Toast: posición cuando no hay bottom-nav ── */
@media(min-width:1024px) {
  #toast-container { bottom:20px }
}

/* ── Categorías personalizadas ── */
.cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px 4px 12px;
  font-size: 13px; color: var(--text);
}
.cat-chip button {
  background: none; border: none; cursor: pointer;
  color: var(--text2); font-size: 11px; line-height: 1;
  padding: 0 2px; border-radius: 50%;
  transition: color .15s;
}
.cat-chip button:hover { color: var(--red); }