@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-base:        #09090b;
  --bg-surface:     rgba(255, 255, 255, 0.03);
  --bg-elevated:    rgba(255, 255, 255, 0.055);
  --bg-hover:       rgba(255, 255, 255, 0.08);
  --border:         rgba(255, 255, 255, 0.06);
  --border-light:   rgba(255, 255, 255, 0.04);
  --border-bright:  rgba(255, 255, 255, 0.12);
  --text-primary:   #fafafa;
  --text-secondary: #94a3b8;
  --text-muted:     rgba(255, 255, 255, 0.28);
  --accent:         #3b82f6;
  --accent-dim:     rgba(59,130,246,.15);
  --income:         #10b981;
  --income-bg:      rgba(16,185,129,.10);
  --expense:        #f43f5e;
  --expense-bg:     rgba(244,63,94,.10);
  --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --sidebar-w:      220px;
  --nav-h:          56px;
  --radius:         12px;
  --radius-lg:      16px;
  /* Glass-edge recipe — shared across cards */
  --glass-border:   1px solid rgba(255, 255, 255, 0.04);
  --glass-shadow:   inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 24px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { direction: rtl; font-size: 16px; }
body { font-family: 'Heebo', sans-serif; background: var(--bg-base); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; }
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(139, 92, 246, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(3, 4, 11, 0) 0%, transparent 100%);
}
/* Film grain — breaks the flat plastic feel; z-index above everything decorative */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}
.main-content, .sidebar { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; cursor: pointer; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

/* ===== NAVBAR (mobile) ===== */
.navbar {
  display: none;
  position: fixed; top: 0; right: 0; left: 0; height: var(--nav-h);
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
  padding: 0 1rem; align-items: center; justify-content: space-between; z-index: 200;
}
.nav-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--accent); }
.nav-brand svg { stroke: var(--accent); }
.nav-menu-btn { background: none; border: none; color: var(--text-primary); cursor: pointer; padding: .25rem; }

/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed; top: 16px; right: 16px;
  width: var(--sidebar-w); height: calc(100vh - 32px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: var(--glass-border);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; gap: 1.75rem; padding: 1.5rem 1rem;
  z-index: 100;
}
.sidebar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; color: var(--accent); padding: 0 .5rem; }
.sidebar-brand svg { stroke: var(--accent); }
.sidebar-nav { display: flex; flex-direction: column; gap: .2rem; }
.nav-link {
  display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; border-radius: 10px;
  font-size: .9rem; color: var(--text-secondary); cursor: pointer;
  border-right: 3px solid transparent; transition: all .15s;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-link.active {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
  color: #fff; font-weight: 700;
  border-right: 3px solid transparent;
  border-image: var(--brand-gradient) 1;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
}
.nav-link svg { flex-shrink: 0; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 99; }

/* ===== MAIN CONTENT ===== */
.main-content { margin-right: calc(var(--sidebar-w) + 32px); min-height: 100vh; padding: 2rem; }

/* ===== SCREENS ===== */
.screen { display: none; max-width: 1060px; animation: fadeIn .25s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== PAGE HEADER ===== */
.page-header { margin-bottom: 1.75rem; }
.page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; }
.page-subtitle { font-size: .875rem; color: var(--text-secondary); margin-top: .2rem; display: block; }

/* ===== CARDS ===== */
.card {
  background: rgba(255, 255, 255, 0.03);
  border: var(--glass-border);
  border-radius: var(--radius-lg); padding: 1.75rem 2rem;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}
.card-title { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }

/* ===== STAT GRID ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: var(--glass-border);
  border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 16px 40px rgba(0,0,0,0.6);
}
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.stat-label { font-size: .78rem; color: var(--text-muted); margin-bottom: .2rem; }
.stat-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== BENTO GRID ===== */
.bento-outer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; margin-bottom: 1.5rem; align-items: stretch; }
.bento-right { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.bento-hero {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  display: flex; flex-direction: column; justify-content: center; gap: .55rem;
  position: relative; overflow: hidden; min-height: 240px;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.07), 0 24px 64px rgba(0,0,0,0.6);
}
.bento-hero::before {
  content: '';
  position: absolute; top: -30%; right: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.bento-hero::after {
  content: '';
  position: absolute; bottom: 10%; left: 5%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.bento-hero-eyebrow {
  position: absolute; top: 1.75rem; right: 2rem; z-index: 1;
  font-size: .68rem; color: rgba(148,163,184,0.6);
  text-transform: uppercase; letter-spacing: .12em;
}
.bento-hero-amount {
  font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  position: relative; z-index: 1;
  font-variant-numeric: tabular-nums;
}
.bento-hero-trend {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
  padding: .3rem .85rem; border-radius: 99px;
  width: fit-content; position: relative; z-index: 1;
}
.bento-hero-sub { font-size: .78rem; color: rgba(148,163,184,0.45); position: relative; z-index: 1; }
.bento-stat {
  background: rgba(255, 255, 255, 0.03);
  border: var(--glass-border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .35rem;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.bento-stat:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.08); }
.bento-stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: .3rem;
}
.bento-stat-label { font-size: .75rem; color: var(--text-muted); letter-spacing: .02em; }
.bento-stat-value { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.bento-stat-hint { font-size: .7rem; color: var(--text-muted); margin-top: .1rem; }

/* ===== RICH AMOUNT ===== */
.amt-sym { font-size: .7em; color: rgba(255,255,255,0.3); font-weight: 500; }
.amt-int { font-weight: 700; font-variant-numeric: tabular-nums; }
.amt-dec { font-size: .75em; color: rgba(255,255,255,0.3); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Tinted muted for income/expense cells */
.amount-inc .amt-sym, .amount-inc .amt-dec { color: rgba(16,185,129,0.5); }
.amount-exp .amt-sym, .amount-exp .amt-dec { color: rgba(244,63,94,0.5); }

/* ===== TX AVATAR ===== */
.tx-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  background: var(--bg-elevated);
}
.tx-vendor-cell { display: flex; align-items: center; gap: .75rem; }
.tx-vendor-name { font-weight: 600; font-size: .875rem; color: var(--text-primary); }
.tx-vendor-cat { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

/* ===== TWO COL ===== */
.two-col { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; }

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--brand-gradient); color: #fff; border: none; border-radius: var(--radius);
  padding: .6rem 1.25rem; font-family: 'Heebo', sans-serif; font-size: .875rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: all .2s;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-ghost {
  background: rgba(255,255,255,0.04); color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius);
  padding: .6rem 1.25rem; font-family: 'Heebo', sans-serif; font-size: .875rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; transition: all .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.btn-danger { background: var(--expense-bg); color: var(--expense); border: 1px solid var(--expense); border-radius: var(--radius); padding: .6rem 1.25rem; font-family: 'Heebo', sans-serif; font-size: .875rem; cursor: pointer; transition: all .2s; }
.btn-danger:hover { background: var(--expense); color: #fff; }

/* ===== INPUTS ===== */
input:not([type=color]):not([type=checkbox]), select, textarea {
  font-family: 'Heebo', sans-serif; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius); color: var(--text-primary); padding: .6rem .9rem; font-size: .875rem;
  width: 100%; direction: rtl; transition: border-color .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
select option { background-color: #141417; color: var(--text-primary); }
.prop-table .prop-input { text-align: left; direction: ltr; padding: .3rem .4rem; }
.form-label { display: block; font-size: .8rem; color: var(--text-secondary); margin-bottom: .35rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.error-msg { color: var(--expense); font-size: .85rem; margin-top: .5rem; }

/* ===== FILTERS ===== */
.filters-bar { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 160px; }
.search-icon { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-wrap input { padding-right: 2.25rem; }
.filters-bar select { width: auto; }

/* ===== TX SUMMARY ===== */
.tx-summary { display: flex; gap: 1.25rem; margin-bottom: .75rem; font-size: .85rem; color: var(--text-muted); flex-wrap: wrap; }
.tx-summary .income { color: var(--income); }
.tx-summary .expense { color: var(--expense); }
.tx-summary .net-pos { color: var(--income); font-weight: 600; }
.tx-summary .net-neg { color: var(--expense); font-weight: 600; }

/* ===== DATA TABLE ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.data-table th {
  text-align: right; padding: .7rem 1rem; font-weight: 500; font-size: .78rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.data-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.amount-inc {
  color: var(--income); font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(16,185,129,0.35);
}
.amount-exp {
  color: var(--expense); font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(244,63,94,0.35);
}
.type-badge { display: inline-block; padding: .18rem .55rem; border-radius: 20px; font-size: .74rem; font-weight: 600; }
.type-income { background: var(--income-bg); color: var(--income); }
.type-expense { background: var(--expense-bg); color: var(--expense); }
.cat-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 20px; font-size: .76rem; font-weight: 500; }
.cat-badge-clickable { cursor: pointer; transition: filter .15s, transform .15s; }
.cat-badge-clickable:hover { filter: brightness(1.25); transform: translateY(-1px); }
.edit-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: .25rem; border-radius: 6px; transition: color .15s; }
.edit-btn:hover { color: var(--accent); }

/* ===== PAGINATION ===== */
.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; align-items: center; }
.pagination button { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.page-info { font-size: .85rem; color: var(--text-secondary); padding: 0 .75rem; }

/* ===== DROP ZONE ===== */
.drop-zone { text-align: center; padding: 3rem 2rem; cursor: pointer; border: 2px dashed var(--border); transition: all .2s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-dim); }
.drop-zone svg { display: block; margin: 0 auto 1rem; color: var(--text-muted); }
.drop-title { font-weight: 600; margin-bottom: .3rem; }
.drop-sub { color: var(--text-muted); font-size: .85rem; }

/* ===== IMPORT ===== */
.import-chips { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.import-chip { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .65rem 1.1rem; }
.import-chip .chip-label { font-size: .74rem; color: var(--text-muted); }
.import-chip .chip-value { font-size: 1.3rem; font-weight: 700; margin-top: .1rem; }

/* ===== SPINNER ===== */
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== TABS ===== */
.tabs-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn { background: none; border: none; padding: .65rem 1.25rem; font-family: 'Heebo', sans-serif; font-size: .875rem; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent); }

/* ===== ACCOUNT / CAT LIST ===== */
.list-item { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; background: rgba(255,255,255,0.03); border: var(--glass-border); border-radius: var(--radius); margin-bottom: .5rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.list-item-name { font-weight: 600; }
.list-item-sub { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.list-item-del { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: .3rem; transition: color .15s; }
.list-item-del:hover { color: var(--expense); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.cat-chip { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; transition: background .15s, border-color .15s; }
.cat-chip:hover { background: var(--bg-elev); border-color: var(--accent); }
.cat-chip-left { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.cat-chip-edit { font-size: .85rem; color: var(--text-muted); opacity: .6; }
.cat-chip:hover .cat-chip-edit { opacity: 1; }
.cat-savings-badge { font-size: .85rem; margin-inline-start: .2rem; }
.cat-capital-badge { font-size: .85rem; margin-inline-start: .2rem; }
.cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ===== CHAT ===== */
.chat-messages { min-height: 100px; max-height: 300px; overflow-y: auto; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.chat-empty { color: var(--text-muted); font-size: .85rem; text-align: center; padding: 1.5rem; }
.chat-msg { display: flex; gap: .6rem; align-items: flex-start; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.chat-msg.user .chat-avatar { background: var(--accent); }
.chat-msg.ai .chat-avatar { background: var(--bg-elevated); }
.chat-bubble { background: var(--bg-elevated); border-radius: 10px; padding: .55rem .85rem; font-size: .875rem; line-height: 1.6; max-width: 80%; white-space: pre-wrap; }
.chat-msg.user .chat-bubble { background: var(--accent); }
.chat-input-row { display: flex; gap: .75rem; }
.chat-input-row input { flex: 1; }

/* ===== MODAL ===== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 500; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-box {
  background: rgba(255, 255, 255, 0.04);
  border: var(--glass-border);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 32px 80px rgba(0,0,0,0.7);
  border-radius: var(--radius-lg); padding: 1.5rem;
  width: min(480px, 95vw); max-height: 90vh; overflow-y: auto;
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.modal-header h3 { font-size: 1rem; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; }
.modal-row { margin-bottom: .75rem; }

/* ===== RECENT TX ===== */
.recent-tx-item { display: flex; align-items: center; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.recent-tx-item:last-child { border-bottom: none; }
.recent-tx-left { display: flex; align-items: center; gap: .75rem; }
.recent-tx-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.recent-tx-name { font-size: .875rem; font-weight: 500; }
.recent-tx-meta { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

/* ===== CAT BREAKDOWN ===== */
.cat-bar-item { margin-bottom: .65rem; }
.cat-bar-clickable { cursor: pointer; padding: .3rem .4rem; border-radius: .4rem; transition: background .15s; }
.cat-bar-clickable:hover { background: rgba(59,130,246,.08); }
.cat-bar-header { display: flex; justify-content: space-between; font-size: .83rem; margin-bottom: .3rem; }
.cat-bar-track { height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 3px; transition: width .5s; }

/* ===== UPDATE TOAST ===== */
.update-toast {
  position: fixed; 
  bottom: -100px; 
  left: 50%; 
  transform: translateX(-50%);
  background: var(--bg-elevated); 
  border: 1px solid var(--accent);
  padding: 1rem 1.5rem; 
  border-radius: var(--radius-lg); 
  z-index: 9999;
  display: flex; 
  align-items: center; 
  gap: 1.5rem; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.update-toast.show { 
  bottom: 2rem; 
}
.update-toast button {
  background: var(--accent); 
  color: #fff; 
  border: none; 
  border-radius: var(--radius);
  padding: 0.5rem 1rem; 
  font-family: 'Heebo', sans-serif; 
  font-weight: 600; 
  cursor: pointer;
  transition: background 0.2s;
}
.update-toast button:hover {
  background: #2563eb;
}

/* ===== PERIOD SELECTOR ===== */
.period-selector { margin-bottom: 1.25rem; }
.period-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.period-btn {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .4rem 1rem; font-family: 'Heebo', sans-serif; font-size: .8rem; color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.period-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.period-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.period-custom { display: none; gap: .6rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.period-custom input[type=date] { width: auto; }

/* ===== TRANSFER / REFUND / NON-COUNTED ===== */
.type-transfer { background: rgba(100,116,139,.15); color: #94a3b8; }
.type-refund { background: rgba(14,165,233,.15); color: #0ea5e9; }
.amount-muted { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-noncounted td { background: rgba(255,255,255,.015); }
.income-color { color: var(--income); text-shadow: 0 0 12px rgba(16,185,129,0.25); }
.expense-color { color: var(--expense); text-shadow: 0 0 12px rgba(244,63,94,0.25); }

/* ===== ACCOUNT BALANCES (dashboard) ===== */
.account-balance-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.account-balance-row:last-child { border-bottom: none; }

/* ===== BUDGET ===== */
.budget-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.budget-label { font-size: .75rem; color: var(--text-muted); margin-bottom: .15rem; }
.budget-val { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-list { display: flex; flex-direction: column; gap: .7rem; }
.budget-item { padding: .6rem .85rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; border-right-width: 3px; }
.budget-item.budget-ok { border-right-color: var(--income); }
.budget-item.budget-warn { border-right-color: #eab308; }
.budget-item.budget-danger { border-right-color: #f97316; }
.budget-item.budget-over { border-right-color: var(--expense); animation: pulse-over 2s infinite; }
@keyframes pulse-over { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); } }
.budget-row-top, .budget-row-bot { display: flex; justify-content: space-between; font-size: .82rem; }
.budget-row-top { font-weight: 600; margin-bottom: .4rem; }
.budget-row-bot { color: var(--text-muted); font-size: .75rem; margin-top: .35rem; }
.budget-nums { color: var(--text-secondary); font-weight: 500; }
.budget-bar-track { height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
.budget-item.budget-ok .budget-bar-fill { background: var(--income); }
.budget-item.budget-warn .budget-bar-fill { background: #eab308; }
.budget-item.budget-danger .budget-bar-fill { background: #f97316; }
.budget-item.budget-over .budget-bar-fill { background: var(--expense); }
.budget-bar-fill { height: 100%; border-radius: 3px; transition: width .5s; }

/* ===== BUDGET SETTINGS ===== */
.budget-setting-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--border); gap: 1rem; }
.budget-setting-row:last-child { border-bottom: none; }
.budget-cat-name { font-size: .9rem; }
.budget-input-wrap { position: relative; width: 150px; }
.budget-currency { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: .85rem; }
.budget-input { padding-right: 1.75rem; text-align: left; direction: ltr; }

/* ===== CASH FLOW STATEMENT ===== */
.cf-row { display: flex; justify-content: space-between; padding: .65rem .25rem; border-bottom: 1px solid var(--border); font-size: .92rem; }
.cf-row:last-child { border-bottom: none; }
.cf-income span:last-child { color: var(--income); font-weight: 600; }
.cf-expense span:last-child { color: var(--expense); font-weight: 600; }
.cf-net { background: var(--bg-elevated); margin-top: .25rem; border-radius: 8px; padding: .75rem .85rem; font-weight: 700; border-bottom: none; }
.cf-total { background: var(--accent-dim); margin-top: .5rem; border-radius: 8px; padding: .85rem .85rem; font-weight: 700; font-size: 1rem; border-bottom: none; }
.cf-savings span:last-child { color: var(--text-secondary); font-weight: 600; }

/* ===== AUTO-CATEGORIZE MODAL ===== */
.autocat-summary { color: var(--text-secondary); font-size: .9rem; margin-bottom: 1rem; }
.autocat-list { display: flex; flex-direction: column; gap: .7rem; max-height: 55vh; overflow-y: auto; padding-inline-end: .25rem; }
.autocat-row { background: var(--bg-elevated); border-radius: 8px; padding: .75rem .85rem; }
.autocat-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .3rem; }
.autocat-vendor { font-weight: 600; }
.autocat-count { font-size: .78rem; color: var(--text-muted); }
.autocat-candidates { font-size: .78rem; color: var(--text-muted); margin-bottom: .5rem; }
.autocat-select { width: 100%; }

/* ===== NON-LIQUID FLOW CARD ===== */
.account-group-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 1rem 0 .35rem; padding-top: .5rem; border-top: 1px dashed var(--border); }
.nonliquid-flow-list { display: flex; flex-direction: column; gap: .4rem; }
.nonliquid-flow-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem .75rem; background: var(--bg-elevated); border-radius: 8px; }
.nonliquid-flow-nums { display: flex; gap: .9rem; align-items: center; font-size: .85rem; white-space: nowrap; }
@media (max-width: 640px) {
  .nonliquid-flow-row { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .nonliquid-flow-nums { width: 100%; justify-content: space-between; }
}

/* ===== YOY ===== */
.yoy-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: .5rem .75rem; align-items: center; font-size: .85rem; }
.yoy-head { font-size: .75rem; color: var(--text-muted); font-weight: 500; }
.yoy-label { font-weight: 500; }
.yoy-muted { color: var(--text-muted); }

/* ===== FORECAST ===== */
.forecast-main { text-align: center; padding: .5rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.forecast-label { font-size: .8rem; color: var(--text-muted); margin-bottom: .35rem; }
.forecast-big { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.forecast-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.forecast-split > div { display: flex; flex-direction: column; align-items: center; padding: .75rem; background: var(--bg-elevated); border-radius: 10px; }
.forecast-item-label { font-size: .75rem; color: var(--text-muted); margin-bottom: .2rem; }
.forecast-item-val { font-size: 1.05rem; font-weight: 700; }
.forecast-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.forecast-month { padding: .7rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.forecast-month-label { font-size: .72rem; color: var(--text-muted); margin-bottom: .15rem; }
.forecast-month-val { font-size: .95rem; font-weight: 700; }

/* ===== MOBILE — see big mobile section at end of file ===== */
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ===== Import Template Wizard ===== */
.tpl-map-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tpl-map-table th,
.tpl-map-table td { padding: .4rem .5rem; border: 1px solid var(--border); text-align: right; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.tpl-map-table thead th { background: var(--bg-subtle); font-weight: 600; }
.tpl-map-table thead tr:nth-child(2) th { padding: .3rem; background: var(--bg); }
.tpl-role-select { width: 100%; padding: .25rem .4rem; font-size: .8rem; }
.tpl-preview-ok { color: var(--income); font-size: .85rem; margin-bottom: .5rem; }
.tpl-preview-warn { color: var(--expense); font-size: .9rem; padding: .5rem .75rem; background: rgba(239,68,68,.08); border-radius: .4rem; }
.tpl-preview-list { display: flex; flex-direction: column; gap: .3rem; }
.tpl-preview-tx { display: flex; gap: 1rem; padding: .35rem .6rem; background: var(--bg-subtle); border-radius: .35rem; font-size: .85rem; }

/* ===== Templates management ===== */
.template-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: .5rem; margin-bottom: .5rem; }
.template-main { flex: 1; min-width: 0; }
.template-name { font-weight: 600; margin-bottom: .2rem; }
.template-meta { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.template-actions { display: flex; gap: .4rem; }

/* ===== Parse summary on review screen ===== */
.parse-summary { display: flex; flex-wrap: wrap; gap: 1rem; padding: .6rem .8rem; background: var(--bg-subtle); border-radius: .5rem; margin-bottom: .75rem; font-size: .85rem; }
.parse-summary-badge { padding: .15rem .6rem; background: var(--accent); color: white; border-radius: .4rem; font-size: .75rem; font-weight: 600; }
.parse-summary-badge.parse-summary-ai { background: var(--warn, #f59e0b); }

/* ===== Auto-propagate category toast ===== */
.propagate-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--income); color: white; padding: .7rem 1.2rem;
  border-radius: .5rem; font-size: .9rem; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 1000;
  opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.propagate-toast.open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Category Rules ===== */
.rules-table-head { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: .75rem; padding: .4rem .6rem; font-weight: 600; font-size: .85rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.rules-row { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: .75rem; align-items: center; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.rules-pattern { font-weight: 500; }
.rules-cat { font-size: .9rem; color: var(--text-muted); }
.rules-default-row { display: flex; gap: 1rem; padding: .3rem .5rem; border-bottom: 1px dashed var(--border); font-size: .82rem; }
.rules-default-row .rules-pattern { flex: 1; color: var(--text); }
.rules-default-row .rules-cat { color: var(--accent); }

/* ===== Recurring ===== */
.recurring-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.recurring-summary-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: .65rem .85rem; display: flex; flex-direction: column; gap: .25rem; }
.recurring-summary-label { font-size: .72rem; color: var(--text-muted); }
.recurring-summary-val { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .recurring-summary { grid-template-columns: 1fr; gap: .4rem; }
  .recurring-summary-val { font-size: .95rem; }
}
.tx-select-toolbar { font-size: .85rem; }
.tx-select-toolbar:empty { display: none !important; }
.recurring-mode-toggle { position: sticky; top: 0; z-index: 5; display: flex; gap: .5rem; background: var(--bg-card); padding: .5rem 0 .75rem; margin-bottom: .25rem; }
.recurring-mode-toggle .mode-btn { flex: 1; padding: .6rem .9rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: .6rem; color: var(--text-secondary); font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: background .15s, border-color .15s; }
.recurring-mode-toggle .mode-btn:hover { background: var(--bg-hover); }
.recurring-mode-toggle .mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.recurring-mode-toggle .mode-count { background: rgba(255,255,255,.2); padding: .1rem .5rem; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.recurring-mode-toggle .mode-btn:not(.active) .mode-count { background: rgba(148,163,184,.2); color: var(--text-secondary); }
.recurring-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.recurring-table tr.recurring-row { cursor: pointer; transition: background .15s; }
.recurring-table tr.recurring-row:hover { background: rgba(59,130,246,.08); }
.recurring-table tr.recurring-row-hidden { opacity: .5; }
.drill-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-top: .5rem; }
.drill-stats > div { background: var(--bg-elev); border: 1px solid var(--border); border-radius: .5rem; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .2rem; }
.drill-stat-label { font-size: .75rem; color: var(--text-muted); }
.drill-stat-val { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ===== Top vendors + vendor drill ===== */
.top-vendors-table tr.vendor-row { transition: background .15s; }
.top-vendors-table tr.vendor-row td { cursor: pointer; }
.top-vendors-table tr.vendor-row td:last-child { cursor: default; }
.top-vendors-table tr.vendor-row:hover { background: rgba(59,130,246,.08); }
.vendor-hide-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: .15rem .45rem; border-radius: 4px; font-size: .85rem; cursor: pointer; transition: all .15s; }
.vendor-hide-btn:hover { background: rgba(239,68,68,.12); color: var(--expense); border-color: rgba(239,68,68,.25); }
.hidden-vendors-wrap { margin-top: .6rem; }
.hidden-vendors-toggle { width: 100%; font-size: .8rem; padding: .35rem .75rem; }
.hidden-vendors-list { display: none; margin-top: .5rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg-elevated); overflow: hidden; }
.hidden-vendors-list.open { display: block; }
.hidden-vendor-row { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--border); font-size: .85rem; }
.hidden-vendor-row:last-child { border-bottom: none; }
.hidden-vendor-name { font-weight: 500; }
.hidden-vendor-total { font-weight: 600; }
.hidden-vendor-restore { font-size: .78rem; padding: .25rem .6rem; color: var(--accent); }
.vendor-raw-list { margin-top: 1rem; font-size: .82rem; color: var(--text-muted); }
.vendor-raw-chip { display: inline-block; background: var(--bg-elevated); border: 1px solid var(--border); padding: .15rem .55rem; border-radius: 20px; font-size: .75rem; margin: .15rem; color: var(--text-secondary); }
.vendor-alias-panel { margin-top: 1rem; padding: .85rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: .6rem; }
.vendor-alias-head { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.vendor-alias-tag { background: var(--accent-dim); color: var(--accent); font-size: .7rem; padding: .1rem .55rem; border-radius: 20px; font-weight: 600; }
.vendor-alias-sub { font-size: .78rem; color: var(--text-muted); margin: .35rem 0 .75rem; line-height: 1.5; }
.vendor-alias-body textarea { width: 100%; font-family: inherit; font-size: .85rem; resize: vertical; }

/* ===== BUDGET GENERATOR (v1.11) ===== */
.bgen-table td, .bgen-table th { vertical-align: top; }
.bgen-months { display: flex; gap: .35rem; flex-wrap: wrap; }
.bgen-mo { display: inline-block; padding: .2rem .5rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; font-size: .8rem; }
.bgen-mo-out { background: rgba(255, 180, 0, .12); border-color: rgba(255, 180, 0, .5); text-decoration: line-through; color: var(--text-muted); }
.bgen-stats { font-size: .78rem; color: var(--text-secondary); line-height: 1.5; }
.bgen-badge { display: inline-block; margin-top: .2rem; padding: .1rem .45rem; border-radius: 10px; background: rgba(255, 180, 0, .15); color: #e0a820; font-size: .7rem; font-weight: 600; }
.bgen-notes { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.bgen-note { display: inline-block; padding: .12rem .5rem; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: .72rem; color: var(--text-secondary); }
.bgen-note-hot { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .4); color: #ef4444; font-weight: 600; }
.bgen-advice { margin-bottom: 1rem; padding: .85rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: .6rem; font-size: .85rem; }
.bgen-floor-tag { margin-top: .3rem; padding: .15rem .5rem; border-radius: 8px; background: rgba(59, 130, 246, .14); color: #60a5fa; font-size: .72rem; font-weight: 600; display: inline-block; }
.bgen-fixed-tag { margin-top: .3rem; padding: .15rem .5rem; border-radius: 8px; background: rgba(34, 197, 94, .14); color: #4ade80; font-size: .72rem; font-weight: 600; display: inline-block; }
.bgen-ai-advice { margin-top: .35rem; padding: .35rem .55rem; border-radius: 8px; background: rgba(168, 85, 247, .12); border: 1px solid rgba(168, 85, 247, .3); color: #c4b5fd; font-size: .78rem; line-height: 1.45; }
.modal-box-wide { width: min(1400px, 97vw); max-width: min(1400px, 97vw); }
.bgen-table { width: 100%; table-layout: auto; }
.bgen-table th, .bgen-table td { white-space: normal; word-break: break-word; }
.bgen-table td:nth-child(2) { min-width: 160px; }
.bgen-table td:nth-child(3) { min-width: 220px; }
.bgen-table td:nth-child(4) { min-width: 200px; }
.bgen-table td:nth-child(5) { min-width: 140px; }

/* ===== BUDGET SCREEN (v1.12) ===== */
.budget-month-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.budget-month-label { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: .5rem; }
.budget-month-tag { font-size: .7rem; font-weight: 600; padding: .15rem .55rem; border-radius: 10px; background: var(--accent-dim); color: var(--accent); }
.budget-month-tag-future { background: rgba(168, 85, 247, .15); color: #c084fc; }
.budget-month-tag-past { background: rgba(100, 116, 139, .18); color: #94a3b8; }

.budget-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.budget-summary-card { padding: .85rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; }
.budget-summary-card .budget-label { font-size: .78rem; color: var(--text-muted); margin-bottom: .25rem; }
.budget-summary-card .budget-val { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-summary-card .budget-sub { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; }

.budget-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }

.budget-screen-section { margin-top: 1rem; }
.budget-screen-heading { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; color: var(--text-secondary); }
.budget-screen-list-head { display: grid; grid-template-columns: 1.5fr 1fr 170px 1fr; gap: .75rem; align-items: center; padding: .35rem .75rem; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.budget-screen-list-head span:last-child { text-align: right; }
.budget-screen-table { display: flex; flex-direction: column; gap: .4rem; }
.budget-screen-row { display: grid; grid-template-columns: 1.5fr 1fr 170px 1fr; gap: .75rem; align-items: center; padding: .55rem .75rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; border-right-width: 3px; border-right-color: var(--border); }
.budget-screen-row.budget-ok { border-right-color: var(--income); }
.budget-screen-row.budget-warn { border-right-color: #eab308; }
.budget-screen-row.budget-danger { border-right-color: #f97316; }
.budget-screen-row.budget-over { border-right-color: var(--expense); }
.budget-screen-cat { font-size: .9rem; font-weight: 500; }
.budget-screen-cat-link { cursor: pointer; }
.budget-screen-cat-link:hover { text-decoration: underline; }
.budget-screen-actual { font-size: .88rem; font-weight: 600; }
.budget-screen-budget { font-size: .88rem; font-weight: 600; color: var(--text-secondary); }
.budget-screen-bar-track { height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
.budget-screen-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s; }
.budget-screen-row.budget-ok .budget-screen-bar-fill { background: var(--income); }
.budget-screen-row.budget-warn .budget-screen-bar-fill { background: #eab308; }
.budget-screen-row.budget-danger .budget-screen-bar-fill { background: #f97316; }
.budget-screen-row.budget-over .budget-screen-bar-fill { background: var(--expense); }

.budget-unforeseen-row { border-style: dashed; background: rgba(167, 139, 250, .06); }
.budget-unforeseen-row .budget-screen-cat { color: #c4b5fd; }
.budget-unforeseen-tag { display: inline-block; margin-inline-start: .35rem; padding: .1rem .4rem; border-radius: 8px; background: rgba(167, 139, 250, .2); color: #c4b5fd; font-size: .65rem; font-weight: 600; }

/* Aggregated dashboard budget card */
.budget-agg-grid { display: flex; flex-direction: column; gap: .65rem; }
.budget-agg-row { padding: .65rem .85rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; border-right-width: 3px; }
.budget-agg-row.budget-ok { border-right-color: var(--income); }
.budget-agg-row.budget-warn { border-right-color: #eab308; }
.budget-agg-row.budget-danger { border-right-color: #f97316; }
.budget-agg-row.budget-over { border-right-color: var(--expense); }
.budget-agg-head { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.budget-agg-nums { color: var(--text-secondary); font-weight: 500; }
.budget-agg-bar-track { height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
.budget-agg-bar-fill { height: 100%; border-radius: 3px; transition: width .5s; background: var(--accent); }
.budget-agg-row.budget-ok .budget-agg-bar-fill { background: var(--income); }
.budget-agg-row.budget-warn .budget-agg-bar-fill { background: #eab308; }
.budget-agg-row.budget-danger .budget-agg-bar-fill { background: #f97316; }
.budget-agg-row.budget-over .budget-agg-bar-fill { background: var(--expense); }
.budget-agg-foot { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: .3rem; }

@media (max-width: 720px) {
  .budget-month-nav { flex-wrap: wrap; }
  .budget-summary-grid { grid-template-columns: 1fr; }
  .budget-screen-list-head, .budget-screen-row { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .budget-screen-list-head span:nth-child(3), .budget-screen-list-head span:nth-child(4) { display: none; }
  .budget-screen-row .budget-input-wrap { grid-column: 1 / -1; width: 100%; }
  .budget-screen-row .budget-screen-bar-track { grid-column: 1 / -1; }
}

.drive-banner {
  position: fixed;
  bottom: 1rem;
  inset-inline: 1rem;
  background: var(--bg-card, #1a2a3a);
  border: 1px solid rgba(66,133,244,.4);
  color: var(--text-primary);
  padding: .75rem 1rem;
  border-radius: .75rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  flex-wrap: wrap;
}
.drive-banner-ok  { border-color: rgba(34,197,94,.55);  background: rgba(34,197,94,.10); }
.drive-banner-err { border-color: rgba(239,68,68,.55);  background: rgba(239,68,68,.10); }
.drive-banner button {
  padding: .25rem .75rem;
  border-radius: .5rem;
  border: 1px solid rgba(66,133,244,.5);
  background: rgba(66,133,244,.15);
  color: var(--text-primary);
  cursor: pointer;
  font-size: .85rem;
}

/* ============================================================
   ===== MOBILE — overhaul (≤900px)                        =====
   ============================================================
   Strategy: keep desktop layout intact; below 900px we replace
   the right-side sidebar with a bottom tab bar, transform
   modals into full-screen sheets, stack filters/forms, lift
   touch targets to 44px, and force inputs to 16px so iOS
   Safari doesn't auto-zoom on focus.
*/

/* Bottom tab bar — hidden on desktop */
.bottom-nav { display: none; }

@media (max-width: 900px) {
  :root {
    --nav-h: 52px;
    --bnav-h: 60px;
  }

  /* ---- Top navbar: brand on the right (RTL natural), drawer button ---- */
  .navbar {
    display: flex;
    height: var(--nav-h);
    padding: 0 .75rem;
    padding-top: env(safe-area-inset-top, 0);
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  }
  .nav-brand { font-size: .95rem; }
  .nav-menu-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
  }
  .nav-menu-btn:active { background: var(--bg-hover); }

  /* ---- Drawer (sidebar slides in from the right under RTL) ---- */
  .sidebar {
    top: 0; right: 0;
    width: min(280px, 80vw); height: 100vh;
    border-radius: 0;
    box-shadow: -8px 0 24px rgba(0,0,0,.4);
    transform: translateX(100%);
    transition: transform .22s ease;
    padding: 1.25rem 1rem;
    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
  .sidebar-overlay.open { display: block; }
  .sidebar-brand { font-size: 1.05rem; padding: .25rem .25rem 1rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; }
  .sidebar-nav { gap: .15rem; }
  .nav-link {
    padding: .85rem 1rem;
    font-size: .95rem;
    min-height: 44px;
  }
  .nav-link svg { width: 20px; height: 20px; }

  /* ---- Bottom tab bar — primary nav on mobile ---- */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 150;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
  }
  .bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    color: var(--text-muted);
    font-size: .68rem;
    padding: .35rem .25rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    min-height: 44px;
  }
  .bnav-item svg { stroke-width: 2; }
  .bnav-item:active { background: var(--bg-hover); }
  .bnav-item.active { color: var(--accent); }
  .bnav-item.active svg { stroke: var(--accent); }

  /* ---- Main content layout ---- */
  .main-content {
    margin-right: 0;
    padding: .75rem;
    padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + .75rem);
    padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
  }
  .screen { max-width: 100%; }

  /* ---- Bento grid collapses to single column ---- */
  .bento-outer { grid-template-columns: 1fr; }
  .bento-right { grid-template-columns: 1fr 1fr; }
  .bento-hero { min-height: 160px; padding: 1.25rem 1.5rem; gap: .45rem; }
  .bento-hero-eyebrow { top: 1.25rem; right: 1.5rem; }
  .bento-hero-amount { font-size: 2rem; }

  /* ---- Page header tighter ---- */
  .page-header { margin-bottom: 1rem; }
  .page-title { font-size: 1.4rem; }
  .page-subtitle { font-size: .8rem; }

  /* ---- Cards: tighter padding, fluid radius ---- */
  .card { padding: 1rem; border-radius: 12px; }
  .card-title { font-size: .9rem; margin-bottom: .75rem; }

  /* ---- Stats: 2 cols normally, 1 col on small phones ---- */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
  .stat-card { padding: .85rem .9rem; gap: .65rem; border-radius: 12px; }
  .stat-icon { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 10px; }
  .stat-label { font-size: .72rem; }
  .stat-value { font-size: 1.05rem; }

  /* ---- Two-col → stacked ---- */
  .two-col { grid-template-columns: 1fr; gap: .9rem; }

  /* ---- Inputs: 16px to suppress iOS Safari auto-zoom on focus ---- */
  input:not([type=color]):not([type=checkbox]):not([type=radio]),
  select, textarea {
    font-size: 16px;
    padding: .7rem .85rem;
    min-height: 44px;
  }
  input[type=date], input[type=time] { min-height: 44px; }
  .form-label { font-size: .82rem; margin-bottom: .3rem; }

  /* ---- Buttons: bigger touch surface ---- */
  .btn-primary, .btn-ghost, .btn-danger {
    padding: .75rem 1.1rem;
    font-size: .92rem;
    min-height: 44px;
  }

  /* ---- Filters bar: stack vertically, full-width selects ---- */
  .filters-bar { flex-direction: column; gap: .5rem; }
  .filters-bar > * { width: 100%; }
  .search-wrap { min-width: 0; width: 100%; }
  .filters-bar select { width: 100%; }

  /* ---- Tx summary: compact wrap ---- */
  .tx-summary { gap: .65rem 1rem; font-size: .8rem; }

  /* ---- Tabs scroll horizontally instead of wrapping ---- */
  .tabs-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex-shrink: 0;
    padding: .75rem 1rem;
    font-size: .88rem;
    min-height: 44px;
  }

  /* ---- Period selector: bigger pills, 1-line scroll on overflow ---- */
  .period-selector { margin-bottom: 1rem; }
  .period-presets {
    gap: .4rem;
    flex-wrap: wrap;
  }
  .period-btn {
    padding: .55rem .9rem;
    font-size: .82rem;
    min-height: 36px;
    flex: 0 0 auto;
  }
  .period-custom { gap: .4rem; }
  .period-custom input[type=date] { width: auto; flex: 1; min-width: 0; }

  /* ---- Tables: horizontal scroll wrapper, smaller padding,
          hide low-priority columns at this breakpoint.
          Each table screen wraps its <table> in a div with
          overflow-x:auto so the scroll is local, not page-wide. ---- */
  .data-table {
    font-size: .85rem;
    min-width: 100%;
  }
  .data-table th, .data-table td {
    padding: .55rem .6rem;
  }
  .data-table th { font-size: .72rem; }

  /* Wrappers around tables — apply to all existing overflow-x:auto containers */
  [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* ---- Modals: full-screen sheet on mobile ---- */
  .modal-overlay { align-items: flex-end; }
  .modal-box,
  .modal-box-wide {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    animation: sheetUp .25s ease;
  }
  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .modal-header {
    position: sticky;
    top: -1rem;
    margin: -1rem -1rem 1rem;
    padding: 1rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    z-index: 5;
  }
  .modal-header h3 { font-size: 1.05rem; }
  .modal-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
  }
  .modal-close:active { background: var(--bg-hover); }

  /* ---- Forecast: stack vertically, single column ---- */
  .forecast-split { grid-template-columns: 1fr; gap: .5rem; }
  .forecast-months { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .forecast-month { padding: .55rem .35rem; }
  .forecast-month-label { font-size: .68rem; }
  .forecast-month-val { font-size: .9rem; }
  .forecast-big { font-size: 1.5rem; }

  /* ---- YoY: kept 4 cols but smaller font + tighter gaps ---- */
  .yoy-grid { font-size: .78rem; gap: .3rem .35rem; grid-template-columns: 1.1fr .9fr .9fr .8fr; }
  .yoy-head { font-size: .68rem; }

  /* ---- Cash flow rows ---- */
  .cf-row { font-size: .88rem; padding: .55rem .25rem; }
  .cf-net, .cf-total { font-size: .95rem; padding: .7rem .75rem; }

  /* ---- Budget summary on dashboard / budget screen ---- */
  .budget-summary { grid-template-columns: 1fr; gap: .4rem; }
  .budget-summary-grid { grid-template-columns: 1fr; gap: .5rem; }
  .budget-month-nav { flex-wrap: wrap; gap: .5rem; }
  .budget-month-label { font-size: 1rem; }
  .budget-screen-list-head { display: none; }
  .budget-screen-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "bar"
      "amounts"
      "input";
    gap: .35rem;
    padding: .65rem .8rem;
  }
  .budget-screen-row > .budget-screen-cat { grid-area: name; }
  .budget-screen-row > .budget-screen-bar-track { grid-area: bar; }
  .budget-screen-row > .budget-input-wrap { grid-area: input; width: 100%; }
  .budget-actions { gap: .4rem; }
  .budget-actions .btn-primary,
  .budget-actions .btn-ghost,
  .budget-actions .btn-danger { flex: 1 1 auto; min-width: 140px; }
  .budget-input-wrap { width: 100%; }

  /* ---- Account list / category list rows ---- */
  .list-item { padding: .9rem 1rem; }
  .cat-grid { grid-template-columns: 1fr; gap: .4rem; }
  .cat-chip { padding: .75rem .9rem; min-height: 44px; }

  /* ---- Recurring screen ---- */
  .recurring-toolbar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .recurring-toolbar > * { width: 100%; }
  .recurring-mode-toggle { padding: .35rem 0 .65rem; }
  .recurring-mode-toggle .mode-btn { padding: .7rem .6rem; font-size: .85rem; min-height: 44px; }
  .drill-stats { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .drill-stats > div { padding: .55rem .65rem; }
  .drill-stat-val { font-size: .95rem; }

  /* ---- Top-vendors / Vendor drill ---- */
  .vendor-alias-panel { padding: .75rem .85rem; }
  .vendor-alias-body textarea { min-height: 80px; }
  .hidden-vendor-row { grid-template-columns: 1fr auto; }
  .hidden-vendor-total { grid-column: 1 / -1; font-size: .8rem; color: var(--text-muted); }

  /* ---- Rules/Aliases lists ---- */
  .rules-table-head { display: none; }
  .rules-row {
    grid-template-columns: 1fr !important;
    gap: .35rem;
    padding: .75rem .75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--border);
  }
  .rules-row > div { padding: .15rem 0; }
  .rules-row > div:last-child { display: flex; justify-content: flex-end; gap: .4rem; }

  /* ---- Chat ---- */
  .chat-input-row { flex-direction: column; gap: .5rem; }
  .chat-input-row .btn-primary { width: 100%; }
  .chat-bubble { max-width: 85%; font-size: .9rem; }

  /* ---- Charts: lower height to fit small screens ---- */
  [style*="height:260px"], [style*="height:280px"], [style*="height: 260px"], [style*="height: 280px"] {
    height: 200px !important;
  }
  [style*="height:300px"], [style*="height: 300px"] { height: 220px !important; }

  /* ---- Drive banner: smaller, never under bottom-nav ---- */
  .drive-banner {
    bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px) + .75rem);
    inset-inline: .5rem;
    font-size: .82rem;
    padding: .6rem .75rem;
  }

  /* ---- Update toast: lift above bottom-nav ---- */
  .update-toast.show {
    bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
  }
  .propagate-toast {
    bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px) + .75rem);
  }

  /* ---- Drop zone: tighter for mobile ---- */
  .drop-zone { padding: 2rem 1rem; }
  .drop-title { font-size: .95rem; }
  .drop-sub { font-size: .8rem; }

  /* ---- Import chips: 2 per row ---- */
  .import-chips { gap: .5rem; }
  .import-chip { flex: 1 1 calc(50% - .25rem); min-width: 0; padding: .55rem .75rem; }
  .import-chip .chip-value { font-size: 1.05rem; }

  /* ---- Pagination touch ---- */
  .pagination button { min-width: 44px; height: 44px; }

  /* ---- BGen modal: drop fixed minimums; let content reflow ---- */
  .bgen-table td:nth-child(2),
  .bgen-table td:nth-child(3),
  .bgen-table td:nth-child(4),
  .bgen-table td:nth-child(5) { min-width: 0; }
  .bgen-table { font-size: .8rem; }
  .bgen-table th, .bgen-table td { padding: .45rem .35rem; }

  /* ---- Template wizard table ---- */
  .tpl-map-table { font-size: .78rem; }
  .tpl-map-table th, .tpl-map-table td { max-width: 110px; padding: .3rem .35rem; }

  /* ---- Account balance dashboard rows ---- */
  .account-balance-row { padding: .7rem .25rem; }
}

/* ===== Very small screens (≤420px): drop to single column for stats ===== */
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr; }
  .drill-stats { grid-template-columns: 1fr 1fr; }
  .yoy-grid { font-size: .72rem; gap: .25rem .25rem; }
  .page-title { font-size: 1.25rem; }
  .forecast-months { gap: .3rem; }
  .forecast-month { padding: .45rem .25rem; }
  .forecast-month-val { font-size: .82rem; }
  .main-content { padding: .65rem; padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px) + 1rem); }
  .card { padding: .85rem; }
  .modal-box, .modal-box-wide { padding: .85rem; padding-bottom: calc(.85rem + env(safe-area-inset-bottom, 0px)); }
  .import-chip { flex: 1 1 100%; }
}

/* ===== Tap highlight cleanup on iOS ===== */
@media (hover: none) {
  .nav-link:hover, .stat-card:hover, .btn-primary:hover, .btn-ghost:hover { transform: none; }
  .btn-primary:active { background: #2563eb; }
  .btn-ghost:active { background: var(--bg-hover); color: var(--text-primary); }
}

/* ===== PROPERTY / MORTGAGE SCREEN ===== */
.prop-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.prop-setup-grid .form-row { display: flex; flex-direction: column; gap: .35rem; }

.prop-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .85rem; margin: 1rem 0 1.25rem;
}
.prop-summary-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: .75rem; padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.prop-summary-label { font-size: .78rem; color: var(--text-muted); }
.prop-summary-val   { font-size: 1.25rem; font-weight: 700; }
.prop-summary-sub   { font-size: .75rem; color: var(--text-muted); }
.prop-next-card     { border-color: rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .07); }
.prop-next-date     { font-size: 1rem; font-weight: 600; }
.prop-next-amt      { font-size: 1.1rem; font-weight: 700; color: var(--expense); }

.prop-progress-track { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin: .35rem 0 .15rem; }
.prop-progress-fill  { height: 100%; background: linear-gradient(90deg, #22c55e, #3b82f6); border-radius: 4px; transition: width .3s ease; }

.prop-table th, .prop-table td { vertical-align: middle; }
.prop-table .prop-input {
  width: 100%; min-width: 5rem;
  padding: .3rem .45rem; font-size: .85rem;
  background: var(--bg-input, var(--bg-elev));
  border: 1px solid var(--border); border-radius: .35rem;
  color: var(--text-primary);
}
.prop-table input[type=date].prop-input { min-width: 8rem; }
.prop-table input[type=number].prop-input { text-align: end; }

.prop-status {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.prop-st-paid     { background: rgba(34,197,94,.15); color: #4ade80; }
.prop-st-overdue  { background: rgba(239,68,68,.18); color: #f87171; }
.prop-st-upcoming { background: rgba(245,158,11,.18); color: #fbbf24; }
.prop-st-future   { background: rgba(148,163,184,.15); color: var(--text-muted); }
.prop-st-tba      { background: rgba(148,163,184,.10); color: var(--text-muted); }

.prop-row-mismatch { background: rgba(245,158,11,.08); }
.prop-row-mismatch td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

.prop-card-clickable { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.prop-card-clickable:hover { transform: translateY(-1px); border-color: rgba(59,130,246,.5); }

.dmy-input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.prop-totals-row { background: var(--bg-elev); font-weight: 600; }
.prop-totals-row td { border-top: 2px solid var(--border); }

@media (max-width: 720px) {
  .prop-summary-val { font-size: 1.05rem; }
  .prop-summary-grid { grid-template-columns: 1fr 1fr; }
  .prop-table { font-size: .8rem; }
  .prop-table .prop-input { min-width: 4rem; }
}

/* ===== Desktop scrollbar enhancements ===== */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; height: 14px; }
  ::-webkit-scrollbar-track { background: var(--bg-surface); }
  ::-webkit-scrollbar-thumb {
    background: var(--border-bright);
    border-radius: 7px;
    border: 2px solid var(--bg-surface);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

  /* Top mirror scrollbar synced with the bottom one — saves scrolling
     to the end of long tables to drag horizontally. */
  .scroll-x-mirror {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin-bottom: .35rem;
  }
  .scroll-x-mirror > div { height: 1px; }
}

@media not all and (hover: hover) {
  .scroll-x-mirror { display: none !important; }
}