/* ============================================================
   Budget by Dunit — global styles
   Aesthetic: light, airy, finance-dashboard
   ============================================================ */

:root {
  /* Light mode — Cuddle-inspired with Dunit blue accents */
  --bg:          #f4f6fb;   /* soft gray page background */
  --bg-2:        #ffffff;   /* card surface */
  --bg-3:        #f0f3f8;   /* input / hover / sub-surface */
  --line:        rgba(20, 30, 50, 0.08);
  --line-strong: rgba(20, 30, 50, 0.14);
  --ink:         #1a2436;   /* slate near-black for headings */
  --ink-dim:     #5d6a82;   /* secondary text */
  --ink-faint:   #9aa7bd;   /* muted / hints */
  --accent:      #1d9ad2;   /* Dunit primary blue */
  --accent-light:#e6f4fb;   /* pastel blue, used for chart fills + active sidebar bg */
  --accent-deep: #006baf;   /* Dunit deep blue (hover, buttons) */
  --accent-2:    #f59e0b;   /* amber accent */
  --good:        #10b981;
  --good-light:  #e7f7f0;
  --good-text:   #065f46;   /* dark enough for AA text directly on --good-light */
  --bad:         #ef4444;
  --bad-light:   #fdecec;
  --bad-text:    #991b1b;   /* dark enough for AA text directly on --bad-light */
  --warn:        #f59e0b;
  --warn-light:  #fef4e2;
  --warn-text:   #92400e;   /* dark enough for AA text directly on --warn-light */
  --shadow-card: 0 1px 3px rgba(20, 30, 50, 0.04), 0 1px 2px rgba(20, 30, 50, 0.06);
  --shadow-elev: 0 4px 12px rgba(20, 30, 50, 0.08);
  --serif:       'Satoshi', 'Inter', system-ui, sans-serif;  /* not really serif anymore; kept for back-compat */
  --sans:        'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --display:     'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --radius:      16px;
  --radius-sm:   10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* FIX 2026-06-19: decorative blobs/cards on the landing page use
     negative right/left offsets (e.g. .landing-blob-1, .landing::before,
     .float-card-1/2, .cta-inner::before) that bleed past the body's edge.
     Setting overflow-x:hidden on body alone isn't reliable in Chrome —
     <html> can still become the actual document scrolling box and has
     no restriction, letting the page scroll horizontally and shift
     every section's content left. Clamping both html and body closes
     that gap regardless of which decorative element is the offender. */
  overflow-x: hidden;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }

/* Film-grain overlay */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: .65rem; }
.brand-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url('/assets/img/dunit-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(29, 154, 210, 0.20));
}
.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand-by {
  font-family: var(--sans);
  font-weight: 400;
  font-style: italic;
  font-size: .72rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin: 0 .1rem 0 .15rem;
  text-transform: lowercase;
  vertical-align: 0.05em;
}
.brand-dunit {
  color: var(--accent);
  font-weight: 600;
}
/* Legacy support for any leftover .brand-dot */
.brand-dot { color: var(--accent); }

/* Parent-company link in the landing nav */
.parent-link {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color .15s ease;
}
.parent-link:hover { color: var(--accent); }
.nav { display: flex; justify-content: space-between; align-items: center; }

/* Landing footer — restructured */
.foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.foot-brand {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}
.foot-sep {
  margin: 0 .65rem;
  color: var(--ink-faint);
}
.foot-links a {
  color: var(--ink-faint);
  transition: color .15s ease;
}
.foot-links a:hover { color: var(--accent); }

/* ====================================================================
   LANDING PAGE
   ==================================================================== */

.landing { min-height: 100vh; position: relative; overflow-x: clip; }

.landing::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(29, 154, 210, 0.10), transparent 70%);
  pointer-events: none;
}
.landing::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.07), transparent 70%);
  pointer-events: none;
}

.nav {
  position: relative; z-index: 2;
  padding: 2rem 3rem;
  border-bottom: 1px solid var(--line);
}

.hero {
  position: relative; z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 3rem 4rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: .72rem;
  color: var(--ink-dim);
  margin: 0 0 1.5rem;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
  max-width: 14ch;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.hero-sub {
  font-size: 1.15rem;
  max-width: 52ch;
  color: var(--ink-dim);
  margin: 0 0 3rem;
}

.signin-box {
  padding: 1.5rem;
  background: rgba(20,30,50,0.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 380px;
  margin-bottom: 5rem;
}
.signin-fine {
  margin: .85rem 0 0;
  font-size: .82rem;
  color: var(--ink-faint);
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 3rem;
}
@media (max-width: 800px) { .features { grid-template-columns: 1fr; } }

.feature .feat-num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: .5rem;
}
.feature h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 .5rem;
}
.feature p { color: var(--ink-dim); margin: 0; }

.foot {
  position: relative; z-index: 2;
  padding: 2rem 3rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-faint);
}

/* ====================================================================
   APP LAYOUT — persistent sidebar on desktop, overlay on mobile
   ==================================================================== */

.app {
  min-height: 100vh;
  position: relative;
}

/* ---------- Hamburger button (mobile only, ≤899px) ---------- */
.hamburger {
  display: none;  /* default off; only visible on mobile */
}

@media (max-width: 899px) {
  .hamburger {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: border-color .15s ease, transform .15s cubic-bezier(.4,0,.2,1);
  }
  .hamburger:hover { border-color: var(--accent); }
  .hamburger:active { transform: scale(.92); }
  /* Span appearance + the open-state X-morph animation are defined ONCE,
     in the "HAMBURGER REBUILD" block further down this file — search for
     that comment if you need to change the animation. Duplicating the
     rules here previously caused confusion about which block actually
     controlled the behavior. */
}

/* ---------- Backdrop (mobile only) ---------- */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.5);
  backdrop-filter: blur(4px);
  z-index: 19;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
body.sidebar-open .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 900px) {
  .sidebar-backdrop { display: none; }
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 240px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 1.75rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  z-index: 20;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              width .3s cubic-bezier(.4,0,.2,1),
              padding .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
body.sidebar-open .sidebar { transform: translateX(0); }

/* Desktop: always visible, no transform, no hamburger needed */
@media (min-width: 900px) {
  .sidebar {
    transform: translateX(0);
    box-shadow: none;
  }
}

/* Brand at top */
.sidebar .brand {
  padding: 0 .5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 899px) {
  .sidebar .brand { padding-left: 3.2rem; }
}

/* Section label between groups of links */
.side-nav-section {
  font-size: .65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.25rem .85rem .5rem;
  font-weight: 500;
}

.side-nav {
  display: flex; flex-direction: column; gap: .15rem;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: .9rem;
  font-weight: 500;
  transition: all .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.side-nav a:hover {
  background: var(--bg-3);
  color: var(--ink);
}
.side-nav a.active {
  background: var(--accent-light);
  color: var(--accent-deep);
  font-weight: 600;
}
.nav-icon {
  display: inline-block;
  width: 20px;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.nav-label { flex: 1; }

.side-user {
  display: flex; align-items: center; gap: .65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.side-user img {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.su-name { font-weight: 600; font-size: .88rem; color: var(--ink); }
.su-logout { font-size: .76rem; color: var(--ink-faint); display: block; margin-top: 1px; }
.su-logout:hover { color: var(--accent); }

/* ---------- Main content ---------- */
.main {
  padding: 4.5rem 1.5rem 4rem;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  transition: margin-left .3s cubic-bezier(.4,0,.2,1),
              max-width .3s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 900px) {
  .main {
    /* push past the persistent sidebar */
    margin-left: 240px;
    padding: 2rem 2.5rem 4rem;
    max-width: calc(1400px - 240px);
  }
}

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}
.month-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: .68rem;
  color: var(--ink-faint);
  margin: 0 0 .3rem;
  font-weight: 500;
}
.page-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--accent-deep);
  color: white;
  border: none;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .92rem;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(29, 154, 210, 0.25); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary.full { width: 100%; }

/* ---------- KPI Cards ---------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.kpi::after {
  content: '';
  position: absolute;
  top: 0; right: 0; width: 90px; height: 90px;
  background: radial-gradient(circle at top right, currentColor, transparent 70%);
  opacity: .08;
  pointer-events: none;
}
.kpi-income    { color: var(--good); }
.kpi-spent     { color: var(--bad); }
.kpi-remaining { color: var(--accent-2); }
.kpi-rate      { color: var(--accent); }

.kpi-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: .68rem;
  color: var(--ink-faint);
  margin: 0 0 .65rem;
  font-weight: 500;
}
.kpi-value {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.9rem;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.kpi-sub {
  margin: .35rem 0 0;
  font-size: .8rem;
  color: var(--ink-faint);
}

/* ---------- Cards / Charts ---------- */
.charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }
.span-2 { grid-column: 1 / -1; }

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.25rem;
}
/* Ensure top-level sections always have breathing room between them */
.main > section { margin-bottom: 1.25rem; }
.main > section:last-child { margin-bottom: 0; }
.card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1rem;
}
.card-head h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.card-sub {
  font-size: .78rem;
  color: var(--ink-faint);
}
.card-link {
  font-size: .85rem;
  color: var(--accent);
}
.chart-wrap {
  position: relative;
  height: 280px;
}

.empty {
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  padding: 2rem 0;
}

/* ---------- Transactions list ---------- */
.tx-list { list-style: none; padding: 0; margin: 0; }
.tx {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.tx:last-child { border-bottom: none; }
.tx-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.tx-body { flex: 1; min-width: 0; }
.tx-cat { margin: 0; font-weight: 500; font-size: .95rem; }
.tx-note { margin: .15rem 0 0; color: var(--ink-faint); font-size: .82rem; }
.tx-meta { text-align: right; }
.tx-amt { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.tx-amt.pos { color: var(--good); }
.tx-amt.neg { color: var(--ink); }
.tx-date { margin: .15rem 0 0; font-size: .78rem; color: var(--ink-faint); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center; justify-content: center;
  z-index: 50;             /* above hamburger (30) and sidebar (20) */
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 1.5rem;
}
.modal.open { display: flex; }
.modal-inner {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem;
  width: 90%; max-width: 440px;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}
.modal-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0;
}
.x {
  background: none; border: none;
  color: var(--ink-dim);
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
}
.x:hover { color: var(--ink); }

#txForm label {
  display: block;
  margin-bottom: 1rem;
  font-size: .82rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#txForm .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
#txForm input,
#txForm select {
  width: 100%;
  margin-top: .4rem;
  padding: .65rem .85rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  text-transform: none;
  letter-spacing: 0;
}
#txForm input:focus,
#txForm select:focus {
  outline: none;
  border-color: var(--accent);
}
#txForm button { margin-top: .5rem; }

/* ====================================================================
   BUDGET PAGE
   ==================================================================== */

.month-nav {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .5rem;
}
.month-arrow {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all .15s ease;
}
.month-arrow:hover { background: var(--bg-3); color: var(--ink); }
.month-current {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  padding: 0 .5rem;
  min-width: 110px;
  text-align: center;
}

.budget-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.budget-row {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid transparent;
  transition: border-color .15s ease;
}
.budget-row:hover { border-color: var(--line); }

.bg-head {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: .85rem;
}
.bg-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.bg-name {
  font-weight: 500;
  font-size: 1rem;
  flex: 1;
}
.bg-actual {
  font-size: .8rem;
  color: var(--ink-faint);
  font-style: italic;
}

.bg-controls {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .85rem;
}
.bg-currency {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink-faint);
  font-weight: 600;
}
.bg-input {
  flex: 1;
  max-width: 200px;
  padding: .55rem .85rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bg-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.bg-save-status {
  font-size: .78rem;
  font-weight: 500;
  transition: opacity .2s ease;
  min-width: 70px;
}
.bg-save-status.saving { color: var(--ink-faint); font-style: italic; }
.bg-save-status.saved  { color: var(--good); }
.bg-save-status.error  { color: var(--bad); }

.bg-bar {
  width: 100%;
  height: 6px;
  background: var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}
.bg-bar-fill {
  height: 100%;
  transition: width .3s ease, background .2s ease;
  border-radius: 999px;
}
.bg-bar-fill.over {
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ====================================================================
   TRANSACTIONS PAGE
   ==================================================================== */

.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filter-form {
  display: flex;
  gap: .65rem;
}
.filter-form select {
  padding: .55rem .85rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.filter-form select:hover { border-color: var(--accent); }

.tx-clickable {
  cursor: pointer;
  transition: background .15s ease;
  padding: .85rem .65rem;
  margin: 0 -.65rem;
  border-radius: 8px;
}
.tx-clickable:hover { background: rgba(20,30,50,0.025); }
.tx-clickable:hover .tx-cat { color: var(--accent); }

.btn-danger {
  background: transparent;
  color: var(--bad);
  border: 1px solid var(--bad);
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .92rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.btn-danger:hover {
  background: var(--bad);
  color: white;
}

.edit-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
}

/* ====================================================================
   SHARED — secondary button, topbar actions, hint text
   ==================================================================== */

.topbar-actions {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .92rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  text-decoration: none;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.hint {
  font-weight: 400;
  font-size: .72rem;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.dim { color: var(--ink-faint); }

/* ====================================================================
   CATEGORIES PAGE
   ==================================================================== */

.cat-group-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  margin: 1.5rem 0 .75rem;
}
.cat-group-title:first-of-type { margin-top: 0; }

.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem .65rem;
  margin: 0 -.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.cat-row:hover { background: rgba(20,30,50,0.025); }
.cat-row:hover .cat-name { color: var(--accent); }

.cat-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.cat-body { flex: 1; min-width: 0; }
.cat-name { margin: 0; font-weight: 500; font-size: .98rem; }
.cat-keywords {
  margin: .2rem 0 0;
  color: var(--ink-faint);
  font-size: .8rem;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-meta { text-align: right; }
.cat-count {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ====================================================================
   IMPORT PAGE
   ==================================================================== */

.code-block {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .8rem 1rem;
  font-family: 'SFMono-Regular', Menlo, monospace;
  font-size: .9rem;
  color: var(--accent);
  margin: .5rem 0;
  overflow-x: auto;
}

.format-list {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  color: var(--ink-dim);
}
.format-list li { margin: .35rem 0; }
.format-list code {
  background: var(--bg-3);
  padding: .12rem .4rem;
  border-radius: 4px;
  font-size: .85rem;
  color: var(--ink);
}

.upload-zone {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: all .15s ease;
}
.upload-zone:hover { border-color: var(--accent); }
.upload-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.upload-prompt {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink);
}
.upload-sub {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: var(--ink-faint);
}

.preview-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 500px;
  overflow-y: auto;
}
.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.preview-table thead {
  background: var(--bg-3);
  position: sticky;
  top: 0;
  z-index: 1;
}
.preview-table th {
  padding: .6rem .8rem;
  text-align: left;
  font-weight: 500;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
.preview-table td {
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--line);
}
.preview-table tr:last-child td { border-bottom: none; }
.preview-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.row-err td { background: rgba(239, 68, 68, 0.06); }

.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
}
.badge-income  { background: rgba(16, 185, 129, 0.15); color: var(--good); }
.badge-expense { background: rgba(239, 68, 68, 0.15);  color: var(--bad); }
.badge-ok      { background: rgba(16, 185, 129, 0.15); color: var(--good); }
.badge-err     { background: rgba(239, 68, 68, 0.15);  color: var(--bad); }

/* ====================================================================
   EDIT BUTTON — used on every editable row
   ==================================================================== */

.edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: .65rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s ease;
  text-decoration: none;
}
.edit-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent);
  color: white;
  transform: scale(1.08);
}
.edit-btn:active { transform: scale(0.96); }
.edit-btn svg { display: block; }

/* On touch devices, make the edit button always visible at full color
   so it doesn't rely on hover, which doesn't exist on touch */
@media (hover: none) {
  .edit-btn {
    color: var(--accent);
    border-color: var(--accent);
  }
}

/* ====================================================================
   AI ADVISOR
   ==================================================================== */

.advisor-summary {
  position: relative;
  overflow: hidden;
}
.advisor-summary::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(29, 154, 210, 0.10), transparent 70%);
  pointer-events: none;
}

.advisor-text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 64ch;
  position: relative;
}
.advisor-text::before {
  content: '"';
  position: absolute;
  top: -1.5rem; left: -1.5rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 4rem;
  color: var(--accent);
  opacity: 0.4;
  line-height: 1;
}
.advisor-meta {
  margin: 1.5rem 0 0;
  font-size: .78rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ----- Chat ----- */
.advisor-chat .card-head { margin-bottom: 1.25rem; }

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-height: 480px;
  overflow-y: auto;
  padding: .5rem .25rem 1rem;
  margin: 0 -.25rem 1rem;
}

.chat-empty {
  text-align: center;
  padding: 2rem 0 1rem;
}
.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  margin-top: 1rem;
}
.suggestion {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: .55rem 1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s ease;
}
.suggestion:hover {
  background: var(--accent-deep);
  color: white;
  border-color: var(--accent);
}

.chat-msg {
  display: flex;
  max-width: 85%;
}
.chat-user { align-self: flex-end; justify-content: flex-end; }
.chat-assistant { align-self: flex-start; }

.chat-bubble {
  padding: .7rem 1rem;
  border-radius: 16px;
  font-size: .94rem;
  line-height: 1.5;
  word-wrap: break-word;
}
.chat-user .chat-bubble {
  background: var(--accent-deep);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-assistant .chat-bubble {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.chat-typing {
  display: inline-block;
  color: var(--ink-faint);
  animation: typingPulse 1.4s ease-in-out infinite;
  letter-spacing: 0.2em;
}
@keyframes typingPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

.chat-form {
  display: flex;
  gap: .65rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.chat-form input[type=text] {
  flex: 1;
  padding: .75rem 1rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
}
.chat-form input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
}
.chat-form input[type=text]:disabled { opacity: 0.6; }

/* ====================================================================
   SETTINGS PAGE
   ==================================================================== */

.profile-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.profile-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.profile-email {
  color: var(--ink-faint);
  font-size: .9rem;
  margin: .2rem 0 0;
}

.settings-label {
  display: block;
  margin-bottom: 1.5rem;
}
.settings-label .label-title {
  display: block;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: .25rem;
  text-transform: none;
  letter-spacing: 0;
}
.settings-label .hint {
  display: block;
  font-size: .82rem;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: .5rem;
  text-transform: none;
  letter-spacing: 0;
}
.settings-label select {
  width: 100%;
  padding: .7rem 1rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.settings-label select:focus {
  outline: none;
  border-color: var(--accent);
}

.info-box {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  color: var(--ink);
  font-size: .88rem;
}
.info-box p { margin: 0; }

.settings-status {
  margin: 1rem 0 0;
  font-size: .9rem;
  min-height: 1.2em;
}
.settings-status.saved { color: var(--good); }
.settings-status.error { color: var(--bad); }

.danger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}
.danger-title {
  font-weight: 500;
  margin: 0;
}
.danger-sub {
  margin: .2rem 0 0;
  color: var(--ink-faint);
  font-size: .85rem;
}

/* ====================================================================
   TX-NATIVE — small subtitle on transaction rows showing original currency
   ==================================================================== */

.tx-native {
  margin: .15rem 0 0;
  font-size: .75rem;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
}

/* ====================================================================
   LANDING NAV — slightly larger brand mark on the marketing page
   ==================================================================== */

.landing .brand-mark { width: 36px; height: 36px; }
.landing .brand-name { font-size: 1.4rem; }

/* ====================================================================
   SUBSCRIPTIONS / UPGRADE PAGE
   ==================================================================== */

/* Sidebar plan badge */
.side-plan {
  display: block;
  padding: .85rem 1rem;
  margin: 1.5rem 0 .85rem;
  background: var(--accent-light);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  transition: all .15s ease;
  position: relative;
  overflow: hidden;
}
.side-plan:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.side-plan-label {
  display: block;
  font-size: .65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .3rem;
  font-weight: 500;
}
.side-plan-name {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.side-plan-exp {
  display: block;
  font-size: .72rem;
  color: var(--ink-faint);
  margin-top: .2rem;
  font-style: italic;
}

/* Accent the side badge based on plan */
.side-plan.plan-pro {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(29, 154, 210, 0.08), transparent);
}
.side-plan.plan-pro .side-plan-name { color: var(--accent); }
.side-plan.plan-premium {
  border-color: var(--accent-2);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent);
}
.side-plan.plan-premium .side-plan-name { color: var(--accent-2); }
.side-plan.plan-expired { opacity: .8; }
.side-plan.plan-expired .side-plan-name { color: var(--bad); }

/* Topbar plan badge on upgrade page */
.plan-badge {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
}
.plan-badge span:first-child { color: var(--ink-faint); }
.plan-badge b { color: var(--accent); font-weight: 600; }

/* Pricing cards grid */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.plan-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.plan-card-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(29, 154, 210, 0.05), var(--bg-2) 30%);
}
.plan-card-current {
  border-color: var(--good);
}
.plan-tag {
  position: absolute;
  top: -10px;
  left: 1.75rem;
  background: var(--accent-deep);
  color: white;
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.plan-tag-current { background: var(--good); right: 1.75rem; left: auto; }

.plan-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 .3rem;
  letter-spacing: -0.01em;
}
.plan-desc {
  color: var(--ink-dim);
  font-size: .9rem;
  margin: 0 0 1.5rem;
  min-height: 2.5em;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.plan-currency {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink-faint);
}
.plan-amount {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--ink);
}
.plan-period {
  color: var(--ink-faint);
  font-size: .9rem;
  margin-left: .3rem;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}
.plan-features li {
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--ink);
  border-bottom: 1px dotted var(--line);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li.off { color: var(--ink-faint); text-decoration: none; }
.plan-features li.off::first-letter { color: var(--ink-faint); }

/* ====================================================================
   TWO-FACTOR AUTH
   ==================================================================== */

.tfa-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
}
.tfa-status-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--good);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tfa-status-title {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}
.tfa-status-sub {
  margin: .2rem 0 0;
  font-size: .85rem;
  color: var(--ink-dim);
}

.qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
  background: var(--bg-2);
  border-radius: 12px;
  margin: 1rem 0;
  min-height: 240px;
}
.qr-container img {
  display: block;
  width: 240px;
  height: 240px;
  border-radius: 4px;
}

.manual-secret {
  display: block;
  padding: .75rem 1rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'SFMono-Regular', Menlo, monospace;
  font-size: .95rem;
  color: var(--accent);
  word-break: break-all;
  letter-spacing: 0.05em;
}

.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
  margin-top: 1.5rem;
}
@media (min-width: 500px) {
  .backup-codes { grid-template-columns: repeat(4, 1fr); }
}
.backup-code {
  display: block;
  padding: .75rem .5rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'SFMono-Regular', Menlo, monospace;
  font-size: .95rem;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ====================================================================
   GOALS PAGE
   ==================================================================== */

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
}
.empty-icon {
  font-size: 3rem;
  margin: 0 0 1rem;
  opacity: .6;
}
.empty-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0 0 .5rem;
  letter-spacing: -0.01em;
}
.empty-sub {
  color: var(--ink-dim);
  max-width: 44ch;
  margin: 0 auto 1.5rem;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
}

.goal-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .15s ease;
}
.goal-card:hover { border-color: var(--line); }
.goal-completed {
  opacity: 0.85;
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04), var(--bg-2) 40%);
}

.goal-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.goal-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.goal-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goal-meta {
  margin: .2rem 0 0;
  font-size: .8rem;
  color: var(--ink-faint);
  font-style: italic;
}

.goal-amounts {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.goal-saved {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.goal-of { color: var(--ink-faint); font-size: .9rem; }
.goal-target {
  font-family: var(--serif);
  color: var(--ink-dim);
  font-size: 1.1rem;
}
.goal-pct {
  margin-left: auto;
  font-size: .85rem;
  color: var(--ink-faint);
  font-weight: 500;
}

.goal-bar {
  width: 100%;
  height: 8px;
  background: var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.goal-bar-fill {
  height: 100%;
  transition: width .4s ease;
  border-radius: 999px;
}

.goal-projection {
  font-size: .85rem;
  color: var(--ink-dim);
  margin: 0 0 1.25rem;
  line-height: 1.5;
  min-height: 2.5em;
}
.goal-done { color: var(--good); font-weight: 500; }
.proj-ok { color: var(--good); font-weight: 500; }
.proj-warn { color: var(--accent-2); font-weight: 500; }

.goal-add-btn {
  margin-top: auto;
}

/* Checkbox row used in modals */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: .75rem 0;
  font-size: .88rem;
  color: var(--ink-dim);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.checkbox-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.checkbox-row span {
  line-height: 1.4;
}

/* ====================================================================
   MONTHLY BUDGET — redesigned plan vs actual
   ==================================================================== */

/* Generic info box (used at top of pages) */
.info-box {
  background: rgba(29, 154, 210, 0.06);
  border: 1px solid rgba(29, 154, 210, 0.22);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.info-box p { margin: 0; color: var(--ink); line-height: 1.55; font-size: .92rem; }
.info-box em { color: var(--accent); font-style: normal; font-weight: 500; }
.info-box-warn {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Top summary (planned / actual / left to spend + pace bar) */
.budget-summary {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.bs-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
  .bs-numbers { grid-template-columns: 1fr; gap: 1rem; }
}
.bs-block {
  padding: 0;
}
.bs-label {
  font-size: .7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .35rem;
}
.bs-value {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.9rem;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bs-hint {
  font-size: .78rem;
  color: var(--ink-faint);
  margin: .25rem 0 0;
}
.bs-block-good .bs-value { color: var(--good); }
.bs-block-bad  .bs-value { color: var(--bad); }

/* Pace section: shows actual % vs time % side-by-side */
.pace-section {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.pace-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
  font-size: .88rem;
}
.pace-labels b { font-weight: 600; font-family: var(--serif); }
.pace-spent.pace-good { color: var(--good); }
.pace-spent.pace-warn { color: var(--accent-2); }
.pace-spent.pace-bad  { color: var(--bad); }
.pace-time { color: var(--ink-dim); }

.pace-bar-track {
  position: relative;
  height: 10px;
  background: var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.pace-bar-time {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(20,30,50,0.08) 100%);
  border-right: 2px dashed var(--ink-faint);
  transition: width .4s ease;
}
.pace-bar-spent {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width .4s ease;
}
.pace-hint {
  margin: 0;
  font-size: .8rem;
  text-align: right;
}
.pace-good-text { color: var(--good); }
.pace-warn-text { color: var(--accent-2); }
.pace-bad-text  { color: var(--bad); }

/* Per-category rows */
.budget-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.budget-row {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.budget-row:last-child { border-bottom: none; }
.budget-row:first-child { padding-top: .5rem; }

.budget-row-flat { padding: .85rem 0; }

.bg-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .65rem;
}
.bg-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.bg-name {
  font-weight: 500;
  color: var(--ink);
  flex: 1;
}
.bg-tx-link {
  font-size: .78rem;
  color: var(--ink-faint);
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--bg-3);
  transition: all .15s ease;
}
.bg-tx-link:hover {
  background: var(--accent-deep);
  color: white;
}

.bg-numbers {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.bg-actual {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.bg-actual-over { color: var(--bad); }
.bg-of { color: var(--ink-faint); font-size: .88rem; }

.bg-controls {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .25rem .55rem;
}
.bg-currency {
  color: var(--ink-faint);
  font-size: .9rem;
  font-family: var(--serif);
}
.bg-input {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  width: 110px;
  padding: .25rem 0;
  outline: none;
  -moz-appearance: textfield;
}
.bg-input::-webkit-outer-spin-button,
.bg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bg-input:focus { color: var(--accent); }
.bg-save-status {
  font-size: .68rem;
  color: var(--ink-faint);
  min-width: 1.5rem;
  text-align: right;
}
.bg-save-status.saved { color: var(--good); }
.bg-save-status.error { color: var(--bad); }

/* Progress bar under each category */
.bg-bar-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .4rem;
}
.bg-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.bg-bar-over {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(239, 68, 68, 0.4),
    rgba(239, 68, 68, 0.4) 4px,
    rgba(239, 68, 68, 0.25) 4px,
    rgba(239, 68, 68, 0.25) 8px
  );
  border-radius: 0 999px 999px 0;
}
.budget-row-over .bg-bar-track {
  background: rgba(239, 68, 68, 0.1);
}

.bg-footer {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-dim);
}

.empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ink-faint);
  font-size: .92rem;
  margin: 0;
}

/* ====================================================================
   PRIVACY MODE TOGGLE BUTTON (topbar)
   ==================================================================== */

.privacy-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0;
  transition: all .15s ease;
  flex-shrink: 0;
}
.privacy-toggle:hover {
  border-color: var(--accent);
  background: var(--bg-3);
}

/* ====================================================================
   BUDGET-PAGE TRANSACTION CRUD ADDITIONS
   ==================================================================== */

/* Quick actions row inside summary */
.bs-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.btn-active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Toggle arrow on the row head */
.bg-toggle-icon {
  display: inline-block;
  margin-left: .35rem;
  transition: transform .2s ease;
  color: var(--ink-faint);
  font-size: .75rem;
}
.bg-head {
  cursor: pointer;
  user-select: none;
}
.bg-head:hover .bg-name {
  color: var(--accent);
}

/* Inline transaction list under a category */
.bg-tx-list {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.bg-tx-list[hidden] { display: none; }

.tx-row {
  display: grid;
  grid-template-columns: 60px 1fr auto 28px;
  gap: .75rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px dotted var(--line);
  font-size: .88rem;
}
.tx-row:last-child { border-bottom: none; }
.tx-row-income {
  grid-template-columns: 60px auto 1fr auto 28px;
}
.tx-date { color: var(--ink-faint); font-size: .8rem; }
.tx-note { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-amount { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums; }
.tx-amount.tx-expense { color: var(--ink); }
.tx-amount.tx-income  { color: var(--good); }

/* Edit pencil button */
.edit-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all .15s ease;
}
.edit-btn:hover {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--accent);
}

/* Flat tx table (the "all transactions" view) */
.tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.tx-table th {
  text-align: left;
  font-size: .7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.tx-table th.num, .tx-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tx-table td {
  padding: .75rem;
  border-bottom: 1px solid var(--line);
}
.tx-table tr:last-child td { border-bottom: none; }
.tx-table tr:hover td { background: rgba(20,30,50,0.02); }

/* Category pill (used in tx rows for category display) */
.cat-pill {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
}

/* Flat tx list (income section) */
.tx-list-flat .tx-row {
  padding: .65rem 0;
}

/* Card link helper */
.card-link {
  font-size: .85rem;
  color: var(--accent);
}

/* ====================================================================
   SMART BACK LINK
   ==================================================================== */
.smart-back {
  color: var(--accent);
  text-decoration: none;
  font-size: .85rem;
  letter-spacing: 0.02em;
}
.smart-back:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ====================================================================
   CATEGORIES MANAGER + IMPORT (modals)
   ==================================================================== */

/* Wider modal for these two */
.modal-wide .modal-inner {
  max-width: 720px;
}

/* Category tabs */
.cat-tabs {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.cat-tab {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s ease;
}
.cat-tab:hover { border-color: var(--accent); color: var(--ink); }
.cat-tab.active {
  background: var(--accent-deep);
  color: white;
  border-color: var(--accent);
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  max-height: 50vh;
  overflow-y: auto;
}
.cat-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cat-row-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.cat-row-info { flex: 1; min-width: 0; }
.cat-row-name {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}
.cat-row-keywords {
  margin: .15rem 0 0;
  font-size: .75rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Import preview table */
.import-preview-wrap {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.import-preview-table {
  margin: 0;
}
.import-preview-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 1;
}
.import-cat-select {
  width: 100%;
  padding: .35rem .5rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: .82rem;
}
.import-cat-select:focus { outline: none; border-color: var(--accent); }

/* ====================================================================
   LIGHT-THEME OVERRIDES & POLISH (Cuddle-inspired)
   ==================================================================== */

/* Universal form controls — make sure everything has the same light look */
.modal-inner input[type=text],
.modal-inner input[type=number],
.modal-inner input[type=date],
.modal-inner input[type=email],
.modal-inner input[type=file],
.modal-inner select,
.modal-inner textarea,
form label > input[type=text],
form label > input[type=number],
form label > input[type=date],
form label > input[type=email],
form label > select,
form label > textarea {
  width: 100%;
  margin-top: .35rem;
  padding: .65rem .85rem;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: .92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.modal-inner input:focus,
.modal-inner select:focus,
.modal-inner textarea:focus,
form label > input:focus,
form label > select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 154, 210, 0.12);
}

/* Modal surface itself */
.modal-inner {
  background: var(--bg-2);
  box-shadow: var(--shadow-elev);
}

/* Modal backdrop on light mode */
.modal {
  background: rgba(20, 30, 50, 0.4);
}

/* Sidebar plan badge — refine for light bg */
.side-plan.plan-pro      { background: var(--accent-light); border-color: var(--accent); }
.side-plan.plan-pro .side-plan-name { color: var(--accent-deep); }
.side-plan.plan-premium  { background: var(--warn-light); border-color: var(--warn); }
.side-plan.plan-premium .side-plan-name { color: #b45309; }
.side-plan.plan-expired  { background: var(--bad-light); border-color: var(--bad); opacity: 1; }
.side-plan.plan-expired .side-plan-name { color: #b91c1c; }

/* Hover state for sidebar plan card */
.side-plan:hover { box-shadow: 0 4px 12px rgba(20, 30, 50, 0.06); }

/* Privacy toggle: lighter pill */
.privacy-toggle {
  background: var(--bg-2);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}
.privacy-toggle:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* Month nav pill — clean look */
.month-nav {
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.month-arrow:hover { background: var(--accent-light); color: var(--accent-deep); }
.month-current {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
}

/* Tables — alternating row tint instead of borders (Cuddle style) */
.tx-table tr:hover td,
.data-table tr:hover td {
  background: var(--accent-light);
}
.tx-table th,
.data-table th {
  background: var(--bg-3);
  color: var(--ink-dim);
  font-weight: 600;
}

/* Budget summary card with light gradient (subtle visual interest) */
.budget-summary {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--accent-light) 200%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.5rem;
}

/* Empty state polish */
.empty {
  color: var(--ink-faint);
}

/* Topbar gets cleaner spacing */
.topbar {
  align-items: center;
}

/* Card-head title bigger / tighter */
.card-head h2 {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* btn-secondary refined for light theme */
.btn-secondary {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: .7rem 1.2rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .88rem;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-light);
  text-decoration: none;
}

/* Buttons slightly more pill / Cuddle-like */
.btn-primary {
  padding: .7rem 1.5rem;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(29, 154, 210, 0.2);
}

/* ====================================================================
   DASHBOARD GOALS CARD
   ==================================================================== */

.dash-goals {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Defensive: ensure the parent section never inherits grid/flex from a sibling */
section.card:has(.dash-goals) {
  display: block;
  width: 100%;
  clear: both;
}
.dash-goal-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.dash-goal-row:hover {
  background: var(--bg-3);
  text-decoration: none;
}
.dash-goal-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.dash-goal-info {
  flex: 1;
  min-width: 0;
}
.dash-goal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
}
.dash-goal-name {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-goal-pct {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink-dim);
  flex-shrink: 0;
}
.dash-goal-bar {
  width: 100%;
  height: 6px;
  background: rgba(20, 30, 50, 0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.dash-goal-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.dash-goal-meta {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-dim);
}

/* ====================================================================
   FLOATING AI ADVISOR WIDGET
   ==================================================================== */

.advisor-bubble {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-deep);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(29, 154, 210, 0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.advisor-bubble:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(29, 154, 210, 0.45);
}
.advisor-bubble:active { transform: translateY(0); }
.advisor-bubble-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--good);
  border: 2px solid white;
}
body.advisor-open .advisor-bubble {
  /* Hide the bubble while the panel is open, otherwise it overlaps the X */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

/* The floating panel */
.advisor-panel {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 41;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(640px, calc(100vh - 2rem));
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(20, 30, 50, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: bottom right;
}
.advisor-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.advisor-panel[hidden] { display: none; }

.advisor-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-2) 100%);
}
.advisor-panel-eyebrow {
  font-size: .65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 .2rem;
  font-weight: 600;
}
.advisor-panel-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  color: var(--ink);
}
.advisor-panel-close {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 1.4rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.advisor-panel-close:hover { background: var(--bg-3); color: var(--ink); }

.advisor-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 200px;
}

.advisor-empty {
  text-align: center;
  margin: auto 0;
  padding: 1rem;
}
.advisor-empty-title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .5rem;
  font-size: .95rem;
}
.advisor-empty-sub {
  font-size: .82rem;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}

.advisor-msg {
  padding: .65rem .9rem;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.5;
  max-width: 85%;
  word-wrap: break-word;
}
.advisor-msg-user {
  align-self: flex-end;
  background: var(--accent-deep);
  color: white;
  border-bottom-right-radius: 4px;
}
.advisor-msg-assistant {
  align-self: flex-start;
  background: var(--bg-3);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.advisor-msg-new {
  animation: advisor-msg-in .25s ease;
}
@keyframes advisor-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.advisor-thinking {
  display: flex;
  gap: .25rem;
  padding: .85rem 1rem;
}
.advisor-thinking span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: advisor-blink 1.2s infinite ease-in-out;
}
.advisor-thinking span:nth-child(2) { animation-delay: .2s; }
.advisor-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes advisor-blink {
  0%, 80%, 100% { opacity: .3; }
  40% { opacity: 1; }
}

.advisor-panel-form {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.advisor-panel-form input[type=text] {
  flex: 1;
  padding: .65rem .85rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: inherit;
  font-size: .88rem;
  margin: 0;
}
.advisor-panel-form input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 154, 210, 0.12);
}
.advisor-panel-form button {
  width: 38px; height: 38px;
  background: var(--accent-deep);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.advisor-panel-form button:hover { background: var(--accent-deep); }
.advisor-panel-form button:disabled { opacity: .5; cursor: not-allowed; }

.advisor-panel-foot {
  padding: .5rem 1rem .8rem;
  text-align: center;
  margin: 0;
  font-size: .75rem;
}
.advisor-panel-foot a {
  color: var(--accent);
  text-decoration: none;
}

.advisor-locked {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* On small screens, panel takes nearly the whole screen */
@media (max-width: 500px) {
  .advisor-panel {
    bottom: 0.5rem;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-height: 80vh;
  }
  .advisor-bubble {
    bottom: 1rem;
    right: 1rem;
    width: 50px; height: 50px;
  }
}

/* ============================================================
   2026-05-29 HOTFIX — force modal visibility above everything
   ============================================================ */
.modal {
  z-index: 9999 !important;
}
.modal.open {
  display: flex !important;
}
.modal-inner {
  z-index: 10000;
  position: relative;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   RESPONSIVE / MOBILE SWEEP — 2026-05-29
   ============================================================ */

/* ===== Mobile Bottom Nav (hidden on desktop) ===== */

.bottom-nav {
  display: none;     /* shown only on mobile */
}

@media (max-width: 899px) {
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(20, 30, 50, 0.06);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0));
    z-index: 25;
    /* Avoid stretching too wide on landscape phones */
    min-height: 60px;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* Hide bottom nav when sidebar is open on mobile — avoids visual overlap */
  body.sidebar-open .bottom-nav {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .bottom-nav > a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .35rem .25rem;
    text-decoration: none;
    color: var(--ink-faint);
    font-size: .68rem;
    font-weight: 500;
    min-height: 44px;        /* touch target */
    transition: color .15s ease;
  }
  .bottom-nav > a:hover,
  .bottom-nav > a:focus { color: var(--accent); text-decoration: none; }
  .bottom-nav > a.active { color: var(--accent-deep); }
  .bottom-nav > a.active svg { stroke-width: 2.5; }

  /* The raised central + button */
  .bottom-nav-add {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent-deep);
    color: white;
    border: 3px solid var(--bg-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(29, 154, 210, 0.4);
    margin-top: -28px;       /* raises above the bar */
    transition: transform .15s ease, box-shadow .15s ease;
    padding: 0;
  }
  .bottom-nav-add:active {
    transform: scale(.92);
    box-shadow: 0 2px 8px rgba(29, 154, 210, 0.3);
  }

  /* Push main content up so bottom nav doesn't cover the last row */
  .main {
    padding-bottom: 7rem;
  }

  /* Move floating advisor bubble up so it doesn't collide with the + button */
  .advisor-bubble {
    bottom: 5.5rem !important;
  }
  .advisor-panel {
    bottom: 5.5rem !important;
    max-height: calc(100vh - 7rem) !important;
  }
}

/* ===== Full-screen modals on mobile ===== */

@media (max-width: 699px) {
  .modal {
    padding: 0 !important;
    align-items: stretch;
    justify-content: stretch;
  }
  .modal-inner {
    width: 100% !important;
    max-width: 100% !important;
    /* Use dvh so iOS Safari's address bar doesn't push content out of view.
       Fallback to vh for older browsers. min-height instead of height so
       short modals (success screens) don't stretch awkwardly. */
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto;
    padding: 1.25rem 1rem !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)) !important;
  }
  /* Bigger, more prominent close button on mobile full-screen */
  .modal-inner .modal-head button.x,
  .modal-inner .advisor-panel-close,
  .modal-inner header button.x {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    background: var(--bg-3);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  /* Mobile modal header: padded edge-to-edge feel without breaking sticky */
  .modal-inner > .modal-head {
    position: sticky;
    top: -1.25rem;       /* offset matches parent padding-top */
    background: var(--bg-2);
    z-index: 2;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }
}

/* Wider modals (categories, import) get the same treatment on mobile */
@media (max-width: 699px) {
  .modal-wide .modal-inner { width: 100% !important; max-width: 100% !important; }
}

/* ===== Transaction tables → stacked cards on narrow screens =====
   Scoped to NOT include .import-preview-table (different column order) */

@media (max-width: 599px) {
  .tx-table:not(.import-preview-table) { display: block; }
  .tx-table:not(.import-preview-table) thead { display: none; }
  .tx-table:not(.import-preview-table) tbody,
  .tx-table:not(.import-preview-table) tr { display: block; }
  .tx-table:not(.import-preview-table) tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "cat amt"
      "note amt"
      "date btn";
    gap: .25rem .75rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
  }
  .tx-table:not(.import-preview-table) tr:last-child { border-bottom: none; }
  .tx-table:not(.import-preview-table) td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .tx-table:not(.import-preview-table) td:nth-child(1) { grid-area: date; color: var(--ink-faint); font-size: .78rem; }
  .tx-table:not(.import-preview-table) td:nth-child(2) { grid-area: cat; }
  .tx-table:not(.import-preview-table) td:nth-child(3) { grid-area: note; font-size: .9rem; }
  .tx-table:not(.import-preview-table) td:nth-child(4) {
    grid-area: amt;
    text-align: right !important;
    align-self: center;
    font-size: 1.05rem;
    font-weight: 600;
  }
  .tx-table:not(.import-preview-table) td:nth-child(5) {
    grid-area: btn;
    justify-self: end;
    align-self: center;
  }
  .tx-table:not(.import-preview-table) tr:hover td { background: transparent !important; }

  /* Import preview: just allow horizontal scroll within the wrapper */
  .import-preview-table { font-size: .8rem; }
  .import-preview-wrap { overflow-x: auto; }
}

/* ===== Topbar on mobile: don't overflow ===== */

@media (max-width: 699px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: .5rem;  /* leave room for hamburger button up top */
  }
  .topbar > div:last-child {
    width: 100%;
    justify-content: space-between;
  }
  .page-title { font-size: 1.4rem; }
}

/* ===== KPI grid: better stacking on small screens ===== */

@media (max-width: 599px) {
  .kpi-row {
    grid-template-columns: 1fr 1fr;  /* 2-up on phones, not single column */
    gap: .75rem;
  }
  .kpi {
    padding: 1.1rem;
  }
  .kpi-value {
    font-size: 1.4rem;
  }
}
@media (max-width: 399px) {
  .kpi-row {
    grid-template-columns: 1fr;       /* single column on very narrow */
  }
}

/* ===== Budget summary numbers: smaller on phones ===== */

@media (max-width: 699px) {
  .bs-numbers {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .bs-value { font-size: 1.4rem; }
  .bs-label { font-size: .65rem; }
}
@media (max-width: 399px) {
  .bs-numbers { grid-template-columns: 1fr; }
}

/* ===== Budget action buttons stack on mobile ===== */

@media (max-width: 599px) {
  .bs-actions {
    flex-direction: column;
  }
  .bs-actions > * {
    width: 100%;
    text-align: center;
  }
}

/* ===== Chart cards: full width on mobile ===== */

@media (max-width: 899px) {
  .charts {
    grid-template-columns: 1fr !important;
  }
  .chart-card.span-2 {
    grid-column: auto !important;
  }
}

/* ===== Form rows: stack labels on mobile ===== */

@media (max-width: 599px) {
  .row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Touch target audit: bump small icons to at least 44px on mobile ===== */

@media (max-width: 699px) {
  .edit-btn,
  .month-arrow,
  .privacy-toggle,
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===== Cards: less padding on mobile to save space ===== */

@media (max-width: 599px) {
  .card { padding: 1.25rem 1rem; }
  .budget-summary { padding: 1.25rem 1rem; }
  .main { padding-left: 1rem; padding-right: 1rem; }
}

/* ===== Loading skeleton shimmer ===== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-3) 0%,
    var(--bg-2) 50%,
    var(--bg-3) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Honor user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--bg-3);
  }
}
.skeleton-line { height: 14px; margin: .5rem 0; }
.skeleton-line-lg { height: 28px; margin: .65rem 0; }
.skeleton-block { height: 80px; }

/* Chart skeleton sizing */
.chart-skeleton {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-sm);
}
.chart-wrap {
  position: relative;
  min-height: 240px;
}

/* ============================================================
   2026-06-01 DEFENSIVE — ensures sidebar toggle + section layout
   Specific user-reported bugs:
   1. Goals card rendering inline with charts
   2. Hamburger click not toggling sidebar
   ============================================================ */

/* 1. Force the dashboard Goals section to be its own full-width block.
   Use multiple selectors so the rule wins no matter what else cascades. */
.main > section.card,
section.card,
section.budget-summary {
  display: block !important;
  width: 100% !important;
  clear: both;
}

/* 2. Hamburger toggle: re-affirm cascade with !important so cached/conflicting
   rules don't override. On mobile, must always be visible + clickable. */
@media (max-width: 899px) {
  .hamburger {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  /* Sidebar slide-in must work — re-affirm */
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
  .sidebar {
    /* Re-affirm initial off-screen position */
    transform: translateX(-100%);
  }
  body.sidebar-open .sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Desktop: sidebar always visible */
@media (min-width: 900px) {
  .sidebar { transform: translateX(0) !important; }
  .hamburger { display: none !important; }
}

/* ============================================================
   2026-06-01 BRUTE-FORCE — last resort for reported bugs
   These rules use IDs and !important to override anything else.
   If the user still sees the bugs after this lands, it means the
   CSS file on the server is older than this one.
   ============================================================ */

/* GOALS CARD: must always be a full-width block, never inline/grid/flex item */
html body.app main.main section.card {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: static !important;
  grid-column: 1 / -1 !important;  /* if accidentally inside a grid, span full row */
  clear: both !important;
}

/* And make absolutely sure the charts section closes before whatever's after it */
html body.app main.main section.charts + * {
  display: block !important;
  width: 100% !important;
  margin-top: 1.25rem !important;
}

/* HAMBURGER: mobile <900px must show; desktop must hide. No exceptions. */
@media (max-width: 899px) {
  html body.app button.hamburger,
  html body button#hamburger {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 30 !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-card) !important;
  }
  html body.app button.hamburger > span,
  html body button#hamburger > span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: var(--ink) !important;
    border-radius: 2px !important;
  }
  /* When the menu is open, sidebar must slide in */
  html body.app.sidebar-open aside.sidebar,
  html body.sidebar-open aside.sidebar {
    transform: translateX(0) !important;
  }
  /* And backdrop must be visible */
  html body.app.sidebar-open #sidebarBackdrop,
  html body.sidebar-open #sidebarBackdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 900px) {
  html body.app button.hamburger,
  html body button#hamburger {
    display: none !important;
  }
  html body.app aside.sidebar {
    transform: translateX(0) !important;
  }
}

/* Make sure clicks on hamburger spans bubble to the button */
.hamburger span { pointer-events: none; }

/* ============================================================
   2026-06-02 — Dashboard Goals card guaranteed standalone
   Uses a uniquely-named class instead of :has() which has uneven support.
   ============================================================ */
section.dash-goals-section {
  display: block !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;   /* in case it ever lands inside a grid */
  clear: both !important;
  position: static !important;
  float: none !important;
  margin-top: 1.25rem !important;
}

/* ============================================================
   2026-06-02 NUCLEAR — Goals card MUST occupy its own row.
   No exceptions, no inheritance, no overlap.
   ============================================================ */

/* The Goals section is forcibly removed from any flow that could overlap charts */
.dash-goals-section,
section.dash-goals-section,
.main .dash-goals-section,
.main section.dash-goals-section,
body .main .dash-goals-section,
html body main.main section.dash-goals-section {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  float: none !important;
  clear: both !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 5 !important;     /* sits above anything else */
  /* Background + padding override in case .card rules are missing */
  background: var(--bg-2) !important;
  border: 1px solid rgba(20,30,50,0.08) !important;
  border-radius: 16px !important;
  padding: 1.75rem !important;
  box-shadow: 0 1px 3px rgba(20,30,50,0.04), 0 1px 2px rgba(20,30,50,0.06) !important;
}

/* The charts grid MUST end before the next section starts.
   Forcibly close grid context so nothing leaks. */
.charts,
section.charts {
  contain: layout !important;
  isolation: isolate !important;
}

/* Belt-and-suspenders: chart-wrap must NOT exceed its declared height.
   Prevents canvas from spilling into the Goals card below. */
.chart-wrap {
  overflow: hidden !important;
  max-height: 280px !important;
  contain: layout size !important;
}

/* Force the line chart card (span-2) to clear properly before next sibling */
.chart-card.span-2 {
  margin-bottom: 0 !important;
}
section.charts + section {
  margin-top: 1.5rem !important;
  clear: both !important;
}

/* ============================================================
   2026-06-02 SATOSHI TYPOGRAPHIC PASS
   Brings the Metoric / DeliFin feel to the entire app.
   ============================================================ */

/* Base body: Satoshi at slightly tighter tracking */
body, html {
  font-family: var(--sans) !important;
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv02' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* HEADINGS — big, confident, slightly negative tracking like Metoric */
.page-title,
h1.page-title {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  color: var(--ink);
}
@media (min-width: 900px) {
  .page-title { font-size: 2.25rem !important; }
}

/* Small caps eyebrows */
.month-label,
.kpi-label,
.bs-label,
.side-nav-section {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
}

/* KPI VALUES — the star of the dashboard. Big, bold, tabular-nums */
.kpi-value {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
@media (min-width: 700px) {
  .kpi-value { font-size: 30px !important; }
}
@media (min-width: 1100px) {
  .kpi-value { font-size: 32px !important; }
}

/* Budget summary big numbers — same treatment */
.bs-value {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: -0.025em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Card titles — slightly smaller, weight 600, tighter */
.card-head h2 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

/* Money displays everywhere get tabular-nums */
.kpi-value,
.kpi-sub,
.bs-value,
.bs-hint,
.tx-amt,
.tx-amount,
.bg-actual,
.bg-input,
.dash-goal-pct,
.dash-goal-meta,
.tx-table td.num,
.data-table td.num,
.import-preview-table td.num {
  font-variant-numeric: tabular-nums !important;
}

/* Goals card numbers — slightly bolder */
.dash-goal-pct {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}
.dash-goal-name {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}

/* Sidebar nav: medium weight Satoshi reads cleanest */
.side-nav a {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
}
.side-nav a.active {
  font-weight: 600 !important;
}

/* Plan badge — bold and tight */
.side-plan-name {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Brand wordmark refinements */
.brand-name {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Buttons — slightly tighter, bolder */
.btn-primary, .btn-secondary, .btn-danger {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* Hint text */
.kpi-sub, .bs-hint, .card-sub {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: var(--ink-faint) !important;
  letter-spacing: 0 !important;
}

/* Transaction lists */
.tx-cat {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.tx-note {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--ink-dim) !important;
  margin: 2px 0 0 !important;
}
.tx-amt {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

/* Override any old Fraunces references that lingered */
[style*="Fraunces"],
[style*="var(--serif)"] {
  font-family: var(--sans) !important;
}

/* Topbar greeting — bigger, bolder per Metoric/DeliFin */
.topbar .page-title {
  font-size: 2rem !important;
}
@media (max-width: 699px) {
  .topbar .page-title { font-size: 1.5rem !important; }
}

/* Tighten the kpi label tracking to match the reference more closely */
.kpi-label {
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 12px !important;
}

/* ============================================================
   2026-06-02 HAMBURGER REBUILD
   Forces visibility + click on every viewport. Highest-priority rules.

   THIS IS THE ONLY PLACE the hamburger icon's open/close (X-morph)
   animation is defined. If the animation ever needs to change speed,
   easing, or the shape it morphs into, edit it HERE — nowhere else.
   An earlier duplicate of this animation in an older block was removed
   on 2026-06-23 to prevent exactly this kind of drift.
   ============================================================ */

/* MOBILE: hamburger visible top-left, always */
@media (max-width: 899px) {
  body.app button#hamburger,
  body.app .hamburger {
    display: flex !important;
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: var(--bg-2) !important;
    border: 1px solid rgba(20,30,50,0.12) !important;
    box-shadow: 0 2px 8px rgba(20,30,50,0.10) !important;
    cursor: pointer !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    z-index: 100 !important;          /* above everything except modals */
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.app .hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--ink) !important;
    border-radius: 2px !important;
    transform-origin: center !important;
    transition: transform .32s cubic-bezier(.65,0,.35,1), opacity .22s ease !important;
  }
  body.app.sidebar-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  body.app.sidebar-open .hamburger span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  body.app.sidebar-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* Sidebar position rules */
  body.app .sidebar {
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 90 !important;            /* below hamburger so click target works even with sidebar open */
    width: 280px !important;
  }
  body.app.sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 4px 0 20px rgba(20,30,50,0.15) !important;
  }

  /* Backdrop only visible when sidebar is open */
  body.app .sidebar-backdrop {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s !important;
    z-index: 80 !important;
  }
  body.app.sidebar-open .sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* DESKTOP: hamburger hidden (sidebar is always visible) */
@media (min-width: 900px) {
  body.app button#hamburger,
  body.app .hamburger {
    display: none !important;
  }
  body.app .sidebar {
    transform: translateX(0) !important;
  }
}

/* ============================================================
   2026-06-02 SIDEBAR COLLAPSE TOGGLE (desktop)
   Click the chevron at top-right of sidebar to shrink it
   to icon-only mode. State persists in localStorage.
   ============================================================ */

/* The collapse button — sits as its own row below the brand */
.sidebar-collapse {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  padding: 0;
  margin: 0 0 1rem auto;   /* push to right edge, breathing room below */
  align-self: flex-end;
}
.sidebar-collapse:hover {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--line-strong);
}
.sidebar-collapse svg {
  display: block;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* Chevron points left («) when expanded — clicking collapses the sidebar.
   When collapsed, flip it to point right (»), signaling "click to expand." */
body.app.sidebar-collapsed .sidebar-collapse svg {
  transform: rotate(180deg);
}

/* On mobile, hide the collapse button — the hamburger handles open/close */
@media (max-width: 899px) {
  .sidebar-collapse {
    display: none !important;
  }
}

/* DESKTOP: collapsed state */
@media (min-width: 900px) {
  body.app.sidebar-collapsed .sidebar {
    width: 68px !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  /* Push main content to align with the narrower sidebar */
  body.app.sidebar-collapsed .main {
    margin-left: 68px !important;
    max-width: calc(1400px - 68px) !important;
  }

  /* Hide labels and section headers — keep just the icons */
  body.app.sidebar-collapsed .nav-label,
  body.app.sidebar-collapsed .side-nav-section,
  body.app.sidebar-collapsed .brand-name,
  body.app.sidebar-collapsed .side-plan-label,
  body.app.sidebar-collapsed .side-plan-name,
  body.app.sidebar-collapsed .side-plan-exp,
  body.app.sidebar-collapsed .su-name,
  body.app.sidebar-collapsed .su-logout {
    display: none !important;
  }

  /* Center icons in collapsed nav items */
  body.app.sidebar-collapsed .side-nav a,
  body.app.sidebar-collapsed .notif-bell {
    padding: .65rem 0 !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }
  body.app.sidebar-collapsed .nav-icon {
    margin: 0 !important;
    font-size: 1.2rem !important;
  }

  /* Plan badge: shrink to just a dot in collapsed mode */
  body.app.sidebar-collapsed .side-plan {
    padding: .5rem !important;
    margin: .5rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px;
  }
  body.app.sidebar-collapsed .side-plan::before {
    content: '✦';
    font-size: 14px;
    color: var(--accent);
  }

  /* Avatar at bottom: just the photo, no name/logout */
  body.app.sidebar-collapsed .side-user {
    padding: .5rem !important;
    justify-content: center !important;
  }
  body.app.sidebar-collapsed .side-user img {
    margin: 0 !important;
  }

  /* When collapsed, center the button in the narrow sidebar */
  body.app.sidebar-collapsed .sidebar-collapse {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }

  /* When collapsed, show icon tooltips on hover */
  body.app.sidebar-collapsed .side-nav a,
  body.app.sidebar-collapsed .notif-bell {
    position: relative;
  }
  body.app.sidebar-collapsed .side-nav a:hover::after,
  body.app.sidebar-collapsed .notif-bell:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: white;
    padding: .35rem .65rem;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
  }
}

/* FOUC prevention — when html element has the init class (set inline before <body>),
   immediately apply collapsed styles. JS then promotes to body.sidebar-collapsed
   so the rest of the rules still match. */
@media (min-width: 900px) {
  html.sidebar-collapsed-init .sidebar { width: 68px !important; padding-left: .5rem !important; padding-right: .5rem !important; }
  html.sidebar-collapsed-init .main    { margin-left: 68px !important; }
  html.sidebar-collapsed-init .nav-label,
  html.sidebar-collapsed-init .side-nav-section,
  html.sidebar-collapsed-init .brand-name,
  html.sidebar-collapsed-init .side-plan-label,
  html.sidebar-collapsed-init .side-plan-name,
  html.sidebar-collapsed-init .side-plan-exp,
  html.sidebar-collapsed-init .su-name,
  html.sidebar-collapsed-init .su-logout { display: none !important; }
}

/* ============================================================
   2026-06-02 LEGAL PAGES (privacy.php, terms.php)
   ============================================================ */
.legal-page {
  background: var(--bg);
  min-height: 100vh;
}
.legal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.legal-nav .brand {
  text-decoration: none;
  color: var(--ink);
}
.legal-back {
  color: var(--ink-dim);
  font-size: .9rem;
  text-decoration: none;
  font-weight: 500;
}
.legal-back:hover { color: var(--accent); text-decoration: none; }

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  color: var(--ink);
  line-height: 1.65;
}
.legal-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.legal-content h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  line-height: 1.1;
}
.legal-content h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 .75rem;
  color: var(--ink);
}
.legal-content p, .legal-content ul {
  font-size: 1rem;
  margin: 0 0 1rem;
  color: var(--ink-dim);
}
.legal-content ul {
  padding-left: 1.5rem;
}
.legal-content ul li {
  margin-bottom: .4rem;
}
.legal-content .lede {
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--accent-deep); }
.legal-content strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-content .legal-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: .9rem;
}

/* ============================================================
   2026-06-02 RENEWAL BANNER
   Appears on dashboard when paid plan expires in ≤7 days
   ============================================================ */
.renewal-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 14px;
  line-height: 1.45;
}
.renewal-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.renewal-banner-text {
  flex: 1;
  min-width: 0;
  color: var(--ink);
}
.renewal-banner-text strong {
  font-weight: 600;
  margin-right: .25rem;
}
.renewal-banner-btn {
  flex-shrink: 0;
  padding: .55rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
  transition: all .15s ease;
  white-space: nowrap;
}

/* "Soon" — informational only, 4-7 days */
.renewal-soon {
  background: var(--accent-light);
  border-color: rgba(29, 154, 210, 0.2);
}
.renewal-soon .renewal-banner-icon { color: var(--accent); }
.renewal-soon .renewal-banner-btn {
  background: var(--accent-deep);
  color: white;
}
.renewal-soon .renewal-banner-btn:hover { background: var(--accent-deep); }

/* "Urgent" — 1-3 days, amber warning */
.renewal-urgent {
  background: var(--warn-light);
  border-color: rgba(245, 158, 11, 0.25);
}
.renewal-urgent .renewal-banner-icon { color: var(--warn); }
.renewal-urgent .renewal-banner-btn {
  background: var(--warn);
  color: white;
}
.renewal-urgent .renewal-banner-btn:hover { background: #d97706; }

/* "Today" — same as urgent but with subtle pulse */
.renewal-today {
  background: var(--warn-light);
  border-color: rgba(245, 158, 11, 0.4);
  animation: renewal-pulse 2.5s ease-in-out infinite;
}
.renewal-today .renewal-banner-icon { color: var(--warn); }
.renewal-today .renewal-banner-btn {
  background: var(--warn);
  color: white;
}
@keyframes renewal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.1); }
}

/* "Expired" — red */
.renewal-expired {
  background: var(--bad-light);
  border-color: rgba(239, 68, 68, 0.25);
}
.renewal-expired .renewal-banner-icon { color: var(--bad); }
.renewal-expired .renewal-banner-btn {
  background: var(--bad);
  color: white;
}
.renewal-expired .renewal-banner-btn:hover { background: #dc2626; }

/* Stack on mobile */
@media (max-width: 599px) {
  .renewal-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
  }
  .renewal-banner-btn { width: 100%; text-align: center; }
}

/* ============================================================
   2026-06-02 TOASTS — small floating confirmations
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.toast {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(20,30,50,0.18), 0 2px 6px rgba(20,30,50,0.10);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
  white-space: nowrap;
  max-width: 90vw;
}
.toast-in {
  opacity: 1;
  transform: translateY(0);
}
.toast-out {
  opacity: 0;
  transform: translateY(-8px);
}
.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.toast-success {
  background: var(--ink);
}
.toast-success .toast-icon {
  background: var(--good);
  color: white;
}
.toast-error {
  background: var(--bad);
}
.toast-error .toast-icon {
  background: rgba(255,255,255,0.2);
  color: white;
}
.toast-info .toast-icon {
  background: var(--accent-deep);
  color: white;
}

/* Adjust for mobile bottom-nav so toast doesn't get covered */
@media (max-width: 899px) {
  .toast-container { bottom: 6rem; }
}

/* ============================================================
   2026-06-02 LANDING PAGE REBUILD
   Hero-split + product preview + features strip + CTA + blobs
   ============================================================ */

/* Soft animated blobs in the background */
.landing-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
  opacity: .7;
  animation: blob-float 16s ease-in-out infinite;
}
.landing-blob-1 {
  top: -10%;
  right: -8%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(29, 154, 210, 0.35), transparent 70%);
  animation-delay: 0s;
}
.landing-blob-2 {
  bottom: 20%;
  left: -10%;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 70%);
  animation-delay: -5s;
}
.landing-blob-3 {
  top: 35%;
  left: 30%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 70%);
  animation-delay: -10s;
}
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(.95); }
}

/* Override the older ::before/::after blobs from base CSS — they're now unused */
.landing::before, .landing::after { display: none !important; }

/* Nav refinements */
.nav {
  position: relative;
  z-index: 10;
  padding: 1.5rem 3rem;
  border-bottom: none;
  background: transparent;
}
.parent-link {
  font-size: .9rem;
  color: var(--ink-dim);
  text-decoration: none;
  font-weight: 500;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  transition: all .2s ease;
}
.parent-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: white;
}

/* ===== SPLIT HERO LAYOUT ===== */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem 3rem 4rem;
  position: relative;
  z-index: 2;
}
@media (min-width: 1024px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 4rem;
    padding: 4rem 3rem 5rem;
    align-items: center;
  }
}

.hero-left { max-width: 560px; }

/* Eyebrow with green dot */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 1.5rem;
  padding: .4rem .9rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20,30,50,0.04);
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  display: inline-block;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}

/* Hero title — Satoshi 900, big, tight */
.hero-title {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1.25rem;
  color: var(--ink);
}
.hero-accent {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}

.hero-sub {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 2rem;
  max-width: 52ch;
}

/* Sign-in box gets a stronger card treatment */
.signin-box {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(20,30,50,0.06), 0 2px 8px rgba(20,30,50,0.04);
  max-width: 420px;
  margin: 0 0 1.75rem;
}
.signin-head {
  margin: 0 0 1rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.signin-fine {
  margin: .85rem 0 0;
  font-size: .8rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
.signin-legal a {
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.signin-legal a:hover { color: var(--accent); }

/* Trust strip */
.trust-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: .85rem;
  color: var(--ink-dim);
}
.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.trust-icon { font-size: 1rem; }

/* ===== HERO RIGHT: animated product preview ===== */
.hero-right {
  position: relative;
  display: none;       /* mobile hidden */
}
@media (min-width: 1024px) {
  .hero-right { display: block; }
}

.hero-preview {
  position: relative;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform .6s ease;
}
.hero-preview:hover {
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}

.preview-window {
  background: white;
  border-radius: 14px;
  box-shadow:
    0 30px 60px rgba(20,30,50,0.15),
    0 10px 20px rgba(20,30,50,0.08),
    0 0 0 1px rgba(20,30,50,0.04);
  overflow: hidden;
  animation: float-up 6s ease-in-out infinite;
}
@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.preview-chrome {
  background: var(--bg-3);
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--line);
}
.chrome-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d1d5db;
}
.chrome-dot:nth-child(1) { background: #ff5f57; }
.chrome-dot:nth-child(2) { background: #ffbd2e; }
.chrome-dot:nth-child(3) { background: #28c840; }
.chrome-url {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--sans);
}

.preview-body {
  padding: 1.25rem 1.25rem 1rem;
}
.preview-topbar { margin-bottom: 1rem; }
.preview-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.preview-greet {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: .25rem 0 0;
}

.preview-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 1rem;
}
.preview-kpi {
  background: var(--bg);
  border-radius: 8px;
  padding: .65rem .75rem;
}
.preview-kpi-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .25rem;
}
.preview-kpi-value {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.preview-kpi-value.green { color: var(--good); }
.preview-kpi-value.blue  { color: var(--accent); }

.preview-chart {
  background: var(--bg);
  border-radius: 8px;
  padding: .75rem;
  margin-bottom: .75rem;
}
.preview-chart-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.preview-line {
  width: 100%;
  height: 60px;
  display: block;
}

.preview-tx-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.preview-tx-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.preview-tx-cat { flex: 1; color: var(--ink); font-weight: 500; }
.preview-tx-amt {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Floating mini-cards around the preview */
.float-card {
  position: absolute;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem 1rem;
  box-shadow: 0 10px 30px rgba(20,30,50,0.10), 0 2px 6px rgba(20,30,50,0.04);
  animation: float-up 7s ease-in-out infinite;
  animation-delay: -2s;
}
.float-card-1 {
  top: 18%;
  right: -8%;
  min-width: 140px;
}
.float-card-2 {
  bottom: 8%;
  left: -10%;
  min-width: 200px;
  animation-delay: -4s;
}
.fc-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .3rem;
}
.fc-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--accent);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.fc-value-sm {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim);
  margin: .35rem 0 0;
  font-variant-numeric: tabular-nums;
}
.fc-bar {
  width: 100%;
  height: 5px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
  margin: .25rem 0;
}
.fc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  border-radius: 999px;
  animation: fc-bar-grow 2.5s cubic-bezier(.4,0,.2,1) .4s both;
}
@keyframes fc-bar-grow {
  from { width: 0% !important; }
  to   { /* width is set inline */ }
}

/* ===== FEATURES STRIP ===== */
.features-strip {
  position: relative;
  z-index: 2;
  padding: 5rem 3rem 4rem;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.6) 100%);
  border-top: 1px solid var(--line);
}
.features-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.features-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .85rem;
  text-align: center;
}
.features-title {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
  margin: 0 0 3.5rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  border: none;
  padding: 0;
}
.feature {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(20,30,50,0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(20,30,50,0.08);
  border-color: rgba(29,154,210,0.2);
}

.feat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.feat-icon-blue  { background: var(--accent-light); color: var(--accent); }
.feat-icon-amber { background: var(--warn-light);   color: var(--warn);   }
.feat-icon-green { background: var(--good-light);   color: var(--good);   }

.feature h3 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.feature p {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}

/* ===== CTA STRIP ===== */
.cta-strip {
  position: relative;
  z-index: 2;
  padding: 5rem 3rem;
  text-align: center;
}
.cta-inner {
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  padding: 3.5rem 2rem;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(29,154,210,0.25), 0 4px 12px rgba(29,154,210,0.15);
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.cta-title {
  font-family: var(--sans);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: white;
  margin: 0 0 .65rem;
  position: relative;
}
.cta-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.88);
  margin: 0 0 1.75rem;
  position: relative;
}
.cta-btn {
  display: inline-block;
  background: white;
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 15px;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  text-decoration: none;
}

/* ===== Fade-up entrance animations ===== */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-delay { transition-delay: .2s; }

/* ===== Mobile adjustments ===== */
@media (max-width: 1023px) {
  .features-strip,
  .cta-strip { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 699px) {
  .nav { padding: 1.25rem 1.5rem; }
  .hero-split { padding: 2rem 1.5rem 3rem; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3rem) !important; }
  .features-strip { padding: 3.5rem 1.5rem 3rem; }
  .cta-strip { padding: 3rem 1.5rem; }
  .cta-inner { padding: 2.5rem 1.5rem; }
}

/* ============================================================
   2026-06-02 RECURRING TRANSACTIONS
   ============================================================ */

/* Each row in the recurring rules list */
.recurring-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: .85rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.recurring-row:last-child { border-bottom: none; }
.recurring-row-paused {
  opacity: .55;
}
.recurring-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.recurring-info {
  min-width: 0;
}
.recurring-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.recurring-note {
  font-weight: 400;
  color: var(--ink-dim);
  font-size: 13px;
}
.recurring-sub {
  margin: .15rem 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}
.recurring-amt {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.recurring-actions {
  display: flex;
  gap: .25rem;
}
.icon-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .15s ease;
}
.icon-btn:hover {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--line);
}

/* Checkbox row for "backfill" option */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  margin: 1rem 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-dim);
}
.checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Mobile: stack the recurring row */
@media (max-width: 599px) {
  .recurring-row {
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "icon info"
      "amt amt"
      "actions actions";
  }
  .recurring-icon { grid-area: icon; }
  .recurring-info { grid-area: info; }
  .recurring-amt {
    grid-area: amt;
    text-align: right;
  }
  .recurring-actions {
    grid-area: actions;
    justify-content: flex-end;
  }
}

/* A tiny ↻ badge on the dashboard recent-activity rows for tx generated by a rule */
.tx-recurring-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-deep);
  font-size: 9px;
  margin-left: .35rem;
  vertical-align: middle;
}


/* ============================================================
   2026-06-09 HOUSEHOLDS
   Privacy form rows, dashboard toggle, settings card additions
   ============================================================ */

/* Privacy preference rows in Settings */
.privacy-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line, var(--line));
}
.privacy-row:last-of-type { border-bottom: none; }

.privacy-row-label {
  flex: 1;
  min-width: 0;
}
.privacy-row-label strong {
  display: block;
  font-size: .95rem;
  color: var(--ink, var(--ink));
  font-weight: 600;
}
.privacy-row-sub {
  display: block;
  font-size: .82rem;
  color: var(--ink-faint, var(--ink-faint));
  margin-top: 2px;
}

.privacy-select {
  padding: .55rem .85rem;
  border: 1px solid var(--line, var(--line));
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--sans, system-ui);
  background: white;
  color: var(--ink, var(--ink));
  cursor: pointer;
  min-width: 200px;
}
.privacy-select:focus {
  outline: none;
  border-color: var(--accent, var(--accent));
}

.privacy-toggle {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: var(--accent, var(--accent));
}

/* Dashboard household toggle */
.household-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.1rem;
  background: var(--bg-2, var(--bg-2));
  border: 1px solid var(--line, var(--line));
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.ht-info {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.ht-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ht-avatar-fallback {
  background: var(--accent, var(--accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
}
.ht-label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ht-switch {
  display: flex;
  gap: 4px;
  background: var(--bg, var(--bg));
  padding: 3px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ht-btn {
  padding: .4rem .85rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-dim, var(--ink-dim));
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--sans, system-ui);
}
.ht-btn.ht-active {
  background: white;
  color: var(--ink, var(--ink));
  box-shadow: 0 1px 3px rgba(20, 30, 50, 0.08);
  font-weight: 600;
}

/* Mobile: stack the toggle */
@media (max-width: 599px) {
  .household-toggle {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
  }
  .ht-switch { justify-content: center; }
  .privacy-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .privacy-select { width: 100%; }
}

/* ============================================================
   2026-06-16 DASHBOARD V2
   Polished hero card, MoM pills, refined chart row, FAB
   Append to app.css OR load as separate stylesheet.
   Scoped to body.dashboard-v2 to avoid affecting other pages.
   ============================================================ */

/* ---------- Topbar v2 polish ---------- */
.dashboard-v2 .topbar-v2 .page-title {
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.025em;
}
.dashboard-v2 .topbar-v2 .month-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint, var(--ink-faint));
  margin: 0 0 4px;
}

/* ---------- DASH HERO ---------- */
.dashboard-v2 .dash-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  color: white;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent-deep, var(--accent-deep)) 0%, var(--accent, var(--accent)) 100%);
  box-shadow: 0 12px 32px rgba(29, 154, 210, 0.18);
}
.dashboard-v2 .dash-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.dashboard-v2 .dash-hero-bg::before,
.dashboard-v2 .dash-hero-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.dashboard-v2 .dash-hero-bg::before {
  top: -160px; right: -140px;
  width: 360px; height: 360px;
  background: rgba(255, 255, 255, 0.08);
}
.dashboard-v2 .dash-hero-bg::after {
  bottom: -120px; right: 60px;
  width: 220px; height: 220px;
  background: rgba(255, 255, 255, 0.05);
}

.dashboard-v2 .dash-hero-inner {
  position: relative;
  z-index: 1;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: center;
}

.dashboard-v2 .dash-hero-left {
  min-width: 0;
}

.dashboard-v2 .dash-hero-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 12px;
}

.dashboard-v2 .dash-hero-big {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  color: white;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.dashboard-v2 .dash-hero-secondary {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}

.dashboard-v2 .dash-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
}

.dashboard-v2 .dash-hero-pill,
.dashboard-v2 .dash-hero-pill-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-v2 .dash-hero-pill {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}
.dashboard-v2 .dash-hero-pill-good {
  background: rgba(110, 231, 183, 0.22);
  color: #d1fae5;
}
.dashboard-v2 .dash-hero-pill-warn {
  background: rgba(254, 215, 170, 0.22);
  color: #fed7aa;
}
.dashboard-v2 .dash-hero-pill-soft {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.dashboard-v2 .dash-hero-pill-link {
  text-decoration: none;
  transition: background 0.15s ease;
}
.dashboard-v2 .dash-hero-pill-link:hover {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

/* Right side: vertical stat list */
.dashboard-v2 .dash-hero-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dashboard-v2 .dash-hero-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.dashboard-v2 .dash-hero-stat:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dashboard-v2 .dash-hero-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.dashboard-v2 .dash-hero-stat-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin: 2px 0 0;
  font-weight: 500;
}
.dashboard-v2 .dash-hero-stat-val {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dashboard-v2 .dash-hero-stat-val-green {
  color: #6ee7b7;
}
.dashboard-v2 .dash-hero-stat-val-bad {
  color: #fee2e2;
}
.dashboard-v2 .dash-hero-big-over {
  color: #fee2e2;
}

/* ---------- Hide the old KPI row when hero is showing ---------- */
.dashboard-v2 .kpi-row { display: none; }

/* ---------- Charts row polish ---------- */
.dashboard-v2 .charts-v2 {
  margin-top: 0;
}
/* slightly bigger card padding for breathing room */
.dashboard-v2 .charts-v2 .chart-card {
  padding: 22px;
  border-radius: 18px;
}
.dashboard-v2 .charts-v2 .card-head h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.dashboard-v2 .charts-v2 .card-sub {
  font-size: 12px;
  color: var(--ink-faint, var(--ink-faint));
  font-weight: 500;
}

/* ---------- Bottom row: goals + recent activity side-by-side ---------- */
.dashboard-v2 .dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.dashboard-v2 .dash-bottom-row > .card {
  padding: 22px;
  border-radius: 18px;
}
.dashboard-v2 .dash-bottom-row .card-head {
  margin-bottom: 16px;
}
.dashboard-v2 .dash-bottom-row .card-head h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.dashboard-v2 .dash-bottom-row .card-link {
  font-size: 12px;
  color: var(--accent-deep, var(--accent-deep));
  text-decoration: none;
  font-weight: 600;
}
.dashboard-v2 .dash-bottom-row .card-link:hover {
  text-decoration: underline;
}

/* Polish the goals card rows */
.dashboard-v2 .dash-goals { display: flex; flex-direction: column; gap: 14px; }
.dashboard-v2 .dash-goal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin: 0 -12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.dashboard-v2 .dash-goal-row:hover {
  background: var(--bg, var(--bg));
}
.dashboard-v2 .dash-goal-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.dashboard-v2 .dash-goal-info {
  flex: 1;
  min-width: 0;
}
.dashboard-v2 .dash-goal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.dashboard-v2 .dash-goal-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, var(--ink));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-v2 .dash-goal-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, var(--ink));
  font-variant-numeric: tabular-nums;
}
.dashboard-v2 .dash-goal-bar {
  background: var(--bg, var(--bg-3));
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-v2 .dash-goal-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashboard-v2 .dash-goal-meta {
  font-size: 11px;
  color: var(--ink-faint, var(--ink-faint));
  margin: 7px 0 0;
  font-variant-numeric: tabular-nums;
}
.dashboard-v2 .dash-goal-meta .dim {
  color: var(--ink-faint, var(--ink-faint));
}

/* Polish the recent activity card */
.dashboard-v2 .recent-card .tx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.dashboard-v2 .recent-card .tx {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, var(--bg-3));
  position: relative;
}
.dashboard-v2 .recent-card .tx:last-child {
  border-bottom: 0;
}
.dashboard-v2 .recent-card .tx-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.dashboard-v2 .recent-card .tx-body {
  flex: 1;
  min-width: 0;
}
.dashboard-v2 .recent-card .tx-cat {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, var(--ink));
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-v2 .recent-card .tx-note {
  font-size: 12px;
  color: var(--ink-faint, var(--ink-faint));
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-v2 .recent-card .tx-meta {
  text-align: right;
  flex-shrink: 0;
  margin-right: 8px;
}
.dashboard-v2 .recent-card .tx-amt {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.dashboard-v2 .recent-card .tx-amt.pos { color: var(--good, var(--good)); }
.dashboard-v2 .recent-card .tx-amt.neg { color: var(--ink, var(--ink)); }
.dashboard-v2 .recent-card .tx-date {
  font-size: 11px;
  color: var(--ink-faint, var(--ink-faint));
  margin: 2px 0 0;
}
.dashboard-v2 .recent-card .edit-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink-faint, var(--ink-faint));
  text-decoration: none;
  transition: all 0.15s ease;
  opacity: 0;
  flex-shrink: 0;
}
.dashboard-v2 .recent-card .tx:hover .edit-btn {
  opacity: 1;
  background: var(--bg, var(--bg));
  color: var(--accent-deep, var(--accent-deep));
}

/* Touch devices have no hover, so the opacity:0 default above would make
   this button permanently invisible and untappable on phones. Force it
   visible and bump it to a proper touch target. */
@media (hover: none) {
  .dashboard-v2 .recent-card .edit-btn {
    opacity: 1;
    width: 44px;
    height: 44px;
    color: var(--accent-deep, var(--accent-deep));
  }
}

/* ============================================================
   MOBILE — Hero card stacks, charts go single column
   ============================================================ */
@media (max-width: 880px) {
  .dashboard-v2 .dash-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .dashboard-v2 .dash-hero-right {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 18px;
  }
  .dashboard-v2 .dash-bottom-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .dashboard-v2 .dash-hero-big {
    font-size: 44px;
  }
  .dashboard-v2 .dash-hero-inner {
    padding: 20px;
  }
  .dashboard-v2 .dash-hero {
    margin-bottom: 14px;
    border-radius: 18px;
  }
}
/* ============================================================
   MERGED 2026-06-21: landing-v2.css content
   This file existed separately on the server but was never
   linked in index.php — meaning .manifesto, .pricing-strip,
   and .faq-strip had ZERO styling applied. That's the real
   cause of the 'clipped text' bug: these sections rendered
   as bare unstyled HTML (full-width, no padding, no centering),
   so the page's small residual horizontal scroll became
   visible as a clipped first letter on every line.
   ============================================================ */
/* ============================================================
   2026-06-15 LANDING V2
   New styles for the refined logged-out landing page.
   Append to app.css OR load as a separate stylesheet.
   Scoped where possible to .landing-v2 to avoid colliding with
   existing .landing rules.
   ============================================================ */

/* ---------- NAV V2 ---------- */
.landing-v2 .nav-v2 {
  position: relative;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.landing-v2 .nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
.landing-v2 .nav-links a {
  color: var(--ink-dim, var(--ink-dim));
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}
.landing-v2 .nav-links a:hover { color: var(--ink, var(--ink)); }
.landing-v2 .nav-links .nav-pill {
  background: white;
  border: 1px solid var(--line, rgba(20,30,50,.08));
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--ink, var(--ink));
  font-weight: 600;
}
.landing-v2 .nav-links .nav-pill:hover {
  border-color: var(--accent, var(--accent));
  color: var(--accent-deep, var(--accent-deep));
}

.landing-v2 .nav-mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 0;
  position: relative;
}
.landing-v2 .nav-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink, var(--ink));
  margin: 5px auto;
  border-radius: 2px;
  transition: all .25s ease;
}
.landing-v2 .nav-mobile-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.landing-v2 .nav-mobile-toggle.is-active span:nth-child(2) { opacity: 0; }
.landing-v2 .nav-mobile-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO POLISH ---------- */
.landing-v2 .hero-underline {
  padding: 0 4px;
}
.landing-v2 .hero-underline::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0.06em;
  height: 0.32em;
  background: rgba(29, 154, 210, 0.22);
  border-radius: 2px;
  z-index: -1;
}

.landing-v2 .hero-sub strong {
  color: var(--ink, var(--ink));
  font-weight: 600;
}

.landing-v2 .signin-fine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.landing-v2 .signin-fine svg { color: var(--good, var(--good)); flex-shrink: 0; }

/* ---------- TRUST STRIP V2 (stat-style) ---------- */
.landing-v2 .trust-strip-v2 {
  list-style: none;
  padding: 22px 0 0;
  margin: 36px 0 0;
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--line, rgba(20,30,50,.08));
}
.landing-v2 .trust-strip-v2 li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-v2 .trust-strip-v2 .trust-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, var(--ink));
  letter-spacing: -0.02em;
  line-height: 1;
}
.landing-v2 .trust-strip-v2 .trust-lbl {
  font-size: 12px;
  color: var(--ink-faint, var(--ink-faint));
  line-height: 1.3;
}

/* ---------- MANIFESTO ---------- */
.landing-v2 .manifesto {
  padding: 80px 56px;
  background: var(--bg, var(--bg));
  position: relative;
  z-index: 2;
}
.landing-v2 .manifesto-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.landing-v2 .manifesto-eyebrow {
  font-size: 12px;
  color: var(--accent-deep, var(--accent-deep));
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.landing-v2 .manifesto-quote {
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
  color: var(--ink, var(--ink));
}
.landing-v2 .manifesto-accent {
  color: var(--accent, var(--accent));
}
.landing-v2 .manifesto-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.landing-v2 .manifesto-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, var(--accent)), var(--accent-deep, var(--accent-deep)));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.landing-v2 .manifesto-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, var(--ink));
  margin: 0;
}
.landing-v2 .manifesto-role {
  font-size: 13px;
  color: var(--ink-faint, var(--ink-faint));
  margin: 0;
}

/* ---------- FEATURE CARDS V2 (tinted gradient backgrounds) ---------- */
.landing-v2 .features-v2 .feat-v2 {
  padding: 28px;
  border-radius: 18px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.landing-v2 .features-v2 .feat-tint-blue {
  background: linear-gradient(135deg, var(--accent-light, var(--accent-light)) 0%, var(--bg-2) 60%);
  border-color: rgba(29,154,210,.18);
}
.landing-v2 .features-v2 .feat-tint-amber {
  background: linear-gradient(135deg, var(--warn-light, var(--warn-light)) 0%, var(--bg-2) 60%);
  border-color: rgba(245,158,11,.18);
}
.landing-v2 .features-v2 .feat-tint-green {
  background: linear-gradient(135deg, var(--good-light, var(--good-light)) 0%, var(--bg-2) 60%);
  border-color: rgba(16,185,129,.18);
}

/* ---------- PRICING ---------- */
.landing-v2 .pricing-strip {
  background: white;
  padding: 80px 56px;
  text-align: center;
}
.landing-v2 .pricing-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.landing-v2 .pricing-eyebrow {
  font-size: 12px;
  color: var(--accent-deep, var(--accent-deep));
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.landing-v2 .pricing-title {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  line-height: 1.1;
}
.landing-v2 .pricing-sub {
  color: var(--ink-dim, var(--ink-dim));
  font-size: 16px;
  margin: 0 0 48px;
}
.landing-v2 .price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.landing-v2 .price-card {
  background: white;
  border: 1px solid var(--line, rgba(20,30,50,.08));
  border-radius: 18px;
  padding: 32px 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.landing-v2 .price-card-featured {
  background: linear-gradient(180deg, var(--accent-deep, var(--accent-deep)) 0%, var(--accent, var(--accent)) 100%);
  color: white;
  border: none;
  position: relative;
  transform: translateY(-12px);
  box-shadow: 0 20px 48px rgba(29,154,210,.32);
}
.landing-v2 .price-card-featured .price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warn, var(--warn));
  color: white;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(245,158,11,.35);
}
.landing-v2 .price-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--ink-faint));
  margin: 0 0 14px;
}
.landing-v2 .price-card-featured .price-name { color: rgba(255,255,255,.7); }

.landing-v2 .price-amt {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1;
}
.landing-v2 .price-amt .per {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-faint, var(--ink-faint));
  margin-left: 2px;
}
.landing-v2 .price-card-featured .price-amt .per { color: rgba(255,255,255,.7); }

.landing-v2 .price-desc {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-dim, var(--ink-dim));
}
.landing-v2 .price-card-featured .price-desc { color: rgba(255,255,255,.82); }

.landing-v2 .price-list {
  list-style: none;
  padding: 20px 0 0;
  margin: 20px 0 28px;
  border-top: 1px solid var(--line, rgba(20,30,50,.06));
  font-size: 14px;
  flex: 1;
}
.landing-v2 .price-card-featured .price-list { border-top-color: rgba(255,255,255,.18); }
.landing-v2 .price-list li {
  padding: 6px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.4;
}
.landing-v2 .price-list li::before {
  content: '✓';
  color: var(--good, var(--good));
  font-weight: 700;
  flex-shrink: 0;
}
.landing-v2 .price-card-featured .price-list li::before { color: white; }

.landing-v2 .price-cta {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  background: var(--bg, var(--bg));
  color: var(--ink, var(--ink));
  border: 1px solid var(--line, rgba(20,30,50,.08));
  transition: all .15s ease;
}
.landing-v2 .price-cta:hover {
  background: var(--ink, var(--ink));
  color: white;
  border-color: var(--ink, var(--ink));
}
.landing-v2 .price-cta-featured {
  background: white;
  color: var(--accent-deep, var(--accent-deep));
  border-color: white;
}
.landing-v2 .price-cta-featured:hover {
  background: rgba(255,255,255,.92);
  color: var(--accent-deep, var(--accent-deep));
  border-color: white;
}

.landing-v2 .pricing-fine {
  margin: 44px 0 0;
  font-size: 13px;
  color: var(--ink-faint, var(--ink-faint));
}

/* ---------- FAQ ---------- */
.landing-v2 .faq-strip {
  padding: 80px 56px;
  background: var(--bg, var(--bg));
}
.landing-v2 .faq-inner {
  max-width: 720px;
  margin: 0 auto;
}
.landing-v2 .faq-eyebrow {
  font-size: 12px;
  color: var(--accent-deep, var(--accent-deep));
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 14px;
  text-align: center;
}
.landing-v2 .faq-title {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 44px;
  line-height: 1.1;
  text-align: center;
}
.landing-v2 .faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.landing-v2 .faq-item {
  background: white;
  border: 1px solid var(--line, rgba(20,30,50,.08));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.landing-v2 .faq-item[open] {
  border-color: rgba(29,154,210,.25);
  box-shadow: 0 4px 16px rgba(20,30,50,.04);
}
.landing-v2 .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, var(--ink));
  list-style: none;
  user-select: none;
}
.landing-v2 .faq-item summary::-webkit-details-marker { display: none; }
.landing-v2 .faq-chevron {
  font-size: 22px;
  font-weight: 400;
  color: var(--accent, var(--accent));
  transition: transform .2s ease;
  flex-shrink: 0;
}
.landing-v2 .faq-item[open] .faq-chevron {
  transform: rotate(45deg);
}
.landing-v2 .faq-body {
  padding: 0 24px 22px;
  color: var(--ink-dim, var(--ink-dim));
  line-height: 1.6;
  font-size: 15px;
}
.landing-v2 .faq-body p {
  margin: 0 0 12px;
}
.landing-v2 .faq-body p:last-child { margin-bottom: 0; }

.landing-v2 .faq-more {
  text-align: center;
  font-size: 14px;
  color: var(--ink-dim, var(--ink-dim));
  margin: 40px 0 0;
}
.landing-v2 .faq-more a {
  color: var(--accent-deep, var(--accent-deep));
  text-decoration: none;
  font-weight: 600;
}
.landing-v2 .faq-more a:hover { text-decoration: underline; }

/* ---------- FINAL CTA V2 ---------- */
.landing-v2 .cta-strip-v2 {
  background: linear-gradient(135deg, var(--accent-deep, var(--accent-deep)) 0%, var(--accent, var(--accent)) 100%);
  padding: 76px 56px;
  text-align: center;
  color: white;
}
.landing-v2 .cta-strip-v2 .cta-title {
  color: white;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  line-height: 1.1;
}
.landing-v2 .cta-strip-v2 .cta-sub {
  color: rgba(255,255,255,.92);
  font-size: 17px;
  margin: 0 0 32px;
}
.landing-v2 .cta-strip-v2 .cta-btn-v2 {
  background: white;
  color: var(--accent-deep, var(--accent-deep));
  padding: 16px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-v2 .cta-strip-v2 .cta-btn-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}

/* ---------- FOOTER V2 ---------- */
.landing-v2 .foot-v2 {
  background: #0d1828;
  color: var(--ink-faint, var(--ink-faint));
  padding: 44px 56px;
}
.landing-v2 .foot-v2 .foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.landing-v2 .foot-v2 .foot-brand-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-v2 .foot-v2 .foot-brand {
  font-weight: 700;
  color: white;
  font-size: 15px;
}
.landing-v2 .foot-v2 .foot-tag {
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.landing-v2 .foot-v2 .foot-links {
  display: flex;
  gap: 22px;
}
.landing-v2 .foot-v2 .foot-links a {
  color: var(--ink-faint, var(--ink-faint));
  text-decoration: none;
  font-size: 14px;
  transition: color .15s ease;
}
.landing-v2 .foot-v2 .foot-links a:hover { color: white; }
.landing-v2 .foot-v2 .foot-copy {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
  margin-top: 8px;
}

/* ============================================================
   MOBILE (≤ 880px)
   ============================================================ */
@media (max-width: 880px) {
  .landing-v2 .nav-v2 { padding: 14px 20px; }
  .landing-v2 .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    box-shadow: 0 12px 24px rgba(20,30,50,.08);
    border-top: 1px solid var(--line, rgba(20,30,50,.08));
  }
  .landing-v2 .nav-links.nav-links-open { display: flex; }
  .landing-v2 .nav-links a {
    padding: 14px 22px;
    width: 100%;
    border-bottom: 1px solid var(--line, rgba(20,30,50,.05));
  }
  .landing-v2 .nav-links .nav-pill {
    border: none;
    background: var(--accent, var(--accent));
    color: white;
    border-radius: 0;
    text-align: center;
    margin: 6px 0 0;
  }
  .landing-v2 .nav-mobile-toggle { display: block; }

  .landing-v2 .trust-strip-v2 {
    gap: 18px;
    flex-wrap: wrap;
  }
  .landing-v2 .trust-strip-v2 li { min-width: 80px; }

  .landing-v2 .manifesto,
  .landing-v2 .pricing-strip,
  .landing-v2 .faq-strip,
  .landing-v2 .cta-strip-v2,
  .landing-v2 .foot-v2 {
    padding-left: 22px;
    padding-right: 22px;
  }

  .landing-v2 .price-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .landing-v2 .price-card-featured { transform: none; }

  .landing-v2 .foot-v2 .foot-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .landing-v2 .foot-v2 .foot-links { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 599px) {
  .landing-v2 .manifesto-quote { font-size: 20px; }
  .landing-v2 .price-card { padding: 26px 22px; }
  .landing-v2 .price-amt { font-size: 36px; }
  .landing-v2 .faq-item summary { font-size: 15px; padding: 18px 20px; }
  .landing-v2 .faq-body { padding: 0 20px 20px; font-size: 14px; }
}

/* ============================================================
   2026-06-25 LUCIDE ICONS
   Replaces emoji (category/goal icons) and plain Unicode glyphs
   (sidebar nav) with real Lucide SVG icons. See includes/icons.php
   for the emoji-to-icon-name mapping. Lucide renders an <svg> in
   place of the <i data-lucide="..."> placeholder, so these rules
   target the resulting svg directly rather than needing new classes
   threaded through every template.
   ============================================================ */

.nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
  stroke-width: 2;
}

.tx-icon svg,
.bg-icon svg,
.cat-row-icon svg,
.dash-goal-icon svg,
.goal-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.1;
  flex-shrink: 0;
}

/* Fallback emoji (any custom icon a user typed that has no Lucide
   mapping) still renders as plain text inside these same containers —
   no extra rule needed, htmlspecialchars output behaves like before. */

/* ============================================================
   2026-06-26 DARK MODE
   Activated via <html data-theme="dark">, set server-side from the
   user's saved preference (zero flash) and toggleable instantly via
   JS in Settings without a page reload.

   Every value below was checked against WCAG AA contrast minimums
   (4.5:1 normal text, 3:1 large text / UI components / icons) using
   the existing brand palette as a starting point — not a naive
   "invert everything" pass. See the project notes for the exact
   ratios verified during implementation.

   Button backgrounds intentionally keep --accent-deep unchanged
   between themes (it already passes white-text contrast and is
   visible against both light and dark page backgrounds). Only
   --accent itself is brightened here, since it's used for text,
   icons, borders, and focus rings directly against the page
   background — a different contrast requirement than a solid
   button fill.
   ============================================================ */

[data-theme="dark"] {
  --bg:          #0f1620;
  --bg-2:        #161d29;
  --bg-3:        #1f2733;
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink:         #eef1f6;
  --ink-dim:     #aab4c4;
  --ink-faint:   #7c879c;

  --accent:       #3fb3e0;  /* brightened — text/icon/border use, reads against dark bg */
  --accent-light: #173347;  /* dark equivalent of the pastel-blue chart-fill / active-nav bg */
  --accent-deep:  #006baf;  /* unchanged — already passes white-text + dark-bg visibility */
  --accent-2:     #fbbf24;

  --good:        #34d399;
  --good-light:  #113328;
  --good-text:   #34d399;  /* same as --good — already passes AA on --good-light */
  --bad:         #f87171;
  --bad-light:   #3a1517;
  --bad-text:    #f87171;  /* same as --bad — already passes AA on --bad-light */
  --warn:        #fbbf24;
  --warn-light:  #3a2c0d;
  --warn-text:   #fbbf24;  /* same as --warn — already passes AA on --warn-light */

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-elev: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ---------- Universal focus-visible fallback ----------
   Existing per-element :focus rules (mostly border-color: var(--accent))
   still apply on top of this and already inherit the brightened accent
   above automatically. This just guarantees every interactive element —
   including ones with no explicit focus style — gets a clear, visible,
   theme-aware ring when navigating by keyboard. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Universal disabled-state fallback ----------
   Existing more-specific rules (e.g. .btn-primary:disabled) still win
   by CSS specificity; this just fills the gap for anything else. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Theme transition smoothing ----------
   Makes the instant toggle feel like a soft cross-fade rather than a
   jarring snap, without adding any transition to things that animate
   for other reasons (transforms, etc. are unaffected). */
body.app,
body.landing-v2 {
  transition: background-color .25s ease, color .25s ease;
}
.card, .modal-inner, .sidebar, .topbar, .price-card,
.faq-item, .feature, .dash-bottom-row > .card {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ---------- Appearance: theme segmented control ---------- */
.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.theme-row-label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}
.theme-switch {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-option:hover {
  color: var(--ink);
}
.theme-option.active {
  background: var(--bg-2);
  color: var(--accent-deep);
  box-shadow: var(--shadow-card);
}
.theme-option svg {
  flex-shrink: 0;
}

/* ============================================================
   2026-06-27 BUDGET PAGE V2
   At-a-glance summary strip, status-pill category rows sorted by
   status, and a smooth expand/collapse for the inline transaction
   list (previously an instant snap via the hidden attribute).
   ============================================================ */

/* ---------- At-a-glance summary strip ---------- */
.glance-strip {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.glance-card {
  background: var(--bg-2);
  border-radius: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
}
.glance-card.glance-card-alert {
  border-color: var(--bad);
}
.glance-hero {
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
  border: none;
  color: white;
}
.glance-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
.glance-hero .glance-label { color: rgba(255, 255, 255, 0.72); }
.glance-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.glance-hero .glance-val { color: white; }
.glance-val.glance-good { color: var(--good); }
.glance-val.glance-watch { color: var(--warn); }
.glance-val.glance-over { color: var(--bad); }
.glance-sub {
  font-size: 11px;
  color: var(--ink-faint);
  margin: 4px 0 0;
}
.glance-hero .glance-sub { color: rgba(255, 255, 255, 0.65); }
.glance-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bad-light);
  color: var(--bad-text);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 6px;
}

/* ---------- Status pills ---------- */
.status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.status-pill-over  { background: var(--bad-light);  color: var(--bad-text); }
.status-pill-watch { background: var(--warn-light); color: var(--warn-text); }
.status-pill-good  { background: var(--good-light); color: var(--good-text); }

/* ---------- Category row: tinted background by status ---------- */
.budget-row-over {
  background: linear-gradient(135deg, var(--bad-light) 0%, var(--bg-2) 60%);
  border-color: rgba(239, 68, 68, 0.3);
}
.budget-row-watch {
  background: linear-gradient(135deg, var(--warn-light) 0%, var(--bg-2) 60%);
  border-color: rgba(245, 158, 11, 0.25);
}

/* ---------- Redesigned row head layout ---------- */
.bg-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bg-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bg-name-row .bg-name {
  flex: none;
}
.bg-pct {
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  min-width: 44px;
  text-align: right;
}
.bg-pct-over  { color: var(--bad); }
.bg-pct-watch { color: var(--warn); }
.bg-pct-good  { color: var(--good); }

/* ---------- Smooth expand/collapse (replaces the old [hidden] snap) ---------- */
.bg-tx-list {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              margin-top 0.3s ease,
              padding 0.3s ease;
}
.budget-row.is-expanded .bg-tx-list {
  max-height: 2000px;
  margin-top: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  opacity: 1;
}
.budget-row.is-expanded .bg-toggle-icon {
  transform: rotate(180deg);
}

/* ---------- Goals page: status-tinted cards (mirrors budget rows) ---------- */
.goal-card-over {
  background: linear-gradient(135deg, var(--bad-light) 0%, var(--bg-2) 60%);
  border-color: rgba(239, 68, 68, 0.3);
}
.goal-card-watch {
  background: linear-gradient(135deg, var(--warn-light) 0%, var(--bg-2) 60%);
  border-color: rgba(245, 158, 11, 0.25);
}
.goal-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Budget v2 row: mobile accommodation ----------
   The redesigned row adds a status pill, bar, and pct readout that
   the old 3-element row never needed to fit on a narrow screen. */
@media (max-width: 599px) {
  .bg-head {
    flex-wrap: wrap;
  }
  .bg-name-wrap {
    flex-basis: 100%;
    order: 1;
  }
  .bg-icon {
    order: 0;
  }
  .bg-pct {
    order: 2;
    margin-left: auto;
  }
  .bg-toggle-icon {
    order: 3;
  }
  .glance-strip {
    grid-template-columns: 1fr 1fr;
  }
  .glance-hero {
    grid-column: 1 / -1;
  }
}

/* ---------- Compact status chips (replaces the earlier glance-strip,
   which duplicated the existing .budget-summary card) ---------- */
.status-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.status-chip-over  { background: var(--bad-light);  color: var(--bad-text); }
.status-chip-watch { background: var(--warn-light); color: var(--warn-text); }
.status-chip-good  { background: var(--good-light); color: var(--good-text); }

/* ---------- Default vs custom budget hint ---------- */
.bg-default-hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bg-default-hint-default {
  color: var(--accent-deep);
}

/* Default budget field in the category editor */
#cat-default-row input {
  width: 100%;
}

/* ============================================================
   2026-06-30 NOTIFICATION BELL
   Sidebar bell icon with unread badge + dropdown panel listing
   budget alerts, renewal reminders, and goal milestones.
   ============================================================ */

.notif-bell-wrap {
  position: relative;
  margin-top: auto;
  margin-bottom: 1rem;
}

.notif-bell {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .65rem .85rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: .9rem;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: all .15s ease;
}
.notif-bell .nav-icon {
  position: relative;
}
.notif-bell:hover {
  background: var(--bg-3);
  color: var(--ink);
}

.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bad);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--bg-2);
}
.notif-badge[hidden] {
  display: none;
}

.notif-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-elev, 0 12px 32px rgba(20, 30, 50, 0.18));
  z-index: 100;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

.notif-mark-all {
  background: transparent;
  border: none;
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.notif-mark-all:hover {
  text-decoration: underline;
}

.notif-list {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0 0 14px 14px;
}

.notif-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background 0.12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-3); }
.notif-item-unread { background: var(--accent-light); }
.notif-item-unread:hover { background: var(--accent-light); filter: brightness(0.97); }

.notif-item-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.notif-item-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.notif-item-msg {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.notif-item-time {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.notif-item-unread-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Collapsed-sidebar state: the bell becomes a plain centered icon.
   The dropdown can no longer anchor left:0 against the wrapper — that
   wrapper is now only as wide as the narrow icon rail, so the panel
   would hang off the rail with no clear visual connection to the bell.
   Instead, fly it out to the right of the rail entirely, same pattern
   already used for the nav-link hover tooltips in this state. */
body.sidebar-collapsed .notif-bell-wrap {
  display: flex;
  justify-content: center;
}
body.sidebar-collapsed .notif-panel {
  top: 0;
  bottom: auto;
  left: calc(100% + 12px);
}
body.sidebar-collapsed .notif-panel::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

@media (max-width: 899px) {
  .notif-panel {
    width: 300px;
  }
}

/* ---------- Dashboard month navigation ---------- */
.month-arrow-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* On past-month views, the page title shows the month name instead of
   the greeting — give it the same sizing as the normal greeting */
.topbar-v2 .month-nav {
  margin-bottom: 0.3rem;
}