/* ════════════════════════════════════════════════════════════════
   Budget Planner Pro v3.1 — Webrul
   Typography: Plus Jakarta Sans (body/UI) + Syne (display) + JetBrains Mono (numbers)
   Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI' (premium system fonts)
   Fonts loaded via wp_enqueue_style in PHP — NOT @import
   ════════════════════════════════════════════════════════════════ */

/* ════════════════
   FONT STACKS
   ════════════════ */
:root {
  /* Premium system-font fallback that looks great even without Google Fonts */
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

/* ════════════════
   DESIGN TOKENS
   ════════════════ */
:root {
  /* Brand palette */
  --indigo:        #5B5BD6;
  --indigo-d:      #3E3FB5;
  --indigo-lt:     rgba(91,91,214,.1);
  --indigo-glow:   rgba(91,91,214,.28);
  --blue:          #2563EB;
  --blue-lt:       rgba(37,99,235,.1);
  --green:         #059669;
  --green-d:       #047857;
  --green-lt:      rgba(5,150,105,.1);
  --red:           #DC2626;
  --red-lt:        rgba(220,38,38,.1);
  --amber:         #D97706;
  --amber-lt:      rgba(217,119,6,.1);
  --purple:        #7C3AED;

  /* Surfaces — Light mode */
  --bg:            #F0F2F8;
  --surface:       #FFFFFF;
  --surface2:      #F6F8FC;
  --surface3:      #ECEFF7;
  --border:        #DDE2EF;
  --border2:       #C4CDE3;

  /* Text — High contrast (WCAG AA+) */
  --text:          #0A0F1E;   /* Near-black — 18:1 ratio on white */
  --text2:         #1E2D52;   /* Dark navy — 12:1 */
  --text3:         #3D4E6B;   /* Medium — 7:1 */
  --text4:         #5A6E8E;   /* Muted — 5:1 */
  --text5:         #8496B4;   /* Very muted — labels/hints */

  /* Shadows */
  --sh-xs: 0 1px 4px rgba(10,15,30,.07);
  --sh-sm: 0 2px 10px rgba(10,15,30,.09);
  --sh:    0 4px 20px rgba(10,15,30,.11);
  --sh-lg: 0 8px 40px rgba(10,15,30,.15);

  /* Geometry */
  --r-lg: 20px;
  --r:    16px;
  --r-sm: 10px;
  --r-xs: 8px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t:    .2s;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:       #060C1C;
  --surface:  #0C1530;
  --surface2: #111D3E;
  --surface3: #172348;
  --border:   rgba(91,91,214,.16);
  --border2:  rgba(91,91,214,.30);
  --text:     #EDF0FF;
  --text2:    #C2CCEE;
  --text3:    #8B9EC8;
  --text4:    #5E728C;
  --text5:    #3D5070;
  --sh-xs: 0 1px 4px rgba(0,0,0,.55);
  --sh-sm: 0 2px 10px rgba(0,0,0,.65);
  --sh:    0 4px 20px rgba(0,0,0,.72);
  --sh-lg: 0 8px 40px rgba(0,0,0,.82);
  --indigo-lt:  rgba(91,91,214,.16);
  --blue-lt:    rgba(37,99,235,.13);
  --green-lt:   rgba(5,150,105,.13);
  --red-lt:     rgba(220,38,38,.13);
  --amber-lt:   rgba(217,119,6,.13);
}

/* ════════════════
   RESET
   ════════════════ */
.bpp-root *, .bpp-root *::before, .bpp-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.bpp-root {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--t), color var(--t);
}
.bpp-root input,
.bpp-root select,
.bpp-root button,
.bpp-root textarea {
  font-family: var(--font-body);
}

/* ════════════════════════════════════════════════════════════════
   STICKY BAR
   ════════════════════════════════════════════════════════════════ */
.bpp-sticky-bar {
  position: fixed;
  top: -72px;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh);
  transition: top .32s var(--ease);
}
.bpp-sticky-bar.visible { top: 0; }
.bpp-sticky-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.bpp-sticky-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--indigo);
  white-space: nowrap;
  letter-spacing: -.15px;
}
.bpp-sticky-kpis {
  display: flex;
  gap: 20px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text4);
  flex: 1;
  flex-wrap: wrap;
}
.bpp-sticky-kpis strong {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  font-size: .82rem;
}
.bpp-sticky-sav strong { color: var(--green); }
.bpp-sticky-cta {
  font-size: .74rem;
  font-weight: 800;
  background: var(--indigo-lt);
  color: var(--indigo);
  border: 1.5px solid rgba(91,91,214,.3);
  border-radius: 999px;
  padding: .3rem .85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--t);
  letter-spacing: -.1px;
}
.bpp-sticky-cta:hover { background: var(--indigo); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   TOOL WRAP
   ════════════════════════════════════════════════════════════════ */
.bpp-tool-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

/* ════════════════════════════════════════════════════════════════
   TRUST STRIP
   ════════════════════════════════════════════════════════════════ */
.bpp-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}
.bpp-trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bpp-trust-badge {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text4);
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: 999px;
  padding: .3rem .9rem;
  letter-spacing: .01em;
  transition: all var(--t);
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
}
.bpp-trust-badge:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: var(--indigo-lt);
}
/* On desktop hide duplicates */
.bpp-trust-badge[aria-hidden="true"] { display: none; }

/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.bpp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.bpp-brand { display: flex; align-items: center; gap: 12px; }
.bpp-brand-logo {
  filter: drop-shadow(0 4px 16px rgba(91,91,214,.4));
  transition: filter .3s;
  flex-shrink: 0;
}
.bpp-brand-logo:hover { filter: drop-shadow(0 8px 28px rgba(91,91,214,.65)); }
.bpp-brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--text);
}
.bpp-brand-by {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text4);
  margin-top: 4px;
  letter-spacing: .01em;
}
.bpp-brand-by a {
  color: var(--indigo);
  text-decoration: none;
  font-weight: 700;
}
.bpp-brand-by a:hover { text-decoration: underline; }
.bpp-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Controls: Select & Tabs ── */
.bpp-select {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-sm);
  padding: .44rem 2.2rem .44rem .9rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235A6E8E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t), box-shadow var(--t);
  min-height: 38px;
}
.bpp-select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-lt);
}
.bpp-period-tabs {
  display: flex;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.bpp-ptab {
  padding: .4rem 1rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text4);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  letter-spacing: -.1px;
  min-height: 38px;
}
.bpp-ptab:hover { color: var(--indigo); background: var(--indigo-lt); }
.bpp-ptab.active {
  background: var(--indigo);
  color: #fff;
}
.bpp-theme-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--text4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: all var(--t);
  flex-shrink: 0;
}
.bpp-theme-btn:hover { border-color: var(--indigo); color: var(--indigo); }

/* ════════════════════════════════════════════════════════════════
   PRIVACY BAR
   ════════════════════════════════════════════════════════════════ */
.bpp-privacy-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(91,91,214,.07), rgba(91,91,214,.03));
  border: 1px solid rgba(91,91,214,.22);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: 20px;
  line-height: 1.4;
}
.bpp-privacy-bar strong { font-weight: 800; }
.bpp-privacy-bar #bpp-privacy-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--indigo);
  cursor: pointer;
  font-size: 1.2rem;
  opacity: .45;
  padding: 0 4px;
  flex-shrink: 0;
}
.bpp-privacy-bar #bpp-privacy-x:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   KPI HERO STRIP — Numbers are the hero
   ════════════════════════════════════════════════════════════════ */
.bpp-kpi-hero {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.bpp-kpi {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
}
.bpp-kpi::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--r) var(--r) 0 0;
}
.bpp-kpi-income::after  { background: var(--blue); }
.bpp-kpi-expense::after { background: var(--red); }
.bpp-kpi-savings::after { background: var(--green); }
.bpp-kpi-score::after   { background: var(--indigo); }
.bpp-kpi:hover { transform: translateY(-3px); box-shadow: var(--sh); }

.bpp-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.bpp-kpi-income  .bpp-kpi-icon { background: var(--blue-lt);  color: var(--blue); }
.bpp-kpi-expense .bpp-kpi-icon { background: var(--red-lt);   color: var(--red); }
.bpp-kpi-savings .bpp-kpi-icon { background: var(--green-lt); color: var(--green); }
.bpp-kpi-score   .bpp-kpi-icon { background: var(--indigo-lt);color: var(--indigo); }

/* Eyebrow label — tiny, spaced caps */
.bpp-kpi-lbl {
  display: block;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 800;
  color: var(--text5);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 6px;
}
/* ★ THE HERO NUMBER — dominant, mono, bold */
.bpp-kpi-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s;
}
/* Period sublabel */
.bpp-kpi-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .67rem;
  font-weight: 700;
  color: var(--text5);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-top: 7px;
}
.bpp-num-savings { color: var(--green) !important; }
.bpp-num-score   { color: var(--indigo) !important; font-size: 1.9rem !important; }
.bpp-kpi-savings-card.neg .bpp-num-savings { color: var(--red) !important; }

/* Savings card — wider to accommodate ring */
.bpp-kpi-savings { padding: 14px 68px 14px 16px; }

/* Savings glow overlay */
.bpp-kpi-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(5,150,105,.04), transparent);
  pointer-events: none;
}

/* Savings rate ring */
.bpp-kpi-rate-ring {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.bpp-ring-svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.bpp-ring-bg  { fill: none; stroke: var(--surface3); stroke-width: 5; }
.bpp-ring-fill {
  fill: none;
  stroke: var(--green);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 113.1;
  transition: stroke-dashoffset .75s var(--ease), stroke .4s;
}
.bpp-ring-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 800;
  color: var(--text3);
}

/* ════════════════════════════════════════════════════════════════
   ACTION BAR
   ════════════════════════════════════════════════════════════════ */
.bpp-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.bpp-action-left { display: flex; gap: 6px; }
.bpp-abtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: -.1px;
  border-radius: var(--r-xs);
  padding: .42rem .95rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--t);
  white-space: nowrap;
  min-height: 36px;
}
.bpp-abtn-csv { background: var(--green-lt); color: var(--green); border-color: rgba(5,150,105,.3); }
.bpp-abtn-csv:hover { background: var(--green); color: #fff; }
.bpp-abtn-pdf { background: var(--indigo-lt); color: var(--indigo); border-color: rgba(91,91,214,.3); }
.bpp-abtn-pdf:hover { background: var(--indigo); color: #fff; }
.bpp-abtn-reset { background: var(--red-lt); color: var(--red); border-color: rgba(220,38,38,.3); }
.bpp-abtn-reset:hover { background: var(--red); color: #fff; }
.bpp-save-status {
  font-size: .73rem;
  font-weight: 600;
  color: var(--text5);
}

/* ════════════════════════════════════════════════════════════════
   4-CARD GRID
   ════════════════════════════════════════════════════════════════ */
.bpp-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════ */
.bpp-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t), border-color var(--t);
}
.bpp-card:hover { box-shadow: var(--sh); }
.bpp-card-inc { border-top: 3px solid var(--blue); }
.bpp-card-exp { border-top: 3px solid var(--red); }
.bpp-card-sav { border-top: 3px solid var(--green); }
.bpp-card-ins { border-top: 3px solid var(--amber); }

/* Card header */
.bpp-card-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.bpp-card-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bpp-ico-inc     { background: var(--blue-lt);  color: var(--blue); }
.bpp-ico-exp     { background: var(--red-lt);   color: var(--red); }
.bpp-ico-sav     { background: var(--green-lt); color: var(--green); }
.bpp-ico-ins     { background: var(--amber-lt); color: var(--amber); }
.bpp-ico-score   { background: var(--indigo-lt);color: var(--indigo); }
.bpp-ico-rules   { background: rgba(124,58,237,.1); color: var(--purple); }
.bpp-ico-charts  { background: var(--indigo-lt);color: var(--indigo); }
.bpp-ico-purchase{ background: var(--amber-lt); color: var(--amber); }
.bpp-ico-rvb     { background: var(--green-lt); color: var(--green); }

/* ★ Card title — Syne display, strong */
.bpp-card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.2;
}
.bpp-add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: .73rem;
  font-weight: 800;
  background: var(--indigo-lt);
  color: var(--indigo);
  border: 1.5px solid rgba(91,91,214,.25);
  border-radius: 999px;
  padding: .28rem .85rem;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  letter-spacing: -.1px;
  min-height: 32px;
}
.bpp-add:hover { background: var(--indigo); color: #fff; }

/* Input rows */
.bpp-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.bpp-row {
  display: grid;
  grid-template-columns: 1fr 148px auto 30px;
  gap: 6px;
  align-items: center;
  animation: bpp-in .2s var(--ease);
}
@keyframes bpp-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bpp-lbl, .bpp-frq {
  width: 100%;
  font-family: var(--font-body);
  font-size: .87rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  padding: 9px 11px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  min-height: 42px;
}
.bpp-lbl::placeholder { color: var(--text5); font-style: italic; }
.bpp-amt {
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 600;
  padding-left: 10px;
  padding-right: 9px;
  border-radius: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  width: auto;
  min-height: 0;
  color: var(--text);
}
.bpp-amt::-webkit-outer-spin-button,
.bpp-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bpp-amt[type=number] { -moz-appearance: textfield; }
.bpp-lbl:focus, .bpp-frq:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-lt);
  background: var(--surface);
}
/* ── Input wrapper — flex input-group pattern ── */
.bpp-aw {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
  background: var(--surface2);
}
.bpp-aw:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-lt);
  background: var(--surface);
}
.bpp-sym {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text4);
  background: var(--surface2);
  border-right: 1.5px solid var(--border);
  pointer-events: none;
  transition: color var(--t), border-color var(--t), background var(--t);
  position: static;
}
.bpp-aw:focus-within .bpp-sym {
  color: var(--indigo);
  border-color: var(--indigo);
  background: var(--indigo-lt);
}
/* Purchase inputs — amber accent; RvB inputs — green accent */
.bpp-pt-panel .bpp-aw:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-lt); }
.bpp-pt-panel .bpp-aw:focus-within .bpp-sym { color: var(--amber); border-color: var(--amber); background: var(--amber-lt); }
.bpp-rvb-col  .bpp-aw:focus-within { border-color: var(--green);  box-shadow: 0 0 0 3px var(--green-lt); }
.bpp-rvb-col  .bpp-aw:focus-within .bpp-sym  { color: var(--green);  border-color: var(--green);  background: var(--green-lt); }
.bpp-amt {
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 600;
  padding-left: 10px;
  border-radius: 0;
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.bpp-amt[type=number] { -moz-appearance: textfield; }
.bpp-frq {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235A6E8E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  font-size: .78rem;
  font-weight: 600;
}
.bpp-del {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--t);
  flex-shrink: 0;
}
.bpp-del:hover { border-color: var(--red); color: var(--red); background: var(--red-lt); }

/* Card footer */
.bpp-card-ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1.5px solid var(--border);
  padding-top: 14px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text4);
}
.bpp-ft-num {
  font-family: var(--font-mono);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.bpp-color-inc { color: var(--blue); }
.bpp-color-exp { color: var(--red); }
.bpp-color-sav { color: var(--green); }
.bpp-color-neg { color: var(--red) !important; }

/* Breakdown table */
.bpp-breakdown {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.bpp-br-hdr {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 1fr;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 800;
  color: var(--text5);
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--surface3);
}
.bpp-br-row {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 1fr;
  padding: 10px 14px;
  font-size: .82rem;
  transition: background var(--t);
}
.bpp-br-row:nth-child(odd)  { background: var(--surface); }
.bpp-br-row:nth-child(even) { background: var(--surface2); }
.bpp-br-active {
  background: linear-gradient(90deg, rgba(91,91,214,.06), rgba(91,91,214,.02)) !important;
  font-weight: 700;
}
.bpp-br-p { font-weight: 800; font-size: .83rem; color: var(--text2); }
.bpp-br-i { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--blue); }
.bpp-br-e { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--red); }
.bpp-br-s { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--green); }
.bpp-br-s.neg { color: var(--red); }

/* Savings goal */
.bpp-goal-section {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 14px;
}
.bpp-goal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 800;
  color: var(--text2);
}
.bpp-goal-input-wrap {
  width: 140px;
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
  background: var(--surface);
}
.bpp-goal-input-wrap:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-lt);
}
.bpp-goal-input-wrap .bpp-sym {
  font-size: .76rem;
  min-height: 34px;
}
.bpp-goal-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: none !important;
  border-radius: 0;
  padding: 7px 8px;
  min-height: 34px;
  transition: none;
}
.bpp-goal-input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-lt);
}
.bpp-goal-input::-webkit-outer-spin-button,
.bpp-goal-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bpp-goal-input[type=number] { -moz-appearance: textfield; }
.bpp-goal-bar-track {
  height: 8px;
  background: var(--surface3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 7px;
}
.bpp-goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--indigo), var(--green));
  border-radius: 999px;
  transition: width .65s var(--ease);
}
.bpp-goal-status {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  color: var(--text4);
}

/* Insights */
.bpp-ins-badge {
  margin-left: auto;
  background: var(--amber);
  color: #fff;
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 8px;
  min-width: 22px;
  text-align: center;
  letter-spacing: .02em;
}
.bpp-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.bpp-insights::-webkit-scrollbar { width: 4px; }
.bpp-insights::-webkit-scrollbar-track { background: transparent; }
.bpp-insights::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.bpp-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--r-xs);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.6;
  animation: bpp-in .25s var(--ease);
}
.bpp-insight strong { font-weight: 800; }
.bpp-ins-ico { flex-shrink: 0; font-size: 1.05rem; line-height: 1; margin-top: 2px; }
.bpp-ins-green   { background: var(--green-lt); border: 1px solid rgba(5,150,105,.25);  color: #064E3B; }
.bpp-ins-red     { background: var(--red-lt);   border: 1px solid rgba(220,38,38,.25);  color: #7F1D1D; }
.bpp-ins-amber   { background: var(--amber-lt); border: 1px solid rgba(217,119,6,.25);  color: #78350F; }
.bpp-ins-blue    { background: var(--blue-lt);  border: 1px solid rgba(37,99,235,.2);   color: #1E3A5F; }
.bpp-ins-neutral { background: var(--surface2); border: 1px solid var(--border); color: var(--text2); }
[data-theme=dark] .bpp-ins-green  { color: #6EE7B7; }
[data-theme=dark] .bpp-ins-red    { color: #FCA5A5; }
[data-theme=dark] .bpp-ins-amber  { color: #FCD34D; }
[data-theme=dark] .bpp-ins-blue   { color: #93C5FD; }
[data-theme=dark] .bpp-ins-neutral{ color: var(--text2); }

/* ════════════════════════════════════════════════════════════════
   PANELS — Score, Rules, Charts, Purchase, RvB
   ════════════════════════════════════════════════════════════════ */
.bpp-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--sh-sm);
  margin-bottom: 14px;
  transition: box-shadow var(--t);
}
.bpp-panel:hover { box-shadow: var(--sh); }
.bpp-panel-score    { border-top: 3px solid var(--indigo); }
.bpp-panel-rules    { border-top: 3px solid var(--purple); }
.bpp-panel-charts   { border-top: 3px solid var(--blue); }
.bpp-panel-purchase { border-top: 3px solid var(--amber); }
.bpp-panel-rvb      { border-top: 3px solid var(--green); }

.bpp-panel-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
/* ★ Panel title — display font, dominant */
.bpp-panel-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.2;
}
.bpp-panel-sub {
  font-family: var(--font-body);
  font-size: .73rem;
  font-weight: 600;
  color: var(--text5);
  margin-left: auto;
  letter-spacing: .01em;
}

/* ════════════════════════════════════════════════════════════════
   FINANCIAL HEALTH SCORE
   ════════════════════════════════════════════════════════════════ */
.bpp-score-badge {
  font-family: var(--font-mono);
  font-size: .92rem;
  font-weight: 700;
  background: var(--indigo-lt);
  color: var(--indigo);
  border: 1.5px solid rgba(91,91,214,.3);
  border-radius: var(--r-xs);
  padding: .28rem .75rem;
  letter-spacing: -.02em;
}
.bpp-score-grade {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 800;
  border-radius: 999px;
  padding: .28rem .9rem;
  background: var(--surface3);
  color: var(--text3);
  border: 1px solid var(--border);
  letter-spacing: -.1px;
}
.bpp-score-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: start;
}
.bpp-score-gauge-wrap { display: flex; justify-content: center; }
.bpp-score-gauge {
  position: relative;
  width: 200px;
  height: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
}
.bpp-gauge-svg { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
/* ★ THE GAUGE NUMBER — commanding 3.4rem */
.bpp-gauge-num {
  font-family: var(--font-mono);
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: 1;
  color: var(--text);
  z-index: 1;
  transition: color .4s;
}
.bpp-gauge-lbl {
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text5);
  z-index: 1;
}
.bpp-score-pillars { display: flex; flex-direction: column; gap: 13px; }
.bpp-pillar-top { display: flex; justify-content: space-between; margin-bottom: 5px; }
.bpp-pillar-name { font-family: var(--font-body); font-size: .81rem; font-weight: 700; color: var(--text2); }
.bpp-pillar-pts  { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; color: var(--text4); }
.bpp-pillar-bar  { height: 6px; background: var(--surface3); border-radius: 999px; overflow: hidden; }
.bpp-pillar-fill { height: 100%; border-radius: 999px; transition: width .75s var(--ease); }
.bpp-score-msg {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--indigo-lt);
  border: 1px solid rgba(91,91,214,.2);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: .87rem;
  font-weight: 500;
  color: var(--text2);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════════
   BUDGET RULES ENGINE
   ════════════════════════════════════════════════════════════════ */
.bpp-rule-select { max-width: 330px; font-size: .82rem; }
.bpp-rules-body  { display: flex; flex-direction: column; gap: 14px; }
.bpp-rule-desc {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 13px 16px;
  line-height: 1.65;
}
.bpp-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bpp-rule-item {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px;
  text-align: center;
  transition: border-color var(--t), box-shadow var(--t);
}
.bpp-rule-item:hover { border-color: var(--indigo); box-shadow: var(--sh-xs); }
.bpp-ri-label  { font-family: var(--font-body); font-size: .68rem; font-weight: 800; color: var(--text5); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.bpp-ri-target { font-family: var(--font-body); font-size: .7rem; font-weight: 600; color: var(--text5); margin-bottom: 5px; }
.bpp-ri-actual { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; margin-bottom: 8px; }
.bpp-ri-bar-track { height: 5px; background: var(--surface3); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.bpp-ri-bar-fill  { height: 100%; border-radius: 999px; transition: width .65s var(--ease); }
.bpp-ri-status { font-family: var(--font-body); font-size: .68rem; font-weight: 800; }
.bpp-rule-insight { background: var(--surface2); border-radius: var(--r-sm); padding: 16px; border: 1px solid var(--border); font-family: var(--font-body); font-size: .86rem; }

/* ════════════════════════════════════════════════════════════════
   CHARTS
   ════════════════════════════════════════════════════════════════ */
.bpp-chart-tabs { display: flex; gap: 6px; margin-left: auto; }
.bpp-ctab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .36rem .85rem;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: -.1px;
  border: 1.5px solid var(--border2);
  border-radius: 999px;
  background: transparent;
  color: var(--text4);
  cursor: pointer;
  transition: all var(--t);
  min-height: 34px;
}
.bpp-ctab:hover { border-color: var(--indigo); color: var(--indigo); }
.bpp-ctab.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.bpp-charts-body { position: relative; }
.bpp-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 230px;
  text-align: center;
  gap: 10px;
  background: radial-gradient(ellipse at center, var(--surface2) 0%, var(--surface) 75%);
  border-radius: var(--r-sm);
  border: 1.5px dashed var(--border2);
}
.bpp-empty-ico { font-size: 2.8rem; opacity: .5; }
.bpp-chart-empty p {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text5);
  line-height: 1.55;
}
.bpp-chart-sub {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text4);
  margin-bottom: 16px;
}
.bpp-cw { position: relative; height: 285px; }
.bpp-cw-pie { height: 325px; max-width: 420px; margin: 0 auto; }
.bpp-cpanel[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════
   PURCHASE READINESS
   ════════════════════════════════════════════════════════════════ */
.bpp-purchase-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.bpp-ptabx {
  padding: .42rem 1rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.1px;
  border: 1.5px solid var(--border2);
  border-radius: 999px;
  background: transparent;
  color: var(--text4);
  cursor: pointer;
  transition: all var(--t);
  min-height: 36px;
}
.bpp-ptabx:hover  { border-color: var(--amber); color: var(--amber); }
.bpp-ptabx.active { background: var(--amber); border-color: var(--amber); color: #fff; }
.bpp-pt-panel[hidden] { display: none; }
.bpp-pt-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bpp-pt-field  { display: flex; flex-direction: column; gap: 5px; }
.bpp-pt-field label {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 800;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bpp-pt-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: .87rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  padding: 9px 11px;
  min-height: 42px;
  transition: border-color var(--t), box-shadow var(--t);
}
/* When inside a sym wrapper, inputs are flex children — no own border */
.bpp-aw .bpp-pt-input {
  border: none !important;
  border-radius: 0 !important;
  padding-left: 10px !important;
  background: transparent !important;
  flex: 1;
  min-width: 0;
  box-shadow: none !important;
}
.bpp-aw .bpp-pt-input:focus { outline: none; box-shadow: none !important; }
.bpp-pt-input::-webkit-outer-spin-button,
.bpp-pt-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bpp-pt-input[type=number] { -moz-appearance: textfield; }
.bpp-pt-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-lt); }
.bpp-pt-result {
  border-radius: var(--r-sm);
  padding: 16px;
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.65;
  animation: bpp-in .3s var(--ease);
}
.bpp-result-green { background: var(--green-lt); border: 1.5px solid rgba(5,150,105,.28);  color: #064E3B; }
.bpp-result-amber { background: var(--amber-lt); border: 1.5px solid rgba(217,119,6,.28);  color: #78350F; }
.bpp-result-red   { background: var(--red-lt);   border: 1.5px solid rgba(220,38,38,.28);  color: #7F1D1D; }
[data-theme=dark] .bpp-result-green { color: #A7F3D0; }
[data-theme=dark] .bpp-result-amber { color: #FDE68A; }
[data-theme=dark] .bpp-result-red   { color: #FECACA; }
.bpp-result-checks { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: .78rem; }
.bpp-pt-disclaimer {
  font-family: var(--font-body);
  font-size: .73rem;
  font-weight: 500;
  color: var(--text5);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════
   RENT VS BUY
   ════════════════════════════════════════════════════════════════ */
.bpp-rvb-inputs { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 0; margin-bottom: 16px; align-items: start; }
.bpp-rvb-col  { padding: 0 16px; }
.bpp-rvb-col:first-child { padding-left: 0; }
.bpp-rvb-col:last-child  { padding-right: 0; }
.bpp-rvb-col-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -.15px;
}
.bpp-rvb-rent-title { color: var(--blue); }
.bpp-rvb-buy-title  { color: var(--green); }
.bpp-rvb-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text5);
  padding-top: 24px;
}
.bpp-rvb-btn {
  display: block;
  width: 100%;
  padding: 13px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.1px;
  background: linear-gradient(135deg, var(--green), var(--green-d));
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(5,150,105,.3);
  transition: all var(--t);
}
.bpp-rvb-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(5,150,105,.42); }
.bpp-rvb-result { border-radius: var(--r-sm); overflow: hidden; animation: bpp-in .3s var(--ease); }
.bpp-rvb-scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bpp-rvb-scenario { padding: 16px; border-radius: var(--r-sm); border: 1.5px solid var(--border); }
.bpp-rvb-scenario h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -.1px; }
.bpp-rvb-rent-s { background: var(--blue-lt);  border-color: rgba(37,99,235,.25); }
.bpp-rvb-buy-s  { background: var(--green-lt); border-color: rgba(5,150,105,.25); }
.bpp-rvb-s-row  { display: flex; justify-content: space-between; font-size: .77rem; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.06); gap: 8px; }
.bpp-rvb-s-row span:first-child { color: var(--text4); font-weight: 600; }
.bpp-rvb-s-row span:last-child  { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; color: var(--text); }
.bpp-rvb-summary {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 14px;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 500;
  color: var(--text2);
  line-height: 1.65;
}
.bpp-rvb-col .bpp-pt-field { margin-bottom: 8px; }

/* ════════════════════════════════════════════════════════════════
   LEAD MAGNET
   ════════════════════════════════════════════════════════════════ */
.bpp-lead-magnet {
  background: linear-gradient(135deg, rgba(91,91,214,.08), rgba(5,150,105,.06));
  border: 1.5px solid rgba(91,91,214,.2);
  border-radius: var(--r);
  padding: 26px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 14px;
}
.bpp-lead-icon { font-size: 2.4rem; flex-shrink: 0; }
.bpp-lead-body { flex: 1; min-width: 200px; }
.bpp-lead-body h3 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -.3px;
  line-height: 1.3;
}
.bpp-lead-body p { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--text3); line-height: 1.55; }
.bpp-lead-form  { display: flex; gap: 8px; flex-wrap: wrap; }
.bpp-lead-input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-xs);
  padding: 11px 15px;
  min-height: 46px;
  transition: border-color var(--t), box-shadow var(--t);
}
.bpp-lead-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-lt); }
.bpp-lead-btn {
  background: linear-gradient(135deg, var(--indigo), var(--indigo-d));
  color: #fff;
  border: none;
  border-radius: var(--r-xs);
  padding: 11px 24px;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.1px;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--indigo-glow);
  transition: all var(--t);
  white-space: nowrap;
}
.bpp-lead-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px var(--indigo-glow); }
.bpp-lead-note { width: 100%; font-family: var(--font-body); font-size: .71rem; font-weight: 600; color: var(--text5); }

/* ════════════════════════════════════════════════════════════════
   DISCLAIMER
   ════════════════════════════════════════════════════════════════ */
.bpp-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 500;
  color: var(--text4);
  line-height: 1.6;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-xs);
}
.bpp-disclaimer svg { flex-shrink: 0; margin-top: 2px; color: var(--amber); }
.bpp-disclaimer strong { color: var(--text3); font-weight: 800; }

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS / TOASTS
   ════════════════════════════════════════════════════════════════ */
@keyframes bpp-pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.bpp-pop { animation: bpp-pop .2s var(--ease); }
.bpp-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  border-radius: var(--r-sm);
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 700;
  box-shadow: var(--sh-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: all .28s var(--ease);
  pointer-events: none;
  max-width: 360px;
}
.bpp-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bpp-toast.success { background: var(--green-d); color: #fff; }
.bpp-toast.error   { background: #B91C1C; color: #fff; }
.bpp-toast.info    { background: var(--indigo-d); color: #fff; }
.bpp-toast.neutral { background: var(--text); color: var(--surface); }

/* ════════════════════════════════════════════════════════════════
   SEO CONTENT SECTION
   ════════════════════════════════════════════════════════════════ */
.bpp-seo {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 70px 22px 80px;
}
.bpp-seo-inner { max-width: 900px; margin: 0 auto; }

.bpp-seo-inner h2 {
  font-family: var(--font-display);
  font-size: 2.0rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.35px;
  line-height: 1.25;
  margin: 2.8rem 0 .9rem;
  padding-top: 2.8rem;
  border-top: 2px solid var(--border);
}
.bpp-seo-inner h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.bpp-seo-inner p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text2);
  line-height: 1.8;
  margin-bottom: .95rem;
}
.bpp-seo-inner ul, .bpp-seo-inner ol {
  padding-left: 1.6rem;
  margin-bottom: 1rem;
}
.bpp-seo-inner li {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.78;
  margin-bottom: .4rem;
}
.bpp-seo-inner strong { color: var(--text); font-weight: 700; }

/* Rules explainer */
.bpp-rules-explainer { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 1.2rem 0 1.5rem; }
.bpp-re-item { display: flex; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; align-items: flex-start; }
.bpp-re-num  { font-family: var(--font-mono); font-size: .86rem; font-weight: 800; color: var(--indigo); background: var(--indigo-lt); border-radius: 6px; padding: 4px 9px; white-space: nowrap; flex-shrink: 0; }
.bpp-re-item strong { display: block; font-family: var(--font-body); font-size: .9rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.bpp-re-item p { font-family: var(--font-body); font-size: .8rem; color: var(--text3); margin: 0; line-height: 1.55; }

/* Tips grid */
.bpp-tips-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 1.2rem 0 1.5rem; }
.bpp-tip { display: flex; gap: 12px; align-items: flex-start; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; }
.bpp-tip-n   { font-family: var(--font-mono); font-size: .9rem; font-weight: 800; color: var(--indigo); background: var(--indigo-lt); border-radius: 6px; padding: 3px 9px; flex-shrink: 0; }
.bpp-tip strong { display: block; font-family: var(--font-body); font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.bpp-tip p   { font-family: var(--font-body); font-size: .8rem; color: var(--text3); margin: 0; line-height: 1.55; }

/* FAQ */
.bpp-faq { margin: 1.2rem 0 1.5rem; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.bpp-faq-item { border-bottom: 1px solid var(--border); }
.bpp-faq-item:last-child { border-bottom: none; }
.bpp-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background var(--t);
  letter-spacing: -.1px;
}
.bpp-faq-item summary::-webkit-details-marker { display: none; }
.bpp-faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--text4); flex-shrink: 0; }
.bpp-faq-item[open] summary { background: var(--surface2); }
.bpp-faq-item[open] summary::after { content: '−'; }
.bpp-faq-item summary:hover { background: var(--surface2); }
.bpp-faq-item p {
  padding: 2px 20px 18px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 400;
  color: var(--text2);
  line-height: 1.7;
  margin: 0;
  background: var(--surface2);
}

/* Bottom CTA */
.bpp-cta-bottom {
  text-align: center;
  margin-top: 3rem;
  padding: 36px 28px;
  background: linear-gradient(135deg, var(--indigo-lt), rgba(5,150,105,.07));
  border: 1.5px solid rgba(91,91,214,.15);
  border-radius: var(--r);
}
.bpp-cta-bottom h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -.3px;
  line-height: 1.3;
}
.bpp-cta-bottom p {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text3);
  margin-bottom: 22px;
}
.bpp-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-d));
  color: #fff;
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: -.1px;
  box-shadow: 0 4px 18px var(--indigo-glow);
  transition: all var(--t);
}
.bpp-cta-link:hover { transform: translateY(-3px); box-shadow: 0 10px 30px var(--indigo-glow); }

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.bpp-footer {
  background: var(--surface2);
  border-top: 1px solid var(--border);
  padding: 44px 22px 22px;
}
.bpp-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 30px;
}
.bpp-footer-col { display: flex; flex-direction: column; }
.bpp-footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}
.bpp-footer-tagline { font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: var(--text3); line-height: 1.55; }
.bpp-footer-title {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 800;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 13px;
}
.bpp-footer-links { display: flex; flex-direction: column; gap: 7px; }
.bpp-footer-links a {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text3);
  text-decoration: none;
  transition: color var(--t);
}
.bpp-footer-links a:hover { color: var(--indigo); }
.bpp-footer-badges,
.bpp-footer-trust { display: flex; flex-direction: column; gap: 6px; }
.bpp-footer-badges span,
.bpp-footer-trust span { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--text3); }
.bpp-footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 500;
  color: var(--text5);
}
.bpp-footer-dis { text-align: right; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .bpp-kpi-hero   { grid-template-columns: 1fr 1fr; }
  .bpp-kpi-num    { font-size: 1.6rem; }
  .bpp-num-score  { font-size: 1.6rem !important; }
  .bpp-grid4      { grid-template-columns: 1fr; }
  .bpp-score-body { grid-template-columns: 1fr; }
  .bpp-gauge-num  { font-size: 3rem; }
  .bpp-rvb-inputs { grid-template-columns: 1fr; }
  .bpp-rvb-divider{ padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 8px 0; font-size: .85rem; }
  .bpp-rvb-col    { padding: 0; }
  .bpp-rules-explainer { grid-template-columns: 1fr 1fr; }
  .bpp-footer-inner { grid-template-columns: 1fr 1fr; }
  .bpp-brand-name   { font-size: 1.8rem; }
  .bpp-panel-title  { font-size: 1.3rem; }
  .bpp-card-title   { font-size: 1.25rem; }
  .bpp-seo-inner h2 { font-size: 1.7rem; }
  .bpp-cta-bottom h3 { font-size: 1.55rem; }
}
@media (max-width: 680px) {
  /* ── Trust strip → auto-scroll marquee on mobile ── */
  .bpp-trust-strip {
    flex-wrap: nowrap;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    cursor: default;
    user-select: none;
  }
  .bpp-trust-strip-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    animation: bppMarquee 20s linear infinite;
    width: max-content;
    padding: 0 4px;
  }
  .bpp-trust-badge[aria-hidden="true"] { display: inline-flex; }
  @keyframes bppMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .bpp-trust-badge { font-size: .68rem; padding: .27rem .82rem; }

  .bpp-tool-wrap  { padding: 16px 14px 32px; }
  .bpp-header     { flex-direction: column; align-items: flex-start; }
  .bpp-header-controls { width: 100%; }
  .bpp-kpi-hero   { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bpp-kpi        { padding: 12px 12px; }
  .bpp-kpi-savings{ padding: 12px 58px 12px 12px; }
  .bpp-kpi-icon   { width: 32px; height: 32px; }
  .bpp-kpi-num    { font-size: 1.35rem; }
  .bpp-num-score  { font-size: 1.35rem !important; }
  .bpp-kpi-lbl    { font-size: .6rem; margin-bottom: 4px; }
  .bpp-brand-name { font-size: 1.65rem; }
  .bpp-panel-title{ font-size: 1.2rem; }
  .bpp-card-title { font-size: 1.15rem; }
  .bpp-row {
    grid-template-columns: 1fr auto 30px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "lbl  lbl  lbl"
      "amt  frq  del";
    gap: 5px;
  }
  .bpp-row .bpp-lbl { grid-area: lbl; }
  .bpp-row .bpp-aw  { grid-area: amt; }
  .bpp-row .bpp-frq { grid-area: frq; display: block; width: auto; min-width: 62px; }
  .bpp-row .bpp-del { grid-area: del; align-self: center; }
  .bpp-ft-num     { font-size: 1.15rem; }
  .bpp-cw         { height: 235px; }
  .bpp-cw-pie     { height: 275px; }
  .bpp-rule-grid  { grid-template-columns: 1fr; }
  .bpp-rvb-scenarios { grid-template-columns: 1fr; }
  .bpp-tips-grid  { grid-template-columns: 1fr; }
  .bpp-rules-explainer { grid-template-columns: 1fr; }
  .bpp-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .bpp-action-bar { flex-direction: column; align-items: flex-start; }
  .bpp-seo-inner h2 { font-size: 1.55rem; }
  .bpp-br-hdr, .bpp-br-row { grid-template-columns: 62px 1fr 1fr 1fr; font-size: .72rem; }
  .bpp-gauge-num  { font-size: 2.6rem; }
  .bpp-ri-actual  { font-size: 1.6rem; }
  .bpp-sticky-kpis span:nth-child(3),
  .bpp-sticky-kpis span:nth-child(4) { display: none; }

  /* Fix 4 — Emergency fund liquidity legend mobile */
  .bpp-emg-body   { grid-template-columns: 1fr; gap: 14px; }
  .bpp-emg-right  { text-align: left; padding: 12px 14px; }
  .bpp-liq-legend { flex-direction: row; flex-wrap: wrap; gap: 5px; }
  .bpp-liq-legend span { font-size: .63rem; padding: 2px 7px; }
  .bpp-emg-left, .bpp-emg-right { box-sizing: border-box; width: 100%; }

  /* Fix 5 — CTA button mobile */
  .bpp-cta-link   { padding: 11px 20px; font-size: .82rem; width: 100%; justify-content: center; box-sizing: border-box; }
  .bpp-cta-bottom { padding: 24px 18px; }
  .bpp-cta-bottom h3 { font-size: .96rem; }
}
@media (max-width: 420px) {
  .bpp-kpi-num  { font-size: 1.15rem; letter-spacing: -.02em; }
  .bpp-num-score{ font-size: 1.15rem !important; }
  .bpp-kpi-icon { display: none; }
  .bpp-kpi      { padding: 10px 10px; }
  .bpp-kpi-savings { padding: 10px 52px 10px 10px; }
  .bpp-ring-svg { width: 44px; height: 44px; }
  .bpp-ft-num   { font-size: 1rem; }
  .bpp-gauge-num{ font-size: 2rem; }
  .bpp-trust-badge { font-size: .64rem; padding: .22rem .6rem; }
  .bpp-liq-val  { font-size: 1.7rem; }
  .bpp-brand-name   { font-size: 1.4rem; }
  .bpp-seo-inner h2 { font-size: 1.3rem; }
  .bpp-cta-bottom h3 { font-size: 1.3rem; }
  .bpp-panel-title  { font-size: 1.1rem; }
  .bpp-card-title   { font-size: 1.05rem; }
}
/* ── PERIOD ROW (moved below action bar) ── */
.bpp-period-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}
.bpp-period-row-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ── SCORE DELTA INDICATOR ── */
.bpp-score-delta {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: .01em;
  animation: bppFadeIn .3s ease;
}
.bpp-delta-up { background: rgba(16,185,129,.15); color: var(--green); }
.bpp-delta-dn { background: rgba(239,68,68,.12);  color: var(--red); }
@keyframes bppFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── EMERGENCY FUND + LIQUIDITY PANEL ── */
.bpp-panel-emg {
  margin-bottom: 20px;
}
.bpp-emg-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 4px 0 8px;
}
.bpp-emg-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
}
.bpp-emg-sub {
  font-size: .76rem;
  color: var(--text3);
  margin-bottom: 10px;
}
.bpp-emg-bar-track {
  height: 10px;
  background: var(--surface2);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.bpp-emg-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--indigo);
  transition: width .8s cubic-bezier(.4,0,.2,1), background .4s;
}
.bpp-emg-months {
  font-size: .75rem;
  color: var(--text3);
  line-height: 1.4;
}
.bpp-emg-right {
  text-align: center;
  min-width: 130px;
  padding: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.bpp-liq-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}
.bpp-liq-val {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--text);
}
.bpp-liq-val.bpp-liq-good  { color: var(--green); }
.bpp-liq-val.bpp-liq-mod   { color: var(--amber); }
.bpp-liq-val.bpp-liq-risk  { color: var(--red); }
.bpp-liq-state {
  font-size: .76rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.bpp-liq-state.bpp-liq-good  { color: var(--green); }
.bpp-liq-state.bpp-liq-mod   { color: var(--amber); }
.bpp-liq-state.bpp-liq-risk  { color: var(--red); }
.bpp-liq-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bpp-liq-legend span {
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.bpp-liq-g { background: rgba(16,185,129,.1); color: var(--green); }
.bpp-liq-m { background: rgba(245,158,11,.1); color: var(--amber); }
.bpp-liq-r { background: rgba(239,68,68,.1);  color: var(--red); }

/* ── PURCHASE RESULT — WHY / HOW TO IMPROVE ── */
.bpp-result-verdict {
  font-weight: 800;
  font-size: .92rem;
  margin-bottom: 5px;
}
.bpp-result-expl {
  font-size: .78rem;
  margin-bottom: 8px;
  opacity: .9;
}
.bpp-result-info {
  font-size: .74rem;
  font-family: var(--font-mono);
  margin-bottom: 8px;
  opacity: .75;
  padding: 5px 8px;
  background: rgba(0,0,0,.04);
  border-radius: 5px;
}
.bpp-chk-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.bpp-chk-ico { font-size: .8rem; flex-shrink: 0; }
.bpp-chk-lbl { font-size: .76rem; line-height: 1.3; }
.bpp-why-block {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(99,102,241,.06);
  border-left: 3px solid var(--indigo);
  border-radius: 0 6px 6px 0;
}
.bpp-why-title {
  font-size: .73rem;
  font-weight: 800;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.bpp-why-body {
  font-size: .77rem;
  color: var(--text2);
  line-height: 1.5;
}
.bpp-improve-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(16,185,129,.05);
  border-left: 3px solid var(--green);
  border-radius: 0 6px 6px 0;
}
.bpp-improve-title {
  font-size: .73rem;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.bpp-improve-list {
  margin: 0;
  padding-left: 1.2em;
  font-size: .77rem;
  color: var(--text2);
  line-height: 1.5;
}
.bpp-improve-list li { margin-bottom: 3px; }

/* ── RENT VS BUY EXPENSE CONTEXT ── */
/* Expense context — mirrors scenario card style */
.bpp-exp-ctx-wrap {
  margin: 14px 0;
  grid-template-columns: 1fr !important; /* single card — stretch to full width */
}
.bpp-exp-ctx-s {
  width: 100%;                           /* ensure card fills the row */
}
.bpp-exp-ctx-s {
  background: linear-gradient(135deg, rgba(91,91,214,.06), rgba(91,91,214,.02));
  border: 1.5px solid rgba(91,91,214,.22) !important;
}
.bpp-exp-ctx-s h4 { color: var(--indigo) !important; }
.bpp-ctx-rent-row span:last-child { color: var(--blue); font-weight: 700; }
.bpp-ctx-buy-row  span:last-child { color: var(--green); font-weight: 700; }
.bpp-ctx-diff-row { background: rgba(91,91,214,.04); border-radius: 4px; }
.bpp-ctx-diff-row span:last-child { color: var(--indigo); }
.bpp-ctx-leaves { color: var(--text3) !important; font-style: italic; font-size: .74rem; }
.bpp-ctx-pct {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text4);
  margin-top: 2px;
  font-style: normal;
}

@media (max-width: 680px) {
  .bpp-sticky-bar { display: none !important; }
  /* Trust strip — horizontal scroll slider on mobile */
  .bpp-trust-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 7px;
  }
  .bpp-trust-strip::-webkit-scrollbar { display: none; }
  .bpp-trust-badge { white-space: nowrap; flex-shrink: 0; }
  /* KPI — tighter on mobile */
  .bpp-kpi-num    { font-size: 1.5rem; }
  .bpp-num-score  { font-size: 1.5rem !important; }
  .bpp-kpi-icon   { width: 34px; height: 34px; }
  /* Emergency fund right panel — stack neatly */
  .bpp-emg-body   { grid-template-columns: 1fr; gap: 14px; }
  .bpp-emg-right  { text-align: left; padding: 12px; }
  .bpp-liq-legend { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .bpp-liq-legend span { font-size: .63rem; }
  /* Period row */
  .bpp-period-row { gap: 6px; }
  /* CTA button — full width, readable on mobile */
  .bpp-cta-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: .88rem;
    box-sizing: border-box;
  }
  /* Brand name smaller on mobile */
  .bpp-brand-name { font-size: 1.2rem; }
  /* Panel/card titles smaller on mobile */
  .bpp-panel-title{ font-size: .93rem; }
  .bpp-card-title { font-size: .88rem; }
  /* SEO h2 titles on mobile */
  .bpp-seo-inner h2 { font-size: 1.3rem; }
  /* Lead magnet */
  .bpp-lead-body h3 { font-size: 1.05rem; }
}

@media print {
  .bpp-sticky-bar, .bpp-theme-btn, .bpp-action-bar, .bpp-add, .bpp-del,
  .bpp-lead-magnet, .bpp-chart-tabs, .bpp-purchase-tabs, .bpp-rvb-btn,
  .bpp-seo, .bpp-footer, .bpp-privacy-bar { display: none !important; }
  .bpp-root { background: #fff !important; }
  .bpp-card, .bpp-panel { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════════════
   TODAY PANEL (v4) — Daily Control Dashboard
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   DAILY HERO GRID — desktop 2-col: left (today+weekly) | right (score+emg)
   ════════════════════════════════════════════════════════════════ */
.bpp-daily-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.bpp-daily-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bpp-daily-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Score inside right col: remove outer panel padding, use collapse block */
.bpp-score-cblock .bpp-panel-flat {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.bpp-score-cblock .bpp-score-body {
  padding-top: 4px;
}
.bpp-emg-inner {
  border-top: 1px solid var(--border);
  margin-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 16px 18px;
}
.bpp-emg-inner .bpp-panel-hd {
  margin-bottom: 12px;
  gap: 8px;
}

/* ── Big Status Banner (replaces tiny dot+text as primary signal) ── */
.bpp-status-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  color: var(--text3);
  transition: background .25s, border-color .25s;
}
.bpp-status-banner.stable {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.3);
  color: #065F46;
}
.bpp-status-banner.warning {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.35);
  color: #92400E;
}
.bpp-status-banner.danger {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.3);
  color: #991B1B;
}
[data-theme="dark"] .bpp-status-banner.stable  { color: #6EE7B7; }
[data-theme="dark"] .bpp-status-banner.warning { color: #FCD34D; }
[data-theme="dark"] .bpp-status-banner.danger  { color: #FCA5A5; }
.bpp-status-banner-ico { font-size: 1.15rem; flex-shrink: 0; }
.bpp-status-banner-msg { flex: 1; }

/* ── Safe Daily Spend Formula row ── */
.bpp-formula-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  margin-bottom: 14px;
  font-size: .72rem;
}
.bpp-formula-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.bpp-formula-item > span:first-child {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
}
.bpp-formula-lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text5);
}
.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(--amber); }
.bpp-formula-result > span:first-child { color: var(--indigo); font-size: .92rem; }
.bpp-formula-op {
  color: var(--text4);
  font-weight: 700;
  font-size: .78rem;
  padding-bottom: 10px;
}
.bpp-formula-eq {
  color: var(--text3);
  font-weight: 800;
  font-size: 1rem;
  padding-bottom: 10px;
}

/* Score badge and grade inside collapse toggle header */
.bpp-score-cblock .bpp-cblock-left {
  gap: 8px;
  flex-wrap: wrap;
}
.bpp-score-cblock .bpp-score-badge {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 800;
  color: var(--indigo);
  background: var(--indigo-lt);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 2px;
}
.bpp-score-cblock .bpp-score-grade {
  font-size: .76rem;
  font-weight: 700;
  color: var(--text4);
}

/* Tablet: stack into single column */
@media (max-width: 960px) {
  .bpp-daily-hero-grid { grid-template-columns: 1fr; }
  .bpp-emg-inner { border-radius: var(--r-sm); border: 1.5px solid var(--border); margin-top: 12px; }
}

/* Mobile: score section collapsed by default */
@media (max-width: 680px) {
  .bpp-score-cblock { /* already handled by JS class */ }
  .bpp-formula-row { font-size: .68rem; gap: 4px 6px; padding: 8px 10px; }
  .bpp-formula-item > span:first-child { font-size: .72rem; }
  .bpp-formula-result > span:first-child { font-size: .82rem; }
  .bpp-status-banner { font-size: .83rem; padding: 9px 12px; }
  .bpp-status-banner-ico { font-size: 1rem; }
}

.bpp-today-panel {
  background: var(--surface);
  border: 1.5px solid var(--indigo-lt);
  border-radius: var(--r-lg);
  padding: 22px 24px 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(99,102,241,.08);
}
.bpp-today-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--indigo), #818CF8, var(--indigo));
}

/* ── Top row: date + streak ── */
.bpp-today-toprow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.bpp-today-date {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--text4);
  letter-spacing: .01em;
  margin-bottom: 4px;
}
.bpp-today-statusline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bpp-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text5);
  flex-shrink: 0;
  transition: background .3s;
}
.bpp-status-dot.stable   { background: var(--green); box-shadow: 0 0 6px rgba(16,185,129,.5); }
.bpp-status-dot.warning  { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,.5); }
.bpp-status-dot.danger   { background: var(--red);   box-shadow: 0 0 6px rgba(239,68,68,.5); }
.bpp-status-dot.nodata   { background: var(--text5); }
.bpp-status-text {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text3);
}

/* ── Streak badge ── */
.bpp-streak-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(251,146,60,.12), rgba(249,115,22,.08));
  border: 1.5px solid rgba(251,146,60,.3);
  border-radius: 12px;
  padding: 8px 13px 8px 10px;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
  flex-shrink: 0;
}
.bpp-streak-badge:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(249,115,22,.18); }
.bpp-streak-fire { font-size: 1.4rem; line-height: 1; }
.bpp-streak-info { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.bpp-streak-count {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 800;
  color: #F97316;
  letter-spacing: -.04em;
}
.bpp-streak-lbl {
  font-size: .62rem;
  font-weight: 700;
  color: #C2410C;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Today KPIs: 3 tiles ── */
.bpp-today-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.bpp-tkpi {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  text-align: center;
  transition: border-color var(--t);
}
.bpp-tkpi-safe   { border-color: rgba(16,185,129,.25); }
.bpp-tkpi-spent  { border-color: rgba(239,68,68,.2); }
.bpp-tkpi-remain { border-color: rgba(99,102,241,.2); }
.bpp-tkpi-label {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text5);
  margin-bottom: 5px;
}
.bpp-tkpi-val {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--text);
  transition: color .25s;
}
.bpp-tkpi-safe   .bpp-tkpi-val { color: var(--green); }
.bpp-tkpi-spent  .bpp-tkpi-val { color: var(--red); }
.bpp-tkpi-remain .bpp-tkpi-val.positive { color: var(--green); }
.bpp-tkpi-remain .bpp-tkpi-val.negative { color: var(--red); }
.bpp-tkpi-sub {
  font-size: .62rem;
  font-weight: 600;
  color: var(--text5);
}

/* ── Quick Add Expense ── */
.bpp-quick-add {
  margin-bottom: 14px;
}
.bpp-qa-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 9px;
}
.bpp-qa-amount-wrap {
  flex: 0 0 130px;
}
.bpp-qa-cat {
  flex: 1;
  height: 44px;
  border: 1.5px solid var(--border2);
  border-radius: var(--r-xs);
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color var(--t);
  min-width: 0;
}
.bpp-qa-cat:focus { border-color: var(--indigo); }
.bpp-qa-cat::placeholder { color: var(--text5); }
.bpp-qa-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  white-space: nowrap;
}
.bpp-qa-btn:hover { background: var(--indigo-d); transform: translateY(-1px); }
.bpp-qa-btn:active { transform: scale(.97); }

/* Category chips */
.bpp-qa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bpp-chip {
  padding: 5px 10px;
  border: 1.5px solid var(--border2);
  border-radius: 999px;
  background: var(--surface2);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text3);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
  font-family: var(--font-body);
}
.bpp-chip:hover, .bpp-chip.active {
  background: var(--indigo-lt);
  border-color: var(--indigo);
  color: var(--indigo);
}

/* ── Daily Risk Banner ── */
.bpp-daily-risk {
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}
.bpp-daily-risk.stable {
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.25);
  color: #065F46;
}
.bpp-daily-risk.warning {
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  color: #92400E;
}
.bpp-daily-risk.danger {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  color: #991B1B;
}
[data-theme="dark"] .bpp-daily-risk.stable  { color: #6EE7B7; }
[data-theme="dark"] .bpp-daily-risk.warning { color: #FCD34D; }
[data-theme="dark"] .bpp-daily-risk.danger  { color: #FCA5A5; }

/* ── Today's Log ── */
.bpp-today-log-wrap {
  margin-bottom: 14px;
}
.bpp-today-log-title {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text5);
  margin-bottom: 7px;
}
.bpp-today-log {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
}
.bpp-log-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: .8rem;
  gap: 10px;
}
.bpp-log-cat  { font-weight: 700; color: var(--text2); flex: 1; }
.bpp-log-amt  { font-family: var(--font-mono); font-weight: 700; color: var(--red); font-size: .82rem; }
.bpp-log-time { font-size: .68rem; color: var(--text5); margin-left: 6px; }
.bpp-log-del  { border: none; background: none; color: var(--text5); cursor: pointer; font-size: 1rem; padding: 0 3px; line-height: 1; transition: color var(--t); }
.bpp-log-del:hover { color: var(--red); }

/* ── 7-Day Financial Pulse ── */
.bpp-pulse-section {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.bpp-pulse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bpp-pulse-title {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
}
.bpp-pulse-hint {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text5);
}
.bpp-pulse-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  align-items: flex-end;
  height: 60px;
}
.bpp-pulse-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.bpp-pulse-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 44px;
}
.bpp-pulse-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: height .4s var(--ease);
}
.bpp-pulse-bar.under  { background: var(--green); }
.bpp-pulse-bar.over   { background: var(--red); }
.bpp-pulse-bar.today  { background: var(--indigo); }
.bpp-pulse-bar.nodata { background: var(--border2); }
.bpp-pulse-day-lbl {
  font-size: .58rem;
  font-weight: 700;
  color: var(--text5);
  text-align: center;
  letter-spacing: .02em;
}

/* ════════════════════════════════════════════════════════════════
   COLLAPSE BLOCKS (v4)
   ════════════════════════════════════════════════════════════════ */
.bpp-collapse-block {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow var(--t);
}
.bpp-collapse-block:hover { box-shadow: var(--sh-xs); }
.bpp-cblock-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 16px 20px;
  cursor: pointer;
  gap: 12px;
  text-align: left;
  transition: background var(--t);
}
.bpp-cblock-hd:hover { background: var(--surface2); }
.bpp-cblock-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.bpp-cblock-ico { font-size: 1.1rem; line-height: 1; }
.bpp-cblock-title {
  font-family: var(--font-display);
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.1px;
}
.bpp-cblock-sub {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text5);
  margin-left: 4px;
}
.bpp-cblock-arr {
  color: var(--text4);
  flex-shrink: 0;
  transition: transform .28s var(--ease);
}
.bpp-collapse-block.bpp-collapse-open .bpp-cblock-arr {
  transform: rotate(180deg);
}
/* Body — hidden by default, shown when open */
.bpp-cblock-body {
  display: none;
  padding: 0 20px 20px;
  animation: cblockIn .22s var(--ease) both;
}
.bpp-collapse-block.bpp-collapse-open .bpp-cblock-body {
  display: block;
}
@keyframes cblockIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   WEEKLY SNAPSHOT (v4)
   ════════════════════════════════════════════════════════════════ */
.bpp-weekly-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.bpp-wstat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  text-align: center;
}
.bpp-wstat-lbl {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text5);
  margin-bottom: 5px;
}
.bpp-wstat-val {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
}
.bpp-week-micro {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text3);
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: var(--r-xs);
  border-left: 3px solid var(--indigo);
  line-height: 1.5;
}

/* ── Color helpers ── */
.bpp-color-inc { color: var(--green) !important; }
.bpp-color-exp { color: var(--red)   !important; }

/* ── Score Today Impact tag ── */
.bpp-score-today-impact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  margin: 6px 0 12px;
  border: 1.5px solid transparent;
}
.bpp-score-today-impact.positive {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.25);
  color: var(--green);
}
.bpp-score-today-impact.warning {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.3);
  color: var(--amber);
}
.bpp-score-today-impact.negative {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.25);
  color: var(--red);
}

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Today Panel & Collapse
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .bpp-today-panel  { padding: 16px 14px 14px; }
  .bpp-today-kpis   { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .bpp-tkpi         { padding: 10px 8px; }
  .bpp-tkpi-val     { font-size: 1.1rem; }
  .bpp-tkpi-label   { font-size: .58rem; }
  .bpp-qa-row       { flex-wrap: wrap; }
  .bpp-qa-amount-wrap { flex: 0 0 120px; }
  .bpp-qa-cat       { flex: 1; min-width: 0; }
  .bpp-qa-btn       { flex: 1; min-width: 80px; }
  .bpp-weekly-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bpp-wstat-val    { font-size: .92rem; }
  .bpp-cblock-hd    { padding: 13px 14px; }
  .bpp-cblock-body  { padding: 0 14px 16px; }
  .bpp-streak-count { font-size: 1.1rem; }
  .bpp-pulse-bar-wrap { height: 36px; }
  .bpp-pulse-chart  { height: 50px; }
}
@media (max-width: 420px) {
  .bpp-today-kpis { gap: 5px; }
  .bpp-tkpi-val   { font-size: 1.0rem; }
  .bpp-weekly-stats { gap: 6px; }
  .bpp-wstat-val  { font-size: .85rem; }
}

/* ════════════════════════════════════════════════════════════════
   v4.1 — STATUS BANNER UPGRADE (Big Emotional Card)
   ════════════════════════════════════════════════════════════════ */
.bpp-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.35;
  background: var(--surface2);
  border: 2px solid var(--border2);
  color: var(--text3);
  transition: background .3s, border-color .3s, color .3s;
  min-height: 64px;
}
.bpp-status-banner.stable {
  background: linear-gradient(135deg, rgba(5,150,105,.08), rgba(16,185,129,.05));
  border-color: rgba(5,150,105,.35);
  color: #065F46;
}
.bpp-status-banner.warning {
  background: linear-gradient(135deg, rgba(217,119,6,.1), rgba(245,158,11,.06));
  border-color: rgba(217,119,6,.4);
  color: #78350F;
}
.bpp-status-banner.danger {
  background: linear-gradient(135deg, rgba(220,38,38,.09), rgba(239,68,68,.05));
  border-color: rgba(220,38,38,.35);
  color: #7F1D1D;
}
[data-theme="dark"] .bpp-status-banner.stable  { color: #6EE7B7; }
[data-theme="dark"] .bpp-status-banner.warning { color: #FCD34D; }
[data-theme="dark"] .bpp-status-banner.danger  { color: #FCA5A5; }
.bpp-status-banner-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.bpp-status-banner-ico {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}
.bpp-status-banner-body {
  flex: 1;
  min-width: 0;
}
.bpp-status-banner-msg {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.1px;
  margin-bottom: 2px;
}
.bpp-status-banner-sub {
  font-size: .75rem;
  font-weight: 600;
  opacity: .8;
}
.bpp-status-banner-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

/* ── Streak mini in banner ── */
.bpp-status-streak-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(249,115,22,.12);
  border: 1.5px solid rgba(249,115,22,.28);
  border-radius: 999px;
  padding: 3px 9px 3px 6px;
}
.bpp-ssm-fire { font-size: .9rem; line-height: 1; }
.bpp-ssm-count {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 800;
  color: #C2410C;
}
.bpp-ssm-lbl {
  font-size: .65rem;
  font-weight: 700;
  color: #C2410C;
}

/* ── Trend arrow in banner ── */
.bpp-status-trend {
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
}
.bpp-status-trend.up   { color: var(--green); }
.bpp-status-trend.down { color: var(--red); }

/* ── Score motivational line ── */
.bpp-score-motive {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  margin-top: 10px;
  margin-bottom: 4px;
  border-left: 3px solid var(--indigo);
  background: var(--indigo-lt);
  color: var(--indigo-d);
  line-height: 1.45;
}
[data-theme="dark"] .bpp-score-motive { color: #A5B4FC; }

/* ════════════════════════════════════════════════════════════════
   SAVINGS & INVESTMENTS SECTION (v4.1)
   ════════════════════════════════════════════════════════════════ */
.bpp-sicard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bpp-card-sip   { border-top: 3px solid var(--green); }
.bpp-card-invest { border-top: 3px solid var(--purple); }
.bpp-ico-sip   .bpp-card-ico { background: var(--green-lt); }
.bpp-ico-invest .bpp-card-ico { background: rgba(124,58,237,.1); }
.bpp-color-sip    { color: var(--green)  !important; }
.bpp-color-invest { color: var(--purple) !important; }

/* SI summary panel — spans full width */
.bpp-si-summary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(5,150,105,.06), rgba(124,58,237,.05));
  border: 1.5px solid rgba(5,150,105,.2);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.bpp-si-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bpp-si-sum-lbl {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text3);
}
.bpp-si-sum-val {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -.04em;
}
.bpp-si-sum-pct {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.bpp-si-sum-pct.good   { color: var(--green); }
.bpp-si-sum-pct.ok     { color: var(--amber); }
.bpp-si-sum-pct.low    { color: var(--red); }
/* SI rate bar */
.bpp-si-rate-bar-wrap { margin: 6px 0 10px; }
.bpp-si-rate-bar-track {
  height: 8px;
  background: var(--surface3);
  border-radius: 999px;
  overflow: visible;
  position: relative;
  margin-bottom: 4px;
}
.bpp-si-rate-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--indigo));
  transition: width .65s var(--ease);
  max-width: 100%;
}
.bpp-si-rate-bar-target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  background: var(--indigo);
  border-radius: 1px;
}
.bpp-si-rate-labels {
  display: flex;
  justify-content: space-between;
  font-size: .62rem;
  font-weight: 700;
  color: var(--text5);
}
.bpp-si-target-lbl {
  color: var(--indigo);
  font-weight: 800;
}
.bpp-si-msg {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text3);
  line-height: 1.5;
  padding: 8px 0 0;
}

/* ════════════════════════════════════════════════════════════════
   STICKY FAB — Mobile Add Expense Button
   ════════════════════════════════════════════════════════════════ */
.bpp-fab {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 900;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(91,91,214,.45);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
  letter-spacing: -.1px;
}
.bpp-fab:hover  { background: var(--indigo-d); transform: translateY(-2px); box-shadow: 0 6px 28px rgba(91,91,214,.55); }
.bpp-fab:active { transform: scale(.96); }
.bpp-fab svg    { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   SEO SECTION TOGGLE (collapsible)
   ════════════════════════════════════════════════════════════════ */
.bpp-seo-toggle {
  margin: 0;
}
.bpp-seo-toggle-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1.5px solid var(--border);
  transition: background .2s;
  user-select: none;
}
.bpp-seo-toggle-hd:hover { background: var(--surface2); }
.bpp-seo-toggle-hd::-webkit-details-marker { display: none; }
.bpp-seo-toggle-ico { font-size: 1.1rem; }
.bpp-seo-toggle-hd > span:nth-child(2) { flex: 1; }
.bpp-seo-toggle-arr { color: var(--text4); transition: transform .28s var(--ease); }
.bpp-seo-toggle[open] .bpp-seo-toggle-arr { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES for v4.1
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* FAB — show on mobile */
  .bpp-fab { display: flex; }

  /* Status banner — compact on mobile */
  .bpp-status-banner { padding: 11px 13px; min-height: 56px; }
  .bpp-status-banner-msg { font-size: .86rem; }
  .bpp-status-banner-sub { font-size: .7rem; }
  .bpp-status-banner-ico { font-size: 1.35rem; }

  /* SI grid — stack on mobile */
  .bpp-sicard { grid-template-columns: 1fr; }
  .bpp-si-summary { grid-column: 1; }

  /* FAB padding — so content doesn't hide behind it */
  .bpp-tool-wrap { padding-bottom: 80px; }
}

/* ════════════════════════════════════════════════════════════════
   v4.2 PATCH — 6 targeted fixes
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 2: Weekly Snapshot full-width ── */
.bpp-weekly-fullwidth {
  margin-bottom: 14px;
}
.bpp-weekly-stats-wide {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.bpp-wstat-streak .bpp-wstat-val { color: var(--amber) !important; }

/* ── Fix 3: Ring NOT covering savings amount on mobile ── */
/* The ring lives inside .bpp-kpi-savings which has position:relative */
/* On mobile the ring is 58px wide and right:14px — we shrink it */
@media (max-width: 680px) {
  .bpp-kpi-savings { padding: 12px 54px 12px 12px; }
  .bpp-kpi-rate-ring { right: 8px; }
  .bpp-ring-svg    { width: 44px; height: 44px; }
  .bpp-ring-pct    { font-size: .6rem; }
}
@media (max-width: 420px) {
  /* On very small screens move ring below the amount to avoid overlap */
  .bpp-kpi-savings { padding: 10px 10px 42px; }
  .bpp-kpi-rate-ring {
    right: auto;
    top: auto;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
  }
  .bpp-ring-svg { width: 32px; height: 32px; }
  .bpp-ring-pct { font-size: .55rem; }
}

/* ── Fix 4: Setup Divider ── */
.bpp-setup-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--text4);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.bpp-setup-divider::before,
.bpp-setup-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* SI Summary inside slider — needs card-like look on desktop */
.bpp-si-summary.bpp-slide-card {
  background: linear-gradient(135deg, rgba(5,150,105,.06), rgba(99,102,241,.05));
  border: 1.5px solid rgba(5,150,105,.22);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--sh-sm);
}
.bpp-si-slide-hd {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -.1px;
}

/* ── Fix 5: Summary Slider — desktop = 3-col row, mobile = snap scroll ── */
.bpp-summary-slider {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
/* Dot indicators — hidden on desktop */
.bpp-slider-dots {
  display: none;
}

@media (max-width: 680px) {
  /* Slider: horizontal snap scroll on mobile */
  .bpp-summary-slider {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 2px 12px;
    scrollbar-width: none;
    /* prevent collapse */
    align-items: stretch;
  }
  .bpp-summary-slider::-webkit-scrollbar { display: none; }

  .bpp-slide-card {
    scroll-snap-align: start;
    flex: 0 0 calc(100% - 24px); /* one card visible, hint of next */
    min-width: 0;
    box-sizing: border-box;
  }

  /* Dot indicator — show on mobile */
  .bpp-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 8px;
  }
  .bpp-sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border2);
    transition: background .2s, transform .2s;
  }
  .bpp-sdot.active {
    background: var(--indigo);
    transform: scale(1.35);
  }

  /* Weekly stats wide → 2-col on mobile */
  .bpp-weekly-stats-wide { grid-template-columns: 1fr 1fr; }
}

/* ── Fix 6: FAB smaller ── */
.bpp-fab {
  padding: 10px 16px !important;
  font-size: .8rem !important;
  gap: 6px !important;
}
.bpp-fab svg { width: 17px !important; height: 17px !important; }


/* ════════════════════════════════════════════════════════════════
   VARIABLE INCOME MODE — v4.3
   ════════════════════════════════════════════════════════════════ */

/* ── Income Mode Toggle Row ── */
.bpp-income-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bpp-imt-label {
  font-size: .7rem;
  font-weight: 800;
  color: var(--text5);
  text-transform: uppercase;
  letter-spacing: .09em;
  white-space: nowrap;
  flex-shrink: 0;
}
.bpp-imt-toggle {
  display: flex;
  background: var(--surface3);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.bpp-imt-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text4);
  cursor: pointer;
  transition: all .22s var(--ease);
  white-space: nowrap;
  line-height: 1;
}
.bpp-imt-btn svg { flex-shrink: 0; opacity: .7; }
.bpp-imt-btn.active {
  background: var(--surface);
  box-shadow: var(--sh-sm);
  font-weight: 800;
}
.bpp-imt-btn[data-mode="fixed"].active  { color: var(--blue); }
.bpp-imt-btn[data-mode="variable"].active { color: var(--amber); }
.bpp-imt-btn[data-mode="variable"].active svg { opacity: 1; }
.bpp-imt-btn:not(.active):hover { color: var(--text2); background: rgba(255,255,255,.35); }

/* ── Variable Income Panel (amber-accented) ── */
.bpp-variable-panel {
  border-top: 2.5px solid var(--amber);
  padding-top: 16px;
  margin-bottom: 14px;
  animation: cblockIn .24s var(--ease) both;
}

/* ── Daily Income Logger ── */
.bpp-vi-log-row {
  background: linear-gradient(135deg, rgba(217,119,6,.07), rgba(217,119,6,.03));
  border: 1.5px solid rgba(217,119,6,.22);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.bpp-vi-log-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 10px;
}
.bpp-vi-day-ico { font-size: 1.05rem; }
.bpp-vi-log-inputs {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.bpp-vi-amt-wrap { flex: 1; }
.bpp-vi-input {
  width: 100%;
  border: 1.5px solid var(--border2);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  padding: 9px 10px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.bpp-vi-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(217,119,6,.12); }
.bpp-vi-log-btn {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}
.bpp-vi-log-btn:hover  { background: #B45309; transform: translateY(-1px); }
.bpp-vi-log-btn:active { transform: scale(.97); }
.bpp-vi-zero-btn-wrap  { display: flex; justify-content: flex-end; }
.bpp-vi-zero-btn {
  border: none;
  background: none;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text4);
  cursor: pointer;
  padding: 2px 0;
  transition: color .2s;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.bpp-vi-zero-btn:hover { color: var(--red); }

/* ── 7-Day Income Bar Chart ── */
.bpp-vi-week-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 68px;
  margin-bottom: 14px;
  padding: 4px 0 0;
}
.bpp-vi-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}
.bpp-vi-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.bpp-vi-bar {
  width: 70%;
  border-radius: 3px 3px 0 0;
  transition: height .45s var(--ease), background .25s;
  min-height: 3px;
  position: relative;
}
.bpp-vi-bar.earned   { background: var(--green); }
.bpp-vi-bar.zero     { background: rgba(220,38,38,.18); border: 1.5px solid rgba(220,38,38,.4); border-bottom: none; min-height: 12px; }
.bpp-vi-bar.today    { background: var(--amber); box-shadow: 0 0 8px rgba(217,119,6,.35); }
.bpp-vi-bar.today.earned { background: linear-gradient(180deg, var(--amber), var(--green)); }
.bpp-vi-bar.unlogged { background: var(--surface3); border: 1.5px dashed var(--border2); border-bottom: none; min-height: 8px; }
.bpp-vi-bar.future   { background: var(--surface3); opacity: .4; min-height: 4px; }
.bpp-vi-bar-lbl {
  font-size: .56rem;
  font-weight: 800;
  color: var(--text5);
  text-align: center;
  line-height: 1;
}
.bpp-vi-bar-lbl.today-lbl { color: var(--amber); }

/* ── Variable KPI tiles ── */
.bpp-vi-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.bpp-vi-kpi {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 10px 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bpp-vi-kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.bpp-vi-kpi-earn::after  { background: var(--green); }
.bpp-vi-kpi-spent::after { background: var(--red); }
.bpp-vi-kpi-avail::after { background: var(--indigo); }
.bpp-vi-kpi-lbl {
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text5);
  margin-bottom: 4px;
}
.bpp-vi-kpi-val {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpp-vi-kpi-sub {
  font-size: .56rem;
  font-weight: 600;
  color: var(--text5);
  line-height: 1.3;
}
.bpp-vi-kpi-val.pos { color: var(--green) !important; }
.bpp-vi-kpi-val.neg { color: var(--red)   !important; }

/* ── Reserve Row ── */
.bpp-vi-reserve-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bpp-vi-reserve-left { flex: 1; min-width: 110px; }
.bpp-vi-reserve-lbl {
  font-size: .79rem;
  font-weight: 800;
  color: var(--text2);
  display: block;
  margin-bottom: 2px;
}
.bpp-vi-reserve-hint {
  font-size: .64rem;
  font-weight: 600;
  color: var(--text5);
}
.bpp-vi-reserve-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-xs);
  padding: 0 8px;
  height: 34px;
  transition: border-color .2s;
}
.bpp-vi-reserve-input-wrap:focus-within { border-color: var(--amber); }
.bpp-vi-reserve-input {
  width: 80px;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  outline: none;
}
.bpp-vi-reserve-status {
  font-size: .68rem;
  font-weight: 700;
  min-width: 80px;
  text-align: right;
}

/* ── Income Stability Score ── */
.bpp-stability-panel {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.bpp-stab-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bpp-stab-ico { font-size: 1.25rem; line-height: 1; }
.bpp-stab-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
}
.bpp-stab-title {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.bpp-stab-score {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--indigo);
  transition: color .35s;
}
.bpp-stab-score.good { color: var(--green); }
.bpp-stab-score.ok   { color: var(--amber); }
.bpp-stab-score.poor { color: var(--red);   }
.bpp-stab-msg {
  font-size: .77rem;
  font-weight: 600;
  color: var(--text3);
  line-height: 1.55;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--surface3);
  border-radius: var(--r-xs);
  border-left: 3px solid var(--amber);
}
.bpp-stab-bars { display: flex; flex-direction: column; gap: 8px; }
.bpp-stab-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bpp-stab-bar-lbl {
  font-size: .67rem;
  font-weight: 700;
  color: var(--text4);
  width: 115px;
  flex-shrink: 0;
}
.bpp-stab-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface3);
  border-radius: 999px;
  overflow: hidden;
}
.bpp-stab-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .65s var(--ease);
}
.bpp-stab-consistency { background: var(--indigo); }
.bpp-stab-zeroday     { background: var(--amber);  }
.bpp-stab-variance    { background: var(--green);  }
.bpp-stab-bar-pts {
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 800;
  color: var(--text5);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ── 4-Week Income Trend ── */
.bpp-trend-panel {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.bpp-trend-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bpp-trend-title {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}
.bpp-trend-hint {
  font-size: .64rem;
  font-weight: 600;
  color: var(--text5);
}
.bpp-trend-canvas {
  width: 100%;
  display: block;
  border-radius: var(--r-xs);
  background: var(--surface3);
}
.bpp-trend-weeks {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.bpp-trend-week-lbl {
  font-size: .6rem;
  font-weight: 700;
  color: var(--text5);
  text-align: center;
  flex: 1;
}
.bpp-trend-week-lbl.current { color: var(--amber); }

/* Mobile responsive */
@media (max-width: 680px) {
  .bpp-income-mode-row { gap: 6px; }
  .bpp-imt-btn { padding: 6px 10px; font-size: .72rem; }
  .bpp-vi-log-inputs { flex-wrap: wrap; }
  .bpp-vi-amt-wrap   { flex: 1 0 100%; }
  .bpp-vi-log-btn    { flex: 1; height: 38px; }
  .bpp-vi-kpis       { gap: 5px; }
  .bpp-vi-kpi        { padding: 8px 6px; }
  .bpp-vi-kpi-val    { font-size: .78rem; }
  .bpp-vi-reserve-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bpp-vi-reserve-status { text-align: left; min-width: 0; }
  .bpp-stab-bar-lbl  { width: 88px; font-size: .62rem; }
}


/* ════════════════════════════════════════════════════════════════
   v4.4 PATCH — 5 targeted fixes
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 2: Daily Reserve Target — clean vertical stack, never overflows ── */
.bpp-vi-reserve-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
/* Left text block: stacked label + hint */
.bpp-vi-reserve-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: none !important;
  min-width: 0 !important;
}
/* Full-width input wrapper — key: width 100%, box-sizing, no min-width */
.bpp-vi-reserve-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  padding: 0 12px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: var(--r-xs) !important;
  box-shadow: var(--sh-xs);
  transition: border-color .2s, box-shadow .2s;
}
.bpp-vi-reserve-input-wrap:focus-within {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,.12) !important;
}
/* Input grows to fill wrapper — never sets its own width */
.bpp-vi-reserve-input {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-mono);
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: var(--text);
  outline: none;
}
/* Status sits below the input row */
.bpp-vi-reserve-status {
  font-size: .68rem !important;
  font-weight: 700;
  color: var(--text4);
  min-width: 0 !important;
  text-align: left !important;
}

/* ── Fix 2: 4-Week Trend — taller canvas + better spacing ── */
.bpp-trend-canvas {
  height: 120px !important;
  border-radius: var(--r-xs);
  background: var(--surface3) !important;
}
.bpp-trend-week-lbl { font-size: .62rem !important; }
.bpp-trend-week-lbl.current {
  color: var(--amber) !important;
  font-weight: 800 !important;
}

/* ── Fix 3: Summary row — all 3 cards equal height ── */
.bpp-summary-slider {
  align-items: stretch !important;
}
.bpp-slide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.bpp-si-summary.bpp-slide-card {
  height: auto !important;
  min-height: 100%;
}
/* Make the insights list fill remaining space */
.bpp-card-ins .bpp-insights {
  flex: 1;
}

/* ── Fix 4: Ring stays beside amount at ALL mobile sizes ── */
/* Cancel the v4.2 "bottom-center" patch entirely */
@media (max-width: 420px) {
  .bpp-kpi-savings {
    padding: 10px 50px 10px 10px !important;
  }
  .bpp-kpi-rate-ring {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }
  .bpp-ring-svg {
    width: 38px !important;
    height: 38px !important;
  }
  .bpp-ring-pct { font-size: .58rem !important; }
}

/* ── Fix 5: Footer bottom — clean mobile stack ── */
@media (max-width: 680px) {
  .bpp-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding-top: 14px !important;
  }
  .bpp-footer-dis {
    text-align: center !important;
    color: var(--text5);
    font-size: .7rem !important;
    line-height: 1.5;
  }
  .bpp-footer-bottom > span:first-child {
    font-weight: 600;
    color: var(--text4);
  }
  /* Thin divider between the two lines */
  .bpp-footer-bottom > span:first-child::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--border);
    margin: 6px auto 0;
  }
}


/* ════════════════════════════════════════════════════════════════
   v4.5 PATCH — 3 targeted fixes
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 3: Savings & Investment Rate card matches .bpp-card on desktop/tablet only ── */
@media (min-width: 681px) {

  /* Override the gradient/green-border from v4.2 patch — match .bpp-card exactly */
  .bpp-si-summary.bpp-slide-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-top: 3px solid var(--green) !important;
    border-radius: var(--r) !important;
    padding: 22px !important;
    box-shadow: var(--sh-sm) !important;
    height: auto !important;
    min-height: unset !important;
    transition: box-shadow var(--t), border-color var(--t) !important;
  }
  .bpp-si-summary.bpp-slide-card:hover {
    box-shadow: var(--sh) !important;
  }

  /* Header row: icon + title matching .bpp-card-hd */
  .bpp-si-slide-hd {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    font-family: var(--font-display) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -.2px !important;
    line-height: 1.2 !important;
  }
  /* Prepend icon badge before the title text */
  .bpp-si-slide-hd::before {
    content: '📈';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--green-lt);
    font-size: .95rem;
    flex-shrink: 0;
    line-height: 1;
  }
}

/* Mobile: keep original gradient card look untouched */
@media (max-width: 680px) {
  .bpp-si-summary.bpp-slide-card {
    background: linear-gradient(135deg, rgba(5,150,105,.08), rgba(99,102,241,.06)) !important;
    border: 1.5px solid rgba(5,150,105,.25) !important;
    border-top: 1.5px solid rgba(5,150,105,.25) !important;
  }
  .bpp-si-slide-hd {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
  }
  .bpp-si-slide-hd::before { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════
   v4.6 PATCH — Summary & Insights fixes
   ════════════════════════════════════════════════════════════════ */

/* ── A: Space between Period / Income / Expenses / Savings columns ── */
.bpp-br-hdr,
.bpp-br-row {
  column-gap: 14px !important;
}
/* Slightly reduce font on very small screens so numbers don't crowd */
@media (max-width: 400px) {
  .bpp-br-hdr, .bpp-br-row { column-gap: 8px !important; }
  .bpp-br-i, .bpp-br-e, .bpp-br-s { font-size: .7rem !important; }
}

/* ── B + C + D: Savings & Investment Rate card — full bpp-card treatment ── */

/* New colour token for SI card accent (green, matching savings theme) */
.bpp-card-si {
  border-top: 3px solid var(--green) !important;
}
/* Icon badge colour for SI card */
.bpp-ico-si {
  background: var(--green-lt);
  color: var(--green);
}

/* Override the old .bpp-si-summary base rule — no longer a full-width span */
.bpp-si-summary,
#bpp-si-summary {
  grid-column: auto !important;     /* cancel the old grid-column: 1 / -1 */
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-top: 3px solid var(--green) !important;
  border-radius: var(--r) !important;
  padding: 22px !important;
  box-shadow: var(--sh-sm) !important;
}
#bpp-si-summary:hover {
  box-shadow: var(--sh) !important;
}

/* Remove gradient/green-border overrides from v4.2 patch that made it span full width */
/* (the old .bpp-si-summary.bpp-slide-card gradient rules are now superseded) */

/* Wipe out the v4.5 ::before emoji icon entirely (icon is now in HTML) */
.bpp-si-slide-hd::before { display: none !important; content: none !important; }

/* ── Ensure all 3 slider cards sit in one equal row on desktop & tablet ── */
@media (min-width: 681px) {
  .bpp-summary-slider {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  /* Each card fills full column height */
  .bpp-summary-slider > .bpp-slide-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Mobile: SI card same swipe card treatment as the other two ── */
@media (max-width: 680px) {
  /* SI card already inherits .bpp-card styles — just keep the same width as siblings */
  #bpp-si-summary {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-top: 3px solid var(--green) !important;
    border-radius: var(--r) !important;
    padding: 22px !important;
    box-shadow: var(--sh-sm) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   v4.7 PATCH — Savings Summary table mobile clarity
   ════════════════════════════════════════════════════════════════ */

/* Always prevent number cells wrapping */
.bpp-br-i, .bpp-br-e, .bpp-br-s {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 680px) {
  /* Tighten row padding so 4 columns have more room */
  .bpp-br-hdr,
  .bpp-br-row {
    padding: 8px 10px !important;
    column-gap: 6px !important;
  }
  /* Shrink period label column — frees space for numbers */
  .bpp-br-hdr,
  .bpp-br-row {
    grid-template-columns: 52px 1fr 1fr 1fr !important;
  }
  /* Scale number font down just enough to breathe */
  .bpp-br-i,
  .bpp-br-e,
  .bpp-br-s {
    font-size: .68rem !important;
  }
  /* Period label matches */
  .bpp-br-p {
    font-size: .72rem !important;
  }
  /* Header label */
  .bpp-br-hdr {
    font-size: .58rem !important;
    letter-spacing: .06em !important;
  }
  /* Savings column — bold green, slightly larger to stand out */
  .bpp-br-s {
    font-size: .69rem !important;
    font-weight: 800 !important;
  }
  /* Active row: bolder numbers */
  .bpp-br-active .bpp-br-i,
  .bpp-br-active .bpp-br-e,
  .bpp-br-active .bpp-br-s {
    font-weight: 800 !important;
  }
}

@media (max-width: 380px) {
  /* Extra-small phones: push even tighter */
  .bpp-br-hdr,
  .bpp-br-row {
    padding: 7px 8px !important;
    column-gap: 4px !important;
    grid-template-columns: 46px 1fr 1fr 1fr !important;
  }
  .bpp-br-i, .bpp-br-e, .bpp-br-s { font-size: .62rem !important; }
  .bpp-br-s { font-size: .63rem !important; font-weight: 800 !important; }
  .bpp-br-p { font-size: .66rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   v4.8 PATCH — Breakdown table definitive clarity fix
   Supersedes all previous br- overrides. Single source of truth.
   ════════════════════════════════════════════════════════════════ */

/* ── Base: right-align numbers, tighter gap, better sizing ── */
.bpp-br-hdr,
.bpp-br-row {
  grid-template-columns: 60px 1fr 1fr 1fr !important;
  column-gap: 8px !important;
  padding: 10px 14px !important;
}
.bpp-br-hdr {
  font-size: .62rem !important;
  letter-spacing: .08em !important;
}
/* Right-align all 3 number header labels */
.bpp-br-hdr span:nth-child(2),
.bpp-br-hdr span:nth-child(3),
.bpp-br-hdr span:nth-child(4) {
  text-align: right !important;
}
.bpp-br-p {
  font-size: .82rem !important;
  font-weight: 800 !important;
}
/* Increase number font — key fix for clarity */
.bpp-br-i,
.bpp-br-e,
.bpp-br-s {
  font-size: .82rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: right !important;   /* right-align = no wasted left padding */
}
.bpp-br-s {
  font-weight: 800 !important;    /* savings always bolder */
}

/* ── Slider: give Savings Summary 20% more width on desktop ── */
@media (min-width: 681px) {
  .bpp-summary-slider {
    grid-template-columns: 1.25fr 1fr 1fr !important;
  }
}

/* ── Mobile 680px ── */
@media (max-width: 680px) {
  .bpp-br-hdr,
  .bpp-br-row {
    grid-template-columns: 50px 1fr 1fr 1fr !important;
    column-gap: 5px !important;
    padding: 9px 10px !important;
  }
  .bpp-br-hdr { font-size: .56rem !important; }
  .bpp-br-p   { font-size: .75rem !important; }
  .bpp-br-i,
  .bpp-br-e,
  .bpp-br-s   { font-size: .75rem !important; }
  .bpp-br-s   { font-size: .76rem !important; font-weight: 800 !important; }
}

/* ── Extra-small 380px ── */
@media (max-width: 380px) {
  .bpp-br-hdr,
  .bpp-br-row {
    grid-template-columns: 44px 1fr 1fr 1fr !important;
    column-gap: 4px !important;
    padding: 8px 8px !important;
  }
  .bpp-br-hdr { font-size: .52rem !important; }
  .bpp-br-p   { font-size: .7rem !important; }
  .bpp-br-i,
  .bpp-br-e,
  .bpp-br-s   { font-size: .7rem !important; }
  .bpp-br-s   { font-size: .71rem !important; font-weight: 800 !important; }
}


/* ════════════════════════════════════════════════════════════════
   v4.9 PATCH — Desktop width · Mobile card · Tablet slider
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 1: Expand desktop content width ── */
/* Override max-width on all major containers */
.bpp-tool-wrap {
  max-width: 1360px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.bpp-sticky-inner {
  max-width: 1360px !important;
}
.bpp-footer-inner,
.bpp-footer-bottom {
  max-width: 1360px !important;
}

/* ── Fix 2: Mobile Savings Summary — wider card ── */
@media (max-width: 680px) {
  .bpp-slide-card {
    flex: 0 0 calc(100% - 10px) !important; /* nearly full width, tiny hint */
    min-width: 0 !important;
  }
  /* Slightly larger breakdown font on mobile now that card is wider */
  .bpp-br-i,
  .bpp-br-e,
  .bpp-br-s {
    font-size: .78rem !important;
  }
  .bpp-br-s   { font-size: .79rem !important; font-weight: 800 !important; }
  .bpp-br-p   { font-size: .77rem !important; }
}

/* ── Fix 3: Tablet slider (681px – 1023px) ── */

/* Cancel the v4.6 desktop-grid rule that fired from 681px upward */
@media (min-width: 681px) and (max-width: 1023px) {
  /* Revert to snap-scroll flex, same as mobile */
  .bpp-summary-slider {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    padding: 4px 2px 14px !important;
    align-items: stretch !important;
    grid-template-columns: none !important; /* cancel any grid */
  }
  .bpp-summary-slider::-webkit-scrollbar { display: none !important; }

  /* Tablet cards: show ~1 full card + peek of next */
  .bpp-summary-slider > .bpp-slide-card {
    scroll-snap-align: start !important;
    flex: 0 0 calc(60% - 10px) !important; /* 60% = peek of next on tablet */
    min-width: 280px !important;
    max-width: none !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Show dots on tablet too */
  .bpp-slider-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px 0 10px !important;
  }
  .bpp-sdot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--border2) !important;
    transition: background .2s, transform .2s !important;
    display: block !important;
  }
  .bpp-sdot.active {
    background: var(--indigo) !important;
    transform: scale(1.35) !important;
  }
}

/* Desktop only: static 3-col grid from 1024px up */
@media (min-width: 1024px) {
  .bpp-summary-slider {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr 1fr !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }
  .bpp-summary-slider > .bpp-slide-card {
    flex: none !important;
    scroll-snap-align: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
  .bpp-slider-dots { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════
   v5.0 PATCH — 4 targeted fixes
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 1: Savings Summary table — bigger, clearer amounts ── */
.bpp-br-hdr,
.bpp-br-row {
  grid-template-columns: 65px 1fr 1fr 1fr !important;
  column-gap: 10px !important;
  padding: 11px 16px !important;
}
.bpp-br-hdr { font-size: .66rem !important; }
.bpp-br-p   { font-size: .86rem !important; font-weight: 800 !important; }
.bpp-br-i,
.bpp-br-e,
.bpp-br-s   { font-size: .86rem !important; font-weight: 700 !important; text-align: right !important; }
.bpp-br-s   { font-size: .87rem !important; font-weight: 800 !important; }
.bpp-br-active { font-weight: 800 !important; }
.bpp-br-active .bpp-br-i,
.bpp-br-active .bpp-br-e,
.bpp-br-active .bpp-br-s { font-weight: 800 !important; }

@media (max-width: 680px) {
  .bpp-br-hdr,
  .bpp-br-row {
    grid-template-columns: 54px 1fr 1fr 1fr !important;
    column-gap: 6px !important;
    padding: 10px 12px !important;
  }
  .bpp-br-hdr { font-size: .58rem !important; }
  .bpp-br-p   { font-size: .8rem !important; }
  .bpp-br-i,
  .bpp-br-e,
  .bpp-br-s   { font-size: .8rem !important; }
  .bpp-br-s   { font-size: .81rem !important; font-weight: 800 !important; }
}
@media (max-width: 380px) {
  .bpp-br-hdr,
  .bpp-br-row {
    grid-template-columns: 46px 1fr 1fr 1fr !important;
    column-gap: 4px !important;
    padding: 8px 9px !important;
  }
  .bpp-br-i, .bpp-br-e, .bpp-br-s { font-size: .73rem !important; }
  .bpp-br-s { font-size: .74rem !important; }
  .bpp-br-p { font-size: .72rem !important; }
}

/* ── Fix 2: Frequency dropdown — wider and clearly readable ── */
/* Desktop: change grid from "1fr 148px auto 30px" to give frq a real width — DESKTOP ONLY */
@media (min-width: 1024px) {
  .bpp-row {
    grid-template-columns: 1fr 148px 95px 30px;
  }
  .bpp-frq {
    font-size: .82rem;
    font-weight: 700;
    min-width: 0;
    width: 100%;
    padding-left: 9px;
    padding-right: 22px;
  }
}

/* ── Fix 3: Panel Slider — Advanced Insights & Planning Tools ── */

/* Desktop: 2-col side-by-side */
@media (min-width: 1024px) {
  .bpp-panel-slider {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    overflow-x: visible !important;
  }
  .bpp-pslide-card {
    margin-bottom: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
  .bpp-pslider-dots { display: none !important; }
}

/* Tablet (681–1023px): snap-scroll, show 1 + peek */
@media (min-width: 681px) and (max-width: 1023px) {
  .bpp-panel-slider {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    padding: 4px 2px 14px !important;
    align-items: stretch !important;
  }
  .bpp-panel-slider::-webkit-scrollbar { display: none !important; }
  .bpp-pslide-card {
    scroll-snap-align: start !important;
    flex: 0 0 calc(70% - 8px) !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }
  .bpp-pslider-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 2px 0 10px !important;
  }
}

/* Mobile (≤680px): full-width snap-scroll */
@media (max-width: 680px) {
  .bpp-panel-slider {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 4px 2px 12px !important;
    align-items: stretch !important;
  }
  .bpp-panel-slider::-webkit-scrollbar { display: none !important; }
  .bpp-pslide-card {
    scroll-snap-align: start !important;
    flex: 0 0 calc(100% - 10px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }
  .bpp-pslider-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 2px 0 8px !important;
  }
}

/* ── Fix 4: Smart Purchase Readiness mobile fixes ── */

/* Subtitle: wrap cleanly below title on mobile instead of floating right */
@media (max-width: 680px) {
  .bpp-panel-hd {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  .bpp-panel-sub {
    margin-left: 0 !important;
    width: 100% !important;
    order: 99 !important;            /* push below icon + title */
    padding-left: 48px !important;   /* align with title text (icon 36px + gap 12px) */
    font-size: .7rem !important;
  }
  /* House / Car inputs: tighter min-width so they never overflow card */
  .bpp-pt-inputs {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 10px !important;
  }
  /* Prevent any individual field from overflowing */
  .bpp-pt-field {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .bpp-pt-input,
  .bpp-aw {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Purchase tabs — allow wrapping on very small screens */
  .bpp-purchase-tabs {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   v5.1 PATCH — 4 fixes
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 1: Frequency column — DESKTOP ONLY (≥1024px) ── */
/* Cancel the global v5.0 bpp-row override — was too broad */
@media (min-width: 1024px) {
  .bpp-row {
    grid-template-columns: 1fr 148px 100px 30px !important;
    grid-template-areas: none !important;
    grid-template-rows: auto !important;
  }
  .bpp-frq {
    font-size: .84rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 9px !important;
    padding-right: 24px !important;
  }
  /* Undo grid-areas for desktop */
  .bpp-row .bpp-lbl,
  .bpp-row .bpp-aw,
  .bpp-row .bpp-frq,
  .bpp-row .bpp-del { grid-area: auto !important; }
}

/* Tablet (681–1023px): restore v4.9 two-row stacked layout */
@media (min-width: 681px) and (max-width: 1023px) {
  .bpp-row {
    grid-template-columns: 1fr auto 30px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "lbl  lbl  lbl"
      "amt  frq  del" !important;
    gap: 5px !important;
  }
  .bpp-row .bpp-lbl { grid-area: lbl !important; }
  .bpp-row .bpp-aw  { grid-area: amt !important; }
  .bpp-row .bpp-frq { grid-area: frq !important; display: block !important; width: auto !important; min-width: 70px !important; }
  .bpp-row .bpp-del { grid-area: del !important; align-self: center !important; }
}

/* ── Fix 2: Budget Rules Engine — prevent overflow ── */
.bpp-rule-item {
  min-width: 0 !important;
  overflow: hidden !important;
  word-break: break-word !important;
}
.bpp-ri-actual {
  font-size: 1.55rem !important;  /* down from 1.9rem — fits 2-col panel */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Rule desc text wrap */
.bpp-rule-desc { overflow-wrap: break-word !important; word-break: break-word !important; }
/* When panel is in 2-col slider, rule-grid needs min-width:0 */
.bpp-pslide-card .bpp-rule-grid {
  min-width: 0 !important;
  overflow: hidden !important;
}
.bpp-pslide-card .bpp-rule-item {
  padding: 12px 10px !important;
}
/* On narrow panels (tablet/mobile) show 1-col rule grid */
@media (max-width: 680px) {
  .bpp-rule-grid { grid-template-columns: 1fr !important; }
  .bpp-ri-actual { font-size: 1.6rem !important; white-space: nowrap; }
}
@media (min-width: 681px) and (max-width: 1023px) {
  .bpp-rule-grid { grid-template-columns: repeat(3,1fr) !important; gap: 7px !important; }
  .bpp-ri-actual { font-size: 1.3rem !important; }
  .bpp-rule-item { padding: 10px 8px !important; }
}

/* ── Fix 3: Smart Purchase Readiness — snap-scroll slider ── */

/* Slider wrapper */
.bpp-purchase-slider {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;   /* clip so cards don't show outside */
  margin-bottom: 12px;
}
.bpp-purchase-slider::-webkit-scrollbar { display: none; }

/* Each panel = full slide */
.bpp-pt-slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px;
  background: var(--surface2);
}

/* Dots below slider */
.bpp-purchase-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 4px 0 10px;
}
.bpp-pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border2);
  transition: background .2s, transform .2s, width .2s;
  cursor: pointer;
}
.bpp-pdot.active {
  background: var(--amber);
  transform: scale(1.3);
  width: 22px;           /* elongated pill for active */
  border-radius: 999px;
}

/* Tabs above slider — act as labels, amber active pill */
.bpp-purchase-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ── Fix 4: sections open — cblock-body display fix ── */
/* When bpp-collapse-open is present, body must be visible (handled by existing CSS) */
/* Ensure the cblock-body for open sections isn't hidden by [hidden] attribute */
.bpp-collapse-block.bpp-collapse-open .bpp-cblock-body[hidden] {
  display: block !important;
}


/* ════════════════════════════════════════════════════════════════
   v5.2 PATCH — Equal panels · Rule grid mobile · Purchase slider
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 1: Equal height Smart Purchase & Rent vs Buy on desktop ── */
@media (min-width: 1024px) {
  .bpp-panel-slider {
    align-items: stretch !important;  /* was "start" — makes both cards same height */
  }
  .bpp-pslide-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;         /* stretch fills the row */
  }
  /* Purchase panel inner layout: flex-column so slider + result fill space */
  .bpp-panel-purchase.bpp-pslide-card {
    display: flex !important;
    flex-direction: column !important;
  }
  .bpp-panel-purchase.bpp-pslide-card .bpp-purchase-slider {
    flex: 1 1 auto !important;       /* slider grows to fill remaining height */
    min-height: 180px !important;
  }
}

/* ── Fix 2: Budget Rules Engine — mobile overflow ── */
/* Force 1-col on mobile for rule grid (beat base specificity with !important) */
@media (max-width: 680px) {
  .bpp-rule-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .bpp-rule-item {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 14px 12px !important;
  }
  .bpp-ri-actual {
    font-size: 1.45rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  /* Rule-grid inside a snap slide card — extra guard */
  .bpp-pslide-card .bpp-rule-grid,
  .bpp-pt-slide .bpp-rule-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: 3-col but smaller numbers */
@media (min-width: 681px) and (max-width: 1023px) {
  .bpp-rule-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .bpp-rule-item {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 10px 8px !important;
  }
  .bpp-ri-actual {
    font-size: 1.25rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ── Fix 3: Purchase slider — works on ALL screen sizes ── */
/*
 * ROOT CAUSE: in v5.1 the shorthand "overflow: hidden" was written AFTER
 * "overflow-x: auto", killing scroll on tablet+mobile.
 * Fix: use overflow-x + overflow-y separately (no shorthand), in correct order.
 */
.bpp-purchase-slider {
  /* Reset — kill the conflicting shorthand */
  overflow: visible !important;
  /* Correct individual axes */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* Scroll snap — ensure it's set */
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  /* Layout */
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  /* Visual */
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 12px !important;
}
.bpp-purchase-slider::-webkit-scrollbar { display: none !important; }

/* Each slide: exactly 100% of the slider viewport */
.bpp-pt-slide {
  scroll-snap-align: start !important;
  flex: 0 0 100% !important;
  min-width: 100% !important;          /* extra guard — prevents partial show */
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  background: var(--surface2) !important;
  overflow: hidden !important;         /* clip slide content at its own edges */
}

/* Inputs inside slide — prevent any overflow */
.bpp-pt-slide .bpp-pt-inputs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.bpp-pt-slide .bpp-pt-field {
  min-width: 0 !important;
  overflow: hidden !important;
}
.bpp-pt-slide .bpp-pt-input,
.bpp-pt-slide .bpp-aw {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Dots: visible on all screen sizes */
.bpp-purchase-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 2px 0 10px !important;
  align-items: center !important;
}
.bpp-pdot {
  display: block !important;
  height: 8px !important;
  width: 8px !important;
  border-radius: 50% !important;
  background: var(--border2) !important;
  transition: background .25s, width .25s, border-radius .25s !important;
  flex-shrink: 0 !important;
}
.bpp-pdot.active {
  background: var(--amber) !important;
  width: 22px !important;
  border-radius: 999px !important;
}

/* Tabs: always wrap cleanly, no overflow */
.bpp-purchase-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}


/* ════════════════════════════════════════════════════════════════
   v5.3 PATCH — FULLY FLUID RESPONSIVE
   Strategy: clamp() fluid scaling · min() column guards ·
   fine-grained breakpoints for every common device width
   Covers: 360→430px phones, 600→1024px tablets, 1024→1600px desktop
   ════════════════════════════════════════════════════════════════ */

/* ── 1. FLUID CONTAINER — scales side padding with viewport ── */
.bpp-tool-wrap {
  max-width: 1360px !important;
  margin: 0 auto !important;
  /* clamp(min, preferred, max) — 4vw gives ~15px on 375px, ~28px on 1440px */
  padding-left:  clamp(12px, 4vw, 40px) !important;
  padding-right: clamp(12px, 4vw, 40px) !important;
  padding-top:    clamp(16px, 3vw, 40px) !important;
  padding-bottom: clamp(24px, 4vw, 56px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.bpp-sticky-inner {
  max-width: 1360px !important;
  padding-left:  clamp(12px, 4vw, 40px) !important;
  padding-right: clamp(12px, 4vw, 40px) !important;
}

/* ── 2. FLUID ROOT FONT SIZE — baseline scales with viewport ── */
/* 15px at 360px → 16px at 768px → 17px at 1440px */
.bpp-root {
  font-size: clamp(14.5px, 1.5vw + 9px, 17px) !important;
}

/* ── 3. FLUID TYPOGRAPHY — all key sizes use clamp() ── */
.bpp-brand-name {
  font-size: clamp(1.35rem, 3.5vw, 2.2rem) !important;
}
.bpp-kpi-num,
.bpp-num-score {
  font-size: clamp(1.1rem, 3.2vw, 1.9rem) !important;
}
.bpp-panel-title {
  font-size: clamp(1.05rem, 2.5vw, 1.45rem) !important;
}
.bpp-card-title {
  font-size: clamp(1rem, 2.2vw, 1.35rem) !important;
}
.bpp-cblock-title {
  font-size: clamp(.88rem, 1.8vw, 1.05rem) !important;
}
.bpp-ri-actual {
  font-size: clamp(1.1rem, 3vw, 1.7rem) !important;
}

/* ── 4. FLUID GAPS on main layout grids ── */
.bpp-kpi-hero      { gap: clamp(7px,  1.5vw, 14px) !important; }
.bpp-grid4         { gap: clamp(10px, 2vw,   18px) !important; }
.bpp-daily-hero-grid{ gap: clamp(10px, 2vw, 18px) !important; }
.bpp-panel-slider  { gap: clamp(10px, 2vw,   18px) !important; }
.bpp-summary-slider{ gap: clamp(10px, 2vw,   16px) !important; }

/* ── 5. CARD PADDING scales with viewport ── */
.bpp-card   { padding: clamp(14px, 2.5vw, 26px) !important; }
.bpp-panel  { padding: clamp(14px, 2.5vw, 26px) !important; }
.bpp-cblock-hd { padding: clamp(12px, 2vw, 20px) !important; }
.bpp-cblock-body { padding: 0 clamp(12px, 2vw, 22px) clamp(14px, 2.5vw, 22px) !important; }

/* ── 6. KPI CARD — fluid layout guard ── */
/* Always 2×2 grid on narrow, 4-col on wide */
.bpp-kpi-hero {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 700px) {
  .bpp-kpi-hero {
    grid-template-columns: 1fr 1fr 1.25fr 1fr !important;
  }
}
.bpp-kpi { padding: clamp(10px, 2vw, 16px) !important; }

/* ── 7. BUDGET SETUP GRID — fluid 2-col → 1-col ── */
/* grid4 stays 2-col down to 520px, then 1-col */
.bpp-grid4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
}

/* ── 8. SUMMARY SLIDER — fluid column widths ── */
/* Desktop ≥1024: 3-col, Savings Summary wider */
@media (min-width: 1024px) {
  .bpp-summary-slider {
    grid-template-columns: 1.3fr 1fr 1fr !important;
    overflow-x: visible !important;
  }
}
/* Mid-range tablet 700–1023: snap-scroll */
@media (min-width: 700px) and (max-width: 1023px) {
  .bpp-summary-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: clamp(10px, 2vw, 16px) !important;
    padding-bottom: 12px !important;
  }
  .bpp-summary-slider > .bpp-slide-card {
    scroll-snap-align: start !important;
    flex: 0 0 clamp(260px, 58vw, 420px) !important;
    min-width: 0 !important;
  }
  .bpp-slider-dots { display: flex !important; }
}
/* Mobile ≤699: nearly full-width snap */
@media (max-width: 699px) {
  .bpp-summary-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
  }
  .bpp-summary-slider > .bpp-slide-card {
    scroll-snap-align: start !important;
    flex: 0 0 calc(100vw - clamp(34px, 8vw, 60px)) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .bpp-slider-dots { display: flex !important; }
}

/* ── 9. DAILY HERO GRID ── */
/* 2-col ≥ 700px, 1-col below */
.bpp-daily-hero-grid {
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 699px) {
  .bpp-daily-hero-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 10. INPUT ROWS — fluid for all screen widths ── */
/* Desktop ≥1024: label + amount + freq + del on one line */
@media (min-width: 1024px) {
  .bpp-row {
    grid-template-columns: 1fr clamp(120px, 14vw, 160px) clamp(80px, 9vw, 110px) 30px !important;
  }
}
/* 700–1023: two-row stacked */
@media (min-width: 700px) and (max-width: 1023px) {
  .bpp-row {
    grid-template-columns: 1fr auto 30px !important;
    grid-template-areas: "lbl lbl lbl" "amt frq del" !important;
    grid-template-rows: auto auto !important;
  }
  .bpp-row .bpp-lbl { grid-area: lbl !important; }
  .bpp-row .bpp-aw  { grid-area: amt !important; }
  .bpp-row .bpp-frq { grid-area: frq !important; min-width: 72px !important; }
  .bpp-row .bpp-del { grid-area: del !important; align-self: center !important; }
}
/* Mobile ≤699: same two-row stacked */
@media (max-width: 699px) {
  .bpp-row {
    grid-template-columns: 1fr auto 30px !important;
    grid-template-areas: "lbl lbl lbl" "amt frq del" !important;
    grid-template-rows: auto auto !important;
    gap: 5px !important;
  }
  .bpp-row .bpp-lbl { grid-area: lbl !important; }
  .bpp-row .bpp-aw  { grid-area: amt !important; }
  .bpp-row .bpp-frq { grid-area: frq !important; min-width: 62px !important; }
  .bpp-row .bpp-del { grid-area: del !important; align-self: center !important; }
}

/* ── 11. BREAKDOWN TABLE — fully fluid columns ── */
/* Uses fr units so each column gets its fair share of available space */
.bpp-br-hdr,
.bpp-br-row {
  grid-template-columns: clamp(44px, 12vw, 68px) 1fr 1fr 1fr !important;
  column-gap: clamp(4px, 1.2vw, 12px) !important;
  padding: clamp(7px, 1.5vw, 12px) clamp(8px, 2vw, 18px) !important;
}
.bpp-br-i, .bpp-br-e, .bpp-br-s {
  font-size: clamp(.65rem, 1.8vw, .88rem) !important;
}
.bpp-br-p {
  font-size: clamp(.68rem, 1.9vw, .88rem) !important;
}
.bpp-br-hdr {
  font-size: clamp(.52rem, 1.4vw, .67rem) !important;
}

/* ── 12. PANEL SLIDER (Advanced / Planning) — fluid ── */
@media (min-width: 1024px) {
  .bpp-panel-slider {
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(12px, 2vw, 20px) !important;
  }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .bpp-pslide-card {
    flex: 0 0 clamp(280px, 68vw, 520px) !important;
  }
}
@media (max-width: 699px) {
  .bpp-pslide-card {
    flex: 0 0 calc(100vw - clamp(34px, 8vw, 60px)) !important;
    min-width: 0 !important;
  }
}

/* ── 13. PURCHASE SLIDER — fluid slide width ── */
/* Slide is always 100% of its container — container is already fluid */
.bpp-pt-slide {
  padding: clamp(12px, 2.5vw, 20px) !important;
}
.bpp-pt-inputs {
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 28vw, 180px), 1fr)) !important;
}

/* ── 14. RULE GRID — responsive column count ── */
@media (min-width: 700px) {
  .bpp-rule-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 699px) {
  .bpp-rule-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Numbers inside rule cards always fit */
.bpp-ri-actual {
  font-size: clamp(1.05rem, 3.5vw, 1.65rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── 15. FINE-GRAINED DEVICE BREAKPOINTS ── */
/* Covers the gap between 360–430px phones (Samsung S20U, iPhone 14 Pro Max etc) */

/* Narrow phones: 360–389px (Galaxy S21, Pixel 6a) */
@media (max-width: 389px) {
  .bpp-tool-wrap {
    padding-left:  10px !important;
    padding-right: 10px !important;
  }
  .bpp-kpi-num,
  .bpp-num-score { font-size: clamp(.95rem, 5vw, 1.15rem) !important; }
  .bpp-kpi-icon  { width: 28px !important; height: 28px !important; }
  .bpp-ptabx     { font-size: .72rem !important; padding: .35rem .7rem !important; }
}

/* Mid phones: 390–429px (iPhone 14 Pro, Pixel 7) */
@media (min-width: 390px) and (max-width: 429px) {
  .bpp-kpi-num,
  .bpp-num-score { font-size: clamp(1rem, 5vw, 1.2rem) !important; }
}

/* Large phones: 430–499px (iPhone 14 Pro Max, S20 Ultra) */
@media (min-width: 430px) and (max-width: 499px) {
  .bpp-kpi-num,
  .bpp-num-score { font-size: clamp(1.1rem, 4vw, 1.35rem) !important; }
  .bpp-kpi-icon  { width: 32px !important; height: 32px !important; }
}

/* Large-phone / small-tablet: 500–699px */
@media (min-width: 500px) and (max-width: 699px) {
  .bpp-kpi-hero {
    grid-template-columns: 1fr 1fr !important;
  }
  .bpp-kpi-num,
  .bpp-num-score { font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important; }
  .bpp-grid4 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Small tablet: 700–767px */
@media (min-width: 700px) and (max-width: 767px) {
  .bpp-kpi-hero {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Standard tablet: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .bpp-kpi-hero {
    grid-template-columns: 1fr 1fr 1.25fr 1fr !important;
  }
  .bpp-kpi-num,
  .bpp-num-score { font-size: clamp(1.3rem, 2.5vw, 1.65rem) !important; }
}

/* ── 16. OVERFLOW GUARDS — nothing ever bleeds ── */
.bpp-card,
.bpp-panel,
.bpp-collapse-block,
.bpp-pt-slide,
.bpp-pslide-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
/* But allow scroll containers to scroll */
.bpp-purchase-slider,
.bpp-summary-slider,
.bpp-panel-slider,
.bpp-trust-strip-inner {
  overflow-x: auto !important;
}

/* ── 17. INPUT & SELECT global fluid guard ── */
.bpp-root input,
.bpp-root select,
.bpp-root textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ════════════════════════════════════════════════════════════════
   v5.4 PATCH — Fluid KPI cards + strict 2×2 budget grid
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   FIX 1 — KPI CARDS: fully fluid at every width
   ═══════════════════════════════════════════════ */

/* KPI hero grid — always 4-col on tablet+desktop, 2×2 on phone */
.bpp-kpi-hero {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(6px, 1.5vw, 14px) !important;
  margin-bottom: 14px !important;
}
@media (max-width: 599px) {
  .bpp-kpi-hero {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(6px, 2vw, 10px) !important;
  }
}

/* KPI card base — fluid padding so nothing overflows */
.bpp-kpi {
  padding: clamp(10px, 2vw, 16px) clamp(10px, 2vw, 16px) !important;
  gap: clamp(6px, 1.2vw, 12px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Savings card — right padding must accommodate the ring */
.bpp-kpi-savings {
  padding: clamp(10px, 2vw, 16px)
           clamp(46px, 8vw, 72px)   /* right side — ring space */
           clamp(10px, 2vw, 16px)
           clamp(10px, 2vw, 16px) !important;
}

/* KPI icon badge — scales with container */
.bpp-kpi-icon {
  width:  clamp(26px, 4vw, 38px) !important;
  height: clamp(26px, 4vw, 38px) !important;
  border-radius: clamp(6px, 1vw, 10px) !important;
  flex-shrink: 0 !important;
}

/* Hero number — the most important element */
.bpp-kpi-num,
.bpp-num-score {
  font-size: clamp(.88rem, 2.4vw, 1.9rem) !important;
  letter-spacing: clamp(-.02em, -.04em, -.04em) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* KPI label and sub — scale down on small screens */
.bpp-kpi-lbl {
  font-size: clamp(.52rem, 1.2vw, .68rem) !important;
  letter-spacing: clamp(.06em, .12em, .14em) !important;
  margin-bottom: clamp(3px, .6vw, 7px) !important;
}
.bpp-kpi-sub {
  font-size: clamp(.52rem, 1.2vw, .68rem) !important;
  margin-top: clamp(3px, .6vw, 7px) !important;
}

/* ─── Savings Rate Ring — fully fluid ─── */
/* Ring container: always vertically centred, right-aligned */
.bpp-kpi-rate-ring {
  position: absolute !important;
  right: clamp(6px, 1.5vw, 14px) !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

/* SVG ring — fluid size using vw so it scales with the card */
.bpp-ring-svg {
  width:  clamp(32px, 5.5vw, 60px) !important;
  height: clamp(32px, 5.5vw, 60px) !important;
}

/* Ring text — must scale with ring */
.bpp-ring-pct {
  font-size: clamp(.45rem, 1vw, .72rem) !important;
  font-weight: 800 !important;
}

/* Health Score card — no ring, just need text to fit */
.bpp-kpi-score { overflow: hidden !important; }

/* ── Tiny phones: icon hidden, text-only layout ── */
@media (max-width: 360px) {
  .bpp-kpi-icon { display: none !important; }
  .bpp-kpi-num,
  .bpp-num-score { font-size: clamp(.82rem, 5.5vw, 1rem) !important; }
  .bpp-kpi-savings {
    padding: clamp(8px,2vw,12px) clamp(40px,11vw,52px) clamp(8px,2vw,12px) clamp(8px,2vw,12px) !important;
  }
}

/* ═══════════════════════════════════════════════
   FIX 2 — BUDGET GRID: always 2×2, never 3-col
   Income Sources + Expense Tracker (row 1)
   Committed Savings + Active Investments (row 2)
   ═══════════════════════════════════════════════ */

/* Strict 2-column grid at ALL widths ≥600px */
.bpp-grid4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;      /* always 2-col */
  gap: clamp(10px, 2vw, 18px) !important;
  margin-bottom: clamp(12px, 2vw, 18px) !important;
}

/* Mobile ≤599px: single column */
@media (max-width: 599px) {
  .bpp-grid4 {
    grid-template-columns: 1fr !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   v5.5 PATCH — Ring beside "monthly" text, never covering amount
   Root cause: ring was position:absolute floating over the text.
   Fix: remove absolute, make it a normal flex child (align-self:flex-end)
   ════════════════════════════════════════════════════════════════ */

/* ── Savings card: no more extra right padding for ring ── */
.bpp-kpi-savings,
.bpp-kpi-savings-card {
  padding: clamp(10px, 2vw, 16px) !important;  /* equal all sides — ring is in flow now */
  align-items: flex-end !important;              /* all flex children align to bottom */
  overflow: visible !important;                  /* ring no longer needs clipping */
}

/* ── Icon: re-anchor to top so it doesn't drop to bottom ── */
.bpp-kpi-savings .bpp-kpi-icon {
  align-self: flex-start !important;
}

/* ── Text column: flex-1 so it fills space, pushing ring to the right ── */
.bpp-kpi-savings > div:nth-child(3) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* ── Ring: IN FLOW, aligned to bottom beside "monthly" ── */
.bpp-kpi-rate-ring {
  position: static !important;   /* OUT of absolute — back in flex flow */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  align-self: flex-end !important; /* aligns to bottom of card = beside "monthly" */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

/* ── Ring SVG — fluid size, no rotation needed (viewBox handles it) ── */
/* Keep the -90deg rotation for the stroke animation */
.bpp-ring-svg {
  width:  clamp(30px, 5vw, 52px) !important;
  height: clamp(30px, 5vw, 52px) !important;
  transform: rotate(-90deg) !important;
  display: block !important;
}

/* ── Percentage label: static, below/over ring ── */
/* Since ring is no longer absolute, ring-pct is its own child — layout inline */
.bpp-kpi-rate-ring {
  position: static !important;
}
/* The percentage text sits inside the ring-container as a sibling of the SVG */
.bpp-ring-pct {
  position: static !important;    /* no longer absolutely centred over SVG */
  transform: none !important;
  top: auto !important;
  left: auto !important;
  font-size: clamp(.5rem, 1.1vw, .72rem) !important;
  font-weight: 800 !important;
  color: var(--text3) !important;
  text-align: center !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  display: block !important;
  white-space: nowrap !important;
}

/* ── On very narrow phones (≤360px): shrink ring further ── */
@media (max-width: 360px) {
  .bpp-ring-svg {
    width:  26px !important;
    height: 26px !important;
  }
  .bpp-ring-pct { font-size: .48rem !important; }
}


/* ════════════════════════════════════════════════════════════════
   v5.6 PATCH — Ring: small, fixed 28px, absolute bottom-right
   beside "monthly" text, never covers the amount
   ════════════════════════════════════════════════════════════════ */

/* ── Savings card: normal equal padding, ring positioned inside it ── */
.bpp-kpi-savings,
.bpp-kpi-savings-card {
  padding: clamp(10px, 2vw, 16px) !important;
  position: relative !important;
  align-items: flex-start !important;   /* children align top */
  overflow: hidden !important;
}

/* ── Icon: top-aligned ── */
.bpp-kpi-savings .bpp-kpi-icon {
  align-self: flex-start !important;
  flex-shrink: 0 !important;
}

/* ── Text column: fills space, right padding reserves room for ring ── */
.bpp-kpi-savings > div:nth-child(3) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding-right: 36px !important;   /* 28px ring + 8px gap */
}
/* Amount text: never overflow */
.bpp-kpi-savings .bpp-kpi-num {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* ── Ring: absolute, small, bottom-right corner of card ── */
.bpp-kpi-rate-ring {
  position: absolute !important;
  right: clamp(6px, 1.5vw, 12px) !important;
  bottom: clamp(8px, 1.5vw, 14px) !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 1px !important;
}

/* ── Ring SVG: always 28px ── */
.bpp-ring-svg {
  width:  28px !important;
  height: 28px !important;
  transform: rotate(-90deg) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── Percentage text: centred over the SVG absolutely ── */
.bpp-ring-pct {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: .48rem !important;
  font-weight: 800 !important;
  color: var(--text3) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* ── Tiny phones ≤360px: ring 24px ── */
@media (max-width: 360px) {
  .bpp-ring-svg {
    width:  24px !important;
    height: 24px !important;
  }
  .bpp-ring-pct { font-size: .42rem !important; }
  .bpp-kpi-savings > div:nth-child(3) {
    padding-right: 30px !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   v5.7 PATCH — KPI amount never clips on any device
   Root cause: font too large for narrow 2-col card on small phones.
   Fix: font-size tied to card width (≈ half vw on mobile),
        overflow/ellipsis removed from kpi-num so text always shows.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Remove clip from ALL KPI numbers ── */
/* Amounts must ALWAYS be fully visible — no ellipsis anywhere */
.bpp-kpi-num,
.bpp-num-savings,
.bpp-num-score {
  white-space: normal !important;        /* allow wrap as last resort */
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}

/* ── 2. Savings card text column: no right-padding on mobile ──
   The ring is bottom-right absolute — text column just needs min-width:0 */
@media (max-width: 599px) {
  .bpp-kpi-savings > div:nth-child(3) {
    padding-right: 32px !important;   /* tight: 28px ring + 4px air */
  }
}

/* ── 3. Font size: tied to card width on every breakpoint ──
   Mobile (≤599px): cards are 2-col → each card ≈ 50vw - 20px
   The mono number needs room for "₹ 1,25,000" (9 chars ≈ 5.4em wide)
   so font-size ≤ card-width / 5.4
   card-width ≈ 50vw - 20px → max font ≈ (50vw - 20px) / 5.4 ≈ 9.3vw - 3.7px
   Use clamp to keep it readable but never overflowing.               */

/* All KPI numbers — base fluid size for mobile */
@media (max-width: 599px) {
  .bpp-kpi-num,
  .bpp-num-score {
    font-size: clamp(.68rem, 3.6vw, 1.05rem) !important;
    /* 3.6vw at 360px = 13px  → fits 77px text col ✓
       3.6vw at 430px = 15.5px → fits 93px text col ✓
       clamped to 1.05rem = 16.8px at 500px             */
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
  }
}

/* Small tablet / large phone (600–699px): 4-col, each card ≈ 25vw */
@media (min-width: 600px) and (max-width: 699px) {
  .bpp-kpi-num,
  .bpp-num-score {
    font-size: clamp(.8rem, 2.4vw, 1.25rem) !important;
  }
}

/* Tablet (700–1023px): 4-col, cards have more room */
@media (min-width: 700px) and (max-width: 1023px) {
  .bpp-kpi-num,
  .bpp-num-score {
    font-size: clamp(1rem, 2.2vw, 1.55rem) !important;
  }
}

/* Desktop (≥1024px): full size */
@media (min-width: 1024px) {
  .bpp-kpi-num,
  .bpp-num-score {
    font-size: clamp(1.3rem, 1.8vw, 1.9rem) !important;
    white-space: nowrap !important;   /* desktop has room — keep single line */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ── 4. Savings card amount specifically — same rules, explicitly ── */
@media (max-width: 599px) {
  .bpp-kpi-savings .bpp-kpi-num,
  .bpp-kpi-savings .bpp-num-savings {
    font-size: clamp(.68rem, 3.6vw, 1.05rem) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   v5.8 PATCH — Net Savings amount ALWAYS fully visible
   Root cause (measured):
     360px phone → card inner = 146px
     icon (26px) + gap (6px) = 32px eaten
     ring padding-right = 36px reserved
     amount space left = 78px
     "₹ 1,25,000" at JetBrains Mono needs ~86px → CLIPS
   Fix:
     1. Hide icon on savings card on mobile → frees 32px → 110px for amount
     2. Precise font clamp: 0.82rem at 360px → fits with 8px to spare
     3. Remove ellipsis — let it always show fully
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Mobile (≤599px): hide icon on savings card only to free space ── */
@media (max-width: 599px) {
  .bpp-kpi-savings .bpp-kpi-icon {
    display: none !important;
  }
  /* Without icon: text column gets full card width minus ring padding */
  .bpp-kpi-savings > div:nth-child(3) {
    padding-right: 36px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* ── 2. Net Savings amount — precise fluid font, never clips ── */
/* Available width without icon at 360px = 110px, needs ~86px at 0.82rem ✓
   Available width at 430px = (430-20-8)/2 - 20 - 36 = 145px → 1.1rem fits ✓ */
.bpp-kpi-savings .bpp-kpi-num,
.bpp-kpi-savings .bpp-num-savings {
  white-space: nowrap !important;
  overflow: visible !important;      /* NEVER clip the amount */
  text-overflow: clip !important;
  max-width: none !important;        /* remove any width cap */
  font-size: clamp(.78rem, 3.2vw, 1.9rem) !important;
}

/* Extra tight for very small phones */
@media (max-width: 380px) {
  .bpp-kpi-savings .bpp-kpi-num,
  .bpp-kpi-savings .bpp-num-savings {
    font-size: clamp(.72rem, 3.2vw, .85rem) !important;
    letter-spacing: -.03em !important;
  }
}

/* ── 3. Ensure ring stays bottom-right, never intrudes into text row ── */
/* Ring is absolute, bottom-right — text area is ABOVE it, not beside it */
@media (max-width: 599px) {
  .bpp-kpi-savings {
    padding-bottom: clamp(10px, 3vw, 14px) !important;
  }
  .bpp-kpi-rate-ring {
    bottom: clamp(6px, 1.5vw, 10px) !important;
    right: clamp(6px, 1.5vw, 10px) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   v5.7 PATCH — Net Savings amount no longer clips
   Root cause: padding-right:36px was reserved for the ring, but the
   ring sits at BOTTOM of card (bottom-anchored absolute). The amount
   is at the TOP. They never overlap — the reserve was wasting space.
   Fix: zero out that padding-right so amount gets the full column width.
   ════════════════════════════════════════════════════════════════ */

.bpp-kpi-savings > div:nth-child(3) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding-right: 0 !important;  /* ring is at bottom, amount is at top — no overlap */
}

/* Savings amount: same sizing rules as other KPI cards, no extra restriction */
.bpp-kpi-savings .bpp-kpi-num {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* ≤360px: also remove padding-right override from v5.6 */
@media (max-width: 360px) {
  .bpp-kpi-savings > div:nth-child(3) {
    padding-right: 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   v5.9 PATCH — 12-Fix UX Overhaul
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   FIX #1 — Primary Metric: Safe to Spend gets full-width hero
   ───────────────────────────────────────────────────────────────── */
.bpp-today-kpis {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: clamp(8px, 1.5vw, 12px) !important;
  margin-bottom: clamp(12px, 2vw, 18px) !important;
}
/* Primary tile spans full width — unmistakably the star */
.bpp-tkpi-primary {
  grid-column: 1 / -1 !important;
  background: var(--surface) !important;
  border: 2px solid var(--green) !important;
  border-radius: var(--r) !important;
  padding: clamp(14px, 2.5vw, 22px) clamp(16px, 3vw, 28px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
.bpp-tkpi-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,185,129,.05), transparent 60%);
  pointer-events: none;
}
.bpp-tkpi-primary .bpp-tkpi-label {
  font-size: clamp(.72rem, 1.8vw, .88rem) !important;
  font-weight: 800 !important;
  color: var(--green) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 4px !important;
}
.bpp-tkpi-primary .bpp-tkpi-val {
  font-size: clamp(1.6rem, 5vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}
.bpp-tkpi-primary .bpp-tkpi-sub {
  font-size: clamp(.65rem, 1.5vw, .76rem) !important;
  color: var(--text5) !important;
  margin-top: 4px !important;
}
/* Secondary tiles: smaller, subdued */
.bpp-tkpi-secondary {
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: clamp(10px, 1.8vw, 16px) !important;
  text-align: center !important;
}
.bpp-tkpi-secondary .bpp-tkpi-label {
  font-size: .65rem !important;
  font-weight: 700 !important;
  color: var(--text5) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 4px !important;
}
.bpp-tkpi-secondary .bpp-tkpi-val {
  font-size: clamp(.95rem, 2.5vw, 1.4rem) !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.02em !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX #3 — Visual Simplicity: 3-color system only
   ───────────────────────────────────────────────────────────────── */
/* Green = Safe, Orange = Warning, Red = Risk — enforced on banners */
.bpp-status-banner.stable    { border-left: 4px solid var(--green) !important; background: rgba(16,185,129,.05) !important; }
.bpp-status-banner.warning   { border-left: 4px solid var(--amber) !important; background: rgba(245,158,11,.05) !important; }
.bpp-status-banner.danger    { border-left: 4px solid var(--red)   !important; background: rgba(239,68,68,.05)  !important; }
.bpp-status-banner.stable  .bpp-status-banner-ico { color: var(--green) !important; }
.bpp-status-banner.warning .bpp-status-banner-ico { color: var(--amber) !important; }
.bpp-status-banner.danger  .bpp-status-banner-ico { color: var(--red)   !important; }

/* ─────────────────────────────────────────────────────────────────
   FIX #5 — FAB Popup Overlay
   ───────────────────────────────────────────────────────────────── */
.bpp-fab-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 9999;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.bpp-fab-overlay.open {
  display: flex;
  animation: bpp-fade-in .18s ease;
}
@keyframes bpp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.bpp-fab-popup {
  background: var(--surface);
  border-radius: var(--r) var(--r) 0 0;
  width: 100%;
  max-width: 520px;
  padding: 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  max-height: 90vh;
  overflow-y: auto;
  animation: bpp-slide-up .22s cubic-bezier(.4,0,.2,1);
}
@keyframes bpp-slide-up {
  from { transform: translateY(100%); opacity: .4; }
  to   { transform: translateY(0);    opacity: 1; }
}
.bpp-fab-popup-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 3vw, 20px) clamp(16px, 4vw, 24px);
  border-bottom: 1px solid var(--border);
}
.bpp-fab-popup-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.bpp-fab-popup-close {
  background: var(--surface2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t);
}
.bpp-fab-popup-close:hover { background: var(--red-lt); color: var(--red); }

.bpp-fab-popup-body {
  padding: clamp(16px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 14px);
}
.bpp-fab-amt-wrap {
  border: 2px solid var(--green) !important;
  border-radius: var(--r-sm) !important;
}
.bpp-fab-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  padding: clamp(10px, 2vw, 14px) 0;
  outline: none;
}
.bpp-fab-cat-wrap { position: relative; }
.bpp-fab-cat-input {
  width: 100%;
  border: 1.5px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--surface2);
  color: var(--text);
  font-size: .92rem;
  padding: clamp(9px, 1.8vw, 12px) clamp(10px, 2vw, 14px);
  outline: none;
  transition: border-color var(--t);
  box-sizing: border-box;
}
.bpp-fab-cat-input:focus { border-color: var(--green); }
/* Fix #6 — auto-suggest pill */
.bpp-fab-suggestion {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--amber);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: opacity .15s;
}
.bpp-fab-suggestion:hover { opacity: .85; }
.bpp-fab-chips { flex-wrap: wrap; gap: 6px; }
.bpp-fab-log-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-weight: 800;
  padding: clamp(12px, 2.5vw, 16px);
  cursor: pointer;
  width: 100%;
  transition: background var(--t), transform var(--t);
  margin-top: 4px;
  letter-spacing: -.01em;
}
.bpp-fab-log-btn:hover  { background: #059669; }
.bpp-fab-log-btn:active { transform: scale(.98); }

/* ─────────────────────────────────────────────────────────────────
   FIX #7 — Daily Reminder Banner
   ───────────────────────────────────────────────────────────────── */
.bpp-reminder-banner {
  position: fixed;
  top: clamp(12px, 3vw, 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 8888;
  background: var(--surface);
  border: 1.5px solid var(--amber);
  border-radius: var(--r);
  padding: clamp(10px, 2vw, 14px) clamp(14px, 3vw, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  max-width: calc(100vw - 32px);
  width: max-content;
  animation: bpp-slide-down .25s ease;
}
@keyframes bpp-slide-down {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bpp-reminder-ico { font-size: 1.2rem; flex-shrink: 0; }
.bpp-reminder-msg {
  font-size: clamp(.75rem, 2vw, .86rem);
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
}
.bpp-reminder-cta {
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: var(--r-xs);
  font-size: .76rem;
  font-weight: 800;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t);
  flex-shrink: 0;
}
.bpp-reminder-cta:hover { background: #D97706; }
.bpp-reminder-dismiss {
  background: none;
  border: none;
  color: var(--text5);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--t);
}
.bpp-reminder-dismiss:hover { color: var(--text); }
@media (max-width: 480px) {
  .bpp-reminder-msg { white-space: normal; }
  .bpp-reminder-banner { width: calc(100vw - 32px); }
}

/* ─────────────────────────────────────────────────────────────────
   FIX #8 — Streak toast styling
   ───────────────────────────────────────────────────────────────── */
.bpp-toast.streak {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: .9rem !important;
  box-shadow: 0 4px 20px rgba(245,158,11,.4) !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX #10 — Monthly comparison badge
   ───────────────────────────────────────────────────────────────── */
.bpp-month-compare {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-top: 8px;
}
.bpp-month-compare.better {
  background: rgba(16,185,129,.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,.25);
}
.bpp-month-compare.worse {
  background: rgba(239,68,68,.1);
  color: var(--red);
  border: 1px solid rgba(239,68,68,.2);
}

/* ─────────────────────────────────────────────────────────────────
   FIX #11 — Confetti canvas (fullscreen, pointer-events none)
   ───────────────────────────────────────────────────────────────── */
.bpp-confetti-canvas {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}


/* ════════════════════════════════════════════════════════════════
   v5.9.2 — Purchase tabs always 4-in-one-row on all screen sizes
   ════════════════════════════════════════════════════════════════ */
.bpp-purchase-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;        /* never wrap — all 4 in one row */
  gap: clamp(3px, 1vw, 6px) !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}
.bpp-ptabx {
  flex: 1 1 0 !important;             /* equal width — each tab gets 25% */
  min-width: 0 !important;
  text-align: center !important;
  padding: .38rem clamp(2px, 1.5vw, 10px) !important;
  font-size: clamp(.62rem, 2.8vw, .8rem) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ════════════════════════════════════════════════════════════════
   v5.9.4 — Reminder banner: in-flow below header (not fixed overlay)
   ════════════════════════════════════════════════════════════════ */
.bpp-reminder-banner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: clamp(10px, 2vw, 16px) !important;
  border-radius: var(--r-sm) !important;
  animation: bpp-banner-drop .25s ease !important;
}
@keyframes bpp-banner-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   v5.9.5 — Bigger primary metric + FAB as sole mobile entry point
   ════════════════════════════════════════════════════════════════ */

/* 1. Safe to Spend Today number — visually dominates all others */
.bpp-tkpi-primary .bpp-tkpi-val {
  font-size: clamp(2rem, 7vw, 3.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
  color: var(--text) !important;
}
/* Secondary tiles stay noticeably smaller */
.bpp-tkpi-secondary .bpp-tkpi-val {
  font-size: clamp(.85rem, 2.8vw, 1.3rem) !important;
  font-weight: 700 !important;
}

/* 2. Hide inline quick-add on mobile — FAB popup is the entry point */
@media (max-width: 680px) {
  .bpp-quick-add {
    display: none !important;
  }
}

/* FAB: show on all screen sizes, not just mobile */
.bpp-fab {
  display: flex !important;
}


/* ════════════════════════════════════════════════════════════════
   v5.9.7 — Tenure field fills full width on desktop
   Only Bike / Car / House panels have 4 fields — force 4-col grid
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #pt-bike  .bpp-pt-inputs,
  #pt-car   .bpp-pt-inputs,
  #pt-house .bpp-pt-inputs {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Tenure is always the 4th field — span all 3 columns */
  #pt-bike  .bpp-pt-inputs .bpp-pt-field:last-child,
  #pt-car   .bpp-pt-inputs .bpp-pt-field:last-child,
  #pt-house .bpp-pt-inputs .bpp-pt-field:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v6.0.0 — FAB: round circle, bottom-right, purple, mobile-only
             House savings plan styles
   ════════════════════════════════════════════════════════════════ */

/* ── FAB hidden on desktop — inline quick-add stays ── */
.bpp-fab {
  display: none !important;
}

/* ── Mobile-only (≤680px): round FAB bottom-right ── */
@media (max-width: 680px) {
  .bpp-fab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Round circle */
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: none !important;

    /* Bottom-right, above gesture bar */
    position: fixed !important;
    bottom: 28px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    z-index: 950 !important;

    /* Purple */
    background: var(--indigo) !important;
    color: #fff !important;

    /* Shadow */
    box-shadow: 0 4px 20px rgba(91,91,214,.5), 0 2px 8px rgba(0,0,0,.15) !important;
    transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s !important;
    overflow: visible !important;
  }

  .bpp-fab:hover {
    background: var(--indigo-d) !important;
    box-shadow: 0 6px 28px rgba(91,91,214,.6) !important;
    transform: scale(1.06) !important;
  }

  .bpp-fab:active {
    transform: scale(.92) !important;
    box-shadow: 0 2px 10px rgba(91,91,214,.35) !important;
  }

  /* Pulse ring */
  .bpp-fab-pulse {
    position: absolute !important;
    inset: -5px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(91,91,214,.5) !important;
    animation: bpp-fab-ring 2.6s ease-out infinite !important;
    pointer-events: none !important;
  }
  @keyframes bpp-fab-ring {
    0%   { transform: scale(1);    opacity: .65; }
    70%  { transform: scale(1.22); opacity: 0;   }
    100% { transform: scale(1.22); opacity: 0;   }
  }

  .bpp-fab svg {
    position: relative !important;
    flex-shrink: 0 !important;
  }

  /* Hide inline quick-add on mobile — FAB is the entry point */
  .bpp-quick-add {
    display: none !important;
  }
}

/* ── House Savings Plan styles ── */
.bpp-hs-plan {
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(99,102,241,.02)) !important;
  border: 1.5px solid rgba(99,102,241,.22) !important;
}
.bpp-hs-plan h4 { color: var(--indigo) !important; margin-bottom: 12px !important; }

.bpp-hs-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(99,102,241,.08);
  border-radius: var(--r-xs);
  margin-bottom: 12px;
}
.bpp-hs-lbl { font-size: .76rem; font-weight: 700; color: var(--text4); }
.bpp-hs-val { font-family: var(--font-mono); font-size: .95rem; font-weight: 800; color: var(--indigo); }

.bpp-hs-grid { margin-bottom: 8px; }
.bpp-hs-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: .77rem;
  align-items: center;
}
.bpp-hs-row:last-child { border-bottom: none; }
.bpp-hs-row-hd {
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--text5) !important;
  padding-bottom: 4px !important;
  border-bottom: 2px solid var(--border2) !important;
}
.bpp-hs-row span:first-child { color: var(--text4); }
.bpp-hs-row span:nth-child(2) strong { font-family: var(--font-mono); color: var(--text); font-size: .82rem; }
.bpp-hs-row span:nth-child(3) { font-family: var(--font-mono); color: var(--text3); font-size: .74rem; }

.bpp-hs-badge {
  font-size: .64rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.bpp-hs-easy { background: rgba(16,185,129,.12); color: var(--green); }
.bpp-hs-mod  { background: rgba(245,158,11,.12);  color: var(--amber); }
.bpp-hs-hard { background: rgba(239,68,68,.1);    color: var(--red);   }

.bpp-hs-note {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(99,102,241,.06);
  border-left: 3px solid var(--indigo);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: .75rem;
  color: var(--text3);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .bpp-hs-row { grid-template-columns: 1fr 1fr; gap: 4px; }
  .bpp-hs-row span:nth-child(3),
  .bpp-hs-row-hd span:nth-child(3) { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   v6.0.1 — FAB: pill with ➕ Add Expense text (mobile only)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .bpp-fab {
    /* Pill — not circle */
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 14px 24px !important;
    gap: 0 !important;                 /* label has ➕ built-in, no svg gap needed */

    /* Position: bottom-right, above gesture bar */
    bottom: 28px !important;
    right: 18px !important;
    left: auto !important;
    transform: none !important;

    font-size: .95rem !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
  }

  /* Hide the SVG + icon — ➕ emoji is in the label */
  .bpp-fab > svg {
    display: none !important;
  }

  .bpp-fab-label {
    position: relative !important;
    display: inline !important;
  }

  /* Pulse ring adapts to pill shape */
  .bpp-fab-pulse {
    inset: -5px !important;
    border-radius: 999px !important;
  }

  .bpp-fab:active {
    transform: scale(.96) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v6.0.2 — Progressive FAB reduction (WhatsApp-style)
            Pill → Circle with smooth 400ms transition
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── Base: always a fixed circle size underneath ── */
  .bpp-fab {
    /* Dimensions — pill starts wide, collapses to circle */
    width: auto !important;
    min-width: 56px !important;
    height: 56px !important;
    padding: 0 20px 0 16px !important;
    border-radius: 999px !important;
    gap: 8px !important;

    /* Position: bottom-right, above gesture bar */
    position: fixed !important;
    bottom: 28px !important;
    right: 18px !important;
    left: auto !important;
    transform: none !important;
    z-index: 950 !important;
    overflow: hidden !important;

    /* Purple */
    background: var(--indigo) !important;
    color: #fff !important;
    border: none !important;

    font-family: var(--font-body) !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;

    box-shadow: 0 4px 20px rgba(91,91,214,.5), 0 2px 8px rgba(0,0,0,.15) !important;

    /* THE KEY: smooth transition on all changing properties */
    transition:
      width 400ms cubic-bezier(.4,0,.2,1),
      padding 400ms cubic-bezier(.4,0,.2,1),
      border-radius 400ms cubic-bezier(.4,0,.2,1),
      box-shadow 250ms ease !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Expanded pill: SVG + label both visible ── */
  .bpp-fab svg {
    flex-shrink: 0 !important;
    opacity: 1 !important;
    transition: opacity 200ms ease !important;
    position: relative !important;
  }
  .bpp-fab-label {
    opacity: 1 !important;
    max-width: 140px !important;
    transition: opacity 200ms ease 100ms, max-width 400ms cubic-bezier(.4,0,.2,1) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
  }

  /* ── Collapsed circle: same height, square width, text fades out ── */
  .bpp-fab--collapsed {
    width: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
    box-shadow: 0 4px 20px rgba(91,91,214,.45), 0 2px 8px rgba(0,0,0,.12) !important;
  }
  .bpp-fab--collapsed .bpp-fab-label {
    opacity: 0 !important;
    max-width: 0 !important;
    transition: opacity 150ms ease, max-width 350ms cubic-bezier(.4,0,.2,1) !important;
  }

  /* ── Hover: expand back (desktop-style — also fires on long-press preview) ── */
  .bpp-fab--collapsed:hover {
    width: auto !important;
    padding: 0 20px 0 16px !important;
    border-radius: 999px !important;
    gap: 8px !important;
  }
  .bpp-fab--collapsed:hover .bpp-fab-label {
    opacity: 1 !important;
    max-width: 140px !important;
  }

  /* ── Active press ── */
  .bpp-fab:active {
    transform: scale(.93) !important;
    box-shadow: 0 2px 10px rgba(91,91,214,.35) !important;
  }

  /* ── Pulse ring: adapts to current border-radius via inheritance ── */
  .bpp-fab-pulse {
    position: absolute !important;
    inset: -5px !important;
    border-radius: inherit !important;     /* follows pill ↔ circle shape */
    border: 2px solid rgba(91,91,214,.5) !important;
    animation: bpp-fab-ring2 2.8s ease-out infinite !important;
    pointer-events: none !important;
    transition: border-radius 400ms cubic-bezier(.4,0,.2,1) !important;
  }
  @keyframes bpp-fab-ring2 {
    0%   { transform: scale(1);    opacity: .6; }
    65%  { transform: scale(1.2);  opacity: 0;  }
    100% { transform: scale(1.2);  opacity: 0;  }
  }
}

/* ════════════════════════════════════════════════════════════════
   v6.0.3 — Fix 1: FAB + icon visible in circle state
            Fix 2: Quick-add Amount/Category/Button same height
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 1: SVG ➕ visible in collapsed circle, hidden in expanded pill ── */
@media (max-width: 680px) {
  /* Expanded pill: hide SVG, show label emoji */
  .bpp-fab:not(.bpp-fab--collapsed) > svg {
    display: none !important;
  }
  /* Collapsed circle: show SVG white ➕, hide label */
  .bpp-fab--collapsed > svg {
    display: block !important;
    opacity: 1 !important;
    color: #fff !important;
    stroke: #fff !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* ── Fix 2: Amount wrap same height as category input and Log button ── */
.bpp-qa-amount-wrap {
  height: 44px !important;
}
.bpp-qa-input {
  height: 100% !important;
  font-family: var(--font-mono) !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  padding-left: 0 !important;
  padding-right: 8px !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  color: var(--text) !important;
  flex: 1 !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   v6.0.4 — FAB: SVG + shown in both pill and circle, always white
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Always show the SVG — it's the + icon in both states */
  .bpp-fab > svg,
  .bpp-fab--collapsed > svg,
  .bpp-fab:not(.bpp-fab--collapsed) > svg {
    display: block !important;
    opacity: 1 !important;
    color: #fff !important;
    stroke: #fff !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  /* Pill: gap between + and text */
  .bpp-fab:not(.bpp-fab--collapsed) {
    gap: 7px !important;
  }
  /* Circle: no gap, SVG centred */
  .bpp-fab--collapsed {
    gap: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v6.0.5 — FAB pill: hide + SVG next to "Add Expense" text
            Circle: keep + SVG, force white
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Pill state: hide the + SVG — text alone is clean */
  .bpp-fab:not(.bpp-fab--collapsed) > svg {
    display: none !important;
  }
  /* Circle state: show + SVG, force white regardless of inheritance */
  .bpp-fab--collapsed > svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    color: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v6.0.6 — FAB pill: show white + SVG beside "Add Expense"
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .bpp-fab:not(.bpp-fab--collapsed) > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
  }
  .bpp-fab:not(.bpp-fab--collapsed) {
    gap: 7px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v6.1.0 — Post-log feedback · Weekly insight · Quick amounts
            Share nudge · Category pre-select
   ════════════════════════════════════════════════════════════════ */

/* ── Post-log emotional feedback bar ── */
.bpp-post-log-feedback {
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
  margin: 8px 0 4px;
  animation: bpp-in .3s var(--ease);
  border-left: 3px solid transparent;
}
.bpp-post-log-feedback strong { font-weight: 800; }
.bpp-post-log-feedback em { font-style: italic; color: var(--green); }
.bpp-post-log-feedback.good    { background: rgba(16,185,129,.08);  border-color: var(--green);  color: var(--text); }
.bpp-post-log-feedback.notice  { background: rgba(245,158,11,.08);  border-color: var(--amber);  color: var(--text); }
.bpp-post-log-feedback.warning { background: rgba(245,158,11,.12);  border-color: var(--amber);  color: #b45309; }
.bpp-post-log-feedback.danger  { background: rgba(239,68,68,.08);   border-color: var(--red);    color: #dc2626; }

/* ── Quick amount buttons in FAB popup ── */
.bpp-quick-amounts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}
.bpp-qamt {
  flex: 1;
  min-width: 0;
  padding: 7px 4px;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--indigo);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform .15s;
  text-align: center;
  white-space: nowrap;
}
.bpp-qamt:hover  { background: var(--indigo-lt); border-color: var(--indigo); }
.bpp-qamt:active { transform: scale(.95); }
.bpp-qamt.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* ── Weekly insight card ── */
.bpp-weekly-insight {
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(99,102,241,.02));
  border: 1.5px solid rgba(99,102,241,.18);
  border-radius: var(--r-sm);
  animation: bpp-in .3s var(--ease);
}
.bpp-wi-title {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--indigo);
  margin-bottom: 10px;
}
.bpp-wi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.bpp-wi-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
}
.bpp-wi-lbl {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text4);
}
.bpp-wi-val {
  font-family: var(--font-mono);
  font-size: .92rem;
  font-weight: 800;
  color: var(--text);
}
.bpp-wi-val small { font-size: .62rem; color: var(--text4); font-weight: 600; }
.bpp-wi-row {
  font-size: .78rem;
  color: var(--text3);
  padding: 4px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  line-height: 1.4;
}
.bpp-wi-row strong { color: var(--text); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   v6.1.5 — Safe-to-Spend primary tile live colour states
   ════════════════════════════════════════════════════════════════ */
.bpp-tkpi-primary { transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; }

/* Default / under 75% spent — green */
.bpp-tkpi-primary.bpp-tkpi-state-ok {
  background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(16,185,129,.04)) !important;
  border-color: rgba(16,185,129,.35) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.08) !important;
}
.bpp-tkpi-primary.bpp-tkpi-state-ok .bpp-tkpi-val {
  color: var(--green) !important;
}

/* 75–99% spent — orange warning */
.bpp-tkpi-primary.bpp-tkpi-state-warn {
  background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(245,158,11,.04)) !important;
  border-color: rgba(245,158,11,.4) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.1) !important;
}
.bpp-tkpi-primary.bpp-tkpi-state-warn .bpp-tkpi-val {
  color: var(--amber) !important;
}

/* Over budget — red */
.bpp-tkpi-primary.bpp-tkpi-state-danger {
  background: linear-gradient(135deg, rgba(239,68,68,.1), rgba(239,68,68,.04)) !important;
  border-color: rgba(239,68,68,.4) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
  animation: bpp-danger-pulse 1.8s ease-in-out infinite !important;
}
.bpp-tkpi-primary.bpp-tkpi-state-danger .bpp-tkpi-val {
  color: var(--red) !important;
}
@keyframes bpp-danger-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,.2); }
}

/* ════════════════════════════════════════════════════════════════
   v6.2.0 — What Should I Do Now · Multi-Streak
            2026 Goals · Year-over-Year Comparison
   ════════════════════════════════════════════════════════════════ */

/* ── What Should I Do Now ── */
.bpp-action-now {
  margin: 10px 0 6px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1.5px solid rgba(99,102,241,.15);
  animation: bpp-in .3s var(--ease);
}
.bpp-action-now-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(99,102,241,.1), rgba(99,102,241,.04));
  border-bottom: 1px solid rgba(99,102,241,.12);
}
.bpp-action-now-ico  { font-size: 1rem; }
.bpp-action-now-title { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--indigo); }
.bpp-action-now-body { display: flex; flex-direction: column; gap: 0; }
.bpp-action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  font-size: .82rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.bpp-action-item:last-child { border-bottom: none; }
.bpp-action-ico  { flex-shrink: 0; font-size: .95rem; margin-top: 1px; }
.bpp-action-text strong { font-weight: 800; }
.bpp-action-good    { background: rgba(16,185,129,.05);  color: var(--text); }
.bpp-action-notice  { background: rgba(245,158,11,.06);  color: var(--text); }
.bpp-action-warning { background: rgba(245,158,11,.1);   color: #92400e; }
.bpp-action-danger  { background: rgba(239,68,68,.08);   color: #991b1b; }

/* ── Multi-Streak System ── */
.bpp-streak-sys {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.bpp-streak-sys-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-xs);
  transition: border-color var(--t);
}
.bpp-streak-sys-item:hover { border-color: var(--indigo); }
.bpp-ss-ico  { font-size: 1.2rem; flex-shrink: 0; }
.bpp-ss-info { display: flex; flex-direction: column; min-width: 0; }
.bpp-ss-val  { font-family: var(--font-mono); font-size: .95rem; font-weight: 800; color: var(--text); }
.bpp-ss-lbl  { font-size: .65rem; color: var(--text4); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .bpp-streak-sys-item { min-width: calc(50% - 4px); }
}

/* ── Goals Section ── */
.bpp-goal-summary {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(99,102,241,.02));
  border: 1.5px solid rgba(99,102,241,.18);
  border-radius: var(--r-sm);
  padding: 16px;
  margin-bottom: 14px;
}
.bpp-goal-sum-title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--indigo); margin-bottom: 12px;
}
.bpp-goal-sum-stats {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.bpp-goal-sum-stat {
  flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; background: var(--surface); border-radius: var(--r-xs); border: 1px solid var(--border);
}
.bpp-goal-sum-val { font-family: var(--font-mono); font-size: 1rem; font-weight: 800; color: var(--text); }
.bpp-goal-sum-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text4); }
.bpp-goal-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
}
.bpp-goal-badge-ok   { background: rgba(16,185,129,.15); color: #065f46; }
.bpp-goal-badge-warn { background: rgba(245,158,11,.15);  color: #92400e; }
.bpp-goal-badge-crit { background: rgba(239,68,68,.12);   color: #991b1b; }

.bpp-goal-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.bpp-goal-empty { text-align: center; padding: 24px; color: var(--text4); font-size: .84rem; }

.bpp-goal-card {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border2);
  background: var(--surface);
  animation: bpp-in .25s var(--ease);
}
.bpp-goal-card-on-track { border-color: rgba(16,185,129,.3); }
.bpp-goal-card-behind   { border-color: rgba(245,158,11,.35); }
.bpp-goal-card-critical { border-color: rgba(239,68,68,.35); }

.bpp-goal-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bpp-goal-card-name { font-size: .88rem; font-weight: 800; color: var(--text); }
.bpp-goal-card-nums { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bpp-goal-num-item { display: flex; flex-direction: column; gap: 1px; }
.bpp-goal-num-lbl  { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text4); font-weight: 700; }
.bpp-goal-num-val  { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; color: var(--text); }

.bpp-goal-bar-wrap { height: 8px; background: var(--border2); border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.bpp-goal-bar { height: 100%; background: var(--indigo); border-radius: 999px; transition: width .5s var(--ease); }
.bpp-goal-card-on-track .bpp-goal-bar { background: var(--green); }
.bpp-goal-card-behind   .bpp-goal-bar { background: var(--amber); }
.bpp-goal-card-critical .bpp-goal-bar { background: var(--red); }
.bpp-goal-bar-pct { font-size: .7rem; font-weight: 800; color: var(--text4); margin-bottom: 6px; }
.bpp-goal-pace { font-size: .78rem; color: var(--text3); line-height: 1.4; margin-bottom: 10px; }
.bpp-goal-pace strong { color: var(--text); font-weight: 700; }

.bpp-goal-card-actions { display: flex; gap: 8px; }
.bpp-goal-edit-btn {
  flex: 1; padding: 7px 12px; background: var(--surface2); border: 1.5px solid var(--border2);
  border-radius: var(--r-xs); font-size: .78rem; font-weight: 700; color: var(--indigo);
  cursor: pointer; transition: background var(--t), border-color var(--t);
}
.bpp-goal-edit-btn:hover { background: var(--indigo-lt); border-color: var(--indigo); }
.bpp-goal-del-btn {
  width: 34px; height: 34px; background: transparent; border: 1.5px solid var(--border2);
  border-radius: var(--r-xs); font-size: .8rem; color: var(--text4); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.bpp-goal-del-btn:hover { background: rgba(239,68,68,.1); color: var(--red); border-color: var(--red); }

.bpp-goal-add-btn {
  width: 100%; padding: 11px; border: 2px dashed var(--border2); border-radius: var(--r-sm);
  background: transparent; color: var(--indigo); font-size: .84rem; font-weight: 700;
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.bpp-goal-add-btn:hover { border-color: var(--indigo); background: var(--indigo-lt); }

.bpp-goal-form {
  margin-top: 12px; padding: 16px; background: var(--surface2);
  border: 1.5px solid var(--border2); border-radius: var(--r-sm); animation: bpp-in .2s var(--ease);
}
.bpp-goal-form-title { font-size: .88rem; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.bpp-goal-form-row   { margin-bottom: 10px; }
.bpp-goal-form-lbl   { display: block; font-size: .72rem; font-weight: 700; color: var(--text4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bpp-goal-form-input { width: 100%; }
.bpp-goal-form-btns  { display: flex; gap: 8px; margin-top: 12px; }
.bpp-goal-form-save {
  flex: 1; padding: 10px; background: var(--indigo); color: #fff; border: none;
  border-radius: var(--r-xs); font-weight: 800; font-size: .84rem; cursor: pointer;
  transition: background var(--t);
}
.bpp-goal-form-save:hover { background: var(--indigo-d); }
.bpp-goal-form-cancel {
  padding: 10px 16px; background: var(--surface); border: 1.5px solid var(--border2);
  border-radius: var(--r-xs); font-weight: 700; font-size: .84rem; color: var(--text3); cursor: pointer;
  transition: background var(--t);
}
.bpp-goal-form-cancel:hover { background: var(--border2); }

/* ── Year-over-Year Comparison ── */
.bpp-yoy-header {
  margin-bottom: 14px;
}
.bpp-yoy-hdr-title { font-size: .82rem; font-weight: 800; color: var(--text); }
.bpp-yoy-inputs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px;
}
.bpp-yoy-input-group { display: flex; flex-direction: column; gap: 4px; }
.bpp-yoy-input-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text4); }

.bpp-yoy-table { display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--border2); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 12px; }
.bpp-yoy-empty { padding: 20px; text-align: center; color: var(--text4); font-size: .82rem; }
.bpp-yoy-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  flex-wrap: wrap;
}
.bpp-yoy-row:last-child { border-bottom: none; }
.bpp-yoy-row:nth-child(even) { background: var(--surface2); }
.bpp-yoy-row-label { font-size: .82rem; font-weight: 800; color: var(--text); min-width: 110px; }
.bpp-yoy-row-vals  { display: flex; align-items: center; gap: 16px; flex: 1; flex-wrap: wrap; }
.bpp-yoy-yr { display: flex; flex-direction: column; gap: 1px; }
.bpp-yoy-yr-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text4); font-weight: 700; }
.bpp-yoy-yr-val { font-family: var(--font-mono); font-size: .88rem; font-weight: 700; color: var(--text); }
.bpp-yoy-diff { font-size: .78rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.bpp-yoy-diff-good    { background: rgba(16,185,129,.12); color: #065f46; }
.bpp-yoy-diff-bad     { background: rgba(239,68,68,.1);   color: #991b1b; }
.bpp-yoy-diff-neutral { background: var(--border2);       color: var(--text4); }

.bpp-yoy-insight {
  padding: 12px 16px; border-radius: var(--r-xs); font-size: .82rem;
  line-height: 1.5; font-weight: 500; border-left: 3px solid transparent;
}
.bpp-yoy-insight-good { background: rgba(16,185,129,.07); border-color: var(--green); color: var(--text); }
.bpp-yoy-insight-warn { background: rgba(245,158,11,.09); border-color: var(--amber); color: #92400e; }

/* ════════════════════════════════════════════════════════════════
   DUAL DASHBOARD — Mode Bar + Variable Dashboard
   ════════════════════════════════════════════════════════════════ */

/* ── TOP MODE BAR ── */
.bpp-modebar {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border2);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.bpp-modebar-inner {
  display: flex; align-items: center; gap: 14px;
  max-width: 1360px; margin: 0 auto;
  padding: 10px 24px;
}
.bpp-modebar-label {
  font-size: .62rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text4); white-space: nowrap;
}
.bpp-modebar-btns { display: flex; }
.bpp-mb-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 20px; font-size: .83rem; font-weight: 700;
  border: 1.5px solid var(--border2);
  background: var(--surface2); color: var(--text3);
  cursor: pointer; transition: all .18s;
}
.bpp-mb-btn:first-child { border-radius: 8px 0 0 8px; }
.bpp-mb-btn:last-child  { border-radius: 0 8px 8px 0; border-left: none; }
.bpp-mb-btn svg { stroke: currentColor; flex-shrink: 0; }
.bpp-mb-btn.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.bpp-mb-btn:not(.active):hover { background: rgba(99,102,241,.08); color: var(--indigo); border-color: var(--indigo); }

@media (max-width:480px) {
  .bpp-modebar-inner { padding: 8px 14px; gap: 8px; }
  .bpp-mb-btn { padding: 8px 12px; font-size: .78rem; }
  .bpp-modebar-label { display: none; }
}

/* ════════════════════════════════════════
   VARIABLE DASHBOARD
   ════════════════════════════════════════ */

/* 2. Earnings Hero */
.bppv-hero {
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 55%, #0ea5e9 100%);
  border-radius: var(--r); padding: clamp(18px,4vw,28px);
  color: #fff; margin-bottom: 14px; position: relative; overflow: hidden;
}
.bppv-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 10%, rgba(255,255,255,.12) 0%, transparent 55%);
  pointer-events: none;
}
.bppv-hero-top { margin-bottom: 16px; }
.bppv-greet { font-size: clamp(1.1rem,3vw,1.45rem); font-weight: 900; margin-bottom: 3px; }
.bppv-hero-tag { font-size: .76rem; opacity: .72; font-style: italic; }

.bppv-kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; }
.bppv-kpi { text-align: center; background: rgba(255,255,255,.11); border-radius: 8px; padding: 10px 6px; }
.bppv-kpi-center { background: rgba(255,255,255,.2); }
.bppv-kpi-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; font-weight: 700; margin-bottom: 4px; }
.bppv-kpi-val { font-size: clamp(.88rem,2.8vw,1.12rem); font-weight: 900; font-family: var(--font-mono); }
.bppv-kpi-sub { font-size: .6rem; opacity: .68; margin-top: 2px; }

.bppv-hero-btns { display: flex; gap: 10px; margin-bottom: 12px; }
.bppv-btn-primary, .bppv-btn-secondary {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 14px; border-radius: 999px;
  font-weight: 800; font-size: .87rem; cursor: pointer; border: none;
  transition: all .2s;
}
.bppv-btn-primary { background: #fff; color: #0369a1; }
.bppv-btn-primary:hover { background: #e0f2fe; transform: translateY(-1px); }
.bppv-btn-secondary { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.bppv-btn-secondary:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }

/* Income log form */
.bppv-log-form {
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 10px; padding: 16px; backdrop-filter: blur(6px);
}
.bppv-lf-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bppv-lf-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 110px; }
.bppv-lf-amt-field { flex: 0 1 130px; }
.bppv-lf-date-field { flex: 0 1 140px; }
.bppv-lf-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.bppv-lf-inp {
  width: 100%; padding: 9px 11px; background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 7px;
  color: #fff; font-size: .88rem; font-weight: 700; outline: none;
  box-sizing: border-box; transition: border-color .18s;
}
.bppv-lf-inp::placeholder { opacity: .5; font-weight: 400; }
.bppv-lf-inp:focus { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.22); }
.bppv-lf-amt { font-family: var(--font-mono); font-size: 1.05rem !important; padding-left: 28px !important; }
.bppv-lf-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.bppv-lf-save {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; background: #fff; color: #0369a1;
  border: none; border-radius: 999px; font-weight: 800; font-size: .86rem; cursor: pointer;
  min-width: 120px;
}
.bppv-lf-zero {
  padding: 10px 14px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
}
.bppv-lf-cancel { padding: 10px; background: none; border: none; color: rgba(255,255,255,.6); font-size: .78rem; cursor: pointer; }

/* 3. Cash Flow */
.bppv-cf {
  background: var(--surface); border: 1.5px solid var(--border2);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.bppv-cf-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.bppv-cf-title { font-size: .88rem; font-weight: 800; color: var(--text); }
.bppv-cf-stab { display: flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--text3); }
.bppv-stab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); display: inline-block; flex-shrink: 0; transition: background .3s; }
.bppv-dot-high   { background: var(--green) !important; }
.bppv-dot-medium { background: var(--amber) !important; }
.bppv-dot-low    { background: var(--red)   !important; }
.bppv-cf-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.bppv-cf-tile { text-align: center; padding: 12px 6px; background: var(--surface2); border-radius: 8px; }
.bppv-cf-tile-ico { font-size: 1.2rem; margin-bottom: 5px; }
.bppv-cf-tile-val { font-size: clamp(.82rem,2.5vw,1.02rem); font-weight: 900; font-family: var(--font-mono); color: var(--text); margin-bottom: 2px; }
.bppv-cf-tile-lbl { font-size: .6rem; color: var(--text4); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bppv-cf-alert { margin-top: 12px; padding: 9px 13px; border-radius: 8px; font-size: .8rem; font-weight: 600; }
.bppv-cf-alert.danger  { background: rgba(220,38,38,.1);  color: var(--red); }
.bppv-cf-alert.warning { background: rgba(217,119,6,.1); color: var(--amber); }

/* 4. Daily Tracker */
.bppv-tabs { display: flex; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--border2); margin-bottom: 14px; }
.bppv-tab { flex: 1; padding: 10px 14px; background: var(--surface2); border: none; font-size: .82rem; font-weight: 700; color: var(--text4); cursor: pointer; transition: all .18s; }
.bppv-tab.active { background: var(--indigo); color: #fff; }
.bppv-empty { color: var(--text4); font-size: .82rem; padding: 12px 0; text-align: center; margin: 0; }
.bppv-log-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); gap: 8px; }
.bppv-log-row:last-child { border-bottom: none; }
.bppv-log-row.bppv-log-zero { opacity: .6; }
.bppv-log-date { font-size: .78rem; font-weight: 700; color: var(--text3); white-space: nowrap; }
.bppv-today-tag { background: var(--indigo); color: #fff; font-size: .58rem; padding: 1px 5px; border-radius: 999px; margin-left: 4px; vertical-align: middle; font-weight: 800; }
.bppv-log-src  { font-size: .74rem; color: var(--text4); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bppv-log-cat  { font-size: .8rem; font-weight: 600; color: var(--text2); flex: 1; }
.bppv-log-amt  { font-family: var(--font-mono); font-weight: 800; font-size: .88rem; white-space: nowrap; }
.bppv-pos  { color: var(--green); }
.bppv-zero { color: var(--text4); font-style: italic; }
.bppv-exp  { color: var(--red); }

/* 5. Safe Spend */
.bppv-safe-display { text-align: center; padding: 20px 0 14px; }
.bppv-safe-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text4); font-weight: 700; margin-bottom: 6px; }
.bppv-safe-amount { font-size: clamp(2rem,8vw,3.2rem); font-weight: 900; font-family: var(--font-mono); color: var(--green); line-height: 1; margin-bottom: 6px; transition: color .3s; }
.bppv-safe-hint { font-size: .76rem; color: var(--text4); }
.bppv-safe-formula { background: var(--surface2); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.bppv-sf-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: .8rem; }
.bppv-sf-key { color: var(--text3); font-weight: 600; }
.bppv-sf-val { font-family: var(--font-mono); font-weight: 800; color: var(--text); }
.bppv-sf-minus .bppv-sf-val { color: var(--red); }
.bppv-safe-inputs { display: flex; flex-direction: column; gap: 10px; }
.bppv-inp-grp { display: flex; flex-direction: column; gap: 5px; }
.bppv-inp-lbl { font-size: .72rem; font-weight: 700; color: var(--text3); }
.bppv-inp {
  width: 100%; padding: 10px 12px 10px 34px;
  border: 1.5px solid var(--border2); border-radius: 8px;
  font-size: .9rem; font-weight: 700; color: var(--text);
  background: var(--surface); box-sizing: border-box;
  outline: none; transition: border-color .2s;
}
.bppv-inp:focus { border-color: var(--indigo); }

/* 6. Stability */
.bppv-stab-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.bppv-stat { text-align: center; padding: 14px 8px; border-radius: 8px; background: var(--surface2); }
.bppv-stat-best { border-top: 3px solid var(--green); }
.bppv-stat-avg  { border-top: 3px solid var(--indigo); }
.bppv-stat-low  { border-top: 3px solid var(--amber); }
.bppv-stat-ico  { font-size: 1.15rem; margin-bottom: 5px; }
.bppv-stat-val  { font-size: clamp(.85rem,2.5vw,1.02rem); font-weight: 900; font-family: var(--font-mono); color: var(--text); }
.bppv-stat-lbl  { font-size: .62rem; color: var(--text4); font-weight: 700; text-transform: uppercase; margin-top: 3px; }
.bppv-stat-date { font-size: .63rem; color: var(--text5,#8496B4); margin-top: 2px; }
.bppv-chart-hd  { font-size: .7rem; font-weight: 700; color: var(--text4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.bppv-bars30    { display: flex; align-items: flex-end; height: 60px; gap: 2px; margin-bottom: 14px; }
.bppv-b30-col   { flex: 1; display: flex; align-items: flex-end; height: 100%; cursor: default; }
.bppv-b30       { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; transition: height .4s; }
.bppv-b30-none   { background: var(--border); }
.bppv-b30-zero   { background: rgba(220,38,38,.25); }
.bppv-b30-normal { background: rgba(99,102,241,.25); }
.bppv-b30-high   { background: rgba(16,185,129,.4); }
.bppv-b30-col.tod .bppv-b30 { background: var(--indigo); }
.bppv-cons-row  { display: flex; align-items: center; gap: 10px; }
.bppv-cons-lbl  { font-size: .74rem; font-weight: 700; color: var(--text3); white-space: nowrap; }
.bppv-cons-track { flex: 1; height: 8px; background: var(--border2); border-radius: 999px; overflow: hidden; }
.bppv-cons-fill  { height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); border-radius: 999px; transition: width .6s; }
.bppv-cons-val   { font-size: .82rem; font-weight: 900; font-family: var(--font-mono); color: var(--indigo); white-space: nowrap; }

/* 7. Flexible Budget */
.bppv-fb-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); gap: 12px; }
.bppv-fb-card { background: var(--surface2); border: 1.5px solid var(--border2); border-radius: 10px; padding: 14px 16px; }
.bppv-fb-ico  { font-size: 1.3rem; margin-bottom: 8px; }
.bppv-fb-lbl  { display: block; font-size: .78rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.bppv-fb-lbl small { display: block; font-size: .64rem; color: var(--text4); font-weight: 400; margin-top: 2px; }
.bppv-fb-bar-wrap { height: 5px; background: var(--border2); border-radius: 999px; overflow: hidden; margin: 7px 0 5px; }
.bppv-fb-bar      { height: 100%; background: var(--indigo); border-radius: 999px; transition: width .4s; }
.bppv-fb-bar.over { background: var(--red); }
.bppv-fb-status   { font-size: .7rem; color: var(--text4); margin-top: 4px; }
.bppv-slider-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bppv-slider      { flex: 1; accent-color: var(--indigo); cursor: pointer; }
.bppv-slider-val  { font-size: .88rem; font-weight: 900; color: var(--indigo); font-family: var(--font-mono); min-width: 34px; }

/* 8. Emergency Buffer */
.bppv-emg-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width:480px) { .bppv-emg-inputs { grid-template-columns: 1fr; } }
.bppv-emg-status {}
.bppv-emg-target-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bppv-emg-lbl    { font-size: .8rem; font-weight: 700; color: var(--text3); }
.bppv-emg-target { font-size: 1rem; font-weight: 900; font-family: var(--font-mono); color: var(--text); }
.bppv-emg-track  { height: 10px; background: var(--border2); border-radius: 999px; overflow: hidden; margin-bottom: 7px; }
.bppv-emg-fill   { height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); border-radius: 999px; transition: width .6s; }
.bppv-emg-meta   { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text4); font-weight: 600; }

/* 9. Suggestions */
.bppv-sugg { display: flex; gap: 12px; padding: 12px 14px; border-radius: 8px; margin-bottom: 8px; align-items: flex-start; }
.bppv-sugg:last-child { margin-bottom: 0; }
.bppv-sugg-positive { background: rgba(16,185,129,.1);  border: 1px solid rgba(16,185,129,.15); }
.bppv-sugg-warning  { background: rgba(217,119,6,.1);   border: 1px solid rgba(217,119,6,.15); }
.bppv-sugg-tip      { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.15); }
.bppv-sugg-ico  { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.bppv-sugg-msg  { font-size: .82rem; color: var(--text); font-weight: 600; line-height: 1.55; }
.bppv-sugg-msg strong { font-weight: 800; }

/* 10. Goals */
.bppv-goal-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bppv-starter {
  padding: 8px 16px; background: var(--surface2); border: 1.5px solid var(--border2);
  border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--text);
  cursor: pointer; transition: all .18s;
}
.bppv-starter:hover { background: rgba(99,102,241,.1); border-color: var(--indigo); color: var(--indigo); }
.bppv-add-goal {
  width: 100%; padding: 10px; background: none;
  border: 1.5px dashed var(--border2); border-radius: 8px;
  font-size: .82rem; font-weight: 700; color: var(--text4); cursor: pointer;
  transition: all .18s; margin-bottom: 12px;
}
.bppv-add-goal:hover { border-color: var(--indigo); color: var(--indigo); }
.bppv-goal-form {
  background: var(--surface2); border-radius: 10px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
}
.bppv-gf-btns  { display: flex; gap: 8px; }
.bppv-gf-save  { flex: 1; padding: 10px; background: var(--indigo); color: #fff; border: none; border-radius: 8px; font-weight: 800; cursor: pointer; }
.bppv-gf-cancel { padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--border2); border-radius: 8px; font-weight: 700; cursor: pointer; color: var(--text4); }
.bppv-goal-card { background: var(--surface2); border: 1.5px solid var(--border2); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; position: relative; }
.bppv-gc-hd   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bppv-gc-name { font-size: .86rem; font-weight: 800; color: var(--text); flex: 1; }
.bppv-gc-pct  { font-size: .86rem; font-weight: 900; color: var(--indigo); font-family: var(--font-mono); }
.bppv-gc-del  { background: none; border: none; font-size: .72rem; color: var(--text5,#8496B4); cursor: pointer; padding: 2px 5px; }
.bppv-gc-del:hover { color: var(--red); }
.bppv-gc-track { height: 7px; background: var(--border2); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.bppv-gc-fill  { height: 100%; background: linear-gradient(90deg, var(--indigo), #7C3AED); border-radius: 999px; transition: width .5s; }
.bppv-gc-vals  { font-size: .72rem; color: var(--text4); font-family: var(--font-mono); }

/* 11. Pattern Insights */
.bppv-wk-hd   { font-size: .72rem; font-weight: 700; color: var(--text4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.bppv-wk-hint { font-size: .65rem; font-weight: 400; color: var(--text5,#8496B4); margin-left: 6px; }
.bppv-wk-bars { display: flex; gap: 6px; align-items: flex-end; height: 90px; margin-bottom: 14px; padding-bottom: 4px; border-bottom: 1.5px solid var(--border); }
.bppv-wk-col  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bppv-wk-bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.bppv-wk-bar  { width: 100%; min-height: 3px; background: rgba(99,102,241,.18); border-radius: 4px 4px 0 0; transition: height .5s; }
.bppv-wk-best .bppv-wk-bar { background: var(--indigo); }
.bppv-wk-day  { font-size: .62rem; font-weight: 700; color: var(--text4); }
.bppv-wk-val  { font-size: .58rem; color: var(--text5,#8496B4); }
.bppv-insight { background: var(--surface2); border-radius: 8px; padding: 11px 14px; font-size: .82rem; color: var(--text); margin-bottom: 8px; line-height: 1.55; }
.bppv-insight strong { font-weight: 800; color: var(--indigo); }

/* Variable FAB */
.bpp-fab-var { display: none; }
#bpp-dash-variable .bpp-fab-var { display: flex; }


/* ════════════════════════════════════════════════════════════════
   v7.0 — THREE-PAGE ARCHITECTURE
   Navbar · Home Page · Shared Utilities
   ════════════════════════════════════════════════════════════════ */

/* ── Remove old modebar on multi-page setup ── */
[data-mode="fixed"] .bpp-modebar,
[data-mode="variable"] .bpp-modebar { display: none !important; }

/* ══════════════════════════════════════════
   STICKY DASHBOARD NAVBAR
   ══════════════════════════════════════════ */
.bpp-nav {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(0,0,0,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bpp-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.bpp-nav-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.bpp-nav-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text1);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.bpp-nav-tagline {
  display: block;
  font-size: .65rem;
  color: var(--text4);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.bpp-nav-center {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  justify-content: center;
}
.bpp-nav-mode-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.bpp-nav-mode-lbl {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text4);
  text-transform: uppercase;
}
.bpp-nav-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .75rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.bpp-nav-mode-fixed {
  background: rgba(99,102,241,.12);
  color: var(--indigo);
  border: 1.5px solid rgba(99,102,241,.25);
}
.bpp-nav-mode-variable {
  background: rgba(3,105,161,.12);
  color: #0369A1;
  border: 1.5px solid rgba(3,105,161,.25);
}
[data-theme="dark"] .bpp-nav-mode-variable { color: #38BDF8; }
.bpp-nav-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .75rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text3);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.bpp-nav-switch:hover {
  color: var(--indigo);
  border-color: var(--indigo);
  background: rgba(99,102,241,.06);
}
.bpp-nav-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.bpp-nav-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s;
}
.bpp-nav-icon-btn:hover {
  background: rgba(99,102,241,.08);
  border-color: var(--indigo);
  color: var(--indigo);
}
.bpp-nav-currency {
  height: 34px;
  padding: .2rem .5rem;
  font-size: .78rem;
}
.bpp-nav-theme-btn {
  margin-left: .25rem;
}
/* Mobile nav adjustments */
@media (max-width: 768px) {
  .bpp-nav-center { display: none; }
  .bpp-nav-inner { padding: 0 .75rem; }
  .bpp-nav-tagline { display: none; }
  .bpp-nav-name { font-size: .9rem; }
  .bpp-nav-currency { display: none; }
}
@media (max-width: 480px) {
  .bpp-nav-icon-btn { display: none; }
}

/* Mobile mode toggle strip — shows on mobile replacing nav-center */
@media (max-width: 768px) {
  .bpp-nav-mobile-mode {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bpp-nav-mobile-mode::-webkit-scrollbar { display: none; }
}

/* ══════════════════════════════════════════
   HOME PAGE — bpp-home-*
   ══════════════════════════════════════════ */
.bpp-home-root { background: var(--bg); min-height: 100vh; }
.bpp-home-wrap { max-width: 100%; overflow: hidden; }

/* Hero */
.bpp-home-hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
}
.bpp-home-hero-badge {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: 99px;
  background: rgba(99,102,241,.1);
  color: var(--indigo);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(99,102,241,.2);
  margin-bottom: 1.25rem;
}
.bpp-home-hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text1);
  margin: 0 0 1.1rem;
}
.bpp-home-hero-accent {
  background: linear-gradient(135deg, var(--indigo), #7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bpp-home-hero-sub {
  font-size: 1.05rem;
  color: var(--text3);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 0 1.75rem;
}
.bpp-home-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.85rem;
  border-radius: 12px;
  background: var(--indigo);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 4px 20px rgba(99,102,241,.35);
}
.bpp-home-hero-cta:hover {
  background: #4338CA;
  box-shadow: 0 6px 28px rgba(99,102,241,.45);
  transform: translateY(-1px);
}
.bpp-home-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.5rem;
}
.bpp-home-hero-trust span {
  font-size: .72rem;
  color: var(--text4);
  font-weight: 600;
  background: var(--surface2);
  padding: .2rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Hero visual — score demo */
.bpp-home-hero-visual {
  display: flex;
  justify-content: center;
}
.bpp-home-score-demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.1);
  min-width: 260px;
  text-align: center;
}
.bpp-hsd-svg {
  width: 180px;
  height: 108px;
  display: block;
  margin: 0 auto;
}
.bpp-hsd-num {
  font-family: var(--mono);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-top: -28px;
}
.bpp-hsd-lbl {
  font-size: .72rem;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-top: .25rem;
  margin-bottom: 1.25rem;
}
.bpp-hsd-metrics { display: flex; flex-direction: column; gap: .55rem; }
.bpp-hsd-m { display: flex; justify-content: space-between; align-items: center; }
.bpp-hsd-ml { font-size: .76rem; color: var(--text3); }
.bpp-hsd-mv { font-size: .82rem; font-family: var(--mono); font-weight: 700; }

/* Selector section */
.bpp-home-selector { padding: 2rem 2rem 4rem; background: var(--surface2); }
.bpp-home-selector-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.bpp-home-sel-h2 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text1);
  margin: 0 0 .65rem;
}
.bpp-home-sel-sub { font-size: .95rem; color: var(--text3); margin: 0 0 2.5rem; }

.bpp-home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  text-align: left;
}
.bpp-home-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.bpp-home-card:hover {
  border-color: var(--indigo);
  box-shadow: 0 12px 48px rgba(99,102,241,.12);
  transform: translateY(-3px);
}
.bpp-home-card-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.15) 0%, transparent 70%);
  pointer-events: none;
}
.bpp-home-card-glow-v {
  background: radial-gradient(circle, rgba(3,105,161,.15) 0%, transparent 70%);
}
.bpp-home-card-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(99,102,241,.1);
  color: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.bpp-home-card-icon-v {
  background: rgba(3,105,161,.1);
  color: #0369A1;
}
[data-theme="dark"] .bpp-home-card-icon-v { color: #38BDF8; }
.bpp-home-card-badge {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .55rem;
  border-radius: 99px;
  background: rgba(16,185,129,.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,.25);
}
.bpp-home-card-title {
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text1);
  margin: 0 0 .6rem;
}
.bpp-home-card-desc {
  font-size: .88rem;
  color: var(--text3);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.bpp-home-card-examples {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}
.bpp-home-card-examples span {
  font-size: .72rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .2rem .55rem;
  color: var(--text3);
  font-weight: 600;
}
.bpp-home-card-features {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.5rem;
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.4;
}
.bpp-home-card-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  justify-content: center;
  padding: .8rem 1.25rem;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
}
.bpp-home-card-btn-fixed {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 3px 16px rgba(99,102,241,.3);
}
.bpp-home-card-btn-fixed:hover {
  background: #4338CA;
  box-shadow: 0 5px 24px rgba(99,102,241,.4);
  transform: translateY(-1px);
}
.bpp-home-card-btn-variable {
  background: #0369A1;
  color: #fff;
  box-shadow: 0 3px 16px rgba(3,105,161,.3);
}
.bpp-home-card-btn-variable:hover {
  background: #0C4A6E;
  box-shadow: 0 5px 24px rgba(3,105,161,.4);
  transform: translateY(-1px);
}

/* Feature strip */
.bpp-home-features { padding: 4rem 2rem; }
.bpp-home-feat-inner { max-width: 1100px; margin: 0 auto; }
.bpp-home-feat-h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text1);
  text-align: center;
  margin: 0 0 2.5rem;
}
.bpp-home-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.bpp-home-feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
}
.bpp-home-feat-ico {
  display: block;
  font-size: 1.75rem;
  margin-bottom: .75rem;
}
.bpp-home-feat strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: .4rem;
}
.bpp-home-feat p {
  font-size: .8rem;
  color: var(--text3);
  line-height: 1.55;
  margin: 0;
}

/* Home footer */
.bpp-home-footer {
  background: var(--surface2);
  border-top: 1px solid var(--border);
  padding: 1.75rem 2rem;
}
.bpp-home-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
}
.bpp-home-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.bpp-home-footer-badges span {
  font-size: .72rem;
  color: var(--text4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .2rem .6rem;
}
.bpp-home-footer-copy {
  font-size: .75rem;
  color: var(--text4);
}

/* Mobile responsive */
@media (max-width: 900px) {
  .bpp-home-hero { grid-template-columns: 1fr; padding: 2.5rem 1.25rem 2rem; }
  .bpp-home-hero-visual { display: none; }
  .bpp-home-cards { grid-template-columns: 1fr; }
  .bpp-home-feat-grid { grid-template-columns: 1fr 1fr; }
  .bpp-home-selector { padding: 2rem 1.25rem 2.5rem; }
}
@media (max-width: 600px) {
  .bpp-home-feat-grid { grid-template-columns: 1fr; }
  .bpp-home-features { padding: 2.5rem 1.25rem; }
}

/* Adjust tool-wrap padding for nav pages (not home) */
[data-mode="fixed"] .bpp-tool-wrap,
[data-mode="variable"] .bpp-tool-wrap {
  padding-top: 0;
}

/* Hide old header since we now use .bpp-nav */
[data-mode="fixed"] .bpp-header { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   BEX — BOTTOM SHEET EXPENSE LOGGER  v7.1
   Mobile-first · Thumb-friendly · Big fields · Card logs
   ════════════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
.bex-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.bex-backdrop.bex-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Sheet Container ── */
.bex-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9001;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 48px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
  max-height: 92dvh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
}
.bex-sheet.bex-open {
  transform: translateY(0);
}

/* ── Drag Handle ── */
.bex-handle {
  width: 44px; height: 5px;
  background: var(--border);
  border-radius: 99px;
  margin: 12px auto 0;
  flex-shrink: 0;
  cursor: grab;
  transition: background .15s;
}
.bex-handle:hover { background: var(--text4); }

/* ── Header ── */
.bex-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.bex-header-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text1);
  line-height: 1.15;
}
.bex-header-sub {
  font-size: .72rem;
  color: var(--text4);
  font-weight: 500;
  margin-top: .15rem;
}
.bex-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  margin-left: .5rem;
}
.bex-close:hover {
  background: rgba(239,68,68,.1);
  border-color: #EF4444;
  color: #EF4444;
}

/* ── Mode Bar ── */
.bex-mode-bar {
  display: flex;
  gap: .5rem;
  padding: .6rem 1.25rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bex-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  flex: 1;
  justify-content: center;
}
.bex-mode-btn.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,.28);
}
.bex-mode-btn:not(.active):hover {
  border-color: var(--indigo);
  color: var(--indigo);
}

/* ── Body scroll area ── */
.bex-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  -webkit-overflow-scrolling: touch;
}
.bex-body::-webkit-scrollbar { width: 4px; }
.bex-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Field group ── */
.bex-field-group { display: flex; flex-direction: column; gap: .4rem; }
.bex-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .7rem;
}
.bex-optional {
  font-size: .68rem;
  color: var(--text4);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Inputs — BIG, 52px ── */
.bex-input {
  width: 100%;
  height: 52px;
  padding: 0 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text1);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.bex-input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
  background: var(--surface);
}
.bex-input::placeholder { color: var(--text4); font-weight: 500; }
input[type="number"].bex-input { font-family: var(--mono); font-size: 1.15rem; }

/* ── Amount row ── */
.bex-amt-row { display: flex; flex-direction: column; gap: .5rem; }
.bex-amt-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.bex-sym {
  position: absolute;
  left: 1rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text2);
  pointer-events: none;
  z-index: 1;
}
.bex-amt-input {
  padding-left: 2.25rem;
  font-size: 1.4rem;
  font-family: var(--mono);
  font-weight: 800;
  height: 58px;
  letter-spacing: -.02em;
}
.bex-amt-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }

/* ── Quick amounts ── */
.bex-quick-amts {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.bex-qamt {
  flex: 1;
  min-width: 52px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--mono);
}
.bex-qamt:hover, .bex-qamt.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  transform: scale(1.03);
}

/* ── Category chips — horizontally scrollable ── */
.bex-chips-scroll {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: .15rem .05rem .4rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
.bex-chips-scroll::-webkit-scrollbar { display: none; }
.bex-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .9rem;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  height: 38px;
}
.bex-chip:hover {
  border-color: var(--indigo);
  background: rgba(99,102,241,.07);
  color: var(--indigo);
}
.bex-chip.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,.25);
}
/* Remembered last category chip — highlight subtly */
.bex-chip.bex-remembered {
  border-color: var(--green);
  color: var(--green);
}
.bex-chip.bex-remembered.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.bex-cat-input { height: 48px; font-size: .9rem; margin-top: .25rem; }
.bex-note-input { height: 48px; font-size: .9rem; }
.bex-date-input { height: 48px; font-size: .9rem; }

/* ── Date row compact ── */
.bex-date-row {
  flex-direction: row;
  align-items: center;
  gap: .75rem;
}
.bex-date-row .bex-label { flex-shrink: 0; }
.bex-date-row .bex-date-input { flex: 1; }

/* ── Save button — FULL WIDTH, HIGH CONTRAST, 54px ── */
.bex-actions { margin-top: .25rem; padding-bottom: .5rem; }
.bex-save-btn {
  width: 100%;
  height: 56px;
  border-radius: 14px;
  border: none;
  background: var(--indigo);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: .01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 4px 20px rgba(99,102,241,.35);
  transition: background .18s, box-shadow .18s, transform .15s;
}
.bex-save-btn:hover { background: #4338CA; box-shadow: 0 6px 28px rgba(99,102,241,.45); }
.bex-save-btn:active { transform: scale(.985); }
.bex-save-text { transition: opacity .15s; }
.bex-save-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}

/* ── Save animation states ── */
.bex-save-btn.bex-saving {
  background: var(--green);
  box-shadow: 0 4px 20px rgba(16,185,129,.35);
  pointer-events: none;
}
.bex-save-btn.bex-saving .bex-save-text { opacity: 0; }
.bex-save-btn.bex-saving .bex-save-check { opacity: 1; }

/* ── Daily reminder insight ── */
.bex-reminder-insight {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
}
.bex-ri-ico { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.bex-ri-text { display: flex; flex-direction: column; gap: .2rem; }
.bex-ri-text strong { font-size: .82rem; font-weight: 700; color: var(--amber); }
.bex-ri-text span { font-size: .78rem; color: var(--text3); }

/* ── SUCCESS OVERLAY ── */
.bex-success-overlay {
  position: absolute;
  inset: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  border-radius: inherit;
}
.bex-success-overlay.bex-success-show {
  opacity: 1;
  pointer-events: auto;
}
.bex-success-ring {
  width: 72px; height: 72px;
}
.bex-success-svg {
  width: 72px; height: 72px;
  transform: rotate(-90deg);
}
.bex-success-circle {
  stroke: var(--green);
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  stroke-linecap: round;
  transition: stroke-dashoffset .35s cubic-bezier(.4,0,.2,1);
}
.bex-success-path {
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  transition: stroke-dashoffset .25s .3s cubic-bezier(.4,0,.2,1);
}
.bex-success-overlay.bex-success-show .bex-success-circle { stroke-dashoffset: 0; }
.bex-success-overlay.bex-success-show .bex-success-path { stroke-dashoffset: 0; }
.bex-success-msg {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -.01em;
}

/* ── BULK ADD MODE ── */
.bex-bulk-body { gap: .65rem; }
.bex-bulk-list { display: flex; flex-direction: column; gap: .75rem; }

.bex-bulk-row {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .85rem 1rem;
  position: relative;
  transition: border-color .15s;
}
.bex-bulk-row:focus-within { border-color: var(--indigo); }
.bex-bulk-row-num {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text4);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bex-bulk-del {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  transition: all .15s;
}
.bex-bulk-del:hover { background: rgba(239,68,68,.1); border-color: #EF4444; color: #EF4444; }
.bex-bulk-row-fields { display: flex; gap: .5rem; flex-wrap: wrap; }
.bex-bulk-amt-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 130px;
}
.bex-bulk-sym {
  position: absolute; left: .75rem;
  font-family: var(--mono); font-weight: 700; font-size: .95rem; color: var(--text3);
  pointer-events: none;
}
.bex-bulk-amt {
  width: 100%; height: 48px; padding-left: 2rem;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text1);
  font-size: 1rem; font-family: var(--mono); font-weight: 700;
  transition: border-color .18s;
}
.bex-bulk-amt:focus { outline: none; border-color: var(--indigo); background: var(--surface); }
.bex-bulk-cat { flex: 1; min-width: 120px; }
.bex-bulk-note { flex: 1; min-width: 100%; }
.bex-bulk-chips {
  display: flex; gap: .35rem; overflow-x: auto; padding: .25rem 0;
  scrollbar-width: none; flex-wrap: nowrap;
  margin-top: .35rem;
}
.bex-bulk-chips::-webkit-scrollbar { display: none; }
.bex-bulk-chip {
  flex-shrink: 0;
  padding: .28rem .65rem; border-radius: 99px; height: 30px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text3); font-size: .7rem; font-weight: 600; cursor: pointer;
  transition: all .15s; white-space: nowrap; display: inline-flex; align-items: center;
}
.bex-bulk-chip:hover { border-color: var(--indigo); color: var(--indigo); }
.bex-bulk-chip.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }

.bex-add-row-btn {
  width: 100%; height: 44px;
  border-radius: 10px;
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--text3);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: all .18s;
}
.bex-add-row-btn:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: rgba(99,102,241,.05);
}

.bex-save-all-btn { background: var(--green); box-shadow: 0 4px 20px rgba(16,185,129,.3); }
.bex-save-all-btn:hover { background: #059669; box-shadow: 0 6px 28px rgba(16,185,129,.4); }

/* ── Bulk suggestion banner ── */
.bex-bulk-suggest {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .85rem;
  border-radius: 10px;
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.18);
  margin-bottom: .25rem;
}
.bex-bulk-suggest-text { font-size: .78rem; color: var(--text2); line-height: 1.4; flex: 1; }
.bex-bulk-suggest-yes {
  font-size: .72rem; font-weight: 700; color: var(--indigo); cursor: pointer;
  white-space: nowrap; text-decoration: underline;
}

/* ── MONTHLY CATEGORY BREAKDOWN ── */
.bex-cat-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 1rem 0 0;
}
.bex-cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.bex-cb-title {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text1);
}
.bex-cb-clear {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text4);
  cursor: pointer;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .2rem .55rem;
  transition: all .15s;
}
.bex-cb-clear:hover { color: #EF4444; border-color: #EF4444; }
.bex-cb-list { display: flex; flex-direction: column; gap: .65rem; }
.bex-cb-item {}
.bex-cb-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem;
}
.bex-cb-cat {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text1);
}
.bex-cb-cat-ico { font-size: .95rem; }
.bex-cb-amounts {
  font-size: .78rem;
  color: var(--text3);
  font-family: var(--mono);
}
.bex-cb-amounts strong { color: var(--text1); }
.bex-cb-track {
  height: 8px;
  border-radius: 99px;
  background: var(--surface2);
  overflow: hidden;
}
.bex-cb-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.bex-cb-empty {
  font-size: .82rem;
  color: var(--text4);
  text-align: center;
  padding: 1rem 0 .5rem;
}

/* ── TODAY LOG CARDS — Card style, not table ── */
.bpp-today-log-wrap { margin-top: .5rem; }
.bpp-today-log-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text4);
  margin-bottom: .55rem;
}
.bpp-today-log { display: flex; flex-direction: column; gap: .4rem; }

/* Each card — 64px min, thumb-scan friendly */
.bpp-log-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 58px;
  transition: border-color .18s;
  position: relative;
}
.bpp-log-card:hover { border-color: var(--indigo); }
.bpp-log-cat-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.bpp-log-info { flex: 1; min-width: 0; }
.bpp-log-cat {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.2;
}
.bpp-log-note {
  font-size: .72rem;
  color: var(--text4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: .1rem;
}
.bpp-log-time {
  font-size: .68rem;
  color: var(--text4);
  margin-top: .1rem;
}
.bpp-log-amt {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -.01em;
  flex-shrink: 0;
}
.bpp-log-del {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  transition: all .15s;
  flex-shrink: 0;
  margin-left: .25rem;
}
.bpp-log-del:hover { background: rgba(239,68,68,.1); color: #EF4444; }

/* ── Dashboard "Add Expense" prominent header button ── */
.bpp-header-add-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.25rem;
  border-radius: 12px;
  background: var(--indigo);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(99,102,241,.3);
  transition: all .18s;
}
.bpp-header-add-btn:hover {
  background: #4338CA;
  box-shadow: 0 5px 20px rgba(99,102,241,.4);
  transform: translateY(-1px);
}

/* ── Daily action reminder insight on dashboard ── */
.bpp-daily-action-insight {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.18);
  margin: .5rem 0;
}
.bpp-dai-ico { font-size: 1.1rem; flex-shrink: 0; }
.bpp-dai-text { flex: 1; }
.bpp-dai-title { font-size: .78rem; font-weight: 700; color: var(--amber); display: block; }
.bpp-dai-msg { font-size: .75rem; color: var(--text3); }
.bpp-dai-btn {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border-radius: 8px;
  background: var(--amber);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s;
}
.bpp-dai-btn:hover { opacity: .88; }

/* ── Bulk mode suggestion banner (smart UX) ── */
.bpp-bulk-mode-nudge {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  border-radius: 12px;
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.18);
  margin: .25rem 0 .5rem;
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.4;
}
.bpp-bulk-nudge-act {
  font-size: .72rem; font-weight: 700; color: var(--indigo); cursor: pointer;
  white-space: nowrap; margin-left: auto; flex-shrink: 0; text-decoration: underline;
}

/* ── Mobile-first overrides for FAB ── */
@media (max-width: 768px) {
  .bex-sheet { max-height: 95dvh; max-height: 95vh; }
  .bpp-fab { display: none !important; } /* FAB hidden; "Add Expense" button in header replaces it */
}
@media (min-width: 769px) {
  /* On desktop, center the sheet like a bottom drawer with max width */
  .bex-sheet {
    max-width: 560px;
    left: 50%;
    right: auto;
    transform: translate(-50%, 100%);
    border-radius: 24px 24px 0 0;
  }
  .bex-sheet.bex-open { transform: translate(-50%, 0); }
  .bex-backdrop { background: rgba(0,0,0,.4); }
}

/* ── FAB button update — keep for desktop ── */
.bpp-fab {
  z-index: 8999; /* below sheet */
}

/* ════════════════════════════════════════════════════════════════
   HERO HEADER CARD — v7.1
   Full-width greeting · Balance · Add Expense button
   ════════════════════════════════════════════════════════════════ */
.bpp-hero-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  background: linear-gradient(135deg, var(--indigo) 0%, #4338CA 100%);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.35rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(99,102,241,.28);
}
.bpp-hero-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.bpp-hero-card::after {
  content: '';
  position: absolute;
  bottom: -30px; left: 30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.bpp-hero-left { flex: 1; position: relative; z-index: 1; }
.bpp-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .85rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.bpp-hero-greet {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-bottom: .15rem;
  letter-spacing: -.01em;
}
.bpp-hero-tag {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Balance */
.bpp-hero-balance-row { margin-bottom: .65rem; }
.bpp-hero-balance {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  line-height: 1;
}
.bpp-hero-sym {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
}
.bpp-hero-amount {
  font-family: var(--mono);
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
}
.bpp-hero-bal-lbl {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: .25rem;
}

/* Add Expense button — WHITE, high contrast on blue bg */
.bpp-header-add-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1.25rem;
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  color: var(--indigo);
  font-size: .88rem;
  font-weight: 800;
  font-family: var(--font-head);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: all .18s;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.bpp-header-add-btn:hover {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  transform: translateY(-2px);
}
.bpp-header-add-btn:active { transform: scale(.97); }

/* Spent today pill */
.bpp-hero-spent-today {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}
.bpp-hero-spent-lbl {
  font-size: .62rem;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bpp-hero-spent-val {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}

/* Daily action insight inside hero */
.bpp-hero-card .bpp-daily-action-insight {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  margin-top: .5rem;
}
.bpp-hero-card .bpp-dai-title { color: rgba(255,255,255,.9); }
.bpp-hero-card .bpp-dai-msg   { color: rgba(255,255,255,.75); }
.bpp-hero-card .bpp-dai-ico   { filter: brightness(1.2); }
.bpp-hero-card .bpp-dai-btn {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}
.bpp-hero-card .bpp-dai-btn:hover { background: rgba(255,255,255,.32); }

/* Variable hero variant — slightly different gradient */
.bpp-hero-card-var {
  background: linear-gradient(135deg, #0369A1 0%, #0C4A6E 100%);
  box-shadow: 0 6px 32px rgba(3,105,161,.28);
}
.bpp-hero-card-var .bpp-header-add-btn { color: #0369A1; }

/* Bulk mode nudge */
.bpp-bulk-mode-nudge {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  border-radius: 10px;
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.18);
  margin: 0 0 .75rem;
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.4;
}
.bpp-bulk-nudge-act {
  font-size: .72rem; font-weight: 700; color: var(--indigo);
  cursor: pointer; white-space: nowrap; margin-left: auto;
  flex-shrink: 0; text-decoration: underline;
}

/* ── Shake animation for invalid input ── */
@keyframes bex-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.bex-shake { animation: bex-shake .35s ease; }

/* Mobile responsive */
@media (max-width: 520px) {
  .bpp-hero-card { flex-direction: column; gap: 1rem; }
  .bpp-hero-right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .bpp-hero-amount { font-size: 1.75rem; }
}

/* ════════════════════════════════════════════════════════════════
   v7.2 NEW UI ELEMENTS
   Date bar · Hero reminder · Nav gap · Currency fix
   Wishlist Planner · Goals polish · YoY polish
   ════════════════════════════════════════════════════════════════ */

/* ── Nav brand gap ── */
.bpp-nav-name {
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.bpp-nav-tagline-gap {
  display: block;
  height: 4px;
}
.bpp-nav-tagline {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  color: var(--text4);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Currency select — custom arrow ── */
.bpp-nav-currency {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  padding-right: 1.6rem !important;
  cursor: pointer;
  min-width: 72px;
}
[data-theme="dark"] .bpp-nav-currency {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── Date bar (above hero) ── */
/* ── Hero date line (inside hero card) ── */
.bpp-hero-date-line {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  letter-spacing: .01em;
  margin-bottom: .55rem;
}
.bpp-hero-status-dot {
  color: rgba(255,255,255,.55);
  font-size: .7rem;
}

/* ── Hero reminder line ── */
.bpp-hero-reminder {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .01em;
  margin-bottom: .45rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ── Goals section polish ── */
.bpp-goal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem auto 0;
  padding: .7rem 1.6rem;
  border-radius: 12px;
  background: var(--indigo);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  font-family: var(--font-head);
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 16px rgba(99,102,241,.32);
  transition: all .18s;
  letter-spacing: -.01em;
  width: 100%;
  justify-content: center;
}
.bpp-goal-add-btn::before {
  content: '＋';
  font-size: 1.1rem;
  font-weight: 700;
}
.bpp-goal-add-btn:hover {
  background: #4338CA;
  box-shadow: 0 5px 22px rgba(99,102,241,.42);
  transform: translateY(-1px);
}
.bpp-goal-form {
  background: var(--surface2);
  border: 1.5px solid var(--indigo);
  border-radius: 16px;
  padding: 1.25rem;
  margin-top: 1rem;
  animation: bppSlideDown .22s ease;
}
@keyframes bppSlideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.bpp-goal-form-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.4rem;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(16,185,129,.28);
  transition: all .18s;
}
.bpp-goal-form-save:hover { background: #059669; transform: translateY(-1px); }
.bpp-goal-form-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.2rem;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text3);
  font-size: .88rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .18s;
}
.bpp-goal-form-cancel:hover { border-color: var(--red); color: var(--red); }
.bpp-goal-form-btns { display: flex; gap: .75rem; margin-top: 1rem; }

/* ── YoY section polish ── */
.bpp-yoy-header {
  background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(16,185,129,.06) 100%);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 12px;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.bpp-yoy-hdr-title {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -.01em;
}
.bpp-yoy-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (max-width: 580px) { .bpp-yoy-inputs { grid-template-columns: 1fr; } }
.bpp-yoy-input-group { display: flex; flex-direction: column; gap: .35rem; }
.bpp-yoy-input-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bpp-yoy-table { display: flex; flex-direction: column; gap: .5rem; }
.bpp-yoy-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.bpp-yoy-row-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text2);
  min-width: 90px;
  flex-shrink: 0;
}
.bpp-yoy-row-vals {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}
.bpp-yoy-yr { display: flex; flex-direction: column; gap: .1rem; }
.bpp-yoy-yr-lbl { font-size: .62rem; font-weight: 600; color: var(--text4); text-transform: uppercase; letter-spacing: .04em; }
.bpp-yoy-yr-val { font-size: .88rem; font-weight: 700; font-family: var(--mono); color: var(--text1); }
.bpp-yoy-diff {
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 99px;
  margin-left: auto;
  white-space: nowrap;
}
.bpp-yoy-diff-good    { background: rgba(16,185,129,.12); color: var(--green); }
.bpp-yoy-diff-bad     { background: rgba(239,68,68,.1);   color: var(--red); }
.bpp-yoy-diff-neutral { background: var(--surface2);       color: var(--text4); border: 1px solid var(--border); }
.bpp-yoy-insight {
  margin-top: .85rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.14);
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   WISHLIST PLANNER
   ══════════════════════════════════════════════════════════ */
.bpp-wishlist-section {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.bpp-wishlist-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.bpp-wishlist-title-row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.bpp-wishlist-ico { font-size: 1.1rem; margin-top: .1rem; }
.bpp-wishlist-title {
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.bpp-wishlist-sub {
  font-size: .7rem;
  color: var(--text4);
  font-weight: 500;
  margin-top: .15rem;
}
.bpp-wishlist-add-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border-radius: 10px;
  background: var(--indigo);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(99,102,241,.28);
  transition: all .18s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bpp-wishlist-add-btn:hover { background: #4338CA; transform: translateY(-1px); }

.bpp-wishlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem .75rem;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  font-size: .78rem;
  color: var(--text4);
}
.bpp-wishlist-empty-ico { font-size: 1.4rem; }
.bpp-wishlist-items { display: flex; flex-direction: column; gap: .75rem; }

/* Wishlist item card */
.bpp-wl-item {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .9rem 1rem;
  transition: border-color .18s;
}
.bpp-wl-item:hover { border-color: rgba(99,102,241,.35); }
.bpp-wl-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .65rem;
}
.bpp-wl-item-left { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; }
.bpp-wl-emoji {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.bpp-wl-info { flex: 1; min-width: 0; }
.bpp-wl-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpp-wl-meta {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .15rem;
}
.bpp-wl-price {
  font-size: .72rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text2);
}
.bpp-wl-sep { font-size: .7rem; color: var(--text4); }
.bpp-wl-target { font-size: .7rem; color: var(--text4); font-weight: 500; }
.bpp-wl-item-actions { display: flex; gap: .35rem; margin-left: .5rem; flex-shrink: 0; }
.bpp-wl-edit-btn, .bpp-wl-del-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  transition: all .15s;
  color: var(--text3);
}
.bpp-wl-edit-btn:hover { border-color: var(--indigo); background: rgba(99,102,241,.08); }
.bpp-wl-del-btn:hover  { border-color: var(--red);    background: rgba(239,68,68,.08); color: var(--red); }

.bpp-wl-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .45rem;
}
.bpp-wl-save-lbl { font-size: .7rem; color: var(--text4); font-weight: 600; }
.bpp-wl-save-val { font-size: .8rem; font-family: var(--mono); font-weight: 700; color: var(--indigo); }

.bpp-wl-progress-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.bpp-wl-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bpp-wl-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.bpp-wl-pct {
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text2);
  min-width: 32px;
  text-align: right;
}

.bpp-wl-saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.bpp-wl-saved-lbl { font-size: .7rem; color: var(--text4); font-weight: 600; }
.bpp-wl-saved-edit {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .2rem .5rem;
}
.bpp-wl-saved-edit .bpp-sym { font-size: .72rem; color: var(--text3); font-weight: 700; }
.bpp-wl-saved-input {
  width: 70px;
  border: none;
  background: transparent;
  font-size: .78rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text1);
  text-align: right;
  padding: 0;
}
.bpp-wl-saved-input:focus { outline: none; }
.bpp-wl-saved-of { font-size: .68rem; color: var(--text4); white-space: nowrap; }

.bpp-wl-prediction {
  margin-top: .55rem;
  padding: .4rem .65rem;
  border-radius: 8px;
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.18);
  font-size: .72rem;
  color: var(--text2);
  line-height: 1.4;
}
.bpp-wl-prediction strong { color: var(--green); }

/* ── Wishlist Modal ── */
.bpp-wishlist-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9500;
}
.bpp-wishlist-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9501;
  background: var(--surface);
  border-radius: 20px;
  width: min(420px, calc(100vw - 2rem));
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: bppModalIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bppModalIn {
  from { opacity:0; transform:translate(-50%,-46%) scale(.96); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.bpp-wishlist-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--border);
}
.bpp-wishlist-modal-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -.01em;
}
.bpp-wishlist-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.bpp-wishlist-modal-close:hover { background: rgba(239,68,68,.1); border-color: var(--red); color: var(--red); }
.bpp-wishlist-modal-body {
  padding: 1.1rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.bpp-wl-field { display: flex; flex-direction: column; gap: .4rem; }
.bpp-wl-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bpp-wl-input {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text1);
  font-size: .95rem;
  font-weight: 600;
  font-family: inherit;
  transition: border-color .18s;
  box-sizing: border-box;
}
.bpp-wl-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.bpp-wl-radio-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.bpp-wl-radio {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: all .15s;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2);
}
.bpp-wl-radio:has(input:checked) {
  border-color: var(--indigo);
  background: rgba(99,102,241,.08);
  color: var(--indigo);
}
.bpp-wl-radio input[type="radio"] { display: none; }
.bpp-wl-calc-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .85rem;
  border-radius: 10px;
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.2);
}
.bpp-wl-calc-lbl { font-size: .75rem; font-weight: 600; color: var(--text3); }
.bpp-wl-calc-val { font-size: .92rem; font-weight: 800; font-family: var(--mono); color: var(--green); }
.bpp-wl-save-btn {
  width: 100%;
  height: 52px;
  border-radius: 12px;
  background: var(--indigo);
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  font-family: var(--font-head);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(99,102,241,.32);
  transition: all .18s;
  letter-spacing: -.01em;
}
.bpp-wl-save-btn:hover { background: #4338CA; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(99,102,241,.42); }

/* ══════════════════════════════════════════════════════════
   HERO CARD v7.2 — Date bar + Reminder badge + Greeting
   ══════════════════════════════════════════════════════════ */

/* Top bar: date + status pill */
.bpp-hero-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.bpp-hero-date {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  letter-spacing: .01em;
}
.bpp-hero-date-ico { font-size: .8rem; }
.bpp-hero-status-pill {
  font-size: .66rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  padding: .2rem .6rem;
  border-radius: 99px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Hero body: left (text) + right (button) */
.bpp-hero-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.bpp-hero-left { flex: 1; min-width: 0; }

/* Reminder badge */
.bpp-hero-reminder-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px;
  padding: .25rem .65rem .25rem .4rem;
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  letter-spacing: .01em;
  margin-bottom: .6rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpp-hero-reminder-bell {
  font-size: .82rem;
  flex-shrink: 0;
  animation: bpp-bell-ring 3s ease-in-out infinite;
}
@keyframes bpp-bell-ring {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(-12deg); }
  94% { transform: rotate(12deg); }
  96% { transform: rotate(-8deg); }
  98% { transform: rotate(8deg); }
}

/* Greeting */
.bpp-hero-greet {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: .25rem;
}
.bpp-hero-tag {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  letter-spacing: .01em;
}

/* Responsive: stack on small mobile */
@media (max-width: 420px) {
  .bpp-hero-reminder-badge {
    font-size: .65rem;
    padding: .2rem .5rem .2rem .35rem;
  }
  .bpp-hero-greet { font-size: 1.1rem; }
  .bpp-hero-body  { flex-direction: column; gap: .75rem; }
  .bpp-hero-right { width: 100%; }
  .bpp-header-add-btn { width: 100%; justify-content: center; }
}

/* Hero card simplified — action row only */
.bpp-hero-action-row {
  display: flex;
  align-items: center;
  margin-top: .5rem;
}