/* ===========================================================
   COLOR RESERVATIONS FOR FUTURE DEVELOPMENT — do not repurpose:
   - Purple/violet is reserved for a future investment portfolio icon.
   - Teal is reserved for a future savings visual icon.
   Established per explicit product direction; the Premium Tools menu
   was moved off violet specifically because of this.
   =========================================================== */

:root {
  /* ---- core vintage palette (matches logo: silver / vintage blue / cream / dark vintage) ---- */
  --page-bg: #0D1117;
  --dark-vintage: #1B2330;
  --vintage-blue: #2E5472;
  --vintage-blue-light: #6E8FA3;
  --silver: #B3B6B9;
  --silver-dim: #7C8489;
  --tan: #E8E1D3;
  --grey: #313032;
  --error: #E08B7D;

  --panel-bg: #12181F;
  --panel-border: #0F1620;

  /* panel accents — muted vintage green / red / yellow, still tuned to sit with the silver/blue chrome */
  --add-accent: #5C8A6B;
  --add-accent-hover: #70A07F;
  --add-bg: #17241C;
  --subtract-accent: #A65048;
  --subtract-accent-hover: #BA645B;
  --subtract-bg: #271613;
  --transfer-accent: #BC9A4A;
  --transfer-accent-hover: #CDAE63;
  --transfer-bg: #272012;
  --debtpayment-accent: #8F7AA8;
  --debtpayment-accent-hover: #A390BD;
  --debtpayment-bg: #1E1A26;

  /* brighter glow versions of the accent colors, for neon panel glows —
     dialed toward muted sage / coral / warm gold rather than pure neon,
     so the glow reads as premium-vintage instead of arcade-bright */
  --add-glow: #6EC496;
  --subtract-glow: #E0806A;
  --transfer-glow: #E0B96E;
}

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

html {
  scrollbar-width: thin;
  scrollbar-color: #26313F transparent;
}

/* Defensive guard against any single mis-sized element (a fixed-width
   dropdown, an unusually long unbroken string, etc.) forcing the whole
   page to scroll horizontally on a phone. Doesn't change desktop
   layout at all — it only ever matters when something would otherwise
   overflow the viewport width. */
html, body {
  overflow-x: hidden;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #26313F;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--vintage-blue); }

body {
  font-family: 'Public Sans', -apple-system, sans-serif;
  background-color: var(--page-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0'%3E%3C/feColorMatrix%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'%3E%3C/rect%3E%3C/svg%3E"),
    radial-gradient(ellipse at top, rgba(46,84,114,0.16), transparent 60%);
  background-blend-mode: overlay, normal;
  background-attachment: fixed;
  color: var(--tan);
  line-height: 1.55;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
}

.dash-header {
  padding: 20px 24px;
  border-bottom: 1px solid #222C3A;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(13, 17, 23, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; color: var(--silver); display: flex; align-items: center; gap: 8px; transition: opacity 0.15s ease; }
.wordmark:hover { opacity: 0.8; }
.wordmark img { height: 28px; width: auto; }
.wordmark-brand { font-family: 'Jura', 'Fraunces', serif; letter-spacing: 0.08em; color: var(--tan); }

/* Shared here (not just per-page) so any page loading dashboard.css gets
   this automatically — previously only defined inline on each page
   individually, which is exactly how Spendings ended up missing it. */
.wip-banner {
  text-align: center;
  padding: 5px 20px;
  background: transparent;
  border-bottom: 1px solid rgba(139,111,71,0.25);
  font-family: 'Public Sans', sans-serif;
  font-size: 11px;
  color: #b3ae9f;
  letter-spacing: .15px;
}

.nav-auth { display: flex; align-items: center; gap: 10px; }
.user-email { font-size: 0.78rem; color: var(--silver-dim); opacity: 0.75; }

.btn-logout, .btn-ghost {
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--silver-dim);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-logout:hover, .btn-ghost:hover { background: rgba(179,182,185,0.08); border-color: rgba(179,182,185,0.25); color: var(--tan); transform: none; }
.btn-logout:active, .btn-ghost:active { transform: none; }

/* ---------- SETTINGS GEAR + PREMIUM TOOLS (the two primary nav
   actions — given real visual weight so they read as the main controls
   on the page, not just icons floating among equally-weighted buttons) ---------- */
.settings-wrap { position: relative; }

.btn-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(232,225,211,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.btn-icon:hover { transform: scale(1.06); background: rgba(255,255,255,0.06); border-color: rgba(232,225,211,0.26); }
.btn-icon.spin svg { transform: rotate(45deg); }
.btn-icon svg { width: 22px; height: 22px; stroke: var(--silver); transition: transform 0.2s ease, stroke 0.15s ease; }
.btn-icon:hover svg { stroke: var(--tan); }

.settings-dropdown {
  position: absolute;
  top: 46px;
  right: 0;
  background: var(--dark-vintage);
  border: 1px solid #222C3A;
  border-radius: 10px;
  min-width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(-6px);
  transform-origin: top right;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.settings-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px; height: 12px;
  background: var(--dark-vintage);
  border-left: 1px solid #222C3A;
  border-top: 1px solid #222C3A;
  transform: rotate(45deg);
}
.settings-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.dropdown-item {
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tan);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.dropdown-item:hover { background: rgba(255,255,255,0.06); padding-left: 15px; }
.dropdown-item.danger { color: var(--error); }

.dash-main { max-width: 960px; margin: 0 auto; padding: 36px 24px 100px; }

.loading-message { text-align: center; padding: 60px 24px; color: var(--silver-dim); }

.overview-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.card {
  background: linear-gradient(150deg, rgba(110,143,163,0.10), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(110,143,163,0.28);
  border-radius: 14px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vintage-blue-light), transparent);
  opacity: 0.85;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(46,84,114,0.28);
  border-color: rgba(110,143,163,0.5);
}

/* Staggered entrance on first load — applied once via JS by adding
   .card-enter with an index-based delay, removed after it plays so it
   never replays on a normal re-render (which happens constantly during
   regular use and would be distracting if it animated every time). */
.card.card-enter {
  animation: cardEnterUp 0.5s cubic-bezier(.2,.8,.25,1) backwards;
}
@keyframes cardEnterUp {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .card.card-enter { animation: none; }
}

.card { position: relative; }
.sync-hint {
  position: absolute;
  bottom: 8px;
  left: 20px;
  right: 20px;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--emerald-bright, #63D9AA);
  font-weight: 600;
}
.card { padding-bottom: 34px; }
.card-add-category { padding-bottom: 24px; }
.sync-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.card:hover .sync-hint,
.card:focus-within .sync-hint {
  opacity: 1;
}
.envelope-adjust-link {
  display: inline-block;
  margin-left: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--vintage-blue-light);
  font-size: 0.62rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(110,143,163,0.4);
  text-underline-offset: 2px;
  cursor: pointer;
  pointer-events: auto; /* .sync-hint above disables pointer events on itself — this button needs to opt back in explicitly */
}
.envelope-adjust-link:hover { color: var(--tan); }

/* ==========================================================================
   ENVELOPE PICKER — "Adjust set-aside" modal opened from a Dashboard card.
   Each envelope gets its own card: the current amount front and center,
   a quick-add row (chips + a custom amount) as the primary action, and
   setting an exact amount tucked behind a toggle for the rarer case.
   ========================================================================== */
.envelope-picker-list { display: flex; flex-direction: column; gap: 14px; }

.envelope-picker-card {
  background: linear-gradient(155deg, rgba(110,143,163,0.09), rgba(255,255,255,0.02));
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px 16px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.envelope-picker-card:hover {
  border-color: rgba(110,143,163,0.32);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.envelope-picker-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.envelope-picker-account {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tan);
}
.envelope-picker-amount {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--vintage-blue-light);
  text-shadow: 0 0 16px rgba(110,143,163,0.32);
  transition: color 0.2s ease;
}
.envelope-picker-amount.just-updated {
  color: var(--add-glow);
  text-shadow: 0 0 16px rgba(110,196,150,0.4);
}

.envelope-picker-quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.envelope-picker-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.envelope-picker-chip {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(110,196,150,0.32);
  background: rgba(110,196,150,0.08);
  color: var(--add-glow);
  font-size: 0.74rem;
  font-weight: 700;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.envelope-picker-chip:hover { background: rgba(110,196,150,0.18); border-color: rgba(110,196,150,0.55); transform: translateY(-1px); }
.envelope-picker-chip:active { transform: translateY(0) scale(0.97); }
.envelope-picker-chip:disabled { opacity: 0.5; cursor: default; transform: none; }

.envelope-picker-custom-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.envelope-picker-add-input {
  width: 92px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--panel-border);
  background: #0F151C;
  color: var(--tan);
  font-size: 0.82rem;
  font-family: 'IBM Plex Mono', monospace;
  text-align: right;
}
.envelope-picker-add-input::placeholder { color: var(--silver-dim); font-family: 'Public Sans', sans-serif; }
.envelope-picker-add-input:focus { outline: none; border-color: var(--add-glow); box-shadow: 0 0 0 3px rgba(110,196,150,0.16); }
.envelope-picker-add-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--add-accent);
  color: #0D1710;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(92,138,107,0.3);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.envelope-picker-add-btn svg { width: 16px; height: 16px; }
.envelope-picker-add-btn:hover { background: var(--add-accent-hover); transform: scale(1.07); box-shadow: 0 3px 12px rgba(92,138,107,0.42); }
.envelope-picker-add-btn:active { transform: scale(0.95); }
.envelope-picker-add-btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.envelope-picker-exact-toggle {
  display: inline-block;
  margin: 10px 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--silver-dim);
  font-size: 0.68rem;
  font-family: 'Public Sans', sans-serif;
  text-decoration: underline;
  text-decoration-color: rgba(179,182,185,0.32);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.envelope-picker-exact-toggle:hover { color: var(--tan); }

.envelope-picker-exact-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--panel-border);
  animation: envelopeExactReveal 0.18s ease;
}
@keyframes envelopeExactReveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.envelope-picker-input {
  flex: 1;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #0F151C;
  color: var(--tan);
  font-size: 0.9rem;
  font-family: 'IBM Plex Mono', monospace;
}
.envelope-picker-input:focus { outline: none; border-color: var(--vintage-blue-light); box-shadow: 0 0 0 3px rgba(110,143,163,0.18); }
.envelope-picker-save-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--vintage-blue);
  color: var(--tan);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.envelope-picker-save-btn:hover { background: var(--vintage-blue-light); }

.card-custom-category {
  border-color: rgba(63,174,133,0.3);
}
.card-custom-category .sync-hint {
  color: var(--silver-dim);
  font-weight: 500;
}

/* Dashed "add a category" card — same size/shape as the real cards, so
   it reads as part of the same row rather than a bolted-on afterthought. */
.card-add-category {
  background: none;
  border: 1.5px dashed rgba(110,143,163,0.4);
  border-radius: 14px;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.card-add-category::before { display: none; }

/* Drag-and-drop reordering — a small handle in the corner, invisible
   until you're actually looking at that card, plus visual states for
   the card being dragged and whatever it's currently hovering over. */
.card-drag-handle {
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  color: var(--silver-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.card:hover .card-drag-handle { opacity: 0.7; }
.card-drag-handle:hover { opacity: 1 !important; background: rgba(110,143,163,0.16); color: var(--tan); }

.card-color-btn {
  position: absolute;
  top: 13px; right: 38px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
  padding: 0;
}
.card:hover .card-color-btn { opacity: 0.85; }
.card-color-btn:hover { opacity: 1 !important; transform: scale(1.2); border-color: rgba(255,255,255,0.5); }

/* Kebab menu (Rename / Delete) — custom categories only. Default
   categories (Savings/Investment/Expenses/Checking) are wired into
   too much else (the Add/Subtract/Transfer panels, finance_totals'
   own columns) to safely rename or delete from here, so they keep
   just the color swatch; this menu only ever renders on custom cards. */
.card-menu-btn {
  position: absolute;
  top: 10px; right: 60px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--silver-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
  padding: 0;
}
.card:hover .card-menu-btn { opacity: 0.7; }
.card-menu-btn:hover,
.card-menu-btn.menu-open { opacity: 1 !important; background: rgba(110,143,163,0.16); color: var(--tan); }
.card-menu-btn svg { width: 13px; height: 13px; }

.card-menu-dropdown {
  position: absolute;
  top: 34px; right: 8px;
  min-width: 128px;
  background: var(--dark-vintage);
  border: 1px solid #222C3A;
  border-radius: 9px;
  padding: 5px;
  z-index: 10;
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94) translateY(-4px);
  transform-origin: top right;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.card-menu-dropdown.open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }

.card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tan);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.14s ease;
}
.card-menu-item:hover { background: rgba(255,255,255,0.06); }
.card-menu-item.danger { color: var(--error); }
.card-menu-item.danger:hover { background: rgba(224,139,125,0.12); }

.color-picker-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 6px 0;
}
.color-picker-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.color-picker-swatch:hover { transform: scale(1.08); border-color: rgba(255,255,255,0.4); }

.card[data-cat-key].dragging { opacity: 0.4; cursor: grabbing; }
.card[data-cat-key].drag-over {
  box-shadow: inset 0 0 0 2px var(--vintage-blue-light), 0 6px 22px rgba(0,0,0,0.3);
  transform: scale(1.015);
}
.card-add-category:hover {
  border-color: var(--vintage-blue-light);
  background: rgba(110,143,163,0.06);
  transform: translateY(-4px);
  box-shadow: none;
}
.add-category-plus {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--vintage-blue-light);
  font-weight: 300;
}
.add-category-label {
  font-size: 0.72rem;
  color: var(--silver-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Automated section header — sits above the category cards, the main
   event of the page: bigger, with a soft glow underline to match the
   Dashboard's own signature color (the same vintage blue already used
   in its header chrome), the same way Connections leans emerald and
   Budget Planner leans brass. */
.overview-section { margin-bottom: 10px; }
.overview-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 2px;
}
.overview-section-title {
  font-family: 'Fraunces', serif;
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--tan);
  text-shadow: 0 0 24px rgba(110,143,163,0.35);
  position: relative;
}
.overview-section-title::after {
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--vintage-blue-light), transparent);
  border-radius: 2px;
}
.overview-section-sub {
  font-size: 0.78rem;
  color: var(--silver-dim);
  letter-spacing: 0.2px;
}

/* Manual entry — always visible now (no click-to-reveal), but clearly
   the secondary tool on the page rather than sitting at the same
   visual weight as the automated cards above: smaller type, muted
   color, tighter spacing, no glow. */
.manual-entry-section {
  margin-top: 32px;
  border-top: 1px solid var(--panel-border, rgba(232,225,211,0.1));
  padding-top: 18px;
}
.manual-entry-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.manual-entry-head-title {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--silver-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.manual-entry-head-sub {
  font-size: 0.72rem;
  color: var(--silver-dim);
  opacity: 0.7;
}
.manual-entry-section .panel {
  transform: scale(0.98);
  transform-origin: top left;
  opacity: 0.92;
  padding: 18px;
}
.manual-entry-section .panel h2 { font-size: 0.95rem; }
.manual-entry-section .panel:hover { opacity: 1; }

/* Transaction review queue — redesigned to be the most polished thing
   on the site, since it's meant to be the most-used. Warmer gradient,
   a glowing accent bar per row color-coded by add/subtract, and softer
   motion throughout. */
.txn-review-section {
  background: linear-gradient(155deg, rgba(110,143,163,0.09), rgba(255,255,255,0.02) 55%, rgba(99,217,170,0.05));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(232,225,211,0.14);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.txn-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.txn-review-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--tan);
  margin-bottom: 4px;
}
.txn-review-title::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--emerald-bright, #63D9AA);
  box-shadow: 0 0 8px var(--emerald-bright, #63D9AA);
}
.txn-review-sub { font-size: 0.79rem; color: var(--silver-dim); line-height: 1.4; max-width: 480px; }
.txn-review-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.txn-refresh-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.02);
  color: var(--silver-dim);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.txn-refresh-btn svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }
.txn-refresh-btn:hover { background: rgba(110,143,163,0.1); border-color: rgba(110,143,163,0.35); color: var(--vintage-blue-light); }
.txn-refresh-btn:disabled { opacity: 0.6; cursor: default; }
.txn-refresh-btn.syncing svg { animation: txnRefreshSpin 0.9s linear infinite; }
@keyframes txnRefreshSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.txn-review-empty {
  font-size: 0.82rem;
  color: var(--silver-dim);
  text-align: center;
  padding: 22px 10px;
  border: 1px dashed var(--panel-border);
  border-radius: 10px;
}
.txn-review-see-all-btn {
  display: block;
  width: 100%;
  padding: 11px;
  margin-top: 4px;
  border-radius: 9px;
  border: 1px dashed rgba(110,143,163,0.35);
  background: rgba(110,143,163,0.04);
  color: var(--vintage-blue-light);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.txn-review-see-all-btn:hover { background: rgba(110,143,163,0.1); border-color: rgba(110,143,163,0.55); }
.txn-approve-all-btn {
  padding: 8px 16px; border: 1px solid var(--vintage-blue-light); border-radius: 8px;
  background: linear-gradient(135deg, var(--vintage-blue), #24455e); color: var(--tan);
  font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 3px 10px rgba(46,84,114,0.35);
}
.txn-approve-all-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(46,84,114,0.45); }
.txn-approve-all-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.txn-review-list { display: flex; flex-direction: column; gap: 10px; }
.txn-review-row {
  position: relative;
  padding: 14px 16px 14px 20px;
  border: 1px solid rgba(232,225,211,0.1);
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.txn-review-row::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--emerald-bright, #63D9AA);
  opacity: 0.75;
}
.txn-review-row:has(.txn-action-select option[value="add"]:checked)::before,
.txn-review-row[data-suggested="add"]::before { background: var(--emerald-bright, #63D9AA); }
.txn-review-row[data-suggested="subtract"]::before { background: var(--coral, #E0806A); }
.txn-review-row:hover { background: rgba(255,255,255,0.045); border-color: rgba(232,225,211,0.18); }

.txn-review-info { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; gap: 10px; }
.txn-review-merchant { font-weight: 600; color: var(--tan); font-size: 0.92rem; }

.skipped-activity-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.skipped-activity-clear-all {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(224,139,125,0.3);
  background: rgba(224,139,125,0.06);
  color: var(--error);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.skipped-activity-clear-all:hover { background: rgba(224,139,125,0.14); border-color: rgba(224,139,125,0.5); transform: translateY(-1px); }
.skipped-activity-list { max-height: 340px; overflow-y: auto; }
.skipped-activity-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--panel-border);
}
.skipped-activity-row:last-child { border-bottom: none; }
.skipped-activity-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skipped-activity-merchant { font-size: 0.86rem; color: var(--tan); font-weight: 600; }
.skipped-activity-meta { font-size: 0.74rem; color: var(--silver-dim); font-family: 'IBM Plex Mono', monospace; }
.skipped-activity-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.skipped-activity-restore {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: 7px;
  border: 1px solid rgba(110,143,163,0.3);
  background: rgba(110,143,163,0.08);
  color: var(--vintage-blue-light);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.skipped-activity-restore:hover { background: rgba(110,143,163,0.16); border-color: rgba(110,143,163,0.5); transform: translateY(-1px); }
.skipped-activity-delete {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  color: var(--silver-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.skipped-activity-delete:hover { background: rgba(224,139,125,0.12); border-color: rgba(224,139,125,0.35); color: var(--error); }

.missing-logs-list { max-height: 380px; overflow-y: auto; }
.missing-logs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--panel-border);
}
.missing-logs-row:last-child { border-bottom: none; }
.missing-logs-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.missing-logs-merchant { font-size: 0.86rem; color: var(--tan); font-weight: 600; }
.missing-logs-meta { font-size: 0.72rem; color: var(--silver-dim); font-family: 'IBM Plex Mono', monospace; }
.missing-logs-create-btn {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: 7px;
  border: 1px solid rgba(63,174,133,0.3);
  background: rgba(63,174,133,0.08);
  color: var(--emerald-bright, #63D9AA);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.missing-logs-create-btn:hover { background: rgba(63,174,133,0.16); border-color: rgba(63,174,133,0.5); transform: translateY(-1px); }
.txn-transfer-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vintage-blue-light);
  background: rgba(110,143,163,0.14);
  border: 1px solid rgba(110,143,163,0.3);
  vertical-align: middle;
}
.txn-cardpayment-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--debtpayment-accent);
  background: rgba(143,122,168,0.14);
  border: 1px solid rgba(143,122,168,0.3);
  vertical-align: middle;
}
.txn-review-meta { font-size: 0.76rem; color: var(--silver-dim); font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.txn-note-wrap { margin-bottom: 11px; }
.txn-note-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(110,143,163,0.3);
  background: rgba(110,143,163,0.08);
  color: var(--vintage-blue-light);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.txn-note-pill::before { content: '✎'; font-size: 0.7rem; opacity: 0.6; }
.txn-note-pill:hover { background: rgba(110,143,163,0.16); border-color: rgba(110,143,163,0.5); transform: translateY(-1px); }
.txn-review-note-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.02);
  color: var(--tan);
  font-size: 0.8rem;
  font-family: 'Public Sans', sans-serif;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.txn-review-note-input::placeholder { color: var(--silver-dim); }
.txn-review-note-input:focus { outline: none; border-color: var(--vintage-blue-light); background: rgba(110,143,163,0.06); }
.txn-review-suggestion-text { font-size: 0.86rem; color: var(--silver); margin-bottom: 11px; line-height: 1.45; }
.txn-review-suggestion-text strong { color: var(--tan); font-weight: 600; }
.txn-review-change-form {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 11px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(110,143,163,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(110,143,163,0.18);
  animation: txnFormReveal 0.22s cubic-bezier(.22,.9,.3,1.1);
}
@keyframes txnFormReveal {
  from { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}
.txn-review-change-form select {
  flex: 1;
  padding: 9px 32px 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background-color: #12181F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8489' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  color: var(--tan);
  font-size: 0.8rem;
  font-family: 'Public Sans', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.txn-review-change-form select:hover { border-color: rgba(110,143,163,0.4); }
.txn-review-change-form select:focus { outline: none; border-color: var(--vintage-blue-light); background-color: #161D26; }
.txn-change-simple { display: flex; flex-direction: column; gap: 8px; }
.txn-simple-split-wrap { display: flex; flex-direction: column; gap: 6px; }
.txn-change-transfer { display: none; flex-direction: column; gap: 10px; }
.txn-transfer-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.txn-transfer-field label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--silver-dim);
}
.txn-transfer-to-wrap { display: flex; flex-direction: column; gap: 6px; }
.txn-transfer-to-wrap > label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--silver-dim);
}
.txn-split-hint { text-transform: none; letter-spacing: normal; font-weight: 500; opacity: 0.75; font-size: 0.66rem; }
.txn-transfer-split-rows { display: flex; flex-direction: column; gap: 6px; }
.txn-transfer-split-row { display: flex; align-items: center; gap: 6px; }
.txn-transfer-split-row select { flex: 1.3; }
.txn-transfer-split-amount {
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background-color: #12181F;
  color: var(--tan);
  font-size: 0.8rem;
  font-family: 'IBM Plex Mono', monospace;
  transition: border-color 0.15s ease;
}
.txn-transfer-split-amount:focus { outline: none; border-color: var(--vintage-blue-light); }
.txn-transfer-remove-split {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: none;
  border-radius: 6px;
  background: rgba(224,128,106,0.1);
  color: #E0806A;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.txn-transfer-remove-split:hover { background: rgba(224,128,106,0.2); }
.txn-transfer-add-split {
  align-self: flex-start;
  padding: 5px 0;
  border: none;
  background: none;
  color: var(--vintage-blue-light);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(110,143,163,0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.txn-transfer-add-split:hover { color: var(--tan); }
.txn-transfer-split-total { font-size: 0.72rem; font-weight: 600; margin: 0; }
.txn-transfer-toggle {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 0;
  border: none;
  background: none;
  color: var(--vintage-blue-light);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(110,143,163,0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.txn-transfer-toggle:hover { color: var(--tan); }

.txn-review-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.txn-approve-btn, .txn-change-btn, .txn-skip-btn {
  padding: 7px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.txn-approve-btn { background: linear-gradient(135deg, var(--emerald-bright, #63D9AA), #3fae85); color: #0B1410; border: none; }
.txn-approve-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 4px 14px rgba(63,174,133,0.3); }
.txn-approve-btn:active { transform: translateY(0); }

.txn-change-btn {
  background: linear-gradient(150deg, rgba(110,143,163,0.14), rgba(110,143,163,0.04));
  border: 1px solid rgba(110,143,163,0.3);
  color: var(--vintage-blue-light);
}
.txn-change-btn:hover {
  background: linear-gradient(150deg, rgba(110,143,163,0.22), rgba(110,143,163,0.07));
  border-color: rgba(110,143,163,0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(46,84,114,0.22);
}
.txn-change-btn:active { transform: translateY(0); }

.txn-skip-btn {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--panel-border);
  color: var(--silver-dim);
}
.txn-skip-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--silver-dim);
  color: var(--tan);
  transform: translateY(-1px);
}
.txn-skip-btn:active { transform: translateY(0); }

.txn-charge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}
.txn-charge-select {
  flex: 1;
  min-width: 200px;
  padding: 7px 28px 7px 10px;
  border-radius: 7px;
  border: 1px solid rgba(143,122,168,0.35);
  background-color: #171422;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A390BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  color: var(--debtpayment-accent-hover, #A390BD);
  font-size: 0.76rem;
  font-family: 'Public Sans', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.txn-charge-select:focus { outline: none; border-color: rgba(143,122,168,0.6); }
.txn-charge-btn {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid rgba(143,122,168,0.35);
  background: rgba(143,122,168,0.1);
  color: var(--debtpayment-accent-hover, #A390BD);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.txn-charge-btn:hover { background: rgba(143,122,168,0.2); border-color: rgba(143,122,168,0.55); }

.card-total {
  background: linear-gradient(135deg, var(--vintage-blue), #223d54);
  border-color: var(--vintage-blue);
}
.card-total::before { background: linear-gradient(90deg, transparent, var(--tan), transparent); }
.card-total .card-value {
  background: linear-gradient(90deg, var(--tan), var(--silver));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card-label { font-size: 0.78rem; color: var(--silver-dim); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.card-value { font-size: 1.6rem; font-weight: 600; font-family: 'Fraunces', serif; }
.card-value-manual {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.card-value-manual:hover { border-bottom-color: currentColor; opacity: 0.85; }
.card-value-input-manual {
  display: block;
  width: 100%;
  padding: 4px 6px;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: 'Fraunces', serif;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--vintage-blue-light);
  border-radius: 6px;
  color: var(--tan);
}
.card-value-input-manual:focus { outline: none; box-shadow: 0 0 0 3px rgba(110,143,163,0.25); }

.card-value-input {
  display: none;
  width: 100%;
  padding: 6px 8px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Fraunces', serif;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--vintage-blue-light);
  border-radius: 6px;
  color: var(--tan);
}
.card-value-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110,143,163,0.25);
}

.dash-main.override-mode .card[data-cat] .card-value { display: none; }
.dash-main.override-mode .card[data-cat] .card-value-input { display: block; }
.dash-main.override-mode .card[data-cat] { box-shadow: 0 0 0 1.5px var(--vintage-blue-light), 0 4px 16px rgba(0,0,0,0.25); }

.override-hint {
  font-size: 0.8rem;
  color: var(--vintage-blue-light);
  margin: -24px 0 24px;
}

/* ---------- SETTINGS TOGGLE ROW ---------- */
.dropdown-divider {
  height: 1px;
  background: #222C3A;
  margin: 4px 6px;
}

.dropdown-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tan);
}
.dropdown-toggle-row:hover { background: rgba(255,255,255,0.04); }

.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--panel-bg);
  border: 1.5px solid var(--silver-dim);
  border-radius: 22px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch-slider::before {
  content: "";
  position: absolute;
  height: 14px; width: 14px;
  left: 2px; top: 2px;
  background: var(--silver);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}
.switch input:checked + .switch-slider { background: var(--vintage-blue); border-color: var(--vintage-blue); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); background: var(--tan); }

.panel {
  background: linear-gradient(150deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 26px 24px;
  margin-bottom: 22px;
  position: relative;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.panel-head h2 { font-size: 1.15rem; letter-spacing: 0.01em; }
.panel-date {
  font-size: 0.75rem;
  color: var(--silver-dim);
  background: var(--dark-vintage);
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.income-row {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.income-row label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--tan);
  flex: 1; min-width: 160px;
}
.remaining-display {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--dark-vintage); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 10px 16px;
}
.remaining-display span:last-child { font-size: 1.1rem; font-weight: 600; font-family: 'Fraunces', serif; }

input[type="number"], input[type="text"], textarea {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--dark-vintage);
  color: var(--tan);
  font-size: 0.9rem;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="number"]:focus, input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--vintage-blue-light);
  box-shadow: 0 0 0 3px rgba(110,143,163,0.18);
}

/* remove native up/down spinner arrows on number inputs */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.category-box {
  background: var(--dark-vintage);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--add-accent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.category-box:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
.category-box h3 { font-size: 0.95rem; }
.category-box label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--silver-dim);
}
.category-box input { padding: 8px 10px; font-size: 0.85rem; }

.notes-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.8rem; font-weight: 600; margin-bottom: 16px;
}

.amount-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.8rem; font-weight: 600; margin-bottom: 16px;
  max-width: 260px;
}

.checkbox-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

/* ---------- STYLED TOGGLE CHIPS (panel category selectors) ---------- */
.chip {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--dark-vintage);
  border: 1.5px solid #2C3745;
  border-radius: 24px;
  padding: 9px 16px 9px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.chip.chip-active { transform: scale(1.03); box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.chip .chip-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--silver-dim);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.chip .chip-dot::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease;
}

.panel-subtract .chip.chip-active {
  background: var(--subtract-bg);
  border-color: var(--subtract-accent);
  color: var(--tan);
}
.panel-subtract .chip.chip-active .chip-dot { border-color: var(--subtract-accent); }
.panel-subtract .chip.chip-active .chip-dot::after { background: var(--subtract-accent); }

.panel-transfer .chip.chip-active {
  background: var(--transfer-bg);
  border-color: var(--transfer-accent);
  color: var(--tan);
}
.panel-transfer .chip.chip-active .chip-dot { border-color: var(--transfer-accent); }
.panel-transfer .chip.chip-active .chip-dot::after { background: var(--transfer-accent); }

.chip:hover { border-color: var(--silver-dim); }

.transfer-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 16px;
}
.group-label { font-size: 0.8rem; font-weight: 600; color: var(--silver-dim); margin-bottom: 8px; }

.panel-actions { display: flex; gap: 10px; }

.btn-primary {
  padding: 12px 22px; border: none; border-radius: 8px;
  background: var(--vintage-blue); color: var(--tan);
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { background: var(--vintage-blue-light); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.panel-add .btn-primary { background: var(--add-accent); }
.panel-add .btn-primary:hover { background: var(--add-accent-hover); }
.panel-subtract .btn-primary { background: var(--subtract-accent); }
.panel-subtract .btn-primary:hover { background: var(--subtract-accent-hover); }
.panel-transfer .btn-primary { background: var(--transfer-accent); }
.panel-transfer .btn-primary:hover { background: var(--transfer-accent-hover); }

.btn-danger {
  padding: 10px 18px; border: 1px solid var(--error); border-radius: 8px;
  background: transparent; color: var(--error);
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-danger:hover { background: rgba(224,139,125,0.15); transform: translateY(-1px); }
.btn-danger:active { transform: translateY(0); }

.panel-message { font-size: 0.85rem; margin-top: 12px; min-height: 1.2em; }
.panel-message-error { color: var(--error); }
.panel-message-success { color: var(--tan); }

/* ---------- LOG PAGE ---------- */
.log-title { margin-bottom: 22px; font-size: 1.7rem; letter-spacing: 0.01em; }

.log-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.log-filter-search {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.log-filter-search svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--silver-dim);
  pointer-events: none;
}
.log-filter-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.02);
  color: var(--tan);
  font-size: 0.83rem;
  font-family: 'Public Sans', sans-serif;
}
.log-filter-search input:focus { outline: none; border-color: var(--vintage-blue-light); }

.log-month-picker {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 9px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.02);
  position: relative;
}
.log-month-arrow {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--silver-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.log-month-arrow svg { width: 14px; height: 14px; stroke: currentColor; }
.log-month-arrow:hover { background: rgba(110,143,163,0.14); color: var(--tan); }
.log-month-label {
  min-width: 118px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tan);
  cursor: pointer;
  padding: 0 4px;
  user-select: none;
  transition: color 0.15s ease;
}
.log-month-label:hover { color: var(--vintage-blue-light); }

.log-month-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scaleY(0.9) translateY(-6px);
  width: 260px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(160deg, #1B222A, #171D24);
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.22,.9,.3,1.2), visibility 0.22s;
}
.log-month-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scaleY(1) translateY(0);
}
.log-month-dropdown-years {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--panel-border);
}
.log-month-year-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  color: var(--silver-dim);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.log-month-year-btn:hover { color: var(--tan); }
.log-month-year-btn.active {
  background: rgba(110,143,163,0.18);
  color: var(--vintage-blue-light);
  border-color: rgba(110,143,163,0.4);
}
.log-month-dropdown-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.log-month-month-btn {
  padding: 8px 0;
  border-radius: 7px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  color: var(--tan);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.log-month-month-btn:hover { background: rgba(110,143,163,0.14); }
.log-month-month-btn.active {
  background: rgba(110,143,163,0.22);
  border-color: rgba(110,143,163,0.5);
  color: var(--vintage-blue-light);
}
.log-month-dropdown-alltime {
  width: 100%;
  padding: 8px;
  border-radius: 7px;
  border: 1px dashed var(--panel-border);
  background: none;
  color: var(--silver-dim);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.log-month-dropdown-alltime:hover { color: var(--tan); border-color: var(--silver-dim); }

.log-type-pills {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 9px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.02);
}
.log-type-pill {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--silver-dim);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.log-type-pill:hover { color: var(--tan); }
.log-type-pill.active {
  background: rgba(110,143,163,0.18);
  color: var(--vintage-blue-light);
  box-shadow: inset 0 0 0 1px rgba(110,143,163,0.35);
}
.log-type-pill[data-type="add"].active {
  background: rgba(92,138,107,0.18);
  color: var(--add-accent-hover);
  box-shadow: inset 0 0 0 1px rgba(92,138,107,0.4);
}
.log-type-pill[data-type="subtract"].active {
  background: rgba(166,80,72,0.18);
  color: var(--subtract-accent-hover);
  box-shadow: inset 0 0 0 1px rgba(166,80,72,0.4);
}
.log-type-pill[data-type="transfer"].active {
  background: rgba(188,154,74,0.18);
  color: var(--transfer-accent-hover);
  box-shadow: inset 0 0 0 1px rgba(188,154,74,0.4);
}
.log-type-pill[data-type="debt_payment"].active {
  background: rgba(143,122,168,0.18);
  color: var(--debtpayment-accent-hover);
  box-shadow: inset 0 0 0 1px rgba(143,122,168,0.4);
}

.log-filter-count {
  font-size: 0.78rem;
  color: var(--silver-dim);
  white-space: nowrap;
}

.log-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

/* aesthetic custom checkboxes for the log */
.log-check-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem; font-weight: 600; color: var(--tan);
  cursor: pointer; user-select: none;
}
.log-check {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.log-check input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%;
}
.log-check .check-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--silver-dim);
  background: var(--dark-vintage);
  transition: all 0.15s ease;
  position: relative;
}
.log-check input:checked + .check-box {
  background: var(--vintage-blue);
  border-color: var(--vintage-blue);
}
.log-check input:checked + .check-box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--tan);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.log-check:hover .check-box { border-color: var(--silver); }

.log-table-wrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
  max-height: 70vh;
}
.log-table { width: 100%; border-collapse: collapse; background: var(--panel-bg); }
.log-table th, .log-table td {
  padding: 13px 16px; text-align: left; font-size: 0.85rem;
  border-bottom: 1px solid var(--dark-vintage);
  border-right: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
.log-table th:last-child, .log-table td:last-child { border-right: none; }
.log-table th {
  background: var(--dark-vintage);
  color: var(--silver-dim);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
  z-index: 2;
  border-right-color: rgba(255,255,255,0.1);
}
.log-table td:first-child, .log-table th:first-child { width: 40px; }

.log-table tbody tr { transition: box-shadow 0.15s ease; }
.log-table tbody tr:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,0.035); }

.log-table td.num-cell {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  font-size: 0.85rem;
}
.log-table td.log-amount-cell {
  font-weight: 700;
  font-size: 0.92rem;
  color: #F4EEDE;
  text-shadow: 0 0 8px rgba(244,238,222,0.45), 0 0 18px rgba(244,238,222,0.18);
}
.log-table td.notes-cell {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--silver);
  white-space: normal;
}
.log-custom-category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-family: 'Public Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--vintage-blue-light);
  background: rgba(110,143,163,0.14);
  border: 1px solid rgba(110,143,163,0.3);
  vertical-align: middle;
}

.log-row-add { background: var(--add-bg); }
.log-row-subtract { background: var(--subtract-bg); }
.log-row-transfer { background: var(--transfer-bg); }
.log-row-debtpayment { background: var(--debtpayment-bg); }

/* Each entry type gets its own left-edge stripe, and a divider line marks
   every point where the type changes between consecutive rows — so a run
   of deposits (or withdrawals, or transfers) reads as a visible group
   instead of blending into whatever's above/below it. Scoped to .log-table
   so it applies identically wherever that table markup is used — the real
   log page and the Budget Planner's "+ From log" mirror both get it for
   free, no separate copy to keep in sync. */
.log-table tbody tr.log-row-add td:first-child { border-left: 3px solid var(--add-accent); }
.log-table tbody tr.log-row-subtract td:first-child { border-left: 3px solid var(--subtract-accent); }
.log-table tbody tr.log-row-transfer td:first-child { border-left: 3px solid var(--transfer-accent); }
.log-table tbody tr.log-row-debtpayment td:first-child { border-left: 3px solid var(--debtpayment-accent); }
.log-table tbody tr.log-group-start td { border-top: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 700px) {
  .overview-cards { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .transfer-groups { grid-template-columns: 1fr; }
}

/* ============= NEON PANEL GLOWS ============= */

.panel-add {
  border-left: 4px solid var(--add-glow);
  box-shadow:
    0 0 6px rgba(110, 196, 150, 0.36),
    0 0 15px rgba(110, 196, 150, 0.22),
    0 0 32px rgba(110, 196, 150, 0.1),
    0 6px 22px rgba(0,0,0,0.25);
  transition: box-shadow 0.3s ease;
}
.panel-add:hover,
.panel-add:focus-within {
  box-shadow:
    0 0 9px rgba(110, 196, 150, 0.5),
    0 0 22px rgba(110, 196, 150, 0.32),
    0 0 46px rgba(110, 196, 150, 0.16),
    0 6px 22px rgba(0,0,0,0.25);
}

.panel-subtract {
  border-left: 4px solid var(--subtract-glow);
  box-shadow:
    0 0 6px rgba(224, 128, 106, 0.36),
    0 0 15px rgba(224, 128, 106, 0.22),
    0 0 32px rgba(224, 128, 106, 0.1),
    0 6px 22px rgba(0,0,0,0.25);
  transition: box-shadow 0.3s ease;
}
.panel-subtract:hover,
.panel-subtract:focus-within {
  box-shadow:
    0 0 9px rgba(224, 128, 106, 0.5),
    0 0 22px rgba(224, 128, 106, 0.32),
    0 0 46px rgba(224, 128, 106, 0.16),
    0 6px 22px rgba(0,0,0,0.25);
}

.panel-transfer {
  border-left: 4px solid var(--transfer-glow);
  box-shadow:
    0 0 6px rgba(224, 185, 110, 0.36),
    0 0 15px rgba(224, 185, 110, 0.22),
    0 0 32px rgba(224, 185, 110, 0.1),
    0 6px 22px rgba(0,0,0,0.25);
  transition: box-shadow 0.3s ease;
}
.panel-transfer:hover,
.panel-transfer:focus-within {
  box-shadow:
    0 0 9px rgba(224, 185, 110, 0.5),
    0 0 22px rgba(224, 185, 110, 0.32),
    0 0 46px rgba(224, 185, 110, 0.16),
    0 6px 22px rgba(0,0,0,0.25);
}

.panel-add .panel-head h2 { color: var(--add-glow); }
.panel-subtract .panel-head h2 { color: var(--subtract-glow); }
.panel-transfer .panel-head h2 { color: var(--transfer-glow); }

/* ============= NEON GLOW — LOG TABLE (subtle) ============= */
/* Vintage blue — ties visually to Dashboard, since Log is really an
   extension of it rather than a page with its own separate identity. */

.log-table-wrap {
  box-shadow:
    0 0 4px rgba(110, 143, 163, 0.35),
    0 0 12px rgba(110, 143, 163, 0.18),
    0 0 24px rgba(110, 143, 163, 0.09),
    0 6px 22px rgba(0,0,0,0.25);
  border: 1px solid rgba(110, 143, 163, 0.28);
  transition: box-shadow 0.3s ease;
}
.log-table-wrap:hover {
  box-shadow:
    0 0 6px rgba(110, 143, 163, 0.45),
    0 0 16px rgba(110, 143, 163, 0.25),
    0 0 32px rgba(110, 143, 163, 0.12),
    0 6px 22px rgba(0,0,0,0.25);
}

/* ============= MOBILE-ONLY ADJUSTMENTS ============= */
/* Everything below only applies on small screens — desktop is untouched */

@media (max-width: 600px) {
  .dash-header { padding: 14px 16px; }

  .nav { gap: 8px; flex-wrap: wrap; }
  .wordmark { font-size: 1rem; }
  /* width: 100% is the fix here, not just cosmetic — .nav-auth wraps
     onto its own line below the wordmark on narrow phones, but as a
     single flex item with no explicit width it only ever takes up as
     much space as its own content needs, sitting at the LEFT of that
     line (justify-content: flex-end has nothing to push against with
     just one item on the line). That leaves the Premium Tools button
     sitting near the middle of the screen instead of the top-right,
     which in turn means .ledger-dropdown (anchored right:0 to that
     button) opens mostly off-screen to the left — this is what was
     making the whole menu look sliced off on the left edge. Forcing
     nav-auth to span the full wrapped row lets flex-end actually push
     its buttons to the real right edge, same as desktop. */
  .nav-auth { width: 100%; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .user-email { display: none; } /* saves space on small screens */

  .btn-logout, .btn-ghost {
    padding: 7px 11px;
    font-size: 0.78rem;
  }

  .dash-main { padding: 20px 12px 80px; }

  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }
  .card { padding: 14px 12px; }
  .card-value { font-size: 1.1rem; }

  .panel { padding: 18px 14px; margin-bottom: 16px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .panel-head h2 { font-size: 1rem; }

  .income-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .income-row label { min-width: 0; }

  .category-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .transfer-groups {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .checkbox-row { gap: 8px; }
  .chip { padding: 8px 12px 8px 10px; font-size: 0.8rem; }

  .panel-actions { flex-direction: column; }
  .panel-actions .btn-primary,
  .panel-actions .btn-ghost { width: 100%; }

  /* Log page */
  .log-title { font-size: 1.35rem; margin-bottom: 16px; }
  .log-filter-bar { flex-direction: column; align-items: stretch; }
  .log-month-picker { width: 100%; justify-content: center; }
  .log-type-pills { width: 100%; justify-content: center; }
  .log-type-pill { flex: 1; text-align: center; }
  .log-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .log-toolbar .btn-danger { width: 100%; }

  .log-table th, .log-table td {
    padding: 9px 10px;
    font-size: 0.78rem;
  }
  .log-table td.notes-cell { font-size: 0.8rem; }

  /* Transaction review queue and budget preset prompt */
  .txn-review-head { flex-direction: column; align-items: stretch; }
  .txn-review-head-actions { flex-direction: column; align-items: stretch; }
  .txn-approve-all-btn { width: 100%; }
  .txn-review-info { flex-direction: column; align-items: flex-start; gap: 2px; }
  .txn-review-change-form { flex-direction: column; }
  .txn-review-actions { flex-wrap: wrap; }
  .mfa-field > div[style*="flex"] { flex-direction: column; }

  /* Premium Tools + Settings dropdowns — cap width against actual
     viewport space rather than assuming 302px/220px always fits.
     Shrinks gracefully on narrow phones, stays full-size everywhere
     the room already exists. Also caps height and scrolls internally
     — previously these had no height limit at all, so on a short
     viewport (a landscape phone, a phone with the keyboard up, or
     just a long Settings list) the bottom of the menu extended past
     the edge of the screen with no way to reach it, since the menu is
     positioned off the sticky header rather than the scrollable page. */
  .ledger-dropdown {
    width: min(302px, calc(100vw - 32px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .settings-dropdown {
    min-width: 0;
    width: min(220px, calc(100vw - 32px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }

  /* Detected Activity section was keeping its full desktop padding on
     mobile — unlike .panel, which already tightens here — so it was
     stacking with .dash-main's own mobile padding and squeezing the
     split-row controls (category select + amount + remove button)
     tighter than they needed to be. */
  .txn-review-section {
    padding: 16px 14px;
  }
  .txn-review-row {
    padding: 12px 12px 12px 16px;
  }

  /* Envelope picker — chips + custom add wrap onto their own line
     under the account name rather than fighting for horizontal room
     on a narrow screen. */
  .envelope-picker-quick-row { flex-direction: column; align-items: stretch; }
  .envelope-picker-custom-add { margin-left: 0; }
  .envelope-picker-add-input { flex: 1; width: auto; }

  /* Color-change swatch and the rename/delete kebab menu on custom
     category cards are revealed via :hover in the desktop rules above
     — :hover never fires on a touchscreen, so without this override
     these are permanently invisible and untappable on mobile, not
     just small. Forced visible here instead. */
  .card-color-btn,
  .card-menu-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* .sync-hint is the same story ("+$X from Connections" / "Adjust
     set-aside") — hidden until :hover on desktop, so forced visible
     here too. But on desktop it's also absolutely positioned to
     overlay the bottom of the card, which only ever worked because it
     appeared transiently on hover; permanently visible on mobile, it
     was sitting directly on top of the dollar amount instead of
     making room for itself. Switching it to normal document flow
     (the card is already a flex column) makes it push the layout
     instead of overlapping it, regardless of how many lines of text
     it ends up needing. */
  .sync-hint {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static;
    margin-top: 2px;
  }
}

/* ==========================================================================
   PREMIUM FEATURE MENU — brass "ledger" trigger + tool list.
   This is the single entry point for every premium tool (Dashboard, Budget
   Planner, and anything added later). It is deliberately unlike the Settings
   dropdown: brass instead of silver chrome, a wax-seal flap instead of a
   speech-bubble notch, a seal-stamp trigger animation instead of a slow gear
   spin, and a staggered card reveal instead of a flat fade — so opening it
   feels like unlocking a distinct, premium space rather than a menu.
   ========================================================================== */

.btn-icon.btn-ledger svg { stroke: #C9A227; }
.btn-icon.btn-ledger:hover svg { stroke: #E7C766; }

/* Paid/unlocked state — a distinct color from the locked gold, so the
   icon itself signals "you have full access" rather than just hiding
   the lock badge and leaving the same color behind either way. Copper,
   specifically — violet and teal are now reserved for future
   investment-portfolio and savings icons respectively, gold now belongs
   to Budget Planner's own icon within this same menu, and copper isn't
   already claimed by any page's theme (emerald/Connections, coral/
   Spendings, vintage blue/Dashboard). The glow is deliberately soft — a
   quiet ambient presence, not a spotlight. The dropdown panel itself
   picks up this same copper tone when open, so the button and what it
   opens read as one thing. */
.btn-icon.btn-ledger.unlocked {
  border-color: rgba(201,123,74,0.35);
  background: rgba(201,123,74,0.06);
  box-shadow: 0 0 14px rgba(201,123,74,0.18);
}
.btn-icon.btn-ledger.unlocked svg { stroke: #C97B4A; }
.btn-icon.btn-ledger.unlocked:hover {
  border-color: rgba(232,168,118,0.55);
  background: rgba(201,123,74,0.1);
  box-shadow: 0 0 20px rgba(201,123,74,0.28);
}
.btn-icon.btn-ledger.unlocked:hover svg { stroke: #E8A876; }

.btn-icon.btn-ledger .lock-badge {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--dark-vintage);
  border: 1.5px solid #C9A227;
  display: flex; align-items: center; justify-content: center;
}
.btn-icon.btn-ledger .lock-badge svg {
  width: 7px; height: 7px; stroke: #C9A227; stroke-width: 3; fill: none;
}

.btn-icon.btn-ledger.stamp { animation: ledgerStamp 0.42s ease; }
@keyframes ledgerStamp {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(0.8) rotate(-8deg); }
  55%  { transform: scale(1.18) rotate(4deg); }
  80%  { transform: scale(0.96) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.ledger-dropdown {
  position: absolute;
  top: 46px;
  right: 0;
  width: 302px;
  background: linear-gradient(180deg, #1F150E, #170F0A);
  border: 1px solid #5C3A1F;
  border-radius: 4px 4px 14px 14px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform-origin: top right;
  transform: scaleY(0.1) translateY(-8px);
  transition: transform 0.4s cubic-bezier(.22,.9,.24,1.2), opacity 0.22s ease, visibility 0.4s;
  box-shadow: 0 16px 38px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,123,74,0.04);
  overflow: hidden;
}
.ledger-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 22px;
  width: 22px; height: 15px;
  background: #C97B4A;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 68%, 0 100%);
}
.ledger-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1) translateY(0);
}
.ledger-dropdown-inner { padding: 20px 14px 14px; }
.ledger-heading {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  color: #E8A876;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  padding: 0 6px;
}
.ledger-sub {
  font-size: 0.71rem;
  color: var(--silver-dim);
  margin-bottom: 14px;
  line-height: 1.5;
  padding: 0 6px;
}

/* ---- data-driven premium tool list (Dashboard, Budget Planner, future tools) ---- */
.ledger-tool-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.ledger-tool-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(201,123,74,0.05);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-8px);
  animation: ledgerItemIn 0.32s cubic-bezier(.2,.8,.3,1) forwards;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ledger-tool-item:hover {
  background: rgba(201,123,74,0.14);
  border-color: rgba(201,123,74,0.38);
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.ledger-tool-item:active { transform: translateX(2px) scale(0.99); }
.ledger-tool-item.current {
  background: rgba(201,123,74,0.16);
  border-color: #5C3A1F;
  cursor: default;
}
.ledger-tool-item.current:hover { transform: none; box-shadow: none; }

/* locked (unpaid) preview rows animate in dimmed rather than full-strength,
   so the list still reads as a temptation rather than a fully usable menu */
.ledger-tool-item.locked-preview { animation-name: ledgerItemInLocked; }
.ledger-tool-item.locked-preview:hover { opacity: 0.9; }

@keyframes ledgerItemIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ledgerItemInLocked {
  to { opacity: 0.58; transform: translateX(0); }
}

.ledger-tool-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, rgba(201,123,74,0.2), rgba(201,123,74,0.05));
  border: 1px solid rgba(201,123,74,0.28);
  transition: transform 0.3s cubic-bezier(.22,.9,.3,1.4), background 0.2s ease;
}
.ledger-tool-item:hover .ledger-tool-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(155deg, rgba(201,123,74,0.32), rgba(201,123,74,0.08));
}
.ledger-tool-icon svg { width: 17px; height: 17px; stroke: #E8A876; }

/* Budget Planner gets its own actual brass/gold, matching its page
   theme — it never had this before; it was just silently inheriting
   whatever the generic fallback color happened to be. */
.ledger-tool-icon.icon-ledger {
  background: linear-gradient(155deg, rgba(201,162,39,0.24), rgba(201,162,39,0.05));
  border-color: rgba(201,162,39,0.32);
}
.ledger-tool-icon.icon-ledger svg { stroke: #E7C766; }
.ledger-tool-item:hover .ledger-tool-icon.icon-ledger {
  background: linear-gradient(155deg, rgba(201,162,39,0.36), rgba(201,162,39,0.08));
}

/* Dashboard gets its own unique identity within the list: cool slate-blue
   instead of brass, and a soft pulse on hover instead of the shared rotate,
   so it reads as its own kind of tool rather than a re-skinned list item. */
.ledger-tool-icon.icon-dashboard {
  background: linear-gradient(155deg, rgba(110,143,163,0.24), rgba(110,143,163,0.05));
  border-color: rgba(110,143,163,0.32);
}
.ledger-tool-icon.icon-dashboard svg { stroke: #9FC1D6; }
.ledger-tool-item:hover .ledger-tool-icon.icon-dashboard {
  background: linear-gradient(155deg, rgba(110,143,163,0.36), rgba(110,143,163,0.08));
  transform: scale(1.08) rotate(0deg);
}
.ledger-tool-item:hover .icon-dashboard svg { animation: dashPulse 1.15s ease infinite; }
@keyframes dashPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Connections gets emerald, matching its own "vault" room identity, with a
   gentle orbiting node motion on hover instead of the shared rotate. */
.ledger-tool-icon.icon-connections {
  background: linear-gradient(155deg, rgba(63,174,133,0.24), rgba(63,174,133,0.05));
  border-color: rgba(63,174,133,0.32);
}
.ledger-tool-icon.icon-connections svg { stroke: #7FE0BB; }
.ledger-tool-item:hover .ledger-tool-icon.icon-connections {
  background: linear-gradient(155deg, rgba(63,174,133,0.36), rgba(63,174,133,0.08));
  transform: scale(1.08) rotate(0deg);
}
.ledger-tool-item:hover .icon-connections svg { animation: connPulse 1.3s ease infinite; }
@keyframes connPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Spendings gets coral, matching its own "outflow" identity color used
   elsewhere (Subtract panel, spend totals). */
.ledger-tool-icon.icon-spending {
  background: linear-gradient(155deg, rgba(224,128,106,0.24), rgba(224,128,106,0.05));
  border-color: rgba(224,128,106,0.32);
}
.ledger-tool-icon.icon-spending svg { stroke: #E0806A; }
.ledger-tool-item:hover .ledger-tool-icon.icon-spending {
  background: linear-gradient(155deg, rgba(224,128,106,0.36), rgba(224,128,106,0.08));
  transform: scale(1.08);
}

/* Investments gets violet — reserved for this exact purpose from the
   very first custom-category color palette. */
.ledger-tool-icon.icon-investments {
  background: linear-gradient(155deg, rgba(168,143,216,0.24), rgba(168,143,216,0.05));
  border-color: rgba(168,143,216,0.32);
}
.ledger-tool-icon.icon-investments svg { stroke: #A88FD8; }
.ledger-tool-item:hover .ledger-tool-icon.icon-investments {
  background: linear-gradient(155deg, rgba(168,143,216,0.36), rgba(168,143,216,0.08));
  transform: scale(1.08);
}

/* Visual Savings gets bright teal — reserved for this exact purpose
   from the very first custom-category color palette, same as violet
   was reserved for Investments. */
.ledger-tool-icon.icon-savings {
  background: linear-gradient(155deg, rgba(110,196,184,0.24), rgba(110,196,184,0.05));
  border-color: rgba(110,196,184,0.32);
}
.ledger-tool-icon.icon-savings svg { stroke: #6EC4B8; }
.ledger-tool-item:hover .ledger-tool-icon.icon-savings {
  background: linear-gradient(155deg, rgba(110,196,184,0.36), rgba(110,196,184,0.08));
  transform: scale(1.08);
}

.ledger-tool-text { flex: 1; min-width: 0; }
.ledger-tool-title {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--tan);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ledger-tool-title .current-pill {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #E8A876;
  border: 1px solid #5C3A1F;
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 700;
}
.ledger-tool-desc {
  font-size: 0.68rem;
  color: var(--silver-dim);
  margin-top: 1px;
  line-height: 1.3;
}
.ledger-tool-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ledger-tool-item:hover .ledger-tool-arrow { opacity: 1; transform: translateX(0); }
.ledger-tool-arrow svg { width: 14px; height: 14px; stroke: #E8A876; }

.ledger-link-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: 10px 10px;
  border-radius: 6px;
  border: none;
  background: rgba(201,123,74,0.07);
  color: var(--tan);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.ledger-link-item:last-child { margin-bottom: 0; }
.ledger-link-item:hover { background: rgba(201,123,74,0.15); padding-left: 14px; }

.ledger-lock-cta {
  margin-top: 2px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 7px;
  background: #C97B4A;
  color: #170F0A;
  font-weight: 700;
  font-size: 0.83rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ledger-lock-cta:hover { background: #E8A876; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(201,123,74,0.25); }
.ledger-lock-cta:active { transform: translateY(0); }

/* Feedback — its own small, quiet section within the Premium Tools
   menu, distinct from the tool list above it and the "more tools
   coming" hint below it. */
.ledger-feedback-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(232,225,211,0.08);
}
.ledger-feedback-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(232,225,211,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--silver-dim);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ledger-feedback-btn svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }
.ledger-feedback-btn:hover {
  background: rgba(110,143,163,0.08);
  border-color: rgba(110,143,163,0.3);
  color: var(--tan);
  transform: translateY(-1px);
}
.ledger-feedback-btn:active { transform: translateY(0); }

.ledger-future-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(201,123,74,0.25);
  font-size: 0.64rem;
  color: var(--silver-dim);
  text-align: center;
  letter-spacing: 0.03em;
}

/* ============= KEYBOARD FOCUS (quality floor — never rely on hover alone) ============= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.chip:focus-within,
.log-check:focus-within .check-box {
  outline: 2px solid var(--vintage-blue-light);
  outline-offset: 2px;
}
.btn-ledger:focus-visible,
.ledger-tool-item:focus-visible,
.ledger-link-item:focus-visible,
.ledger-lock-cta:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
}

/* ============= REDUCED MOTION ============= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   TWO-FACTOR AUTHENTICATION — shared overlay component
   Lives here (not in any one page's own CSS) so Dashboard, Log, Budget, and
   Connections all present an identical MFA flow, in the app's core
   silver/vintage-blue identity — appropriate since 2FA is an account-level
   concern that sits above any single "room."
   ========================================================================== */
.mfa-overlay {
  position: fixed; inset: 0; background: rgba(6,8,11,0.78);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 70px 20px; z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.mfa-overlay.open { opacity: 1; visibility: visible; }
.mfa-modal {
  background: var(--dark-vintage);
  border: 1px solid var(--vintage-blue);
  border-radius: 14px;
  width: 100%; max-width: 440px;
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 26px rgba(46,84,114,0.2);
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.25s cubic-bezier(.2,.9,.25,1.1);
}
.mfa-overlay.open .mfa-modal { transform: translateY(0) scale(1); }
.mfa-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid #222C3A;
}
.mfa-modal-head h2 { font-family: 'Fraunces', serif; color: var(--vintage-blue-light); font-size: 1.1rem; }
.mfa-modal-close { background: none; border: none; color: var(--silver-dim); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.mfa-modal-close:hover { color: var(--tan); }
/* When 2FA is required to proceed (gated entry), the close button is
   hidden entirely rather than just disabled — there's no dismissing your
   way past a required step, so don't offer a button that implies you can. */
.mfa-overlay.mfa-gated .mfa-modal-close { display: none; }

.mfa-modal-body { overflow-y: auto; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.mfa-modal-actions { padding: 0 20px 18px; }
.mfa-cancel-btn {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: transparent;
  color: var(--silver-dim);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.mfa-cancel-btn:hover { color: var(--tan); border-color: var(--silver-dim); }
.mfa-qr-fallback {
  font-size: 0.78rem; color: var(--error); text-align: center; max-width: 260px;
}
.mfa-modal-sub { font-size: 0.85rem; color: var(--silver-dim); line-height: 1.55; }

.mfa-field { display: flex; flex-direction: column; gap: 6px; }
.mfa-field label { font-size: 0.78rem; font-weight: 600; color: var(--tan); }
.mfa-field input {
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--panel-border);
  background: #0F151C; color: var(--tan); font-size: 1.05rem; font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.15em; text-align: center;
}
.mfa-field input:focus { outline: none; border-color: var(--vintage-blue-light); box-shadow: 0 0 0 3px rgba(110,143,163,0.18); }
.mfa-field select {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--panel-border);
  background: #0F151C; color: var(--tan); font-size: 0.88rem; font-family: 'Public Sans', sans-serif;
}
.mfa-field select:focus { outline: none; border-color: var(--vintage-blue-light); box-shadow: 0 0 0 3px rgba(110,143,163,0.18); }

.mfa-verify-btn {
  padding: 12px 20px; border: none; border-radius: 8px;
  background: var(--vintage-blue); color: var(--tan);
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mfa-verify-btn:hover { background: var(--vintage-blue-light); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.mfa-verify-btn:active { transform: translateY(0); }

/* QR code — clean white rounded card behind it (QR codes need light
   contrast to scan reliably anyway), sitting on the dark modal like a
   printed card, no extra clutter around it. */
.mfa-qr-frame {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: transparent;
  margin: 4px auto;
  width: fit-content;
}
.mfa-qr-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--silver-dim);
}
.mfa-qr-inner {
  background: #ffffff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  line-height: 0; /* collapses whitespace so the card hugs the image tightly */
}
.mfa-qr-inner img { display: block; width: 168px; height: 168px; }
.mfa-qr-secret-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; max-width: 280px;
}
.mfa-qr-secret-label {
  font-size: 0.66rem; color: var(--silver-dim);
}
.mfa-qr-secret-code {
  display: block;
  width: 100%;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--tan); background: rgba(255,255,255,0.05);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap; overflow-x: auto; /* stays one line; scrolls sideways if it's ever too long to fit */
  cursor: text;
}

.mfa-factor-list { display: flex; flex-direction: column; gap: 2px; }
.mfa-factor-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px; border-bottom: 1px solid #222C3A; font-size: 0.85rem; color: var(--tan);
}
.mfa-factor-row:last-child { border-bottom: none; }
.mfa-remove-factor-btn {
  background: none; border: 1px solid var(--error); color: var(--error);
  border-radius: 6px; padding: 5px 11px; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.mfa-remove-factor-btn:hover { background: rgba(224,139,125,0.12); }

/* ==========================================================================
   IDLE SESSION TIMEOUT — shared overlay, same pattern as the MFA modal.
   Auto-signs out after a period of inactivity, with a countdown warning
   first so nothing gets cut off mid-action without notice.
   ========================================================================== */
.idle-overlay {
  position: fixed; inset: 0; background: rgba(6,8,11,0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 300;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.idle-overlay.open { opacity: 1; visibility: visible; }
.idle-modal {
  background: var(--dark-vintage);
  border: 1px solid var(--vintage-blue);
  border-radius: 14px;
  width: 100%; max-width: 380px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 26px rgba(46,84,114,0.2);
}
.idle-modal h2 { font-family: 'Fraunces', serif; color: var(--vintage-blue-light); font-size: 1.1rem; margin-bottom: 10px; }
.idle-modal p { font-size: 0.85rem; color: var(--silver-dim); line-height: 1.55; }
.idle-countdown {
  font-family: 'IBM Plex Mono', monospace; font-size: 2rem; color: var(--tan);
  margin: 16px 0 22px;
}
.idle-stay-btn {
  width: 100%; padding: 12px; border: none; border-radius: 8px;
  background: var(--vintage-blue); color: var(--tan);
  font-weight: 600; font-size: 0.9rem; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.idle-stay-btn:hover { background: var(--vintage-blue-light); transform: translateY(-1px); }

/* Recent Activity list */
.activity-list { display: flex; flex-direction: column; }
.activity-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid #222C3A; font-size: 0.85rem;
}
.activity-row:last-child { border-bottom: none; }
.activity-label { color: var(--tan); }
.activity-when { color: var(--silver-dim); font-size: 0.74rem; white-space: nowrap; flex-shrink: 0; }

/* Dismissible 2FA suggestion banner — accessible, never blocking. */
.mfa-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, rgba(46,84,114,0.16), rgba(46,84,114,0.05));
  border: 1px solid var(--vintage-blue);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mfa-banner-text { font-size: 0.85rem; color: var(--tan); }
.mfa-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mfa-banner-setup-btn {
  padding: 7px 14px; border: none; border-radius: 7px;
  background: var(--vintage-blue); color: var(--tan);
  font-weight: 600; font-size: 0.78rem; cursor: pointer;
  transition: background 0.15s ease;
}
.mfa-banner-setup-btn:hover { background: var(--vintage-blue-light); }
.mfa-banner-dismiss-btn {
  background: none; border: none; color: var(--silver-dim);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.mfa-banner-dismiss-btn:hover { color: var(--tan); }

/* ==========================================================================
   ARKO CONFIRM / ALERT — replaces native browser confirm()/alert() with a
   modal matching the app's own vintage/blue aesthetic. Shared across every
   page; each page includes the small JS helper (arkoConfirm/arkoAlert) that
   drives this markup, but the visual styling lives here once, centrally.
   ========================================================================== */
.arko-dialog-overlay {
  position: fixed; inset: 0; background: rgba(6,8,11,0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 400;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
}
.arko-dialog-overlay.open { opacity: 1; visibility: visible; }
.arko-dialog-modal {
  background: var(--dark-vintage);
  border: 1px solid var(--vintage-blue);
  border-radius: 14px;
  width: 100%; max-width: 380px;
  padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 26px rgba(46,84,114,0.2);
  transform: translateY(-8px) scale(0.97);
  transition: transform 0.22s cubic-bezier(.2,.9,.25,1.1);
}
.arko-dialog-overlay.open .arko-dialog-modal { transform: translateY(0) scale(1); }
.arko-dialog-overlay.arko-dialog-danger .arko-dialog-modal { border-color: var(--error); box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 26px rgba(224,139,125,0.18); }
.arko-dialog-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(110,143,163,0.12);
  border: 1px solid rgba(110,143,163,0.32);
  margin-bottom: 14px;
}
.arko-dialog-icon svg { width: 20px; height: 20px; stroke: var(--vintage-blue-light); }
.arko-dialog-overlay.arko-dialog-danger .arko-dialog-icon { background: rgba(224,139,125,0.12); border-color: rgba(224,139,125,0.35); }
.arko-dialog-overlay.arko-dialog-danger .arko-dialog-icon svg { stroke: var(--error); }
.arko-dialog-message {
  font-size: 0.9rem;
  color: var(--tan);
  line-height: 1.55;
  margin-bottom: 20px;
  white-space: pre-line;
}
.arko-dialog-actions { display: flex; gap: 10px; }
.arko-dialog-btn {
  flex: 1;
  padding: 11px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: 'Public Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.arko-dialog-btn-cancel {
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--silver-dim);
}
.arko-dialog-btn-cancel:hover { color: var(--tan); border-color: var(--silver-dim); background: rgba(255,255,255,0.03); }
.arko-dialog-btn-confirm {
  border: none;
  background: var(--vintage-blue);
  color: var(--tan);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.arko-dialog-btn-confirm:hover { background: var(--vintage-blue-light); transform: translateY(-1px); }
.arko-dialog-overlay.arko-dialog-danger .arko-dialog-btn-confirm { background: var(--error); }
.arko-dialog-overlay.arko-dialog-danger .arko-dialog-btn-confirm:hover { background: #E8A896; }
.arko-dialog-btn-single { width: 100%; }

/* ==========================================================================
   FEATURE PREVIEW MODAL — animated mockups for locked (paywalled) features,
   shown when someone clicks a locked item in the Premium Tools menu instead
   of bouncing straight to the pricing page with no context. Each mockup is
   a small looping animation built from the app's own SVG/CSS, not real
   screen-recorded video — a taste of what the feature looks like in motion.
   ========================================================================== */
.feature-preview-overlay {
  position: fixed; inset: 0; background: rgba(6,8,11,0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 410;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.feature-preview-overlay.open { opacity: 1; visibility: visible; }
.feature-preview-modal {
  background: var(--dark-vintage);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  width: 100%; max-width: 420px;
  padding: 0;
  box-shadow: 0 26px 64px rgba(0,0,0,0.55);
  transform: translateY(-8px) scale(0.97);
  transition: transform 0.25s cubic-bezier(.2,.9,.25,1.1);
  overflow: hidden;
}
.feature-preview-overlay.open .feature-preview-modal { transform: translateY(0) scale(1); }
.feature-preview-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.35); color: var(--tan);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.feature-preview-close:hover { background: rgba(0,0,0,0.55); }
.feature-preview-stage {
  height: 220px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.feature-preview-body { padding: 22px 26px 26px; }
.feature-preview-tier-badge {
  display: inline-block;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
  margin-bottom: 10px;
}
.feature-preview-title { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--tan); margin-bottom: 6px; }
.feature-preview-desc { font-size: 0.85rem; color: var(--silver-dim); line-height: 1.55; margin-bottom: 20px; }
.feature-preview-cta {
  width: 100%; padding: 12px; border: none; border-radius: 9px;
  font-weight: 700; font-size: 0.88rem; cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.feature-preview-cta:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .fp-anim { animation: none !important; }
}

/* ---- Connections (Tier 2, emerald) ---- */
.feature-preview-stage.fp-connections { background: radial-gradient(ellipse at center, rgba(110,196,150,0.1), transparent 70%); }
.fp-conn-node { fill: #6EC496; }
.fp-conn-stream { fill: none; stroke: #6EC49688; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 5; }
.fp-conn-stream.fp-anim { animation: fpDrift 2.2s linear infinite; }
.fp-conn-total { fill: var(--tan); font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; }
.fp-conn-total-glow.fp-anim { animation: fpPulseSoft 2.4s ease-in-out infinite; }
@keyframes fpDrift { to { stroke-dashoffset: -110; } }
@keyframes fpPulseSoft { 0%,100% { opacity: 0.15; } 50% { opacity: 0.32; } }

/* ---- Investments (Tier 3, violet) ---- */
.feature-preview-stage.fp-investments { background: radial-gradient(ellipse at center, rgba(168,143,216,0.1), transparent 70%); }
.fp-inv-ring-bg { fill: none; stroke: #ffffff14; stroke-width: 10; }
.fp-inv-ring-fg { fill: none; stroke: #A88FD8; stroke-width: 10; stroke-linecap: round; }
.fp-inv-ring-fg.fp-anim { stroke-dasharray: 320; stroke-dashoffset: 320; animation: fpRingDraw 2.6s cubic-bezier(.3,.8,.3,1) infinite; }
@keyframes fpRingDraw {
  0% { stroke-dashoffset: 320; }
  55%, 100% { stroke-dashoffset: 60; }
}
.fp-inv-badge { fill: #171422; stroke: #A88FD8; stroke-width: 1.5; opacity: 0; }
.fp-inv-badge.fp-anim { animation: fpBadgeIn 2.6s ease infinite; }
.fp-inv-badge.fp-b2.fp-anim { animation-delay: 0.3s; }
.fp-inv-badge.fp-b3.fp-anim { animation-delay: 0.6s; }
@keyframes fpBadgeIn {
  0%, 15% { opacity: 0; transform: scale(0.6); }
  35%, 85% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Spending (Tier 3, coral) ---- */
.feature-preview-stage.fp-spending { background: radial-gradient(ellipse at center, rgba(224,128,106,0.1), transparent 70%); }
.fp-spend-bar { transform-origin: left center; transform: scaleX(0); }
.fp-spend-bar.fp-anim { animation: fpBarGrow 2.4s cubic-bezier(.3,.8,.3,1) infinite; }
.fp-spend-bar.fp-b2.fp-anim { animation-delay: 0.15s; }
.fp-spend-bar.fp-b3.fp-anim { animation-delay: 0.3s; }
.fp-spend-bar.fp-b4.fp-anim { animation-delay: 0.45s; }
@keyframes fpBarGrow {
  0% { transform: scaleX(0); }
  50%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* ---- Savings (Tier 3, teal) ---- */
.feature-preview-stage.fp-savings { background: radial-gradient(ellipse at center, rgba(110,196,184,0.1), transparent 70%); }
.fp-sav-stem { stroke: #6EC4B8; stroke-width: 3; stroke-linecap: round; fill: none; }
.fp-sav-stem.fp-anim { stroke-dasharray: 80; stroke-dashoffset: 80; animation: fpGrow 2.6s cubic-bezier(.3,.8,.3,1) infinite; }
@keyframes fpGrow {
  0% { stroke-dashoffset: 80; }
  60%, 100% { stroke-dashoffset: 0; }
}
.fp-sav-leaf { fill: #6EC4B8; opacity: 0; transform-origin: center; transform: scale(0.4); }
.fp-sav-leaf.fp-anim { animation: fpLeafPop 2.6s ease infinite; }
.fp-sav-leaf.fp-l2.fp-anim { animation-delay: 0.35s; }
@keyframes fpLeafPop {
  0%, 40% { opacity: 0; transform: scale(0.4); }
  65%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.fp-sav-ring-fg.fp-anim { stroke-dasharray: 100; stroke-dashoffset: 100; animation: fpRingFill 2.6s cubic-bezier(.3,.8,.3,1) infinite; }
@keyframes fpRingFill {
  0% { stroke-dashoffset: 100; }
  70%, 100% { stroke-dashoffset: 22; }
}