/* FollowTheMoney vanilla styles */
:root {
  --income: #30d6a4;
  --expense: #ff4f6a;
  --accent: #6580ff;
  --bg: #0f1024;
  --fg: #f3f5ff;
  --panel: rgba(32,34,74,0.85);
  --panel-border: rgba(112,118,196,0.45);
  --topbar-bg: rgba(26,26,32,0.9);
  --input-bg: rgba(18,20,48,0.85);
  --input-border: rgba(255,255,255,0.25);
  --modal-bg: rgba(14,15,34,0.95);
  --sheet-bg: rgba(12,12,28,0.98);
  --muted: rgba(243,245,255,0.65);
  --radius-xl: 28px;
  --radius-lg: 18px;
  --topbar-offset: 8rem; /* ensures content clears the fixed header on all screens */
  --settings-gap: 1.2rem;
  --settings-card-padding: 1.25rem;
  --settings-grid-min: 18rem;
  --income-tint: rgba(48,214,164,0.18);
  --income-outline: rgba(48,214,164,0.6);
  --expense-tint: rgba(255,79,106,0.18);
  --expense-outline: rgba(255,79,106,0.6);
  --all-tint: rgba(101,128,255,0.15);
  --all-outline: rgba(101,128,255,0.55);
  --graph-card-bg: rgba(13,14,32,0.92);
  --graph-card-border: rgba(255,255,255,0.08);
  --graph-card-shadow: 0 30px 60px rgba(2,4,20,0.45);
  --graph-shell-bg: rgba(4,5,18,0.95);
  --graph-shell-fg: #f7f3ff;
  --graph-shell-muted: rgba(247,243,255,0.7);
  --graph-panel-bg: rgba(9,9,22,0.92);
  --graph-panel-border: rgba(255,255,255,0.08);
  --graph-pill-bg: rgba(255,255,255,0.04);
  --graph-pill-border: rgba(255,255,255,0.15);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
}
html.theme-light {
  --income: #49b98c;
  --expense: #d26640;
  --accent: #a37dff;
  --bg: #f7f2e8;
  --fg: #3b2c1d;
  --panel: rgba(255,255,255,0.92);
  --panel-border: rgba(177,153,120,0.4);
  --topbar-bg: rgba(228,213,255,0.95);
  --input-bg: rgba(255,255,255,0.9);
  --input-border: rgba(177,153,120,0.6);
  --modal-bg: rgba(255,255,255,0.98);
  --sheet-bg: rgba(255,255,255,0.98);
  --muted: rgba(59,44,29,0.7);
  --income-tint: rgba(73,185,140,0.22);
  --income-outline: rgba(73,185,140,0.55);
  --expense-tint: rgba(210,102,64,0.18);
  --expense-outline: rgba(210,102,64,0.55);
  --all-tint: rgba(163,125,255,0.2);
  --all-outline: rgba(163,125,255,0.5);
  --graph-card-bg: rgba(255,255,255,0.98);
  --graph-card-border: rgba(24,18,44,0.12);
  --graph-card-shadow: 0 35px 65px rgba(27,23,38,0.25);
  --graph-shell-bg: rgba(245,241,255,0.96);
  --graph-shell-fg: #2d1c3b;
  --graph-shell-muted: rgba(45,28,59,0.65);
  --graph-panel-bg: rgba(255,255,255,0.96);
  --graph-panel-border: rgba(45,28,59,0.15);
  --graph-pill-bg: rgba(45,28,59,0.08);
  --graph-pill-border: rgba(45,28,59,0.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { margin:0; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; overflow:hidden; }
/* Prevent double-tap to zoom on supporting browsers: prefer touch-action and a small JS guard.
  Note: disabling zoom via viewport can impact accessibility; we've added JS guard instead but
  also set touch-action on interactive controls for better gesture handling. */
html, body { -ms-touch-action: manipulation; touch-action: manipulation; }
.app { min-height:100vh; position:relative; overflow:hidden; }
.screen {
  min-height:100vh;
  height:100vh;
  padding:calc(var(--topbar-offset) + env(safe-area-inset-top)) 1.25rem calc(7rem + env(safe-area-inset-bottom));
  transition:opacity .3s ease;
  overflow-y:auto;
  scroll-padding-top:calc(var(--topbar-offset) + env(safe-area-inset-top));
}
#screen-home { overflow:hidden; padding-bottom:calc(7rem + env(safe-area-inset-bottom)); }
.screen.active { opacity:1; }
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:1.25rem .25rem 1rem; gap:.5rem; position:fixed; top:0; left:0; right:0; z-index:30; background:var(--topbar-bg); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.logo { font-size:1.35rem; font-weight:800; letter-spacing:-.3px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill { border:none; cursor:pointer; font-weight:600; padding:.7rem 1.2rem; border-radius:999px; font-size:.85rem; transition:all .2s ease; white-space:nowrap; }
.pill, .btn, .circle { touch-action: manipulation; }
/* Prevent long-press selection and callout on non-form UI elements */
html, body, .app, .screen, .top-bar, .transaction, .recent-item, .balance, .logo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Allow selection in text inputs and textareas */
.text-input, .note-container textarea, input[type='tel'], textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: text; }
.pill:active { transform:scale(.95); }
.pill.accent { background:var(--accent); color:#fff; }
.pill.accent:hover { filter:brightness(.92); }
.pill.ghost { background:transparent; color:var(--accent); }
.icon-gear { width:1.15rem; height:1.15rem; display:block; }
.hidden-placeholder { visibility:hidden; }
.center-stack { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; margin-top:0; min-height:0; padding-top:1rem; overflow:hidden; }
.balance { font-size:clamp(3rem, 12vw, 5.5rem); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-3px; line-height:1; text-align:center; padding:0 1rem; word-break:break-all; }
@media (min-width:600px){ .balance { font-size:clamp(5rem, 10vw, 7rem); } }
.balance-label { margin-bottom:.5rem; font-size:.9rem; text-transform:uppercase; letter-spacing:1px; font-weight:500; color:var(--muted); }
.badge { display:inline-block; margin-left:.5rem; padding:.2rem .5rem; font-size:.65rem; font-weight:800; letter-spacing:.3px; border-radius:999px; background:var(--panel); border:1px solid var(--panel-border); vertical-align:middle; color:var(--fg); }
.recent-list { width:100%; max-width:560px; margin-top:0.9rem; display:flex; flex-direction:column; gap:0.45rem; padding:0 1rem; }
.dashboard-grid { width:100%; max-width:560px; margin:0.9rem auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; padding:0 1rem; }
.dashboard-card { background:var(--panel); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--panel-border); border-radius:14px; padding:.75rem .5rem; display:flex; flex-direction:column; align-items:center; gap:.3rem; cursor:pointer; transition:all .2s ease; touch-action:manipulation; }
.dashboard-card:active { transform:scale(.97); background:rgba(255,255,255,.12); }
.dashboard-card .card-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; font-weight:700; opacity:.6; margin-bottom:.1rem; }
.dashboard-card .card-allowance { color:var(--income); font-size:.85rem; font-weight:800; text-align:center; word-break:break-word; }
.dashboard-card .card-spent { color:var(--expense); font-size:.85rem; font-weight:800; text-align:center; word-break:break-word; }
/* Budget mode styles - smaller text for Today/This Week/This Month */
.dashboard-card .card-period-label { font-size:.65rem; opacity:.5; margin-top:.15rem; }
.dashboard-card .card-income { color:var(--income); font-size:.78rem; font-weight:700; text-align:center; }
.dashboard-card .card-expense { color:var(--expense); font-size:.78rem; font-weight:700; text-align:center; }
.seasonal-settings { display:flex; flex-direction:column; gap:.8rem; margin-top:.8rem; }
.seasonal-settings.hidden { display:none; }
.recent-item { background:var(--panel); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--panel-border); border-radius:14px; padding:.5rem .75rem; display:flex; align-items:center; justify-content:space-between; font-size:.95rem; gap:.6rem; }
.recent-item.press-flash { animation:recentPressFlash .22s ease-out; }
.recent-item .r-title { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0.95; }
.recent-item .r-meta { font-size:.75rem; opacity:.55; margin-left:.5rem; }
.recent-item .r-amt { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.float-buttons { position:fixed; bottom:calc(4.5rem + env(safe-area-inset-bottom)); left:0; right:0; display:flex; justify-content:center; gap:4rem; padding:0 2rem; z-index:10; }
.float-buttons.single-mode { gap:0; }
.float-buttons.single-mode #btnAddIncome { display:none; }
.float-buttons.single-mode #btnAddExpense { width:7rem; height:7rem; font-size:4rem; }
.circle { width:5.5rem; height:5.5rem; border-radius:50%; font-size:3.5rem; line-height:1; font-weight:900; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), background-color .25s ease; background-size:55%; background-position:center; background-repeat:no-repeat; }
.circle.single-button-active { position:relative; overflow:hidden; }
.circle.single-button-active.holding-income { background-color:var(--income); transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), background-color 1s linear; }
.circle.income { background-color:var(--income); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); outline: 2px solid gold; box-shadow: 0 0 0 1px black; outline: 3px solid black; outline-offset: -2px; }
html.theme-dark .circle.income {
  outline: 3px solid lightgrey;
  outline-offset: -2px;
}
.circle.expense { background-color:var(--expense); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E"); outline: 2px solid gold; box-shadow: 0 0 0 1px black; outline: 3px solid black; outline-offset: -2px; }
html.theme-dark .circle.expense {
  outline: 3px solid lightgrey;
  outline-offset: -2px;
}
.circle:active { transform:scale(.92); box-shadow:0 5px 15px rgba(0,0,0,.4); }
@media (min-width:600px){ .circle { width:6rem; height:6rem; font-size:4rem; } .float-buttons.single-mode #btnAddExpense { width:7.5rem; height:7.5rem; } .float-buttons { gap:5rem; } }
.history-filter { margin:0 1.25rem 0.2rem; padding:.6rem 1rem; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; font-size:.8rem; text-align:center; font-weight:600; opacity:.8; }
.history-list { display:flex; flex-direction:column; gap:.85rem; padding:1rem 0 2rem; }
.transaction { background:var(--panel); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--panel-border); border-radius:var(--radius-xl); padding:1.1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; touch-action:pan-y; transition:box-shadow .25s ease, background-color .25s ease; isolation:isolate; }
.transaction .left { display:flex; flex-direction:column; flex:1; min-width:0; gap:.15rem; }
.transaction .title { font-weight:600; font-size:.95rem; margin-bottom:.25rem; }
.transaction .meta { font-size:.7rem; opacity:.5; margin-top:.15rem; }
.amount-pos { color:var(--income); font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.amount-neg { color:var(--expense); font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.transaction .actions { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.edit-btn { border:none; background:rgba(255,255,255,.15); color:inherit; width:2.1rem; height:2.1rem; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.edit-btn.note-outline { border:1px solid var(--expense); }
.edit-btn:active { transform:scale(.92); }
.theme-light .edit-btn { background:rgba(0,0,0,.08); }
.swipe-delete { position:absolute; inset:0; display:flex; justify-content:flex-end; align-items:center; padding-right:1.25rem; font-weight:700; color:var(--expense); pointer-events:none; }
.transaction.focus-overlay { z-index:2; box-shadow:0 0 0 2px rgba(101,128,255,.85); transform:scale(1.01); }
.transaction.focus-overlay .history-focus-cover { position:absolute; inset:-3px; border-radius:inherit; border:2px solid rgba(101,128,255,.9); background:transparent; pointer-events:none; opacity:0; transform:scale(.96); transition:opacity .25s ease, transform .3s ease; }
.transaction.focus-overlay .history-focus-cover.visible { opacity:1; transform:scale(1); }
.modal { position:fixed; inset:0; z-index:50; animation:fadeIn .25s ease; }
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.65); cursor:pointer; }
.modal-panel { position:absolute; top:5rem; left:1.25rem; right:1.25rem; max-width:500px; margin:0 auto; background:var(--modal-bg); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid var(--panel-border); border-radius:var(--radius-xl); padding:1.5rem 1.4rem 2rem; display:flex; flex-direction:column; gap:1.2rem; box-shadow:0 20px 60px rgba(0,0,0,.6); animation:slideUp .3s cubic-bezier(.4,0,.2,1); max-height:calc(90vh - 4rem); overflow-y:auto; }
.help-panel { max-width:720px; }
.help-content { display:flex; flex-direction:column; gap:1.1rem; max-height:calc(80vh - 4rem); overflow:auto; padding-right:.35rem; }
.help-content section { background:rgba(0,0,0,0.02); border-radius:18px; padding:1rem 1.1rem; border:1px solid rgba(255,255,255,0.08); }
html.theme-light .help-content section { background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.08); }
.help-content h3 { margin:0 0 .35rem; font-size:1.05rem; }
.help-content p { margin:0; line-height:1.5; font-size:.92rem; }
.help-content ul, .help-content ol { padding-left:1.2rem; margin:0; display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; line-height:1.4; }

.summary-shell {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* moved closer to top bar for better visual alignment */
  /* ~30px gap from top bar for consistent spacing */
  padding-top: 30px;
  transform: translateY(-75px);
}
.summary-card {
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
}
.summary-label { font-size:1rem; font-weight:700; letter-spacing:-.2px; }
.summary-total { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.summary-total span { font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; opacity:.7; }
.summary-total strong { font-size:1.35rem; font-weight:900; }
.summary-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.summary-metrics .metric { background:rgba(255,255,255,.05); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:1rem; display:flex; flex-direction:column; gap:.35rem; }
.summary-metrics span { font-size:.85rem; opacity:.75; }
.summary-metrics strong { font-size:1.1rem; font-weight:800; }
.summary-filters { font-size:.85rem; opacity:.8; }


.summary-list { background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-xl); padding:1.5rem; box-shadow:0 18px 32px rgba(0,0,0,0.2); }
.summary-list h2 { margin:0 0 1rem; font-size:1.1rem; }
.summary-hint { margin:-.5rem 0 1rem; font-size:.8rem; opacity:.65; }
.summary-list-items { display:flex; flex-direction:column; gap:.75rem; }
.summary-list-item { display:flex; justify-content:space-between; border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:.85rem 1rem; align-items:center; }
.summary-list-item.excluded { outline:1px solid #ff4f6a; border-color:#ff4f6a; }
.summary-list-item .title { font-weight:600; }
.summary-list-item .meta { font-size:.8rem; opacity:.7; margin-top:.25rem; }
.summary-list-item .amount { font-weight:800; font-variant-numeric:tabular-nums; }
.summary-list-item .text { display:flex; flex-direction:column; gap:.15rem; }

.settings-body { display:flex; flex-direction:column; gap:var(--settings-gap); }
.settings-grid { display:flex; flex-direction:column; gap:var(--settings-gap); }
@media (min-width:640px){ .settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(var(--settings-grid-min),1fr)); } }
.settings-card { background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:var(--settings-card-padding); display:flex; flex-direction:column; gap:var(--settings-gap); }
.settings-card h3 { margin:0; font-size:1.15rem; font-weight:800; letter-spacing:-.2px; }
.settings-card .card-subtitle { font-size:.85rem; opacity:.7; margin-top:.15rem; }
.settings-card .setting-row { padding:0; }
.settings-card .preview.small { margin-top:0; }
.settings-actions { display:flex; flex-direction:column; gap:.75rem; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.settings-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.settings-title { display:flex; align-items:center; gap:.6rem; }
.settings-gear { font-size:1.35rem; color:#fff; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
html.theme-light .settings-gear { color:#fff; }
.settings-header h2 { margin:0; font-size:1.5rem; font-weight:800; letter-spacing:-.5px; }
.inline-switch { margin:0; gap:.4rem; font-size:.75rem; }
.inline-switch .theme-label { font-weight:600; opacity:.7; }
.modal-panel h2 { margin:0 0 .5rem; font-size:1.5rem; font-weight:800; letter-spacing:-.5px; }
.setting-row { display:flex; flex-direction:column; gap:.6rem; padding:.5rem 0; }
.toggle-row { font-size:.9rem; display:flex; align-items:center; gap:.7rem; cursor:pointer; -webkit-user-select:none; user-select:none; }
.toggle-row input[type=checkbox] { width:1.3rem; height:1.3rem; cursor:pointer; accent-color:var(--accent); }
.small-label { font-size:.75rem; opacity:.65; letter-spacing:.3px; text-transform:uppercase; font-weight:600; margin-bottom:.25rem; display:block; }
.text-input { width:100%; padding:.8rem .95rem; border-radius:var(--radius-lg); background:var(--input-bg); color:var(--fg); border:1px solid var(--input-border); font-size:.95rem; font-family:inherit; transition:border-color .2s ease, background .2s ease; }
.text-input:focus { outline:none; border-color:var(--accent); }
.text-input.date-compact { width:12.5rem; }
.select-input { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%); background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.75rem; }
.preview.small { font-size:.8rem; opacity:.55; margin-top:.25rem; font-weight:500; }
.mt-half { margin-top:.5rem; }
.btn { border:none; cursor:pointer; font-weight:700; border-radius:var(--radius-lg); padding:.85rem 1.2rem; font-size:.9rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; transition:all .2s ease; font-family:inherit; }
.btn:active { transform:scale(.97); }
.btn.full { width:100%; }
.btn.accent { background:var(--accent); color:#fff; }
.btn.accent:hover { filter:brightness(.92); }
.btn.primary { background:var(--income); color:#000; font-weight:900; }
.btn.primary:hover { filter:brightness(.92); }
.btn.danger { background:var(--expense); color:#fff; }
.btn.danger:hover { filter:brightness(.92); }
.btn.ghost { background:rgba(255,255,255,.12); color:var(--fg); }
.btn.ghost:hover { background:rgba(255,255,255,.18); }
.btn.small { padding:.55rem .85rem; font-size:.75rem; }
.btn:disabled { opacity:.35; pointer-events:none; cursor:not-allowed; }
.confirm-row { display:flex; align-items:center; gap:.7rem; font-size:.8rem; flex-wrap:wrap; margin-top:.25rem; }
.sheet { position:fixed; inset:0; z-index:40; animation:fadeIn .2s ease; }
.sheet-overlay { position:absolute; inset:0; background:rgba(0,0,0,.65); cursor:pointer; }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; background:var(--sheet-bg); border-top:1px solid var(--panel-border); border-radius:30px 30px 0 0; padding:1.2rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:1.2rem; box-shadow:0 -10px 40px rgba(0,0,0,.5); animation:slideUpSheet .3s cubic-bezier(.4,0,.2,1); max-height:85vh; overflow-y:auto; }
@keyframes slideUpSheet { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sheet-grabber { width:45px; height:5px; margin:0 auto .5rem; border-radius:999px; background:rgba(255,255,255,.25); }
html.theme-light .btn.ghost { background:rgba(0,0,0,.08); }
html.theme-light .btn.ghost:hover { background:rgba(0,0,0,.12); }
html.theme-light .sheet-grabber { background:rgba(0,0,0,.2); }
.amount-display { font-size:clamp(3.5rem, 10vw, 5rem); font-weight:900; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:-2px; padding:.5rem 1rem; cursor:pointer; -webkit-user-select:none; user-select:none; min-height:5rem; display:flex; align-items:center; justify-content:center; }
.sheet-type-label { text-align:center; font-size:1.2rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:0.95; margin-top:-0.2rem; }
.sheet-type-label.expense { color: var(--expense); }
.sheet-type-label.income { color: var(--income); }
.category-container, .name-container { display:flex; flex-direction:column; gap:.45rem; }
.name-container input:disabled { opacity:.5; cursor:not-allowed; }
.suggestion-row { display:flex; flex-wrap:wrap; gap:.35rem; }
.suggestion-row:empty { display:none; }
.suggestion-row[hidden] { display:none !important; }
.suggestion-chip { border:1px solid var(--panel-border); border-radius:999px; padding:.3rem .85rem; font-size:.8rem; font-weight:600; background:rgba(255,255,255,.05); color:var(--fg); cursor:pointer; transition:.2s ease; }
.suggestion-chip:hover, .suggestion-chip:focus { background:var(--panel); border-color:var(--accent); outline:none; }
.name-container .suggestion-chip { opacity:.85; }
.note-container { padding:.25rem 0; }
.note-container textarea { width:100%; height:95px; resize:none; padding:.9rem 1rem; border-radius:var(--radius-lg); background:var(--input-bg); border:1px solid var(--input-border); color:var(--fg); font-size:.9rem; font-family:inherit; line-height:1.5; transition:border-color .2s ease, background .2s ease; }
.note-container textarea:focus { outline:none; border-color:var(--accent); }
.date-edit { display:none; flex-direction:column; gap:.45rem; }
.sheet-panel[data-mode="edit"] .date-edit { display:flex; }
.date-edit input { width:auto; min-width:220px; max-width:100%; align-self:flex-start; text-align:center; }
.recurring-container { display:none; flex-direction:column; gap:.65rem; padding:.75rem 0; }
.sheet-panel[data-mode="edit"] .recurring-container { display:flex; }
.recurring-toggle-label { display:flex; align-items:center; gap:.6rem; font-size:.95rem; font-weight:600; cursor:pointer; }
.recurring-toggle-label input[type="checkbox"] { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.recurring-frequency { display:flex; flex-direction:column; gap:.45rem; }
.recurring-frequency select { width:100%; padding:.75rem 1rem; }
.type-filter-card {
  width:100%;
  margin:0 auto 1rem;
  padding:1.1rem 1.3rem 1.45rem;
  border-radius:var(--radius-xl);
  border:2px solid var(--accent);
  background:var(--panel);
  box-shadow:0 16px 32px rgba(0,0,0,.25);
  transform: translateY(-45px);
  z-index: 6;
}
/* Nudge the chip rows up to sit closer to the header */
#categoryChipRow,
#nameChipRow {
  transform: translate(-20px, -40px);
  z-index: 5;
}
html.theme-light .type-filter-card { box-shadow:0 12px 24px rgba(0,0,0,.12); }
.type-filters {
  display:grid;
  grid-template-columns:1fr 0.6fr 1fr;
  gap:.55rem;
  margin:0;
}
.type-pill {
  border:2px solid var(--panel-border);
  border-radius:999px;
  padding:.65rem .95rem;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  background:transparent;
  color:var(--fg);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:visible;
  position:relative;
}
.type-pill:active { transform:scale(.97); }
.type-pill[data-type="income"] { color:var(--income); border-color:var(--income-outline); background:var(--income-tint); }
.type-pill[data-type="all"] { color:var(--accent); border-color:var(--all-outline); background:var(--all-tint); }
.type-pill[data-type="expense"] { color:var(--expense); border-color:var(--expense-outline); background:var(--expense-tint); }
.type-pill::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) inset;
}
.type-pill.active[data-type="income"] { background:var(--income); color:#000; border-color:var(--income); }
.type-pill.active[data-type="all"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.type-pill.active[data-type="expense"] { background:var(--expense); color:#fff; border-color:var(--expense); }
.type-pill.active::after { opacity:1; background:#0b2a6b; border:2px solid #58c7ff; }
html.theme-light .type-pill.active::after { background:#f5e8cf; border:2px solid #b388ff; }
.chip-row { display:flex; gap:.5rem; overflow-x:auto; padding:0 1.3rem 0 1.25rem; margin:0 0 .75rem; }
.chip-row::-webkit-scrollbar { display:none; }
.chip { border:1px solid var(--panel-border); border-radius:999px; padding:.35rem .9rem; font-size:.8rem; font-weight:600; background:var(--panel); color:var(--fg); cursor:pointer; white-space:nowrap; transition:.2s ease; }
.chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Insights landscape shell */
#screen-graph {
  --graph-bar-stack: clamp(2.4rem, 6vw, 3.2rem);
  --graph-notch-left: env(safe-area-inset-left, 0px);
  --graph-notch-right: env(safe-area-inset-right, 0px);
  padding:calc(var(--graph-bar-stack) + env(safe-area-inset-top, 0px) + 1rem) calc(clamp(1rem, 3vw, 2.4rem) + 9px) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#000;
}
#screen-graph[hidden] { display:none !important; }
.graph-top-bar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding:calc(env(safe-area-inset-top, 0px) + .35rem) clamp(1rem, 4vw, 2rem) .35rem;
  padding-left:calc(var(--graph-notch-left) + clamp(1rem, 4vw, 2rem));
  padding-right:calc(var(--graph-notch-right) + clamp(1rem, 4vw, 2rem));
  background:var(--graph-shell-bg);
  color:var(--graph-shell-fg);
  border-bottom:1px solid var(--graph-panel-border);
  box-shadow:0 12px 26px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:auto minmax(190px, 1fr) auto;
  align-items:center;
  gap:.65rem;
  z-index:30;
}
.graph-toolbar { display:flex; align-items:center; gap:.65rem; justify-self:center; }
.graph-toolbar .graph-type-filters { width:auto; }
.graph-icon-btn {
  width:38px;
  height:38px;
  border-radius:32px;
  border:1px solid var(--graph-pill-border);
  background:var(--graph-pill-bg);
  color:var(--graph-shell-fg);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.graph-icon-btn svg { width:22px; height:22px; stroke:none; fill:currentColor; }
.graph-icon-btn[aria-pressed="true"] { background:var(--accent); color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.25); }
.graph-icon-btn:active { transform:scale(.96); }
.graph-top-bar::before,
.graph-top-bar::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:var(--graph-notch-left);
  background:var(--graph-shell-bg);
  pointer-events:none;
}
.graph-top-bar::after {
  width:var(--graph-notch-right);
  right:0;
}
.graph-top-bar::before { left:0; }
.graph-title { margin:0; font-size:1.05rem; letter-spacing:-.15px; color:var(--graph-shell-fg); font-weight:800; }
.graph-top-bar #graphTypeFilters { justify-self:center; width:min(260px, 100%); }
.graph-view-toggle {
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background:var(--graph-pill-bg);
  border:1px solid var(--graph-pill-border);
  justify-self:end;
}
.graph-view-toggle label {
  display:flex;
  align-items:center;
  gap:.25rem;
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
}
.graph-view-toggle input { accent-color:var(--accent); }
@media (max-width:720px){
  .graph-top-bar { grid-template-columns:1fr; justify-items:stretch; }
  .graph-toolbar { justify-self:stretch; }
  .graph-toolbar .graph-type-filters { width:100%; }
  .graph-view-toggle { justify-self:center; }
}
.graph-board {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:1.25rem;
}
#graphTypeFilters.graph-type-filters {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  background:var(--graph-pill-bg);
  border-radius:999px;
  padding:.18rem;
  border:1px solid var(--graph-pill-border);
}
#graphTypeFilters .graph-type-pill {
  flex:1;
  border:none;
  border-radius:999px;
  padding:.55rem .9rem;
  font-weight:800;
  font-size:.85rem;
  background:transparent;
  color:var(--graph-shell-muted);
  cursor:pointer;
  transition:all .2s ease;
}
#graphTypeFilters .graph-type-pill.active[data-graph-type="income"] {
  background:var(--income);
  color:#02130d;
  transform:translateY(-1px);
}
#graphTypeFilters .graph-type-pill.active[data-graph-type="expense"] {
  background:var(--expense);
  color:#fff;
  transform:translateY(-1px);
}
.graph-main {
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(360px, 2fr) minmax(280px, 1fr);
  gap:2rem;
  align-items:stretch;
}
.graph-chart-card {
  background:var(--graph-card-bg);
  border:1px solid var(--graph-card-border);
  border-radius:32px;
  box-shadow:var(--graph-card-shadow);
  width:100%;
  padding:2.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:0;
}
.graph-breakdown-card {
  background:var(--graph-card-bg);
  border:1px solid var(--graph-card-border);
  border-radius:32px;
  box-shadow:var(--graph-card-shadow);
  width:100%;
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.graph-breakdown-card .graph-legend {
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:.35rem;
  margin-right:-.15rem;
}
.graph-breakdown-total { font-size:.85rem; font-weight:700; color:var(--graph-shell-muted); }
.graph-breakdown-card .graph-legend::-webkit-scrollbar { width:6px; }
.graph-breakdown-card .graph-legend::-webkit-scrollbar-thumb {
  background:var(--graph-pill-border);
  border-radius:3px;
}
.graph-canvas-shell { position:relative; flex:1; min-width:280px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.graph-canvas-wrap { width:100%; max-width:520px; aspect-ratio:1 / 1; margin:0 auto; display:flex; align-items:center; justify-content:center; position:relative; }
#graphCanvas { width:100%; height:auto; max-width:480px; }
#graphMain[hidden],
#graphTimeline[hidden] { display:none !important; }
.graph-timeline {
  width:100%;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.graph-timeline-card {
  background:var(--graph-card-bg);
  border:1px solid var(--graph-card-border);
  border-radius:32px;
  box-shadow:var(--graph-card-shadow);
  padding:2rem;
  min-height:0;
  height:100%;
  flex:1;
  max-height:calc(100vh - var(--graph-bar-stack) - 4rem);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.timeline-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.timeline-header h2 { margin:0; font-size:1.1rem; letter-spacing:-.1px; }
.timeline-subtitle { margin:.2rem 0 0; font-size:.85rem; opacity:.7; }
.timeline-cursor-toggle {
  padding:.4rem .75rem;
  border-radius:999px;
  border:1px solid var(--graph-pill-border);
  background:var(--graph-pill-bg);
  color:var(--graph-shell-fg);
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.timeline-cursor-toggle:hover {
  background:rgba(255,255,255,0.08);
}
.timeline-cursor-toggle.active {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.timeline-legend { display:flex; gap:1rem; font-size:.85rem; font-weight:700; color:var(--graph-shell-muted); }
.timeline-legend .dot { width:.65rem; height:.65rem; border-radius:50%; display:inline-block; margin-right:.35rem; }
.timeline-legend .dot.income { background:var(--income); }
.timeline-legend .dot.expense { background:var(--expense); }
.timeline-canvas-wrap {
  position:relative;
  width:100%;
  flex:1;
  min-height:0;
  height:100%;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  --cursor-left: 50%;
}
#timelineCanvas { width:100%; height:100%; display:block; }

.timeline-cursor {
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--accent);
  box-shadow:0 0 12px rgba(0,0,0,0.4);
  left:var(--cursor-left);
  transform:translateX(-0.5px);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.timeline-canvas-wrap.showing-cursor .timeline-cursor {
  opacity:1;
}
.timeline-popup {
  position:absolute;
  left:50%;
  top:calc(1rem - 112px);
  transform:translateX(-50%);
  background:var(--graph-panel-bg);
  border:1px solid var(--graph-panel-border);
  border-radius:18px;
  padding:.7rem .85rem;
  box-shadow:0 18px 36px rgba(0,0,0,0.32);
  min-width:210px;
  max-width:280px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  color:var(--graph-shell-fg);
  z-index:20;
}
.timeline-canvas-wrap.showing-cursor .timeline-popup {
  opacity:1;
  pointer-events:auto;
}
.timeline-popup-date {
  margin:0 0 .4rem;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:-.1px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.timeline-scroll-indicators {
  display:flex;
  flex-direction:column;
  gap:.1rem;
  opacity:.6;
}
.timeline-scroll-arrow {
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  opacity:0;
  transition:opacity .2s ease;
}
.timeline-scroll-arrow.up {
  border-bottom:5px solid var(--graph-shell-fg);
}
.timeline-scroll-arrow.down {
  border-top:5px solid var(--graph-shell-fg);
}
.timeline-scroll-arrow.visible {
  opacity:1;
}
.timeline-popup-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  /* Show max two rows, allow scroll for more */
  --timeline-row-height: 2rem;
  max-height: calc(var(--timeline-row-height) * 2 + .2rem);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.timeline-popup-list li {
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  font-size:.82rem;
  font-weight:600;
  border-radius:10px;
  padding:.3rem .5rem;
  background:rgba(255,255,255,0.05);
  min-height: var(--timeline-row-height);
}
.timeline-popup-list li strong { font-weight:800; }
.timeline-popup-list li.income strong { color:var(--income); }
.timeline-popup-list li.expense strong { color:var(--expense); }
.timeline-popup-empty {
  font-size:.78rem;
  opacity:.7;
  text-align:center;
}

/* Ensure canvas wrappers don't force unexpected growth and canvases fill their containers */
.graph-canvas-shell { min-height:0; }
.graph-canvas-wrap, .timeline-canvas-wrap { min-height:0; }
.graph-chart-card canvas,
.graph-timeline-card canvas,
#graphCanvas,
#timelineCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.timeline-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600; opacity:.75; color:var(--graph-shell-muted); padding:1rem; }
@media (max-width:820px){
  .graph-main {
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
  }
  .graph-breakdown-card,
  .graph-chart-card {
    height:auto;
    min-height:0;
  }
  .graph-breakdown-card .graph-legend {
    max-height:320px;
  }
}
.graph-total-overlay {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  pointer-events:none;
  color:var(--graph-shell-fg);
}
.graph-total-overlay .total-label { font-size:.85rem; font-weight:600; opacity:.65; letter-spacing:.5px; text-transform:uppercase; }
.graph-total-overlay .total-amount { font-size:1.5rem; font-weight:900; margin:.2rem 0; }
.graph-total-overlay .total-scope { font-size:.8rem; opacity:.6; }
.graph-breakdown-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}
.legend-scroll-indicators {
  opacity:0;
  pointer-events:none;
}
.legend-scroll-indicators.active {
  opacity:.6;
}
.graph-breakdown-card h2 { margin:0; font-size:1.05rem; letter-spacing:-.1px; }
.graph-legend { display:flex; flex-direction:column; gap:.7rem; padding:0; }
.graph-legend-item {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.6rem;
  padding:.55rem .9rem;
  border-radius:18px;
  background:var(--graph-pill-bg);
  border:1px solid var(--graph-panel-border);
  font-weight:600;
  color:var(--graph-shell-fg);
}
.graph-legend-item strong { font-weight:700; font-variant-numeric:tabular-nums; }
.graph-legend-item .legend-text { flex:1; display:flex; align-items:baseline; gap:.35rem; }
.graph-legend-item .legend-label { font-size:.95rem; font-weight:700; }
.graph-legend-item .legend-amount { font-size:.85rem; opacity:.75; font-variant-numeric:tabular-nums; }
.graph-legend-color { width:.65rem; height:.65rem; border-radius:50%; flex-shrink:0; margin-top:.25rem; }
.graph-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.9rem; font-weight:600; opacity:.7; padding:1rem; color:var(--graph-shell-muted); }
.group-summary {
  margin:0 auto 1rem;
  padding:1.1rem 1.3rem;
  border-radius:var(--radius-xl);
  background:var(--panel);
  border:2px solid var(--accent);
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  box-shadow:0 16px 32px rgba(0,0,0,.25);
  transform: translateY(-53px);
  z-index: 4;
}
html.theme-light .group-summary { box-shadow:0 12px 28px rgba(0,0,0,.12); }
.group-summary .label { font-size:.9rem; }
.group-summary .sum { font-size:1rem; font-variant-numeric:tabular-nums; }
.hidden-input { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fade-in { animation:fade .3s ease; }
@keyframes fade { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }
@keyframes recentPressFlash {
  0% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,0); }
  50% { transform:scale(0.97); box-shadow:0 0 0 6px rgba(255,255,255,0.18); }
  100% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.empty { text-align:center; padding:4rem 2rem 2rem; opacity:.5; font-size:.95rem; }
/* Small visual for toggle label spacing (keeps aligned with other toggles) */
.toggle-row input[type=checkbox] { margin-right: .6rem; }

/* Switch control styles for theme toggle */
.toggle-row.switch { align-items:center; }
.toggle-row.switch input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }
.switch-ui {
  --sw:56px;
  --sh:28px;
  width:var(--sw);
  height:var(--sh);
  border-radius:999px;
  background:rgba(255,255,255,.15);
  border:0;
  position:relative;
  box-sizing:border-box;
  flex:0 0 auto;
  transition:background .2s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.switch-ui { position:relative; }
.switch-ui::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--sh);
  height: var(--sh);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.32);
  transform: translateY(-50%);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), background .12s ease;
}
.toggle-row.switch input[type=checkbox]:checked + .switch-ui { background:var(--accent); }
.toggle-row.switch input[type=checkbox]:checked + .switch-ui::after { transform: translate(calc(var(--sw) - var(--sh)), -50%); }
.toggle-row.switch span:last-child { margin-left:.8rem; }

.advanced-group { display:flex; flex-direction:column; gap:.6rem; }
#seasonBadge {
  transform: translateY(-1px);
}