/* Dollars & Sense app design system (2026 refresh).
   Pages opt in with <body class="ds2">. Every rule is scoped to .ds2 so older
   inline styles on the same page lose on specificity and nothing else on the
   site is affected.
   Type scale: 12 / 13 / 14 / 15 / 16 / 20 / 26. Weights: 400, 600; headings 800. */

.ds2 {
  --plum: #4A148C;
  --plum-soft: #EFE7F8;
  --teal: #00838F;
  --gold: #FFD740;
  --magenta: #D81B60;
  --ink: #1F1B2D;
  --muted: #6B6578;
  --faint: #A49FAE;
  --line: #E6E2EC;
  --field: #D7D2DF;
  --bg: #F7F6FA;
  --card: #FFFFFF;
  --good: #1B7F4B;
  --over: #C62828;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px;
}
.ds2 * { box-sizing: border-box; }
.ds2 .num { font-variant-numeric: tabular-nums; }

/* ── Header ─────────────────────────────────────────────── */
.ds2 .app-header { background: var(--card); border-bottom: 1px solid var(--line); padding: 14px 20px 16px; text-align: center; }
.ds2 .app-header .hl { display: flex; align-items: center; justify-content: space-between; max-width: 720px; margin: 0 auto; }
.ds2 .app-header .hl.solo { justify-content: center; }
.ds2 .ds-logo { display: inline-flex; align-items: center; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); line-height: 1; }
.ds2 .ds-logo .d { background: var(--gold); color: var(--plum); padding: 4px 8px; }
.ds2 .ds-logo .a { background: #fff; color: var(--magenta); font-style: italic; padding: 4px 3px 4px 5px; }
.ds2 .ds-logo .s { background: #fff; color: var(--teal); padding: 4px 8px 4px 2px; }
.ds2 .tier { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #7A7487; }
.ds2 .tier svg { width: 12px; height: 12px; }
.ds2 .app-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.3px; line-height: 1.2; color: var(--plum); margin: 12px 0 4px; }
.ds2 .app-sub { font-size: 14px; color: var(--muted); }

/* ── Summary strip ("Left to plan") ─────────────────────── */
.ds2 .summary { background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 20px 14px; position: sticky; top: 0; z-index: 40; }
.ds2 .summary-inner { max-width: 720px; margin: 0 auto; }
.ds2 .summary .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ds2 .summary .l { font-size: 14px; color: var(--muted); }
.ds2 .summary .v { font-size: 20px; font-weight: 600; color: var(--plum); font-variant-numeric: tabular-nums; }
.ds2 .summary .v.over { color: var(--over); }
.ds2 .bar { height: 8px; border-radius: 99px; background: #EDEAF2; margin: 10px 0 6px; overflow: hidden; }
.ds2 .bar i { display: block; height: 100%; width: 0; background: var(--plum); border-radius: 99px; transition: width .25s ease; }
.ds2 .bar.over i { background: var(--over); }
.ds2 .summary .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Layout ─────────────────────────────────────────────── */
.ds2 .wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.ds2 .guide { font-size: 13px; color: var(--muted); margin: 0 4px 12px; }

/* ── Cards, rows, inputs ────────────────────────────────── */
.ds2 .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.ds2 .card-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 800; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.ds2 .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ds2 .row:last-child { border-bottom: none; }
.ds2 .row .lab { font-size: 15px; line-height: 1.3; color: var(--ink); }
.ds2 .row .tag { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ds2 .labwrap { display: flex; align-items: center; gap: 6px; }
.ds2 .in { display: flex; align-items: center; width: 136px; height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 12px; background: #fff; flex: none; }
.ds2 .in span { color: var(--muted); font-size: 15px; margin-right: 4px; }
.ds2 .in input { border: none; outline: none; width: 100%; min-width: 0; text-align: right; font: inherit; font-size: 16px; color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ds2 .in input::-webkit-outer-spin-button, .ds2 .in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds2 .in:focus-within { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(74,20,140,0.10); }
.ds2 .text-in { width: 100%; height: 44px; border: 1px solid var(--field); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.ds2 .text-in:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(74,20,140,0.10); }
.ds2 .stack { display: block; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ds2 .stack .lab { font-size: 15px; margin-bottom: 8px; display: block; }
.ds2 .total-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #FAF8FD; border-top: 1px solid var(--line); }
.ds2 .total-row .l { font-size: 15px; font-weight: 600; }
.ds2 .total-row .v { font-size: 20px; font-weight: 600; color: var(--plum); font-variant-numeric: tabular-nums; }

/* ── Info pill + fold-out tip ───────────────────────────── */
.ds2 .info { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--teal); color: var(--teal); background: transparent; font: 700 11px/1 'DM Sans', sans-serif; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; padding: 0; }
.ds2 .info[aria-expanded="true"] { background: var(--teal); color: #fff; }
.ds2 .tip { display: none; margin: 0 16px 10px; padding: 10px 12px; border-radius: 10px; background: #EEF7F8; font-size: 13px; line-height: 1.5; color: #24434A; }
.ds2 .tip.open { display: block; }
.ds2 .tip-standalone { margin: 0 0 12px; }

/* ── Budget sections (one-page budget) ──────────────────── */
.ds2 .sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; scroll-margin-top: 96px; }
.ds2 .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; background: none; border: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ds2 .sec-head .t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds2 .step { width: 26px; height: 26px; border-radius: 50%; background: var(--plum-soft); color: var(--plum); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds2 .sec.done .step { background: var(--plum); color: #fff; }
.ds2 .sec.locked .step { background: #F1F0F4; color: var(--faint); }
.ds2 .sec-name { display: block; font-size: 16px; font-weight: 600; }
.ds2 .sec-sum { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds2 .sec-amt { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds2 .chev { width: 18px; height: 18px; color: var(--faint); flex: none; transition: transform .2s ease; }
.ds2 .sec.open .chev { transform: rotate(90deg); }
.ds2 .sec-body { display: none; border-top: 1px solid var(--line); }
.ds2 .sec.open .sec-body { display: block; }
.ds2 .sec.locked { opacity: .55; }
.ds2 .sec.locked .sec-head { cursor: default; }
.ds2 .sec-actions { display: flex; gap: 10px; align-items: center; padding: 14px 16px 16px; }

/* ── Buttons ────────────────────────────────────────────── */
.ds2 .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; }
.ds2 .btn-primary { flex: 1; background: var(--plum); color: #fff; }
.ds2 .btn-primary:hover { background: #3C0F74; }
.ds2 .btn-outline { flex: 1; background: #fff; color: var(--plum); border: 1.5px solid var(--plum); }
.ds2 .btn-text { background: none; color: var(--muted); padding: 0 12px; }
.ds2 .link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; background: none; border: none; cursor: pointer; font-family: inherit; }
.ds2 .actions { display: flex; gap: 10px; align-items: center; margin: 4px 0 16px; }

/* ── Notes, quiet lines, upsell ─────────────────────────── */
.ds2 .note { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.ds2 .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.ds2 .note p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }
.ds2 .note p b { color: var(--ink); font-weight: 600; }
.ds2 .quiet { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); margin: 6px 0 18px; text-align: center; }
.ds2 .quiet a { color: var(--ink); }
.ds2 .quiet svg { width: 16px; height: 16px; flex: none; }
.ds2 .status { margin: 0 16px 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; background: #F1F0F4; color: #3D3848; }
.ds2 .status b { font-weight: 600; }
.ds2 .status.good { background: #EAF6EF; color: #1E4D33; }
.ds2 .status.warn { background: #FFF6E0; color: #5C4300; }
.ds2 .status.bad { background: #FDECEC; color: #7A1F1F; }

/* ── Tab bar ────────────────────────────────────────────── */
.ds2 .ds-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ds2 .ds-tab-bar-inner { display: flex; width: 100%; max-width: 720px; }
.ds2 .ds-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 0 8px; text-decoration: none; color: #5E5869; font-size: 11px; font-weight: 400; -webkit-tap-highlight-color: transparent; position: relative; white-space: nowrap; }
.ds2 .ds-tab svg { width: 22px; height: 22px; }
.ds2 .ds-tab.active { color: var(--plum); font-weight: 600; }
.ds2 .ds-tab .ds-tab-icon { display: none; }

/* ── Legal footer (quieter) ─────────────────────────────── */
.ds2 .ds-legal-footer { margin-top: 24px; padding: 22px 20px 26px; background: transparent; border-top: 1px solid var(--line); text-align: center; }
.ds2 .ds-legal-footer .ds-copyright { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ds2 .ds-legal-footer .ds-disclaimer { font-size: 12px; color: var(--muted); line-height: 1.55; max-width: 640px; margin: 0 auto 10px; }
.ds2 .ds-legal-footer .ds-links { font-size: 12px; color: var(--faint); }
.ds2 .ds-legal-footer .ds-links a { color: var(--muted); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.ds2 .ds-legal-footer .ds-sep { color: #D3CFDA; margin: 0 6px; }

/* ── Nudge card + lockout (restyled, same markup) ───────── */
.ds2 .ds-nudge-card { max-width: 688px; margin: 0 auto 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--plum); border-radius: 12px; box-shadow: none; }
.ds2 .ds-nudge-card-body { font-size: 14px; color: var(--ink); }
.ds2 .ds-nudge-card-body strong { color: var(--ink); font-weight: 600; }
.ds2 .ds-nudge-cta { background: var(--plum); color: #fff; font-weight: 600; border-radius: 10px; }
.ds2 .ds-nudge-cta:hover { transform: none; box-shadow: none; background: #3C0F74; }
.ds2 .ds-lockout-overlay { background: rgba(31,27,45,0.72); }
.ds2 .ds-lockout-card { border-radius: 16px; }
.ds2 .ds-lockout-title { font-weight: 800; font-size: 24px; color: var(--plum); }
.ds2 .ds-lockout-cta { background: var(--plum); color: #fff; font-weight: 600; }
.ds2 .ds-lockout-cta:hover { transform: none; box-shadow: none; background: #3C0F74; }

/* ── Backup modals (restyled, same markup) ──────────────── */
.ds2 .backup-modal { border-radius: 16px; }
.ds2 .backup-modal-title { font-weight: 800; font-size: 20px; color: var(--plum); }
.ds2 .backup-modal-btn { background: var(--plum); color: #fff; font-weight: 600; }
.ds2 .backup-modal-btn:hover { transform: none; box-shadow: none; background: #3C0F74; }
.ds2 .closing-note { background: #F4F1F8; border-left-color: var(--plum); }
.ds2 .backup-restore-warning { background: #FFF6E0; border-color: #F3DFA8; border-left-color: #E0B000; }

@media (max-width: 380px) {
  .ds2 .in { width: 120px; }
  .ds2 .row .lab { font-size: 14px; }
}

/* ── Backup modals: full styles for pages that did not carry them ── */
.ds2 .backup-modal-overlay { position: fixed; inset: 0; background: rgba(31,27,45,0.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.ds2 .backup-modal-overlay.open { display: flex; }
.ds2 .backup-modal { background: #fff; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,0.3); position: relative; }
.ds2 .backup-modal-close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; font-size: 26px; color: var(--faint); cursor: pointer; padding: 4px 10px; line-height: 1; font-family: inherit; }
.ds2 .backup-modal-header { padding: 22px 24px 6px; }
.ds2 .backup-modal-body { padding: 6px 24px 14px; font-size: 14px; color: #444; line-height: 1.6; }
.ds2 .backup-modal-body p { margin: 0 0 10px; }
.ds2 .backup-modal-body ul { list-style: none; padding: 0; margin: 0 0 12px; }
.ds2 .backup-modal-body ul li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 13px; line-height: 1.55; }
.ds2 .why-dot { display: none; }
.ds2 .closing-note { border-left: 3px solid var(--plum); padding: 10px 12px; font-style: italic; color: #333; border-radius: 8px; font-size: 13px; margin-top: 8px; }
.ds2 .backup-modal-actions { padding: 0 24px 8px; display: flex; flex-direction: column; gap: 10px; }
.ds2 .backup-modal-btn { width: 100%; font-family: inherit; font-size: 15px; padding: 14px; border: none; border-radius: 12px; cursor: pointer; }
.ds2 .backup-modal-status { font-size: 12px; text-align: center; color: var(--muted); padding: 8px 24px 18px; min-height: 16px; }
.ds2 .backup-modal-status.success { color: var(--good); font-weight: 600; }
.ds2 .backup-modal-status.error { color: var(--over); font-weight: 600; }
.ds2 .backup-restore-warning { border: 1px solid #F3DFA8; border-left-width: 4px; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.ds2 .backup-restore-drop { border: 1.5px dashed var(--field); border-radius: 12px; padding: 18px; text-align: center; background: #FAF8FD; }
.ds2 .backup-restore-drop.dragging { border-color: var(--plum); }
.ds2 .backup-restore-drop-icon { display: none; }
.ds2 .backup-restore-drop-text { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.ds2 .backup-restore-drop-btn { display: inline-block; background: var(--plum); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 10px; cursor: pointer; }
.ds2 .backup-restore-drop input[type=file] { display: none; }

/* ── Hub ────────────────────────────────────────────────── */
.ds2 .tip-day .eyebrow { margin-bottom: 6px; }
.ds2 .tip-day .tip-text { font-size: 15px; line-height: 1.6; color: var(--ink); }
.ds2 .tip-day .tip-footer { font-size: 12px; color: var(--faint); margin-top: 8px; }
.ds2 .link-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.ds2 .link-row:last-child { border-bottom: none; }
.ds2 .link-row .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--plum-soft); color: var(--plum); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds2 .link-row .ico svg { width: 18px; height: 18px; }
.ds2 .link-row .txt { flex: 1; min-width: 0; }
.ds2 .link-row .ttl { display: block; font-size: 15px; font-weight: 600; }
.ds2 .link-row .dsc { display: block; font-size: 13px; color: var(--muted); }
.ds2 .tool-card-stat { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.ds2 .tool-card-stat.stat-teal { color: var(--teal); font-weight: 600; }
.ds2 .snap-grid { display: flex; }
.ds2 .snap-item { flex: 1; padding: 14px 16px; }
.ds2 .snap-item + .snap-item { border-left: 1px solid var(--line); }
.ds2 .snap-item-label { font-size: 12px; color: var(--muted); }
.ds2 .snap-item-value { font-size: 20px; font-weight: 600; color: var(--plum); font-variant-numeric: tabular-nums; }

/* ── Dashboard ──────────────────────────────────────────── */
.ds2 .status-line { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.ds2 .status-line strong { color: var(--plum); font-weight: 600; }
.ds2 .content { max-width: 720px; margin: 0 auto; padding: 16px; }
.ds2 .return-visit-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.ds2 .return-visit-card .rv-title { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.ds2 .return-visit-card .rv-body { font-size: 13px; color: var(--muted); }
.ds2 .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ds2 .stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: none; }
.ds2 .stat-label { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ds2 .stat-value { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.ds2 .stat-value.positive { color: var(--plum); }
.ds2 .stat-value.negative { color: var(--over); }
.ds2 .remaining-card { grid-column: auto; }
.ds2 .cfp-card { padding: 14px 16px; }
.ds2 .cfp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds2 .cfp-sub { font-size: 13px; color: var(--muted); }
.ds2 .cfp-val { font-size: 20px; font-weight: 600; color: var(--plum); font-variant-numeric: tabular-nums; }
.ds2 .insight-box { background: linear-gradient(135deg, var(--teal) 0%, var(--plum) 100%); border-radius: 14px; padding: 20px; margin-bottom: 14px; font-size: 15px; line-height: 1.65; font-weight: 400; box-shadow: none; }
.ds2 .insight-box strong { color: var(--gold); font-weight: 600; }
.ds2 .chart-card { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; padding: 18px 16px; margin-bottom: 14px; }
.ds2 .chart-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.ds2 .chart-legend-item { font-weight: 400; background: #F4F2F7; }
.ds2 .resource-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.ds2 .resource-prompt { font-size: 14px; color: var(--ink); }
.ds2 .resource-prompt-btn { font-weight: 600; border-radius: 10px; }
.ds2 .resource-prompt-btn.yes { background: var(--plum); }
.ds2 .resource-card-title { font-family: 'Outfit', sans-serif; font-weight: 800; color: var(--ink); }
.ds2 .resource-link { font-weight: 600; color: var(--plum); border: 1px solid var(--line); }
.ds2 .card.pad { padding: 16px; }
.ds2 .card-head { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.ds2 .card-text { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.ds2 .card-text b { color: var(--ink); font-weight: 600; }
.ds2 .action-buttons { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.ds2 .action-buttons .btn-primary { width: 100%; }
.ds2 .first-time-overlay { background: rgba(31,27,45,0.65); }
.ds2 .first-time-modal { border-radius: 16px; }
.ds2 .first-time-title { font-weight: 800; font-size: 22px; color: var(--plum); }
.ds2 .first-time-btn { background: var(--plum); color: #fff; font-weight: 600; box-shadow: none; }
.ds2 .first-time-btn:hover { transform: none; background: #3C0F74; }
/* Neutralize older page-level button rules (padding, glow, hover lift) */
.ds2 .btn.btn-primary, .ds2 .btn.btn-outline { padding: 0 20px; height: 48px; min-height: 48px; border-radius: 12px; box-shadow: none; transform: none; line-height: 1; }
.ds2 .btn.btn-outline { border: 1.5px solid var(--plum); color: var(--plum); background: #fff; }
.ds2 .btn.btn-outline:hover { background: var(--plum-soft); color: var(--plum); }

/* Donut legend opens on tap */
.ds2 .legend-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 10px; background: #F4F2F7; border: none; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--plum); cursor: pointer; }
.ds2 .legend-toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ds2 .legend-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ds2 .legend-wrap[hidden] { display: none; }
/* Insights fold open; the first lines always show */
.ds2 .insight-box.folded { max-height: 9.9em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); margin-bottom: 4px; }
.ds2 .insight-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0 0 14px; padding: 10px; background: none; border: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--plum); cursor: pointer; }
.ds2 .insight-more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ds2 .insight-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Welcome pages (Oct 2026) ───────────────────────────────
   Official logo image, tier color strip, light layout.
   Strip tells the upgrade story: Free blue→plum, Starter teal, Premium plum. */
.ds2.welcome { padding-bottom: 0; }
.ds2 .lg-img { display: block; height: auto; width: 150px; }
.ds2 .hl .lg-img { width: 140px; }
.ds2 .hl.solo .lg-img { width: 150px; }
.ds2 .app-header.strip { position: relative; border-top: 6px solid transparent; padding: 12px 20px 14px; }
.ds2 .app-header.strip::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.ds2 .strip-free::before { background: linear-gradient(90deg, #00838F 0%, #00838F 20%, #2B4F8D 55%, #4A148C 100%); }
.ds2 .strip-starter::before { background: var(--teal); }
.ds2 .strip-premium::before { background: var(--plum); }
.ds2 .tier.t-starter { color: var(--teal); }
.ds2 .tier.t-premium { color: var(--plum); }
.ds2 .tier.t-premium svg { width: 14px; height: 14px; }
.ds2 .wc { max-width: 520px; margin: 0 auto; padding: 22px 16px 8px; }
.ds2 .w-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.15; letter-spacing: -0.4px; color: var(--plum); text-align: center; margin: 4px 0 10px; }
.ds2 .w-sub { font-size: 15px; color: var(--muted); line-height: 1.55; text-align: center; margin: 0 auto 22px; max-width: 420px; }
.ds2 .w-label { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 0 4px 8px; }
.ds2 .w-points { padding: 4px 0; }
.ds2 .pt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.ds2 .pt:last-child { border-bottom: none; }
.ds2 .pt svg { width: 22px; height: 22px; color: var(--teal); flex: none; margin-top: 1px; }
.ds2 .pt b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.ds2 .pt span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.ds2 .w-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; font-size: 13px; color: var(--muted); padding: 12px 14px; text-align: center; }
.ds2 .w-steps b { color: var(--ink); font-weight: 600; }
.ds2 .w-steps i { font-style: normal; color: var(--faint); }
.ds2 .w-form { padding: 18px 16px 16px; text-align: left; }
.ds2 .w-form-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.ds2 .w-form-text { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.ds2 .w-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; margin: 12px 0 14px; cursor: pointer; text-align: left; }
.ds2 .w-consent input { width: 18px; height: 18px; accent-color: var(--plum); margin-top: 1px; flex: none; cursor: pointer; }
.ds2 .w-consent a { color: var(--ink); }
.ds2 .w-btn { width: 100%; }
.ds2 .w-btn:disabled { opacity: .45; cursor: not-allowed; }
.ds2 .w-msg { display: none; border-radius: 10px; padding: 10px 12px; font-size: 14px; text-align: center; margin-bottom: 12px; }
.ds2 .w-msg.ok { background: #E8F5EE; color: var(--good); }
.ds2 .w-msg.err { background: #FDECEC; color: var(--over); }
.ds2 .w-returning { text-align: center; margin: 4px 0 0; font-size: 14px; }
.ds2 .w-returning a { color: var(--plum); font-weight: 600; }
.ds2 .w-quote { font-size: 14px; font-style: italic; color: var(--muted); text-align: center; line-height: 1.55; margin: 22px auto 0; max-width: 380px; }
/* Privacy modal on Starter / Premium welcome */
.ds2 .w-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(31,27,45,.55); z-index: 1000; align-items: flex-start; justify-content: center; padding: 20px 16px; overflow-y: auto; }
.ds2 .w-modal { background: #fff; border-radius: 16px; padding: 22px 20px 18px; max-width: 460px; width: 100%; margin: auto; text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.ds2 .w-modal h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px; color: var(--plum); margin: 0 0 6px; }
.ds2 .w-modal > p { font-size: 14px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.ds2 .w-modal ul { list-style: none; padding: 0; margin: 0 0 6px; }
.ds2 .w-modal li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ds2 .w-modal li:last-child { border-bottom: none; }
.ds2 .w-modal li b { color: var(--ink); font-weight: 600; }
.ds2 .w-modal li a { color: var(--plum); }
.ds2 .w-modal li svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: 2px; }
.ds2 .w-modal li.warn svg { color: #B26A00; }
.ds2 .w-modal-sub { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }

/* Tier-colored primary buttons on welcome pages */
.ds2 .btn-primary.btn-free { background: linear-gradient(90deg, #00838F 0%, #2B4F8D 50%, #4A148C 100%); }
.ds2 .btn-primary.btn-free:hover { background: linear-gradient(90deg, #006A74 0%, #24427A 50%, #3C0F74 100%); }
.ds2 .btn-primary.btn-starter { background: var(--teal); }
.ds2 .btn-primary.btn-starter:hover { background: #006A74; }

/* Tier button color inside each app: body gets tier-free / tier-starter / tier-premium.
   Only filled (primary) buttons change; outlines, links and accents stay plum. */
.ds2.tier-free .btn-primary, .ds2.tier-free .first-time-btn, .ds2.tier-free .backup-modal-btn,
.ds2.tier-free .resource-prompt-btn.yes, .ds2.tier-free .backup-restore-drop-btn { background: linear-gradient(90deg, #00838F 0%, #2B4F8D 50%, #4A148C 100%); color: #fff; }
.ds2.tier-free .btn-primary:hover, .ds2.tier-free .first-time-btn:hover, .ds2.tier-free .backup-modal-btn:hover,
.ds2.tier-free .backup-restore-drop-btn:hover { background: linear-gradient(90deg, #006A74 0%, #24427A 50%, #3C0F74 100%); }
.ds2.tier-starter .btn-primary { background: var(--teal); }
.ds2.tier-starter .btn-primary:hover { background: #006A74; }
/* Upgrade buttons point to Starter, so they wear Starter's teal */
.ds2 .ds-nudge-cta, .ds2 .ds-lockout-cta { background: var(--teal); }
.ds2 .ds-nudge-cta:hover, .ds2 .ds-lockout-cta:hover { background: #006A74; }

/* What's included: tap-to-open rows (Starter / Premium welcome) */
.ds2 .w-acc { padding: 0; }
.ds2 .w-acc details { border-bottom: 1px solid var(--line); }
.ds2 .w-acc details:last-child { border-bottom: none; }
.ds2 .w-acc summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); }
.ds2 .w-acc summary::-webkit-details-marker { display: none; }
.ds2 .w-acc summary > svg:first-child { width: 20px; height: 20px; color: var(--teal); flex: none; }
.ds2 .w-acc summary .chev { margin-left: auto; width: 16px; height: 16px; color: var(--faint); transition: transform .2s ease; flex: none; }
.ds2 .w-acc details[open] summary .chev { transform: rotate(180deg); }
.ds2 .w-acc details p { margin: 0; padding: 0 16px 14px 48px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ds2 .w-acc-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); }

/* Free hub: how a budget moves to Starter / Premium */
.ds2 .upgrade-note { margin: 0; padding: 12px 16px 14px; font-size: 13px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); }

/* Before you dive in (getting-started) */
.ds2 .gs-list { padding: 0; }
.ds2 .gs-step { border-bottom: 1px solid var(--line); }
.ds2 .gs-step:last-child { border-bottom: none; }
.ds2 .gs-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.ds2 .gs-num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; font-weight: 600; background: var(--plum-soft); color: var(--plum); }
.ds2 .gs-num svg { width: 15px; height: 15px; display: none; }
.ds2 .gs-step.done .gs-num { background: var(--plum); color: #fff; }
.ds2 .gs-step.done .gs-num span { display: none; }
.ds2 .gs-step.done .gs-num svg { display: block; }
.ds2 .gs-t { flex: 1; }
.ds2 .gs-t b { display: block; font-size: 15px; font-weight: 600; }
.ds2 .gs-t span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.ds2 .gs-head .chev { width: 16px; height: 16px; color: var(--faint); transition: transform .2s ease; flex: none; }
.ds2 .gs-step.open .gs-head .chev { transform: rotate(180deg); }
.ds2 .gs-body { display: none; padding: 0 16px 16px 56px; }
.ds2 .gs-step.open .gs-body { display: block; }
.ds2 .gs-body p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.ds2 .gs-body p b { color: var(--ink); font-weight: 600; }
.ds2 .gs-note { font-size: 13px; color: var(--ink); background: var(--bg); border-radius: 10px; padding: 10px 12px; line-height: 1.5; margin: 0 0 12px; }
.ds2 .gs-got { height: 40px; padding: 0 18px; font-size: 14px; }
.ds2 .gs-start { width: 100%; margin-top: 4px; }

/* Other income lines: same row shape as the fixed income rows.
   The name on the left is the type picker (a native select laid over it);
   "Type your own" turns the name into an inline text box. Remove lives in the list. */
.ds2 .oi-lab { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; min-height: 44px; }
.ds2 .oi-txt { font-size: 15px; line-height: 1.3; color: var(--ink); min-width: 0; }
.ds2 .oi-txt.empty { color: var(--muted); }
.ds2 .oi-chev { width: 16px; height: 16px; flex: none; color: var(--muted); }
.ds2 .oi-keep { white-space: nowrap; }
.ds2 .oi-txt .oi-chev { display: inline-block; vertical-align: -3px; margin-left: 4px; }
.ds2 .oi-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.ds2 .oi-name { flex: 0 1 auto; min-width: 0; max-width: 100%; height: 36px; border: none; border-bottom: 1.5px dashed var(--field); border-radius: 0; padding: 0 2px; font: inherit; font-size: 15px; color: var(--ink); background: transparent; }
.ds2 .oi-name:focus { outline: none; border-bottom: 1.5px solid var(--plum); }
.ds2 .oi-chip { position: relative; flex: none; width: 24px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.ds2 .oi-chip:hover { background: var(--bg); }
.ds2 .oi-add { display: block; width: 100%; text-align: left; padding: 13px 16px; border: none; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--plum); cursor: pointer; }
.ds2 .oi-add:hover { background: var(--bg); }

/* ══ Starter / Premium budget (Oct 2026) ═══════════════════════════════
   Month picker, pay schedule, grouped expenses with an edit sheet,
   debt check and savings goals. Accents stay plum; filled buttons take
   the tier color via body.tier-starter / tier-premium. */
.ds2 .mrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; max-width: 720px; margin: 0 auto; padding: 12px 16px 0; }
.ds2 .msel { height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--field); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6578' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ds2 .msel:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(74,20,140,0.10); }
.ds2 .cf-link { font-size: 13px; color: var(--ink); background: none; border: none; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: inherit; }
.ds2 .mrow + .summary { margin-top: 12px; }

/* Pay schedule chips */
.ds2 .freq-q { font-size: 15px; color: var(--ink); padding: 14px 16px 2px; }
.ds2 .freq { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.ds2 .chip { height: 36px; padding: 0 14px; border: 1px solid var(--field); border-radius: 99px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.ds2 .chip[aria-pressed="true"] { border-color: var(--plum); background: var(--plum-soft); color: var(--plum); font-weight: 600; }
.ds2 .hint { font-size: 12px; color: var(--muted); padding: 0 16px 10px; margin-top: -4px; border-bottom: 1px solid var(--line); }
.ds2 .row.no-line { border-bottom: none; }

/* Expenses: view switch, groups, rows */
.ds2 .viewsw { display: flex; margin: 12px 16px; border: 1px solid var(--field); border-radius: 10px; overflow: hidden; }
.ds2 .viewsw button { flex: 1; height: 36px; border: none; background: #fff; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.ds2 .viewsw button + button { border-left: 1px solid var(--field); }
.ds2 .viewsw button[aria-pressed="true"] { background: var(--plum-soft); color: var(--plum); font-weight: 600; }
.ds2 .grp { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 6px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ds2 .grp b { font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.ds2 .grp b.over { color: var(--over); }
.ds2 .xr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; border: none; border-bottom: 1px solid var(--line); background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ds2 .xr:hover { background: #FBFAFD; }
.ds2 .xr .nm { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); line-height: 1.3; }
.ds2 .xr .nm small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ds2 .xr.other .nm { color: var(--muted); }
.ds2 .ftag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
.ds2 .ftag.review { color: #6B4E00; background: #FFF3C4; border-color: #F3DFA8; }
.ds2 .xr .am { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ds2 .xr .am small { display: block; font-size: 12px; color: var(--muted); }
.ds2 .xr .am .over, .ds2 .xr .am small.over { color: var(--over); }
.ds2 .xr .am .good { color: var(--good); }
.ds2 .xr .am .empty { color: var(--faint); }
.ds2 .xnudge { padding: 0 16px 10px; margin-top: -2px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.ds2 .addl { display: block; width: 100%; text-align: left; padding: 12px 16px; border: none; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--plum); cursor: pointer; }
.ds2 .addl:hover { background: var(--bg); }
.ds2 .empty-note { padding: 18px 16px; font-size: 14px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.ds2 .sub-total { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.ds2 .sub-total b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Bottom sheet (edit an expense) */
.ds2 .sheet-shade { position: fixed; inset: 0; background: rgba(31,27,45,.45); z-index: 200; display: none; }
.ds2 .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; background: #fff; border-radius: 18px 18px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(0,0,0,.15); max-height: 92vh; overflow-y: auto; display: none; max-width: 720px; margin: 0 auto; }
.ds2 .sheet.open, .ds2 .sheet-shade.open { display: block; }
.ds2 .sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.ds2 .sheet h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 19px; margin: 0 0 2px; color: var(--ink); }
.ds2 .sheet .sub { font-size: 13px; color: var(--muted); margin: 0 0 6px; min-height: 1em; }
.ds2 .sheet .fl { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.ds2 .sheet .in { width: 100%; }
.ds2 .sheet select.text-in { -webkit-appearance: none; appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6578' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.ds2 .sheet .text-in:disabled, .ds2 .sheet .in input:disabled { background: #F6F5F8; color: var(--faint); }
.ds2 .seg { display: flex; border: 1px solid var(--field); border-radius: 10px; overflow: hidden; }
.ds2 .seg button { flex: 1; min-height: 42px; padding: 6px 8px; border: none; background: #fff; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; line-height: 1.25; }
.ds2 .seg button + button { border-left: 1px solid var(--field); }
.ds2 .seg button[aria-pressed="true"] { background: var(--plum-soft); color: var(--plum); font-weight: 600; }
.ds2 .sheet .help { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.ds2 .sheet .lognote { font-size: 12px; color: #00626B; background: #E6F4F5; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.ds2 .sheet .err { font-size: 13px; color: var(--over); margin-top: 10px; min-height: 1em; }
.ds2 .sheet .acts { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ds2 .sheet .del { font: inherit; font-size: 14px; color: var(--over); background: none; border: none; padding: 8px 4px; cursor: pointer; }

/* Debt check rows */
.ds2 .dname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ds2 .dname input { flex: 1; min-width: 0; height: 36px; border: none; border-bottom: 1.5px dashed var(--field); padding: 0 2px; font: inherit; font-size: 15px; color: var(--ink); background: transparent; }
.ds2 .dname input:focus { outline: none; border-bottom: 1.5px solid var(--plum); }
.ds2 .xbtn { width: 30px; height: 30px; flex: none; border: none; background: none; color: var(--faint); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ds2 .xbtn:hover { color: var(--over); background: #FDECEC; }
.ds2 .xbtn svg { width: 16px; height: 16px; }
.ds2 .dti { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px 6px; }
.ds2 .dti .l { font-size: 15px; font-weight: 600; }
.ds2 .dti .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ds2 .dti .v.healthy { color: var(--good); }
.ds2 .dti .v.moderate { color: #9A6B00; }
.ds2 .dti .v.high { color: var(--over); }
.ds2 .two-paths { margin: 0 16px 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ds2 .two-paths b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 6px 0 2px; }
.ds2 .two-paths p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

/* Savings goals: one row each, tap the name for details */
.ds2 .goal { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.ds2 .gname { flex: 1; min-width: 0; display: block; text-align: left; border: none; background: none; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; }
.ds2 .gname .nm { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; font-size: 15px; color: var(--ink); line-height: 1.3; }
.ds2 .gname .ftag { margin-left: 6px; vertical-align: 0; color: var(--plum); border-color: #D9CCEA; background: var(--plum-soft); }
.ds2 .gchev { width: 14px; height: 14px; color: var(--faint); margin-left: 4px; flex: none; }
.ds2 .gbar { display: block; height: 5px; border-radius: 99px; background: #EEEBF2; overflow: hidden; margin: 6px 0 3px; max-width: 180px; }
.ds2 .gbar i { display: block; height: 100%; background: var(--plum); border-radius: 99px; }
.ds2 .gbar i.done { background: var(--good); }
.ds2 .gline { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ds2 .gline.faint { color: var(--plum); font-weight: 600; }
.ds2 .subhead { padding: 12px 16px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ds2 .affirm { margin: 0 16px 14px; font-size: 13px; font-style: italic; color: var(--plum); text-align: center; }
.ds2 .two-paths .tp-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.ds2 .cap-note { font-size: 12px; color: var(--muted); padding: 0 16px 12px; }

/* Restyled carry-forward prompt */
.ds2 .cf-overlay { position: fixed; inset: 0; background: rgba(31,27,45,.55); z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; }
.ds2 .cf-overlay.open { display: flex; }
.ds2 .cf-card { background: #fff; border-radius: 16px; max-width: 380px; width: 100%; padding: 22px 20px 16px; }
.ds2 .cf-card h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px; color: var(--plum); margin: 0 0 6px; }
.ds2 .cf-card p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.ds2 .cf-card p b { color: var(--ink); font-weight: 600; }
.ds2 .cf-card .btn { width: 100%; }
.ds2 .cf-card .btn + .btn { margin-top: 8px; }
.ds2 .cf-card small { display: block; font-size: 12px; color: var(--faint); text-align: center; margin-top: 10px; }

/* Bills tab badge (Soon / Due / Late) */
.ds2 .tab-badge { position: absolute; top: 3px; left: calc(50% + 6px); font-size: 9px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #fff; padding: 2px 5px; border-radius: 6px; border: 1.5px solid #fff; line-height: 1; display: none; }
.ds2 .tab-badge.visible { display: block; }
.ds2.tier-starter .backup-modal-btn, .ds2.tier-starter .backup-restore-drop-btn { background: var(--teal); }
.ds2.tier-starter .backup-modal-btn:hover { background: #006A74; }
.ds2 .backup-modal-btn.outline { background: #fff; color: var(--plum); border: 1.5px solid var(--plum); }
.ds2.tier-starter .backup-modal-btn.outline { background: #fff; color: #00626B; border-color: var(--teal); }
.ds2 .restore-choices { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ds2 .restore-choices p { font-size: 13px; color: var(--ink); line-height: 1.55; margin: 0 0 4px; }

/* "hidden" always wins over component display rules (guided-only actions, notes) */
.ds2 [hidden] { display: none !important; }
/* Outline buttons follow the tier color too */
.ds2.tier-starter .btn.btn-outline { border-color: var(--teal); color: #00626B; }
.ds2.tier-starter .btn.btn-outline:hover { background: #E6F4F5; color: #00626B; }

/* Starter 12-month year: heads-up, extra months and end banners */
.ds2 .yr-banner { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.ds2 .yr-banner.yr-extra { border-left-color: #E0A800; }
.ds2 .yr-banner.yr-ended { border-left-color: var(--plum); }
.ds2 .yr-banner .yr-t { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); line-height: 1.3; margin-bottom: 4px; }
.ds2 .yr-banner p { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.ds2 .yr-acts { display: flex; flex-direction: column; gap: 8px; }
.ds2 .yr-acts .btn { width: 100%; height: 44px; min-height: 44px; font-size: 15px; }
.ds2 .yr-locked input:disabled, .ds2 .yr-locked .xr:disabled, .ds2 .yr-locked .gname:disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); cursor: default; }
.ds2 .yr-locked .addl, .ds2 .yr-locked .oi-add, .ds2 .yr-locked .sec-actions, .ds2 .yr-locked .xbtn { display: none; }

/* ── Starter colour layer ──────────────────────────────────────────
   Starter's own colour: a teal header that holds the title, month menu
   and key number (in golden yellow). Gold cards for friendly moments,
   teal headings and progress, magenta on the active tab icon.
   Plum stays Premium's colour. */
.ds2.tier-starter .app-header { background: radial-gradient(130% 150% at 100% 0%, #26C6DA 0%, rgba(38,198,218,0) 50%), linear-gradient(180deg, #00838F 0%, #00747F 100%); border-bottom: none; color: #fff; padding-bottom: 10px; }
.ds2.tier-starter .app-header.strip { border-top: 0; }
.ds2.tier-starter .app-header.strip::before { display: none; }
.ds2.tier-starter .app-header .lg-img { height: 34px; width: auto; }
.ds2.tier-starter .app-title { color: #fff; font-size: 30px; margin-top: 14px; }
.ds2.tier-starter .app-sub { color: rgba(255,255,255,.82); }
.ds2.tier-starter .app-header .tier.t-starter { color: #FFC107; font-weight: 700; }
.ds2.tier-starter .mrow { max-width: none; margin: 0; padding: 4px 16px 14px; justify-content: center; background: linear-gradient(180deg, #00747F 0%, #006570 100%); }
.ds2.tier-starter .mrow + .summary { margin-top: 0; }
.ds2.tier-starter .msel { color: #fff; background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD740' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ds2.tier-starter .msel:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,215,64,.30); }
.ds2.tier-starter .msel option { color: var(--ink); background: #fff; }
.ds2.tier-starter .cf-link { color: #FFC107; font-weight: 600; text-decoration: none; }
.ds2.tier-starter .summary { background: linear-gradient(180deg, #005A63 0%, #004F57 100%); border-bottom: none; padding: 14px 20px 16px; box-shadow: 0 6px 18px rgba(0,79,87,.22); }
.ds2.tier-starter .summary .l, .ds2.tier-starter .summary .meta { color: rgba(255,255,255,.78); }
.ds2.tier-starter .summary .v { color: var(--gold); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.3px; }
.ds2.tier-starter .summary .v.over { color: #FF9EB1; }
.ds2.tier-starter .summary .bar { background: rgba(255,255,255,.16); }
.ds2.tier-starter .summary .bar i { background: var(--gold); }
.ds2.tier-starter .return-visit-card, .ds2.tier-starter .tip-day { background: #FFF6D1; border-color: #F5E2A0; }
.ds2.tier-starter .return-visit-card .rv-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 17px; color: var(--plum); }
.ds2.tier-starter .return-visit-card .rv-body { color: #5B4A1C; }
.ds2.tier-starter .tip-day .eyebrow { color: #7A5C00; }
.ds2.tier-starter .card-title, .ds2.tier-starter .card-head { color: #00727D; }
.ds2.tier-starter .viewsw button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.ds2.tier-starter .goal-r .gb i:not(.done), .ds2.tier-starter .gbar i:not(.done) { background: linear-gradient(90deg, var(--teal), #26A69A); }
.ds2.tier-starter.welcome .w-title { color: #00727D; }
.ds2.welcome .app-header .app-title.w-hero { font-size: 30px; line-height: 1.15; letter-spacing: -0.4px; margin: 18px auto 10px; max-width: 420px; text-align: center; }
.ds2.welcome .app-header .w-hero-sub { font-size: 15px; line-height: 1.55; max-width: 420px; margin: 0 auto 14px; text-align: center; }
.ds2.welcome .app-header + .wc { padding-top: 22px; }

.ds2.tier-starter .ds-tab.active { color: var(--teal); }
.ds2.tier-starter .ds-tab.active svg { color: var(--magenta); }

/* ---- Free colour layer: same layout as Starter/Premium, in the Free blue-to-plum gradient ---- */
.ds2.tier-free .app-header { background: radial-gradient(120% 140% at 100% 0%, rgba(126,87,194,.40) 0%, rgba(126,87,194,0) 55%), linear-gradient(135deg, #00838F 0%, #2B4F8D 50%, #4A148C 100%); border-bottom: none; color: #fff; padding-bottom: 10px; }
.ds2.tier-free .app-header.strip { border-top: 0; }
.ds2.tier-free .app-header.strip::before { display: none; }
.ds2.tier-free .app-header .lg-img { height: 34px; width: auto; }
.ds2.tier-free .app-title { color: #fff; font-size: 30px; margin-top: 14px; }
.ds2.tier-free .app-sub { color: rgba(255,255,255,.84); }
.ds2.tier-free .app-header .tier.t-free { color: #FFC107; font-weight: 700; }
.ds2.tier-free .summary { background: linear-gradient(135deg, #006A74 0%, #24407A 50%, #34106A 100%); border-bottom: none; padding: 14px 20px 16px; box-shadow: 0 6px 18px rgba(30,40,90,.25); }
.ds2.tier-free .summary .l, .ds2.tier-free .summary .meta { color: rgba(255,255,255,.80); }
.ds2.tier-free .summary .v { color: var(--gold); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.3px; }
.ds2.tier-free .summary .v.over { color: #FF9EB1; }
.ds2.tier-free .summary .bar { background: rgba(255,255,255,.16); }
.ds2.tier-free .summary .bar i { background: var(--gold); }
.ds2.tier-free .summary .status-line { font-size: 15px; color: rgba(255,255,255,.84); line-height: 1.45; padding: 2px 0; }
.ds2.tier-free .summary .status-line strong { color: var(--gold); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 22px; }
.ds2.tier-free .return-visit-card, .ds2.tier-free .tip-day { background: #FFF6D1; border-color: #F5E2A0; }
.ds2.tier-free .tip-day .eyebrow { color: #7A5C00; }
.ds2.tier-free .card-title, .ds2.tier-free .card-head { color: var(--plum); }
.ds2.tier-free .ds-tab.active { color: var(--plum); }
.ds2.tier-free .ds-tab.active svg { color: var(--magenta); }

/* ── Premium colour layer ──────────────────────────────────────────
   Same layout as Starter in Premium's plum: a plum header that holds the
   title, month menu and key number (in golden yellow), gold cards for
   friendly moments, plum headings and progress, magenta on the active tab icon. */
.ds2.tier-premium { --gold: #D9BC6A; --golden-yellow: #D9BC6A; }   /* Premium: midnight plum + soft gold */
.ds2.tier-premium .app-header { background: linear-gradient(165deg, #3A1070 0%, #2A0B52 50%, #1F083E 100%); border-bottom: none; color: #fff; padding-bottom: 10px; }
.ds2.tier-premium .app-header.strip { border-top: 0; }
.ds2.tier-premium .app-header.strip::before { display: none; }
.ds2.tier-premium .app-header .lg-img { height: 34px; width: auto; }
.ds2.tier-premium .app-title { color: #fff; font-size: 30px; margin-top: 14px; }
.ds2.tier-premium .app-sub { color: rgba(255,255,255,.82); }
.ds2.tier-premium .app-header .tier.t-premium { color: #D9BC6A; font-weight: 700; }
.ds2.tier-premium .mrow { max-width: none; margin: 0; padding: 4px 16px 14px; justify-content: center; background: linear-gradient(180deg, #1F083E 0%, #1C0739 100%); }
.ds2.tier-premium .mrow + .summary { margin-top: 0; }
.ds2.tier-premium .msel { color: #fff; background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.30);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD740' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ds2.tier-premium .msel:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,188,106,.35); }
.ds2.tier-premium .msel option, .ds2.tier-premium .msel optgroup { color: var(--ink); background: #fff; }
.ds2.tier-premium .cf-link { color: #D9BC6A; font-weight: 600; text-decoration: none; }
.ds2.tier-premium .summary { background: linear-gradient(180deg, #1C0739 0%, #180632 100%); border-bottom: none; padding: 14px 20px 16px; box-shadow: 0 6px 18px rgba(24,6,50,.28); }
.ds2.tier-premium .summary .l, .ds2.tier-premium .summary .meta { color: rgba(255,255,255,.78); }
.ds2.tier-premium .summary .v { color: var(--gold); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.3px; }
.ds2.tier-premium .summary .v.over { color: #FF9EB1; }
.ds2.tier-premium .summary .bar { background: rgba(255,255,255,.16); }
.ds2.tier-premium .summary .bar i { background: var(--gold); }
.ds2.tier-premium .return-visit-card, .ds2.tier-premium .tip-day { background: #FFF6D1; border-color: #F5E2A0; }
.ds2.tier-premium .return-visit-card .rv-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 17px; color: var(--plum); }
.ds2.tier-premium .return-visit-card .rv-body { color: #5B4A1C; }
.ds2.tier-premium .tip-day .eyebrow { color: #7A5C00; }
.ds2.tier-premium .card-title, .ds2.tier-premium .card-head { color: var(--plum); }
.ds2.tier-premium .viewsw button[aria-pressed="true"] { background: var(--plum); color: #fff; }
.ds2.tier-premium .ds-tab.active { color: var(--plum); }
.ds2.tier-premium .ds-tab.active svg { color: var(--magenta); }
.ds2.tier-premium.welcome .w-title { color: var(--plum); }

/* ── Premium tools (Payoff Modeler, Net Worth Tracker, Retirement Explorer) ──
   These pages keep their own layout and calculations; this lines their cards,
   buttons and summary band up with the rest of Premium. */
.ds2.tool { background: var(--bg); }
.ds2.tool .page { max-width: none; min-height: 0; }
.ds2.tool .content { max-width: 720px; margin: 0 auto; padding: 14px 16px 24px; }
.ds2.tool .sticky-zone { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, #1F083E 0%, #180632 100%); padding: 14px 20px 16px; box-shadow: 0 6px 18px rgba(24,6,50,.28); }
.ds2.tool .status-line { font-size: 15px; color: rgba(255,255,255,.82); text-align: center; line-height: 1.45; }
.ds2.tool .status-line strong { color: var(--gold); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 22px; }
.ds2.tool .summary .status-line { padding: 2px 0; }
.ds2.tool .explainer, .ds2.tool .principal-note { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--plum); border-radius: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; box-shadow: none; font-style: normal; }
.ds2.tool .explainer strong, .ds2.tool .principal-note strong { color: var(--ink); }
.ds2.tool .section-header { color: var(--plum); border-bottom: 1px solid var(--line); font-size: 19px; }
.ds2.tool .section-header.liabilities { color: var(--magenta); }
.ds2.tool .item-row, .ds2.tool .chart-card, .ds2.tool .levers-card, .ds2.tool .prev-comparison, .ds2.tool .trend-card, .ds2.tool .form-card,
.ds2.tool .scenario-card, .ds2.tool .debt-card, .ds2.tool .result-card, .ds2.tool .extra-card, .ds2.tool .available-money-card, .ds2.tool .insight-card { box-shadow: none; border: 1px solid var(--line); border-radius: 14px; }
.ds2.tool .item-row.asset { border-left: 4px solid var(--teal); }
.ds2.tool .item-row.liability { border-left: 4px solid var(--magenta); }
.ds2.tool .insight-card.green, .ds2.tool .insight-card.amber, .ds2.tool .insight-card.red { background: #fff; }
.ds2.tool .insight-card.green { border-left: 4px solid var(--good); }
.ds2.tool .insight-card.amber { border-left: 4px solid #E0A800; }
.ds2.tool .insight-card.red { border-left: 4px solid var(--magenta); }
.ds2.tool .insight-icon, .ds2.tool .lever-icon { display: none; }
.ds2.tool .available-money-card { background: #fff; }
.ds2.tool .add-item-btn, .ds2.tool .add-debt-btn { background: #fff; color: var(--plum); border: 1.5px solid var(--field); border-radius: 12px; box-shadow: none; }
.ds2.tool .add-item-btn.liabilities, .ds2.tool .add-debt-btn { color: var(--magenta); }
.ds2.tool .export-btn { color: var(--plum); border: 1.5px solid var(--field); background: #fff; border-radius: 10px; }
.ds2.tool .export-btn:hover { background: var(--plum-soft); color: var(--plum); }
.ds2.tool .footer-nav, .ds2.tool .footer { max-width: 720px; padding: 0 16px 20px; gap: 10px; }
.ds2.tool .btn-next, .ds2.tool .btn-primary, .ds2.tool .calc-btn, .ds2.tool .btn-explore { background: var(--plum); color: #fff; border: none; border-radius: 12px; box-shadow: none; font-weight: 600; }
.ds2.tool .btn-next:hover, .ds2.tool .btn-primary:hover { transform: none; background: #3E1076; }
.ds2.tool .btn-back, .ds2.tool .btn-secondary { background: #fff; color: var(--plum); border: 1.5px solid var(--field); border-radius: 12px; font-weight: 600; }
.ds2.tool .btn-back:hover, .ds2.tool .btn-secondary:hover { background: var(--plum-soft); color: var(--plum); }
.ds2.tool .mode-toggle { border-color: var(--plum); }
.ds2.tool .mode-toggle-btn { color: var(--plum); }
.ds2.tool .mode-toggle-btn.active { background: var(--plum); color: #fff; }
.ds2.tool .net-worth-display.positive, .ds2.tool .result-hero { background: linear-gradient(165deg, #3A1070 0%, #2A0B52 50%, #1F083E 100%); }
/* Premium "i" icons and their pop-ups in plum */
.ds2.tier-premium .info { border-color: var(--plum); color: var(--plum); }
.ds2.tier-premium .info[aria-expanded="true"] { background: var(--plum); color: #fff; }
.ds2.tier-premium .tip { background: var(--plum-soft); color: var(--ink); }
.ds2.tool .tip { margin: 6px 0 14px; font-size: 13px; line-height: 1.6; font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ds2.tool .labwrap { display: flex; align-items: center; gap: 8px; }
.ds2.tool label .info, .ds2.tool .form-card-title .info, .ds2.tool h4 .info { vertical-align: middle; margin-left: 4px; }
.ds2.tool .lever-row:last-child { border-bottom: none; }

/* ---- Premium tools, second pass: one colour family (plum + soft gold) and the new number style ---- */
.ds2.tier-premium.tool { --vibrant-teal: #4A148C; }   /* old teal accents (dollar signs, focus rings, toggles) become plum */
/* key numbers: same treatment as the gold number on Budget/Dashboard */
.ds2.tool .nw-value, .ds2.tool .result-hero-value, .ds2.tool .result-months { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: -.3px; color: var(--gold); font-variant-numeric: tabular-nums; }
.ds2.tool .nw-value { font-size: 40px; }
.ds2.tool .result-hero-value { font-size: 38px; }
.ds2.tool .result-months { font-size: 32px; }
/* every other amount: plain DM Sans, even-width digits, ink */
.ds2.tool .result-value, .ds2.tool .breakdown-row .breakdown-value, .ds2.tool .payoff-item-months, .ds2.tool .scenario-amount,
.ds2.tool .prev-row span, .ds2.tool .prev-change, .ds2.tool .item-amount, .ds2.tool input[type="number"] { font-family: 'DM Sans', sans-serif; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ds2.tool .result-value, .ds2.tool .breakdown-row .breakdown-value, .ds2.tool .payoff-item-months, .ds2.tool .scenario-amount { color: var(--ink); }
.ds2.tool .result-value.teal, .ds2.tool .result-value.plum, .ds2.tool .result-value.green, .ds2.tool .prev-change.positive { color: var(--plum); }
.ds2.tool .result-value.magenta, .ds2.tool .prev-change.negative { color: #C2185B; }
.ds2.tool .nw-breakdown-value { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: 0; font-variant-numeric: tabular-nums; color: #fff; }
.ds2.tool .slider-value { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0; color: var(--plum); font-variant-numeric: tabular-nums; }
.ds2.tool .scenario-age { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.2px; color: var(--plum); }
.ds2.tool .scenario-card:hover, .ds2.tool .scenario-card.active { border-color: var(--plum); }
/* Net Worth */
.ds2.tool .net-worth-display.negative, .ds2.tool .net-worth-display.zero { background: linear-gradient(165deg, #3A1070 0%, #2A0B52 50%, #1F083E 100%); }
.ds2.tool .net-worth-display.negative .nw-value { color: #FF9EB1; }
.ds2.tool .item-row.asset, .ds2.tool .item-row.liability { border-left: 1px solid var(--line); }
.ds2.tool .section-header.liabilities { color: var(--plum); border-bottom-color: var(--line); }
.ds2.tool .item-row.liability .item-currency { color: var(--plum); }
.ds2.tool .add-item-btn.liabilities, .ds2.tool .add-debt-btn { color: var(--plum); border: 1.5px solid var(--field); }
.ds2.tool .chart-wrap { height: 200px; }
.ds2.tool .export-btn { color: var(--plum); border: 1.5px solid var(--field); border-radius: 10px; background: #fff; }
.ds2.tool .export-btn:hover { background: var(--plum-soft); color: var(--plum); }
/* Debt Payoff */
.ds2.tool .available-money-card { background: #fff; border: 1px solid var(--line); }
.ds2.tool .available-money-card .card-title { color: var(--muted); }
.ds2.tool .available-money-card.over .card-title { color: #C2185B; }
.ds2.tool .breakdown-row.surplus .breakdown-label { color: var(--ink); }
.ds2.tool .breakdown-row.surplus .breakdown-value { color: var(--plum); font-size: 18px; }
.ds2.tool .breakdown-row.surplus.negative .breakdown-label, .ds2.tool .breakdown-row.surplus.negative .breakdown-value { color: #C2185B; }
.ds2.tool .use-surplus-btn { background: var(--plum); border-radius: 12px; padding: 12px 18px; font-size: 14px; }
.ds2.tool .use-surplus-btn:hover { background: #3A1070; }
.ds2.tool .use-surplus-btn:disabled { background: #CFC8DA; }
.ds2.tool .debt-card { border-left: 1px solid var(--line); }
.ds2.tool .type-pill { display: inline-flex; align-items: center; gap: 6px; }
.ds2.tool .type-pill .pill-ic { width: 14px; height: 14px; flex-shrink: 0; }
.ds2.tool .type-pill.active.cc, .ds2.tool .type-pill.active.inst { background: var(--plum); color: #fff; box-shadow: none; }
.ds2.tool .type-helper { font-style: normal; }
.ds2.tool .result-card.avalanche, .ds2.tool .result-card.snowball { background: linear-gradient(165deg, #3A1070 0%, #2A0B52 50%, #1F083E 100%); color: #fff; }
.ds2.tool .result-interest strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.ds2.tool .winner-badge.avalanche-wins, .ds2.tool .winner-badge.same { background: var(--plum-soft); color: var(--plum); border: 1px solid #DCCDEF; font-weight: 600; }
.ds2.tool .from-exp-pill { background: var(--plum-soft); color: var(--plum); }
/* Retirement */
.ds2.tool input[type="range"] { background: linear-gradient(90deg, #DCCDEF 0%, #4A148C 100%); height: 6px; }
.ds2.tool .longevity-fill.green { background: linear-gradient(90deg, #7B1FA2, #4A148C); }
.ds2.tool .longevity-fill.amber { background: linear-gradient(90deg, #E2C878, #B08D3C); }
.ds2.tool .longevity-fill.red { background: linear-gradient(90deg, #D81B60, #AD1457); }
.ds2.tool .res-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; color: var(--plum); }
.ds2.tool .res-notes { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--plum); }
.ds2.tool .res-notes + .tip > div { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; }
.ds2.tool .slider-context { background: #F6F2FA; color: var(--muted); }
.ds2.tool .result-row { gap: 12px; }
.ds2.tool .result-row .result-value { white-space: nowrap; text-align: right; }
.ds2 .w-acc .w-more details { border-bottom: 1px solid var(--line); }
.ds2 .w-more-btn { display: block; width: 100%; background: none; border: none; border-top: 1px solid var(--line); padding: 13px 16px; font: 600 14px 'DM Sans', sans-serif; color: var(--plum); cursor: pointer; text-align: center; }