@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #06060E;
  --bg2: #0D0D1A;
  --bg3: #111122;
  --card: #13132A;
  --card2: #1A1A35;
  --border: #1E1E40;
  --border2: #252550;
  --blue: #2563EB;
  --blue2: #1D4ED8;
  --blue3: #3B82F6;
  --blue4: #60A5FA;
  --blue-glow: rgba(37,99,235,0.18);
  --blue-dim: rgba(37,99,235,0.08);
  --white: #FFFFFF;
  --gray1: #E2E8F0;
  --gray2: #94A3B8;
  --gray3: #475569;
  --gray4: #1E293B;
  --green: #10B981;
  --red: #EF4444;
  --yellow: #F59E0B;
  --purple: #8B5CF6;
  --r: 12px;
  --r2: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-blue: 0 0 30px rgba(37,99,235,0.25);
}

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

html, body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--white);
  height: 100%;
  overflow-x: hidden;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ─── LANDING ─── */
.landing { min-height:100vh; background: var(--bg); }

.land-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 5%; height: 68px;
  background: rgba(6,6,14,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:100;
}
.land-logo { font-size:1.4rem; font-weight:800; color:var(--white); letter-spacing:-0.5px; }
.land-logo span { color: var(--blue3); }
.land-nav-links { display:flex; gap:2rem; list-style:none; }
.land-nav-links a { color:var(--gray2); text-decoration:none; font-size:.92rem; font-weight:500; transition:.2s; }
.land-nav-links a:hover { color:var(--white); }
.btn-cta {
  background: var(--blue); color:#fff; border:none; padding:.65rem 1.4rem;
  border-radius: 8px; font-size:.92rem; font-weight:600; cursor:pointer; transition:.2s;
}
.btn-cta:hover { background:var(--blue2); transform:translateY(-1px); }

.hero {
  text-align:center; padding: 100px 5% 80px;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,0.2) 0%, transparent 70%);
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--blue-dim); border:1px solid var(--border2);
  color:var(--blue4); font-size:.82rem; font-weight:600;
  padding:.4rem 1rem; border-radius:999px; margin-bottom:2rem;
}
.hero h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight:900; line-height:1.1; letter-spacing:-2px;
  margin-bottom:1.5rem;
}
.hero h1 span { color: var(--blue3); }
.hero p {
  color:var(--gray2); font-size:1.1rem; max-width:560px;
  margin: 0 auto 2.5rem; line-height:1.7;
}
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-primary {
  background: var(--blue); color:#fff; border:none;
  padding:.85rem 2rem; border-radius:10px; font-size:1rem;
  font-weight:700; cursor:pointer; transition:.2s;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-primary:hover { background:var(--blue2); transform:translateY(-2px); box-shadow: var(--shadow-blue); }
.hero-check { color:var(--gray3); font-size:.85rem; }

.mock-browser {
  margin: 60px auto 0; max-width:900px;
  background: var(--bg3); border-radius:var(--r2);
  border:1px solid var(--border); overflow:hidden;
  box-shadow: var(--shadow), 0 0 60px rgba(37,99,235,0.1);
}
.mock-bar {
  background:var(--bg2); padding:.6rem 1rem;
  display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--border);
}
.mock-dot { width:10px; height:10px; border-radius:50%; }
.mock-dot.r { background:#EF4444; }
.mock-dot.y { background:#F59E0B; }
.mock-dot.g { background:#10B981; }
.mock-url {
  flex:1; background:var(--bg3); border-radius:6px;
  padding:.3rem .8rem; font-size:.78rem; color:var(--gray3);
  margin: 0 1rem;
}

.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--bg2); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat-item {
  padding:2.5rem 1rem; text-align:center;
  border-right:1px solid var(--border);
}
.stat-item:last-child { border-right:none; }
.stat-num { font-size:2rem; font-weight:800; color:var(--blue3); }
.stat-label { font-size:.78rem; color:var(--gray2); text-transform:uppercase; letter-spacing:1px; margin-top:.3rem; }

.section { padding:80px 5%; }
.section-tag {
  display:inline-block; color:var(--blue3); font-size:.78rem;
  font-weight:700; text-transform:uppercase; letter-spacing:2px;
  margin-bottom:1rem;
}
.section h2 {
  font-size: clamp(2rem,4vw,3rem);
  font-weight:800; letter-spacing:-1px; margin-bottom:1rem;
}
.section h2 span { color:var(--blue3); }
.section-sub { color:var(--gray2); font-size:1rem; max-width:500px; line-height:1.6; }

.problems-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem; margin-top:3rem;
}
.problem-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.2rem 1.4rem;
  display:flex; align-items:center; gap:.8rem;
  transition:.2s;
}
.problem-card:hover { border-color:var(--border2); background:var(--card2); }
.problem-icon { color:var(--red); font-size:1rem; }
.problem-text { color:var(--gray1); font-size:.9rem; }

.features-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem; margin-top:3rem;
}
.feature-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r2); padding:2rem;
  transition:.2s; position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--blue), var(--blue4));
  opacity:0; transition:.2s;
}
.feature-card:hover::before { opacity:1; }
.feature-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.feature-num {
  width:36px; height:36px; border-radius:8px;
  background:var(--blue-dim); border:1px solid var(--blue);
  color:var(--blue3); font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.feature-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.feature-card p { color:var(--gray2); font-size:.88rem; line-height:1.6; }

.testimonials-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem; margin-top:3rem;
}
.testi-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r2); padding:1.5rem;
}
.stars { color:var(--blue3); font-size:1rem; margin-bottom:1rem; }
.testi-text { color:var(--gray1); font-size:.9rem; line-height:1.6; margin-bottom:1.2rem; }
.testi-author { display:flex; align-items:center; gap:.8rem; }
.testi-avatar {
  width:38px; height:38px; border-radius:50%;
  background: var(--blue-dim); border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem; color:var(--blue3);
}
.testi-name { font-weight:600; font-size:.88rem; }
.testi-role { color:var(--gray2); font-size:.78rem; }

.pricing-section { text-align:center; background: var(--bg2); }
.price-cards { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:3rem; }
.price-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r2); padding:2rem; width:320px; text-align:left;
}
.price-card.featured {
  border-color:var(--blue); background:linear-gradient(135deg, var(--card) 0%, rgba(37,99,235,0.08) 100%);
  box-shadow: var(--shadow-blue);
}
.price-badge {
  background:var(--blue); color:#fff; font-size:.72rem;
  font-weight:700; padding:.25rem .6rem; border-radius:4px;
  display:inline-block; margin-bottom:1rem;
}
.price-name { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.price-value { font-size:2.5rem; font-weight:900; color:var(--white); }
.price-value span { font-size:1rem; color:var(--gray2); font-weight:400; }
.price-desc { color:var(--gray2); font-size:.85rem; margin-bottom:1.5rem; }
.price-features { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.5rem; }
.price-features li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; }
.price-features li::before { content:'✓'; color:var(--green); font-weight:700; }

.faq-section { max-width:720px; margin:0 auto; }
.faq-item {
  border-bottom:1px solid var(--border); overflow:hidden;
}
.faq-q {
  width:100%; background:none; border:none; color:var(--white);
  font-size:.95rem; font-weight:600; padding:1.2rem 0;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; text-align:left;
}
.faq-q span { color:var(--blue3); font-size:1.2rem; transition:.3s; }
.faq-a { color:var(--gray2); font-size:.9rem; line-height:1.7; max-height:0; overflow:hidden; transition:.3s; }
.faq-item.open .faq-a { max-height:200px; padding-bottom:1.2rem; }
.faq-item.open .faq-q span { transform:rotate(45deg); }

.cta-section {
  text-align:center; padding:80px 5%;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(37,99,235,0.15) 0%, transparent 70%);
}
.cta-section h2 { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-1px; margin-bottom:1rem; }
.cta-section p { color:var(--gray2); margin-bottom:2rem; }

.land-footer {
  text-align:center; padding:2rem;
  border-top:1px solid var(--border);
  color:var(--gray3); font-size:.82rem;
}

/* ─── APP ─── */
.app-shell { display:flex; height:100vh; overflow:hidden; }

.sidebar {
  width:240px; min-width:240px;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  transition:width .28s ease, min-width .28s ease;
}
.sidebar.collapsed { width:0; min-width:0; border-right:none; }
.sidebar-logo {
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--border);
  font-family:'Space Grotesk', sans-serif;
  font-size:.95rem; font-weight:700; color:var(--white);
  letter-spacing:-.3px;
  cursor:pointer; user-select:none; transition:.15s; white-space:nowrap;
}
.sidebar-logo:hover { opacity:.8; }
.sidebar-logo span { color:var(--blue3); font-weight:400; }

/* Topbar sidebar toggle */
.topbar-toggle {
  background:none; border:none; color:var(--gray2); cursor:pointer;
  font-size:1.25rem; padding:.35rem .5rem; border-radius:8px;
  transition:.15s; line-height:1; display:flex; align-items:center;
}
.topbar-toggle:hover { background:var(--blue-dim); color:var(--blue3); }

.sidebar-section { padding:.4rem 0; border-bottom:1px solid var(--border); }
.sidebar-section-label {
  padding:.2rem 1.1rem .3rem;
  font-size:.6rem; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--gray3); font-weight:600;
}
.sidebar-item {
  display:flex; align-items:center; gap:.65rem;
  padding:.42rem 1.1rem; cursor:pointer; transition:.15s;
  color:var(--gray2); font-size:.8rem; font-weight:500;
  border-left:3px solid transparent;
}
.sidebar-item:hover { background:var(--blue-dim); color:var(--white); }
.sidebar-item.active {
  color:var(--blue3); background:var(--blue-dim);
  border-left-color:var(--blue3);
}
.sidebar-item .icon {
  width:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
/* Lucide SVG sizing */
.lucide { width:17px; height:17px; stroke-width:1.75; color:inherit; flex-shrink:0; }
.mn-icon .lucide { width:22px; height:22px; stroke-width:1.6; }
.mob-item .lucide { width:17px; height:17px; }
.sni-icon .lucide { width:16px; height:16px; }
.topbar-toggle .lucide { width:20px; height:20px; }
.mn-fab .lucide { width:24px; height:24px; stroke-width:2; }
.sidebar-badge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:.65rem; font-weight:700; padding:.1rem .4rem;
  border-radius:999px; min-width:18px; text-align:center;
}

.main-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar {
  height:52px; background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.4rem; flex-shrink:0;
}
.topbar-title { font-size:.92rem; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:1rem; }
.topbar-month {
  background:var(--card); border:1px solid var(--border);
  color:var(--white); padding:.4rem .8rem; border-radius:8px;
  font-size:.85rem; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
}
.avatar-circle {
  width:34px; height:34px; border-radius:50%;
  background:var(--blue-dim); border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; color:var(--blue3); cursor:pointer;
}

.page-content { flex:1; overflow-y:auto; padding:1.3rem 1.5rem; }

/* Cards */
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.85rem; margin-bottom:1.2rem; }
.summary-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.1rem;
  transition:.2s; cursor:default;
}
.summary-card:hover { border-color:var(--border2); }
.summary-card .label { font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--gray2); margin-bottom:.45rem; }
.summary-card .value { font-size:1.35rem; font-weight:700; }
.summary-card .value.green { color:var(--green); }
.summary-card .value.red { color:var(--red); }
.summary-card .value.blue { color:var(--blue3); }
.summary-card .sub { font-size:.72rem; color:var(--gray3); margin-top:.3rem; }
.summary-card .icon-wrap {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; margin-bottom:.65rem;
}
.summary-card .icon-wrap.g { background:rgba(16,185,129,.15); color:var(--green); }
.summary-card .icon-wrap.r { background:rgba(239,68,68,.15); color:var(--red); }
.summary-card .icon-wrap.b { background:var(--blue-dim); color:var(--blue3); }
.summary-card .icon-wrap.y { background:rgba(245,158,11,.15); color:var(--yellow); }

.charts-row { display:grid; grid-template-columns:2fr 1fr; gap:.85rem; margin-bottom:1.2rem; }
.chart-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.1rem;
}
.chart-card h3 { font-size:.82rem; font-weight:600; margin-bottom:.85rem; color:var(--gray1); }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.table-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
}
.table-header {
  padding:.8rem 1.1rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.table-header h3 { font-size:.82rem; font-weight:600; }
.btn-small {
  background:var(--blue-dim); border:1px solid var(--blue);
  color:var(--blue3); padding:.35rem .8rem; border-radius:6px;
  font-size:.78rem; font-weight:600; cursor:pointer; transition:.2s;
}
.btn-small:hover { background:var(--blue); color:#fff; }

table { width:100%; border-collapse:collapse; }
thead th {
  padding:.7rem 1rem; text-align:left;
  font-size:.72rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--gray3); background:var(--bg2);
  border-bottom:1px solid var(--border);
}
tbody td {
  padding:.85rem 1rem; font-size:.875rem;
  border-bottom:1px solid var(--border);
}
tbody tr:hover { background:var(--blue-dim); }
tbody tr:last-child td { border-bottom:none; }
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .6rem; border-radius:4px; font-size:.72rem; font-weight:600;
}
.badge.income { background:rgba(16,185,129,.15); color:var(--green); }
.badge.expense { background:rgba(239,68,68,.15); color:var(--red); }
.badge.paid { background:rgba(16,185,129,.12); color:var(--green); }
.badge.pending { background:rgba(245,158,11,.12); color:var(--yellow); }
.badge.overdue { background:rgba(239,68,68,.12); color:var(--red); }
.badge.blue-b { background:var(--blue-dim); color:var(--blue3); }

/* Filters / toolbar */
.toolbar {
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.2rem; flex-wrap:wrap;
}
.search-box {
  display:flex; align-items:center; gap:.5rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:.5rem .9rem; flex:1; min-width:200px;
}
.search-box input {
  background:none; border:none; color:var(--white);
  font-size:.875rem; font-family:inherit; outline:none; flex:1;
}
.search-box input::placeholder { color:var(--gray3); }
.filter-select {
  background:var(--card); border:1px solid var(--border);
  color:var(--white); padding:.5rem .9rem; border-radius:8px;
  font-size:.85rem; font-family:inherit; outline:none; cursor:pointer;
}
.filter-select option { background:var(--bg3); }
.btn-add {
  background:var(--blue); color:#fff; border:none;
  padding:.55rem 1.1rem; border-radius:8px; font-size:.85rem;
  font-weight:600; cursor:pointer; transition:.2s;
  display:flex; align-items:center; gap:.4rem; white-space:nowrap;
}
.btn-add:hover { background:var(--blue2); }

/* Modal */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:none; align-items:center; justify-content:center;
  z-index:1000; backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--r2); padding:1.8rem;
  width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.4rem;
}
.modal-header h3 { font-size:1rem; font-weight:700; }
.modal-close { background:none; border:none; color:var(--gray2); cursor:pointer; font-size:1.3rem; }
.modal-close:hover { color:var(--white); }
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--gray2); margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.5px; }
.form-input {
  width:100%; background:var(--card); border:1px solid var(--border);
  color:var(--white); padding:.65rem .9rem; border-radius:8px;
  font-size:.9rem; font-family:inherit; outline:none; transition:.2s;
}
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow); }
.form-input::placeholder { color:var(--gray3); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.type-toggle {
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem;
}
.type-btn {
  padding:.65rem; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--gray2); font-weight:600;
  font-size:.875rem; cursor:pointer; transition:.2s; text-align:center;
}
.type-btn.income.active { background:rgba(16,185,129,.15); border-color:var(--green); color:var(--green); }
.type-btn.expense.active { background:rgba(239,68,68,.15); border-color:var(--red); color:var(--red); }
.form-submit {
  width:100%; background:var(--blue); color:#fff; border:none;
  padding:.8rem; border-radius:8px; font-size:.95rem;
  font-weight:700; cursor:pointer; margin-top:1rem; transition:.2s;
}
.form-submit:hover { background:var(--blue2); }

/* Goals */
.goals-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.goal-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.4rem;
}
.goal-card h4 { font-size:.95rem; font-weight:700; margin-bottom:.3rem; }
.goal-card .goal-cat { font-size:.75rem; color:var(--gray2); margin-bottom:1rem; }
.progress-bar { height:8px; background:var(--border); border-radius:999px; overflow:hidden; margin:.7rem 0; }
.progress-fill { height:100%; background: linear-gradient(90deg, var(--blue), var(--blue4)); border-radius:999px; transition:width .5s; }
.goal-nums { display:flex; justify-content:space-between; font-size:.82rem; }
.goal-nums .cur { color:var(--blue3); font-weight:700; }
.goal-nums .tot { color:var(--gray2); }
.goal-pct { font-size:1.2rem; font-weight:800; color:var(--blue3); text-align:right; }

/* Cards page */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.85rem; }
.credit-card-display {
  background:linear-gradient(135deg, var(--blue2) 0%, #0F172A 100%);
  border-radius:var(--r2); padding:1.8rem; position:relative; overflow:hidden;
}
.credit-card-display::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.card-chip { font-size:1.5rem; margin-bottom:1.5rem; }
.card-num { font-size:1rem; letter-spacing:4px; font-weight:600; margin-bottom:1.2rem; color:rgba(255,255,255,.8); }
.card-info { display:flex; justify-content:space-between; align-items:flex-end; }
.card-owner { font-size:.8rem; text-transform:uppercase; letter-spacing:1px; }
.card-brand { font-size:.75rem; background:rgba(255,255,255,.2); padding:.3rem .6rem; border-radius:4px; }
.card-limits {
  display:flex; gap:1rem; margin-top:1rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:0 0 var(--r2) var(--r2); padding:1rem 1.4rem;
}
.card-limit-item { flex:1; text-align:center; }
.card-limit-item .val { font-size:1rem; font-weight:700; }
.card-limit-item .lbl { font-size:.72rem; color:var(--gray2); }

/* Investments */
.invest-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }

/* AI Chat */
.ai-page { display:flex; height:100%; flex-direction:column; }
.ai-header {
  padding:1.2rem 1.8rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem;
}
.ai-avatar {
  width:42px; height:42px; border-radius:10px;
  background:var(--blue-dim); border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  flex-shrink:0; color:var(--blue);
}
.ai-title { font-size:1rem; font-weight:700; }
.ai-status { font-size:.78rem; color:var(--green); display:flex; align-items:center; gap:.3rem; }
.ai-status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); }
.ai-messages { flex:1; overflow-y:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.msg { max-width:75%; display:flex; flex-direction:column; gap:.3rem; }
.msg.user { align-self:flex-end; }
.msg.ai { align-self:flex-start; }
.msg-bubble {
  padding:.9rem 1.2rem; border-radius:12px; font-size:.9rem; line-height:1.6;
}
.msg.user .msg-bubble { background:var(--blue); color:#fff; border-radius:12px 12px 4px 12px; }
.msg.ai .msg-bubble { background:var(--card); border:1px solid var(--border); border-radius:12px 12px 12px 4px; }
.msg-time { font-size:.72rem; color:var(--gray3); }
.ai-input-area {
  padding:1rem 1.5rem; border-top:1px solid var(--border);
  display:flex; gap:.8rem; align-items:flex-end;
}
.ai-input {
  flex:1; background:var(--card); border:1px solid var(--border);
  color:var(--white); padding:.8rem 1rem; border-radius:10px;
  font-size:.9rem; font-family:inherit; outline:none; resize:none;
  min-height:44px; max-height:120px; line-height:1.5; transition:.2s;
}
.ai-input:focus { border-color:var(--blue); }
.ai-input::placeholder { color:var(--gray3); }
.ai-send {
  background:var(--blue); border:none; color:#fff;
  width:42px; height:42px; border-radius:10px;
  cursor:pointer; font-size:1rem; transition:.2s; flex-shrink:0;
}
.ai-send:hover { background:var(--blue2); }
.ai-key-notice {
  background:var(--blue-dim); border:1px solid var(--blue);
  border-radius:var(--r); padding:1rem 1.4rem; margin:1rem 1.5rem;
  font-size:.85rem; color:var(--blue4);
}
.ai-key-notice a { color:var(--blue3); text-decoration:underline; cursor:pointer; }

/* Banks */
.banks-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.bank-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.4rem;
}
.bank-card .bank-icon { font-size:2rem; margin-bottom:.8rem; display:flex; justify-content:center; }
.bank-card .bank-name { font-weight:700; margin-bottom:.3rem; }
.bank-card .bank-type { font-size:.78rem; color:var(--gray2); margin-bottom:1rem; }
.bank-card .bank-balance { font-size:1.6rem; font-weight:800; }
.bank-card .bank-balance.positive { color:var(--green); }
.bank-card .bank-balance.negative { color:var(--red); }

/* Reports */
.dre-table { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.dre-row {
  display:flex; justify-content:space-between; padding:.9rem 1.4rem;
  border-bottom:1px solid var(--border); font-size:.9rem;
}
.dre-row:last-child { border-bottom:none; }
.dre-row.header { background:var(--bg2); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--gray2); }
.dre-row.total { background:var(--blue-dim); font-weight:800; border-top:2px solid var(--blue); }
.dre-row .positive { color:var(--green); font-weight:700; }
.dre-row .negative { color:var(--red); font-weight:700; }
.dre-row .neutral { color:var(--blue3); font-weight:700; }

/* Cashflow */
.cashflow-header { display:flex; gap:1rem; margin-bottom:1.5rem; }
.cf-period {
  flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.2rem; text-align:center;
}
.cf-period h4 { font-size:.8rem; color:var(--gray2); text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem; }
.cf-period .cf-val { font-size:1.4rem; font-weight:800; }

/* Utility */
.empty-state {
  text-align:center; padding:4rem 2rem; color:var(--gray2);
}
.empty-state .empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.4; display:flex; align-items:center; justify-content:center; }
.empty-state p { font-size:.9rem; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.page-header h2 { font-size:1.05rem; font-weight:700; }
.action-btn {
  background:none; border:1px solid var(--border);
  color:var(--gray2); padding:.35rem .8rem; border-radius:6px;
  font-size:.8rem; cursor:pointer; transition:.2s;
}
.action-btn:hover { border-color:var(--border2); color:var(--white); }
.action-btn.danger:hover { border-color:var(--red); color:var(--red); }
.toast {
  position:fixed; bottom:2rem; right:2rem;
  background:var(--bg3); border:1px solid var(--border2);
  color:var(--white); padding:.9rem 1.4rem;
  border-radius:10px; font-size:.875rem; font-weight:500;
  box-shadow:var(--shadow); z-index:9999;
  transform:translateY(100px); opacity:0; transition:.3s;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-left:4px solid var(--green); }
.toast.error { border-left:4px solid var(--red); }
.tag {
  display:inline-block; padding:.2rem .55rem; border-radius:4px;
  font-size:.72rem; font-weight:600;
}
.no-data { text-align:center; color:var(--gray3); font-size:.85rem; padding:2rem; }

/* ─── AUTH SCREEN ─── */
.auth-screen {
  position:fixed; inset:0; background:var(--bg); z-index:3000;
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.auth-screen.hidden { display:none; }
.auth-card {
  background:var(--card); border:1px solid var(--border2); border-radius:20px;
  padding:2.5rem 2rem; width:100%; max-width:400px; box-shadow:var(--shadow);
}
.auth-divider {
  text-align:center; color:var(--gray3); font-size:.78rem;
  margin:1.2rem 0; position:relative;
}
.auth-divider::before {
  content:''; position:absolute; top:50%; left:0; right:0;
  height:1px; background:var(--border);
}
.auth-divider span { background:var(--card); padding:0 .75rem; position:relative; }
.auth-user-badge {
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  margin-bottom:1rem;
}
.auth-user-badge .aub-avatar {
  width:36px; height:36px; border-radius:50%; background:var(--blue-dim);
  border:2px solid var(--blue); display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--blue3); font-size:.9rem; flex-shrink:0;
}
.auth-user-badge .aub-info { flex:1; min-width:0; }
.auth-user-badge .aub-name { font-weight:700; font-size:.9rem; }
.auth-user-badge .aub-email { font-size:.75rem; color:var(--gray2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ─── PIN SCREEN ─── */
.pin-screen {
  position:fixed; inset:0; background:var(--bg); z-index:2000;
  display:flex; align-items:center; justify-content:center;
}
.pin-screen.hidden { display:none; }
.pin-card {
  background:var(--card); border:1px solid var(--border2); border-radius:20px;
  padding:2.5rem 2rem; width:100%; max-width:360px; text-align:center;
  box-shadow:var(--shadow);
}
.pin-logo {
  font-family:'Space Grotesk', sans-serif;
  font-size:1.25rem; font-weight:700; color:var(--white);
  letter-spacing:-.3px; margin-bottom:.4rem;
}
.pin-logo span { color:var(--blue3); font-weight:400; }
.pin-subtitle { color:var(--gray2); font-size:.85rem; margin-bottom:1.5rem; }
.pin-dots { display:flex; gap:1rem; justify-content:center; margin:1.2rem auto; }
.pin-dot { width:14px; height:14px; border-radius:50%; background:var(--border2); border:2px solid var(--border2); transition:.2s; }
.pin-dot.filled { background:var(--blue); border-color:var(--blue); transform:scale(1.15); }
.pin-numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:1.2rem 0 .8rem; }
.pin-key {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:.9rem .5rem; font-size:1.3rem; font-weight:700; color:var(--white);
  cursor:pointer; transition:.15s; font-family:inherit;
}
.pin-key:hover { background:var(--blue-dim); border-color:var(--blue); color:var(--blue3); }
.pin-key.del { font-size:1rem; color:var(--gray2); }
.pin-key.enter { background:var(--blue); border-color:var(--blue); color:#fff; font-size:.88rem; font-weight:700; }
.pin-key.enter:hover { background:var(--blue2); }
.pin-error { color:var(--red); font-size:.82rem; margin-top:.6rem; min-height:1.2rem; }
.pin-remember { display:flex; align-items:center; gap:.5rem; justify-content:center; font-size:.82rem; color:var(--gray2); margin-top:.6rem; cursor:pointer; }
.pin-remember input { accent-color:var(--blue); width:15px; height:15px; cursor:pointer; }
@keyframes pinShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }
.pin-shake { animation:pinShake .4s ease; }

/* ─── BUDGET BARS ─── */
.budget-item { margin-bottom:.85rem; }
.budget-label { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; margin-bottom:.35rem; }
.budget-bar-track { height:8px; background:var(--border); border-radius:999px; overflow:hidden; }
.budget-bar-fill { height:100%; border-radius:999px; transition:width .4s; }
.budget-ok { background:var(--green); }
.budget-warn { background:var(--yellow); }
.budget-over { background:var(--red); }

/* ─── REPORT TABS ─── */
.report-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.report-tab {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:.45rem 1.1rem; font-size:.83rem; cursor:pointer; color:var(--gray2);
  transition:.15s; font-family:inherit; font-weight:500;
}
.report-tab:hover { border-color:var(--blue); color:var(--blue3); }
.report-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ─── INSTALLMENT / RECURRING BADGES ─── */
.install-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  background:rgba(139,92,246,.15); color:#A78BFA; border-radius:4px;
  padding:.15rem .45rem; font-size:.7rem; font-weight:600;
}
.recur-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  background:rgba(16,185,129,.12); color:var(--green); border-radius:4px;
  padding:.15rem .45rem; font-size:.7rem; font-weight:600;
}

/* ─── TOGGLE SWITCH ─── */
.toggle-wrap { display:flex; align-items:center; gap:.75rem; }
.toggle { position:relative; width:42px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:var(--border2); border-radius:22px;
  cursor:pointer; transition:.3s;
}
.toggle-slider:before {
  content:''; position:absolute; left:3px; top:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--gray2); transition:.3s;
}
.toggle input:checked + .toggle-slider { background:var(--blue); }
.toggle input:checked + .toggle-slider:before { transform:translateX(20px); background:#fff; }

/* ─── HOME PAGE ─── */
.home-greeting { margin-bottom:1.8rem; }
.home-greeting .greeting-time { font-size:.82rem; color:var(--blue3); font-weight:600; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:.3rem; display:flex; align-items:center; gap:.4rem; }
.home-greeting h1 { font-size:1.8rem; font-weight:900; letter-spacing:-0.5px; }
.home-greeting .home-date { color:var(--gray2); font-size:.85rem; margin-top:.25rem; }
.home-quickactions { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem; margin-bottom:1.5rem; }
.home-action {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:1rem; text-align:center; cursor:pointer; transition:.2s;
}
.home-action:hover { border-color:var(--blue); background:var(--blue-dim); transform:translateY(-2px); }
.home-action .ha-icon { font-size:1.6rem; margin-bottom:.5rem; display:flex; align-items:center; justify-content:center; color:var(--blue); }
.home-action .ha-label { font-size:.8rem; font-weight:600; color:var(--gray1); }
.home-tip {
  background:var(--blue-dim); border:1px solid var(--blue);
  border-radius:var(--r); padding:1rem 1.4rem;
  font-size:.85rem; color:var(--blue4); margin-bottom:1.5rem;
}

/* ─── RECURRING PAGE ─── */
.recur-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.recur-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.2rem;
}
.recur-card .rc-name { font-weight:700; margin-bottom:.3rem; }
.recur-card .rc-meta { font-size:.78rem; color:var(--gray2); margin-bottom:.8rem; }
.recur-card .rc-amount { font-size:1.25rem; font-weight:800; margin-bottom:.75rem; }

/* ─── COMPARE TABLE ─── */
.compare-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.compare-table th { padding:.6rem .9rem; background:var(--bg2); color:var(--gray2); font-size:.72rem; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); text-align:right; }
.compare-table th:first-child { text-align:left; }
.compare-table td { padding:.7rem .9rem; border-bottom:1px solid var(--border); text-align:right; }
.compare-table td:first-child { text-align:left; font-weight:600; }
.compare-table tr:hover td { background:var(--blue-dim); }
.compare-table tr.total-row td { background:var(--card2); font-weight:800; border-top:2px solid var(--border2); }

/* ─── ONBOARDING ─── */
.ob-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  z-index:1200;
  backdrop-filter:blur(6px);
}
.ob-overlay.hidden { display:none; }
.ob-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:1.4rem;
  width:min(460px,92vw);
  padding:2.2rem 2rem 1.6rem;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.ob-skip {
  position:absolute;top:1rem;right:1rem;
  background:none;border:none;
  color:var(--gray3);cursor:pointer;
  font-size:.78rem;padding:.25rem .5rem;
  border-radius:.4rem;transition:color .15s,background .15s;
}
.ob-skip:hover { color:var(--gray1);background:var(--bg3); }
.ob-body { text-align:center;padding:.5rem 0 1.5rem; }
.ob-icon { font-size:3.2rem;margin-bottom:1rem;line-height:1; }
.ob-title { font-size:1.25rem;font-weight:700;color:var(--white);margin-bottom:.75rem; }
.ob-text { font-size:.92rem;color:var(--gray2);line-height:1.65;max-width:360px;margin:0 auto; }
.ob-footer {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.75rem;
  border-top:1px solid var(--border);
  padding-top:1.1rem;
}
.ob-dots { display:flex;gap:.35rem;align-items:center; }
.ob-dot { width:7px;height:7px;border-radius:50%;background:var(--bg3);transition:background .2s,transform .2s; }
.ob-dot.active { background:var(--blue3);transform:scale(1.35); }
.ob-counter { font-size:.75rem;color:var(--gray3); }
.ob-actions { display:flex;gap:.5rem; }
.ob-btn-sec {
  padding:.45rem .9rem;border-radius:.6rem;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--gray1);cursor:pointer;font-size:.85rem;
  transition:background .15s;
}
.ob-btn-sec:hover { background:var(--card2); }
.ob-btn-pri {
  padding:.45rem 1.1rem;border-radius:.6rem;
  background:var(--blue);border:none;
  color:#fff;cursor:pointer;font-size:.85rem;font-weight:600;
  transition:background .15s;
}
.ob-btn-pri:hover { background:var(--blue2); }

/* ─── LIGHT MODE ─── */
html.light-mode {
  --bg:    #EFF2F7;
  --bg2:   #FFFFFF;
  --bg3:   #F1F5FB;
  --card:  #FFFFFF;
  --card2: #F7F9FC;
  --border:  #DDE3EE;
  --border2: #C8D2E4;
  --white:   #0F172A;
  --gray1:   #1E293B;
  --gray2:   #475569;
  --gray3:   #94A3B8;
  --gray4:   #DDE3EE;
  --blue-glow: rgba(37,99,235,.08);
  --blue-dim:  rgba(37,99,235,.07);
  --shadow:    0 2px 16px rgba(0,0,0,.1);
  --shadow-blue: 0 0 24px rgba(37,99,235,.15);
}
html.light-mode body { background: var(--bg); color: var(--gray1); }
html.light-mode .topbar { border-bottom-color: var(--border); }
html.light-mode .sidebar { border-right-color: var(--border); }
html.light-mode .sidebar-item { color: var(--gray2); }
html.light-mode .sidebar-item:hover,
html.light-mode .sidebar-item.active { background: var(--blue-dim); color: var(--blue); }
html.light-mode .sidebar-logo span { color: var(--blue); }
html.light-mode .card, html.light-mode .table-card { box-shadow: 0 1px 8px rgba(0,0,0,.07); }
html.light-mode .form-input, html.light-mode .form-select {
  background: var(--bg3); border-color: var(--border2); color: var(--gray1);
}
html.light-mode .form-input:focus { border-color: var(--blue); background: var(--bg2); }
html.light-mode .modal { background: var(--bg2); }
html.light-mode .auth-screen, html.light-mode .pin-screen, html.light-mode .ob-overlay { background: rgba(0,0,0,.5); }
html.light-mode .auth-card, html.light-mode .pin-card, html.light-mode .ob-card { background: var(--bg2); border-color: var(--border); }
html.light-mode .mobile-nav { background: var(--bg2); border-top-color: var(--border); }
html.light-mode .mob-drawer { background: var(--bg2); border-right-color: var(--border); }
html.light-mode .txn-row:hover { background: var(--bg3); }
html.light-mode .sidebar-section-label { color: var(--gray3); }
html.light-mode .topbar-title { color: var(--gray1); }
html.light-mode .pin-logo, html.light-mode .auth-card .pin-logo { color: var(--gray1); }
html.light-mode .pin-key { background: var(--bg3); border-color: var(--border2); color: var(--gray1); }
html.light-mode .pin-dot { border-color: var(--gray3); }
html.light-mode .pin-dot.filled { background: var(--blue); border-color: var(--blue); }

/* ─── SETTINGS LAYOUT ─── */
.settings-layout {
  display: flex; gap: 1.5rem; align-items: flex-start;
}
.settings-sidenav {
  width: 190px; flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: .5rem;
  position: sticky; top: 1rem;
}
.settings-navitem {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .85rem; border-radius: .65rem;
  cursor: pointer; transition: background .15s, color .15s;
  color: var(--gray2); font-size: .88rem;
}
.settings-navitem:hover { background: var(--blue-dim); color: var(--gray1); }
.settings-navitem.active { background: var(--blue-dim); color: var(--blue3); font-weight: 600; }
.sni-icon { font-size: 1rem; width: 1.2rem; text-align: center; }
.sni-label {}
.settings-panel {
  flex: 1; min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow: hidden;
}
.settings-section-body { padding: 1.6rem; }
.settings-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; color: var(--white); }
.settings-section-desc { font-size: .83rem; color: var(--gray2); margin: 0 0 1.25rem; line-height: 1.55; }
.settings-divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.settings-option-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 0;
  border-top: 1px solid var(--border);
}
.settings-opt-label { font-size: .9rem; font-weight: 600; color: var(--gray1); margin-bottom: .15rem; }
.settings-opt-desc  { font-size: .78rem; color: var(--gray3); }
.theme-toggle-group { display: flex; gap: .4rem; }
.theme-btn {
  padding: .45rem .9rem; border-radius: .6rem;
  border: 1px solid var(--border2);
  background: var(--bg3); color: var(--gray2);
  cursor: pointer; font-size: .82rem;
  transition: all .15s;
}
.theme-btn.active {
  background: var(--blue); border-color: var(--blue);
  color: #fff; font-weight: 600;
}
.theme-btn:hover:not(.active) { border-color: var(--blue3); color: var(--gray1); }

/* ─── PROFILE PANEL ─── */
.prof-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1100;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 4rem 1.5rem 0;
  backdrop-filter: blur(3px);
}
.prof-overlay.hidden { display: none; }
.prof-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 1.1rem;
  width: 280px;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.prof-close {
  position: absolute; top: .8rem; right: .8rem;
  background: none; border: none;
  color: var(--gray3); cursor: pointer; font-size: .9rem;
  padding: .2rem .4rem; border-radius: .35rem;
  transition: color .15s, background .15s;
}
.prof-close:hover { color: var(--gray1); background: var(--bg3); }
.prof-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg,var(--blue),var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  margin: 0 auto 1rem;
}
.prof-name  { text-align: center; font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: .2rem; }
.prof-email { text-align: center; font-size: .75rem; color: var(--gray3); margin-bottom: 1.1rem; }
.prof-actions { border-top: 1px solid var(--border); padding-top: 1rem; }
.prof-footer { border-top: 1px solid var(--border); padding-top: .9rem; margin-top: .9rem; }
.prof-out-btn {
  width: 100%; padding: .55rem; border-radius: .6rem;
  background: none; border: 1px solid var(--border);
  color: var(--gray2); cursor: pointer; font-size: .83rem;
  transition: all .15s;
}
.prof-out-btn:hover { border-color: var(--red); color: var(--red); }

/* ─── VISUAL IMPROVEMENTS ─── */
.card { transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.35); }
.table-card { transition: box-shadow .2s; }
.stat-card { transition: box-shadow .2s, transform .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.btn-add, .form-submit { transition: opacity .15s, transform .1s; }
.btn-add:active, .form-submit:active { transform: scale(.97); }
.sidebar-item { transition: background .15s, color .15s, padding-left .15s; }
.sidebar-item:hover { padding-left: 1.3rem; }
.avatar-circle { cursor: pointer; transition: opacity .15s, transform .15s; }
.avatar-circle:hover { opacity: .85; transform: scale(1.06); }

/* ─── MOBILE NAV (always in DOM, visible only on mobile) ─── */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 66px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 900;
  align-items: center;
  justify-content: space-around;
  padding: 0 .25rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mn-item {
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  flex: 1; cursor: pointer; padding: .5rem .25rem;
  border-radius: .6rem; transition: background .15s;
}
.mn-item:active { background: var(--blue-dim); }
.mn-item.active .mn-icon { filter: none; opacity: 1; }
.mn-item.active .mn-label { color: var(--blue3); }
.mn-icon { font-size: 1.25rem; line-height: 1; opacity: .65; transition: opacity .15s; }
.mn-item.active .mn-icon { opacity: 1; }
.mn-label { font-size: .6rem; color: var(--gray3); font-weight: 600; letter-spacing: .3px; transition: color .15s; }
.mn-fab {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); border: none;
  color: #fff; font-size: 1.8rem; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(37,99,235,.45);
  transition: transform .15s, background .15s;
  line-height: 1;
}
.mn-fab:active { transform: scale(.94); background: var(--blue2); }

/* ─── MOBILE DRAWER ─── */
.mob-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 1000;
  backdrop-filter: blur(3px);
}
.mob-overlay.open { display: block; }
.mob-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 272px; max-width: 82vw;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  z-index: 1001;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.mob-drawer.open { transform: translateX(0); }
.mob-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mob-drawer-body { flex: 1; overflow-y: auto; padding: .5rem 0 1rem; }
.mob-sec {
  font-size: .62rem; font-weight: 700; color: var(--gray3);
  text-transform: uppercase; letter-spacing: 1px;
  padding: .85rem 1.2rem .3rem;
}
.mob-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.2rem; cursor: pointer;
  color: var(--gray2); font-size: .88rem;
  border-radius: .5rem; margin: .05rem .5rem;
  transition: background .15s, color .15s;
}
.mob-item span { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.mob-item:hover { background: var(--blue-dim); color: var(--gray1); }
.mob-item.active { background: var(--blue-dim); color: var(--blue3); font-weight: 600; }

/* ─── MEDIA QUERY MOBILE ─── */
@media(max-width:768px) {

  /* Layout geral */
  .sidebar { display: none !important; }
  .mobile-nav { display: flex; }
  .app-shell { flex-direction: column; }
  .main-area { min-width: 0; width: 100%; }
  .page-content { padding: .9rem .9rem 82px; }

  /* Topbar */
  .topbar { padding: .55rem .9rem; gap: .5rem; }
  .topbar-title { font-size: .95rem; }
  .topbar-toggle { font-size: 1rem; padding: .3rem; }
  .topbar-month span { font-size: .8rem; }
  .topbar-right { gap: .5rem; }
  .avatar-circle { width: 30px; height: 30px; font-size: .75rem; }

  /* Grids e colunas */
  .stats-bar { grid-template-columns: repeat(2,1fr); gap: .55rem; }
  .charts-row { grid-template-columns: 1fr; gap: .75rem; }
  .two-col { grid-template-columns: 1fr; gap: .75rem; }
  .form-row { grid-template-columns: 1fr; }
  .recur-grid { grid-template-columns: 1fr; }
  .home-quickactions { grid-template-columns: repeat(3,1fr); gap: .5rem; }
  .home-action { padding: .7rem .4rem; font-size: .72rem; }
  .home-action span:first-child { font-size: 1.3rem; }

  /* Cards */
  .card { padding: 1rem; border-radius: .85rem; }
  .stat-card { padding: .85rem; }
  .stat-card .stat-value { font-size: 1.2rem; }

  /* Tabela de transações — rolagem horizontal */
  .txn-list { overflow-x: auto; }
  .txn-row { min-width: 0; }
  .txn-desc { font-size: .82rem; }
  .txn-amount { font-size: .88rem; }
  .txn-category, .txn-bank { display: none; }

  /* Filtros avançados — empilhar */
  .filters-bar { flex-wrap: wrap; gap: .5rem; }
  .filters-bar input, .filters-bar select { min-width: 0; flex: 1 1 45%; font-size: .82rem; }

  /* Modal — bottom sheet */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%;
    border-radius: 1.2rem 1.2rem 0 0;
    max-height: 91vh;
    overflow-y: auto;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 0 auto .75rem;
  }
  .modal-header { padding: .6rem 1.2rem 0; }

  /* Formulários */
  .form-group { margin-bottom: .9rem; }
  .form-input, .form-select { font-size: 16px; /* evita zoom no iOS */ }
  .form-submit { padding: .8rem; font-size: .95rem; }

  /* Report tabs */
  .report-tabs { overflow-x: auto; gap: .35rem; padding-bottom: .25rem; }
  .report-tab { white-space: nowrap; padding: .45rem .75rem; font-size: .78rem; }

  /* Auth screen */
  .auth-card { padding: 1.75rem 1.25rem; }

  /* PIN */
  .pin-card { padding: 1.75rem 1.25rem; }
  .pin-key { width: 64px; height: 64px; font-size: 1.3rem; }

  /* Onboarding */
  .ob-card { padding: 1.75rem 1.25rem 1.35rem; }
  .ob-footer { flex-direction: column; align-items: stretch; gap: .6rem; }
  .ob-actions { justify-content: space-between; }

  /* Charts — evitar estouro */
  canvas { max-width: 100%; }

  /* Topbar toggle abre drawer no mobile */
  .topbar-toggle { display: block; }

  /* Settings layout — empilhar no mobile */
  .settings-layout { flex-direction: column; gap: .75rem; }
  .settings-sidenav {
    width: 100%; position: static;
    display: flex; gap: .3rem;
    overflow-x: auto; padding: .4rem;
    border-radius: .85rem;
  }
  .settings-navitem { flex-shrink: 0; padding: .5rem .75rem; font-size: .8rem; }
  .sni-icon { width: auto; }
  .settings-section-body { padding: 1.1rem; }

  /* Profile panel — centralizado no mobile */
  .prof-overlay { align-items: center; justify-content: center; padding: 1.5rem; }
  .prof-card { width: 100%; max-width: 320px; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN DE ALTA QUALIDADE — Phase 2 enhancements
   ═══════════════════════════════════════════════════════════ */

/* ─── Page animations ─── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim-fadein {
  animation: fadeInUp .35s cubic-bezier(.22,.68,0,1.2) both;
}
.anim-fadein:nth-child(2) { animation-delay: .04s; }
.anim-fadein:nth-child(3) { animation-delay: .08s; }
.anim-fadein:nth-child(4) { animation-delay: .12s; }
.anim-fadein:nth-child(5) { animation-delay: .16s; }

/* ─── Button micro-interactions ─── */
.btn-add, .btn-small, .action-btn, .home-action, .summary-card {
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn-add:active, .btn-small:active { transform: scale(.96); }
.home-action:active { transform: scale(.93); }
.summary-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.table-card { transition: box-shadow .2s ease; }
.table-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.45); }

/* ─── Summary card glow variants ─── */
.sc-glow-g { box-shadow: 0 0 0 1px rgba(16,185,129,.12), 0 4px 20px rgba(16,185,129,.06); }
.sc-glow-r { box-shadow: 0 0 0 1px rgba(239,68,68,.12), 0 4px 20px rgba(239,68,68,.06); }
.sc-glow-b { box-shadow: 0 0 0 1px rgba(59,130,246,.15), 0 4px 20px rgba(59,130,246,.08); }

/* ─── Progress shimmer ─── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.pf-shimmer {
  background: linear-gradient(90deg, var(--blue) 0%, #818cf8 45%, var(--blue3) 55%, var(--blue) 100%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

/* ─── Smart Alerts Bar ─── */
.smart-alerts-bar {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.1rem;
}
.smart-alert {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.sa-danger  { background: rgba(239,68,68,.1);   border-color: var(--red);    color: #fca5a5; }
.sa-warning { background: rgba(245,158,11,.1);  border-color: var(--yellow); color: #fcd34d; }
.sa-success { background: rgba(16,185,129,.1);  border-color: var(--green);  color: #6ee7b7; }
.sa-info    { background: rgba(59,130,246,.1);  border-color: var(--blue3);  color: #93c5fd; }
.sa-icon    { flex-shrink: 0; display: flex; align-items: center; }
.sa-msg     { line-height: 1.4; }

/* ─── Spendable Hero ─── */
.spendable-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: var(--r2);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 0 40px rgba(99,102,241,.12), 0 4px 24px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}
.spendable-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  pointer-events: none;
}
.sh-main { margin-bottom: 1.2rem; }
.sh-label {
  font-size: .78rem;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .55rem;
}
.sh-amount {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #c7d2fe;
  line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
}
.sh-amount.sh-neg { color: var(--red); }
.sh-sub {
  font-size: .8rem;
  color: #94a3b8;
  margin-top: .4rem;
}
.sh-sep { color: #475569; margin: 0 .2rem; }
.sh-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,.25);
  border-radius: 10px;
  padding: .75rem 1rem;
  border: 1px solid rgba(255,255,255,.06);
}
.sh-stat-item { flex: 1; text-align: center; }
.sh-divider { width: 1px; height: 30px; background: rgba(255,255,255,.08); }
.sh-si-val { font-size: 1rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.sh-si-val.green { color: var(--green); }
.sh-si-val.red   { color: var(--red); }
.sh-si-label { font-size: .7rem; color: #64748b; margin-top: .15rem; }

/* ─── Net Worth Card ─── */
.networth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.4rem;
}
.nw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.nw-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray2);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.nw-total {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}
.nw-items { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.nw-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg2);
  border-radius: 8px;
  padding: .5rem .8rem;
  flex: 1;
  min-width: 140px;
}
.nw-item-icon { color: var(--gray3); flex-shrink: 0; }
.nw-asset .nw-item-icon  { color: var(--green); }
.nw-liability .nw-item-icon { color: var(--red); }
.nw-item-label { font-size: .78rem; color: var(--gray2); flex: 1; }
.nw-item-val { font-size: .9rem; font-weight: 700; }
.nw-bar-wrap { margin-top: .5rem; }
.nw-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--bg2);
  overflow: hidden;
  display: flex;
}
.nw-bar-seg { height: 100%; transition: width .4s ease; }
.nw-seg-bank { background: var(--green); }
.nw-seg-inv  { background: var(--blue3); }
.nw-seg-debt { background: var(--red); }

/* ─── Rollover badge ─── */
.rollover-badge {
  background: rgba(99,102,241,.15);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 99px;
  padding: .1rem .5rem;
  font-size: .72rem;
  font-weight: 600;
}

/* ─── Subscriptions Settings Tab ─── */
.sub-summary {
  display: flex;
  gap: 1rem;
  background: var(--bg2);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--border);
}
.sub-sum-item { flex: 1; text-align: center; }
.sub-sum-val { font-size: 1.05rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.sub-sum-val.red  { color: var(--red); }
.sub-sum-val.blue { color: var(--blue3); }
.sub-sum-label { font-size: .72rem; color: var(--gray3); margin-top: .15rem; }
.subs-list { display: flex; flex-direction: column; gap: .5rem; }
.sub-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg2);
  border-radius: 10px;
  padding: .7rem 1rem;
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.sub-item:hover { border-color: var(--border2); }
.sub-item-icon { color: var(--blue3); flex-shrink: 0; }
.sub-item-info { flex: 1; }
.sub-item-name { font-size: .88rem; font-weight: 600; }
.sub-item-meta { font-size: .74rem; color: var(--gray3); margin-top: .1rem; }
.sub-item-amount { font-weight: 700; font-size: .95rem; color: var(--red); }
.sub-item-freq { font-size: .7rem; color: var(--gray3); margin-left: .1rem; }

/* ─── Onboarding profile picker ─── */
.ob-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-top: 1rem;
}
.ob-profile-card {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: .9rem .8rem;
  cursor: pointer;
  text-align: center;
  transition: all .2s ease;
}
.ob-profile-card:hover { border-color: var(--blue3); background: rgba(59,130,246,.06); }
.ob-profile-card.selected {
  border-color: var(--blue3);
  background: rgba(59,130,246,.12);
  box-shadow: 0 0 16px rgba(59,130,246,.2);
}
.ob-profile-icon {
  color: var(--blue3);
  display: flex;
  justify-content: center;
  margin-bottom: .4rem;
}
.ob-profile-label { font-size: .88rem; font-weight: 700; margin-bottom: .2rem; }
.ob-profile-desc  { font-size: .72rem; color: var(--gray3); line-height: 1.3; }

/* ─── Budget bar base layer for rollover ─── */
.budget-bar-track { position: relative; }
.budget-bar-base {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  pointer-events: none;
}

/* ─── Gradient border on summary cards (dark mode) ─── */
.summary-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.summary-card { position: relative; }


/* ─── Transactions mobile card layout ─── */
.txn-table-desktop { width: 100%; }
.txn-cards-mobile  { display: none; }

@media (max-width: 640px) {
  .txn-table-desktop { display: none; }
  .txn-cards-mobile  { display: block; }

  /* Filter bar stacks vertically */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem !important;
  }
  .toolbar .search-box { min-width: unset !important; }
  .toolbar .filter-select,
  .toolbar input[type="date"] { width: 100% !important; }
  .toolbar span[style*="color:var(--gray3)"] { display: none; }
}

/* Transaction card */
.txn-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.txn-card:last-of-type { border-bottom: none; }
.txn-card:active { background: var(--bg2); }

.txn-card-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.txn-dot-income  { background: var(--green); box-shadow: 0 0 6px rgba(16,185,129,.5); }
.txn-dot-expense { background: var(--red);   box-shadow: 0 0 6px rgba(239,68,68,.4); }

.txn-card-body { flex: 1; min-width: 0; }

.txn-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .3rem;
}
.txn-card-desc {
  font-size: .88rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vw;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.txn-card-amount {
  font-size: .95rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}
.txn-amt-income  { color: var(--green); }
.txn-amt-expense { color: var(--red); }

.txn-card-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.txn-card-date {
  font-size: .73rem;
  color: var(--gray3);
}
.txn-card-bank {
  font-size: .73rem;
  color: var(--gray3);
}
.txn-card-bank::before { content: '·'; margin-right: .3rem; }

.txn-card-actions {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex-shrink: 0;
}

.txn-cards-total {
  display: flex;
  justify-content: space-between;
  padding: .7rem 1rem;
  font-size: .78rem;
  color: var(--gray3);
  background: var(--bg2);
  font-weight: 600;
  border-top: 1px solid var(--border);
}


/* Allow horizontal scroll on table when viewport is narrow */
.txn-table-wrap { overflow-x: auto; }
.txn-table-wrap table { min-width: 640px; }


/* ═══════════════════════════════════════════════════════════
   CENTRAL DE DADOS
   ═══════════════════════════════════════════════════════════ */

/* Tab bar */
.data-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.data-tab-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem 1rem;
  color: var(--gray2);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.data-tab-btn:hover  { border-color: var(--border2); color: var(--white); }
.data-tab-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Section wrapper */
.data-section { display: flex; flex-direction: column; gap: 1rem; }
.data-section-header { margin-bottom: .25rem; }
.dsh-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.dsh-desc  { font-size: .82rem; color: var(--gray3); line-height: 1.5; }

/* Import drop zone */
.import-dropzone {
  border: 2px dashed var(--border2);
  border-radius: var(--r2);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: var(--bg2);
}
.import-dropzone:hover { border-color: var(--blue3); background: rgba(59,130,246,.06); }
.dz-icon  { color: var(--blue3); display: flex; justify-content: center; margin-bottom: .75rem; }
.dz-title { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.dz-sub   { font-size: .82rem; color: var(--gray3); margin-bottom: .5rem; }
.dz-formats { font-size: .75rem; color: var(--gray3); background: var(--bg3); display: inline-block; padding: .25rem .75rem; border-radius: 99px; }

/* Bank instruction cards */
.bank-instructions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .75rem;
}
.bi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1rem;
  transition: border-color .15s;
}
.bi-card:hover { border-color: var(--border2); }
.bi-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.bi-badge  { font-size: .7rem; font-weight: 800; padding: .25rem .55rem; border-radius: 6px; letter-spacing: .5px; }
.bi-name   { font-size: .88rem; font-weight: 700; }
.bi-steps  { font-size: .78rem; color: var(--gray2); line-height: 1.65; padding-left: 1.1rem; margin-bottom: .75rem; }
.bi-steps li { margin-bottom: .15rem; }
.bi-template-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: .35rem .75rem;
  color: var(--gray2);
  font-size: .78rem;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: all .15s;
}
.bi-template-btn:hover { background: var(--bg2); color: var(--blue3); border-color: var(--blue3); }

/* Models grid */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
}
.model-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1rem;
}
.model-card-top { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .75rem; }
.model-badge { font-size: .7rem; font-weight: 800; padding: .3rem .6rem; border-radius: 6px; letter-spacing: .5px; flex-shrink: 0; margin-top: .1rem; }
.model-info { flex: 1; }
.model-name { font-size: .9rem; font-weight: 700; margin-bottom: .25rem; }
.model-sep, .model-date { font-size: .73rem; color: var(--gray3); }
.model-sep code, .model-date code { background: var(--bg2); padding: .05rem .3rem; border-radius: 4px; font-size: .71rem; color: var(--blue4); }
.model-headers { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.model-col { font-size: .72rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: .15rem .4rem; color: var(--gray2); }
.model-preview { background: var(--bg); border-radius: 8px; padding: .5rem .6rem; margin-bottom: .5rem; font-family: monospace; }
.model-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .2rem; }
.model-row:last-child { margin-bottom: 0; }
.model-cell { font-size: .72rem; color: var(--gray2); background: var(--bg2); padding: .1rem .35rem; border-radius: 4px; }

/* Export tab */
.export-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1rem 1.3rem;
  margin-bottom: 1rem;
}
.exp-stat { flex: 1; min-width: 80px; text-align: center; }
.exp-stat-val { font-size: 1.1rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.exp-stat-val.blue  { color: var(--blue3); }
.exp-stat-val.green { color: var(--green); }
.exp-stat-val.red   { color: var(--red); }
.exp-stat-label { font-size: .72rem; color: var(--gray3); margin-top: .15rem; }

.export-options { display: flex; flex-direction: column; gap: .6rem; }
.export-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1rem 1.2rem;
}
.eo-icon  { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eo-info  { flex: 1; }
.eo-title { font-size: .9rem; font-weight: 700; margin-bottom: .2rem; }
.eo-desc  { font-size: .78rem; color: var(--gray3); line-height: 1.45; }

/* Mobile: export options stack */
@media (max-width: 640px) {
  .export-option { flex-wrap: wrap; }
  .export-option > .btn-add, .export-option > .btn-small { width: 100%; justify-content: center; margin-top: .25rem; }
  .bank-instructions-grid { grid-template-columns: 1fr; }
  .models-grid { grid-template-columns: 1fr; }
  .export-stats .exp-stat { min-width: 60px; }
}


/* ── Smart Import Preview ───────────────────────── */
.import-step { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 1rem 1.2rem; }
.import-step-title { font-size: .82rem; font-weight: 700; color: var(--gray2); display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.import-preview-table { display: flex; flex-direction: column; gap: 2px; }
.ipt-head { display: grid; grid-template-columns: 2fr 1fr .9fr 1fr 1fr; gap: .5rem; font-size: .7rem; font-weight: 700; color: var(--gray3); text-transform: uppercase; letter-spacing: .04em; padding: 0 .4rem .4rem; }
.ipt-row  { display: grid; grid-template-columns: 2fr 1fr .9fr 1fr 1fr; gap: .5rem; align-items: center; background: var(--card); border-radius: 6px; padding: .4rem .5rem; font-size: .78rem; }
.ipt-desc { color: var(--gray1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipt-val  { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.ipt-val.green { color: var(--green); }
.ipt-val.red   { color: var(--red); }
@media (max-width: 640px) {
  .ipt-head { grid-template-columns: 2fr 1fr; }
  .ipt-head span:nth-child(n+3) { display: none; }
  .ipt-row  { grid-template-columns: 2fr 1fr; }
  .ipt-row  span:nth-child(n+3) { display: none; }
}

/* ── Invoice View ───────────────────────────────── */
.invoice-btn { background: linear-gradient(135deg,#7C3AED22,#7C3AED11); color: #a78bfa; border-color: #7C3AED44; }
.invoice-btn:hover { background: #7C3AED33; }
.invoice-view { display: flex; flex-direction: column; gap: 1rem; }
.inv-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem; }
.inv-sum-item { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: .75rem .9rem; text-align: center; }
.inv-sum-label { font-size: .7rem; color: var(--gray3); text-transform: uppercase; letter-spacing: .04em; display: block; }
.inv-sum-val { font-size: 1rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; display: block; margin-top: .2rem; }
.inv-sum-val.red   { color: var(--red); }
.inv-sum-val.green { color: var(--green); }
.inv-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 1rem 1.1rem; }
.inv-section-title { font-size: .82rem; font-weight: 700; color: var(--gray2); display: flex; align-items: center; gap: .4rem; margin-bottom: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.inv-cat-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .78rem; }
.inv-cat-icon { width: 20px; text-align: center; flex-shrink: 0; }
.inv-cat-name { min-width: 80px; color: var(--gray1); }
.inv-cat-val  { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--red); min-width: 70px; text-align: right; flex-shrink: 0; }
.inv-period { margin-bottom: .75rem; }
.inv-period-header { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 700; color: var(--blue3); padding: .4rem .5rem; background: #2563EB18; border-radius: 6px 6px 0 0; }
.inv-period-total { color: var(--red); font-family: 'Space Grotesk', sans-serif; }
.inv-txn-row { display: grid; grid-template-columns: 50px 1fr 90px 80px; gap: .4rem; align-items: center; padding: .45rem .5rem; border-bottom: 1px solid var(--border); font-size: .78rem; }
.inv-txn-row:last-child { border-bottom: none; }
.inv-txn-date { color: var(--gray3); font-variant-numeric: tabular-nums; }
.inv-txn-desc { color: var(--gray1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-txn-cat  { color: var(--gray3); font-size: .72rem; }
.inv-txn-val  { color: var(--red); font-family: 'Space Grotesk', sans-serif; font-weight: 600; text-align: right; }
@media (max-width: 640px) {
  .inv-summary { grid-template-columns: repeat(2,1fr); }
  .inv-txn-row { grid-template-columns: 45px 1fr 65px; }
  .inv-txn-cat { display: none; }
}

/* ── Admin Panel ────────────────────────────────── */
.adm-header { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.adm-header-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#7C3AED,#2563EB); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.adm-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem; margin-bottom: .85rem; }
.adm-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); padding: .85rem .75rem; text-align: center; }
.adm-stat-val { display: block; font-size: 1.4rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; color: var(--blue3); }
.adm-stat-label { display: block; font-size: .7rem; color: var(--gray3); margin-top: .15rem; text-transform: uppercase; letter-spacing: .04em; }
.adm-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; }
.adm-section-title { font-size: .78rem; font-weight: 700; color: var(--gray2); text-transform: uppercase; letter-spacing: .05em; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .4rem; }
.adm-users-list { display: flex; flex-direction: column; }
.adm-user-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--border); }
.adm-user-row:last-child { border-bottom: none; }
.adm-user-row.adm-me { background: #2563EB08; }
.adm-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--blue),#7C3AED); display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.adm-user-info { flex: 1; min-width: 0; }
.adm-user-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-user-email { font-size: .73rem; color: var(--gray3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-user-meta { display: flex; align-items: center; gap: .6rem; font-size: .75rem; color: var(--gray2); flex-shrink: 0; }
.adm-last { font-size: .68rem; color: var(--gray3); }
.adm-reset-btn { font-size: .72rem !important; padding: .3rem .65rem !important; flex-shrink: 0; }
.sql-block { background: #0D0D1A; border: 1px solid var(--border); border-radius: 8px; padding: .85rem 1rem; font-size: .75rem; font-family: 'Courier New', monospace; color: #7dd3fc; line-height: 1.7; white-space: pre-wrap; overflow-x: auto; margin: 0; }
@media (max-width: 640px) {
  .adm-stats { grid-template-columns: repeat(2,1fr); }
  .adm-user-meta .adm-last { display: none; }
  .adm-user-row { gap: .5rem; }
}

/* ── Debit Card (Contas) ────────────────────────────────── */
.bank-card-wrap { display: flex; flex-direction: column; }
.debit-card {
  border-radius: 16px;
  padding: 1.1rem 1.25rem 1rem;
  aspect-ratio: 1.586 / 1;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  position: relative; overflow: hidden;
}
.debit-card::before {
  content: ''; position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.04);
  top: -60px; right: -60px;
}
.debit-card::after {
  content: ''; position: absolute;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,.03);
  bottom: -40px; left: -30px;
}
.dc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dc-abbr { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: .04em; font-family: 'DM Sans', sans-serif; }
.dc-nfc  { opacity: .8; }
.dc-chip {
  width: 36px; height: 28px; border-radius: 5px;
  background: linear-gradient(135deg, #d4a843 0%, #f0c96b 40%, #c8962e 100%);
  position: relative; margin: .3rem 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.dc-chip-h {
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(0,0,0,.25); transform: translateY(-50%);
}
.dc-chip-v {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(0,0,0,.25); transform: translateX(-50%);
}
.dc-number {
  font-size: .85rem; letter-spacing: .18em; color: rgba(255,255,255,.85);
  font-family: 'Space Grotesk', monospace; font-weight: 500;
}
.dc-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.dc-lbl { font-size: .55rem; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .1rem; }
.dc-val { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: .04em; }
.dc-info { background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 14px 14px; padding: .75rem 1.1rem; }
.dc-info-name { font-size: .88rem; font-weight: 700; margin-bottom: .2rem; }
.dc-info-balance { font-size: 1.15rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
.dc-info-balance.pos { color: var(--green); }
.dc-info-balance.neg { color: var(--red); }

/* ── Credit Card (Cartões) ──────────────────────────────── */
.cc-wrap { display: flex; flex-direction: column; }
.credit-card-display {
  border-radius: 12px;
  padding: .6rem .8rem .55rem;
  aspect-ratio: 1.586 / 1;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  position: relative; overflow: hidden;
}
.credit-card-display::before {
  content: ''; position: absolute;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.04); top: -50px; right: -50px;
}
.cc-top-row    { display: flex; justify-content: space-between; align-items: flex-start; }
.cc-issuer     { font-size: .78rem; font-weight: 800; color: #fff; letter-spacing: .04em; font-family: 'DM Sans', sans-serif; }
.cc-nfc        { opacity: .8; }
.cc-chip-block { margin: .15rem 0; }
.cc-chip {
  width: 26px; height: 20px; border-radius: 4px;
  background: linear-gradient(135deg,#d4a843,#f0c96b 40%,#c8962e);
  position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cc-chip-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.25); transform: translateY(-50%); }
.cc-chip-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.25); transform: translateX(-50%); }
.cc-number { font-size: .68rem; letter-spacing: .13em; color: rgba(255,255,255,.85); font-family: 'Space Grotesk', monospace; font-weight: 500; }
.cc-bottom-row { display: flex; justify-content: space-between; align-items: flex-end; }
.cc-small-lbl  { font-size: .4rem; color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .08rem; }
.cc-holder-name{ font-size: .56rem; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: .03em; }
/* Brand logos */
.cc-brand-visa { font-style: italic; font-weight: 900; font-size: .88rem; font-family: 'Times New Roman', serif; color: #fff; letter-spacing: .03em; }
.cc-brand-mc   { display: flex; align-items: center; }
.mc-r { width: 17px; height: 17px; border-radius: 50%; background: #EB001B; opacity: .95; }
.mc-y { width: 17px; height: 17px; border-radius: 50%; background: #F79E1B; opacity: .95; margin-left: -8px; }
.cc-brand-elo  { font-weight: 900; font-size: .72rem; color: #FFD700; letter-spacing: .05em; font-family: 'DM Sans', sans-serif; }
.cc-brand-amex { font-weight: 800; font-size: .65rem; color: #fff; letter-spacing: .1em; font-family: 'DM Sans', sans-serif; }
/* Below card */
.cc-info-row { display: flex; justify-content: space-between; background: var(--card); border: 1px solid var(--border); border-top: none; border-bottom: none; padding: .45rem .8rem; }
.cc-info-item { text-align: center; }
.cc-info-lbl  { font-size: .58rem; color: var(--gray3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .1rem; }
.cc-info-val  { font-size: .8rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.cc-info-val.red { color: var(--red); }
.cc-bar-row  { background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; padding: .45rem .8rem; }
.cc-bank-badge { font-size: .58rem; background: #2563EB22; color: var(--blue3); padding: .1rem .3rem; border-radius: 4px; margin-left: .3rem; }

@media (max-width: 640px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  /* Hide "Cartão" label column — name already shown on the card face */
  .cc-info-row .cc-info-item:first-child { display: none; }
  .cc-info-row { padding: .38rem .6rem; }
  .cc-info-lbl { font-size: .5rem; }
  .cc-info-val { font-size: .75rem; }
  .cc-bar-row  { padding: .38rem .6rem; }
  .cc-bar-row > div:first-child { font-size: .64rem !important; }
  .cc-bar-row .btn-small  { font-size: .64rem !important; padding: .2rem .4rem !important; }
  .cc-bar-row .action-btn { padding: .22rem .32rem !important; }
  .cc-bar-row > div:last-child { gap: .3rem !important; }
}

/* ── Transactions Filter (mobile-optimized) ── */
.txn-filter-card { padding: .8rem .95rem !important; margin-bottom: 1rem; }
.txn-search-row  { display: flex; gap: .5rem; align-items: center; }
.txn-search-row .search-box { flex: 1; }
.txn-filter-btn  { display: none; flex-shrink: 0; white-space: nowrap; align-items: center; gap: .3rem; }
.txn-filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.txn-filter-panel { margin-top: .6rem; }
.txn-filter-grid { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.txn-date-row    { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.txn-date-sep    { font-size: .82rem; color: var(--gray3); white-space: nowrap; }

@media (max-width: 640px) {
  .txn-filter-btn { display: flex; }
  .txn-filter-panel { display: none; margin-top: .5rem; }
  .txn-filter-panel.open { display: block; }
  .txn-filter-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .4rem; margin-bottom: .4rem;
  }
  .txn-filter-grid .filter-select { width: 100%; }
  .txn-date-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: .4rem; align-items: center;
  }
  .txn-date-row .btn-small { grid-column: 1 / -1; justify-content: center; }
  .txn-date-sep { text-align: center; }
}

/* ── Bank Item / App Logo (Contas) ── */
.banks-list { display: flex; flex-direction: column; gap: .5rem; }
.bank-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2); padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.bank-item:hover { border-color: var(--border2); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.bank-icon-badge {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); letter-spacing: .02em;
  font-family: 'Space Grotesk', sans-serif;
}
.bank-item-info { flex: 1; min-width: 0; }
.bank-item-name { font-size: .9rem; font-weight: 700; margin-bottom: .15rem; }
.bank-item-type { font-size: .72rem; color: var(--gray3); }
.bank-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex-shrink: 0; }
.bank-item-bal { font-size: 1rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
.bank-item-bal.pos { color: var(--green); }
.bank-item-bal.neg { color: var(--red); }
.bank-item-btns { display: flex; gap: .3rem; }