/* ============================================================
   Budget Tools — v2 visual redesign (premium light fintech)
   Loaded AFTER budget-tools.css. Overrides visuals only,
   keeps every functional class hook so the JS still works.
   Scoped to body.budget-tools for specificity.
   ============================================================ */

body.budget-tools {
  --bt2-ink:      #0b1220;
  --bt2-ink-2:    #47516b;
  --bt2-muted:    #7b8699;
  --bt2-line:     #e7ebf3;
  --bt2-surface:  #ffffff;
  --bt2-bg:       #f4f6fb;
  --bt2-accent:   #059669;   /* indigo */
  --bt2-accent-2: #0d9488;   /* violet */
  --bt2-cyan:     #0891b2;
  --bt2-good:     #059669;
  --bt2-good-2:   #10b981;
  --bt2-bad:      #e11d48;
  --bt2-amber:    #d97706;
  --bt2-shadow:   0 1px 2px rgba(15,23,42,.04), 0 12px 34px -14px rgba(24,28,54,.22);
  --bt2-shadow-lg:0 1px 2px rgba(15,23,42,.05), 0 24px 60px -22px rgba(24,28,54,.32);
  --bt2-radius:   20px;
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(13,148,136,.10), transparent 60%),
    radial-gradient(900px 480px at 8% -4%, rgba(5,150,105,.10), transparent 58%),
    var(--bt2-bg) !important;
}

/* ── Page frame + header ── */
body.budget-tools .ml-page { background: transparent; }
/* Width cap. This used to be min(1180px, 100vw - 40px), which silently overrode the
   --ml-page-max of min(1680px, ...) set in budget-tools.css:19 -- higher specificity,
   loaded second. On a 1512px screen that left 166px of dead gradient on each side and
   squeezed nine calculators into 1124px; on a 1920px monitor 41% of the viewport was
   background. That single line was the whole "everything is tiny and centered" problem. */
body.budget-tools .bt-shell { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-inset); }

body.budget-tools .bt-top { border-bottom: none; padding: 26px 0 6px; align-items: center; }
body.budget-tools .ml-page-title {
  font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.035em;
  background: linear-gradient(100deg, var(--bt2-ink) 30%, var(--bt2-accent) 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.budget-tools .ml-page-desc { color: var(--bt2-ink-2); font-size: var(--fs-base); max-width: 66ch; }
body.budget-tools .bt-top__badge {
  background: rgba(5,150,105,.08); color: var(--bt2-accent); border: 1px solid rgba(5,150,105,.18);
  font-size: var(--fs-xs); letter-spacing: .08em; padding: 8px 14px; border-radius: 999px;
}

/* ── Segmented tab control ── */
body.budget-tools .bt-tabs-wrap { top: 60px; padding: 14px 0 16px; background: linear-gradient(180deg, var(--bt2-bg) 74%, transparent); }
body.budget-tools .ml-tabbar.bt-tabs,
body.budget-tools .bt-tabs {
  background: #e9edf6; border: 1px solid var(--bt2-line);
  border-radius: 16px; padding: 6px; gap: 4px; box-shadow: inset 0 1px 2px rgba(15,23,42,.05);
}
body.budget-tools .ml-tab {
  border: none; border-radius: 11px; color: var(--bt2-ink-2); font-weight: 650; font-size: var(--fs-sm);
  padding: 10px 8px; background: transparent; transition: all .18s cubic-bezier(.4,0,.2,1);
}
body.budget-tools .ml-tab:hover { background: rgba(255,255,255,.7); color: var(--bt2-ink); border-color: transparent; }
body.budget-tools .ml-tab.is-active {
  color: #fff; font-weight: 750;
  background: linear-gradient(135deg, var(--bt2-accent), var(--bt2-accent-2));
  box-shadow: 0 6px 16px -4px rgba(5,150,105,.5), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── Cards ── */
body.budget-tools .ml-glass {
  background: var(--bt2-surface); border: 1px solid var(--bt2-line); border-radius: var(--bt2-radius);
  box-shadow: var(--bt2-shadow); padding: clamp(18px, 2.4vw, 26px); overflow: visible;
  transition: box-shadow .22s ease, transform .22s ease;
}
body.budget-tools .ml-glass::before { display: none; }  /* drop the old top accent bar */
body.budget-tools .bt-split > .ml-glass:hover { box-shadow: var(--bt2-shadow-lg); }

/* ── KPI row ── */
body.budget-tools .bt-kpi {
  background: linear-gradient(180deg, #fbfcff, #f6f8fe); border: 1px solid var(--bt2-line);
  border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
body.budget-tools .bt-kpi--accent {
  background: linear-gradient(150deg, rgba(5,150,105,.10), rgba(13,148,136,.06));
  border-color: rgba(5,150,105,.20);
}
body.budget-tools .bt-kpi__val { font-size: clamp(1.7rem, 3.4vw, 2.15rem); font-weight: 850; letter-spacing: -.03em; color: var(--bt2-ink); }
body.budget-tools .ml-sub-summary-lbl,
body.budget-tools .bt-toolbar-label,
body.budget-tools .ml-field label,
body.budget-tools .ml-viz-title { color: var(--bt2-muted); letter-spacing: .09em; font-weight: 750; }

/* ── Tool head + icon ── */
body.budget-tools .ml-tool-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--bt2-ink); }
body.budget-tools .ml-tool-sub { color: var(--bt2-ink-2); font-size: var(--fs-sm); }
body.budget-tools .ml-tool-icon {
  width: 46px; height: 46px; border-radius: 14px; font-size: 21px;
  box-shadow: 0 8px 20px -6px rgba(24,28,54,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
body.budget-tools .ml-tool-icon--subs   { background: linear-gradient(140deg,#34d399,#059669); }
body.budget-tools .ml-tool-icon--pay    { background: linear-gradient(140deg,#0ea5e9,#0284c7); }
body.budget-tools .ml-tool-icon--ef     { background: linear-gradient(140deg,#10b981,#059669); }
body.budget-tools .ml-tool-icon--rvb    { background: linear-gradient(140deg,#f59e0b,#d97706); }
body.budget-tools .ml-tool-icon--apr    { background: linear-gradient(140deg,#fb7185,#e11d48); }
body.budget-tools .ml-tool-icon--cry    { background: linear-gradient(140deg,#fbbf24,#d97706); }
body.budget-tools .ml-tool-icon--budget { background: linear-gradient(140deg,#22d3ee,#0891b2); }
body.budget-tools .ml-tool-icon--nw     { background: linear-gradient(140deg,#34d399,#059669); }

/* ── Inputs ── */
body.budget-tools .ml-input {
  background: #f3f5fb; border: 1.5px solid transparent; border-radius: 12px; padding: 12px 14px;
  font-size: var(--fs-base); font-weight: 650; color: var(--bt2-ink); transition: all .16s ease;
}
body.budget-tools .ml-input::placeholder { color: #9aa4b8; font-weight: 500; }
body.budget-tools .ml-input:focus {
  background: #fff; border-color: var(--bt2-accent);
  box-shadow: 0 0 0 4px rgba(5,150,105,.14);
}

/* ── Big numbers ── */
body.budget-tools .ml-big-number { font-weight: 850; letter-spacing: -.035em; color: var(--bt2-ink); }

/* ── Bars / data viz ── */
body.budget-tools .ml-bar-track { height: 10px; background: #eef1f8; border-radius: 999px; box-shadow: none; }
body.budget-tools .ml-bar-fill { border-radius: 999px; background: linear-gradient(90deg, var(--bt2-accent), var(--bt2-accent-2)); }
body.budget-tools .ml-bar-item .ml-bar-amt { color: var(--bt2-accent); }
body.budget-tools .ml-progress-wrap { height: 12px; background: #eef1f8; border-radius: 999px; }
body.budget-tools .ml-progress-fill { background: linear-gradient(90deg, var(--bt2-good-2), var(--bt2-good)); }
body.budget-tools .ml-sub-row .ml-bar-fill { background: linear-gradient(90deg, var(--bt2-accent), var(--bt2-cyan)); }

/* ── Chips / add button ── */
body.budget-tools .ml-chip {
  background: #fff; border: 1px solid var(--bt2-line); border-radius: 999px; padding: 9px 15px;
  font-weight: 700; color: var(--bt2-ink-2); box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.budget-tools .ml-chip:hover { border-color: var(--bt2-accent); color: var(--bt2-accent); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(5,150,105,.4); }
body.budget-tools .ml-btn-add,
body.budget-tools .ml-payoff-mode .ml-chip.is-active,
body.budget-tools .ml-chip.is-active {
  background: linear-gradient(135deg, var(--bt2-accent), var(--bt2-accent-2)); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -6px rgba(5,150,105,.5);
}

/* ── Subscription rows ── */
body.budget-tools .ml-sub-row { border: 1px solid var(--bt2-line); border-radius: 14px; background: #fbfcff; }
body.budget-tools .ml-btn-sm { background: rgba(225,29,72,.09); color: #e11d48; border-radius: 11px; }
body.budget-tools .ml-btn-sm:hover { background: rgba(225,29,72,.16); }

/* ── Insight callout ── */
body.budget-tools .ml-insight {
  background: linear-gradient(120deg, rgba(5,150,105,.07), rgba(13,148,136,.04));
  border: 1px solid rgba(5,150,105,.16); border-left: 3px solid var(--bt2-accent);
  border-radius: 14px; padding: 13px 16px; color: var(--bt2-ink); font-weight: 600;
}

/* ── Slider ── */
body.budget-tools .ml-slider { background: #eef1f8; height: 8px; }
body.budget-tools .ml-slider::-webkit-slider-thumb { border-color: var(--bt2-accent); box-shadow: 0 4px 12px rgba(5,150,105,.4); }
body.budget-tools .ml-slider-val { color: var(--bt2-accent); }

/* ── Payoff card stats ── */
body.budget-tools .ml-payoff-stat { background: rgba(5,150,105,.05); border: 1px solid rgba(5,150,105,.14); border-radius: 12px; }
body.budget-tools .ml-payoff-stat__val { color: var(--bt2-ink); }
body.budget-tools .ml-inline-link, body.budget-tools .ml-back { color: var(--bt2-accent); font-weight: 700; }

/* ── Footer ── */
body.budget-tools .ml-footer-note { border-top: 1px solid var(--bt2-line); color: var(--bt2-muted); }

/* Inline Lucide icons replaced the emoji that used to sit in this chip. */
body.budget-tools .ml-tool-icon svg { width: 22px; height: 22px; display: block; }