/* ================================================================
   CASHRECAP v4 — FINTECH SaaS REDESIGN
   Indigo primary · DM Sans · Space Grotesk · Clean flat surfaces
   Primary #4F46E5 · Green #22C55E · Red #EF4444 · Amber #F59E0B
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --font-ui:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-num:'Space Grotesk','SF Pro Display',sans-serif;

  /* palette — Indigo primary */
  --blue:#4F46E5; --blue-dk:#4338CA; --blue-lt:#EEF2FF; --blue-mid:#C7D2FE;
  --green:#22C55E; --green-lt:#DCFCE7; --green-dk:#16A34A;
  --red:#EF4444;   --red-lt:#FEE2E2;
  --amber:#F59E0B; --amber-lt:#FEF3C7;
  --indigo:#6366F1; --teal:#14B8A6; --purple:#8B5CF6;

  /* surfaces */
  --bg:#F8FAFC; --card:#FFFFFF; --card2:#F8FAFC; --card3:#F1F5F9;
  --border:#E2E8F0; --bord2:#CBD5E1;
  --ink:#0F172A; --ink2:#1E293B; --ink3:#334155;
  --ink4:#64748B; --ink5:#94A3B8; --ink6:#CBD5E1;
  --danger:#EF4444; --success:#22C55E; --warning:#F59E0B;

  /* shadows — soft modern */
  --s0:0 1px 2px rgba(0,0,0,.04);
  --s1:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --s2:0 4px 12px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --s3:0 12px 32px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --sb:0 4px 14px rgba(79,70,229,.22);
  --sm:0 20px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);

  /* geometry */
  --r:12px; --rsm:8px; --rmd:10px; --rlg:16px; --rxl:20px;
  --hh:60px; --sw:240px; --rw:0px;
  --dur:.18s cubic-bezier(.4,0,.2,1);
  --durm:.28s cubic-bezier(.4,0,.2,1);
}

/* DARK MODE */
.bpp-dark {
  --bg:#0B1120; --card:#111827; --card2:#1A2332; --card3:#1E293B;
  --border:rgba(255,255,255,.08); --bord2:rgba(255,255,255,.14);
  --ink:#F1F5F9; --ink2:#E2E8F0; --ink3:#CBD5E1;
  --ink4:#94A3B8; --ink5:#64748B; --ink6:#475569;
  --blue-lt:rgba(79,70,229,.15); --blue-mid:rgba(79,70,229,.28);
  --green-lt:rgba(34,197,94,.12); --red-lt:rgba(239,68,68,.12);
  --amber-lt:rgba(245,158,11,.12);
  --s0:0 1px 2px rgba(0,0,0,.4); --s1:0 2px 8px rgba(0,0,0,.4);
  --s2:0 4px 16px rgba(0,0,0,.5); --s3:0 12px 40px rgba(0,0,0,.6);
}

/* ── BASE ─────────────────────────────────────────────────────── */
.bpp-root,.bpp-root * { box-sizing:border-box }
.bpp-root {
  font-family:var(--font-ui); color:var(--ink);
  background:var(--bg); line-height:1.5; font-size:14px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.bpp-root input,.bpp-root select,.bpp-root button,.bpp-root textarea {
  font-family:var(--font-ui);
}
/* kill the old sticky bar */
.bpp-sticky-bar { display:none !important }

/* ================================================================
   TOP HEADER NAV
   ================================================================ */
/* ================================================================
   TOP HEADER NAV  —  CashRecap redesign
   ← CashRecap + tagline  |  centre pill  |  icons →
   ================================================================ */

.bpp-nav {
  position: relative; top: auto; z-index: 10; width: 100%;
  height: var(--hh); background: var(--card);
  border-bottom: 2px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.bpp-nav-inner {
  display: flex; align-items: center;
  height: 100%; padding: 0 20px; gap: 0;
}

/* ── Left: Brand ── */
.bpp-nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0; user-select: none;
}
.bpp-nav-brand-text { display: flex; flex-direction: column; gap: 0; }
.bpp-nav-name {
  display: block; font-size: 18px; font-weight: 800;
  color: var(--ink); line-height: 1.2; letter-spacing: -.5px;
}
.bpp-nav-tagline {
  display: block; font-size: 10.5px; font-weight: 500;
  color: var(--ink5); letter-spacing: .1px; line-height: 1.3;
}

/* ── Centre: Mode pill toggle ── */
.bpp-nav-center {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.bpp-mode-toggle {
  display: inline-flex; align-items: center;
  background: var(--card2); border: 1.5px solid var(--border);
  border-radius: 50px; padding: 4px; gap: 2px;
}
.bpp-mode-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 20px; border-radius: 50px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink4); text-decoration: none; white-space: nowrap;
  border: none; background: transparent; cursor: pointer;
  transition: color .18s ease;
  line-height: 1;
}
.bpp-mode-tab svg { flex-shrink: 0; }
.bpp-mode-tab:hover:not(.bpp-mode-tab-active) { color: var(--blue); }
.bpp-mode-tab-active {
  background: var(--blue); color: #fff !important; cursor: default;
  box-shadow: 0 2px 10px rgba(63,81,181,.30);
}
.bpp-mode-tab-active svg { stroke: #fff !important; }

/* ── Right: icon buttons ── */
.bpp-nav-right {
  display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADER ICON BUTTONS — matching pill style (card2 bg, border, ink3 icon)
   !important on every property to beat WordPress/theme overrides
   ══════════════════════════════════════════════════════════════ */

/* Bell, Settings — same look as the pill container */
.bpp-root .bpp-nav-icon-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card2) !important;
  background-color: var(--card2) !important;
  border-radius: var(--rsm) !important;
  cursor: pointer !important;
  color: var(--ink3) !important;
  box-shadow: none !important;
  transition: all var(--dur) !important;
  flex-shrink: 0 !important;
  outline: none !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.bpp-root .bpp-nav-icon-btn svg,
.bpp-root .bpp-nav-icon-btn svg * {
  stroke: var(--ink3) !important;
  fill: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.bpp-root .bpp-nav-icon-btn:hover {
  background: var(--blue-lt) !important;
  background-color: var(--blue-lt) !important;
  border-color: var(--blue-mid) !important;
  color: var(--blue) !important;
}
.bpp-root .bpp-nav-icon-btn:hover svg,
.bpp-root .bpp-nav-icon-btn:hover svg * {
  stroke: var(--blue) !important;
}

/* Profile link — no underline when rendered as <a> */
.bpp-root a.bpp-nav-icon-btn { text-decoration: none !important; }

/* Profile — active/blue filled like the active pill */
.bpp-root .bpp-nav-login-btn,
.bpp-root #bpp-nav-profile {
  background: var(--blue) !important;
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
  box-shadow: var(--sb) !important;
}
.bpp-root .bpp-nav-login-btn svg,
.bpp-root .bpp-nav-login-btn svg *,
.bpp-root #bpp-nav-profile svg,
.bpp-root #bpp-nav-profile svg * {
  stroke: #fff !important;
  color: #fff !important;
}
.bpp-root .bpp-nav-login-btn:hover,
.bpp-root #bpp-nav-profile:hover {
  background: var(--blue-dk) !important;
  background-color: var(--blue-dk) !important;
  border-color: var(--blue-dk) !important;
}

/* Notification badge */
.bpp-root .bpp-notif-wrap { position: relative !important; }
.bpp-root .bpp-notif-badge {
  position: absolute !important;
  top: -5px !important; right: -5px !important;
  min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
  background: var(--red) !important;
  background-color: var(--red) !important;
  color: #fff !important;
  font-size: 9.5px !important; font-weight: 800 !important;
  border-radius: 99px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 2px solid var(--card) !important;
  line-height: 1 !important; pointer-events: none !important;
  z-index: 10 !important;
  visibility: visible !important; opacity: 1 !important;
}

/* Currency select — pill container style */
.bpp-root .bpp-select,
.bpp-root .bpp-nav-currency {
  height: 38px !important;
  padding: 0 10px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ink3) !important;
  background: var(--card2) !important;
  background-color: var(--card2) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* Dark mode toggle — same pill-matching style */
.bpp-root .bpp-theme-btn,
.bpp-root .bpp-nav-theme-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card2) !important;
  background-color: var(--card2) !important;
  border-radius: var(--rsm) !important;
  cursor: pointer !important;
  color: var(--ink3) !important;
  box-shadow: none !important;
  transition: all var(--dur) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.bpp-root .bpp-theme-btn svg,
.bpp-root .bpp-theme-btn svg *,
.bpp-root .bpp-nav-theme-btn svg,
.bpp-root .bpp-nav-theme-btn svg * {
  stroke: var(--ink3) !important;
  fill: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
}
.bpp-root .bpp-theme-btn:hover,
.bpp-root .bpp-nav-theme-btn:hover {
  background: var(--blue-lt) !important;
  background-color: var(--blue-lt) !important;
  border-color: var(--blue-mid) !important;
  color: var(--blue) !important;
}
.bpp-root .bpp-theme-btn:hover svg,
.bpp-root .bpp-theme-btn:hover svg *,
.bpp-root .bpp-nav-theme-btn:hover svg,
.bpp-root .bpp-nav-theme-btn:hover svg * {
  stroke: var(--blue) !important;
}

/* Hamburger — pill-matching style */
.bpp-root .bpp-ham {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card2) !important;
  background-color: var(--card2) !important;
  border-radius: var(--rsm) !important;
  cursor: pointer !important;
  color: var(--ink3) !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  outline: none !important;
}
.bpp-root .bpp-ham svg,
.bpp-root .bpp-ham svg * {
  stroke: var(--ink3) !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dark mode */
.bpp-dark .bpp-nav-icon-btn,
.bpp-dark .bpp-theme-btn,
.bpp-dark .bpp-nav-theme-btn,
.bpp-dark .bpp-ham {
  background: var(--card2) !important;
  background-color: var(--card2) !important;
  border-color: var(--border) !important;
  color: var(--ink3) !important;
}
.bpp-dark .bpp-nav-icon-btn svg,
.bpp-dark .bpp-nav-icon-btn svg *,
.bpp-dark .bpp-theme-btn svg,
.bpp-dark .bpp-theme-btn svg *,
.bpp-dark .bpp-nav-theme-btn svg,
.bpp-dark .bpp-nav-theme-btn svg *,
.bpp-dark .bpp-ham svg,
.bpp-dark .bpp-ham svg * {
  stroke: var(--ink3) !important;
}
.bpp-dark .bpp-select,
.bpp-dark .bpp-nav-currency {
  background: var(--card2) !important;
  background-color: var(--card2) !important;
  border-color: var(--border) !important;
  color: var(--ink3) !important;
}
.bpp-dark .bpp-notif-badge { border-color: var(--card) !important; }

/* Hamburger — always visible on mobile, hidden on desktop */
/* bpp-ham base handled in the !important block above */
/* Hide on desktop — sidebar always visible there */
@media (min-width: 1281px) {
  .bpp-root .bpp-ham { display: none !important; }
}

/* Dark overrides */
.bpp-dark .bpp-nav            { background: var(--card); border-bottom-color: var(--border); }
.bpp-dark .bpp-mode-toggle    { background: var(--card2); border-color: var(--border); }
.bpp-dark .bpp-nav-icon-btn   { background: var(--card2); border-color: var(--border); color: var(--ink4); }
.bpp-dark .bpp-nav-login-btn  { background: var(--blue-lt); border-color: var(--blue-mid); color: var(--blue); }
.bpp-dark .bpp-select,
.bpp-dark .bpp-nav-currency   { background: var(--card2); border-color: var(--border); color: var(--ink); }
.bpp-dark .bpp-theme-btn,
.bpp-dark .bpp-nav-theme-btn  { background: var(--card2); border-color: var(--border); }

/* ── Responsive ── */
@media (max-width: 1280px) {
  .bpp-ham        { display: flex; }
  .bpp-nav-center { display: none; }
  .bpp-nav-inner  { gap: 8px; }
  .bpp-sb-quick-add { display: none !important; }
  /* Settings, currency, dark mode move to sidebar on tablet/mobile */
  .bpp-nav-right #bpp-nav-settings  { display: none !important; }
  .bpp-nav-right .bpp-nav-currency  { display: none !important; }
  .bpp-nav-right .bpp-nav-theme-btn { display: none !important; }
  /* Bell + profile stay visible in header */
  .bpp-nav-right { display: flex !important; align-items: center; gap: 6px; }
  .bpp-nav-right #bpp-nav-notif     { display: flex !important; }
  .bpp-nav-right #bpp-nav-profile   { display: flex !important; }
}
@media (max-width: 599px) {
  .bpp-nav-tagline                { display: none; }
  .bpp-nav-name                   { font-size: 16px; }
  .bpp-nav-right .bpp-nav-currency{ display: none; }
  .bpp-nav-right                  { gap: 4px; }
}

/* ================================================================
   3-COLUMN SHELL
   ================================================================ */
.bpp-shell {
  display: flex;
  align-items: flex-start;
  background: var(--bg);
  padding-top: 10px;
  /* Desktop sticky: shell is viewport-height, main scrolls inside */
  height: calc(100vh - var(--hh));
  overflow: hidden;
}


/* ── LEFT SIDEBAR ─────────────────────────────────────────────── */
.bpp-sidebar {
  width:var(--sw); flex-shrink:0; background:var(--card);
  border-right:1px solid var(--border);
  border-radius: 10px 10px 0 0;
  margin-left: 10px;
  /* Sticky on desktop: shell is fixed height, sidebar fills it */
  position: sticky; top: 0; align-self: stretch;
  height: 100%;
  overflow-y:auto; display:flex; flex-direction:column;
  scrollbar-width:none; z-index:200; transition:left var(--durm);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.bpp-sidebar::-webkit-scrollbar { display:none }
.bpp-sidebar-body { padding:10px 10px 8px; flex:1; overflow-y:auto; scrollbar-width:none; }
.bpp-sidebar-body::-webkit-scrollbar { display:none; }
.bpp-overlay { display:none }

/* ── Quick Add Button ── */
.bpp-sb-quick-add {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px 12px; margin-bottom:12px;
  background:#4F46E5; color:#fff;
  border:none; border-radius:10px; cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.1px;
  transition:background var(--dur), transform var(--dur), box-shadow var(--dur);
  box-shadow:0 2px 10px rgba(79,70,229,.35);
}
.bpp-sb-quick-add:hover { background:#4338CA; transform:translateY(-1px); box-shadow:0 4px 16px rgba(79,70,229,.45); }
.bpp-sb-quick-add:active { transform:translateY(0); }
.bpp-sb-quick-add svg { stroke:#fff; flex-shrink:0; }
/* ── Nav Groups ── */
.bpp-nav-group { margin-bottom:2px; }

.bpp-nav-grp-hd {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:7px 10px 5px;
  background:none; border:none; cursor:pointer;
  font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink5); text-align:left;
  transition:color var(--dur);
}
.bpp-nav-grp-hd:hover { color:var(--ink3); }

.bpp-grp-chevron {
  stroke:currentColor; flex-shrink:0; transition:transform .2s ease;
}
.bpp-grp-open .bpp-grp-chevron { transform:rotate(0deg); }
.bpp-nav-group.bpp-grp-closed .bpp-grp-chevron { transform:rotate(-90deg); }

.bpp-nav-grp-body {
  overflow:hidden;
  max-height:500px;
  transition:max-height .25s ease, opacity .2s ease;
  opacity:1;
}
.bpp-nav-group.bpp-grp-closed .bpp-nav-grp-body {
  max-height:0;
  opacity:0;
}

/* ── Nav Links ── */
.bpp-nav-link {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px 8px 12px; border-radius:8px;
  cursor:pointer; color:var(--ink4); font-size:13px; font-weight:500;
  text-decoration:none; border:none; background:none;
  width:100%; text-align:left;
  transition:background var(--dur), color var(--dur), border-color var(--dur);
  line-height:1; border-left:3px solid transparent; margin-bottom:1px;
  white-space:nowrap; overflow:hidden;
}
.bpp-nav-link:hover {
  background:#EEF2FF; color:#4F46E5;
  border-left-color:#C7D2FE;
}
.bpp-nav-link.bpp-active {
  background:#EEF2FF; color:#4F46E5; font-weight:700;
  border-left-color:#4F46E5;
}
.bpp-nav-link svg {
  width:16px; height:16px; stroke:currentColor; fill:none;
  flex-shrink:0; stroke-width:2; transition:stroke var(--dur); min-width:16px;
}
.bpp-nav-logout { color:var(--danger) !important; }
.bpp-nav-logout:hover { background:#FEF2F2 !important; border-left-color:#EF4444 !important; color:#EF4444 !important; }

/* ── Sidebar user profile card ── */
.bpp-sb-user-card {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #EEF2FF, #F0FDF4);
  border: 1px solid #C7D2FE;
  border-radius: 10px;
  cursor: default;
}
.bpp-sb-user-avatar {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4F46E5, #2563EB);
  color: #fff;
  font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.bpp-sb-user-info {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; min-width: 0;
}
.bpp-sb-user-name {
  font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bpp-sb-user-email {
  font-size: 11px; color: var(--ink5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bpp-sb-user-type {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  color: #4F46E5;
  background: #EEF2FF; border: 1px solid #C7D2FE;
  padding: 1px 7px; border-radius: 99px;
  display: inline-block; margin-top: 2px; width: fit-content;
}
/* Hide card in collapsed sidebar */
.bpp-sidebar.bpp-sb-collapsed .bpp-sb-user-card { display: none !important; }
/* Dark mode */
.bpp-dark .bpp-sb-user-card {
  background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(37,99,235,.08));
  border-color: rgba(79,70,229,.25);
}
.bpp-dark .bpp-sb-user-type { background: rgba(79,70,229,.2); border-color: rgba(79,70,229,.3); }

/* ── Collapse toggle button (desktop only) ── */
.bpp-sb-collapse-btn {
  display: none !important;
}

/* ── Collapsed sidebar (80px, icons only) ── */
.bpp-sidebar.bpp-sb-collapsed { width:68px !important; min-width:68px !important; }
.bpp-sidebar.bpp-sb-collapsed .bpp-sb-lbl,
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-grp-hd .bpp-grp-label,
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-grp-hd .bpp-grp-chevron,
.bpp-sidebar.bpp-sb-collapsed .bpp-priv-note span,
.bpp-sidebar.bpp-sb-collapsed .bpp-sb-brand-text,
.bpp-sidebar.bpp-sb-collapsed .bpp-sb-user-card,
.bpp-sidebar.bpp-sb-collapsed .bpp-sb-income-type { display:none !important; }
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-grp-body { max-height:500px !important; opacity:1 !important; }
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-grp-hd { justify-content:center; padding:6px 0; }
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-link { justify-content:center; padding:9px 0; border-left-color:transparent !important; gap:0; }
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-link.bpp-active { background:#EEF2FF; }
.bpp-sidebar.bpp-sb-collapsed .bpp-sb-quick-add { padding:10px 0; }
.bpp-sidebar.bpp-sb-collapsed .bpp-sidebar-body { padding:10px 8px; }
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-link:hover::after {
  content:attr(title);
  position:absolute; left:76px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:#fff;
  padding:5px 10px; border-radius:6px;
  font-size:12px; font-weight:600; white-space:nowrap;
  pointer-events:none; z-index:999;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.bpp-sidebar.bpp-sb-collapsed .bpp-nav-link { position:relative; }

/* ── Sidebar header redesign (mobile) ── */
.bpp-sb-header {
  display: none; /* shown only on mobile via media query */
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.bpp-sb-controls {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
}
.bpp-sb-ctrl-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card2) !important;
  color: var(--ink3) !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s;
  position: relative;
  text-decoration: none;
  flex-shrink: 0 !important;
}
.bpp-sb-ctrl-btn svg { stroke: currentColor !important; display: block !important; width: 18px !important; height: 18px !important; fill: none !important; }
.bpp-sb-ctrl-btn:hover {
  background: #EEF2FF !important; border-color: #C7D2FE !important; color: #4F46E5 !important;
}
.bpp-sb-ctrl-profile {
  background: #4F46E5 !important;
  border-color: #4F46E5 !important;
  color: #fff !important;
}
.bpp-sb-ctrl-profile svg { stroke: #fff !important; }
.bpp-sb-ctrl-profile:hover { background: #4338CA !important; border-color: #4338CA !important; }
/* Currency select in sidebar header */
.bpp-sb-currency {
  height: 40px; padding: 0 6px 0 8px;
  font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card2);
  color: var(--ink3);
  cursor: pointer;
  appearance: auto;
  min-width: 0; max-width: 90px; flex-shrink: 1;
}
.bpp-sb-close {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card2) !important;
  color: var(--ink4) !important;
  cursor: pointer !important;
  transition: background .15s;
  flex-shrink: 0 !important;
}
.bpp-sb-close:hover { background: #FEF2F2 !important; border-color: #FECACA !important; color: #EF4444 !important; }
.bpp-sb-close svg { stroke: currentColor !important; display: block !important; width: 18px !important; height: 18px !important; fill: none !important; }
/* notification badge on sidebar bell */
.bpp-sb-notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  background: #EF4444; color: #fff;
  font-size: 9px; font-weight: 800;
  border-radius: 99px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--card);
}
/* Dark mode */
.bpp-dark .bpp-sb-ctrl-btn { background: var(--card2); border-color: var(--border); color: var(--ink3); }
.bpp-dark .bpp-sb-ctrl-btn:hover { background: rgba(79,70,229,.15); border-color: rgba(79,70,229,.3); color: #818CF8; }
.bpp-dark .bpp-sb-close { background: var(--card2); border-color: var(--border); }
.bpp-sidebar-foot {
  padding:10px 12px; border-top:1px solid var(--border);
}
.bpp-priv-note {
  display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink5);
  background:var(--card2); border-radius:var(--rsm); padding:8px 10px; font-weight:500;
}


/* ── MAIN CONTENT ─────────────────────────────────────────────── */
.bpp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; height: 100%; }
.bpp-tool-wrap {
  padding:20px 22px 24px; display:flex; flex-direction:column; gap:16px; flex:1;
}

/* ── RIGHT PANEL ──────────────────────────────────────────────── */
.bpp-right-panel { display:none !important; width:0 !important; }
.bpp-right-panel::-webkit-scrollbar { display:none }
.bpp-rp-sec {
  font-size:9px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink5); padding:8px 0 4px;
}
.bpp-rp-widget {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rmd); padding:12px 14px;
  transition:box-shadow var(--dur); margin-bottom:6px;
}
.bpp-rp-widget:hover { box-shadow:var(--s1) }
.bpp-rp-w-lbl {
  font-size:10px; color:var(--ink5); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px;
}
.bpp-rp-w-val {
  font-size:22px; font-weight:700; font-family:var(--font-num);
  color:var(--ink); line-height:1.1;
}
.bpp-rp-w-sub { font-size:11px; color:var(--ink5); margin-top:2px }
.bpp-rp-green { border-left:3px solid var(--green) }
.bpp-rp-green .bpp-rp-w-val { color:var(--green) }
.bpp-rp-amber { border-left:3px solid var(--amber) }
.bpp-rp-amber .bpp-rp-w-val { color:var(--amber) }
.bpp-rp-blue  { border-left:3px solid var(--blue) }
.bpp-rp-blue .bpp-rp-w-val  { color:var(--blue) }
.bpp-rp-red   { border-left:3px solid var(--red) }
.bpp-rp-red .bpp-rp-w-val   { color:var(--red) }
/* score mini-gauge in right panel */
.bpp-rp-score-num {
  font-size:28px; font-weight:800; font-family:var(--font-num);
  color:var(--ink); line-height:1; margin:4px 0 2px;
}
.bpp-rp-score-lbl { font-size:10.5px; color:var(--ink5) }

/* ================================================================
   OVERVIEW KPI CARDS (4-grid at top of main)
   ================================================================ */
.bpp-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.bpp-ov {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:18px 20px; position:relative;
  overflow:hidden; box-shadow:var(--s0); transition:all var(--durm);
}
.bpp-ov:hover { transform:translateY(-2px); box-shadow:var(--s2) }
.bpp-ov::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; border-radius:var(--r) var(--r) 0 0;
}
.bpp-ov-inc::before   { background:var(--green) }
.bpp-ov-exp::before   { background:var(--red) }
.bpp-ov-score::before { background:var(--amber) }
.bpp-ov-sav::before   { display:none }
/* savings = primary */
.bpp-ov-sav {
  background:var(--blue); border-color:var(--blue-dk); box-shadow:var(--sb);
}
.bpp-ov-sav .bpp-ov-lbl,.bpp-ov-sav .bpp-ov-hint { color:rgba(255,255,255,.7) }
.bpp-ov-sav .bpp-ov-val { color:#fff }
.bpp-ov-sav .bpp-ov-icon { background:rgba(255,255,255,.18); color:#fff }
.bpp-ov-icon {
  width:38px; height:38px; border-radius:var(--rsm);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.bpp-ov-inc   .bpp-ov-icon { background:var(--green-lt); color:var(--green) }
.bpp-ov-exp   .bpp-ov-icon { background:var(--red-lt);   color:var(--red) }
.bpp-ov-score .bpp-ov-icon { background:var(--amber-lt); color:var(--amber) }
.bpp-ov-lbl {
  font-size:10.5px; font-weight:700; color:var(--ink5);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px;
}
.bpp-ov-val {
  font-size:25px; font-weight:700; font-family:var(--font-num);
  color:var(--ink); line-height:1; margin-bottom:4px;
}
.bpp-ov-hint { font-size:11px; color:var(--ink5) }

/* ================================================================
   PRIVACY BAR
   ================================================================ */
.bpp-privacy-bar {
  display:flex; align-items:center; gap:8px;
  background:var(--blue-lt); border:1px solid var(--blue-mid);
  border-radius:var(--rmd); padding:10px 14px;
  font-size:12.5px; color:#3730A3;
}
.bpp-dark .bpp-privacy-bar { color:var(--blue-mid) }
.bpp-privacy-bar svg { stroke:var(--blue); flex-shrink:0 }
.bpp-privacy-bar strong { font-weight:700 }
#bpp-privacy-x {
  margin-left:auto; background:none; border:none;
  font-size:18px; cursor:pointer; color:var(--blue);
  line-height:1; padding:0 4px;
}

/* ================================================================
   COLLAPSE BLOCKS
   ================================================================ */
.bpp-collapse-block {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--s0);
  overflow:visible;
  transition:box-shadow var(--dur);
}
.bpp-collapse-block:hover { box-shadow:var(--s1) }
.bpp-cblock-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; cursor:pointer; border:none; background:none;
  width:100%; text-align:left; border-bottom:1px solid transparent;
  transition:background var(--dur);
}
.bpp-collapse-open .bpp-cblock-hd { border-bottom-color:var(--border) }
.bpp-cblock-hd:hover { background:var(--card2) }
.bpp-cblock-left { display:flex; align-items:center; gap:9px; min-width:0 }
.bpp-cblock-ico  { font-size:16px; line-height:1 }
.bpp-cblock-title { font-size:14px; font-weight:700; color:var(--ink) }
.bpp-cblock-sub   { font-size:11.5px; color:var(--ink5) }
.bpp-cblock-arr {
  stroke:var(--ink5); transition:transform .24s ease; flex-shrink:0;
}
.bpp-collapse-open .bpp-cblock-arr { transform:rotate(180deg) }
.bpp-cblock-body { padding:20px }

/* ================================================================
   TODAY HERO CARD
   ================================================================ */
.bpp-daily-hero-grid { display:grid; grid-template-columns:1fr 360px; gap:16px }
.bpp-daily-left,.bpp-daily-right { display:flex; flex-direction:column; gap:16px }
.bpp-today-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--s0); overflow:hidden;
}
.bpp-hero-card {
  background:var(--ink); padding:22px 24px 18px;
  position:relative; overflow:hidden;
}
.bpp-dark .bpp-hero-card { background:#1a2038 }
.bpp-hero-card::after {
  content:''; position:absolute; top:-40px; right:-40px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(255,255,255,.03); pointer-events:none;
}
.bpp-hero-top-bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px; flex-wrap:wrap;
}
.bpp-hero-date {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.6);
}
.bpp-hero-date-ico { font-size:14px }
.bpp-hero-status-pill {
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.85);
  font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
}
.bpp-header-add-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--blue); color:#fff; border:none; border-radius:var(--rsm);
  padding:9px 18px; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:all var(--dur); box-shadow:var(--sb);
}
.bpp-header-add-btn:hover { background:var(--blue-dk); transform:translateY(-1px) }

/* status banner */
.bpp-status-banner {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:13px 20px;
  background: linear-gradient(135deg, #EEF2FF 0%, #F0FDF4 100%);
  border-bottom:1px solid #C7D2FE;
  flex-wrap:wrap;
}
.bpp-dark .bpp-status-banner {
  background: linear-gradient(135deg, rgba(79,70,229,.12) 0%, rgba(16,185,129,.08) 100%);
  border-bottom-color: rgba(79,70,229,.2);
}
.bpp-status-banner-ico-wrap {
  width: 36px; height: 36px; flex-shrink: 0;
  background: #4F46E5;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.bpp-status-banner-ico-wrap svg { stroke: #fff; }
.bpp-status-banner-main { display:flex; align-items:center; gap:11px }
.bpp-status-banner-ico  { font-size:19px }
.bpp-status-banner-msg  { font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3 }
.bpp-status-banner-sub  { font-size:11.5px; color:var(--ink5); margin-top:2px }
.bpp-status-banner-meta { display:flex; align-items:center; gap:8px }
.bpp-status-streak-mini {
  display:flex; align-items:center; gap:4px;
  background:var(--amber-lt); border-radius:20px;
  padding:3px 10px; font-size:12px; font-weight:700; color:#78350F;
}

/* action now */
.bpp-action-now {
  margin:14px 20px 0;
  background:var(--blue-lt); border:1px solid var(--blue-mid);
  border-left:3px solid var(--blue); border-radius:var(--rmd); padding:11px 14px;
}
.bpp-action-now-hd {
  display:flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; color:var(--blue); margin-bottom:5px;
}
.bpp-action-now-body { font-size:13px; color:var(--ink3); line-height:1.5 }

/* streak system */
.bpp-streak-sys {
  display:flex; gap:12px; padding:13px 20px;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.bpp-streak-sys-item { display:flex; align-items:center; gap:8px }
.bpp-ss-ico  { font-size:18px }
.bpp-ss-info { display:flex; flex-direction:column }
.bpp-ss-val  {
  font-size:18px; font-weight:700; font-family:var(--font-num);
  color:var(--ink); line-height:1.1;
}
.bpp-ss-lbl  { font-size:10.5px; color:var(--ink5) }

/* formula row */
.bpp-formula-row {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  padding:11px 20px; border-bottom:1px solid var(--border);
  background:var(--card2);
}
.bpp-formula-item { display:flex; flex-direction:column; align-items:center; gap:1px }
.bpp-formula-item>span:first-child {
  font-size:14px; font-weight:700; font-family:var(--font-num); color:var(--ink);
}
.bpp-formula-lbl {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--ink5);
}
.bpp-formula-inc>span:first-child  { color:var(--green) }
.bpp-formula-exp>span:first-child  { color:var(--red) }
.bpp-formula-goal>span:first-child { color:var(--blue) }
.bpp-formula-result>span:first-child { color:var(--blue); font-size:16px }
.bpp-formula-op { font-size:16px; font-weight:700; color:var(--ink5) }
.bpp-formula-eq { font-size:18px; font-weight:700; color:var(--ink4) }

/* today KPI tiles */
.bpp-today-kpis {
  display:grid; grid-template-columns:1.8fr 1fr 1fr;
  gap:10px; padding:14px 20px; border-bottom:1px solid var(--border);
}
.bpp-tkpi {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--rmd); padding:13px 14px; transition:all var(--dur);
}
.bpp-tkpi:hover { box-shadow:var(--s1); transform:translateY(-1px) }
/* ── Safe to Spend Today — savings-rate style light card ── */
.bpp-tkpi-primary {
  /* Default state: green (safe) */
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  box-shadow: none;
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.bpp-tkpi-primary .bpp-tkpi-label {
  color: #16a34a;
}
.bpp-tkpi-primary .bpp-tkpi-val {
  color: #16a34a;
  font-size: 26px;
  font-family: var(--font-num);
}
.bpp-tkpi-primary .bpp-tkpi-sub {
  color: #4ade80;
}

/* Progress bar inside safe card */
.bpp-tkpi-primary .bpp-safe-bar-track {
  height: 7px;
  background: rgba(0,0,0,.08);
  border-radius: 99px;
  overflow: hidden;
  margin: 8px 0 6px;
}
.bpp-tkpi-primary .bpp-safe-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0%;
  background: #16a34a;
  transition: width .5s ease, background .5s ease;
}
.bpp-tkpi-primary .bpp-safe-state-msg {
  font-size: 11.5px;
  line-height: 1.5;
  color: #166534;
  margin-top: 2px;
}

/* 🟢 Safe (< 75% spent) */
.bpp-tkpi-primary.bpp-tkpi-state-ok {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #86efac !important;
}
.bpp-tkpi-primary.bpp-tkpi-state-ok .bpp-tkpi-label,
.bpp-tkpi-primary.bpp-tkpi-state-ok .bpp-tkpi-val { color: #16a34a !important; }
.bpp-tkpi-primary.bpp-tkpi-state-ok .bpp-tkpi-sub { color: #4ade80 !important; }
.bpp-tkpi-primary.bpp-tkpi-state-ok .bpp-safe-bar-fill { background: #16a34a !important; }
.bpp-tkpi-primary.bpp-tkpi-state-ok .bpp-safe-state-msg { color: #166534 !important; }

/* 🟠 Middle risk (≥ 75% spent) */
.bpp-tkpi-primary.bpp-tkpi-state-warn {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: #fdba74 !important;
}
.bpp-tkpi-primary.bpp-tkpi-state-warn .bpp-tkpi-label,
.bpp-tkpi-primary.bpp-tkpi-state-warn .bpp-tkpi-val { color: #ea580c !important; }
.bpp-tkpi-primary.bpp-tkpi-state-warn .bpp-tkpi-sub { color: #fb923c !important; }
.bpp-tkpi-primary.bpp-tkpi-state-warn .bpp-safe-bar-fill { background: #ea580c !important; }
.bpp-tkpi-primary.bpp-tkpi-state-warn .bpp-safe-state-msg { color: #9a3412 !important; }

/* 🔴 Danger (overspent) */
.bpp-tkpi-primary.bpp-tkpi-state-danger {
  background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
  border-color: #fca5a5 !important;
}
.bpp-tkpi-primary.bpp-tkpi-state-danger .bpp-tkpi-label,
.bpp-tkpi-primary.bpp-tkpi-state-danger .bpp-tkpi-val { color: #dc2626 !important; }
.bpp-tkpi-primary.bpp-tkpi-state-danger .bpp-tkpi-sub { color: #f87171 !important; }
.bpp-tkpi-primary.bpp-tkpi-state-danger .bpp-safe-bar-fill { background: #dc2626 !important; }
.bpp-tkpi-primary.bpp-tkpi-state-danger .bpp-safe-state-msg { color: #991b1b !important; }
.bpp-tkpi-spent  { border-top:2px solid var(--red) }
.bpp-tkpi-remain { border-top:2px solid var(--green) }
.bpp-tkpi-label {
  font-size:10.5px; font-weight:700; color:var(--ink5);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px;
}
.bpp-tkpi-val {
  font-size:20px; font-weight:700; font-family:var(--font-num);
  color:var(--ink); line-height:1.1;
}
.bpp-tkpi-sub { font-size:11px; color:var(--ink5); margin-top:3px }

/* quick add */
.bpp-quick-add { padding:13px 20px; border-bottom:1px solid var(--border) }
.bpp-qa-row { display:flex; gap:7px; margin-bottom:9px; flex-wrap:wrap }
.bpp-aw {
  display:flex; align-items:stretch; border:1px solid var(--border);
  border-radius:var(--rsm); background:var(--card2);
  overflow:hidden; transition:border-color var(--dur);
}
.bpp-aw:focus-within {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.12);
}
.bpp-sym {
  padding:0 8px; color:var(--ink5); font-size:13px; font-weight:600;
  font-family:var(--font-num); background:var(--card3);
  display:flex; align-items:center;
  border-right:1px solid var(--border); flex-shrink:0;
}
.bpp-qa-input,.bpp-qa-cat {
  border:none; background:transparent; font-size:13.5px;
  color:var(--ink); padding:8px 10px; outline:none; min-width:0;
}
.bpp-qa-input { width:110px; font-family:var(--font-num) }
.bpp-qa-cat   { flex:1 }
.bpp-qa-btn {
  background:var(--blue); color:#fff; border:none; border-radius:var(--rsm);
  padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:all var(--dur);
}
.bpp-qa-btn:hover { background:var(--blue-dk) }
.bpp-qa-chips,.bpp-fab-chips { display:flex; flex-wrap:wrap; gap:5px }
.bpp-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 11px; background:var(--card2);
  border:1px solid var(--border); border-radius:20px;
  font-size:12px; font-weight:500; color:var(--ink3);
  cursor:pointer; transition:all var(--dur);
}
.bpp-chip:hover,.bpp-chip.active {
  background:var(--blue-lt); color:var(--blue);
  border-color:var(--blue-mid); font-weight:700;
}
.bpp-daily-risk,.bpp-post-log-feedback { padding:10px 20px }
.bpp-today-log-wrap { padding:13px 20px }
.bpp-today-log-title {
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--ink5); margin-bottom:7px;
}
.bpp-pulse-section { padding:14px 20px }
.bpp-pulse-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.bpp-pulse-title { font-size:13px; font-weight:700; color:var(--ink2) }
.bpp-pulse-hint  { font-size:11px; color:var(--ink5) }
.bpp-pulse-chart { display:flex; align-items:flex-end; gap:5px; height:48px }

/* variable panel */
.bpp-variable-panel { padding:14px 20px }
.bpp-vi-log-row {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rmd); padding:13px; margin-bottom:12px;
}
.bpp-vi-log-label {
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:9px;
}
.bpp-vi-log-inputs { display:flex; gap:7px; margin-bottom:7px }
.bpp-vi-input {
  border:none; background:transparent; font-family:var(--font-num);
  font-size:14px; color:var(--ink); padding:8px 10px; outline:none; width:100%;
}
.bpp-vi-log-btn {
  background:var(--green); color:#fff; border:none; border-radius:var(--rsm);
  padding:9px 15px; font-size:13px; font-weight:700; cursor:pointer;
  transition:all var(--dur);
}
.bpp-vi-log-btn:hover { background:var(--green-dk) }
.bpp-vi-zero-btn-wrap { margin-top:4px }
.bpp-vi-zero-btn {
  background:var(--card); border:1px dashed var(--bord2); color:var(--ink5);
  border-radius:var(--rsm); padding:6px 13px; font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--dur);
}
.bpp-vi-zero-btn:hover { border-color:var(--amber); color:var(--amber) }
.bpp-vi-week-chart { height:46px; display:flex; align-items:flex-end; gap:4px; margin-bottom:12px }
.bpp-vi-kpis { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:10px }
.bpp-vi-kpi {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--rsm); padding:10px 12px;
}
.bpp-vi-kpi-lbl { font-size:10px; font-weight:700; color:var(--ink5); text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px }
.bpp-vi-kpi-val { font-size:15px; font-weight:700; font-family:var(--font-num); color:var(--ink) }
.bpp-vi-kpi-sub { font-size:10.5px; color:var(--ink5); margin-top:2px }
.bpp-vi-reserve-row {
  display:flex; align-items:center; gap:9px; background:var(--card2);
  border-radius:var(--rsm); padding:9px 12px; margin-bottom:12px; flex-wrap:wrap;
}
.bpp-vi-reserve-lbl { font-size:12.5px; font-weight:600; color:var(--ink); display:block }
.bpp-vi-reserve-hint { font-size:11px; color:var(--ink5) }
.bpp-vi-reserve-input-wrap {
  display:flex; align-items:center; border:1px solid var(--border);
  border-radius:var(--rsm); background:var(--card); overflow:hidden;
}
.bpp-vi-reserve-input {
  border:none; background:transparent; font-family:var(--font-num);
  font-size:13.5px; color:var(--ink); padding:7px 10px; outline:none; width:100px;
}
.bpp-vi-reserve-status { font-size:12px; color:var(--ink5) }
/* stability */
.bpp-stability-panel {
  background:var(--card2); border-radius:var(--rmd); padding:13px; margin-bottom:10px;
}
.bpp-stab-header { display:flex; align-items:center; gap:8px; margin-bottom:5px }
.bpp-stab-ico { font-size:17px }
.bpp-stab-title-group { display:flex; align-items:center; gap:8px }
.bpp-stab-title { font-size:13px; font-weight:700; color:var(--ink) }
.bpp-stab-score { font-size:13px; font-weight:700; font-family:var(--font-num); color:var(--blue) }
.bpp-stab-msg  { font-size:12px; color:var(--ink5); margin-bottom:9px }
.bpp-stab-bars { display:flex; flex-direction:column; gap:6px }
.bpp-stab-bar-row { display:flex; align-items:center; gap:8px }
.bpp-stab-bar-lbl { font-size:11px; font-weight:500; color:var(--ink4); min-width:105px }
.bpp-stab-bar-track { flex:1; height:5px; background:var(--border); border-radius:10px; overflow:hidden }
.bpp-stab-bar-fill  { height:100%; border-radius:10px; transition:width .7s ease }
.bpp-stab-consistency { background:var(--blue) }
.bpp-stab-zeroday     { background:var(--green) }
.bpp-stab-variance    { background:var(--amber) }
.bpp-stab-bar-pts { font-size:11px; font-weight:700; font-family:var(--font-num); color:var(--ink4); min-width:36px; text-align:right }
/* trend */
.bpp-trend-panel { background:var(--card2); border-radius:var(--rmd); padding:13px }
.bpp-trend-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px }
.bpp-trend-title { font-size:13px; font-weight:700; color:var(--ink) }
.bpp-trend-hint  { font-size:11px; color:var(--ink5) }

/* ================================================================
   FINANCIAL HEALTH SCORE PANEL
   ================================================================ */
.bpp-score-cblock .bpp-cblock-body { padding:0 }
.bpp-panel-score { padding:18px 20px }
.bpp-score-today-impact {
  background:var(--blue-lt); border:1px solid var(--blue-mid);
  border-radius:var(--rsm); padding:8px 12px;
  font-size:12.5px; font-weight:600; color:var(--blue); margin-bottom:14px;
}
.bpp-score-body { display:flex; gap:20px; align-items:flex-start }
.bpp-score-gauge-wrap { flex-shrink:0 }
.bpp-score-gauge { position:relative; width:160px; text-align:center }
.bpp-gauge-svg { width:160px }
.bpp-gauge-num {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-18%);
  font-size:34px; font-weight:800; font-family:var(--font-num);
  color:var(--ink); line-height:1;
}
.bpp-gauge-lbl {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  font-size:10.5px; color:var(--ink5); white-space:nowrap;
}
.bpp-score-pillars { flex:1; display:flex; flex-direction:column; gap:8px }
.bpp-pillar-top { display:flex; justify-content:space-between; margin-bottom:3px }
.bpp-pillar-name { font-size:12px; font-weight:600; color:var(--ink3) }
.bpp-pillar-pts  { font-size:11px; font-weight:700; font-family:var(--font-num); color:var(--ink4) }
.bpp-pillar-bar  { height:6px; background:var(--border); border-radius:10px; overflow:hidden }
.bpp-pillar-fill { height:100%; border-radius:10px; transition:width .7s ease }
.bpp-score-msg {
  font-size:12.5px; color:var(--ink5); margin-top:13px;
  padding-top:13px; border-top:1px solid var(--border); line-height:1.5;
}
.bpp-score-motive { font-size:12.5px; font-weight:600; color:var(--blue); margin-top:7px }
.bpp-score-badge {
  display:inline-flex; align-items:center; padding:2px 8px;
  background:var(--blue-lt); color:var(--blue);
  border-radius:20px; font-size:11px; font-weight:700; font-family:var(--font-num);
}
.bpp-score-grade {
  display:inline-flex; align-items:center; padding:2px 8px;
  background:var(--green-lt); color:var(--green-dk);
  border-radius:20px; font-size:11px; font-weight:700;
}

/* EMG */
.bpp-panel-emg { border-top:1px solid var(--border) }
.bpp-emg-inner { padding:16px 20px }
.bpp-panel-hd { display:flex; align-items:center; gap:8px; margin-bottom:12px }
.bpp-panel-title { font-size:13.5px; font-weight:700; color:var(--ink) }
.bpp-card-ico { font-size:15px }
.bpp-emg-body { display:flex; gap:18px }
.bpp-emg-left { flex:1 }
.bpp-emg-label { font-size:12px; font-weight:600; color:var(--ink3); margin-bottom:3px }
.bpp-emg-label strong { color:var(--ink) }
.bpp-emg-sub   { font-size:11.5px; color:var(--ink5); margin-bottom:7px }
.bpp-emg-bar-track { height:8px; background:var(--border); border-radius:10px; overflow:hidden; margin-bottom:5px }
.bpp-emg-bar-fill  { height:100%; background:var(--blue); border-radius:10px; transition:width .7s ease }
.bpp-emg-months { font-size:11.5px; color:var(--ink5) }
.bpp-emg-right { flex-shrink:0; text-align:right }
.bpp-liq-title { font-size:10px; font-weight:700; color:var(--ink5); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px }
.bpp-liq-val   { font-size:26px; font-weight:700; font-family:var(--font-num); color:var(--ink); line-height:1 }
.bpp-liq-state { font-size:12px; font-weight:600; margin-top:2px }
.bpp-liq-legend { font-size:10px; color:var(--ink5); margin-top:5px; line-height:1.7 }
.bpp-liq-g { color:var(--green); display:block }
.bpp-liq-m { color:var(--amber); display:block }
.bpp-liq-r { color:var(--red);   display:block }
.bpp-panel-flat  { background:var(--card2) }

/* weekly snapshot */
.bpp-weekly-stats-wide { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px }
.bpp-wstat-lbl { font-size:10.5px; font-weight:700; color:var(--ink5); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px }
.bpp-wstat-val { font-size:17px; font-weight:700; font-family:var(--font-num); color:var(--ink) }
.bpp-week-micro { display:block; width:100%; box-sizing:border-box }

/* ================================================================
   KPI HERO STRIP
   ================================================================ */
.bpp-kpi-hero { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.bpp-kpi {
  display:flex; align-items:center; gap:13px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 18px;
  box-shadow:var(--s0); transition:all var(--durm);
}
.bpp-kpi:hover { transform:translateY(-1px); box-shadow:var(--s1) }
.bpp-kpi-icon {
  width:42px; height:42px; border-radius:var(--rsm);
  background:var(--card2); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:var(--ink4);
}
.bpp-kpi-income .bpp-kpi-icon { background:var(--green-lt); color:var(--green) }
.bpp-kpi-expense .bpp-kpi-icon{ background:var(--red-lt);   color:var(--red) }
.bpp-kpi-score .bpp-kpi-icon  { background:var(--amber-lt); color:var(--amber) }
.bpp-kpi-lbl { font-size:10.5px; font-weight:700; color:var(--ink5); text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px }
.bpp-kpi-num { font-size:20px; font-weight:700; font-family:var(--font-num); color:var(--ink); line-height:1.1 }
.bpp-kpi-sub { font-size:11px; color:var(--ink5); margin-top:1px }
.bpp-num-savings { color:var(--green) }
.bpp-num-score   { color:var(--amber) }
/* savings KPI = primary */
.bpp-kpi-savings-card {
  background:var(--blue) !important; border-color:var(--blue-dk) !important;
  box-shadow:var(--sb) !important; position:relative; overflow:hidden;
}
.bpp-kpi-glow {
  position:absolute; top:-30px; right:-30px; width:90px; height:90px;
  border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none;
}
.bpp-kpi-savings-card .bpp-kpi-lbl,.bpp-kpi-savings-card .bpp-kpi-sub { color:rgba(255,255,255,.7) }
.bpp-kpi-savings-card .bpp-kpi-num,.bpp-kpi-savings-card .bpp-num-savings { color:#fff }
.bpp-kpi-savings-card .bpp-kpi-icon { background:rgba(255,255,255,.18); color:#fff }
/* ring */
.bpp-kpi-rate-ring { position:relative; width:42px; height:42px; flex-shrink:0 }
.bpp-ring-svg { width:42px; height:42px; transform:rotate(-90deg) }
.bpp-ring-bg   { fill:none; stroke:rgba(255,255,255,.2); stroke-width:4 }
.bpp-ring-fill { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-dasharray:113; stroke-dashoffset:113; transition:stroke-dashoffset .7s ease }
.bpp-ring-pct  { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; font-family:var(--font-num) }

/* ================================================================
   ACTION BAR + PERIOD TABS
   ================================================================ */
.bpp-action-bar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 16px; box-shadow:var(--s0); flex-wrap:wrap;
}
.bpp-action-left { display:flex; gap:7px; flex-wrap:wrap }
.bpp-abtn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px; border:1px solid var(--border); background:var(--card2);
  border-radius:var(--rsm); font-size:12.5px; font-weight:600;
  color:var(--ink3); cursor:pointer; transition:all var(--dur);
}
.bpp-abtn:hover        { background:var(--blue-lt); border-color:var(--blue-mid); color:var(--blue) }
.bpp-abtn-csv:hover    { color:var(--green); background:var(--green-lt); border-color:var(--green) }
.bpp-abtn-pdf:hover    { color:var(--red);   background:var(--red-lt);   border-color:var(--red) }
.bpp-abtn-reset:hover  { color:var(--amber); background:var(--amber-lt); border-color:var(--amber) }
.bpp-save-status { font-size:12px; color:var(--ink5); font-weight:500 }
.bpp-period-row  { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.bpp-period-row-label { font-size:12px; font-weight:600; color:var(--ink5) }
.bpp-period-tabs {
  display:flex; gap:3px; background:var(--card2);
  border:1px solid var(--border); border-radius:var(--rsm); padding:3px;
}
.bpp-ptab {
  padding:5px 13px; border:none; background:none; border-radius:6px;
  font-size:12.5px; font-weight:600; color:var(--ink5); cursor:pointer;
  transition:all var(--dur);
}
.bpp-ptab.active,.bpp-ptab:hover { background:var(--card); color:var(--blue); box-shadow:var(--s0) }
.bpp-score-delta { font-size:12px; color:var(--ink5) }

/* ================================================================
   BUDGET SETUP CARDS (4-grid)
   ================================================================ */
.bpp-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px }
/* ══════════════════════════════════════════════════════════════
   BUDGET CARDS — FINTECH REDESIGN
   ══════════════════════════════════════════════════════════════ */
.bpp-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: visible;
  transition: box-shadow var(--dur);
  position: relative;
}
.bpp-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }

/* Remove old top colour bar */
.bpp-card::before { display: none !important; }

/* ── Card header ── */
.bpp-card-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.bpp-card-hd-text { flex: 1; min-width: 0; }
.bpp-card-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; }
.bpp-card-rowcount { font-size: 11px; color: var(--ink5); display: block; margin-top: 1px; }

/* Coloured icon squares */
.bpp-card-ico-sq {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bpp-card-ico-sq svg { display: block; }
.bpp-ico-sq-inc { background: #DCFCE7; } .bpp-ico-sq-inc svg { stroke: #16A34A; }
.bpp-ico-sq-exp { background: #FEE2E2; } .bpp-ico-sq-exp svg { stroke: #DC2626; }
.bpp-ico-sq-sav { background: #EEF2FF; } .bpp-ico-sq-sav svg { stroke: #4F46E5; }
.bpp-ico-sq-inv { background: #FEF3C7; } .bpp-ico-sq-inv svg { stroke: #B45309; }

/* Header right: total + add button */
.bpp-card-hd-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bpp-card-total-wrap { text-align: right; }
.bpp-card-total-lbl { font-size: 10px; color: var(--ink5); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.bpp-card-total-val { font-size: 14px; font-weight: 800; font-family: var(--font-num); color: var(--ink); margin-top: 1px; }

/* ── Fintech Add button ── */
.bpp-add {
  background: var(--card2); border: 1px solid var(--border); border-radius: 20px;
  padding: 3px 9px; font-size: 11px; font-weight: 700; color: var(--blue);
  cursor: pointer; transition: all var(--dur);
}
.bpp-add:hover { background: var(--blue-lt); border-color: var(--blue-mid) }
.bpp-add-fintech {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 6px 12px !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 700 !important;
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink3) !important;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.bpp-add-fintech svg { stroke: currentColor !important; fill: none !important; display: block !important; }
.bpp-add-fintech:hover { background: #EEF2FF !important; border-color: #C7D2FE !important; color: #4F46E5 !important; }

/* ── Row list container ── */
.bpp-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; padding: 0 16px; }

/* ── Budget row — new fintech style ── */
/* ── Budget row — clean named grid areas ── */
.bpp-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "lbl del"
    "amt frq" !important;
  gap: 5px 8px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  transition: background .15s !important;
}
.bpp-row:last-child { border-bottom: none !important; }
.bpp-row:hover { background: var(--card2) !important; margin: 0 -16px !important; padding-left: 16px !important; padding-right: 16px !important; }

.bpp-lbl {
  grid-area: lbl !important;
  border: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--ink); outline: none;
  padding: 0; min-width: 0; width: 100%;
}
.bpp-del {
  grid-area: del !important;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: none; border: 1px solid transparent;
  color: var(--ink5); font-size: 14px;
  cursor: pointer; transition: all .15s; padding: 0;
}
.bpp-del:hover { background: #FEF2F2 !important; border-color: #FECACA !important; color: #EF4444 !important; }
.bpp-aw {
  display: flex !important; align-items: center !important; gap: 6px !important;
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  min-width: 0 !important;
}
/* grid-area only applies inside a .bpp-row grid */
.bpp-row > .bpp-aw { grid-area: amt !important; }
.bpp-aw:focus-within {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important;
}
.bpp-sym { font-size: 12px; color: var(--ink5); font-weight: 600; flex-shrink: 0; }
.bpp-amt {
  border: none; background: transparent;
  font-family: var(--font-num); font-size: 14px; font-weight: 700;
  color: var(--ink); outline: none;
  min-width: 0; width: 100%;
}
.bpp-row > .bpp-frq {
  grid-area: frq !important;
}
.bpp-frq {
  display: flex !important; align-items: center !important;
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--ink4) !important;
  cursor: pointer; outline: none;
  height: 36px !important; white-space: nowrap;
}

/* ── Footer total bar ── */
.bpp-card-ft {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--card2);
  font-size: 11px; font-weight: 700; color: var(--ink5);
  text-transform: uppercase; letter-spacing: .4px;
}
.bpp-card-ft-fintech { /* already handled by bpp-card-ft */ }
.bpp-ft-lbl { font-size: 11px; font-weight: 700; color: var(--ink5); text-transform: uppercase; letter-spacing: .4px; }
.bpp-ft-num { font-size: 15px; font-weight: 800; font-family: var(--font-num); }
.bpp-color-inc { color: #16A34A !important; }
.bpp-color-exp { color: #DC2626 !important; }
.bpp-color-sip { color: #4F46E5 !important; }
.bpp-color-invest { color: #B45309 !important; }

/* ── Old icon classes (keep for other panels) ── */
.bpp-card-ico { font-size: 15px }
.bpp-ico-inc     { color: var(--green) }
.bpp-ico-exp     { color: var(--red) }
.bpp-ico-sip     { color: var(--purple) }
.bpp-ico-invest  { color: var(--teal) }
.bpp-ico-sav     { color: var(--blue) }
.bpp-ico-ins     { color: var(--amber) }
.bpp-ico-si      { color: var(--indigo) }
.bpp-ico-rules   { color: var(--blue) }
.bpp-ico-charts  { color: var(--green) }
.bpp-ico-purchase{ color: var(--amber) }
.bpp-ico-rvb     { color: var(--teal) }

/* Dark mode */
.bpp-dark .bpp-ico-sq-inc { background: rgba(59,109,17,.2); }
.bpp-dark .bpp-ico-sq-inc svg { stroke: #86EFAC; }
.bpp-dark .bpp-ico-sq-exp { background: rgba(163,45,45,.2); }
.bpp-dark .bpp-ico-sq-exp svg { stroke: #FCA5A5; }
.bpp-dark .bpp-ico-sq-sav { background: rgba(24,95,165,.2); }
.bpp-dark .bpp-ico-sq-sav svg { stroke: #93C5FD; }
.bpp-dark .bpp-ico-sq-inv { background: rgba(133,79,11,.2); }
.bpp-dark .bpp-ico-sq-inv svg { stroke: #FCD34D; }
.bpp-dark .bpp-color-inc { color: #86EFAC !important; }
.bpp-dark .bpp-color-exp { color: #FCA5A5 !important; }
.bpp-dark .bpp-color-sip { color: #93C5FD !important; }
.bpp-dark .bpp-color-invest { color: #FCD34D !important; }
/* divider */
.bpp-setup-divider {
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.8px; color:var(--ink5);
}
.bpp-setup-divider::before,.bpp-setup-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* ================================================================
   SUMMARY SLIDER (3-col on desktop)
   ================================================================ */
.bpp-summary-slider { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.bpp-slider-dots,.bpp-pslider-dots { display:none }
/* breakdown table */
.bpp-breakdown { margin-bottom:12px }
.bpp-br-hdr {
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr;
  font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--ink5);
  padding:0 7px 5px; border-bottom:1px solid var(--border); margin-bottom:5px;
}
.bpp-br-row {
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr;
  font-size:12.5px; padding:5px 7px; border-radius:6px; transition:background var(--dur);
}
.bpp-br-row:hover { background:var(--card2) }
.bpp-br-active    { background:var(--blue-lt); font-weight:700 }
.bpp-br-p { color:var(--ink3); font-weight:600 }
.bpp-br-i { color:var(--green);  font-family:var(--font-num); font-weight:600 }
.bpp-br-e { color:var(--red);    font-family:var(--font-num); font-weight:600 }
.bpp-br-s { color:var(--blue);   font-family:var(--font-num); font-weight:700 }
/* savings goal */
.bpp-goal-section { border-top:1px solid var(--border); padding-top:11px }
.bpp-goal-hd {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:7px; font-size:12.5px; font-weight:700; color:var(--ink);
}
.bpp-goal-input-wrap {
  display:flex; align-items:center; border:1px solid var(--border);
  border-radius:var(--rsm); overflow:hidden; background:var(--card2);
}
.bpp-goal-input {
  border:none; background:transparent; font-family:var(--font-num);
  font-size:12.5px; color:var(--ink); padding:5px 8px; outline:none; width:85px;
}
.bpp-goal-bar-track { height:6px; background:var(--border); border-radius:10px; overflow:hidden; margin-bottom:5px }
.bpp-goal-bar-fill  { height:100%; background:var(--blue); border-radius:10px; transition:width .7s ease }
.bpp-goal-status { font-size:11.5px; color:var(--ink5); font-weight:500 }
/* wishlist */
.bpp-wishlist-section { margin-top:12px; border-top:1px solid var(--border); padding-top:12px }
.bpp-wishlist-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px }
.bpp-wishlist-title-row { display:flex; align-items:center; gap:8px }
.bpp-wishlist-ico   { font-size:17px }
.bpp-wishlist-title { font-size:13px; font-weight:700; color:var(--ink) }
.bpp-wishlist-sub   { font-size:11px; color:var(--ink5) }
.bpp-wishlist-add-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--blue-lt); border:1px solid var(--blue-mid);
  color:var(--blue); border-radius:20px; padding:4px 11px;
  font-size:12px; font-weight:700; cursor:pointer; transition:all var(--dur);
}
.bpp-wishlist-add-btn:hover { background:var(--blue); color:#fff }
.bpp-wishlist-items { display:flex; flex-direction:column; gap:7px }
.bpp-wishlist-empty {
  text-align:center; padding:14px; background:var(--card2);
  border-radius:var(--rsm); font-size:12px; color:var(--ink5);
}
.bpp-wishlist-empty-ico { font-size:22px; display:block; margin-bottom:5px }
.bpp-wishlist-modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:800; backdrop-filter:blur(4px);
}
.bpp-wishlist-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:900; background:var(--card); border-radius:var(--rlg);
  box-shadow:var(--sm); width:420px; max-width:calc(100vw - 28px);
}
.bpp-wishlist-modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.bpp-wishlist-modal-title { font-size:14px; font-weight:700; color:var(--ink) }
.bpp-wishlist-modal-close {
  background:none; border:none; cursor:pointer; color:var(--ink5);
  padding:4px; border-radius:6px; transition:all var(--dur);
}
.bpp-wishlist-modal-close:hover { background:var(--card2); color:var(--ink) }
.bpp-wishlist-modal-body { padding:18px 20px }
.bpp-wl-field { margin-bottom:13px }
.bpp-wl-label { display:block; font-size:11.5px; font-weight:700; color:var(--ink3); margin-bottom:5px }
.bpp-wl-input {
  width:100%; border:1px solid var(--border); border-radius:var(--rsm);
  padding:8px 11px; font-size:13.5px; color:var(--ink);
  background:var(--card2); outline:none; transition:border-color var(--dur);
}
.bpp-wl-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.12) }
.bpp-wl-radio-group { display:flex; gap:7px; flex-wrap:wrap }
.bpp-wl-radio {
  display:flex; align-items:center; gap:5px; padding:5px 11px;
  border:1px solid var(--border); border-radius:20px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--ink4); transition:all var(--dur);
}
.bpp-wl-radio:hover { border-color:var(--blue); color:var(--blue) }
.bpp-wl-radio input { display:none }
.bpp-wl-radio:has(input:checked) { background:var(--blue-lt); border-color:var(--blue); color:var(--blue) }
.bpp-wl-calc-preview {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card2); border-radius:var(--rsm); padding:9px 13px;
  margin-bottom:14px; border:1px solid var(--border);
}
.bpp-wl-calc-lbl { font-size:12px; font-weight:600; color:var(--ink5) }
.bpp-wl-calc-val { font-size:15px; font-weight:700; font-family:var(--font-num); color:var(--blue) }
.bpp-wl-save-btn {
  width:100%; background:var(--blue); color:#fff; border:none;
  border-radius:var(--rsm); padding:11px; font-size:14px; font-weight:700;
  cursor:pointer; transition:all var(--dur);
}
.bpp-wl-save-btn:hover { background:var(--blue-dk) }
/* insights */
.bpp-insights { display:flex; flex-direction:column; gap:7px }
.bpp-insight {
  display:flex; gap:8px; align-items:flex-start;
  padding:9px 11px; border-radius:var(--rsm);
  font-size:12.5px; line-height:1.5;
}
.bpp-ins-neutral { background:var(--card2); border:1px solid var(--border); color:var(--ink3) }
.bpp-ins-good    { background:var(--green-lt); border:1px solid rgba(34,197,94,.2); color:#14532D }
.bpp-ins-warn    { background:var(--amber-lt); border:1px solid rgba(245,158,11,.2); color:#78350F }
.bpp-ins-bad     { background:var(--red-lt);   border:1px solid rgba(239,68,68,.2); color:#7F1D1D }
.bpp-ins-ico { font-size:13px; flex-shrink:0; margin-top:1px }
.bpp-ins-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; background:var(--amber); color:#fff;
  border-radius:10px; font-size:11px; font-weight:700; margin-left:auto;
}
/* S&I rate */
.bpp-si-sum-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 0; border-bottom:1px solid var(--border);
}
.bpp-si-sum-row:last-of-type { border-bottom:none }
.bpp-si-sum-lbl { font-size:12px; color:var(--ink5); font-weight:500 }
.bpp-si-sum-val { font-size:14px; font-weight:700; font-family:var(--font-num); color:var(--ink) }
.bpp-si-sum-pct { font-size:18px; font-weight:800; font-family:var(--font-num); color:var(--blue) }
.bpp-si-rate-bar-wrap { padding:10px 0 7px }
.bpp-si-rate-bar-track { height:8px; background:var(--border); border-radius:10px; margin-bottom:5px; position:relative; overflow:hidden }
.bpp-si-rate-bar-fill  { height:100%; background:var(--blue); border-radius:10px; transition:width .7s ease }
.bpp-si-rate-bar-target{ position:absolute; top:-3px; height:14px; width:2px; background:var(--amber); border-radius:2px }
.bpp-si-rate-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--ink5) }
.bpp-si-target-lbl { color:var(--amber); font-weight:700 }
.bpp-si-msg { font-size:12px; font-weight:600; margin-top:7px }

/* ================================================================
   ADVANCED INSIGHTS
   ================================================================ */
.bpp-panel-slider { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.bpp-panel {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rmd); padding:15px;
}
.bpp-rule-select { flex:1 }
.bpp-rule-desc {
  font-size:12.5px; color:var(--ink4); background:var(--blue-lt);
  border:1px solid var(--blue-mid); border-left:3px solid var(--blue);
  border-radius:var(--rsm); padding:8px 11px; margin-bottom:9px; line-height:1.5;
}
.bpp-rule-grid   { display:flex; flex-direction:column; gap:5px; margin-bottom:9px }
.bpp-rule-insight{ font-size:12.5px; color:var(--ink4); padding:8px 11px; background:var(--card); border-radius:var(--rsm); border:1px solid var(--border) }
.bpp-chart-tabs  { display:flex; gap:3px }
.bpp-ctab {
  display:inline-flex; align-items:center; gap:3px;
  padding:4px 9px; border:1px solid var(--border); background:var(--card);
  border-radius:6px; font-size:11.5px; font-weight:600; color:var(--ink5);
  cursor:pointer; transition:all var(--dur);
}
.bpp-ctab.active,.bpp-ctab:hover { background:var(--blue); color:#fff; border-color:var(--blue) }
.bpp-chart-empty { text-align:center; padding:22px }
.bpp-empty-ico   { font-size:30px; margin-bottom:7px }
.bpp-chart-empty p { font-size:12.5px; color:var(--ink5); line-height:1.6 }
.bpp-cw { position:relative; height:210px }
.bpp-cw-pie { height:210px }
.bpp-chart-sub { font-size:11.5px; color:var(--ink5); margin-bottom:9px }
.bpp-panel-sub { font-size:11.5px; color:var(--ink5) }

/* ================================================================
   PLANNING TOOLS
   ================================================================ */
.bpp-purchase-tabs,.bpp-ptab-sm-group { display:flex; gap:5px; margin-bottom:12px; flex-wrap:wrap }
.bpp-ptabx,.bpp-ptab-sm {
  padding:6px 11px; border:1px solid var(--border); background:var(--card);
  border-radius:20px; font-size:12px; font-weight:600; color:var(--ink4);
  cursor:pointer; transition:all var(--dur);
}
.bpp-ptabx.active,.bpp-ptabx:hover,
.bpp-ptab-sm.active,.bpp-ptab-sm:hover { background:var(--blue); color:#fff; border-color:var(--blue) }
.bpp-pt-panel { display:none }  /* old tab-based system */
.bpp-pt-panel.bpp-pt-slide { display:block }
/* Card-based purchase readiness — always visible */
.bpp-pt-panel.bpp-pt-card { display: flex !important; flex-direction: column !important; }
.bpp-pt-inputs { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:11px }
.bpp-pt-field label { display:block; font-size:10.5px; font-weight:700; color:var(--ink5); margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px }
.bpp-pt-input {
  width:100%; border:1px solid var(--border); border-radius:var(--rsm);
  padding:8px 10px; font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:13px; color:var(--ink); background:var(--card2); outline:none;
  transition:border-color var(--dur);
}
.bpp-pt-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.1) }
.bpp-pt-result { margin-top:7px } /* base — full styles below */
.bpp-pt-disclaimer { font-size:10.5px; color:var(--ink6); margin-top:9px; font-style:italic }
.bpp-purchase-dots { display:none }
/* rent vs buy */
.bpp-rvb-inputs { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:start; margin-bottom:12px }
.bpp-rvb-col-title  { font-size:13px; font-weight:700; margin-bottom:9px }
.bpp-rvb-rent-title { color:var(--amber) }
.bpp-rvb-buy-title  { color:var(--green) }
.bpp-rvb-divider {
  display:flex; align-items:center; justify-content:center;
  padding-top:26px; font-size:17px; font-weight:800; color:var(--ink5);
}
.bpp-rvb-btn {
  width:100%; background:var(--blue); color:#fff; border:none;
  border-radius:var(--rsm); padding:11px; font-size:14px; font-weight:700;
  cursor:pointer; transition:all var(--dur); margin-bottom:10px;
}
.bpp-rvb-btn:hover { background:var(--blue-dk); box-shadow:var(--sb) }

/* ================================================================
   2026 FINANCIAL GOALS
   ================================================================ */
.bpp-goals-summary-card {
  background:var(--ink); border-radius:var(--rmd);
  padding:18px 20px; margin-bottom:14px;
}
.bpp-dark .bpp-goals-summary-card { background:var(--card2); border:1px solid var(--border) }
.bpp-goals-summary-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.bpp-goals-summary-title { font-size:14px; font-weight:700; color:#fff }
.bpp-dark .bpp-goals-summary-title { color:var(--ink) }
.bpp-goals-summary-kpis { display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.bpp-goals-kpi-val { font-size:24px; font-weight:700; font-family:var(--font-num); color:#fff }
.bpp-dark .bpp-goals-kpi-val { color:var(--ink) }
.bpp-goals-kpi-lbl { font-size:11px; color:rgba(255,255,255,.6); margin-top:2px }
.bpp-dark .bpp-goals-kpi-lbl { color:var(--ink5) }
.bpp-goals-kpi-sep { width:1px; height:34px; background:rgba(255,255,255,.15) }
.bpp-dark .bpp-goals-kpi-sep { background:var(--border) }
.bpp-goal-sum-badge-wrap { display:flex; gap:5px }
.bpp-goal-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:14px }
.bpp-goal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  border: none;
  background: #4F46E5;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background .18s, box-shadow .18s;
  box-shadow: 0 2px 8px rgba(79,70,229,.28);
}
.bpp-goal-add-btn:hover { background: #4338CA; box-shadow: 0 3px 12px rgba(79,70,229,.4); }
.bpp-goal-add-btn:active { transform: translateY(1px); }
.bpp-goal-add-btn__ripple { display: none !important; }
.bpp-goal-add-btn__icon-wrap {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bpp-goal-add-btn__icon-wrap svg { stroke: #fff !important; fill: none !important; display: block !important; }
.bpp-goal-add-btn__label { color: #fff; font-weight: 700; white-space: nowrap; }
.bpp-goal-add-btn__chip { display: none !important; }
/* goal form modal */
.bpp-gf-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:800;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.bpp-gf-wrap {
  background:var(--card); border-radius:var(--rlg);
  box-shadow:var(--sm); width:460px; max-width:calc(100vw - 28px); padding:22px;
}
.bpp-gf-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.bpp-gf-title { font-size:16px; font-weight:800; color:var(--ink) }
.bpp-gf-close {
  background:none; border:none; font-size:20px; cursor:pointer;
  color:var(--ink5); padding:3px 6px; border-radius:6px; transition:all var(--dur);
}
.bpp-gf-close:hover { background:var(--card2); color:var(--ink) }
.bpp-gf-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:16px }
.bpp-gf-field--wide { grid-column:1/-1 }
.bpp-gf-lbl { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ink5); margin-bottom:5px }
.bpp-gf-input {
  width:100%; border:1px solid var(--border); border-radius:var(--rsm);
  padding:9px 11px; font-size:14px; color:var(--ink);
  background:var(--card2); outline:none; transition:border-color var(--dur);
}
.bpp-gf-input--num { font-family:var(--font-num) }
.bpp-gf-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.12) }
.bpp-gf-inp-wrap {
  display:flex; align-items:stretch; border:1px solid var(--border);
  border-radius:var(--rsm); overflow:hidden; background:var(--card2); transition:border-color var(--dur);
}
.bpp-gf-inp-wrap:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.12) }
.bpp-gf-sym {
  padding:0 10px; font-size:14px; font-weight:600; color:var(--ink5);
  background:var(--card3); border-right:1px solid var(--border);
  display:flex; align-items:center; font-family:var(--font-num);
}
.bpp-gf-input.bpp-gf-input--num { border:none; background:transparent; box-shadow:none }
.bpp-gf-actions { display:flex; gap:9px }
.bpp-gf-btn-save {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--blue); color:#fff; border:none; border-radius:var(--rsm);
  padding:11px; font-size:14px; font-weight:700; cursor:pointer;
  transition:all var(--dur); box-shadow:var(--sb);
}
.bpp-gf-btn-save:hover { background:var(--blue-dk) }
.bpp-gf-btn-cancel {
  padding:11px 18px; background:var(--card2); border:1px solid var(--border);
  color:var(--ink4); border-radius:var(--rsm); font-size:14px; font-weight:600;
  cursor:pointer; transition:all var(--dur);
}
.bpp-gf-btn-cancel:hover { background:var(--card3) }

/* ================================================================
   YOY REPORT
   ================================================================ */
.bpp-yoy-header-card {
  display:flex; gap:11px; align-items:flex-start;
  background:var(--blue-lt); border:1px solid var(--blue-mid);
  border-radius:var(--rmd); padding:13px; margin-bottom:14px;
}
.bpp-yoy-header-icon  { font-size:26px }
.bpp-yoy-header-title { font-size:14px; font-weight:700; color:var(--blue) }
.bpp-yoy-header-sub   { font-size:11.5px; color:var(--ink4); margin-top:2px }
.bpp-yoy-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:14px }
.bpp-yoy-inp-lbl {
  display:block; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--ink5); margin-bottom:5px;
}
.bpp-yoy-inp-box {
  display:flex; align-items:stretch; border:1px solid var(--border);
  border-radius:var(--rsm); overflow:hidden; background:var(--card2);
  transition:border-color var(--dur);
}
.bpp-yoy-inp-box:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.1) }
.bpp-yoy-inp-sym {
  padding:0 9px; font-size:14px; font-weight:600; color:var(--ink5);
  background:var(--card3); border-right:1px solid var(--border);
  display:flex; align-items:center; font-family:var(--font-num);
}
.bpp-yoy-inp {
  flex:1; border:none; background:transparent; font-family:var(--font-num);
  font-size:13.5px; color:var(--ink); padding:8px 10px; outline:none;
}
.bpp-yoy-pull-strip {
  background:var(--blue-lt); border:1px solid var(--blue-mid);
  border-radius:var(--rmd); padding:13px; margin-bottom:14px;
}
.bpp-yoy-pull-label {
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--blue); margin-bottom:11px;
}
.bpp-yoy-pull-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
.bpp-yoy-pull-kpi-lbl { font-size:10px; font-weight:700; color:var(--blue); opacity:.7; text-transform:uppercase; margin-bottom:2px }
.bpp-yoy-pull-kpi-val { font-size:14.5px; font-weight:700; font-family:var(--font-num); color:var(--blue) }
.bpp-yoy-table  { margin-bottom:13px }
.bpp-yoy-empty  { padding:18px; text-align:center; background:var(--card2); border-radius:var(--rmd); font-size:13px; color:var(--ink5) }
.bpp-yoy-insight{
  background:var(--blue-lt); border:1px solid var(--blue-mid);
  border-left:3px solid var(--blue); border-radius:var(--rmd);
  padding:13px; font-size:13px; color:var(--ink3); line-height:1.6;
}

/* ================================================================
   VARIABLE DASHBOARD — hero
   ================================================================ */
.bppv-hero {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--s0); overflow:hidden;
}
.bppv-hero-top { background:var(--ink); padding:18px 22px 16px }
.bpp-dark .bppv-hero-top { background:#1e2640 }
.bppv-greet { font-size:18px; font-weight:700; color:#fff; margin-bottom:4px }
.bppv-hero-tag { font-size:12.5px; color:rgba(255,255,255,.55) }
.bppv-kpi-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--border) }
.bppv-kpi { background:var(--card); padding:14px 16px }
.bppv-kpi-center { border-left:1px solid var(--border); border-right:1px solid var(--border) }
.bppv-kpi-lbl  { font-size:10.5px; font-weight:700; color:var(--ink5); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px }
.bppv-kpi-val  { font-size:20px; font-weight:700; font-family:var(--font-num); color:var(--ink); line-height:1.1 }
.bppv-kpi-sub  { font-size:11px; color:var(--ink5); margin-top:2px }
.bppv-hero-btns { display:flex; gap:9px; padding:12px 16px; border-bottom:1px solid var(--border) }
.bppv-btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--green); color:#fff; border:none; border-radius:var(--rsm);
  padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; transition:all var(--dur);
}
.bppv-btn-primary:hover { background:var(--green-dk) }
.bppv-btn-secondary {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card2); color:var(--ink3); border:1px solid var(--border);
  border-radius:var(--rsm); padding:9px 16px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all var(--dur);
}
.bppv-btn-secondary:hover { background:var(--blue-lt); border-color:var(--blue); color:var(--blue) }
.bppv-log-form { padding:13px 16px; border-top:1px solid var(--border) }
.bppv-lf-row { display:grid; grid-template-columns:1fr auto auto; gap:9px; margin-bottom:9px }
.bppv-lf-lbl { display:block; font-size:10.5px; font-weight:700; color:var(--ink5); text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px }
.bppv-lf-inp {
  width:100%; border:1px solid var(--border); border-radius:var(--rsm);
  padding:8px 10px; font-size:13.5px; color:var(--ink);
  background:var(--card2); outline:none; transition:border-color var(--dur);
}
.bppv-lf-inp:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.1) }
.bppv-lf-amt { font-family:var(--font-num) }
.bppv-lf-amt-field { width:130px }
.bppv-lf-date-field { width:138px }
.bppv-lf-btns { display:flex; gap:7px; align-items:center }
.bppv-lf-save {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--green); color:#fff; border:none; border-radius:var(--rsm);
  padding:8px 15px; font-size:13px; font-weight:700; cursor:pointer; transition:all var(--dur);
}
.bppv-lf-save:hover { background:var(--green-dk) }
.bppv-lf-zero {
  background:var(--card2); border:1px dashed var(--bord2); color:var(--ink5);
  border-radius:var(--rsm); padding:7px 12px; font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--dur);
}
.bppv-lf-zero:hover { border-color:var(--amber); color:var(--amber) }
.bppv-lf-cancel {
  background:none; border:none; color:var(--ink5); font-size:13px;
  cursor:pointer; transition:color var(--dur);
}
.bppv-lf-cancel:hover { color:var(--ink) }
/* cash flow */
.bppv-cf { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; box-shadow:var(--s0) }
.bppv-cf-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.bppv-cf-title { font-size:14px; font-weight:700; color:var(--ink) }
.bppv-cf-stab { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--ink5) }
.bppv-stab-dot { width:8px; height:8px; border-radius:50%; background:var(--ink6); display:inline-block }
.bppv-cf-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.bppv-cf-tile { background:var(--card2); border-radius:var(--rsm); padding:13px; text-align:center; border:1px solid var(--border) }
.bppv-cf-tile-ico { font-size:19px; margin-bottom:5px }
.bppv-cf-tile-val { font-size:19px; font-weight:700; font-family:var(--font-num); color:var(--ink) }
.bppv-cf-tile-lbl { font-size:11px; color:var(--ink5); margin-top:2px }
.bppv-cf-alert { margin-top:9px; padding:9px 12px; border-radius:var(--rsm); font-size:12.5px; font-weight:600 }
/* tabs */
.bppv-tabs {
  display:flex; gap:4px; background:var(--card2);
  border:1px solid var(--border); border-radius:var(--rsm); padding:3px; margin-bottom:11px;
}
.bppv-tab {
  flex:1; padding:6px 11px; border:none; background:none; border-radius:6px;
  font-size:12.5px; font-weight:600; color:var(--ink5); cursor:pointer; transition:all var(--dur);
}
.bppv-tab.active { background:var(--card); color:var(--blue); box-shadow:var(--s0) }
.bppv-empty { text-align:center; padding:18px; font-size:12.5px; color:var(--ink5); background:var(--card2); border-radius:var(--rsm) }
/* safe spend */
.bppv-safe-display { text-align:center; padding:15px; background:var(--blue); border-radius:var(--rmd); margin-bottom:12px }
.bppv-safe-lbl    { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.7); margin-bottom:5px }
.bppv-safe-amount { font-size:30px; font-weight:800; font-family:var(--font-num); color:#fff; line-height:1; margin-bottom:3px }
.bppv-safe-hint   { font-size:12px; color:rgba(255,255,255,.6) }
.bppv-safe-formula {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rsm); padding:11px; margin-bottom:11px; display:flex; flex-direction:column; gap:5px;
}
.bppv-sf-row { display:flex; justify-content:space-between; font-size:12.5px }
.bppv-sf-key { color:var(--ink4) }
.bppv-sf-val { font-weight:700; font-family:var(--font-num); color:var(--ink) }
.bppv-sf-minus .bppv-sf-val { color:var(--red) }
.bppv-safe-inputs { display:grid; grid-template-columns:1fr 1fr; gap:11px }
.bppv-inp-lbl { display:block; font-size:11.5px; font-weight:600; color:var(--ink5); margin-bottom:5px }
.bppv-inp {
  width:100%; border:1px solid var(--border); border-radius:var(--rsm);
  padding:8px 10px; font-family:var(--font-num); font-size:13.5px;
  color:var(--ink); background:var(--card2); outline:none; transition:border-color var(--dur);
}
.bppv-inp:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.1) }
/* stability */
.bppv-stab-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px }
.bppv-stat {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rmd); padding:13px; text-align:center;
}
.bppv-stat-ico  { font-size:19px; margin-bottom:5px }
.bppv-stat-val  { font-size:17px; font-weight:700; font-family:var(--font-num); color:var(--ink) }
.bppv-stat-lbl  { font-size:11px; color:var(--ink5); margin-top:2px }
.bppv-stat-date { font-size:10.5px; color:var(--ink6); margin-top:1px }
.bppv-chart-hd  { font-size:11.5px; font-weight:700; color:var(--ink4); text-transform:uppercase; letter-spacing:.4px; margin-bottom:7px }
.bppv-bars30    { display:flex; gap:3px; align-items:flex-end; height:58px }
.bppv-cons-row  { display:flex; align-items:center; gap:9px; margin-top:11px }
.bppv-cons-lbl  { font-size:12px; color:var(--ink5); font-weight:600; min-width:110px }
.bppv-cons-track{ flex:1; height:6px; background:var(--border); border-radius:10px; overflow:hidden }
.bppv-cons-fill { height:100%; background:var(--blue); border-radius:10px; transition:width .7s ease }
.bppv-cons-val  { font-size:12px; font-weight:700; font-family:var(--font-num); color:var(--ink4); min-width:42px; text-align:right }
/* flexible budget */
.bppv-fb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px }
.bppv-fb-card {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rmd); padding:15px;
}
.bppv-fb-ico { font-size:21px; margin-bottom:7px }
.bppv-fb-lbl { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:2px }
.bppv-fb-lbl small { display:block; font-size:11px; color:var(--ink5); font-weight:400; margin-top:1px; margin-bottom:7px }
.bppv-fb-bar-wrap { height:5px; background:var(--border); border-radius:10px; overflow:hidden; margin:7px 0 }
.bppv-fb-bar { height:100%; background:var(--blue); border-radius:10px; transition:width .7s ease }
.bppv-fb-status { font-size:11.5px; font-weight:600; margin-top:5px }
.bppv-slider-wrap { display:flex; align-items:center; gap:8px }
.bppv-slider { flex:1; accent-color:var(--blue) }
.bppv-slider-val { font-size:13px; font-weight:700; font-family:var(--font-num); color:var(--blue); min-width:34px }
/* emergency buffer */
.bppv-emg-inputs { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:12px }
.bppv-emg-target-row { display:flex; align-items:center; gap:8px; margin-bottom:7px }
.bppv-emg-lbl    { font-size:13px; font-weight:600; color:var(--ink4) }
.bppv-emg-target { font-size:19px; font-weight:700; font-family:var(--font-num); color:var(--ink) }
.bppv-emg-track  { height:8px; background:var(--border); border-radius:10px; overflow:hidden; margin-bottom:5px }
.bppv-emg-fill   { height:100%; background:var(--blue); border-radius:10px; transition:width .7s ease }
.bppv-emg-meta   { display:flex; justify-content:space-between; font-size:12px; color:var(--ink5) }
/* goal-based saving */
.bppv-goal-starters { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px }
.bppv-starter {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; background:var(--card2); border:1px solid var(--border);
  border-radius:20px; font-size:12.5px; font-weight:600; color:var(--ink3);
  cursor:pointer; transition:all var(--dur);
}
.bppv-starter:hover { background:var(--blue-lt); border-color:var(--blue); color:var(--blue) }
.bppv-add-goal {
  display:flex; align-items:center; justify-content:center; width:100%;
  border:2px dashed var(--bord2); background:var(--card2);
  border-radius:var(--rmd); padding:11px; font-size:13.5px; font-weight:700;
  color:var(--blue); cursor:pointer; transition:all var(--dur);
}
.bppv-add-goal:hover { border-color:var(--blue); background:var(--blue-lt) }
.bppv-goal-form {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rmd); padding:13px; margin-top:9px;
  display:flex; flex-direction:column; gap:7px;
}
.bppv-gf-btns { display:flex; gap:7px }
.bppv-gf-save {
  flex:1; background:var(--blue); color:#fff; border:none;
  border-radius:var(--rsm); padding:8px; font-size:13px; font-weight:700;
  cursor:pointer; transition:all var(--dur);
}
.bppv-gf-save:hover { background:var(--blue-dk) }
.bppv-gf-cancel {
  background:var(--card); border:1px solid var(--border); color:var(--ink5);
  border-radius:var(--rsm); padding:8px 15px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all var(--dur);
}
.bppv-gf-cancel:hover { background:var(--card3) }
/* pattern insights */
.bppv-wk-hd   { font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:9px }
.bppv-wk-hint { font-size:11px; color:var(--ink5); font-weight:400 }
.bppv-wk-bars { display:flex; gap:5px; align-items:flex-end; height:58px; margin-bottom:12px }
/* calc button */
.vd-calc-wrap  { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap }
.vd-calc-btn   {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff; border:none; border-radius:var(--rsm);
  padding:11px 20px; font-size:14px; font-weight:700; cursor:pointer;
  transition:all var(--dur); box-shadow:var(--sb);
}
.vd-calc-btn:hover { background:var(--blue-dk); transform:translateY(-1px) }
.vd-calc-hint  { font-size:12px; color:var(--ink5) }

/* ================================================================
   TRUST / LEAD / FOOTER / SEO
   ================================================================ */
.bpp-trust-strip {
  overflow: hidden;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: var(--r);
  padding: 12px 0;
  position: relative;
}
.bpp-dark .bpp-trust-strip {
  background: rgba(79,70,229,.12);
  border-color: rgba(79,70,229,.25);
}
.bpp-trust-strip-inner {
  display: flex;
  align-items: center;
  gap: 0;
  animation: trust-scroll 28s linear infinite;
  width: max-content;
}
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bpp-trust-badge {
  font-size: 12.5px;
  font-weight: 700;
  color: #3730A3;
  white-space: nowrap;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-right: 1.5px solid #C7D2FE;
}
.bpp-dark .bpp-trust-badge {
  color: #A5B4FC;
  border-right-color: rgba(79,70,229,.25);
}
.bpp-lead-magnet {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:18px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; box-shadow:var(--s0);
}
.bpp-lead-icon { font-size:30px }
.bpp-lead-body { flex:1; min-width:180px }
.bpp-lead-body h3 { font-size:15px; font-weight:700; color:var(--ink); margin:0 0 3px }
.bpp-lead-body p  { font-size:12.5px; color:var(--ink5); margin:0 }
.bpp-lead-form    { display:flex; gap:7px }
.bpp-lead-input {
  border:1px solid var(--border); border-radius:var(--rsm); padding:8px 11px;
  font-size:13px; color:var(--ink); background:var(--card2); outline:none;
  width:210px; transition:border-color var(--dur);
}
.bpp-lead-input:focus { border-color:var(--blue) }
.bpp-lead-btn {
  background:var(--blue); color:#fff; border:none; border-radius:var(--rsm);
  padding:8px 15px; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:all var(--dur);
}
.bpp-lead-btn:hover { background:var(--blue-dk) }
.bpp-lead-note { font-size:10px; color:var(--ink6); margin:7px 0 0; width:100% }
.bpp-disclaimer {
  display:flex; align-items:flex-start; gap:7px;
  padding:11px 14px; background:var(--card2); border:1px solid var(--border);
  border-radius:var(--rsm); font-size:12px; color:var(--ink5); line-height:1.5;
}
.bpp-disclaimer svg { stroke:var(--amber); flex-shrink:0; margin-top:1px }
/* SEO */
.bpp-seo-toggle { background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--s0); overflow:hidden }
.bpp-seo-toggle-hd {
  display:flex; align-items:center; gap:8px; padding:13px 18px;
  cursor:pointer; list-style:none; font-size:13.5px; font-weight:700;
  color:var(--ink); transition:background var(--dur);
}
.bpp-seo-toggle-hd:hover { background:var(--card2) }
.bpp-seo-toggle-arr { stroke:var(--ink5); margin-left:auto }
details[open] .bpp-seo-toggle-arr { transform:rotate(180deg) }
.bpp-seo-inner { padding:18px 22px; border-top:1px solid var(--border) }
.bpp-seo-inner h2 { font-size:15.5px; font-weight:700; color:var(--ink); margin:18px 0 7px }
.bpp-seo-inner h2:first-child { margin-top:0 }
.bpp-seo-inner p  { font-size:13px; color:var(--ink4); line-height:1.7; margin:0 0 10px }
.bpp-seo-inner ul { padding-left:18px; margin:0 0 10px }
.bpp-seo-inner li { font-size:13px; color:var(--ink4); line-height:1.7; margin-bottom:3px }
.bpp-rules-explainer { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:11px 0 }
.bpp-re-item {
  display:flex; gap:9px; background:var(--card2);
  border:1px solid var(--border); border-radius:var(--rsm); padding:11px;
}
.bpp-re-num { font-size:11.5px; font-weight:800; color:var(--blue); min-width:52px; font-family:var(--font-num); padding-top:2px }
.bpp-re-item strong { font-size:12.5px; display:block; margin-bottom:2px; color:var(--ink) }
.bpp-re-item p { font-size:11.5px; color:var(--ink5); margin:0 }
.bpp-tips-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px }
.bpp-tip { display:flex; gap:9px; background:var(--card2); border:1px solid var(--border); border-radius:var(--rsm); padding:11px }
.bpp-tip-n { font-size:17px; font-weight:800; font-family:var(--font-num); color:var(--ink6); flex-shrink:0 }
.bpp-tip strong { font-size:12.5px; display:block; margin-bottom:2px }
.bpp-tip p { font-size:12px; color:var(--ink5); margin:0 }
.bpp-faq { display:flex; flex-direction:column; gap:5px }
.bpp-faq-item { background:var(--card2); border:1px solid var(--border); border-radius:var(--rsm); overflow:hidden }
.bpp-faq-item summary { padding:11px 14px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; transition:background var(--dur) }
.bpp-faq-item summary:hover { background:var(--card3) }
.bpp-faq-item p { padding:0 14px 11px; font-size:13px; color:var(--ink4); line-height:1.6; margin:0 }
.bpp-cta-bottom {
  text-align:center; padding:22px; background:var(--blue-lt);
  border-radius:var(--r); border:1px solid var(--blue-mid); margin-top:18px;
}
.bpp-cta-bottom h3 { font-size:16px; font-weight:700; color:var(--blue); margin:0 0 5px }
.bpp-cta-bottom p  { font-size:12.5px; color:var(--ink4); margin:0 0 13px }
.bpp-cta-link {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--blue); color:#fff; padding:9px 18px;
  border-radius:var(--rsm); font-size:13px; font-weight:700;
  text-decoration:none; transition:all var(--dur);
}
.bpp-cta-link:hover { background:var(--blue-dk) }
/* footer */
/* ── Footer — sits inside .bpp-main, sidebar excluded ── */
.bpp-footer {
  border-top: 1px solid var(--border);
  padding: 14px 22px 18px;
  margin-top: 32px;
  background: transparent;
}
.bpp-footer-bottom {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink5); line-height: 1.6;
}
.bpp-footer-dis { font-size: 11.5px; color: var(--ink5); }
.bpp-footer-dis strong { color: var(--ink3); font-weight: 600; }

/* ================================================================
   FAB + OVERLAY
   ================================================================ */
.bpp-fab {
  position:fixed; bottom:26px; right:26px; z-index:500;
  display:flex; align-items:center; gap:7px;
  background:var(--blue); color:#fff; border:none; border-radius:28px;
  padding:12px 20px 12px 14px; font-size:13.5px; font-weight:700;
  cursor:pointer; box-shadow:var(--s2),var(--sb); transition:all var(--durm);
}
.bpp-fab:hover { background:var(--blue-dk); transform:translateY(-2px); box-shadow:var(--s3),var(--sb) }
.bpp-fab-pulse {
  position:absolute; top:-3px; right:-3px; width:12px; height:12px;
  background:var(--red); border-radius:50%; border:2px solid #fff;
  animation:fab-pulse 2s ease infinite;
}
@keyframes fab-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.2);opacity:.8} }
.bpp-fab-overlay {
  position:fixed; inset:0; z-index:700; background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px); display:none; align-items:flex-end;
  justify-content:flex-end; padding:0 26px 96px;
}
.bpp-fab-overlay.open { display:flex }
.bpp-fab-popup {
  background:var(--card); border-radius:var(--rlg);
  box-shadow:var(--sm); width:380px; max-width:calc(100vw - 28px);
  animation:popup-rise .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popup-rise { from{transform:translateY(28px);opacity:0} to{transform:translateY(0);opacity:1} }
.bpp-fab-popup-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 17px; border-bottom:1px solid var(--border);
}
.bpp-fab-popup-title { font-size:14px; font-weight:700; color:var(--ink) }
.bpp-fab-popup-close {
  background:none; border:none; font-size:21px; cursor:pointer;
  color:var(--ink5); padding:0 5px; border-radius:6px; transition:all var(--dur);
}
.bpp-fab-popup-close:hover { background:var(--card2); color:var(--ink) }
.bpp-fab-popup-body { padding:14px 17px; display:flex; flex-direction:column; gap:9px }
.bpp-fab-input {
  flex:1; border:none; background:transparent; font-family:var(--font-num);
  font-size:20px; font-weight:700; color:var(--ink); padding:10px 12px; outline:none; width:100%;
}
.bpp-quick-amounts { display:flex; gap:5px }
.bpp-qamt {
  flex:1; padding:7px 5px; border:1px solid var(--border); background:var(--card2);
  border-radius:var(--rsm); font-size:12.5px; font-weight:700; color:var(--ink3);
  cursor:pointer; font-family:var(--font-num); transition:all var(--dur);
}
.bpp-qamt:hover { background:var(--blue-lt); border-color:var(--blue); color:var(--blue) }
.bpp-fab-cat-wrap { position:relative }
.bpp-fab-cat-input {
  width:100%; border:1px solid var(--border); border-radius:var(--rsm);
  padding:8px 11px; font-size:13.5px; color:var(--ink);
  background:var(--card2); outline:none; transition:border-color var(--dur);
}
.bpp-fab-cat-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,81,181,.1) }
.bpp-fab-suggestion {
  position:absolute; top:100%; left:0; right:0; z-index:10;
  background:var(--card); border:1px solid var(--border);
  border-radius:0 0 var(--rsm) var(--rsm); box-shadow:var(--s1);
}
.bpp-fab-log-btn {
  width:100%; background:var(--blue); color:#fff; border:none;
  border-radius:var(--rsm); padding:13px; font-size:14.5px; font-weight:700;
  cursor:pointer; transition:all var(--dur); box-shadow:var(--sb);
}
.bpp-fab-log-btn:hover { background:var(--blue-dk) }
.bpp-confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:9999 }

/* ================================================================
   MOBILE BOTTOM NAV
   ================================================================ */
.bpp-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(0,0,0,.10);
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bpp-bn-inner {
  display: flex; align-items: center; justify-content: space-around;
  height: 100%; padding: 0 12px;
  max-width: 520px; margin: 0 auto; width: 100%;
}
.bpp-bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 6px 10px;
  border: none; background: none; cursor: pointer; color: var(--ink5);
  font-size: 10.5px; font-weight: 600; text-decoration: none;
  transition: color var(--dur); border-radius: var(--rsm);
}
.bpp-bn-item svg { stroke: var(--ink5); transition: stroke var(--dur); flex-shrink: 0; }
.bpp-bn-item:hover, .bpp-bn-active { color: var(--blue); }
.bpp-bn-item:hover svg, .bpp-bn-active svg { stroke: var(--blue); }
.bpp-bn-add {
  width: 50px !important; height: 50px !important; border-radius: 50% !important;
  background: var(--blue) !important; color: #fff !important;
  box-shadow: 0 4px 16px rgba(63,81,181,.40) !important;
  margin-top: -20px !important;
  flex: none !important; padding: 0 !important; gap: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.bpp-bn-add svg { stroke: #fff !important; }
.bpp-bn-inner {
  display: flex; align-items: center; height: 100%;
  padding: 0 8px; max-width: 500px; margin: 0 auto; width: 100%;
  justify-content: space-around;
}

/* ================================================================
   DARK MODE OVERRIDES
   ================================================================ */
.bpp-dark .bpp-nav    { background:var(--card); border-bottom-color:var(--border) }
.bpp-dark .bpp-sidebar{ background:var(--card); border-right-color:var(--border) }
.bpp-dark .bpp-right-panel{ background:var(--card); border-left-color:var(--border) }
.bpp-dark .bpp-bottom-nav { background:var(--card); border-top-color:var(--border) }
.bpp-dark .bpp-footer { border-top-color:var(--border); }
.bpp-dark .bpp-hero-card  { background:#1e2640 }
.bpp-dark .bppv-hero-top  { background:#1e2640 }
.bpp-dark .bpp-kpi-savings-card { background:var(--blue) !important }

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
/* ≤ 1280px */
@media(max-width:1280px){
  :root{ --sw:208px; --rw:248px }
  .bpp-overview { grid-template-columns:repeat(2,1fr) }
  .bpp-grid4    { grid-template-columns:repeat(2,1fr) }
  .bpp-goal-cards { grid-template-columns:repeat(2,1fr) }
  .bpp-yoy-pull-kpis { grid-template-columns:repeat(2,1fr) }
}
/* ≤ 1100px: hide right panel */
@media(max-width:1100px){
  .bpp-right-panel { display:none }
  .bpp-daily-hero-grid { grid-template-columns:1fr 340px }
  .bpp-kpi-hero { grid-template-columns:repeat(2,1fr) }
}
/* ≤ 900px: hamburger sidebar */
@media(max-width:1280px){
  /* sidebar rules moved to final block below */
  .bpp-ham { display:flex }
  .bpp-nav-center { display:none }
  .bpp-daily-hero-grid { grid-template-columns:1fr }
  .bpp-panel-slider    { grid-template-columns:1fr }
  .bpp-summary-slider  { grid-template-columns:1fr 1fr }
}
/* ≤ 768px */
@media(max-width:768px){
  :root{ --hh:56px }
  .bpp-tool-wrap { padding:14px; gap:13px }
  .bpp-overview  { grid-template-columns:repeat(2,1fr); gap:9px }
  .bpp-grid4     { grid-template-columns:1fr 1fr; gap:10px }
  .bpp-summary-slider { grid-template-columns:1fr }
  .bpp-kpi-hero  { grid-template-columns:repeat(2,1fr); gap:10px }
  .bpp-weekly-stats-wide { grid-template-columns:repeat(2,1fr) }
  .bpp-goal-cards { grid-template-columns:1fr 1fr; gap:9px }
  .bpp-yoy-inputs { grid-template-columns:1fr }
  .bpp-footer-inner { grid-template-columns:1fr 1fr; gap:18px }
  .bpp-today-kpis { grid-template-columns:1fr 1fr }
  .bpp-tkpi-primary { grid-column:1/-1 }
  .bpp-vi-kpis { grid-template-columns:1fr 1fr }
  .bppv-fb-grid { grid-template-columns:1fr }
  .bppv-emg-inputs { grid-template-columns:1fr }
  .bpp-rvb-inputs { grid-template-columns:1fr }
  .bpp-rvb-divider { display:none }
  .bpp-rules-explainer { grid-template-columns:1fr }
  .bpp-tips-grid { grid-template-columns:1fr }
  .bpp-lead-magnet { flex-direction:column; gap:11px }
  .bpp-lead-form { width:100% }
  .bpp-lead-input { flex:1; width:auto }
  .bppv-lf-row { grid-template-columns:1fr }
  .bppv-lf-amt-field,.bppv-lf-date-field { width:100% }
  .bppv-kpi-row { grid-template-columns:1fr }
  .bppv-kpi-center { border:none; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
}
/* ≤ 599px: mobile */
@media(max-width:599px){
  .bpp-bottom-nav { display: flex !important; }
  .bpp-fab { bottom: 76px; right: 14px; padding: 13px; border-radius: 50%; }
  .bpp-fab-label { display: none; }
  .bpp-tool-wrap { padding-bottom: 80px !important; }  /* clear fixed bottom nav */
  .bpp-overview { grid-template-columns:1fr 1fr; gap:8px }
  .bpp-ov { padding:14px }
  .bpp-ov-val { font-size:20px }
  .bpp-grid4 { grid-template-columns:1fr }
  .bpp-kpi-hero { grid-template-columns:1fr 1fr }
  .bpp-score-body { flex-direction:column }
  .bpp-fab-overlay { padding:0 10px 16px }
  .bpp-fab-popup { width:100% }
  .bppv-cf-tiles { grid-template-columns:repeat(3,1fr) }
  .bpp-footer-inner { grid-template-columns:1fr; gap:14px }
  .bpp-nav-right .bpp-nav-icon-btn { display:none }
  .bpp-nav-right #bpp-nav-notif  { display:flex !important }
  .bpp-nav-right #bpp-nav-profile { display:flex !important }
  .bpp-hero-top-bar { flex-direction:column; align-items:flex-start; gap:5px }
}

/* ================================================================
   PREMIUM HERO CARD v2
   ================================================================ */
.bpp-hero-v2 {
  background: var(--ink);
  border-radius: var(--r) var(--r) 0 0;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
}
.bpp-dark .bpp-hero-v2 { background: #1a2038; }
.bpp-hv2-greeting {
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,.7);
  margin-bottom: 16px; letter-spacing: .2px;
}
.bpp-hv2-kpi-row {
  display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.bpp-hv2-kpi-block { flex: 1; min-width: 120px; }
.bpp-hv2-kpi-lbl {
  font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px;
}
.bpp-hv2-kpi-val {
  font-family: var(--font-num); font-size: 26px; font-weight: 700;
  color: #fff; line-height: 1.1;
}
.bpp-hv2-month-txt {
  font-family: var(--font-num); font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.85); margin-bottom: 8px;
}
.bpp-hv2-month-bar {
  height: 5px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden;
}
.bpp-hv2-month-fill {
  height: 100%; background: var(--green); border-radius: 99px;
  transition: width .6s ease;
}
.bpp-hv2-add-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff; border: none;
  border-radius: var(--rsm); padding: 11px 22px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--dur); box-shadow: var(--sb);
  width: 100%;
  justify-content: center;
}
.bpp-hv2-add-btn:hover { background: var(--blue-dk); transform: translateY(-1px); }

/* ================================================================
   DAILY ACTION INSIGHT BANNER
   ================================================================ */
.bpp-dai-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px;
  background: var(--amber-lt); border: 1px solid var(--amber);
  border-radius: var(--rsm); margin-top: 10px;
  flex-wrap: wrap;
}
.bpp-dai-inner { display: flex; align-items: flex-start; gap: 9px; flex: 1; }
.bpp-dai-ico { font-size: 16px; line-height: 1.3; }
.bpp-dai-body { display: flex; flex-direction: column; gap: 1px; }
.bpp-dai-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: #92400E;
}
.bpp-dai-msg { font-size: 13px; font-weight: 500; color: #78350F; }
.bpp-dai-cta {
  background: #92400E; color: #fff; border: none;
  border-radius: var(--rsm); padding: 7px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background var(--dur);
}
.bpp-dai-cta:hover { background: #78350F; }

/* ================================================================
   MONTHLY CATEGORY BREAKDOWN
   ================================================================ */
.bpp-cat-breakdown {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px;
  box-shadow: var(--s0); margin-bottom: 14px;
}
.bpp-cb-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 8px;
}
.bpp-cb-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.bpp-cb-sub { font-size: 11px; color: var(--ink5); }
.bpp-cb-rows { display: flex; flex-direction: column; gap: 11px; }
.bpp-cb-row {}
.bpp-cb-row-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.bpp-cb-cat { font-size: 13px; font-weight: 600; color: var(--ink2); }
.bpp-cb-amt { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--ink); }
.bpp-cb-track {
  height: 7px; background: var(--card2); border-radius: 99px; overflow: hidden;
}
.bpp-cb-fill {
  height: 100%; background: var(--blue); border-radius: 99px;
  transition: width .5s ease;
}

/* ================================================================
   PREMIUM BOTTOM SHEET — Compact
   ================================================================ */
.bpp-fab-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,.48); backdrop-filter: blur(3px);
  display: none; align-items: flex-end; justify-content: center;
}
.bpp-fab-overlay.open { display: flex; }

.bpp-bs {
  background: var(--card);
  border-radius: 18px 18px 0 0;
  width: 100%; max-width: 520px;
  max-height: 82vh; overflow: hidden;
  display: flex; flex-direction: column;
  animation: bpp-sheet-rise .26s cubic-bezier(.32,1,.28,1);
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
}
@keyframes bpp-sheet-rise {
  from { transform: translateY(100%); opacity: .3; }
  to   { transform: translateY(0);    opacity: 1; }
}

.bpp-bs-handle {
  width: 36px; height: 3px; background: var(--ink6);
  border-radius: 99px; margin: 8px auto 0; flex-shrink: 0;
}
.bpp-bs-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 8px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bpp-bs-title-grp { display: flex; align-items: center; gap: 6px; }
.bpp-bs-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.bpp-bs-close {
  background: var(--card2); border: none; border-radius: 50%;
  width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--ink3);
  transition: all var(--dur); flex-shrink: 0;
}
.bpp-bs-close:hover { background: var(--card3); color: var(--ink); }

/* Mode Tabs */
.bpp-bs-tabs {
  display: flex; gap: 0; padding: 0 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bpp-bst {
  flex: 1; padding: 7px 6px; font-size: 12px; font-weight: 600;
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; color: var(--ink4); transition: all var(--dur);
  margin-bottom: -1px;
}
.bpp-bst-active {
  color: var(--blue); border-bottom-color: var(--blue);
}

/* Panel */
.bpp-bs-panel {
  padding: 10px 16px 16px;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.bpp-bs-panel::-webkit-scrollbar { width: 3px; }
.bpp-bs-panel::-webkit-scrollbar-thumb { background: var(--ink6); border-radius: 99px; }

/* Fields */
.bpp-bsf { display: flex; flex-direction: column; gap: 4px; }
.bpp-bsl { font-size: 10px; font-weight: 700; color: var(--ink4); text-transform: uppercase; letter-spacing: .5px; }
.bpp-bsl-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink5); }

/* Amount input — compact */
.bpp-bs-amt-wrap {
  display: flex; align-items: center; background: var(--card2);
  border: 1.5px solid var(--border); border-radius: var(--rsm); overflow: hidden;
  transition: border-color var(--dur);
}
.bpp-bs-amt-wrap:focus-within { border-color: var(--blue); }
.bpp-bs-sym {
  padding: 0 10px 0 12px; font-size: 15px; font-weight: 700;
  color: var(--ink3); flex-shrink: 0; border-right: 1px solid var(--border);
}
.bpp-bs-amt {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-num); font-size: 20px; font-weight: 700;
  color: var(--ink); padding: 9px 10px; outline: none; width: 100%;
}

/* Category chips — smaller */
.bpp-cat-slider-wrap {
  position: relative;
  margin: 0 -2px;
}
/* Right fade hint — shows chips continue */
.bpp-cat-slider-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 6px;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--card, #fff));
  pointer-events: none;
  z-index: 1;
}
.bpp-bs-chips {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 1px 0;
}
/* Horizontal scroll when inside slider wrapper */
.bpp-cat-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 6px !important;
  padding: 2px 4px 8px !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.bpp-cat-slider:active { cursor: grabbing; }
.bpp-cat-slider::-webkit-scrollbar { display: none; }
.bpp-cat-slider .bpp-chip { flex-shrink: 0 !important; scroll-snap-align: start; }

.bpp-bs-chips .bpp-chip {
  padding: 5px 11px; font-size: 12px; font-weight: 600;
  border-radius: 99px; border: 1.5px solid var(--border);
  background: var(--card2); color: var(--ink3);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.bpp-bs-chips .bpp-chip:hover,
.bpp-bs-chips .bpp-chip.active,
.bpp-fab-chips .bpp-chip.active {
  background: var(--blue-lt); border-color: var(--blue); color: var(--blue); font-weight: 700;
}

/* Text inputs */
.bpp-bs-inp {
  width: 100%; border: 1px solid var(--border); border-radius: var(--rsm);
  padding: 8px 12px; font-size: 13px; color: var(--ink);
  background: var(--card2); outline: none; transition: border-color var(--dur);
}
.bpp-bs-inp:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(63,81,181,.1); }
.bpp-bs-date { font-family: var(--font-ui); }
.bpp-inp-err { border-color: var(--red) !important; animation: bpp-shake .4s ease; }
@keyframes bpp-shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 60%{transform:translateX(5px)}
}

/* Quick amounts */
.bpp-quick-amounts { display: flex; gap: 5px; }
.bpp-qamt {
  flex: 1; padding: 6px 3px; border: 1px solid var(--border);
  background: var(--card2); border-radius: var(--rsm);
  font-size: 11.5px; font-weight: 700; color: var(--ink3);
  cursor: pointer; font-family: var(--font-num); transition: all var(--dur);
}
.bpp-qamt:hover, .bpp-qamt.active {
  background: var(--blue-lt); border-color: var(--blue); color: var(--blue);
}

/* Save button */
.bpp-bs-save-btn {
  width: 100%; background: var(--blue); color: #fff; border: none;
  border-radius: var(--rsm); padding: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all var(--dur); box-shadow: var(--sb);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.bpp-bs-save-btn:hover { background: var(--blue-dk); transform: translateY(-1px); }
.bpp-bs-save-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.bpp-bs-save-ico { display: flex; align-items: center; }

/* Success animation */
.bpp-bs-success {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 10px 0;
}
.bpp-tick-svg { width: 38px; height: 38px; }
.bpp-tick-circle {
  stroke: var(--green); stroke-width: 2.5;
  stroke-dasharray: 157; stroke-dashoffset: 157;
  animation: bpp-circle-draw .4s ease forwards;
}
@keyframes bpp-circle-draw {
  to { stroke-dashoffset: 0; }
}
.bpp-tick-check {
  stroke: var(--green); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 50; stroke-dashoffset: 50;
}
.bpp-tick-anim {
  animation: bpp-check-draw .3s ease .3s forwards;
}
@keyframes bpp-check-draw {
  to { stroke-dashoffset: 0; }
}
.bpp-bs-success-txt { font-size: 14px; font-weight: 700; color: var(--green); }

/* Bulk nudge */
.bpp-bulk-nudge {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--blue-lt); border: 1px solid var(--blue-mid);
  border-radius: var(--rsm); padding: 10px 14px;
  font-size: 12.5px; color: var(--ink3);
}
.bpp-bulk-nudge-link {
  background: none; border: none; color: var(--blue);
  font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0;
  text-decoration: underline;
}

/* Bulk rows */
.bpp-bulk-hd { font-size: 14px; font-weight: 700; color: var(--ink2); margin-bottom: 4px; }
.bpp-bulk-rows { display: flex; flex-direction: column; gap: 12px; }
.bpp-bulk-entry {
  background: var(--card2); border: 1.5px solid var(--border);
  border-radius: var(--rmd); padding: 12px 14px;
}
.bpp-bulk-entry-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.bpp-bulk-num { font-size: 12px; font-weight: 700; color: var(--ink4); text-transform: uppercase; letter-spacing: .4px; }
.bpp-bulk-del {
  background: none; border: none; color: var(--ink5);
  font-size: 14px; cursor: pointer; padding: 2px 5px;
  border-radius: 4px; transition: all var(--dur);
}
.bpp-bulk-del:hover { background: var(--red-lt); color: var(--red); }
.bpp-bulk-fields { display: flex; flex-direction: column; gap: 8px; }
.bpp-bulk-aw {
  display: flex; align-items: center; background: var(--card);
  border: 1.5px solid var(--border); border-radius: var(--rsm);
  transition: border-color var(--dur); overflow: hidden;
}
.bpp-bulk-aw:focus-within { border-color: var(--blue); }
.bpp-bulk-aw .bpp-sym { padding: 0 8px; font-size: 14px; font-weight: 700; color: var(--ink4); }
.bpp-bulk-amt {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-num); font-size: 16px; font-weight: 700;
  color: var(--ink); padding: 10px 8px 10px 0; outline: none;
}
.bpp-bulk-add-row {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px dashed var(--blue);
  color: var(--blue); border-radius: var(--rsm);
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  cursor: pointer; width: 100%; justify-content: center;
  transition: all var(--dur);
}
.bpp-bulk-add-row:hover { background: var(--blue-lt); }

/* Suggestion */
.bpp-fab-suggestion {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--rsm); padding: 8px 12px;
  font-size: 12.5px; color: var(--ink3); cursor: pointer;
  transition: background var(--dur);
}
.bpp-fab-suggestion:hover { background: var(--card2); }

/* Toast (if not already defined) */
.bpp-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 9999; background: var(--ink); color: #fff;
  padding: 11px 22px; border-radius: 99px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--s2); opacity: 0; transition: all .3s ease; white-space: nowrap;
  pointer-events: none;
}
.bpp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bpp-toast.success { background: var(--green); }
.bpp-toast.error   { background: var(--red); }
.bpp-toast.streak  { background: var(--amber); color: #fff; }

/* Mobile overrides */
@media(max-width:599px){
  .bpp-bs { border-radius: 16px 16px 0 0; max-height: 88vh; }
  .bpp-bs-amt { font-size: 18px; }
  .bpp-hv2-kpi-val { font-size: 20px; }
  .bpp-bs-chips .bpp-chip { padding: 5px 10px; font-size: 11.5px; }
  .bpp-bs-save-btn { padding: 12px; font-size: 14px; }
}


/* ================================================================
   LAYOUT PATCHES — 12 changes
   ================================================================ */

/* 2. Sidebar Income Type block */
.bpp-sb-income-type {
  background: var(--blue-lt); border: 1px solid var(--blue-mid);
  border-radius: var(--rmd); padding: 11px 14px; margin-bottom: 12px;
}
.bpp-sb-it-lbl {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--blue); margin-bottom: 4px;
}
.bpp-sb-it-val {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.bpp-sb-switch-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--blue);
  text-decoration: none; padding: 5px 9px;
  background: var(--card); border-radius: var(--rsm);
  border: 1px solid var(--blue-mid); transition: all var(--dur);
}
.bpp-sb-switch-link:hover { background: var(--blue); color: #fff; }

/* 3. Hero card — light gradient instead of black */
.bpp-hero-v2 {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563a8 60%, #3b82f6 100%) !important;
}
.bpp-dark .bpp-hero-v2 {
  background: linear-gradient(135deg, #0f1e35 0%, #1a3a6b 100%) !important;
}

/* 6. Today's Logged Expenses — professional look */
.bpp-today-log-wrap { padding: 10px 18px; }
.bpp-today-log-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink5); margin-bottom: 8px;
}
.bpp-log-item {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--card2);
  border: 1px solid var(--border); border-radius: var(--rsm);
  margin-bottom: 6px; transition: background var(--dur);
}
.bpp-log-item:hover { background: var(--card3); }
.bpp-log-cat {
  font-size: 13px; font-weight: 600; color: var(--ink2);
  display: flex; align-items: center; gap: 5px;
}
.bpp-log-amt {
  font-family: var(--font-num); font-size: 13.5px; font-weight: 700;
  color: var(--red);
}
.bpp-log-time {
  font-size: 11px; font-weight: 500; color: var(--ink5);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px;
}
.bpp-log-del {
  background: none; border: none; color: var(--ink5);
  font-size: 15px; cursor: pointer; padding: 2px 5px;
  border-radius: 4px; transition: all var(--dur); line-height: 1;
}
.bpp-log-del:hover { background: var(--red-lt); color: var(--red); }

/* 7. Pulse Chart — proper bars */
.bpp-pulse-chart {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 5px; height: 72px; align-items: flex-end;
  padding: 0 4px;
}
.bpp-pulse-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; height: 100%; justify-content: flex-end;
}
.bpp-pulse-bar-wrap {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
  min-height: 4px;
}
.bpp-pulse-bar {
  width: 100%; border-radius: 4px 4px 0 0;
  min-height: 4px; transition: height .4s ease;
}
.bpp-pulse-bar.today    { background: var(--blue); }
.bpp-pulse-bar.under    { background: var(--green); }
.bpp-pulse-bar.over     { background: var(--red); }
.bpp-pulse-bar.nodata   { background: var(--card3); height: 4px !important; }
.bpp-pulse-day-lbl {
  font-size: 9.5px; font-weight: 600; color: var(--ink5);
  text-align: center; white-space: nowrap;
}

/* 8. Weekly Snapshot — card grid */
.bpp-weekly-stats-wide {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 14px;
}
.bpp-wstat {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--rmd); padding: 12px 14px;
}
.bpp-wstat-lbl {
  font-size: 10px; font-weight: 700; color: var(--ink5);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px;
}
.bpp-wstat-val {
  font-size: 18px; font-weight: 700; font-family: var(--font-num); color: var(--ink);
}
@media(min-width:500px){
  .bpp-weekly-stats-wide { grid-template-columns: repeat(4,1fr); }
}

/* 9. Budget Setup layout */
.bpp-setup-top-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin-bottom: 14px;
}
.bpp-setup-savings-full { margin-bottom: 14px; }
.bpp-setup-savings-full .bpp-card { margin: 0; }
.bpp-setup-sav-inv-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin-bottom: 14px;
}
@media(max-width:599px){
  .bpp-setup-top-row,
  .bpp-setup-sav-inv-row { grid-template-columns: 1fr; }
}

/* 10. Smart Insights + SI Rate 2-col row */
.bpp-insights-si-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin-bottom: 14px;
}
@media(max-width:599px){ .bpp-insights-si-row { grid-template-columns: 1fr; } }

/* 11. Budget Rules grid: Needs & Wants in one row, Saving full */
.bpp-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 9px;
}
/* Force 3rd item (Saving) full-width */
.bpp-rule-grid .bpp-rule-item:nth-child(3) { grid-column: 1 / -1; }
.bpp-rule-item {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--rsm); padding: 10px 12px;
}
.bpp-ri-label { font-size: 12px; font-weight: 700; color: var(--ink2); margin-bottom: 2px; }
.bpp-ri-target { font-size: 10px; color: var(--ink5); margin-bottom: 4px; }
.bpp-ri-actual { font-size: 18px; font-weight: 700; font-family: var(--font-num); margin-bottom: 5px; }
.bpp-ri-bar-track { height: 6px; background: var(--card3); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.bpp-ri-bar-fill  { height: 100%; border-radius: 99px; transition: width .4s; }
.bpp-ri-status { font-size: 10.5px; font-weight: 600; }

/* 12. Goals summary card — light gradient instead of black */
.bpp-goals-summary-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%) !important;
  border-radius: var(--rmd); padding: 18px 20px; margin-bottom: 14px;
}
.bpp-dark .bpp-goals-summary-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
}

/* Hide chart tabs */
/* .bpp-chart-tabs display:none removed — tabs now active */

/* ================================================================
   BUDGET SETUP — NEW LAYOUT (savings ≠ investments system)
   ================================================================ */

/* 2-column grid for Income+Expense row, and Savings+Investment row */
.bpp-setup-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .bpp-setup-2col { grid-template-columns: 1fr; }
}

/* Full-width savings summary card */
.bpp-setup-fullwidth {
  width: 100%;
  margin-bottom: 14px;
}

/* ── Savings Card: rule note tag ── */
.bpp-sav-rule-note {
  font-size: 11.5px;
  color: var(--ink5);
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--rsm);
  padding: 6px 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.bpp-srn-tag {
  font-weight: 700;
  color: var(--green);
}

/* ── Investment Card: rule note tag ── */
.bpp-inv-rule-note {
  font-size: 11.5px;
  color: var(--ink5);
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--rsm);
  padding: 6px 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.bpp-irn-tag {
  font-weight: 700;
  color: var(--amber);
}

/* ── Savings Rate KPI (inside Committed Savings card) ── */
.bpp-sav-rate-kpi {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: var(--rmd);
}
.bpp-dark .bpp-sav-rate-kpi {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
  border-color: #166534;
}
.bpp-sav-rate-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #16a34a;
  margin-bottom: 5px;
}
.bpp-dark .bpp-sav-rate-label { color: #4ade80; }
.bpp-sav-rate-val {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
#bpp-sav-rate-pct {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--font-num);
  color: #16a34a;
  line-height: 1;
}
.bpp-dark #bpp-sav-rate-pct { color: #4ade80; }
.bpp-sav-rate-sub {
  font-size: 11px;
  color: #4ade80;
  font-weight: 600;
}
.bpp-dark .bpp-sav-rate-sub { color: #86efac; }
/* bar track */
.bpp-sav-rate-bar-track {
  height: 8px;
  background: rgba(0,0,0,.08);
  border-radius: 99px;
  overflow: visible;
  position: relative;
  margin-bottom: 8px;
}
.bpp-dark .bpp-sav-rate-bar-track { background: rgba(255,255,255,.1); }
.bpp-sav-rate-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
  background: #16a34a;
}
.bpp-sav-rate-bar.ok   { background: var(--amber); }
.bpp-sav-rate-bar.low  { background: var(--red); }
.bpp-sav-rate-bar.good { background: #16a34a; }
/* 20% target line */
.bpp-sav-rate-bar-track::after {
  content: '';
  position: absolute;
  left: 40%;  /* 20% rate = 40% bar width (since 50% → 100%) */
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: rgba(0,0,0,.25);
  border-radius: 1px;
}
.bpp-sav-rate-msg {
  font-size: 11.5px;
  line-height: 1.5;
  color: #166534;
}
.bpp-dark .bpp-sav-rate-msg { color: #86efac; }

/* ── Investment Value Tracker ── */
.bpp-inv-value-tracker {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--rmd);
}
.bpp-dark .bpp-inv-value-tracker {
  background: linear-gradient(135deg, #1c0a00 0%, #311502 100%);
  border-color: #78350f;
}
.bpp-inv-vt-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #d97706;
  margin-bottom: 10px;
}
.bpp-dark .bpp-inv-vt-title { color: #fbbf24; }
.bpp-inv-vt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.bpp-inv-vt-lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink5);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.bpp-inv-vt-aw {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
}
.bpp-inv-vt-input {
  border: none;
  background: transparent;
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--ink);
  padding: 6px 8px;
  outline: none;
  width: 100%;
}
.bpp-inv-vt-input:focus { box-shadow: 0 0 0 2px var(--blue-mid); border-radius: var(--rsm); }

/* Gain/Loss display */
.bpp-inv-gl-display {
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  margin-bottom: 8px;
}
.bpp-inv-gl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bpp-inv-gl-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink5);
  flex: 1;
}
.bpp-inv-gl-val {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-num);
}
.bpp-inv-gl-pct {
  font-size: 11.5px;
  font-weight: 700;
}
.bpp-inv-gl-val.gain, .bpp-inv-gl-pct.gain { color: var(--green); }
.bpp-inv-gl-val.loss, .bpp-inv-gl-pct.loss { color: var(--red); }
.bpp-inv-gl-msg {
  font-size: 11px;
  color: var(--ink5);
  line-height: 1.5;
}

/* "kept separate" note */
.bpp-inv-separate-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--ink5);
  margin-top: 4px;
}

/* ── Savings Rate card: core rule strip ── */
.bpp-si-core-rule {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bpp-si-rule-line {
  font-size: 11.5px;
  color: var(--ink4);
}
.bpp-si-rule-s { font-weight: 700; color: var(--green); }
.bpp-si-rule-i { font-weight: 700; color: var(--amber); }

/* ── Goal Planner items (enhanced wishlist) ── */
.bpp-wl-item {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--rmd);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: box-shadow var(--dur);
}
.bpp-wl-item:hover { box-shadow: var(--s1); }
.bpp-wl-done-item {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--card2) 0%, #f0fdf4 100%);
}
.bpp-dark .bpp-wl-done-item { background: linear-gradient(135deg, var(--card2) 0%, #052e16 100%); }
.bpp-wl-done-banner {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  padding: 4px 8px;
  background: #dcfce7;
  border-radius: var(--rsm);
  margin-bottom: 8px;
  display: inline-block;
}
.bpp-dark .bpp-wl-done-banner { background: #052e16; }

.bpp-wl-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.bpp-wl-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.bpp-wl-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.bpp-wl-name  { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.bpp-wl-meta  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bpp-wl-price-tag { font-size: 12px; font-weight: 600; color: var(--ink4); font-family: var(--font-num); }
.bpp-wl-date-tag  { font-size: 11px; color: var(--ink5); }
.bpp-wl-sep { color: var(--ink5); font-size: 11px; }
.bpp-wl-item-actions { display: flex; gap: 5px; }
.bpp-wl-edit-btn, .bpp-wl-del-btn {
  background: none; border: 1px solid var(--border);
  border-radius: var(--rsm); padding: 4px 8px;
  cursor: pointer; font-size: 12px; transition: all var(--dur);
  color: var(--ink5);
}
.bpp-wl-edit-btn:hover { background: var(--blue-lt); color: var(--blue); border-color: var(--blue-mid); }
.bpp-wl-del-btn:hover  { background: #fef2f2; color: var(--red); border-color: #fca5a5; }

/* Progress bar */
.bpp-wl-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bpp-wl-bar-track {
  flex: 1;
  height: 7px;
  background: var(--card3);
  border-radius: 99px;
  overflow: hidden;
}
.bpp-wl-bar-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.bpp-wl-pct {
  font-size: 11.5px;
  font-weight: 800;
  font-family: var(--font-num);
  color: var(--ink3);
  min-width: 32px;
  text-align: right;
}

/* 4-stat grid */
.bpp-wl-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .bpp-wl-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.bpp-wl-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 7px 9px;
}
.bpp-wl-stat-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink5);
  margin-bottom: 3px;
}
.bpp-wl-stat-val {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-num);
  color: var(--ink);
}
.bpp-wl-stat-saved   { color: var(--green); }
.bpp-wl-stat-remain  { color: var(--amber); }
.bpp-wl-stat-monthly { color: var(--blue); }

/* Update saved amount row */
.bpp-wl-saved-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bpp-wl-saved-lbl {
  font-size: 10.5px;
  color: var(--ink5);
  font-weight: 600;
  min-width: 130px;
}
.bpp-wl-saved-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 4px 8px;
  flex: 1;
  min-width: 130px;
}
.bpp-wl-saved-input {
  border: none; background: transparent;
  font-family: var(--font-num); font-size: 13px;
  color: var(--ink); padding: 2px 4px; outline: none; width: 100%;
}
.bpp-wl-saved-of { font-size: 11px; color: var(--ink5); white-space: nowrap; }

/* Goal modal enhancements */
.bpp-wl-calc-preview {
  background: var(--blue-lt);
  border: 1px solid var(--blue-mid);
  border-radius: var(--rsm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.bpp-wl-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.bpp-wl-calc-row:last-child { margin-bottom: 0; }
.bpp-wl-calc-lbl { font-size: 11.5px; font-weight: 600; color: var(--blue); }
.bpp-wl-calc-val { font-size: 13px; font-weight: 800; font-family: var(--font-num); color: var(--ink); }

/* Empty state */
.bpp-wishlist-empty {
  text-align: center;
  padding: 20px 16px;
  color: var(--ink5);
  font-size: 12.5px;
  line-height: 1.6;
}
.bpp-wishlist-empty-ico { display: block; font-size: 26px; margin-bottom: 6px; }

/* Wishlist header */
.bpp-wishlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.bpp-wishlist-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bpp-wishlist-ico { font-size: 18px; }
.bpp-wishlist-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.bpp-wishlist-sub   { font-size: 11px; color: var(--ink5); margin-top: 1px; }
.bpp-wishlist-add-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; background: var(--blue); color: #fff;
  border: none; border-radius: var(--rsm); font-size: 12px;
  font-weight: 700; cursor: pointer; transition: all var(--dur);
}
.bpp-wishlist-add-btn:hover { background: #1d4ed8; transform: translateY(-1px); }

/* Modal overrides for goal form */
.bpp-wishlist-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 420px; max-width: calc(100vw - 28px);
  background: var(--card); border-radius: var(--rlg);
  padding: 0; z-index: 9999;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  max-height: 90vh; overflow-y: auto;
}
.bpp-wishlist-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 9998; backdrop-filter: blur(4px);
}
.bpp-wishlist-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
.bpp-wishlist-modal-title {
  font-size: 15px; font-weight: 800; color: var(--ink);
}
.bpp-wishlist-modal-close {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink5); transition: all var(--dur);
}
.bpp-wishlist-modal-close:hover { background: #fef2f2; color: var(--red); }
.bpp-wishlist-modal-body { padding: 14px 18px 20px; }
.bpp-wl-field { margin-bottom: 12px; }
.bpp-wl-label {
  display: block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink5); margin-bottom: 5px;
}
.bpp-wl-input {
  width: 100%; padding: 8px 12px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--rsm); font-size: 13px; color: var(--ink);
  outline: none; transition: border-color var(--dur);
  font-family: inherit; box-sizing: border-box;
}
.bpp-wl-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-mid); }
.bpp-wl-save-btn {
  width: 100%; padding: 11px;
  background: var(--blue); color: #fff;
  border: none; border-radius: var(--rsm);
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all var(--dur); margin-top: 4px;
}
.bpp-wl-save-btn:hover { background: #1d4ed8; transform: translateY(-1px); }

/* ── Savings Rate card (right panel) ── */
.bpp-si-sum-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.bpp-si-sum-lbl { font-size:12px; color:var(--ink4); }
.bpp-si-sum-val { font-size:14px; font-weight:700; font-family:var(--font-num); color:var(--ink); }
.bpp-si-sum-pct { font-size:16px; font-weight:800; font-family:var(--font-num); }
.bpp-si-sum-pct.good { color: var(--green); }
.bpp-si-sum-pct.ok   { color: var(--amber); }
.bpp-si-sum-pct.low  { color: var(--red); }
.bpp-si-rate-bar-wrap { margin: 8px 0 10px; }
.bpp-si-rate-bar-track { height:8px; background:var(--card3); border-radius:99px; overflow:visible; position:relative; }
.bpp-si-rate-bar-fill  { height:100%; border-radius:99px; background:var(--blue); transition:width .5s; }
.bpp-si-rate-bar-target { position:absolute; top:-4px; bottom:-4px; width:2px; background:rgba(0,0,0,.2); border-radius:1px; }
.bpp-si-rate-labels { display:flex; justify-content:space-between; margin-top:4px; font-size:10px; color:var(--ink5); }
.bpp-si-target-lbl { color:var(--ink4); font-weight:600; }
.bpp-si-msg { font-size:12px; color:var(--ink4); line-height:1.6; margin-top:4px; }

/* ================================================================
   VARIABLE DASHBOARD — NEW CLEAN LAYOUT
   ================================================================ */

/* ── "Based on Monthly Projection" badge ── */
.vd-proj-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink5);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 6px 12px;
  margin-bottom: 10px;
}

/* ── 4 Summary Cards ── */
.vd-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 700px) { .vd-summary-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .vd-summary-cards { grid-template-columns: 1fr; } }

.vd-sc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rmd);
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur), transform var(--dur);
}
.vd-sc:hover { box-shadow: var(--s1); transform: translateY(-1px); }
.vd-sc-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vd-sc-inc .vd-sc-icon { background: #eff6ff; color: var(--blue); }
.vd-sc-exp .vd-sc-icon { background: #fef2f2; color: var(--red); }
.vd-sc-sav .vd-sc-icon { background: #f0fdf4; color: var(--green); }
.vd-sc-score .vd-sc-icon { background: #f5f3ff; color: #7c3aed; }
.bpp-dark .vd-sc-inc .vd-sc-icon  { background: #1e3a5f; }
.bpp-dark .vd-sc-exp .vd-sc-icon  { background: #3d1515; }
.bpp-dark .vd-sc-sav .vd-sc-icon  { background: #052e16; }
.bpp-dark .vd-sc-score .vd-sc-icon { background: #1e1b4b; }
.vd-sc-body { flex: 1; min-width: 0; }
.vd-sc-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink5); margin-bottom: 3px; }
.vd-sc-val { font-size: 18px; font-weight: 800; font-family: var(--font-num); color: var(--ink); line-height: 1.2; }
.vd-sc-hint { font-size: 10.5px; color: var(--ink5); margin-top: 2px; }
/* Savings card savings ring */
.vd-sc-sav { background: linear-gradient(135deg, var(--card) 0%, #f0fdf4 100%); }
.bpp-dark .vd-sc-sav { background: linear-gradient(135deg, var(--card) 0%, #052e16 100%); }
.vd-sc-sav-num { color: var(--green); }
.vd-sc-glow { position: absolute; top: -10px; right: -10px; width: 60px; height: 60px; border-radius: 50%; background: rgba(16,185,129,.08); pointer-events: none; }
.vd-sc-rate-ring { margin-left: auto; flex-shrink: 0; }

/* ── Time Filter Bar ── */
.vd-time-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--rmd);
  padding: 8px 14px;
}
.vd-tf-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink5);
  white-space: nowrap;
}
.vd-action-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Daily Tracker inline ── */
.vd-tracker-inline {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* ── Income type note ── */
.vd-income-type-note {
  font-size: 11.5px;
  color: var(--ink5);
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--rsm);
  padding: 6px 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.vd-itn-tag { font-weight: 700; color: var(--blue); }

/* ── Savings goal block inside savings card ── */
.vd-sav-goal-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ── Weekly mini ── */
.vd-weekly-mini {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.vd-wm-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink5); margin-bottom: 10px; }
.vd-wm-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
@media (max-width: 480px) { .vd-wm-row { grid-template-columns: repeat(2, 1fr); } }
.vd-wm-stat { background: var(--card2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 6px 8px; }
.vd-wm-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink5); margin-bottom: 3px; }
.vd-wm-val { font-size: 13px; font-weight: 700; font-family: var(--font-num); color: var(--ink); }

/* ── Cash Flow inline ── */
.vd-cf-inline {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.vd-cf-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vd-cf-lbl { font-size: 11px; font-weight: 700; color: var(--ink5); text-transform: uppercase; letter-spacing: .5px; }
.vd-cf-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.vd-cf-stat { font-size: 11px; color: var(--ink5); display: flex; flex-direction: column; gap: 2px; }
.vd-cf-stat strong { font-size: 13px; font-family: var(--font-num); color: var(--ink); font-weight: 700; }

/* ── SI Rate block inside Smart Insights card ── */
.vd-si-rate-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ── Rules core note ── */
.vd-rules-core-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink4);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 7px 12px;
  margin-bottom: 10px;
}
.vd-rcn-s { color: var(--green); font-weight: 700; }
.vd-rcn-e { color: var(--amber); font-weight: 700; }
.vd-rcn-i { color: var(--blue); font-weight: 700; }

/* ── Financial Growth Report download buttons ── */
.vd-report-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ================================================================
   VARIABLE / DAILY DASHBOARD — NEW CLEAN LAYOUT
   ================================================================ */

/* §1 Summary header */
.vd-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.vd-summary-greet {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.vd-proj-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-lt);
  border: 1px solid var(--blue-mid);
  border-radius: 99px;
  padding: 4px 10px;
}

/* §1 Summary Cards */
.vd-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1280px) { .vd-summary-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vd-summary-cards { grid-template-columns: 1fr 1fr; gap: 8px; } }

.vd-sum-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rlg);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: box-shadow var(--dur), transform var(--dur);
  position: relative;
  overflow: hidden;
}
.vd-sum-card:hover { box-shadow: var(--s2); transform: translateY(-2px); }

/* Card accents */
.vd-sum-inc { border-left: 3px solid var(--green); }
.vd-sum-exp { border-left: 3px solid var(--red); }
.vd-sum-sav { border-left: 3px solid var(--blue); }
.vd-sum-score { border-left: 3px solid var(--indigo); }

.vd-sum-ico {
  width: 36px; height: 36px; border-radius: var(--rmd);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--card2);
  color: var(--ink4);
}
.vd-sum-inc .vd-sum-ico { background: #f0fdf4; color: var(--green); }
.vd-sum-exp .vd-sum-ico { background: #fef2f2; color: var(--red); }
.vd-sum-sav .vd-sum-ico { background: var(--blue-lt); color: var(--blue); }
.vd-sum-score .vd-sum-ico { background: #f5f3ff; color: var(--indigo); }
.bpp-dark .vd-sum-inc .vd-sum-ico { background: #052e16; }
.bpp-dark .vd-sum-exp .vd-sum-ico { background: #450a0a; }
.bpp-dark .vd-sum-sav .vd-sum-ico { background: #1e3a5f; }
.bpp-dark .vd-sum-score .vd-sum-ico { background: #1e1b4b; }

.vd-sum-body { flex: 1; min-width: 0; }
.vd-sum-lbl {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink5); margin-bottom: 4px;
}
.vd-sum-val {
  font-size: 20px; font-weight: 800; font-family: var(--font-num);
  color: var(--ink); line-height: 1.1; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vd-sum-sub {
  font-size: 10.5px; color: var(--ink5); line-height: 1.4;
}
.vd-sum-sub-period { display: none; }

/* Score card special layout */
.vd-sum-score { flex-direction: column; gap: 8px; }
.vd-sum-score-gauge {
  position: relative;
  width: 80px; height: 50px;
  margin: 0 auto;
}
.vd-mini-gauge { width: 100%; height: 100%; }
.vd-gauge-center {
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  text-align: center; line-height: 1;
}
.vd-gauge-label { font-size: 9px; color: var(--ink5); }
.vd-sum-body-score { text-align: center; }
.vd-sum-grade {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-bottom: 4px; flex-wrap: wrap;
}
.vd-score-badge { font-size: 11px; }
.vd-sum-ring {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
}

/* §2 Filter Bar */
.vd-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rmd);
  padding: 8px 14px;
  margin-bottom: 16px;
}
.vd-filter-lbl {
  font-size: 10.5px; font-weight: 700; color: var(--ink5);
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.vd-period-tabs { flex: 1; }
.vd-action-mini {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-left: auto;
}
.vd-action-mini .bpp-save-status { font-size: 10.5px; color: var(--green); }

/* §3 Daily Budget Setup enhancements */
.vd-log-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 10px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink5);
}
.vd-log-divider::before, .vd-log-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.vd-log-divider::before { display: none; }

/* Today income row */
.vd-today-income-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.vd-today-vals {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.vd-tv-item { min-width: 70px; }
.vd-tv-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink5); margin-bottom: 2px; }
.vd-tv-val { font-size: 14px; font-weight: 800; font-family: var(--font-num); color: var(--ink); }
.vd-tv-sub { font-size: 10px; color: var(--ink5); }
.vd-log-btn {
  white-space: nowrap; flex-shrink: 0;
  padding: 8px 14px; font-size: 12px;
}

/* Log panel */
.vd-log-panel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--rmd);
  overflow: hidden;
}
.vd-log-panel .bppv-tabs {
  display: flex; background: var(--card2); border-bottom: 1px solid var(--border);
}
.vd-log-panel .bppv-tab {
  flex: 1; padding: 7px 10px; font-size: 11.5px; font-weight: 700;
  background: none; border: none; cursor: pointer; color: var(--ink5);
  transition: all var(--dur);
}
.vd-log-panel .bppv-tab.active { color: var(--blue); border-bottom: 2px solid var(--blue); }
.vd-log-panel #bppv-panel-inc,
.vd-log-panel #bppv-panel-exp { padding: 10px; max-height: 200px; overflow-y: auto; }

/* Quick expense row */
.vd-quick-exp-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.vd-add-exp-btn { font-size: 12px; padding: 7px 12px; }
.vd-quick-exp-hint { font-size: 11px; color: var(--ink5); }

/* Safe widget */
.vd-safe-widget {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid var(--blue-mid);
  border-radius: var(--rmd);
  padding: 12px 14px;
  margin-bottom: 4px;
}
.bpp-dark .vd-safe-widget { background: linear-gradient(135deg, #0c1a2e 0%, #1e3a5f 100%); }
.vd-safe-main { margin-bottom: 8px; }
.vd-safe-amount {
  font-size: 24px; font-weight: 800; font-family: var(--font-num);
  color: var(--blue); line-height: 1;
}
.vd-safe-hint { font-size: 11px; color: var(--ink5); margin-top: 3px; }
.vd-safe-formula { font-size: 11.5px; margin-bottom: 10px; }
.bppv-sf-row { display: flex; justify-content: space-between; padding: 3px 0; }
.bppv-sf-key { color: var(--ink4); }
.bppv-sf-val { font-weight: 700; font-family: var(--font-num); }
.bppv-sf-minus .bppv-sf-key::before { content: '− '; color: var(--red); }
.vd-safe-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vd-si-field label { font-size: 10px; font-weight: 700; display: block; color: var(--ink5); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.vd-si-inp { font-size: 12px; padding: 6px 8px; width: 100%; }

/* Cash flow row */
.vd-cf-row { padding: 10px 0; }
.vd-cf-stab-wrap { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink4); margin-bottom: 8px; font-weight: 600; }
.vd-cf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vd-cf-tile { text-align: center; background: var(--card2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 8px; }
.vd-cf-ico { font-size: 14px; margin-bottom: 3px; }
.vd-cf-val { font-size: 13px; font-weight: 800; font-family: var(--font-num); color: var(--ink); }
.vd-cf-lbl { font-size: 9.5px; color: var(--ink5); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

/* §4 Week stats inside investment card */
.vd-week-stats { margin-top: 4px; }

/* §5 Report section */
.vd-report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) { .vd-report-grid { grid-template-columns: 1fr; } }

.vd-report-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rlg);
  padding: 16px 18px;
}
.vd-report-active {
  border-top: 3px solid var(--green);
}
.vd-report-archived {
  border-top: 3px solid var(--ink5);
  opacity: .75;
}
.vd-report-year-badge {
  font-size: 28px; font-weight: 900; font-family: var(--font-num);
  color: var(--ink); line-height: 1; margin-bottom: 4px;
}
.vd-report-year-old { color: var(--ink5); }
.vd-report-status {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  background: #dcfce7; color: #166534;
  border-radius: 99px; padding: 3px 9px; margin-bottom: 14px;
}
.vd-report-status-arch { background: var(--card2); color: var(--ink5); }
.bpp-dark .vd-report-status { background: #052e16; color: #4ade80; }
.vd-report-summary { margin-bottom: 14px; }
.vd-rs-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink4);
}
.vd-rs-row:last-child { border-bottom: none; }
.vd-rs-row span:last-child { font-weight: 700; font-family: var(--font-num); color: var(--ink); }
.vd-rs-sav span:last-child { color: var(--green); }
.vd-rs-note { font-size: 11px; color: var(--ink5); margin-top: 8px; line-height: 1.5; }
.vd-report-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-rpt-btn { font-size: 11.5px; padding: 7px 12px; }

/* §7 Planning Tools grid */
.vd-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1280px) { .vd-tools-grid { grid-template-columns: 1fr; } }
.vd-tool-card { max-height: none !important; }
.vd-goals-tool .bppv-goal-starters { display: none; }
.vd-goals-empty-msg {
  font-size: 12px; color: var(--ink5);
  text-align: center; padding: 16px; line-height: 1.5;
}

/* §6 Score in advanced insights */
.vd-score-card { margin-bottom: 14px; }
.vd-score-adv-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .vd-score-adv-body { grid-template-columns: 1fr; } }
.vd-pillars-compact { gap: 6px; }
.vd-score-msg-box {
  font-size: 12px; color: var(--ink4); line-height: 1.6;
  background: var(--card2); border-radius: var(--rsm);
  padding: 10px 12px; border: 1px solid var(--border);
}
.vd-score-adv-right { display: flex; flex-direction: column; justify-content: center; }

/* Calc button */
.vd-calc-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; flex-wrap: wrap;
}
.vd-calc-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #fff; border: none; border-radius: var(--rmd);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all var(--dur); box-shadow: 0 2px 12px rgba(37,99,235,.3);
}
.vd-calc-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(37,99,235,.4); }

/* Score compat badge */
.vd-score-badge { font-size: 11px; }


/* ================================================================
   VARIABLE HERO CARD — unified template additions
   ================================================================ */
.bpp-hero-variable .bpp-hv2-kpi-row {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.bpp-hero-variable .bpp-hv2-kpi-block { flex: 1; min-width: 80px; }
.bpp-hv2-kpi-sub { font-size: 10.5px; color: rgba(255,255,255,.65); margin-top: 2px; }
.bpp-hv2-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bpp-hv2-add-btn-sec {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.bpp-hv2-add-btn-sec:hover { background: rgba(255,255,255,.2) !important; }

/* Compact cash flow in hero */
.bppv-cf-mini {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  padding: 10px 14px;
  margin-top: 10px;
}
.bppv-cf-stab-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink4); margin-bottom: 8px;
}
.bppv-stab-lbl { color: var(--ink4); }
.bppv-cf-tiles-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.bppv-cf-tile-mini {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--rsm); padding: 6px 8px;
}
.bppv-cf-ico { font-size: 12px; margin-bottom: 2px; }
.bppv-cf-val { font-size: 12px; font-weight: 800; font-family: var(--font-num); color: var(--ink); }
.bppv-cf-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink5); margin-top: 2px; }
.bppv-cf-alert { margin-top: 6px; font-size: 11px; padding: 5px 8px; border-radius: var(--rsm); background: #fef2f2; color: #991b1b; }
.bppv-cf-alert.warning { background: #fffbeb; color: #92400e; }
.bpp-dark .bppv-cf-alert { background: #450a0a; color: #fca5a5; }
.bpp-dark .bppv-cf-alert.warning { background: #422006; color: #fde68a; }

/* Log form inside hero card */
.bppv-log-form {
  background: rgba(255,255,255,.08);
  border-radius: var(--rsm);
  padding: 12px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.15);
}
.bppv-lf-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bppv-lf-field { flex: 1; min-width: 120px; }
.bppv-lf-lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.bppv-lf-inp { width: 100%; padding: 7px 10px; border-radius: var(--rsm); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-size: 12.5px; }
.bppv-lf-inp::placeholder { color: rgba(255,255,255,.45); }
.bppv-lf-amt-field { flex: 0 0 120px; }
.bppv-lf-date-field { flex: 0 0 140px; }
.bppv-lf-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.bppv-lf-save { padding: 7px 14px; background: var(--green); color: #fff; border: none; border-radius: var(--rsm); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.bppv-lf-zero { padding: 7px 10px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.2); border-radius: var(--rsm); font-size: 11.5px; cursor: pointer; }
.bppv-lf-cancel { padding: 7px 10px; background: transparent; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.15); border-radius: var(--rsm); font-size: 11.5px; cursor: pointer; }
.bppv-lf-save:hover { background: #15803d; }
.bppv-lf-zero:hover, .bppv-lf-cancel:hover { background: rgba(255,255,255,.18); }

/* Income log tabs inside income card */
.bppv-log-section { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--rsm); overflow: hidden; }
.bppv-log-tabs { display: flex; background: var(--card2); border-bottom: 1px solid var(--border); }
.bppv-log-tabs .bppv-tab { flex: 1; padding: 7px 10px; font-size: 11.5px; font-weight: 700; background: none; border: none; cursor: pointer; color: var(--ink5); border-bottom: 2px solid transparent; transition: all var(--dur); }
.bppv-log-tabs .bppv-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
#bppv-panel-inc, #bppv-panel-exp { padding: 10px; max-height: 200px; overflow-y: auto; }
.bppv-empty { font-size: 11.5px; color: var(--ink5); text-align: center; padding: 12px; }

/* Safe spend inputs inline */
.bppv-safe-inputs-inline {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 10px;
  background: var(--card2); border-radius: var(--rsm); border: 1px solid var(--border);
}
.bppv-safe-inputs-inline label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink4); font-weight: 600;
}
.bppv-inp-sm { font-size: 12px; padding: 5px 8px; width: 90px; }

/* Log form outside hero (in income card) needs different styling */
.bpp-card-inc .bppv-log-form {
  background: var(--blue-lt);
  border-color: var(--blue-mid);
  border-radius: var(--rsm);
  padding: 12px;
}
.bpp-card-inc .bppv-lf-lbl { color: var(--ink4); }
.bpp-card-inc .bppv-lf-inp {
  background: var(--card);
  border-color: var(--border);
  color: var(--ink);
}
.bpp-card-inc .bppv-lf-inp::placeholder { color: var(--ink5); }
.bpp-card-inc .bppv-lf-cancel { color: var(--ink5); border-color: var(--border); background: var(--card); }
.bpp-card-inc .bppv-lf-cancel:hover { background: var(--card2); }
.bpp-card-inc .bppv-lf-zero { color: var(--ink4); border-color: var(--border); background: var(--card); }

/* Stability dot */
.bppv-stab-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink5); display: inline-block;
}
.bppv-stab-dot.stable { background: var(--green); }
.bppv-stab-dot.unstable { background: var(--red); }
.bppv-stab-dot.moderate { background: var(--amber); }

/* ================================================================
   HOME PAGE — Complete Styles
   Palette: #4F46E5 · #22C55E · #EF4444 · #F59E0B
            #F8FAFC · #FFFFFF · #E5E7EB · #111827
   ================================================================ */

/* ── Home root wrapper ─────────────────────────────────────── */
.bpp-home-root {
  min-height: 100vh;
  background: #F8FAFC;
}
/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE — FINTECH REDESIGN
   ═══════════════════════════════════════════════════════════════════ */

.bpp-home-wrap { display:flex; flex-direction:column; }

/* ── Nav home extras ── */
.bpp-home-nav-links { display:flex; align-items:center; gap:4px; margin-right:8px; }
.bpp-home-nav-link {
  padding:7px 14px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--ink3);
  text-decoration:none; transition:background .15s, color .15s;
}
.bpp-home-nav-link:hover { background:var(--card2); color:var(--ink); }
.bpp-home-nav-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:9px;
  font-size:13px; font-weight:700; text-decoration:none;
  transition:all .15s; white-space:nowrap;
}
.bpp-home-nav-btn-ghost {
  color:var(--ink3); border:1.5px solid var(--border); background:transparent;
}
.bpp-home-nav-btn-ghost:hover { background:var(--card2); color:var(--ink); }
.bpp-home-nav-btn-primary {
  background:#1D4ED8; color:#fff !important;
  box-shadow:0 2px 10px rgba(29,78,216,.3);
}
.bpp-home-nav-btn-primary:hover { background:#1E40AF; box-shadow:0 4px 16px rgba(29,78,216,.4); transform:translateY(-1px); }
@media (max-width:768px) {
  .bpp-home-nav-links { display:none; }
  .bpp-home-nav-btn-ghost { display:none; }
}

/* ── Section label ── */
.bpp-home-section-label {
  display:inline-block; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.8px;
  color:#2563EB; background:#EFF6FF;
  border:1px solid #BFDBFE; border-radius:99px;
  padding:4px 14px; margin-bottom:16px;
}
.bpp-dark .bpp-home-section-label { background:rgba(37,99,235,.15); border-color:rgba(37,99,235,.3); color:#93C5FD; }

/* ═══════ HERO ═══════ */
.bpp-home-hero {
  background: linear-gradient(145deg, #0F172A 0%, #1E3A5F 50%, #1E1B4B 100%);
  padding:88px 24px 80px;
  position:relative; overflow:hidden;
}
.bpp-home-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 400px at 5% 50%, rgba(37,99,235,.20) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 95% 20%, rgba(99,102,241,.15) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 60% 90%, rgba(34,197,94,.08) 0%, transparent 70%);
}
.bpp-home-hero-inner {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 400px;
  gap:72px; align-items:center;
}
.bpp-home-hero-left { display:flex; flex-direction:column; align-items:flex-start; }
.bpp-home-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.85); font-size:12px; font-weight:600;
  padding:6px 16px; border-radius:99px; margin-bottom:28px;
}
.bpp-home-hero-badge-dot {
  width:7px; height:7px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 6px rgba(34,197,94,.8);
}
.bpp-home-hero-h1 {
  font-size:clamp(40px,5vw,64px); font-weight:800;
  color:#FFFFFF; line-height:1.08; letter-spacing:-.035em; margin:0 0 24px;
}
.bpp-home-hero-accent {
  background:linear-gradient(90deg,#60A5FA,#818CF8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.bpp-home-hero-desc {
  font-size:16px; color:rgba(255,255,255,.65); line-height:1.7;
  margin:0 0 32px; max-width:520px;
}
.bpp-home-hero-actions { display:flex; align-items:center; gap:12px; margin-bottom:32px; flex-wrap:wrap; }
.bpp-home-cta-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:#2563EB; color:#fff !important;
  font-size:15px; font-weight:700;
  padding:14px 28px; border-radius:12px;
  text-decoration:none !important;
  box-shadow:0 6px 24px rgba(37,99,235,.4);
  transition:all .18s;
}
.bpp-home-cta-primary:hover { background:#1D4ED8; transform:translateY(-2px); box-shadow:0 10px 32px rgba(37,99,235,.5); }
.bpp-home-cta-primary svg { stroke:#fff; }
.bpp-home-cta-ghost {
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.7) !important; font-size:14px; font-weight:600;
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:1px; transition:color .15s, border-color .15s;
}
.bpp-home-cta-ghost:hover { color:#fff !important; border-color:rgba(255,255,255,.7); }
.bpp-home-hero-pills { display:flex; flex-wrap:wrap; gap:10px; }
.bpp-home-hero-pills span {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.45);
}
.bpp-home-hero-pills span svg { stroke:rgba(255,255,255,.4); }

/* Score card */
.bpp-home-hero-right { display:flex; justify-content:center; }
.bpp-home-score-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:28px; width:100%; max-width:360px;
  backdrop-filter:blur(16px);
}
.bpp-hsc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.bpp-hsc-label { font-size:12px; font-weight:700; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.5px; }
.bpp-hsc-badge {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  background:rgba(34,197,94,.15); color:#4ADE80;
  border:1px solid rgba(34,197,94,.25); border-radius:99px; padding:3px 10px;
}
.bpp-hsc-ring-wrap { position:relative; display:flex; flex-direction:column; align-items:center; margin-bottom:20px; }
.bpp-hsc-svg { width:160px; height:auto; }
.bpp-hsc-score {
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  font-size:40px; font-weight:800; color:#fff; font-family:var(--font-num); white-space:nowrap;
}
.bpp-hsc-out { font-size:11px; color:rgba(255,255,255,.4); font-weight:600; margin-top:4px; }
.bpp-hsc-metrics { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.bpp-hsc-m {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:9px; padding:9px 14px;
}
.bpp-hsc-m span { font-size:12.5px; color:rgba(255,255,255,.6); font-weight:500; }
.bpp-hsc-v { font-family:var(--font-num); font-size:14px; font-weight:700; }
.bpp-hsc-green { color:#4ADE80; }
.bpp-hsc-amber { color:#FCD34D; }
.bpp-hsc-blue  { color:#93C5FD; }
.bpp-hsc-footer { font-size:11px; color:rgba(255,255,255,.35); text-align:center; font-weight:500; }

/* ═══════ STATS ═══════ */
.bpp-home-stats {
  background:#F8FAFC; border-top:1px solid #E5E7EB; border-bottom:1px solid #E5E7EB;
  padding:24px;
}
.bpp-dark .bpp-home-stats { background:var(--card); border-color:var(--border); }
.bpp-home-stats-inner {
  max-width:900px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:0;
}
.bpp-home-stat { text-align:center; padding:0 40px; }
.bpp-home-stat-num { font-family:var(--font-num); font-size:28px; font-weight:800; color:#111827; letter-spacing:-.03em; }
.bpp-dark .bpp-home-stat-num { color:var(--ink); }
.bpp-home-stat-lbl { font-size:12px; color:#6B7280; font-weight:600; margin-top:2px; }
.bpp-dark .bpp-home-stat-lbl { color:var(--ink5); }
.bpp-home-stat-div { width:1px; height:40px; background:#E5E7EB; flex-shrink:0; }
.bpp-dark .bpp-home-stat-div { background:var(--border); }
@media (max-width:600px) {
  .bpp-home-stats-inner { gap:0; flex-wrap:wrap; }
  .bpp-home-stat { padding:8px 20px; }
  .bpp-home-stat-div { display:none; }
}

/* ═══════ SELECTOR ═══════ */
.bpp-home-selector { background:#fff; padding:80px 24px; }
.bpp-dark .bpp-home-selector { background:var(--bg); }
.bpp-home-selector-inner { max-width:1000px; margin:0 auto; text-align:center; }
.bpp-home-sel-h2 {
  font-size:clamp(26px,3vw,38px); font-weight:800; color:#111827;
  letter-spacing:-.025em; margin:0 0 12px;
}
.bpp-dark .bpp-home-sel-h2 { color:var(--ink); }
.bpp-home-sel-sub { font-size:15px; color:#6B7280; margin:0 0 48px; line-height:1.6; }
.bpp-dark .bpp-home-sel-sub { color:var(--ink4); }
.bpp-home-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; text-align:left; }
.bpp-home-card {
  background:#fff; border:1.5px solid #E5E7EB; border-radius:20px;
  padding:28px; overflow:hidden; transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.bpp-dark .bpp-home-card { background:var(--card); border-color:var(--border); }
.bpp-home-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.10); }
.bpp-home-card-fixed   { border-top:3px solid #2563EB; }
.bpp-home-card-variable{ border-top:3px solid #D97706; }
.bpp-home-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.bpp-home-card-icon {
  width:48px; height:48px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
}
.bpp-home-card-icon svg { stroke:currentColor; }
.bpp-home-card-icon-blue { background:#EFF6FF; color:#2563EB; }
.bpp-home-card-icon-amber { background:#FFFBEB; color:#D97706; }
.bpp-home-card-badge-pill {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  background:#2563EB; color:#fff; border-radius:99px; padding:4px 12px;
}
.bpp-home-card-title { font-size:22px; font-weight:800; color:#111827; margin:0 0 8px; letter-spacing:-.02em; }
.bpp-dark .bpp-home-card-title { color:var(--ink); }
.bpp-home-card-desc { font-size:14px; color:#6B7280; line-height:1.6; margin:0 0 16px; }
.bpp-dark .bpp-home-card-desc { color:var(--ink4); }
.bpp-home-card-who { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.bpp-home-card-who span {
  font-size:11.5px; font-weight:600; color:#374151;
  background:#F8FAFC; border:1px solid #E5E7EB;
  padding:4px 10px; border-radius:99px;
}
.bpp-dark .bpp-home-card-who span { background:var(--card2); border-color:var(--border); color:var(--ink3); }
.bpp-home-card-features { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:9px; }
.bpp-home-card-features li {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:#374151;
}
.bpp-dark .bpp-home-card-features li { color:var(--ink3); }
.bpp-home-card-features li svg { stroke:#22C55E; flex-shrink:0; }
.bpp-home-card-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 20px; border-radius:11px;
  font-size:14px; font-weight:700; text-decoration:none !important;
  transition:all .18s;
}
.bpp-home-card-btn-blue { background:#2563EB; color:#fff !important; box-shadow:0 4px 14px rgba(37,99,235,.3); }
.bpp-home-card-btn-blue:hover { background:#1D4ED8; transform:translateY(-1px); box-shadow:0 8px 22px rgba(37,99,235,.4); }
.bpp-home-card-btn-amber { background:#D97706; color:#fff !important; box-shadow:0 4px 14px rgba(217,119,6,.3); }
.bpp-home-card-btn-amber:hover { background:#B45309; transform:translateY(-1px); box-shadow:0 8px 22px rgba(217,119,6,.4); }

/* ═══════ FEATURES ═══════ */
.bpp-home-features { background:#F8FAFC; border-top:1px solid #E5E7EB; padding:80px 24px; }
.bpp-dark .bpp-home-features { background:var(--card); border-color:var(--border); }
.bpp-home-feat-inner { max-width:1100px; margin:0 auto; }
.bpp-home-feat-h2 { font-size:clamp(24px,3vw,34px); font-weight:800; color:#111827; text-align:center; margin:0 0 48px; letter-spacing:-.025em; }
.bpp-dark .bpp-home-feat-h2 { color:var(--ink); }
.bpp-home-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bpp-home-feat {
  background:#fff; border:1.5px solid #E5E7EB; border-radius:16px;
  padding:24px; transition:all .18s;
}
.bpp-dark .bpp-home-feat { background:var(--card2); border-color:var(--border); }
.bpp-home-feat:hover { border-color:#BFDBFE; box-shadow:0 4px 20px rgba(37,99,235,.08); transform:translateY(-2px); background:#fff; }
.bpp-home-feat-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; flex-shrink:0;
}
.bpp-home-feat-icon svg { stroke:currentColor; }
.bpp-feat-blue   { background:#EFF6FF; color:#2563EB; }
.bpp-feat-green  { background:#F0FDF4; color:#16A34A; }
.bpp-feat-purple { background:#F5F3FF; color:#7C3AED; }
.bpp-feat-amber  { background:#FFFBEB; color:#D97706; }
.bpp-feat-teal   { background:#F0FDFA; color:#0D9488; }
.bpp-feat-red    { background:#FEF2F2; color:#DC2626; }
.bpp-home-feat h3 { font-size:14px; font-weight:800; color:#111827; margin:0 0 8px; letter-spacing:-.01em; }
.bpp-dark .bpp-home-feat h3 { color:var(--ink); }
.bpp-home-feat p { font-size:13px; color:#6B7280; line-height:1.6; margin:0; }
.bpp-dark .bpp-home-feat p { color:var(--ink4); }

/* ═══════ CTA SECTION ═══════ */
.bpp-home-cta-section { background:#1E3A8A; padding:64px 24px; }
.bpp-home-cta-inner {
  max-width:900px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.bpp-home-cta-text h2 { font-size:clamp(22px,3vw,32px); font-weight:800; color:#fff; margin:0 0 8px; letter-spacing:-.025em; }
.bpp-home-cta-text p { font-size:14px; color:rgba(255,255,255,.6); margin:0; }
.bpp-home-cta-btns { display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex-shrink:0; }
.bpp-cta-ghost-dark { color:rgba(255,255,255,.7) !important; font-size:13.5px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:1px; white-space:nowrap; }
.bpp-cta-ghost-dark:hover { color:#fff !important; border-color:rgba(255,255,255,.7); }
@media (max-width:700px) { .bpp-home-cta-inner { flex-direction:column; text-align:center; } }

/* ═══════ FOOTER ═══════ */
.bpp-home-footer { background:#0F172A; padding:52px 24px 28px; }
.bpp-home-footer-inner { max-width:1100px; margin:0 auto; }
.bpp-footer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:40px; margin-bottom:40px; flex-wrap:wrap; }
.bpp-footer-brand { display:flex; align-items:center; gap:12px; }
.bpp-footer-brand-name { font-size:18px; font-weight:800; color:#fff; letter-spacing:-.3px; }
.bpp-footer-brand-tag { font-size:12px; color:rgba(255,255,255,.4); font-weight:500; margin-top:2px; }
.bpp-footer-links-grid { display:flex; gap:48px; flex-wrap:wrap; }
.bpp-footer-col { display:flex; flex-direction:column; gap:10px; }
.bpp-footer-col-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.35); margin-bottom:4px; }
.bpp-footer-col a { font-size:13px; font-weight:500; color:rgba(255,255,255,.55); text-decoration:none; transition:color .15s; }
.bpp-footer-col a:hover { color:#60A5FA; }
.bpp-footer-divider { height:1px; background:rgba(255,255,255,.08); margin-bottom:24px; }
.bpp-footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.bpp-footer-bottom > span { font-size:12px; color:rgba(255,255,255,.3); font-weight:500; }
.bpp-footer-badges { display:flex; gap:8px; flex-wrap:wrap; }
.bpp-footer-badges span {
  font-size:11.5px; font-weight:600; color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  padding:4px 12px; border-radius:99px;
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width:1024px) {
  .bpp-home-hero-inner { grid-template-columns:1fr; gap:48px; }
  .bpp-home-hero-left { align-items:center; text-align:center; }
  .bpp-home-hero-pills { justify-content:center; }
  .bpp-home-hero-desc { text-align:center; }
  .bpp-home-hero-right { max-width:420px; margin:0 auto; width:100%; }
}
@media (max-width:768px) {
  .bpp-home-hero { padding:60px 20px 52px; }
  .bpp-home-cards { grid-template-columns:1fr; gap:18px; }
  .bpp-home-feat-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .bpp-home-selector { padding:56px 20px; }
  .bpp-home-features { padding:56px 20px; }
  .bpp-footer-top { flex-direction:column; }
  .bpp-footer-links-grid { gap:28px; }
}
@media (max-width:480px) {
  .bpp-home-feat-grid { grid-template-columns:1fr; }
  .bpp-home-hero-h1 { font-size:36px; }
  .bpp-home-hero-actions { flex-direction:column; align-items:stretch; }
  .bpp-home-cta-primary { justify-content:center; }
  .bpp-home-score-card { padding:22px 18px; }
}

/* ================================================================
   COMPREHENSIVE MOBILE FIX — v8.2
   Targets: 320px · 360px · 390px · 414px · 480px · 768px · 1024px
   ================================================================ */

/* ── Global box-sizing guard ── */
*, *::before, *::after { box-sizing: border-box !important; }

/* ── Prevent any element from creating horizontal scroll ── */
.bpp-root { overflow-x: hidden; max-width: 100vw; }

/* ================================================================
   ≤ 1024px  TABLET — collapse sidebar to drawer
   ================================================================ */
@media (max-width: 1024px) {
  :root { --sw: 240px; --rw: 0px; }

  .bpp-right-panel { display: none !important; }

  /* Sidebar becomes a drawer */
  .bpp-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    height: 100dvh !important;
    z-index: 600 !important;
    transition: left 0.28s ease !important;
    box-shadow: none !important;
  }
  .bpp-sidebar.bpp-open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
  }

  .bpp-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 590 !important;
    background: rgba(0,0,0,.45) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }
  .bpp-overlay.bpp-visible { opacity: 1 !important; pointer-events: all !important; }

  .bpp-ham { display: flex !important; }

  /* Main area stretches full width */
  .bpp-main { width: 100% !important; }
  .bpp-tool-wrap { padding: 16px 16px 20px !important; }

  /* Daily hero: single column */
  .bpp-daily-hero-grid {
    display: block !important;
    width: 100% !important;
  }
  .bpp-daily-left, .bpp-daily-right { width: 100% !important; max-width: 100% !important; }
}

/* ================================================================
   ≤ 768px  MOBILE TABLET
   ================================================================ */
@media (max-width: 768px) {
  :root { --hh: 54px; }

  /* ── Navbar ── */
  .bpp-nav-tagline { display: none; }
  .bpp-nav-inner { padding: 0 12px; gap: 8px; }
  .bpp-nav-right { gap: 4px; margin-left: auto; }
  .bpp-nav-right .bpp-nav-icon-btn { display: none; }
  .bpp-nav-right #bpp-nav-notif  { display: flex !important; }
  .bpp-nav-right #bpp-nav-profile { display: flex !important; }
  .bpp-nav-center { display: none; }

  /* Keep currency + theme visible, hide the rest */
  .bpp-nav-currency { height: 30px; padding: 0 7px; font-size: 12px; max-width: 90px; }

  /* ── Tool wrap ── */
  .bpp-tool-wrap { padding: 12px 12px 20px !important; gap: 12px !important; }

  
/* ================================================================
   ≤ 599px  PHONE — all the fine-tuning
   ================================================================ */
@media (max-width: 599px) {

  /* ── Navbar ── */
  .bpp-nav-name { font-size: 14px !important; }
  .bpp-nav-brand svg { width: 28px !important; height: 28px !important; }
  .bpp-nav-brand { gap: 7px !important; }

  /* ── Hero v2 ── */
  .bpp-hv2-kpi-lbl { font-size: 9.5px !important; letter-spacing: .3px !important; }
  .bpp-hv2-kpi-val { font-size: 20px !important; }
  .bpp-hv2-month-txt { font-size: 13px !important; }

  /* ── Collapse block body ── */
  .bpp-cblock-body { padding: 10px 11px !important; }

  /* ── Budget setup section tabs ── */
  .bpp-setup-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; }
  .bpp-setup-tab { font-size: 11.5px !important; padding: 6px 12px !important; }

  /* ── Period tabs ── */
  .bpp-ptabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 4px !important; padding-bottom: 2px !important; }
  .bpp-ptab { font-size: 11px !important; padding: 5px 10px !important; white-space: nowrap !important; }

  /* ── KPI hero (overview) ── */
  .bpp-kpi-hero { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .bpp-kpi-card { padding: 12px 11px !important; border-radius: 12px !important; }
  .bpp-kpi-val { font-size: 19px !important; }
  .bpp-kpi-lbl { font-size: 10px !important; }

  /* ── Panel titles ── */
  .bpp-panel-title { font-size: 13.5px !important; }
  .bpp-card-hd { padding: 11px 12px !important; }

  /* ── Budget row: tighter on phone ── */
  .bpp-row { padding: 7px 9px !important; }
  .bpp-amt { font-size: 13.5px !important; }

  /* ── Weekly stats ── */
  .bpp-weekly-stats-wide {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
  .bpp-ws-card { padding: 10px 10px !important; }

  /* ── Chart overflow ── */
  .bpp-pulse-chart {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  /* ── Score section ── */
  .bpp-gauge-num { font-size: 2.2rem !important; }
  .bpp-gauge-lbl { font-size: 11px !important; }

  /* ── Today's log ── */
  .bpp-today-log-wrap { padding: 10px 12px !important; }
  .bpp-log-row { padding: 8px 10px !important; }
  .bpp-log-cat { font-size: 12px !important; }
  .bpp-log-amt { font-size: 13.5px !important; }

  /* ── Category breakdown ── */
  .bpp-cat-breakdown { padding: 12px 12px !important; }
  .bpp-cat-row { padding: 7px 0 !important; }

  /* ── Insights grid ── */
  .bpp-insights-si-row { grid-template-columns: 1fr !important; }

  /* ── Advanced section ── */
  .bpp-adv-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .bpp-rules-explainer { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bpp-tips-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* ── YoY table ── */
  .bpp-yoy-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .bpp-yoy-table table { min-width: 340px !important; }
  .bpp-yoy-pull-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 7px !important; }

  /* ── Fab popup body ── */
  .bpp-fab-popup-body { padding: 12px 14px !important; }
  .bpp-bs-amt { font-size: 28px !important; }

  /* ── Quick amount chips ── */
  .bpp-quick-amounts { gap: 4px !important; }
  .bpp-qamt { padding: 7px 3px !important; font-size: 11.5px !important; }

  /* ── BS chips ── */
  .bpp-bs-chips { flex-wrap: wrap !important; gap: 5px !important; }
  .bpp-chip { font-size: 11.5px !important; padding: 5px 9px !important; }

  /* ── Planning/goals section ── */
  .bpp-goal-cards { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bpp-goal-card { padding: 13px 13px !important; }
}

/* ================================================================
   ≤ 400px  VERY SMALL PHONES (iPhone SE, old Androids)
   ================================================================ */
@media (max-width: 400px) {

  /* ── Nav: only show brand icon + name, hide tagline, shrink currency ── */
  .bpp-nav-name { font-size: 13px !important; }
  .bpp-nav-currency { max-width: 72px !important; font-size: 11px !important; padding: 0 5px !important; }
  .bpp-nav-brand { gap: 6px !important; }

  /* ── Hero card ── */
  .bpp-hv2-kpi-row { flex-direction: column !important; gap: 10px !important; }
  .bpp-hv2-kpi-block { width: 100% !important; }
  .bpp-hv2-kpi-val { font-size: 24px !important; }
  .bpp-hero-card.bpp-hero-v2 { padding: 16px 13px 14px !important; }

  /* ── Today KPIs ── */
  .bpp-tkpi-val { font-size: 20px !important; }
  .bpp-tkpi { padding: 11px 12px !important; }

  /* ── Tool wrap: even tighter padding ── */
  .bpp-tool-wrap { padding: 10px 10px 20px !important; gap: 10px !important; }

  /* ── Cblock ── */
  .bpp-cblock-hd { padding: 11px 12px !important; }
  .bpp-cblock-title { font-size: 12.5px !important; }
  .bpp-cblock-ico { font-size: 14px !important; }

  /* ── Budget rows: full-width label, very compact ── */
  .bpp-lbl { font-size: 12px !important; }
  .bpp-amt { font-size: 13px !important; }
  .bpp-frq { font-size: 11px !important; }

  /* ── Overview KPIs: 2-col still ── */
  .bpp-overview { grid-template-columns: 1fr 1fr !important; }
  .bpp-ov-val { font-size: 18px !important; }
  .bpp-ov-lbl { font-size: 10px !important; }

  /* ── Goal cards: 1-col ── */
  .bpp-goal-cards { grid-template-columns: 1fr !important; }

  /* ── Category chips in FAB: 3 per row ── */
  .bpp-bs-chips .bpp-chip { font-size: 11px !important; padding: 5px 8px !important; }

  /* ── Bottom nav labels ── */
  .bpp-bn-item { font-size: 8.5px !important; gap: 2px !important; }
  .bpp-bn-item svg { width: 17px !important; height: 17px !important; }
}

/* ================================================================
   ≤ 350px  EXTRA SMALL (Galaxy A series, old iPhones)
   ================================================================ */
@media (max-width: 350px) {
  :root { --hh: 50px !important; }

  .bpp-nav-name { font-size: 12.5px !important; }
  .bpp-nav-brand svg { width: 24px !important; height: 24px !important; }

  .bpp-tool-wrap { padding: 8px 8px 20px !important; }

  .bpp-hv2-kpi-val { font-size: 22px !important; }
  .bpp-hv2-kpi-lbl { font-size: 9px !important; }

  .bpp-tkpi-val { font-size: 18px !important; }

  .bpp-today-kpis { gap: 6px !important; }

  .bpp-overview { gap: 6px !important; }
  .bpp-ov-val { font-size: 16px !important; }

  /* Budget rows even more compact */
  .bpp-row { padding: 6px 8px !important; }

  /* Pulse chart: horizontal scroll on tiny screens */
  .bpp-pulse-chart { min-height: 40px !important; }

  /* Chips */
  .bpp-chip, .bpp-bs-chips .bpp-chip { font-size: 10.5px !important; padding: 4px 7px !important; }
}

/* ================================================================
   LANDSCAPE PHONE — fix tall sections on short screens
   ================================================================ */
@media (max-width: 1280px) and (orientation: landscape) {
  .bpp-hero-card.bpp-hero-v2 { padding: 14px 16px !important; }
  .bpp-hv2-kpi-row { margin-bottom: 10px !important; }
  .bpp-today-kpis { grid-template-columns: 1fr 1fr 1fr !important; }
  .bpp-tkpi-primary { grid-column: auto !important; }
  .bpp-tool-wrap { padding-bottom: 20px !important; }
  .bpp-fab-popup { max-height: 85vh !important; overflow-y: auto !important; }
  .bpp-score-body { flex-direction: row !important; }
  .bpp-score-gauge { max-width: 140px !important; }
}

/* ================================================================
   TOUCH-FRIENDLY TARGETS — all interactive elements ≥ 44px
   ================================================================ */
@media (max-width: 768px) {
  .bpp-btn, .bpp-nav-link, .bpp-cblock-hd,
  .bpp-del, .bpp-add-row-btn, .bpp-setup-tab,
  .bpp-ptab, .bpp-chip, .bpp-bn-item,
  .bpp-fab-popup-close, .bpp-bs-save-btn {
    min-height: 40px !important;
    cursor: pointer !important;
  }
  .bpp-del { min-height: 34px !important; min-width: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; }

  /* Input fields: minimum 16px font to prevent iOS zoom */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* But keep display text normal size */
  .bpp-lbl { font-size: 15px !important; }
  .bpp-frq { font-size: 14px !important; }
  .bpp-amt { font-size: 16px !important; }
}

/* ================================================================
   SCROLL BEHAVIOR FIXES
   ================================================================ */
@media (max-width: 768px) {
  /* Prevent double scroll on overlays */
  .bpp-fab-overlay.open ~ * { overflow: hidden !important; }

  /* Smooth scroll for anchors */
  html { scroll-behavior: smooth !important; }

  /* Content doesn't go under fixed bottom nav */
  /* Main is now the scroll container — no bottom padding needed on shell */
  /* shell height is already fixed to viewport */

  /* Scroll targets don't need extra margin since nav is outside the scroll area */
  [id^="bpp-"] { scroll-margin-top: 8px !important; }
}

/* ================================================================
   SPECIFIC COMPONENT FIXES
   ================================================================ */

/* Collapse block border radius on mobile */
@media (max-width: 599px) {
  .bpp-collapse-block {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
  .bpp-cblock-hd { border-radius: 12px !important; }
  .bpp-cblock-body { border-radius: 0 0 12px 12px !important; }
}

/* Panel cards */
@media (max-width: 599px) {
  .bpp-panel { padding: 12px 13px !important; border-radius: 12px !important; }
  .bpp-panel-hd { padding: 11px 13px !important; gap: 8px !important; }
}

/* Footer section */
@media (max-width: 599px) {
  .bpp-footer-inner { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bpp-footer { padding: 20px 14px 80px !important; }
}

/* BS (bottom sheet) tabs */
@media (max-width: 599px) {
  .bpp-bs-tabs { padding: 0 12px !important; gap: 4px !important; }
  .bpp-bs-tab { font-size: 12px !important; padding: 8px 12px !important; }
  .bpp-bs-title { font-size: 15px !important; }
  .bpp-bs-hd { padding: 12px 14px !important; }
}

/* Formula row on small phones */
@media (max-width: 480px) {
  .bpp-formula-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    justify-content: center !important;
  }
  .bpp-formula-item { text-align: center !important; }
  .bpp-formula-op, .bpp-formula-eq { font-size: 12px !important; }
}

/* Score badges */
@media (max-width: 480px) {
  .bpp-score-badge { font-size: 11px !important; padding: 2px 8px !important; }
  .bpp-score-grade { font-size: 10.5px !important; }
}

/* Wishlist goal modal */
@media (max-width: 599px) {
  .bpp-wl-modal { width: calc(100vw - 24px) !important; max-width: 100% !important; padding: 16px 14px !important; }
  .bpp-wl-modal-title { font-size: 15px !important; }
}

/* YoY comparison table */
@media (max-width: 599px) {
  .bpp-yoy-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 8px !important; }
  .bpp-yoy-tbl td, .bpp-yoy-tbl th { padding: 7px 8px !important; font-size: 11.5px !important; white-space: nowrap !important; }
}

/* Lead magnet / email capture */
@media (max-width: 599px) {
  .bpp-lead-magnet { flex-direction: column !important; gap: 10px !important; text-align: center !important; }
  .bpp-lead-form { width: 100% !important; }
  .bpp-lead-input { width: 100% !important; }
  .bpp-lead-cta { width: 100% !important; }
}

/* Remove sticky position on sidebar when inside very small screens to avoid layout shift */
@media (max-width: 599px) {
  .bpp-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: min(280px, 85vw) !important;
    height: 100dvh !important;
    z-index: 600 !important;
  }
  .bpp-sidebar.bpp-open { left: 0 !important; }
}

/* ================================================================
   DARK MODE — mobile overrides
   ================================================================ */
@media (max-width: 768px) {
  .bpp-dark .bpp-bottom-nav { background: var(--card) !important; }
  .bpp-dark .bpp-sidebar { background: var(--card) !important; }
}

} /* close @media (max-width: 768px) */

/* ================================================================
   STICKY SIDEBAR POLISH — v8.3
   ================================================================ */

/* ── Main scroll area: subtle custom scrollbar ── */
.bpp-main {
  /* Smooth scrolling within the container */
  scroll-behavior: smooth;
}
.bpp-main::-webkit-scrollbar { width: 5px; }
.bpp-main::-webkit-scrollbar-track { background: transparent; }
.bpp-main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.bpp-main::-webkit-scrollbar-thumb:hover { background: var(--ink6); }

/* ── Left sidebar: right-edge shadow to visually float ── */
.bpp-sidebar {
  box-shadow: 2px 0 12px rgba(0,0,0,.05);
}

/* ── Right panel: left-edge shadow ── */
.bpp-right-panel {
  box-shadow: -2px 0 12px rgba(0,0,0,.05);
}

/* ── Sidebar scrollbar (thin) ── */
.bpp-sidebar::-webkit-scrollbar { width: 3px; }
.bpp-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.bpp-right-panel::-webkit-scrollbar { width: 3px; }
.bpp-right-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ── Mobile: shell min-height, bottom nav is fixed so no clip needed ── */
@media (max-width: 1280px) {
  .bpp-shell {
    min-height: calc(100dvh - var(--hh));
  }
  .bpp-main {
    padding-bottom: 0;
  }
}

/* ── Desktop: sidebar height fills the shell exactly ── */
@media (min-width: 1281px) {
  .bpp-sidebar, .bpp-right-panel {
    height: 100% !important;
    align-self: stretch !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   ALL RESPONSIVE FIXES — v21
   ════════════════════════════════════════════════════════════════ */

/* ── 1 & 8: Sticky header — always sticky ── */
.bpp-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* ── 1: Hide FAB (Add Expense floating button) on mobile ── */
@media (max-width: 767px) {
  .bpp-fab { display: none !important; }
}

/* ── 2: Sidebar — mobile drawer (full height, slides in) ── */
/* duplicate 900px sidebar block removed */

/* ── 3: Financial Health Score — centered on mobile ── */
@media (max-width: 768px) {
  .bpp-score-body {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .bpp-score-gauge-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .bpp-score-gauge {
    margin: 0 auto !important;
  }
  .bpp-score-pillars {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
  .bpp-score-msg {
    text-align: center !important;
  }
}

/* ── 4: Budget Rules Engine — prevent dropdown overflow ── */
.bpp-panel-rules .bpp-panel-hd {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.bpp-rule-select {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .bpp-panel-rules .bpp-panel-hd {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .bpp-rule-select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
  }
  .bpp-rules-body { overflow-x: hidden !important; }
  .bpp-rule-grid  { overflow-x: hidden !important; }
}

/* ── 5: Goals + YoY — horizontal slider on mobile ── */
@media (max-width: 768px) {
  /* Goals slider */
  .bpp-goal-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .bpp-goal-slider::-webkit-scrollbar { display: none; }
  .bpp-goal-slider .bpp-goal-card {
    flex: 0 0 78vw !important;
    min-width: 200px !important;
    scroll-snap-align: start !important;
  }
  .bpp-goal-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important; margin-top: 8px !important;
  }
  .bpp-goal-dots .bpp-sdot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border); cursor: pointer;
    transition: background var(--dur);
  }
  .bpp-goal-dots .bpp-sdot.active { background: var(--blue) !important; }

  /* YoY section — make inner blocks scrollable horizontally */
  .bpp-yoy-inputs {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    scrollbar-width: none !important;
    padding-bottom: 6px !important;
  }
  .bpp-yoy-inputs::-webkit-scrollbar { display: none; }
  .bpp-yoy-input-group {
    flex: 0 0 72vw !important;
    scroll-snap-align: start !important;
    min-width: 180px !important;
  }
  .bpp-yoy-table { overflow-x: auto !important; }
  .bpp-yoy-pull-kpis {
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
    scrollbar-width: none !important;
  }
  .bpp-yoy-pull-kpis::-webkit-scrollbar { display: none; }
}
.bpp-goal-dots { display: none; }
@media (max-width: 768px) { .bpp-goal-dots { display: flex !important; } }

/* ── 6: Purchase Readiness — visible on all devices ── */
/* Override the hide rule for old tab-based panels */
.bpp-pt-panel.bpp-pt-card { display: flex !important; flex-direction: column !important; }
/* Smart Purchase Readiness — one card at a time slider on all screens */
.bpp-purchase-grid {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 0 !important;
  scrollbar-width: none !important;
  margin-bottom: 12px !important;
}
.bpp-purchase-grid::-webkit-scrollbar { display: none; }

.bpp-pt-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scroll-snap-align: start !important;
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.bpp-pt-card-label {
  font-size: 14px; font-weight: 700; color: var(--blue);
  margin-bottom: 2px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Dots — always visible on all screen sizes */
.bpp-purchase-dots-mobile {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.bpp-pdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: background var(--dur);
}
.bpp-pdot.active { background: var(--blue) !important; }

/* ── 7: Mobile Budget Rows — category top, amount+freq below ── */
@media (max-width: 599px) {
  .bpp-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 4px 6px !important;
    padding: 9px 10px !important;
    align-items: center !important;
  }
  /* Row 1: category label spans full width */
  .bpp-row .bpp-lbl {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    min-width: 0 !important;
  }
  /* Row 2: amount wrapper col 1 */
  .bpp-row .bpp-aw {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 7px !important;
    padding: 5px 8px !important;
  }
  .bpp-row .bpp-aw .bpp-sym {
    font-size: 12px !important;
    color: var(--ink4) !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
  }
  .bpp-row .bpp-aw .bpp-amt {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    text-align: left !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Row 2: frequency dropdown col 2 */
  .bpp-row .bpp-frq {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 11px !important;
    color: var(--ink5) !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 7px !important;
    padding: 5px 6px !important;
    align-self: center !important;
    white-space: nowrap !important;
  }
  /* Delete button: absolute top-right */
  .bpp-row .bpp-del {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    font-size: 16px !important;
    color: var(--ink5) !important;
  }

  /* ── Smart Purchase Readiness — single column on mobile ── */
  .bpp-pt-inputs {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .bpp-pt-card {
    padding: 14px !important;
    gap: 12px !important;
  }
  .bpp-pt-field label {
    font-size: 11px !important;
    margin-bottom: 5px !important;
  }
  .bpp-pt-input {
    font-size: 15px !important;
    padding: 9px 10px !important;
  }
}

/* ── Advanced / Planning sliders — mobile ── */
@media (max-width: 768px) {
  #bpp-advanced-slider, #bpp-planning-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    scrollbar-width: none !important;
  }
  #bpp-advanced-slider::-webkit-scrollbar,
  #bpp-planning-slider::-webkit-scrollbar { display: none; }
  #bpp-advanced-slider .bpp-pslide-card,
  #bpp-planning-slider .bpp-pslide-card {
    flex: 0 0 100% !important; max-width: 100% !important;
    scroll-snap-align: start !important; min-width: 0 !important;
    overflow: hidden !important;
  }
  #bpp-advanced-dots, #bpp-planning-dots,
  .bpp-slider-dots, .bpp-pslider-dots {
    display: flex !important; justify-content: center !important;
    gap: 8px !important; margin-top: 10px !important;
  }
  .bpp-sdot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border); display: inline-block;
    cursor: pointer; transition: background var(--dur);
  }
  .bpp-sdot.active { background: var(--blue) !important; }
}

/* ── Smart Insights slider ── */
.bpp-insights-dots { display: none; justify-content: center; gap: 6px; margin-top: 8px; }
@media (max-width: 768px) {
  .bpp-insights-si-row {
    display: flex !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important; scrollbar-width: none !important;
  }
  .bpp-insights-si-row::-webkit-scrollbar { display: none; }
  .bpp-insights-si-row .bpp-card-ins,
  .bpp-insights-si-row .bpp-card-si {
    flex: 0 0 100% !important; scroll-snap-align: start !important;
    margin: 0 !important; border-radius: 0 !important;
  }
  .bpp-insights-dots { display: flex !important; }
}
.bpp-insights-dots .bpp-idot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: background var(--dur);
}
.bpp-insights-dots .bpp-idot.active { background: var(--blue); }

/* ── Visual Dashboard charts ── */
/* ── Visual Dashboard charts — always visible ── */
/* panels always shown; empty state shown via JS when no data */
.bpp-chart-panels { display: block !important; }
.bpp-chart-empty  { text-align:center; padding: 22px; }  /* shown by default, JS hides when data present */
.bpp-cpanel { display: block !important; }
.bpp-cpanel[hidden] { display: none !important; }

/* Charts body has explicit height so canvas never collapses */
.bpp-charts-body {
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.bpp-panel-charts .bpp-cw,
.bpp-panel-charts .bpp-cw-pie {
  flex: 1;
  min-height: 200px !important;
  height: 220px !important;
}

/* Canvas wrapper heights */
.bpp-cw     { position: relative !important; height: 220px !important; min-height: 180px !important; }
.bpp-cw-pie { height: 220px !important; min-height: 180px !important; }
@media (max-width: 768px) {
  .bpp-cw     { height: 200px !important; min-height: 160px !important; }
  .bpp-cw-pie { height: 200px !important; min-height: 160px !important; }
}

/* Canvas itself always fills wrapper */
.bpp-cw canvas, .bpp-cw-pie canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Chart tab buttons (Bar / Pie / Trend) */
.bpp-chart-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
.bpp-chart-tab {
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
  background: var(--card2) !important;
  color: var(--ink4) !important;
  cursor: pointer !important;
  transition: all var(--dur) !important;
}
.bpp-chart-tab.active,
.bpp-chart-tab:hover {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}

/* ── Fix 1: Start button aligned right in banner main row ── */
.bpp-status-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}
.bpp-status-banner-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.bpp-status-banner-actions {
  flex-shrink: 0 !important;
}

/* Start button styling */
.bpp-start-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  background: #4F46E5 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .18s, transform .18s, box-shadow .18s !important;
  box-shadow: 0 2px 10px rgba(79,70,229,.35) !important;
  letter-spacing: 0.2px !important;
}
.bpp-start-btn svg { stroke: #fff !important; flex-shrink: 0 !important; }
.bpp-start-btn:hover {
  background: #4338CA !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,.45) !important;
}

/* ── Fix 3: Hide Start button when budget is already set up ── */
.bpp-status-banner.stable .bpp-status-banner-actions,
.bpp-status-banner.warning .bpp-status-banner-actions,
.bpp-status-banner.danger .bpp-status-banner-actions {
  display: none !important;
}

/* ── Fix 2: Space between action-now and formula-row ── */
.bpp-action-now {
  margin-bottom: 0 !important;
}
.bpp-formula-row {
  margin-top: 14px !important;
  border-top: 1px solid var(--border) !important;
}

/* ── Fix 4: Insights slider dots ── */
.bpp-insights-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 8px 0 4px;
}
@media (max-width: 768px) {
  .bpp-insights-dots {
    display: flex !important;
  }
}
.bpp-idot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: background var(--dur), transform var(--dur);
  display: inline-block;
}
.bpp-idot.active {
  background: var(--blue) !important;
  transform: scale(1.25);
}

/* ── Mobile banner: allow wrap so start btn stays visible ── */
@media (max-width: 480px) {
  .bpp-status-banner {
    flex-wrap: wrap !important;
  }
  .bpp-status-banner-actions {
    width: 100% !important;
  }
  .bpp-start-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — single authoritative block (v22)
   All sidebar mobile rules live ONLY here. No duplicates.
   ════════════════════════════════════════════════════════════════ */

/* Base: sidebar header hidden on desktop */
.bpp-sb-header { display: none; }

/* ── Mobile drawer (≤900px) ── */
@media (max-width: 1280px) {

  /* 1. Hamburger visible */
  .bpp-ham { display: flex !important; }

  /* 2. Sidebar becomes a fixed left drawer */
  .bpp-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: min(300px, 88vw) !important;
    height: 100% !important;
    height: 100dvh !important;
    z-index: 1200 !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    transition: left 0.27s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: var(--card) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* 3. Open state */
  .bpp-sidebar.bpp-open {
    left: 0 !important;
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.38) !important;
  }

  /* 4. Overlay */
  .bpp-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1190 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }
  .bpp-overlay.bpp-visible {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* 5. Shell doesn't clip the drawer — reset desktop height/overflow */
  .bpp-shell { overflow: visible !important; height: auto !important; min-height: calc(100dvh - var(--hh)); }

  /* ── Sidebar header (brand + close btn) ── */
  .bpp-sb-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 16px 13px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--card) !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
  .bpp-sb-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .bpp-sb-logo {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .bpp-sb-brand-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  .bpp-sb-brand-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    letter-spacing: -0.2px !important;
  }
  .bpp-sb-brand-tag {
    font-size: 10px !important;
    color: var(--ink5) !important;
    font-weight: 500 !important;
  }
  .bpp-sb-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  /* ── Sidebar body (scrollable content area) ── */
  .bpp-sidebar-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 12px 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .bpp-sidebar-body::-webkit-scrollbar { display: none; }

  /* ── Income type card ── */
  .bpp-sb-income-type {
    background: linear-gradient(135deg, var(--blue-lt) 0%, rgba(59, 130, 246, 0.06) 100%) !important;
    border: 1.5px solid var(--blue-mid) !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    margin-bottom: 16px !important;
  }
  .bpp-sb-it-lbl {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: var(--blue) !important;
    opacity: 0.7 !important;
    margin-bottom: 5px !important;
    display: block !important;
  }
  .bpp-sb-it-val {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin-bottom: 10px !important;
  }
  .bpp-sb-it-val svg { color: var(--blue) !important; flex-shrink: 0 !important; }
  .bpp-sb-switch-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--blue) !important;
    background: var(--card) !important;
    border: 1.5px solid var(--blue-mid) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    box-sizing: border-box !important;
  }
  .bpp-sb-switch-link:hover, .bpp-sb-switch-link:active {
    background: var(--blue) !important;
    color: #fff !important;
    border-color: var(--blue) !important;
  }

  /* ── Section labels ── */
  .bpp-nav-sec {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    color: var(--ink5) !important;
    padding: 12px 10px 5px !important;
    display: block !important;
    margin-top: 4px !important;
  }

  /* ── Nav links — large touch targets ── */
  .bpp-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 12px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--ink3) !important;
    text-decoration: none !important;
    transition: all 0.16s ease !important;
    margin-bottom: 2px !important;
    min-height: 44px !important;
  }
  .bpp-nav-link svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.8 !important;
    flex-shrink: 0 !important;
    opacity: 0.75 !important;
  }
  .bpp-nav-link:hover, .bpp-nav-link:active {
    background: var(--blue-lt) !important;
    color: var(--blue) !important;
  }
  .bpp-nav-link:hover svg, .bpp-nav-link:active svg { opacity: 1 !important; }
  .bpp-nav-link.bpp-active {
    background: var(--blue) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
  .bpp-nav-link.bpp-active svg { opacity: 1 !important; }

  /* ── Sidebar footer pinned at bottom ── */
  .bpp-sidebar-foot {
    flex-shrink: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px 14px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--card) !important;
  }
  .bpp-priv-note {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--ink5) !important;
    background: var(--card2) !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
  }
  .bpp-priv-note svg { flex-shrink: 0 !important; }
}

/* Fix: streak meta always hidden */
.bpp-status-banner-meta { display: none !important; }

/* Fix: Start button — responsive on very small screens */
@media (max-width: 400px) {
  .bpp-status-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .bpp-status-banner-actions {
    width: 100% !important;
  }
  .bpp-start-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Fix: sidebar header base state explicitly hidden */
.bpp-sb-header {
  display: none;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   BULLETPROOF SIDEBAR DRAWER — overrides everything
   ════════════════════════════════════════════════════════════════ */

/* Force sidebar off-screen on mobile — no other rule can override this */
@media screen and (max-width: 1280px) {
  #bpp-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -320px !important;
    left: -100vw !important;
    width: 300px !important;
    width: min(300px, 88vw) !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    background: var(--card, #fff) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left 0.27s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #bpp-sidebar.bpp-open {
    left: 0 !important;
    box-shadow: 8px 0 40px rgba(0,0,0,0.4) !important;
  }
  /* Overlay */
  #bpp-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99998 !important;
    background: rgba(0,0,0,0.55) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }
  #bpp-overlay.bpp-visible {
    opacity: 1 !important;
    pointer-events: all !important;
  }
  /* Hamburger */
  #bpp-ham {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    background: var(--card2, #f8fafc) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: var(--ink4, #64748b) !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Shell must not clip the sidebar */
  .bpp-shell {
    overflow: visible !important;
    overflow-x: clip !important;
  }
}
/* Category chips — horizontal scroll slider */
.bpp-cat-slider-wrap {
  position: relative;
}
/* Fade edges to hint scrollability */
.bpp-cat-slider-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--card, #fff));
  pointer-events: none;
  border-radius: 0 99px 99px 0;
}
.bpp-bs-chips {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 1px 0;
}
/* Slider override when inside .bpp-cat-slider */
.bpp-cat-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 6px !important;
  padding: 3px 2px 6px !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bpp-cat-slider::-webkit-scrollbar { display: none; }
.bpp-cat-slider .bpp-chip {
  flex-shrink: 0 !important;
  scroll-snap-align: start;
}
.bpp-bs-chips .bpp-chip {
  padding: 5px 11px; font-size: 12px; font-weight: 600;
  border-radius: 99px; border: 1.5px solid var(--border);
  background: var(--card2); color: var(--ink3);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.bpp-bs-chips .bpp-chip:hover,
.bpp-bs-chips .bpp-chip.active,
.bpp-fab-chips .bpp-chip.active {
  background: var(--blue-lt); border-color: var(--blue); color: var(--blue);
  font-weight: 700;
}

/* ── NUCLEAR HAM OVERRIDE — theme cannot win ── */
button#bpp-ham,
#bpp-nav button#bpp-ham,
#bpp-nav-fixed button#bpp-ham,
.bpp-nav button#bpp-ham {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}
@media (min-width: 1281px) {
  button#bpp-ham,
  #bpp-nav button#bpp-ham,
  .bpp-nav button#bpp-ham {
    display: none !important;
  }
}
button#bpp-ham svg,
#bpp-nav button#bpp-ham svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  stroke: #1e293b !important;
  width: 18px !important;
  height: 18px !important;
}

/* ════════════════════════════════════════════════════════════════
   RENT VS BUY — Result panel styles
   ════════════════════════════════════════════════════════════════ */

.bpp-rvb-result {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Desktop: result scrolls inside panel so it doesn't overflow */
@media (min-width: 769px) {
  .bpp-rvb-result {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .bpp-rvb-result::-webkit-scrollbar { width: 4px; }
  .bpp-rvb-result::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
}

/* Two-column scenario grid */
.bpp-rvb-scenarios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Inside the narrow RvB panel, always single column */
.bpp-panel-rvb .bpp-rvb-scenarios {
  grid-template-columns: 1fr !important;
}
.bpp-panel-rvb .bpp-exp-ctx-wrap {
  grid-template-columns: 1fr !important;
}
@media (max-width: 700px) {
  .bpp-rvb-scenarios { grid-template-columns: 1fr; }
}

/* Single scenario card */
.bpp-rvb-scenario {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bpp-rvb-rent-s { border-top: 3px solid #f59e0b; }
.bpp-rvb-buy-s  { border-top: 3px solid #10b981; }
.bpp-exp-ctx-wrap .bpp-rvb-scenario { border-top: 3px solid #6366f1; }
.bpp-hs-plan    { border-top: 3px solid #3b82f6 !important; }

.bpp-rvb-scenario h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Each data row: label left, value right */
.bpp-rvb-s-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink3);
  padding: 2px 0;
}
.bpp-rvb-s-row span:first-child {
  color: var(--ink4);
  font-size: 11.5px;
}
.bpp-rvb-s-row span:last-child {
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-family: var(--font-num);
  white-space: nowrap;
}
.bpp-rvb-s-row small.bpp-ctx-pct {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink5);
  display: block;
}
.bpp-ctx-leaves { color: var(--green) !important; }
.bpp-ctx-rent-row span:last-child { color: var(--amber, #f59e0b) !important; }
.bpp-ctx-buy-row span:last-child  { color: var(--red, #ef4444) !important; }
.bpp-ctx-diff-row span:last-child { color: var(--red, #ef4444) !important; }

/* Expense context — full width */
.bpp-exp-ctx-wrap {
  grid-template-columns: 1fr !important;
}

/* ── House savings plan ── */
.bpp-hs-target {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.bpp-hs-lbl { font-size: 11.5px; color: var(--ink4); }
.bpp-hs-val { font-size: 15px; font-weight: 800; color: var(--blue); font-family: var(--font-num); }

.bpp-hs-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.bpp-hs-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr auto;
  gap: 4px;
  font-size: 11.5px;
  padding: 5px 6px;
  border-radius: 6px;
  align-items: center;
}
.bpp-hs-row:not(.bpp-hs-row-hd):nth-child(odd)  { background: var(--card); }
.bpp-hs-row:not(.bpp-hs-row-hd):nth-child(even) { background: var(--card2); }
.bpp-hs-row-hd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink5);
  padding: 4px 6px;
}
.bpp-hs-row span:first-child { font-weight: 600; color: var(--ink3); }
.bpp-hs-row strong { font-family: var(--font-num); color: var(--ink); }

/* Badges */
.bpp-hs-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.bpp-hs-easy { background: #dcfce7; color: #16a34a; }
.bpp-hs-mod  { background: #fef3c7; color: #d97706; }
.bpp-hs-hard { background: #fee2e2; color: #dc2626; }

.bpp-hs-note {
  font-size: 11.5px;
  color: var(--ink4);
  background: var(--blue-lt, #eff6ff);
  border: 1px solid var(--blue-mid, #bfdbfe);
  border-radius: 8px;
  padding: 8px 11px;
  margin-top: 4px;
  line-height: 1.5;
}

/* Summary paragraph */
.bpp-rvb-summary {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--ink3);
  line-height: 1.6;
  margin-top: 8px;
}
.bpp-rvb-summary strong { color: var(--ink); }

/* RvB panel body — result never overflows panel */
.bpp-panel-rvb .bpp-rvb-result {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* On desktop, RvB input form sits above the result neatly */
.bpp-panel-rvb {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Scenario card — ensure label+value never run together */
.bpp-rvb-s-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 12.5px !important;
}
.bpp-rvb-s-row:last-child { border-bottom: none !important; }
.bpp-rvb-s-row > span:first-child {
  color: var(--ink4) !important;
  font-size: 11.5px !important;
  flex: 1 !important;
  white-space: nowrap !important;
}
.bpp-rvb-s-row > span:last-child {
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-family: var(--font-num) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Scenario h4 — bold section header */
.bpp-rvb-scenario h4 {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 8px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--border) !important;
}

/* Summary — full width text block */
.bpp-rvb-summary {
  grid-column: 1 / -1;
}

/* Expense context — full width */
.bpp-exp-ctx-wrap {
  grid-template-columns: 1fr !important;
}
.bpp-exp-ctx-wrap .bpp-rvb-scenario {
  width: 100%;
}

/* House savings plan — full width */
.bpp-hs-plan {
  width: 100%;
}

/* Timeline table header */
.bpp-hs-row-hd span {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--ink5) !important;
}

/* RvB result — desktop tightening */
@media (min-width: 769px) {
  /* Scenario cards side by side inside narrow panel */
  .bpp-rvb-scenario h4 { font-size: 12.5px; }
  .bpp-rvb-s-row { font-size: 11.5px; }
  .bpp-rvb-s-row span:first-child { font-size: 11px; }
  
  /* Expense context full-width */
  .bpp-exp-ctx-wrap { grid-template-columns: 1fr !important; }
  
  /* House savings table compact */
  .bpp-hs-row { font-size: 11px; }
  .bpp-hs-row-hd { font-size: 9.5px; }
  
  /* Summary text smaller */
  .bpp-rvb-summary { font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════
   SMART PURCHASE READINESS — Result card styles
   ════════════════════════════════════════════════════════════════ */

.bpp-pt-result {
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: 12.5px;
}

/* Colour-coded left border by verdict */
.bpp-result-green { border-left: 4px solid #16a34a !important; background: #f0fdf4; }
.bpp-result-amber { border-left: 4px solid #d97706 !important; background: #fffbeb; }
.bpp-result-red   { border-left: 4px solid #dc2626 !important; background: #fff1f2; }

/* Verdict headline */
.bpp-result-verdict {
  font-size: 13.5px;
  font-weight: 800;
  padding: 10px 12px 4px;
  color: var(--ink);
}
.bpp-result-green .bpp-result-verdict { color: #15803d; }
.bpp-result-amber .bpp-result-verdict { color: #b45309; }
.bpp-result-red   .bpp-result-verdict { color: #b91c1c; }

/* One-line explanation */
.bpp-result-expl {
  font-size: 12px;
  color: var(--ink4);
  padding: 0 12px 8px;
  line-height: 1.5;
}

/* EMI / Loan info pill */
.bpp-result-info {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-lt, #eff6ff);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  font-family: var(--font-num);
}

/* Checklist */
.bpp-result-checks {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bpp-chk-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.4;
}
.bpp-chk-ico {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.bpp-chk-pass { opacity: 1; }
.bpp-chk-fail { opacity: 1; }
.bpp-chk-lbl  { color: var(--ink3); }

/* Why block */
.bpp-why-block {
  margin: 0 12px 8px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.bpp-why-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink5);
  padding: 6px 10px 4px;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
}
.bpp-why-body {
  font-size: 11.5px;
  color: var(--ink4);
  padding: 8px 10px;
  line-height: 1.55;
}

/* How to improve block */
.bpp-improve-block {
  margin: 0 12px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.bpp-improve-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink5);
  padding: 6px 10px 4px;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
}
.bpp-improve-list {
  margin: 0;
  padding: 8px 10px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bpp-improve-list li {
  font-size: 11.5px;
  color: var(--ink3);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATION PANEL
   ══════════════════════════════════════════════════════════════ */

.bpp-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--s2);
  z-index: 9100;
  overflow: hidden;
  animation: bpp-notif-in 0.18s cubic-bezier(0.4,0,0.2,1);
}
@keyframes bpp-notif-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.bpp-notif-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.bpp-notif-panel-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.1px;
}
.bpp-notif-clear {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background var(--dur);
}
.bpp-notif-clear:hover { background: var(--blue-lt); }

/* List */
.bpp-notif-list {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.bpp-notif-list::-webkit-scrollbar { width: 4px; }
.bpp-notif-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* Empty state */
.bpp-notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--ink5);
}
.bpp-notif-empty svg { stroke: var(--ink6); opacity: 0.6; }
.bpp-notif-empty p { font-size: 13px; font-weight: 500; margin: 0; }

/* Individual notification item */
.bpp-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur);
  cursor: default;
}
.bpp-notif-item:last-child { border-bottom: none; }
.bpp-notif-item:hover { background: var(--card2); }
.bpp-notif-item.bpp-notif-unread { background: var(--blue-lt); }
.bpp-notif-item.bpp-notif-unread:hover { background: var(--blue-lt); filter: brightness(0.97); }

/* Icon dot */
.bpp-notif-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}
.bpp-notif-icon.danger  { background: #FEE2E2; }
.bpp-notif-icon.warning { background: #FEF3C7; }
.bpp-notif-icon.success { background: #DCFCE7; }
.bpp-notif-icon.info    { background: var(--blue-lt); }
.bpp-notif-icon.tip     { background: #F3E8FF; }

/* Text content */
.bpp-notif-body { flex: 1; min-width: 0; }
.bpp-notif-msg {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink2);
  line-height: 1.45;
  margin: 0 0 3px;
}
.bpp-notif-item.bpp-notif-unread .bpp-notif-msg { color: var(--ink); font-weight: 600; }
.bpp-notif-time {
  font-size: 11px;
  color: var(--ink5);
}

/* Unread dot */
.bpp-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 5px;
}

/* Dark mode */
.bpp-dark .bpp-notif-panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.bpp-dark .bpp-notif-item.bpp-notif-unread { background: var(--blue-lt); }
.bpp-dark .bpp-notif-icon.danger  { background: rgba(239,68,68,.18); }
.bpp-dark .bpp-notif-icon.warning { background: rgba(245,158,11,.18); }
.bpp-dark .bpp-notif-icon.success { background: rgba(34,197,94,.18); }
.bpp-dark .bpp-notif-icon.tip     { background: rgba(139,92,246,.18); }

/* Mobile: full width panel */
@media (max-width: 599px) {
  .bpp-notif-panel {
    position: fixed;
    top: var(--hh);
    left: 8px;
    right: 8px;
    width: auto;
    border-radius: 14px;
  }
}


/* ================================================================
   EMAIL VERIFICATION BANNER
   ================================================================ */
.bpp-verify-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #EEF2FF 0%, #F0FDF4 100%);
  border-bottom: 1px solid #C7D2FE;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  position: relative;
  z-index: 50;
  animation: bpp-banner-in .4s ease both;
}
@keyframes bpp-banner-in {
  from { opacity:0; transform: translateY(-100%); }
  to   { opacity:1; transform: translateY(0); }
}
.bpp-verify-ico { font-size: 15px; flex-shrink: 0; }
.bpp-verify-msg { flex: 1; }
.bpp-verify-btn {
  background: #3A63FF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
  white-space: nowrap;
}
.bpp-verify-btn:hover { background: #2748d6; transform: translateY(-1px); }
.bpp-verify-btn.bpp-sent {
  background: #22C55E;
  cursor: default;
  transform: none;
}
.bpp-verify-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #9CA3AF;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.bpp-verify-close:hover { background: rgba(0,0,0,.06); color: #374151; }
@media (max-width: 600px) {
  .bpp-verify-banner { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .bpp-verify-msg { font-size: 12.5px; }
}

/* ── BULLETPROOF: Sidebar close button always visible ── */
#bpp-sidebar .bpp-sb-close,
#bpp-sidebar .bpp-sb-header .bpp-sb-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--border, #E5E7EB) !important;
  background: var(--card2, #F1F5F9) !important;
  color: var(--ink4, #6B7280) !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}
#bpp-sidebar .bpp-sb-close svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#bpp-sidebar .bpp-sb-close:hover {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #EF4444 !important;
}
/* ── BULLETPROOF: Sidebar ctrl buttons always visible ── */
#bpp-sidebar .bpp-sb-ctrl-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#bpp-sidebar .bpp-sb-ctrl-btn svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#bpp-sidebar .bpp-sb-header {
  display: none;
}
@media (max-width: 1280px) {
  #bpp-sidebar .bpp-sb-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border, #E5E7EB) !important;
    background: var(--card, #fff) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    gap: 8px !important;
  }
}

/* ── NUCLEAR: Override any theme that hides SVGs in sidebar header ── */
/* SVG element itself: size + visibility */
#bpp-sidebar .bpp-sb-header svg,
#bpp-sidebar .bpp-sb-ctrl-btn svg,
#bpp-sidebar .bpp-sb-close svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  fill: none !important;
}
/* SVG children: only stroke + visibility, never size */
#bpp-sidebar .bpp-sb-header svg *,
#bpp-sidebar .bpp-sb-ctrl-btn svg *,
#bpp-sidebar .bpp-sb-close svg * {
  visibility: visible !important;
  opacity: 1 !important;
  stroke: currentColor !important;
}
/* ico-moon hidden by default (JS toggles it) */
#bpp-sidebar .bpp-sb-header .ico-moon {
  display: none !important;
}
.bpp-dark #bpp-sidebar .bpp-sb-header .ico-moon { display: block !important; }
.bpp-dark #bpp-sidebar .bpp-sb-header .ico-sun  { display: none !important; }

/* Hide collapse button on mobile — ID specificity beats everything */
@media (max-width: 1280px) {
  #bpp-sidebar #bpp-sb-collapse,
  #bpp-sb-collapse {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Hide hamburger on desktop — overrides any inline style */
@media (min-width: 1281px) {
  #bpp-ham { display: none !important; visibility: hidden !important; }
}

/* ── Budget rows + Purchase: extend to tablet (599–1280px) ── */
@media (min-width: 600px) and (max-width: 1280px) {
  /* Category on top, amount+freq on bottom row */
  .bpp-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  .bpp-row .bpp-lbl {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--ink) !important;
  }
  .bpp-row .bpp-aw {
    grid-column: 1 !important; grid-row: 2 !important;
    display: flex !important; align-items: center !important; gap: 3px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 7px !important; padding: 5px 8px !important;
  }
  .bpp-row .bpp-aw .bpp-amt {
    font-size: 14px !important; font-weight: 700 !important;
    width: 100% !important;
  }
  .bpp-row .bpp-frq {
    grid-column: 2 !important; grid-row: 2 !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 7px !important; padding: 5px 8px !important;
    font-size: 11px !important;
  }
  .bpp-row .bpp-del {
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: end !important;
  }
  /* Purchase: single column on tablets */
  .bpp-pt-inputs { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ── Fix 3: Purchase Readiness slider arrows ── */
.bpp-purchase-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
.bpp-purchase-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important; height: 36px !important;
  flex-shrink: 0 !important;
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  color: var(--ink3) !important;
  transition: background .15s, border-color .15s, color .15s !important;
  z-index: 2 !important;
}
.bpp-purchase-arrow svg { display: block !important; }
.bpp-purchase-arrow:hover {
  background: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #4F46E5 !important;
}
.bpp-purchase-arrow:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}
.bpp-purchase-prev { margin-right: 8px !important; }
.bpp-purchase-next { margin-left: 8px !important; }
.bpp-purchase-grid {
  flex: 1 !important;
}
.bpp-dark .bpp-purchase-arrow { background: var(--card2) !important; border-color: var(--border) !important; }

/* ── Fix 4: Savings ring mobile ── */
@media (max-width: 1280px) {
  .bpp-kpi-rate-ring {
    width: 38px !important; height: 38px !important;
  }
  .bpp-ring-svg {
    width: 38px !important; height: 38px !important;
  }
  .bpp-ring-bg { stroke-width: 3.5 !important; }
  .bpp-ring-fill { stroke-width: 3.5 !important; }
  .bpp-ring-pct {
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX 1: Purchase arrows hide on mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .bpp-purchase-arrow { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIX 1: Purchase arrow size + icon fix
   ══════════════════════════════════════════════════════════════ */
.bpp-purchase-arrow {
  width: 30px !important; height: 30px !important;
}
.bpp-purchase-arrow svg {
  fill: none !important;
  display: block !important;
  width: 14px !important; height: 14px !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX 2: Desktop budget rows — category top, amount+freq below
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1281px) {
  .bpp-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  .bpp-row .bpp-lbl {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--ink) !important;
  }
  .bpp-row .bpp-aw {
    grid-column: 1 !important; grid-row: 2 !important;
    display: flex !important; align-items: center !important; gap: 3px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 7px !important; padding: 5px 8px !important;
  }
  .bpp-row .bpp-aw .bpp-amt {
    font-size: 14px !important; font-weight: 700 !important; width: 100% !important;
  }
  .bpp-row .bpp-frq {
    grid-column: 2 !important; grid-row: 2 !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 7px !important; padding: 5px 8px !important;
    font-size: 11px !important;
  }
  .bpp-row .bpp-del {
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: end !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX 4: Weekly Snapshot professional styling
   ══════════════════════════════════════════════════════════════ */
.bpp-weekly-insight {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 10px;
}
.bpp-wi-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink5); margin-bottom: 12px;
}
.bpp-wi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 12px;
}
.bpp-wi-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.bpp-wi-lbl {
  display: block; font-size: 10.5px; font-weight: 700;
  color: var(--ink5); text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 4px;
}
.bpp-wi-val {
  font-size: 16px; font-weight: 800;
  font-family: var(--font-num); color: var(--ink);
  line-height: 1.2;
}
.bpp-wi-val small { font-size: 11px; font-weight: 600; color: var(--ink5); }
.bpp-wi-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px; color: var(--ink3); line-height: 1.5;
  margin-top: 6px;
}
/* week micro text bar */
.bpp-week-micro {
  font-size: 12px; color: var(--ink4);
  background: var(--card2); border-radius: 8px;
  padding: 9px 12px; margin-top: 8px;
  border: 1px solid var(--border); line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   FIX 5: YoY Growth Report rows — professional card layout
   ══════════════════════════════════════════════════════════════ */
.bpp-yoy-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.bpp-yoy-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.bpp-yoy-row-label {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink5);
}
.bpp-yoy-row-vals {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bpp-yoy-yr {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  min-width: 80px;
}
.bpp-yoy-yr-lbl {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink5); margin-bottom: 2px;
}
.bpp-yoy-yr-val {
  font-size: 14px; font-weight: 800;
  font-family: var(--font-num); color: var(--ink);
}
.bpp-yoy-yr-val--empty { color: var(--ink5); }
.bpp-yoy-diff {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px; font-weight: 800;
  white-space: nowrap;
}
.bpp-yoy-diff-good    { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.bpp-yoy-diff-bad     { background: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; }
.bpp-yoy-diff-neutral { background: var(--card2); color: var(--ink5); border: 1px solid var(--border); }
.bpp-yoy-no26 { font-style: italic; }
.bpp-dark .bpp-yoy-diff-good  { background: rgba(21,128,61,.2); color: #4ADE80; border-color: rgba(74,222,128,.2); }
.bpp-dark .bpp-yoy-diff-bad   { background: rgba(220,38,38,.2); color: #F87171; border-color: rgba(248,113,113,.2); }

/* ══════════════════════════════════════════════════════════════
   FIX 6: Goals empty state + centered Add Goal button
   ══════════════════════════════════════════════════════════════ */
.bpp-goal-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 32px 20px;
  text-align: center;
  color: var(--ink5);
}
.bpp-goal-empty svg { stroke: var(--ink5); opacity: .4; margin-bottom: 4px; }
.bpp-goal-empty-title {
  font-size: 15px; font-weight: 700; color: var(--ink3);
}
.bpp-goal-empty-sub {
  font-size: 12.5px; color: var(--ink5); max-width: 260px; line-height: 1.5;
}
/* Centered bigger Add New Goal button */
.bpp-goal-add-wrap {
  display: flex; justify-content: center; margin-top: 12px;
}
.bpp-goal-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 14px rgba(79,70,229,.32) !important;
}

/* ══════════════════════════════════════════════════════════════
   GOAL CARD — professional redesign
   ══════════════════════════════════════════════════════════════ */
.bpp-goal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .18s;
}
.bpp-goal-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.bpp-goal-card-on-track  { border-left: 3px solid #22C55E; }
.bpp-goal-card-behind    { border-left: 3px solid #F59E0B; }
.bpp-goal-card-needs-attention { border-left: 3px solid #EF4444; }

/* Header */
.bpp-goal-card-hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.bpp-goal-card-name {
  font-size: 14px; font-weight: 800;
  color: var(--ink); line-height: 1.3;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Badge */
.bpp-goal-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px;
  font-size: 10.5px; font-weight: 800;
  white-space: nowrap; flex-shrink: 0;
}
.bpp-goal-badge-ok   { background: #DCFCE7; color: #15803D; }
.bpp-goal-badge-warn { background: #FEF3C7; color: #92400E; }
.bpp-goal-badge-crit { background: #FEE2E2; color: #DC2626; }
.bpp-dark .bpp-goal-badge-ok   { background: rgba(34,197,94,.15);  color: #4ADE80; }
.bpp-dark .bpp-goal-badge-warn { background: rgba(245,158,11,.15); color: #FCD34D; }
.bpp-dark .bpp-goal-badge-crit { background: rgba(239,68,68,.15);  color: #F87171; }

/* Progress bar */
.bpp-goal-bar-wrap {
  height: 8px; background: var(--card2);
  border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border);
}
.bpp-goal-bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #4F46E5, #22C55E);
  transition: width .7s ease;
  min-width: 4px;
}
.bpp-goal-bar-meta {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  margin-top: -4px;
}
.bpp-goal-bar-pct {
  font-size: 11px; font-weight: 800;
  color: #4F46E5;
}
.bpp-goal-pace {
  font-size: 11px; color: var(--ink5);
  text-align: right; flex: 1;
}
.bpp-goal-pace strong { color: var(--ink3); }

/* Stat chips */
.bpp-goal-card-nums {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bpp-goal-num-item {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.bpp-goal-num-lbl {
  display: block;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink5); margin-bottom: 3px;
}
.bpp-goal-num-val {
  font-size: 13px; font-weight: 800;
  font-family: var(--font-num); color: var(--ink);
}
.bpp-goal-num-saved { color: #22C55E; }
.bpp-goal-num-rem   { color: #F59E0B; }

/* Action buttons */
.bpp-goal-card-actions {
  display: flex; gap: 8px; align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: -2px;
}
.bpp-goal-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; font-weight: 700;
  color: var(--ink3); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  flex: 1; justify-content: center;
}
.bpp-goal-edit-btn svg { stroke: currentColor !important; fill: none !important; flex-shrink: 0; }
.bpp-goal-edit-btn:hover { background: #EEF2FF; border-color: #C7D2FE; color: #4F46E5; }
.bpp-goal-del-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; font-weight: 700;
  color: var(--ink5); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bpp-goal-del-btn svg { stroke: currentColor !important; fill: none !important; flex-shrink: 0; }
.bpp-goal-del-btn:hover { background: #FEF2F2; border-color: #FECACA; color: #EF4444; }

/* ══════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════
   FIX: Chart tabs visible — remove overflow:hidden from slide card
   ══════════════════════════════════════════════════════════════ */
#bpp-advanced-slider .bpp-panel-charts {
  overflow: visible !important;
}
.bpp-chart-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
}
.bpp-chart-tab {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
  background: var(--card2) !important;
  color: var(--ink4) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.bpp-chart-tab.active,
.bpp-chart-tab:hover {
  background: #4F46E5 !important;
  color: #fff !important;
  border-color: #4F46E5 !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX: Data persistence — ensure save() called on all input events
   ══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════════
   CASHRECAP — MASTER RESPONSIVE + FIXES
   Single clean block replacing all previous appended overrides
════════════════════════════════════════════════════════════════ */

/* ── Universal ── */
.bpp-root { overflow-x: clip !important; }
img, svg { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════════ */

/* ≥ 1281px — Desktop: sidebar always visible */
@media (min-width: 1281px) {
  #bpp-ham, #bpp-sb-close { display: none !important; }
  .bpp-shell { display: flex !important; height: calc(100dvh - var(--hh)) !important; overflow: hidden !important; }
  #bpp-sidebar { position: sticky !important; top: 0 !important; height: 100% !important; left: auto !important; width: var(--sw) !important; flex-shrink: 0 !important; }
  .bpp-main { flex: 1 !important; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; }
  .bpp-overlay { display: none !important; }
}

/* ≤ 1280px — Tablet/Mobile: sidebar is a drawer */
@media (max-width: 1280px) {
  #bpp-ham { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border: 1.5px solid var(--border) !important; background: var(--card2) !important; border-radius: 8px !important; cursor: pointer !important; color: var(--ink4) !important; flex-shrink: 0 !important; }
  #bpp-sidebar { position: fixed !important; top: 0 !important; left: -100vw !important; width: min(280px, 88vw) !important; height: 100dvh !important; z-index: 9999 !important; border-radius: 0 !important; margin: 0 !important; transition: left .27s cubic-bezier(.4,0,.2,1) !important; background: var(--card) !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; }
  #bpp-sidebar.bpp-open { left: 0 !important; box-shadow: 8px 0 40px rgba(0,0,0,.35) !important; }
  #bpp-sb-collapse { display: none !important; }
  .bpp-shell { display: block !important; height: auto !important; min-height: calc(100dvh - var(--hh)) !important; overflow: visible !important; overflow-x: clip !important; }
  .bpp-main { width: 100% !important; overflow-y: auto !important; }
  #bpp-overlay { display: block !important; position: fixed !important; inset: 0 !important; z-index: 9998 !important; background: rgba(0,0,0,.5) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .25s !important; }
  #bpp-overlay.bpp-visible { opacity: 1 !important; pointer-events: all !important; }
  .bpp-tool-wrap { padding: 16px 16px 80px !important; }
  .bpp-nav-right #bpp-nav-settings { display: none !important; }
  .bpp-nav-right .bpp-nav-currency { display: none !important; }
  .bpp-nav-right .bpp-nav-theme-btn { display: none !important; }
  .bpp-nav-right #bpp-nav-notif { display: flex !important; }
  .bpp-nav-right #bpp-nav-profile { display: flex !important; }
}

/* ≤ 768px — Mobile tablet */
@media (max-width: 768px) {
  :root { --hh: 54px; }
  .bpp-nav-tagline { display: none !important; }
  .bpp-nav-center { display: none !important; }
  .bpp-tool-wrap { padding: 12px 12px 80px !important; gap: 12px !important; }
  .bpp-setup-2col { grid-template-columns: 1fr !important; }
  .bpp-insights-si-row { grid-template-columns: 1fr !important; }
  .bpp-daily-hero-grid { grid-template-columns: 1fr !important; }
  .bpp-overview { grid-template-columns: repeat(2,1fr) !important; }
}

/* ≤ 480px — Mobile phone */
@media (max-width: 480px) {
  :root { --hh: 52px; }
  .bpp-tool-wrap { padding: 10px 10px 70px !important; gap: 10px !important; }
  .bpp-kpi-hero { grid-template-columns: 1fr 1fr !important; }
  .bpp-setup-2col, .bpp-kpi-hero, .bpp-daily-hero-grid { grid-template-columns: 1fr !important; }
  .bpp-card { padding: 12px !important; }
  .bpp-card-hd { padding: 12px 14px !important; flex-wrap: wrap !important; }
  .bpp-bpp-row { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIX 1 — SAVINGS GOAL SECTION
   Problem: overflow:hidden on input wrap + faint status text
══════════════════════════════════════════════════════════════ */
.bpp-goal-section {
  border-top: 1px solid var(--border);
  padding: 14px 0 8px;
  margin-top: 4px;
}
/* When inside card-sav which has padding:0, add side padding */
.bpp-card-sav .bpp-goal-section {
  padding: 14px 16px 12px !important;
}
.bpp-goal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  flex-wrap: wrap;
}
/* CRITICAL: overflow:visible so input isn't clipped */
.bpp-goal-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9px !important;
  background: var(--card2) !important;
  padding: 6px 10px !important;
  flex: 1 !important;
  max-width: 200px !important;
  min-width: 100px !important;
  cursor: text !important;
}
.bpp-goal-input-wrap:focus-within {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important;
}
.bpp-goal-input {
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  outline: none !important;
  width: 100% !important;
  padding: 0 !important;
  pointer-events: auto !important;
}
.bpp-goal-bar-track {
  height: 10px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
  display: block;
}
.bpp-goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4F46E5, #22C55E);
  border-radius: 99px;
  transition: width .7s ease;
  display: block;
}
/* CRITICAL: status text visible — no !important so inline style works */
.bpp-goal-status {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink3);
  line-height: 1.5;
  padding-bottom: 6px;
  min-height: 20px;
}
@media (max-width: 480px) {
  .bpp-goal-hd { flex-direction: column; align-items: flex-start; }
  .bpp-goal-input-wrap { max-width: 100% !important; width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIX 2 — VISUAL DASHBOARD (Bar / Pie / Trend charts)
   Problems:
   a) bpp-chart-empty had display:flex !important — JS couldn't hide it
   b) Charts built AFTER calculate() so data was never pushed to charts
   c) Canvas wrappers had no absolute positioning for Chart.js
══════════════════════════════════════════════════════════════ */

/* Empty state — NO !important so JS inline style overrides it */
.bpp-chart-empty {
  display: block;
  text-align: center;
  padding: 28px 16px;
}
.bpp-empty-ico { font-size: 32px; display: block; margin-bottom: 10px; }
.bpp-chart-empty p { font-size: 13px; color: var(--ink5); line-height: 1.6; margin: 0; }

/* Chart panels — always block, JS controls visibility */
.bpp-chart-panels { display: block; width: 100%; min-width: 0; }
.bpp-cpanel { display: block; width: 100%; }
.bpp-chart-sub { font-size: 11.5px; color: var(--ink5); margin-bottom: 8px; }

/* Canvas wrapper — explicit height essential for Chart.js */
.bpp-cw {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 200px !important;
}
.bpp-cw-pie {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 200px !important;
}
/* Canvas fills wrapper absolutely */
.bpp-cw > canvas,
.bpp-cw-pie > canvas {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
/* Chart panel card must not clip */
.bpp-panel-charts { overflow: visible !important; min-width: 0 !important; }
.bpp-charts-body  { min-height: 250px; position: relative; }

/* Chart tabs */
.bpp-chart-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.bpp-chart-tab {
  padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card2);
  font-size: 12px; font-weight: 600; color: var(--ink4); cursor: pointer; transition: all .15s;
}
.bpp-chart-tab.active,
.bpp-chart-tab:hover { background: #4F46E5 !important; color: #fff !important; border-color: #4F46E5 !important; }

/* Advanced slider: overflow visible so canvas renders */
#bpp-advanced-slider .bpp-pslide-card,
#bpp-planning-slider .bpp-pslide-card { overflow: visible !important; min-width: 0 !important; }

@media (max-width: 768px) {
  .bpp-cw, .bpp-cw-pie { height: 200px !important; min-height: 170px !important; }
  #bpp-advanced-slider { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 0 !important; scrollbar-width: none !important; }
  #bpp-advanced-slider::-webkit-scrollbar { display: none; }
  #bpp-advanced-slider .bpp-pslide-card { flex: 0 0 100% !important; scroll-snap-align: start !important; overflow-x: clip !important; overflow-y: visible !important; }
}
@media (max-width: 480px) {
  .bpp-cw, .bpp-cw-pie { height: 180px !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIX 3 — PURCHASE READINESS ARROWS
   Problem: overflow-x:hidden on wrapper clipped the arrow buttons
══════════════════════════════════════════════════════════════ */
.bpp-purchase-slider-wrap {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  max-width: 100% !important;
  gap: 0 !important;
  position: relative !important;
}
.bpp-purchase-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  color: var(--ink3) !important;
  transition: all .15s !important;
  z-index: 2 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.bpp-purchase-arrow svg {
  fill: none !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}
.bpp-purchase-arrow:hover {
  background: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #4F46E5 !important;
}
.bpp-purchase-arrow:disabled { opacity: 0.3 !important; pointer-events: none !important; }
.bpp-purchase-prev { margin-right: 8px !important; }
.bpp-purchase-next { margin-left: 8px !important; }

/* Hide arrows only on small phones — they use swipe scroll */
@media (max-width: 480px) {
  .bpp-purchase-arrow { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIX 4 — SAVINGS SUMMARY + SMART INSIGHTS PADDING
   Cards have padding:0, so children need own horizontal padding
══════════════════════════════════════════════════════════════ */
.bpp-card-sav,
.bpp-card-ins,
.bpp-card-si { padding: 0 !important; }

.bpp-card-sav .bpp-card-hd,
.bpp-card-ins .bpp-card-hd,
.bpp-card-si  .bpp-card-hd { padding: 14px 16px !important; border-bottom: 1px solid var(--border) !important; }

.bpp-card-sav > .bpp-breakdown { padding: 8px 16px 4px !important; }
.bpp-card-sav > .bpp-goal-section { padding: 14px 16px 12px !important; }
.bpp-card-sav > .bpp-wishlist-section { padding: 0 16px 16px !important; }

.bpp-card-ins > .bpp-insights { padding: 12px 16px 16px !important; }

.bpp-card-si  > .bpp-si-core-rule    { margin: 12px 16px !important; }
.bpp-card-si  > .bpp-si-sum-row      { padding: 8px 16px !important; }
.bpp-card-si  > .bpp-si-rate-bar-wrap{ padding: 10px 16px 6px !important; }
.bpp-card-si  > .bpp-si-rate-labels  { padding: 0 16px !important; }
.bpp-card-si  > .bpp-si-msg          { padding: 0 16px 14px !important; }

/* Breakdown table scroll */
.bpp-breakdown { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.bpp-br-hdr, .bpp-br-row { min-width: 280px !important; }

/* Trust strip */
.bpp-trust-strip { overflow: hidden !important; }
.bpp-trust-badge {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #3730A3 !important;
  white-space: nowrap !important;
  padding: 0 20px !important;
  border-right: 1.5px solid #C7D2FE !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.bpp-dark .bpp-trust-badge { color: #A5B4FC !important; border-right-color: rgba(79,70,229,.25) !important; }

/* General grid min-width:0 to prevent overflow */
.bpp-setup-2col > *,
.bpp-kpi-hero > *,
.bpp-overview > *,
.bpp-insights-si-row > * { min-width: 0 !important; }

/* Notification panel — stays in viewport */
@media (max-width: 480px) {
  .bpp-notif-panel { position: fixed !important; top: var(--hh) !important; left: 8px !important; right: 8px !important; max-width: none !important; width: auto !important; }
}

/* ════════════════════════════════════════════════════════════════
   TARGETED FIXES — Purchase Slider, Card Header Mobile,
   Weekly Text Overflow, Visual Dashboard, Investment Tracker
════════════════════════════════════════════════════════════════ */

/* ── 1. PURCHASE SLIDER: override conflicting flex:1 rule ── */
.bpp-purchase-slider-wrap {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  position: relative !important;
}
.bpp-purchase-grid {
  flex: 1 !important;
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 0 !important;
}
.bpp-purchase-grid::-webkit-scrollbar { display: none; }
.bpp-pt-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
/* Purchase inputs — not in a .bpp-row, so bpp-aw just needs flex */
.bpp-pt-card .bpp-aw,
.bpp-rvb-col .bpp-aw { grid-area: unset !important; }

/* ── 2. CARD HEADER TEXT: truncate on mobile ── */
.bpp-card-hd-text {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.bpp-card-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bpp-card-rowcount {
  font-size: 10px !important;
  color: var(--ink5) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
}
@media (max-width: 768px) {
  .bpp-card-hd { flex-wrap: nowrap !important; gap: 8px !important; }
  .bpp-card-hd-right { flex-shrink: 0 !important; }
  .bpp-card-rowcount { font-size: 9px !important; }
}
@media (max-width: 480px) {
  /* Stack header: icon+title on top, total+add on bottom */
  .bpp-card-hd {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 10px 12px !important;
  }
  .bpp-card-hd-text { flex: 1 1 calc(100% - 50px) !important; min-width: 0 !important; }
  .bpp-card-hd-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .bpp-card-rowcount { white-space: normal !important; font-size: 10px !important; }
}

/* ── 3. WEEKLY TEXT OVERFLOW: wrap long status text ── */
.bpp-wi-status-msg,
.bpp-wi-no-data,
.bpp-week-status,
.bpp-wi-safe-msg,
.bpp-wi-empty,
[id*="bpp-week"],
.bpp-week-empty {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}
/* General: any paragraph/span inside weekly section wraps */
.bpp-weekly-section p,
.bpp-weekly-section span,
.bpp-weekly-section div {
  max-width: 100% !important;
  word-break: break-word !important;
}
/* Specifically the weekly insight card */
.bpp-wi-grid .bpp-wi-card,
.bpp-wi-card {
  min-width: 0 !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

/* ── 4. VISUAL DASHBOARD: definitive chart fix ── */
/* Empty state: NO !important on display so JS can hide it */
.bpp-chart-empty {
  display: block;
  text-align: center;
  padding: 28px 16px;
}
.bpp-empty-ico { font-size: 32px; display: block; margin-bottom: 10px; }
.bpp-chart-empty p { font-size: 13px; color: var(--ink5); line-height: 1.6; margin: 0; }
.bpp-chart-panels { display: block; width: 100%; min-width: 0; }
.bpp-cpanel { display: block; width: 100%; }
.bpp-chart-sub { font-size: 11.5px; color: var(--ink5); margin-bottom: 8px; }
.bpp-cw {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 240px !important;
}
.bpp-cw-pie {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 240px !important;
}
.bpp-cw > canvas, .bpp-cw-pie > canvas {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  display: block !important;
}
.bpp-panel-charts { overflow: visible !important; min-width: 0 !important; }
.bpp-charts-body { position: relative; min-height: 270px; }
.bpp-chart-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.bpp-chart-tab {
  padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card2);
  font-size: 12px; font-weight: 600; color: var(--ink4); cursor: pointer; transition: all .15s;
}
.bpp-chart-tab.active, .bpp-chart-tab:hover {
  background: #4F46E5 !important; color: #fff !important; border-color: #4F46E5 !important;
}
/* slider cards must NOT clip canvases */
#bpp-advanced-slider .bpp-pslide-card { overflow: visible !important; }
@media (max-width: 768px) {
  .bpp-cw, .bpp-cw-pie { height: 200px !important; }
  #bpp-advanced-slider {
    display: flex !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; scrollbar-width: none !important; gap: 0 !important;
  }
  #bpp-advanced-slider::-webkit-scrollbar { display: none; }
  #bpp-advanced-slider .bpp-pslide-card {
    flex: 0 0 100% !important; scroll-snap-align: start !important;
    overflow-x: clip !important; overflow-y: visible !important;
  }
}

/* ── 5. INVESTMENT VALUE TRACKER: fix bpp-aw inside tracker ── */
/* These are NOT inside .bpp-row so grid-area must not apply */
.bpp-inv-vt-aw {
  grid-area: unset !important;
  display: flex !important;
  align-items: center !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  padding: 0 !important;
  gap: 0 !important;
}
.bpp-inv-vt-input {
  border: none !important;
  background: transparent !important;
  font-family: var(--font-num) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  padding: 7px 8px !important;
  outline: none !important;
  width: 100% !important;
  pointer-events: auto !important;
}
.bpp-inv-vt-input:focus {
  box-shadow: 0 0 0 2px #C7D2FE !important;
  border-radius: var(--rsm) !important;
}
.bpp-inv-value-tracker {
  margin-top: 14px !important;
  padding: 14px !important;
  background: #FFFBEB !important;
  border: 1px solid #FCD34D !important;
  border-radius: var(--rmd) !important;
  display: block !important;
}
.bpp-dark .bpp-inv-value-tracker {
  background: rgba(217,119,6,.08) !important;
  border-color: rgba(217,119,6,.3) !important;
}
.bpp-inv-vt-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.bpp-inv-gl-display { padding: 10px 12px; background: var(--card2); border-radius: 8px; }
.bpp-inv-gl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.bpp-inv-gl-val { font-family: var(--font-num); font-size: 16px; font-weight: 800; }
.bpp-inv-gl-pct { font-size: 12px; font-weight: 600; }
.bpp-inv-gl-val.gain, .bpp-inv-gl-pct.gain { color: #16A34A !important; }
.bpp-inv-gl-val.loss, .bpp-inv-gl-pct.loss { color: #DC2626 !important; }

/* ════════════════════════════════════════════════════════════════
   VISUAL DASHBOARD — definitive rewrite
   Chart.js correct pattern: wrapper=position:relative+height,
   canvas=block (NO position:absolute)
════════════════════════════════════════════════════════════════ */
.bpp-panel-charts { overflow: visible !important; min-width: 0 !important; }

/* Tab buttons */
.bpp-chart-tabs { display: flex !important; gap: 6px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.bpp-chart-tab {
  padding: 6px 16px !important; border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--card2) !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--ink4) !important; cursor: pointer !important;
  transition: all .15s !important;
}
.bpp-chart-tab--active,
.bpp-chart-tab.active,
.bpp-chart-tab:hover {
  background: #4F46E5 !important;
  color: #fff !important;
  border-color: #4F46E5 !important;
}

/* Empty state — display:block, NO !important so JS can override */
.bpp-chart-empty {
  display: block;
  text-align: center;
  padding: 32px 16px;
  color: var(--ink5);
  font-size: 13px;
}
.bpp-empty-ico { font-size: 36px; display: block; margin-bottom: 10px; }

/* Chart panel sub-label */
.bpp-chart-sub { font-size: 11px; color: var(--ink5); margin-bottom: 8px; }

/* CANVAS WRAPPER — explicit pixel height, position:relative */
/* Chart.js reads offsetHeight of wrapper to size canvas */
.bpp-cw {
  position: relative !important;
  width: 100% !important;
  height: 250px !important;
  display: block !important;
}

/* CANVAS — block, fills wrapper width, height auto-managed by Chart.js */
.bpp-cw canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  /* NO position:absolute — Chart.js needs block layout to measure */
}

@media (max-width: 768px) { .bpp-cw { height: 210px !important; } }
@media (max-width: 480px) { .bpp-cw { height: 190px !important; } }

/* ══════════════════════════════════════════════════════════════
   FIX A: Hide card HEADER totals on mobile (Budget Setup)
   Monthly total / Monthly committed / Monthly investing (in top bar)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bpp-card-total-wrap {
    display: none !important;
  }
  /* Push +Add button to far right when total is hidden */
  .bpp-card-hd-right {
    margin-left: auto !important;
  }
  .bpp-add-fintech {
    margin-left: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX B: Week micro text overflow on mobile
   ══════════════════════════════════════════════════════════════ */
.bpp-week-micro {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX C: Purchase Readiness arrows visible on desktop
   Force high-contrast arrow buttons + SVG strokes
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .bpp-purchase-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
    background: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
    cursor: pointer !important;
    z-index: 5 !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .bpp-purchase-arrow svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .bpp-purchase-arrow svg polyline,
  .bpp-purchase-arrow svg path,
  .bpp-purchase-arrow svg line {
    stroke: #334155 !important;
    stroke-width: 2.5 !important;
    fill: none !important;
  }
  .bpp-purchase-arrow:hover {
    background: #EEF2FF !important;
    border-color: #A5B4FC !important;
    box-shadow: 0 2px 6px rgba(79,70,229,.12) !important;
  }
  .bpp-purchase-arrow:hover svg polyline,
  .bpp-purchase-arrow:hover svg path,
  .bpp-purchase-arrow:hover svg line {
    stroke: #4F46E5 !important;
  }
  .bpp-dark .bpp-purchase-arrow {
    background: var(--card2) !important;
    border-color: var(--border) !important;
    color: #B0BCCF !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
  }
  .bpp-dark .bpp-purchase-arrow svg polyline,
  .bpp-dark .bpp-purchase-arrow svg path,
  .bpp-dark .bpp-purchase-arrow svg line {
    stroke: #B0BCCF !important;
  }
  .bpp-dark .bpp-purchase-arrow:hover svg polyline,
  .bpp-dark .bpp-purchase-arrow:hover svg path,
  .bpp-dark .bpp-purchase-arrow:hover svg line {
    stroke: #818CF8 !important;
  }
  .bpp-purchase-slider-wrap {
    overflow: visible !important;
  }
  .bpp-purchase-grid {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX D: Delete Dashboard Data button in sidebar
   ══════════════════════════════════════════════════════════════ */
.bpp-nav-delete-data {
  color: #DC2626 !important;
}
.bpp-nav-delete-data:hover {
  background: #FEF2F2 !important;
}
.bpp-nav-delete-data svg {
  stroke: #DC2626 !important;
}
.bpp-dark .bpp-nav-delete-data { color: #F87171 !important; }
.bpp-dark .bpp-nav-delete-data:hover { background: rgba(248,113,113,.1) !important; }
.bpp-dark .bpp-nav-delete-data svg { stroke: #F87171 !important; }

/* ══════════════════════════════════════════════════════════════
   FINAL: Purchase arrow SVG strokes — definitive rule (last wins)
   ══════════════════════════════════════════════════════════════ */
.bpp-purchase-arrow svg,
.bpp-purchase-arrow svg polyline,
.bpp-purchase-arrow svg path,
.bpp-purchase-arrow svg line {
  stroke: #334155 !important;
  fill: none !important;
}
.bpp-purchase-arrow:hover svg,
.bpp-purchase-arrow:hover svg polyline,
.bpp-purchase-arrow:hover svg path,
.bpp-purchase-arrow:hover svg line {
  stroke: #4F46E5 !important;
}
.bpp-dark .bpp-purchase-arrow svg,
.bpp-dark .bpp-purchase-arrow svg polyline,
.bpp-dark .bpp-purchase-arrow svg path,
.bpp-dark .bpp-purchase-arrow svg line {
  stroke: #B0BCCF !important;
}
.bpp-dark .bpp-purchase-arrow:hover svg,
.bpp-dark .bpp-purchase-arrow:hover svg polyline,
.bpp-dark .bpp-purchase-arrow:hover svg path,
.bpp-dark .bpp-purchase-arrow:hover svg line {
  stroke: #818CF8 !important;
}

/* ══════════════════════════════════════════════════════════════
   FINAL: Pure CSS chevron arrows — clean circular style
   ══════════════════════════════════════════════════════════════ */
.bpp-purchase-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid #E2E8F0 !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}
.bpp-purchase-arrow:hover {
  background: #EEF2FF !important;
  border-color: #A5B4FC !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.12) !important;
}
.bpp-purchase-arrow:disabled {
  opacity: 0.35 !important;
  cursor: default !important;
  box-shadow: none !important;
}
.bpp-purchase-prev { margin-right: 10px !important; }
.bpp-purchase-next { margin-left: 10px !important; }

.bpp-arrow-left,
.bpp-arrow-right {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 2px solid #475569 !important;
  border-right: 2px solid #475569 !important;
  border-bottom: none !important;
  border-left: none !important;
  box-sizing: border-box !important;
  transition: border-color .2s ease !important;
}
.bpp-arrow-left {
  transform: rotate(-135deg) !important;
  margin-left: 2px !important;
}
.bpp-arrow-right {
  transform: rotate(45deg) !important;
  margin-right: 2px !important;
}
.bpp-purchase-arrow:hover .bpp-arrow-left,
.bpp-purchase-arrow:hover .bpp-arrow-right {
  border-color: #4F46E5 !important;
}
/* Dark mode */
.bpp-dark .bpp-purchase-arrow {
  background: var(--card2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
}
.bpp-dark .bpp-arrow-left,
.bpp-dark .bpp-arrow-right {
  border-color: #94A3B8 !important;
}
.bpp-dark .bpp-purchase-arrow:hover {
  background: rgba(99,102,241,.12) !important;
  border-color: #6366F1 !important;
}
.bpp-dark .bpp-purchase-arrow:hover .bpp-arrow-left,
.bpp-dark .bpp-purchase-arrow:hover .bpp-arrow-right {
  border-color: #A5B4FC !important;
}

/* Hide on small phones — swipe instead */
@media (max-width: 480px) {
  .bpp-purchase-arrow { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CASHRECAP v4 REDESIGN — COMPLETE VISUAL OVERHAUL
   Matches the SaaS wireframe blueprint exactly
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL POLISH ──────────────────────────────────────────────────── */
.bpp-root {
  font-size: 14px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
}
.bpp-root button,
.bpp-root a,
.bpp-root select,
.bpp-root input {
  transition: all .18s ease !important;
}
.bpp-root *:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}

/* ── 2. HEADER ─────────────────────────────────────────────────────────── */
.bpp-header {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  height: 60px !important;
  padding: 0 20px !important;
}
.bpp-logo-text {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--blue) !important;
}
.bpp-nav-icon-btn {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  transition: all .18s ease !important;
}
.bpp-nav-icon-btn:hover {
  background: var(--blue-lt) !important;
  border-color: var(--blue-mid) !important;
}
.bpp-mode-tab {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
}
.bpp-mode-tab-active {
  background: var(--blue) !important;
  box-shadow: var(--sb) !important;
}

/* ── 3. SIDEBAR ────────────────────────────────────────────────────────── */
.bpp-sidebar {
  width: 240px !important;
  background: var(--card) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
}
.bpp-sb-quick-add {
  background: var(--blue) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  box-shadow: var(--sb) !important;
  transition: all .2s ease !important;
  border: none !important;
}
.bpp-sb-quick-add:hover {
  background: var(--blue-dk) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(79,70,229,.3) !important;
}
.bpp-nav-link {
  border-radius: 8px !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink3) !important;
  transition: all .15s ease !important;
  border-left: none !important;
}
.bpp-nav-link:hover {
  background: var(--blue-lt) !important;
  color: var(--blue) !important;
}
.bpp-nav-link.bpp-active,
.bpp-nav-link:active {
  background: var(--blue-lt) !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
}
.bpp-nav-link.bpp-active svg,
.bpp-nav-link:hover svg {
  stroke: var(--blue) !important;
}
.bpp-nav-grp-hd {
  padding: 6px 12px !important;
  margin: 10px 8px 2px !important;
}
.bpp-grp-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--ink5) !important;
  text-transform: uppercase !important;
}
.bpp-sb-lbl { font-size: 13px !important; }
.bpp-nav-logout { color: var(--danger) !important; }
.bpp-nav-logout:hover { background: var(--red-lt) !important; border-left-color: var(--red) !important; }
.bpp-nav-delete-data { color: var(--danger) !important; }
.bpp-nav-delete-data:hover { background: var(--red-lt) !important; }
.bpp-nav-delete-data svg { stroke: var(--danger) !important; }
.bpp-sidebar-foot {
  border-top: 1px solid var(--border) !important;
  padding: 10px 14px !important;
}

/* ── 4. MAIN CONTENT ───────────────────────────────────────────────────── */
.bpp-main {
  background: var(--bg) !important;
  padding: 20px 24px !important;
}
.bpp-main::-webkit-scrollbar { width: 6px; }
.bpp-main::-webkit-scrollbar-track { background: transparent; }
.bpp-main::-webkit-scrollbar-thumb { background: var(--ink6); border-radius: 3px; }
.bpp-main::-webkit-scrollbar-thumb:hover { background: var(--ink5); }
@media (max-width: 768px) {
  .bpp-main { padding: 14px !important; }
}

/* ── 5. CARD SYSTEM ────────────────────────────────────────────────────── */
.bpp-card,
.bpp-card-inc,
.bpp-card-exp,
.bpp-card-sip,
.bpp-card-invest,
.bpp-card-sav,
.bpp-card-ins,
.bpp-card-si {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--s0) !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease !important;
}
.bpp-card-hd {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 18px !important;
  gap: 10px !important;
}
.bpp-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink2) !important;
  letter-spacing: -0.01em !important;
}
.bpp-card-ft {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 18px !important;
}
.bpp-ft-num {
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: var(--font-num) !important;
}
.bpp-card-ico-sq {
  width: 32px !important; height: 32px !important;
  border-radius: 8px !important;
}

/* ── 6. KPI HERO STRIP ─────────────────────────────────────────────────── */
.bpp-kpi-hero {
  gap: 14px !important;
}
.bpp-kpi {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--s0) !important;
  padding: 16px 18px !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.bpp-kpi:hover {
  box-shadow: var(--s2) !important;
  transform: translateY(-2px) !important;
}
.bpp-kpi-num {
  font-size: 24px !important;
  font-weight: 800 !important;
  font-family: var(--font-num) !important;
  letter-spacing: -0.02em !important;
}
.bpp-kpi-lbl {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink5) !important;
}
.bpp-kpi-sub {
  font-size: 11px !important;
  color: var(--ink4) !important;
}
.bpp-kpi-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
}

/* ── 7. COLLAPSE BLOCKS (section wrappers) ─────────────────────────────── */
.bpp-collapse-block {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--s0) !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}
.bpp-cblock-hd {
  padding: 14px 20px !important;
  background: var(--card) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink2) !important;
  letter-spacing: -0.01em !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color .15s ease !important;
}
.bpp-collapse-open .bpp-cblock-hd {
  border-bottom-color: var(--border) !important;
}
.bpp-cblock-body {
  padding: 18px 20px !important;
}

/* ── 8. BUDGET SETUP ───────────────────────────────────────────────────── */
.bpp-setup-2col {
  gap: 18px !important;
}
.bpp-lbl,
.bpp-amt,
.bpp-pt-input {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.bpp-lbl:focus,
.bpp-amt:focus,
.bpp-pt-input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important;
  outline: none !important;
}
.bpp-frq {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  background: var(--card) !important;
  color: var(--ink4) !important;
}
.bpp-add-fintech {
  background: var(--blue-lt) !important;
  border: 1px solid var(--blue-mid) !important;
  color: var(--blue) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  transition: all .18s ease !important;
}
.bpp-add-fintech:hover {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}
/* Mobile: push +Add right, hide header totals */
@media (max-width: 768px) {
  .bpp-card-total-wrap { display: none !important; }
  .bpp-card-hd-right { margin-left: auto !important; }
  .bpp-add-fintech { margin-left: auto !important; }
}

/* ── 9. SAVINGS RATE KPI ───────────────────────────────────────────────── */
.bpp-sav-rate-kpi {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 18px !important;
}
.bpp-sav-rate-bar-track {
  background: var(--card2) !important;
  border-radius: 6px !important;
  height: 8px !important;
}
.bpp-sav-rate-bar {
  background: linear-gradient(90deg, var(--blue), var(--indigo)) !important;
  border-radius: 6px !important;
}

/* ── 10. WEEKLY SNAPSHOT ───────────────────────────────────────────────── */
.bpp-week-snapshot {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.bpp-wstat-val {
  font-family: var(--font-num) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
}

/* Week micro text — fix overflow */
.bpp-week-micro {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  overflow: hidden !important;
  height: auto !important;
  font-size: 12px !important;
  color: var(--ink4) !important;
  line-height: 1.5 !important;
  padding: 10px 14px !important;
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
}

/* ── 11. HEALTH SCORE GAUGE ────────────────────────────────────────────── */
.bpp-score-wrap {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--s0) !important;
}
.bpp-score-body {
  padding: 18px !important;
}

/* ── 12. CHART TABS ────────────────────────────────────────────────────── */
.bpp-chart-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: var(--card2) !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
}
.bpp-chart-tab {
  padding: 7px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink4) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.bpp-chart-tab:hover {
  color: var(--ink2) !important;
  background: var(--card) !important;
}
.bpp-chart-tab.active,
.bpp-chart-tab.bpp-chart-tab--active {
  background: var(--card) !important;
  color: var(--blue) !important;
  box-shadow: var(--s0) !important;
}

/* ── 13. BUDGET RULE SELECT ────────────────────────────────────────────── */
.bpp-rule-select {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  background: var(--card) !important;
  color: var(--ink3) !important;
}

/* ── 14. SMART INSIGHTS ────────────────────────────────────────────────── */
.bpp-insight-card,
.bpp-ins-item {
  border-left: 3px solid var(--blue) !important;
  border-radius: 0 8px 8px 0 !important;
  background: var(--card) !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--s0) !important;
  border-top: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── 15. SAVINGS GOAL + WISHLIST ───────────────────────────────────────── */
.bpp-goal-fill {
  background: linear-gradient(90deg, var(--blue), var(--indigo)) !important;
  border-radius: 6px !important;
  transition: width .5s cubic-bezier(.4,0,.2,1) !important;
}
.bpp-goal-card,
.bpp-wishlist-item {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  box-shadow: var(--s0) !important;
}

/* ── 16. PURCHASE READINESS RESULT ─────────────────────────────────────── */
.bpp-result-green {
  border-left: 4px solid var(--green) !important;
  background: #F0FDF4 !important;
  border-radius: 0 10px 10px 0 !important;
}
.bpp-result-amber {
  border-left: 4px solid var(--amber) !important;
  background: #FFFBEB !important;
  border-radius: 0 10px 10px 0 !important;
}
.bpp-result-red {
  border-left: 4px solid var(--red) !important;
  background: #FEF2F2 !important;
  border-radius: 0 10px 10px 0 !important;
}
.bpp-dark .bpp-result-green { background: rgba(34,197,94,.06) !important; }
.bpp-dark .bpp-result-amber { background: rgba(245,158,11,.06) !important; }
.bpp-dark .bpp-result-red { background: rgba(239,68,68,.06) !important; }

/* ── 17. PURCHASE ARROW BUTTONS ────────────────────────────────────────── */
.bpp-purchase-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-shadow: var(--s0) !important;
  padding: 0 !important;
  z-index: 5 !important;
}
.bpp-purchase-arrow:hover {
  background: var(--blue-lt) !important;
  border-color: var(--blue-mid) !important;
  box-shadow: var(--s1) !important;
}
.bpp-purchase-arrow:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}
.bpp-purchase-prev { margin-right: 10px !important; }
.bpp-purchase-next { margin-left: 10px !important; }
.bpp-arrow-left,
.bpp-arrow-right {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 2px solid var(--ink3) !important;
  border-right: 2px solid var(--ink3) !important;
  border-bottom: none !important;
  border-left: none !important;
  box-sizing: border-box !important;
  transition: border-color .2s ease !important;
}
.bpp-arrow-left { transform: rotate(-135deg) !important; margin-left: 2px !important; }
.bpp-arrow-right { transform: rotate(45deg) !important; margin-right: 2px !important; }
.bpp-purchase-arrow:hover .bpp-arrow-left,
.bpp-purchase-arrow:hover .bpp-arrow-right {
  border-color: var(--blue) !important;
}
.bpp-dark .bpp-purchase-arrow { background: var(--card2) !important; border-color: var(--border) !important; }
.bpp-dark .bpp-arrow-left, .bpp-dark .bpp-arrow-right { border-color: var(--ink4) !important; }
.bpp-dark .bpp-purchase-arrow:hover .bpp-arrow-left,
.bpp-dark .bpp-purchase-arrow:hover .bpp-arrow-right { border-color: #A5B4FC !important; }
@media (max-width: 480px) {
  .bpp-purchase-arrow { display: none !important; }
}

/* ── 18. FAB BUTTON ────────────────────────────────────────────────────── */
.bpp-fab {
  background: var(--blue) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,.35) !important;
  border-radius: 16px !important;
  width: 56px !important; height: 56px !important;
  transition: all .2s ease !important;
}
.bpp-fab:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 24px rgba(79,70,229,.4) !important;
}

/* ── 19. FAB POPUP / BOTTOM SHEET ──────────────────────────────────────── */
.bpp-fab-popup,
.bpp-bs {
  border-radius: 16px 16px 0 0 !important;
  box-shadow: var(--sm) !important;
  background: var(--card) !important;
}
.bpp-chip {
  border-radius: 20px !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  border: 1px solid var(--border) !important;
  transition: all .15s ease !important;
}
.bpp-chip.active {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}

/* ── 20. QUICK AMOUNT BUTTONS ──────────────────────────────────────────── */
.bpp-qamt {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ink3) !important;
  background: var(--card) !important;
  transition: all .15s ease !important;
}
.bpp-qamt:hover,
.bpp-qamt.active {
  background: var(--blue-lt) !important;
  border-color: var(--blue-mid) !important;
  color: var(--blue) !important;
}

/* ── 21. BOTTOM NAV (Mobile) ──────────────────────────────────────────── */
.bpp-bottom-nav {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06) !important;
}
.bpp-bottom-nav a.active {
  color: var(--blue) !important;
}

/* ── 22. TOAST ─────────────────────────────────────────────────────────── */
.bpp-toast {
  border-radius: 10px !important;
  box-shadow: var(--s3) !important;
  font-weight: 500 !important;
}

/* ── 23. YOY COMPARISON ────────────────────────────────────────────────── */
.bpp-yoy-row {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--card) !important;
  box-shadow: var(--s0) !important;
}

/* ── 24. EXPORT / ACTION BUTTONS ───────────────────────────────────────── */
.bpp-rvb-btn,
[id="bpp-csv"],
[id="bpp-pdf"] {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all .18s ease !important;
}
.bpp-rvb-btn:hover,
[id="bpp-csv"]:hover,
[id="bpp-pdf"]:hover {
  background: var(--blue-dk) !important;
  transform: translateY(-1px) !important;
}
[id="bpp-reset"] {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
[id="bpp-reset"]:hover {
  background: var(--red-lt) !important;
  border-color: var(--red) !important;
}

/* ── 25. PRIVACY BAR ──────────────────────────────────────────────────── */
.bpp-privacy-bar {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--s1) !important;
}

/* ── 26. MARQUEE ──────────────────────────────────────────────────────── */
.bpp-marquee-wrap {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* ── 27. SUMMARY TABLE ─────────────────────────────────────────────────── */
.bpp-summ-table th {
  background: var(--card2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ink5) !important;
  padding: 8px 12px !important;
}
.bpp-summ-table td {
  font-family: var(--font-num) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── 28. INVESTMENT TRACKER GAIN/LOSS ──────────────────────────────────── */
.bpp-inv-gl-display {
  border-top: 1px solid var(--border) !important;
  padding: 12px 18px !important;
  background: var(--card) !important;
}
.bpp-inv-gl-val.gain { color: var(--green) !important; }
.bpp-inv-gl-val.loss { color: var(--red) !important; }

/* ── 29. SAVINGS RING (KPI card) ───────────────────────────────────────── */
.bpp-ring-fill {
  stroke: var(--blue) !important;
}

/* ── 30. DAILY LOG ITEMS ───────────────────────────────────────────────── */
.bpp-log-item {
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 0 !important;
}
.bpp-log-del {
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  transition: all .15s ease !important;
}
.bpp-log-del:hover {
  background: var(--red-lt) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}

/* ── 31. GOAL CARDS ────────────────────────────────────────────────────── */
.bpp-goal-card {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  box-shadow: var(--s0) !important;
}
.bpp-goal-add-btn {
  background: var(--blue) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.bpp-goal-add-btn:hover {
  background: var(--blue-dk) !important;
}

/* ── 32. WISHLIST MODAL ────────────────────────────────────────────────── */
.bpp-wishlist-modal {
  border-radius: 14px !important;
  box-shadow: var(--sm) !important;
  background: var(--card) !important;
}

/* ── 33. LEAD CAPTURE SECTION ──────────────────────────────────────────── */
.bpp-lead-section {
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
}

/* ── 34. PULSE CHART BARS ──────────────────────────────────────────────── */
.bpp-pulse-bar.today { background: var(--blue) !important; }
.bpp-pulse-bar.under { background: var(--blue) !important; opacity: .6 !important; }
.bpp-pulse-bar.over { background: var(--red) !important; }

/* ── 35. STATUS BANNER ─────────────────────────────────────────────────── */
.bpp-status-banner {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
}

/* ── 36. PANEL SLIDER (Advanced Insights + Planning) ───────────────────── */
.bpp-panel-flat,
.bpp-pslide-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.bpp-panel-hd {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border) !important;
}
.bpp-panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink2) !important;
}
.bpp-panel-sub {
  font-size: 12px !important;
  color: var(--ink5) !important;
}

/* ── 37. SLIDER DOTS ──────────────────────────────────────────────────── */
.bpp-sdot,
.bpp-pdot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--border) !important;
  transition: background .2s ease !important;
}
.bpp-sdot.active,
.bpp-pdot.active {
  background: var(--blue) !important;
}

/* ── 38. PURCHASE READINESS CARDS ──────────────────────────────────────── */
.bpp-pt-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.bpp-pt-card-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── 39. RENT VS BUY ──────────────────────────────────────────────────── */
.bpp-rvb-col-title {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.bpp-rvb-divider {
  color: var(--ink5) !important;
  font-weight: 700 !important;
}

/* ── 40. DARK MODE SPECIFICS ──────────────────────────────────────────── */
.bpp-dark .bpp-kpi:hover { box-shadow: var(--s2) !important; }
.bpp-dark .bpp-add-fintech:hover { background: var(--blue) !important; color: #fff !important; }
.bpp-dark .bpp-nav-delete-data { color: #F87171 !important; }
.bpp-dark .bpp-nav-delete-data svg { stroke: #F87171 !important; }

/* ── 41. SAVINGS SUMMARY CARD (full-width) ─────────────────────────────── */
.bpp-setup-fullwidth {
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
}

/* ── 42. CONFETTI CANVAS ──────────────────────────────────────────────── */
#bpp-confetti-canvas {
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   END REDESIGN LAYER
   ══════════════════════════════════════════════════════════════════════════ */