@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0c0c0e;--bg2:#141416;--bg3:#1c1c1f;--bg4:#242428;--bg5:#2c2c31;
  --border:#252528;--border2:#303035;
  --text:#f0f0f2;--text2:#9191a0;--text3:#5a5a6a;
  --green:#22c55e;--green-dim:#16a34a;--green-glow:rgba(34,197,94,0.15);
  --green-bg:rgba(34,197,94,0.1);--green-bg2:rgba(34,197,94,0.06);
  --red:#ef4444;--red-bg:rgba(239,68,68,0.1);
  --yellow:#f59e0b;--blue:#3b82f6;--purple:#a855f7;
  --sidebar-w:220px;--topbar-h:56px;--chat-w:320px;
  --radius:10px;--radius2:14px;--radius3:18px;
  --chip-bg: #16181d;--chip-border: #2a2d35;--chip-text: #9ca3af;
  --input-bg: #16181d;--input-border: #2a2d35;--input-text: #e5e7eb;--input-placeholder: #6b7280;
}
#all-txns {
  max-height: 100%;
}

#all-txns::-webkit-scrollbar {
  width: 6px;
}

#all-txns::-webkit-scrollbar-thumb {
  background: var(--bg4);
  border-radius: 6px;
}
.ai-quick-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
}

.ai-quick-btn {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-quick-btn:hover {
  border-color: #22c55e;
  color: #22c55e;
  transform: translateY(-1px);
}

.ai-quick-btn:active {
  transform: scale(0.95);
}

.ai-input-box:focus-within {
  border-color: #22c55e;
}

.ai-input-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--input-text);
  font-size: 14px;
}

.ai-input-box input::placeholder {
  color: var(--input-placeholder);
}

.ai-icon {
  color: var(--input-placeholder);
}

.ai-send-btn {
  width: 34px;
  height: 34px;
  background: #22c55e;
  border: none;
  border-radius: 10px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

.ai-send-btn:hover {
  background: #16a34a;
}
.light {
  --bg:#f8f9fb;
  --bg2:#ffffff;
  --bg3:#f1f3f7;
  --bg4:#e6e8ee;
  --bg5:#dcdfe6;

  --border:#e5e7eb;
  --border2:#d1d5db;

  --text:#111827;
  --text2:#4b5563;
  --text3:#9ca3af;

  --green:#16a34a;
  --green-dim:#15803d;
  --green-glow:rgba(22,163,74,0.15);

  --green-bg:rgba(22,163,74,0.1);
  --green-bg2:rgba(22,163,74,0.05);

  --red:#dc2626;
  --red-bg:rgba(220,38,38,0.1);

  --yellow:#d97706;
  --blue:#2563eb;
  --purple:#9333ea;

  --chip-bg: #ffffff;
  --chip-border: #e5e7eb;
  --chip-text: #374151;

  --input-bg: #f9fafb;
  --input-border: #e5e7eb;
  --input-text: #111827;
  --input-placeholder: #9ca3af;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;overflow:hidden}
.layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  height:100dvh;
  overflow:hidden;
}

.sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow:hidden}
.sidebar-logo{padding:18px 20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.logo-icon{width:32px;height:32px;background:var(--green);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}
.logo-text{font-size:14px;font-weight:700;color:var(--text)}
.logo-sub{font-size:11px;color:var(--text3);font-weight:400}
.sidebar-section{padding:16px 12px 4px;font-size:10px;font-weight:600;color:var(--text3);letter-spacing:0.8px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 8px;border-radius:8px;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;transition:all .15s;position:relative}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--bg3);color:var(--text)}
.nav-item .nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--green);color:#000;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px}
.nav-badge.new{background:var(--green);color:#000}
.sidebar-user{margin:auto 0 0;padding:16px 16px 18px;border-top:1px solid var(--border)}
.user-row{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:var(--radius);transition:background .15s}
.user-row:hover{background:var(--bg3)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#22c55e);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.user-name{font-size:13px;font-weight:600;color:var(--text)}
.user-ws{font-size:11px;color:var(--text3)}

.main{display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:var(--bg)}

.topbar{height:var(--topbar-h);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text3)}
.breadcrumb .sep{color:var(--text3)}
.breadcrumb .current{color:var(--text);font-weight:600}
.topbar-search{flex:1;max-width:280px;position:relative;margin-left:auto}
.topbar-search input{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:7px 12px 7px 36px;border-radius:8px;font-size:12px;font-family:'Inter',sans-serif;outline:none;transition:border .15s}
.topbar-search input:focus{border-color:var(--green-dim)}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px}
.kbd{background:var(--bg4);color:var(--text3);font-size:10px;padding:2px 5px;border-radius:4px;border:1px solid var(--border2)}
.topbar-actions{display:flex;align-items:center;gap:10px}
.month-btn{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:7px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s}
.month-btn:hover{background:var(--bg4)}
.icon-btn{width:34px;height:34px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:16px;transition:background .15s}
.icon-btn:hover{background:var(--bg4);color:var(--text)}
.add-btn{display:flex;align-items:center;gap:6px;background:var(--green);color:#000;padding:7px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:'Inter',sans-serif;transition:background .15s}
.add-btn:hover{background:#16a34a;color:#fff}

.content{flex:1;min-height:0;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:20px}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}

.page{display:none}
.page.active{display:flex;flex-direction:column;gap:20px}

/* AI page fills .content exactly — no page-level scroll, no gap */
#page-ai-page.active{gap:0;height:100%;min-height:0;padding:0}

.hero{margin-bottom:4px}
.hero-greeting{font-size:13px;color:var(--text2);margin-bottom:4px}
.hero-title{font-size:28px;font-weight:700;letter-spacing:-0.8px;line-height:1.2;margin-bottom:10px;color:var(--text)}
.hero-subtitle{font-size:13px;color:var(--text2);line-height:1.6;max-width:600px}

.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sum-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:18px 20px;position:relative;overflow:hidden;cursor:pointer;transition:border-color .15s}
.sum-card:hover{border-color:var(--border2)}
.sum-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sum-label{font-size:12px;color:var(--text2);font-weight:500}
.sum-badge{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
.sum-badge.up{background:rgba(34,197,94,0.12);color:var(--green)}
.sum-badge.down{background:rgba(239,68,68,0.12);color:var(--red)}
.sum-value{font-size:22px;font-weight:700;letter-spacing:-0.5px;margin-bottom:4px;color:var(--text)}
.sum-sub{font-size:11px;color:var(--text3)}
.sum-sparkline{margin-top:12px;height:40px;position:relative}
.sum-sparkline canvas{display:block}

.charts-row{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:22px 24px}
.chart-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.chart-card-title{font-size:13px;font-weight:600;color:var(--text2)}
.chart-card-title-sub{font-size:11px;color:var(--text3);margin-top:1px}
.cashflow-amount{font-size:28px;font-weight:700;letter-spacing:-1px;margin-bottom:4px}
.cashflow-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 10px;background:var(--green-bg);color:var(--green);border-radius:20px;margin-bottom:12px}
.cashflow-legend{display:flex;align-items:center;gap:20px;font-size:12px;color:var(--text2);margin-bottom:16px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.legend-val{font-weight:600;color:var(--text)}
.time-toggles{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:3px}
.time-btn{padding:4px 10px;border-radius:5px;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .15s;border:none;background:transparent;font-family:'Inter',sans-serif}
.time-btn.active,.time-btn:hover{background:var(--bg4);color:var(--text)}
.cashflow-chart-wrap{position:relative;height:200px}

.cat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:22px 24px}
.cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cat-period{font-size:16px;font-weight:700;margin-bottom:16px}
.cat-donut-wrap{position:relative;height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cat-donut-center{position:absolute;text-align:center;pointer-events:none}
.cat-donut-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px}
.cat-donut-val{font-size:20px;font-weight:700;color:var(--text)}
.cat-list{display:flex;flex-direction:column;gap:6px}
.cat-row{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.cat-name{display:flex;align-items:center;gap:8px;color:var(--text2)}
.cat-dot{width:9px;height:9px;border-radius:50%}
.cat-pct{color:var(--text3);font-size:11px;min-width:30px;text-align:right}
.cat-amount{font-weight:600;color:var(--text);min-width:60px;text-align:right}
.view-all-link{font-size:12px;color:var(--green);cursor:pointer;font-weight:500}
.view-all-link:hover{text-decoration:underline}

.bottom-row{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}

.txn-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden}
.txn-card-header{padding:18px 22px 14px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--border)}
.txn-card-label{font-size:11px;color:var(--text3);font-weight:500;margin-bottom:2px;text-transform:uppercase;letter-spacing:0.5px}
.txn-card-title{font-size:16px;font-weight:700}
.txn-actions{display:flex;align-items:center;gap:12px}
.link-btn{font-size:12px;color:var(--text3);cursor:pointer;font-weight:500;transition:color .15s}
.link-btn:hover{color:var(--text)}
.link-btn.green{color:var(--green)}
.link-btn.green:hover{color:#16a34a}
.txn-item{display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer}
.txn-item:last-child{border-bottom:none}
.txn-item:hover{background:var(--bg3)}
.txn-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.txn-info{flex:1;min-width:0}
.txn-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txn-meta{font-size:11px;color:var(--text3);margin-top:1px}
.pending-badge{background:var(--bg4);color:var(--text3);font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;font-weight:500}
.txn-amount{font-size:13px;font-weight:700;white-space:nowrap}
.txn-amount.inc{color:var(--green)}
.txn-amount.exp{color:var(--text)}
.txn-trend{font-size:10px;margin-right:4px}

.budget-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden}
.budget-card-header{padding:18px 22px 14px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--border)}
.budget-count{font-size:16px;font-weight:700}
.budget-item{padding:14px 22px;border-bottom:1px solid var(--border)}
.budget-item:last-child{border-bottom:none}
.budget-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.budget-item-left{display:flex;align-items:center;gap:10px}
.budget-icon{width:30px;height:30px;background:var(--bg3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px}
.budget-name{font-size:13px;font-weight:600;color:var(--text)}
.budget-amounts{font-size:12px;font-weight:600}
.budget-amounts.over{color:var(--red)}
.budget-amounts.ok{color:var(--text2)}
.budget-bar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-top:4px}
.budget-fill{height:100%;border-radius:3px;transition:width .5s ease}
.budget-fill.green{background:var(--green)}
.budget-fill.red{background:var(--red)}
.budget-fill.yellow{background:var(--yellow)}

.insights-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden}
.insights-header{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.insights-title-row{display:flex;align-items:center;gap:10px}
.insights-icon{width:32px;height:32px;background:var(--green-bg);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}
.insights-title{font-size:14px;font-weight:700}
.insights-sub{font-size:11px;color:var(--text3);margin-top:1px}
.updated-badge{background:var(--green-bg);color:var(--green);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
.insight-item{padding:16px 22px;border-bottom:1px solid var(--border)}
.insight-item:last-child{border-bottom:none}
.insight-item-header{display:flex;align-items:flex-start;gap:12px}
.insight-bullet{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:1px}
.insight-bullet.warn{background:rgba(245,158,11,0.12)}
.insight-bullet.ok{background:rgba(34,197,94,0.1)}
.insight-text-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.insight-text-body{font-size:12px;color:var(--text2);line-height:1.5}
.insight-action{display:inline-block;margin-top:8px;font-size:12px;color:var(--green);font-weight:600;cursor:pointer}
.insight-action:hover{text-decoration:underline}

.chat-col{background:var(--bg2);border-left:1px solid var(--border);height:100vh;display:flex;flex-direction:column;overflow:hidden}
.chat-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.chat-ai-row{display:flex;align-items:center;gap:10px}
.chat-ai-icon{width:34px;height:34px;background:var(--bg3);border-radius:10px;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative}
.online-dot{position:absolute;bottom:0;right:0;width:9px;height:9px;background:var(--green);border-radius:50%;border:2px solid var(--bg2)}
.chat-ai-name{font-size:14px;font-weight:700}
.chat-ai-role{font-size:11px;color:var(--text3);margin-top:1px}
.new-chat-btn{font-size:12px;color:var(--text3);cursor:pointer;font-weight:500;padding:5px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;transition:all .15s}
.new-chat-btn:hover{background:var(--bg4);color:var(--text)}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.chat-messages::-webkit-scrollbar{width:3px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--bg4)}
.chat-msg{max-width:90%}
.chat-msg.ai{align-self:flex-start}
.chat-msg.user{align-self:flex-end}
.chat-bubble{padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.55}
.chat-bubble.ai{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px;white-space:pre-line}

.chat-bubble.ai{
  white-space:normal;
}
.chat-bubble.ai.ai-markdown{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-bubble.ai p{
  margin:0;
  line-height:1.5;
}
.chat-bubble.ai h1,
.chat-bubble.ai h2,
.chat-bubble.ai h3{
  margin:4px 0 0;
  line-height:1.4;
}
.chat-bubble.ai h1{font-size:18px}
.chat-bubble.ai h2{font-size:16px}
.chat-bubble.ai h3{font-size:14px}
.chat-bubble.ai strong.ai-highlight{
  color:var(--green);
  background:var(--green-bg);
  border-radius:5px;
  padding:1px 5px;
  font-weight:800;
}
.chat-bubble.ai code{
  background:var(--bg4);
  border:1px solid var(--border2);
  border-radius:5px;
  padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;
}
.chat-bubble.ai .ai-list{
  margin:0;
  padding-left:24px;
}
.chat-bubble.ai .ai-list li{
  margin:4px 0;
  line-height:1.45;
}
.chat-bubble.ai hr{
  width:100%;
  border:0;
  border-top:1px solid var(--border2);
  margin:2px 0;
}
.chat-bubble.ai blockquote{
  margin:2px 0;
  padding:8px 10px;
  border-left:3px solid var(--green);
  background:var(--green-bg2);
  color:var(--text2);
  border-radius:0 7px 7px 0;
}
.chat-bubble.ai .ai-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
}
.chat-bubble.ai .ai-table th,
.chat-bubble.ai .ai-table td{
  padding:7px 8px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.chat-bubble.ai .ai-table th{
  color:var(--text);
  background:var(--bg4);
  font-weight:800;
}
.chat-bubble.ai .ai-table td{
  color:var(--text2);
}
.chat-bubble.ai .ai-table tr:last-child td{
  border-bottom:0;
}
.month-btn.active{
  border-color:var(--green);
  color:var(--green);
  background:var(--green-bg);
}
.chat-bubble.user{background:var(--green);color:#000;font-weight:500;border-bottom-right-radius:4px}
.chat-quick-btns{padding:10px 16px;display:flex;flex-direction:column;gap:6px}
.quick-chip{padding:8px 12px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;font-size:12px;color:var(--text2);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;text-align:left}
.quick-chip:hover{background:var(--bg4);border-color:var(--green-dim);color:var(--text)}
.chat-input-area{padding:14px 16px;border-top:1px solid var(--border);flex-shrink:0}
.chat-input-box{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:8px 12px;transition:border .15s}
.chat-input-box:focus-within{border-color:var(--green-dim)}
.chat-input-box input{flex:1;background:transparent;border:none;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;outline:none}
.chat-input-box input::placeholder{color:var(--text3)}
.chat-send-btn{width:30px;height:30px;background:var(--green);border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#000;font-weight:700;transition:background .15s;flex-shrink:0}
.chat-send-btn:hover{background:#16a34a}
.chat-disclaimer{text-align:center;font-size:10px;color:var(--text3);padding:8px 16px 12px;line-height:1.4}
.typing-indicator{display:flex;gap:4px;align-items:center;padding:10px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:td .7s infinite}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

.full-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden}
.full-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.full-title{font-size:16px;font-weight:700}
.transaction-header-actions{display:grid;grid-template-columns:minmax(180px,1fr) minmax(620px,2.4fr);align-items:center;gap:24px}
.transaction-actions{display:flex!important;flex:1 1 auto;flex-direction:row!important;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:20px;margin-left:0;min-width:0}
.transaction-actions .compact-action{flex:0 1 auto;min-width:108px;justify-content:center}
.budget-actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;flex:0 0 auto;min-width:max-content}
.compact-action{height:30px;min-height:30px;padding:0 10px;font-size:11px;white-space:nowrap;flex:0 0 auto}
.danger-action{background:var(--red)!important;color:#fff!important;border:1px solid var(--red)!important}
.danger-action:hover{background:#dc2626!important;color:#fff!important}
.secondary-action{background:var(--bg3)!important;color:var(--text)!important;border:1px solid var(--border)}
.secondary-action:hover{background:var(--bg4)!important}


.transaction-filter-row{display:flex;align-items:center;gap:8px;padding:10px 24px 0;background:var(--bg2)}
.txn-filter-btn{appearance:none!important;background:var(--bg3)!important;border:1px solid var(--border2)!important;color:var(--text2)!important;padding:6px 14px;border-radius:8px;font-size:11px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;line-height:1}
.txn-filter-btn:hover{background:var(--bg4)!important;border-color:var(--border2)!important;color:var(--text)!important}
.txn-filter-btn.active{background:var(--bg3)!important;border-color:var(--green-dim)!important;color:var(--text)!important;box-shadow:none}

.add-form-grid{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:12px;padding:18px 24px;background:var(--bg3);border-bottom:1px solid var(--border)}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px}
.fg input,.fg select{background:var(--bg4);border:1px solid var(--border2);color:var(--text);padding:8px 11px;border-radius:8px;font-family:'Inter',sans-serif;font-size:12px;outline:none;transition:border .15s}
.fg input:focus,.fg select:focus{border-color:var(--green-dim)}
.fg select option{background:var(--bg4)}
.btn-add{background:var(--green);color:#000;border:none;padding:0 18px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;height:34px;margin-top:auto;transition:background .15s;white-space:nowrap}
.btn-add:hover{background:#16a34a}
.full-txn-item{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:12px;align-items:center;padding:13px 24px;border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer}
.full-txn-item:last-child{border-bottom:none}
.full-txn-item:hover{background:var(--bg3)}
.del-btn{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:var(--red);padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.del-btn:hover{background:rgba(239,68,68,0.15)}

.budget-header-actions{gap:8px}
.budget-actions{gap:8px}
.budget-actions .add-btn{min-height:30px}
.budget-page-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.budget-page-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:20px 22px}
.bpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bpi-name{font-size:15px;font-weight:700}
.bpi-amounts{font-size:12px;color:var(--text2);margin-bottom:8px;display:flex;justify-content:space-between}

.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:100;
  align-items:center;
  justify-content:center
}
.modal-overlay.open{display:flex}

.modal{
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--radius2);
  padding:28px;
  width:440px;
  max-width:90vw;
  box-shadow:0 10px 40px rgba(0,0,0,0.4);
}

.modal-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:20px
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: end;
}

.modal-grid-full{grid-column:1/-1}

.fg{
  display:flex;
  flex-direction:column;
  gap:6px
}

.fg label{
  font-size:11px;
  font-weight:600;
  color:var(--text3);
  letter-spacing:.5px
}

.fg input,
.fg select{
  height:40px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid var(--border2);
  background:var(--bg4);
  color:var(--text);
  font-size:13px;
  outline:none;
  transition:border .15s
}

.fg input:focus,
.fg select:focus{
  border-color:var(--green)
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}
.btn-cancel,
.btn-submit {
  height: 42px;
}

.btn-cancel,
.btn-submit{
  height:40px;
  padding:0 20px;
  border-radius:8px;
  font-size:13px;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:all .15s
}

.btn-cancel{
  background:var(--bg3);
  border:1px solid var(--border2);
  color:var(--text2);
  font-weight:600
}
.btn-cancel:hover{background:var(--bg4)}

.btn-submit{
  background:var(--green);
  color:#000;
  border:none;
  font-weight:700
}
.btn-submit:hover{background:#16a34a;color:#fff}
.fg input,
.fg select {
  width: 100%;
}

.empty-state{padding:40px;text-align:center;color:var(--text3);font-size:13px}
.ai-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chat-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.chat-msg {
  max-width: 70%;
  margin-bottom: 12px;
}

.chat-msg.ai {
  align-self: flex-start;
}

.chat-msg.user {
  align-self: flex-end;
}

.chat-bubble {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13px;
}

.chat-bubble.ai {
  background: var(--bg3);
  border: 1px solid var(--border);
}

.chat-bubble.user {
  background: var(--green);
  color: black;
}

.quick-row {
  flex-shrink: 0;
  padding: 10px 20px;
  display: flex;
  gap: 10px;
}

.quick-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
}

.quick-btn:hover {
  border-color: var(--green);
  color: var(--text);
}

.chat-input-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.chat-input-bar input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 20px;
}

.send-btn {
  background: var(--green);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
}
.view-all-btn {
  color: #22c55e;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.view-all-btn:hover {
  text-decoration: underline;
}
.budget-amounts {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.amount-main {
  font-weight: 600;
  font-size: 13px;
}

.amount-sub {
  font-size: 11px;
  color: var(--text3);
}

.budget-amounts.over .amount-sub {
  color: var(--red);
}

.edit-btn {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  color: var(--green);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
}
.edit-btn:hover {
  background: rgba(34,197,94,0.15);
}

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 20px 24px;
}

.account-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 18px 20px;
  transition: border-color .15s;
}
.account-card:hover {
  border-color: var(--border2);
}

.account-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.account-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.account-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  background: var(--bg4);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}

.account-bal {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 12px;
}

.account-actions {
  display: flex;
  gap: 8px;
}

/* ── Hamburger (hidden on desktop) ────────────────────────── */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

/* ── Sidebar backdrop (hidden on desktop) ──────────────────── */
.sidebar-backdrop {
  display: none;
}

/* ── Mobile responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .hamburger { display: block; }

  .layout {
    grid-template-columns: 1fr;
  }

  /* Sidebar slides in from left */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-search { display: none; }
  .topbar-actions .month-btn span { display: none; }
  .topbar-actions .month-btn::after { content: '📅'; }
  .topbar-actions .add-btn { padding: 7px 10px; font-size: 11px; }

  .content { padding: 16px; gap: 14px; }
  .hero-title { font-size: 22px; }

  .summary-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sum-card { padding: 14px 16px; }
  .sum-value { font-size: 18px; }
  .sum-sparkline { height: 28px; }

  .charts-row { grid-template-columns: 1fr; }
  .chart-card { padding: 16px; }
  .chart-card-header { flex-direction: column; gap: 12px; }
  .time-toggles { align-self: flex-start; }
  .cat-card { padding: 16px; }
  .cat-donut-wrap { height: 140px; }
  .cat-donut-wrap canvas { max-width: 140px; max-height: 140px; }

  .bottom-row { grid-template-columns: 1fr; }

  .add-form-grid { grid-template-columns: 1fr 1fr; }
  .add-form-grid .btn-add { grid-column: 1 / -1; }

  .budget-page-grid { grid-template-columns: 1fr; }

  .budget-header-actions { align-items: flex-start; }
  .budget-actions { flex-wrap: wrap; justify-content: flex-end; }
  .transaction-header-actions,
  .budget-header-actions { align-items: center; }
  .transaction-header-actions{display:flex;flex-wrap:wrap;gap:8px}
  .transaction-actions,
  .budget-actions { gap: 8px; flex-wrap: wrap; flex-direction: row!important; margin-left: 0; flex: 0 1 auto; justify-content: flex-end; display:flex!important; }
  .transaction-actions .compact-action { min-width:0; }
  .compact-action { min-height: 36px; height: 36px; }

  .accounts-grid { grid-template-columns: 1fr; }

  .modal { width: 100%; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
  .modal-grid { grid-template-columns: 1fr; overflow-y: auto; flex: 1; }

  .ai-container { /* flex layout already handles height */ }
  .chat-msg { max-width: 85%; }
  .quick-row { flex-wrap: wrap; gap: 6px; }
  .quick-btn { font-size: 11px; padding: 5px 10px; }

  .full-txn-item { grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 10px 16px; }
  .full-txn-item .cat-badge { display: none; }
  .full-txn-item .edit-btn { font-size: 11px; padding: 4px 6px; }
  .full-txn-item .del-btn { font-size: 11px; padding: 4px 8px; }

  .txn-item { padding: 10px 14px; gap: 10px; }
  .txn-icon { width: 32px; height: 32px; font-size: 13px; }
  .txn-name { font-size: 12px; }
  .txn-meta { font-size: 10px; }
  .txn-amount { font-size: 12px; }

  .cashflow-amount { font-size: 22px; }

  .nav-item { padding: 11px 12px; margin: 2px 8px; }
  .add-btn, .btn-add, .btn-submit { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .summary-row { grid-template-columns: 1fr; gap: 8px; }
  .sum-card { padding: 12px 14px; }
  .sum-value { font-size: 16px; }
  .hero-title { font-size: 18px; }
  .topbar-actions .icon-btn { display: none; }
  .add-form-grid { grid-template-columns: 1fr; }
  .full-title { font-size: 14px; }
  .full-header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .full-header .add-btn { font-size: 11px; padding: 6px 12px; }
  .cat-list { max-height: 140px; overflow-y: auto; }
  .cat-period { font-size: 14px; }

  .account-bal { font-size: 18px; }
  .account-card { padding: 14px 16px; }
}


/* Transaction type filters: intentionally match dark Import/Export buttons. */
.transaction-filter-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 24px 0!important;
  background:var(--bg2)!important;
}
.transaction-filter-row .txn-filter-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:72px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 12px!important;
  background:var(--bg3)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  font:600 11px/1 'Inter',sans-serif!important;
  cursor:pointer!important;
}
.transaction-filter-row .txn-filter-btn:hover{
  background:var(--bg4)!important;
  color:var(--text)!important;
}
.transaction-filter-row .txn-filter-btn.active{
  background:var(--bg3)!important;
  color:var(--text)!important;
  border-color:var(--border2)!important;
  box-shadow:inset 0 -2px 0 var(--green)!important;
}


[hidden] { display: none !important; }

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg, #0b0b0d);
}

.auth-card {
  width: min(100%, 420px);
  padding: 28px;
  border: 1px solid var(--border, #29292e);
  border-radius: 20px;
  background: var(--bg2, #131315);
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.auth-copy { margin-bottom: 20px; }
.auth-title { font-size: 28px; font-weight: 800; color: var(--text, #f4f4f5); }
.auth-subtitle { margin-top: 7px; color: var(--text2, #a1a1aa); font-size: 13px; line-height: 20px; }

.auth-name-field[hidden] { display: none; }
.auth-submit { width: 100%; min-height: 46px; margin-top: 4px; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  color: var(--text3, #71717a);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, #29292e);
}
.auth-google {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--border2, #34343a);
  border-radius: 10px;
  background: #fff;
  color: #202124;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.auth-google:hover { background: #f5f5f5; border-color: #c6c6c6; }
.auth-google:disabled { opacity: .65; cursor: wait; }
.google-symbol {
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  color: #4285f4;
}
.auth-toggle {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--green, #18c55e);
  font-weight: 700;
  cursor: pointer;
}
.auth-note { margin-top: 18px; color: var(--text3, #71717a); font-size: 11px; line-height: 17px; text-align: center; }
.auth-message { margin: 10px 0; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 18px; }
.auth-message.error { background: rgba(239,68,68,.10); color: #f87171; border: 1px solid rgba(239,68,68,.20); }
.auth-message.success { background: rgba(34,197,94,.10); color: #4ade80; border: 1px solid rgba(34,197,94,.20); }
.logout-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border2, #34343a);
  border-radius: 9px;
  background: transparent;
  color: var(--text3, #71717a);
  cursor: pointer;
}
.logout-btn:hover { color: var(--text, #f4f4f5); border-color: var(--green, #18c55e); }

/* FinanceAI workspace profile menu */
.profile-wrap { position: relative; }
.user-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.profile-identity {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.profile-identity .user-name,
.profile-identity .user-ws {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-chevron { margin-left: auto; color: var(--text3); transition: transform .15s ease; }
.user-row[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }
.profile-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 10px);
  z-index: 260;
  padding: 8px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: var(--bg2);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
}
.profile-menu-heading { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.profile-menu-kicker { display:block; font-size:9px; font-weight:700; letter-spacing:.12em; color:var(--text3); margin-bottom:4px; }
.profile-menu-email { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); font-size:11px; }
.profile-menu-item {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.profile-menu-item:hover { background: var(--bg3); }
.profile-menu-item > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.profile-menu-item strong { font-size:12px; font-weight:600; }
.profile-menu-item small { font-size:10px; color:var(--text3); }
.profile-menu-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:var(--bg3); color:var(--text2); font-size:15px; }
.profile-menu-value { color:var(--text3); font-size:10px; }
.profile-menu-divider { height:1px; background:var(--border); margin:6px 4px; }
.profile-menu-item.signout-item { color:var(--red); }
.profile-menu-item.signout-item .profile-menu-icon { color:var(--red); background:var(--red-bg); }

/* CSV review and account mapping dialog */
.csv-import-modal {
  width: min(920px, 94vw);
  max-width: 94vw;
  max-height: 88vh;
  overflow: auto;
  padding: 24px;
}
.csv-import-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.csv-import-header .modal-title { margin-bottom:5px; }
.csv-import-subtitle { color:var(--text3); font-size:12px; line-height:1.5; }
.csv-modal-close {
  width:32px; height:32px; flex:0 0 32px; border:1px solid var(--border2);
  border-radius:8px; background:var(--bg3); color:var(--text2); font-size:20px; cursor:pointer;
}
.csv-import-summary { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 16px; }
.csv-summary-chip { display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:8px; background:var(--bg3); color:var(--text2); font-size:11px; }
.csv-summary-chip strong { color:var(--text); font-size:13px; }
.csv-section-title { font-size:12px; color:var(--text); font-weight:700; margin-bottom:7px; }
.csv-section-note { font-size:11px; color:var(--text3); line-height:1.5; margin-bottom:10px; }
.csv-account-mapping-section { padding:14px; margin-bottom:16px; border:1px solid var(--border); border-radius:12px; background:var(--bg3); }
.csv-account-mappings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.csv-account-map-row { display:flex; align-items:center; gap:10px; min-width:0; }
.csv-account-code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); font-size:11px; }
.csv-account-map-row select {
  flex:1.2; min-width:0; height:36px; padding:0 9px; border:1px solid var(--border2);
  border-radius:8px; background:var(--bg4); color:var(--text); font:inherit; font-size:11px;
}
.csv-preview-title { display:flex; align-items:center; justify-content:space-between; margin:14px 0 8px; }
.csv-preview-title span { color:var(--text3); font-size:10px; font-weight:500; }
.csv-preview-table-wrap { max-height:280px; overflow:auto; border:1px solid var(--border); border-radius:10px; }
.csv-preview-table { width:100%; border-collapse:collapse; min-width:650px; font-size:11px; }
.csv-preview-table th { position:sticky; top:0; z-index:1; background:var(--bg3); color:var(--text3); text-align:left; font-size:10px; font-weight:700; padding:10px; }
.csv-preview-table td { border-top:1px solid var(--border); color:var(--text2); padding:9px 10px; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csv-preview-table td:first-child { color:var(--text); }
.csv-preview-table .numeric { text-align:right; }
.csv-preview-table .amount-income { color:var(--green); }
.csv-preview-table .amount-expense { color:var(--text); }
.csv-import-footnote { margin-top:10px; color:var(--text3); font-size:10px; line-height:1.5; }
.csv-import-footer { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.csv-import-footer button { min-width:132px; }
.csv-import-footer button:disabled { opacity:.55; cursor:wait; }

/* Keep the auth screen truly viewport-centered at every size. */
html, body { width:100%; min-height:100%; margin:0; }
body { overflow-x:hidden; }
.auth-screen {
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 4vw, 32px);
  margin:0;
}
.auth-card {
  width:min(100%, 420px);
  max-height:calc(100svh - 32px);
  overflow-y:auto;
  margin:auto;
}
@media (max-width: 900px) {
  .profile-menu { left:8px; right:8px; }
  .csv-import-modal { width:100%; max-width:100%; max-height:100svh; border-radius:0; padding:18px; }
}
@media (max-width: 600px) {
  .auth-screen { padding:14px; align-items:center; }
  .auth-card { width:100%; max-width:420px; padding:22px 18px; border-radius:16px; }
  .auth-brand { margin-bottom:22px; }
  .auth-title { font-size:25px; }
  .csv-account-mappings { grid-template-columns:1fr; }
  .csv-account-map-row { flex-direction:column; align-items:stretch; gap:5px; }
  .csv-account-map-row select { width:100%; }
  .csv-import-footer { flex-direction:column-reverse; }
  .csv-import-footer button { width:100%; }
}

/* Mobile/tablet-only refinements. Desktop rules above remain unchanged. */
@media (max-width: 900px) {
  .topbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "menu breadcrumb"
      "actions actions";
    align-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 96px;
    padding: 8px 12px;
  }

  .topbar .hamburger {
    grid-area: menu;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .topbar .breadcrumb {
    grid-area: breadcrumb;
    display: flex;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.3;
  }

  .topbar .breadcrumb > span,
  .topbar .breadcrumb .current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .topbar-search {
    display: none;
  }

  .topbar .topbar-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(60px, .55fr) 40px minmax(92px, 1fr);
    align-items: stretch;
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .topbar-actions > * {
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }

  .topbar-actions .month-btn,
  .topbar-actions .icon-btn,
  .topbar-actions .add-btn {
    height: 38px;
    min-height: 38px;
    padding: 0 7px;
    font-size: 11px;
  }

  .topbar-actions .add-btn {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content {
    width: 100%;
    min-width: 0;
    padding: 14px;
    gap: 14px;
  }

  .page,
  .page.active,
  .full-card,
  .chart-card,
  .cat-card,
  .planning-panel,
  .insight-panel {
    min-width: 0;
    max-width: 100%;
  }

  .hero-title {
    font-size: 22px;
    line-height: 1.25;
  }

  .transaction-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
  }

  .transaction-header-actions > .full-title {
    min-width: 0;
  }

  .transaction-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .transaction-actions .compact-action,
  .budget-actions .compact-action {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: auto;
    padding: 8px 6px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .transaction-filter-row {
    padding: 10px 14px 0;
    overflow-x: auto;
  }

  .add-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
  }

  .add-form-grid .fg:nth-child(3) {
    grid-column: 1 / -1;
  }

  .add-form-grid .btn-add {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .fg {
    min-width: 0;
  }

  .fg input,
  .fg select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    font-size: 14px;
  }

  .budget-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
  }

  .budget-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #page-budgets .add-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 14px;
  }

  #page-budgets .add-form-grid .btn-add {
    grid-column: 1 / -1;
  }

  .budget-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .planning-hero,
  .insights-hero {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px;
  }

  .planning-title,
  .insights-title {
    font-size: 21px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .planning-refresh,
  .insights-refresh {
    min-height: 40px;
  }

  .wealth-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .wealth-metric {
    min-width: 0;
    padding: 12px;
  }

  .wealth-metric-value {
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  .planning-columns,
  .health-grid,
  .insights-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goal-form input:first-child {
    grid-column: 1 / -1;
  }

  .goal-form button {
    min-height: 40px;
  }

  .report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-ai-page.active {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #page-ai-page .ai-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #page-ai-page .chat-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 10px;
  }

  #page-ai-page .chat-msg {
    width: fit-content;
    max-width: min(94%, 680px);
    min-width: 0;
  }

  #page-ai-page .chat-bubble {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.55;
  }

  #page-ai-page .quick-row {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 9px 10px;
    gap: 7px;
  }

  #page-ai-page .quick-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    padding: 7px 11px;
  }

  #page-ai-page .chat-input-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
  }

  #page-ai-page .chat-input-bar input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
  }

  #page-ai-page .chat-input-bar .send-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  .csv-import-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .full-txn-item {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 12px 14px;
  }
}

@media (max-width: 600px) {
  .topbar .topbar-actions {
    grid-template-columns: minmax(0, 1fr) minmax(54px, .55fr) 38px;
  }

  .topbar-actions .add-btn {
    display: none;
  }

  .topbar-actions .icon-btn {
    width: 38px;
    height: 38px;
    padding: 0;
  }

  .content {
    padding: 12px;
    gap: 12px;
  }

  .summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sum-card {
    padding: 12px;
  }

  .sum-label,
  .sum-sub {
    font-size: 10px;
  }

  .sum-value {
    font-size: 17px;
  }

  .transaction-actions,
  .budget-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transaction-actions .compact-action,
  .budget-actions .compact-action {
    font-size: 10px;
    min-height: 40px;
  }

  .transaction-filter-row {
    padding: 9px 12px 0;
  }

  .add-form-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .add-form-grid .fg:nth-child(3),
  .add-form-grid .btn-add {
    grid-column: auto;
  }

  #page-budgets .add-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px;
  }

  #page-budgets .add-form-grid .btn-add {
    grid-column: auto;
  }

  .wealth-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wealth-card,
  .planning-panel,
  .health-details,
  .insight-panel {
    padding: 14px;
  }

  .planning-hero,
  .insights-hero {
    padding: 15px;
  }

  .planning-title,
  .insights-title {
    font-size: 19px;
  }

  .goal-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-form input:first-child {
    grid-column: auto;
  }

  .report-month {
    max-width: 100%;
  }

  .full-txn-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 11px 12px;
  }

  .full-txn-item .cat-badge {
    display: none;
  }

  .full-txn-item .del-btn,
  .full-txn-item .edit-btn {
    font-size: 10px;
    padding: 4px 6px;
  }

  #page-ai-page .chat-msg {
    max-width: 96%;
  }
}

@media (max-width: 380px) {
  .topbar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .topbar .breadcrumb {
    font-size: 12px;
  }

  .topbar-actions .month-btn {
    font-size: 10px;
    padding: 0 4px;
  }

  .summary-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .wealth-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .transaction-actions,
  .budget-actions {
    gap: 6px;
  }
}

.wealth-trend-empty {
  margin-top: 14px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  color: var(--text3);
  font-size: 11px;
  line-height: 1.55;
}