/* ============================================================
   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;
  --bad:         #ef4444;
  --bad-light:   #fdecec;
  --warn:        #f59e0b;
  --warn-light:  #fef4e2;
  --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;
}

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: hidden; }

.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: all .15s ease;
  }
  .hamburger:hover { border-color: var(--accent); }
  .hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all .25s ease;
  }
  body.sidebar-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.sidebar-open .hamburger span:nth-child(2) { opacity: 0; }
  body.sidebar-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- 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);
  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 {
  margin-top: auto;
  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;
}

@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);
  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%;
  color: var(--ink-dim);
  font-size: 1.1rem;
  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: rgba(20,30,50,0.04);
  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);
  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);
  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);
  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);
  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: #ffffff;
  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: rgba(20,30,50,0.04);
  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: rgba(20,30,50,0.04);
  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);
  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: rgba(20,30,50,0.04);
  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);
  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);
  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);
  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);
  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);
  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);
    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: 40px;
    height: 40px;
    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 {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ===== 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%,
    #ffffff 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: #ffffff !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.
   ============================================================ */

/* 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: #ffffff !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: #1a2436 !important;
    border-radius: 2px !important;
    transition: transform .25s, opacity .15s !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; }
  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;
}

/* 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 {
    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 {
    position: relative;
  }
  body.app.sidebar-collapsed .side-nav a: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);
  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: #1a2436;
}
.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);
  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: #f0f3f8;
  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, #e3e8f0);
}
.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, #1a2436);
  font-weight: 600;
}
.privacy-row-sub {
  display: block;
  font-size: .82rem;
  color: var(--ink-faint, #9aa7bd);
  margin-top: 2px;
}

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

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

/* Dashboard household toggle */
.household-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.1rem;
  background: var(--bg-2, #ffffff);
  border: 1px solid var(--line, #e3e8f0);
  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, #1d9ad2);
  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, #1a2436);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ht-switch {
  display: flex;
  gap: 4px;
  background: var(--bg, #f4f6fb);
  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, #5d6a82);
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--sans, system-ui);
}
.ht-btn.ht-active {
  background: white;
  color: var(--ink, #1a2436);
  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%; }
}