/* ============================================================
 * Liability Benchmark page
 * ============================================================
 * Cards / palette mirror the predictor + SONIA pages so the tool
 * feels native to the rest of the site.
 * ============================================================ */

.lb-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1.25rem;
  padding: 14px 18px 14px 16px;
  background: linear-gradient(120deg, #0a2540 0%, #143659 60%, #1a4775 100%);
  border-radius: 8px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.lb-hero::after {
  content: "";
  position: absolute;
  top: -60%; right: -10%;
  width: 60%; height: 220%;
  background: radial-gradient(circle, rgba(253, 126, 20, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.lb-hero-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 126, 20, 0.18);
  color: #fd7e14;
  font-size: 20px;
}
.lb-hero-body { position: relative; z-index: 1; }
.lb-hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fd7e14;
  font-weight: 700;
  margin-bottom: 2px;
}
.lb-hero-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.2;
}
.lb-hero-sub {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 760px;
}
.lb-hero-sub strong { color: #fd7e14; font-weight: 700; }

/* Summary stat strip */
.lb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 1rem;
}
.lb-stats-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .lb-stats-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .lb-stats { grid-template-columns: repeat(2, 1fr); }
  .lb-stats-5 { grid-template-columns: repeat(2, 1fr); }
}
.lb-stat {
  background: #fff;
  border: 1px solid #e9ecef;
  border-left: 3px solid #fd7e14;
  border-radius: 6px;
  padding: 10px 14px;
}
.lb-stat-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6c757d;
  font-weight: 700;
  margin-bottom: 2px;
}
.lb-stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0a2540;
  font-variant-numeric: tabular-nums;
}
.lb-stat-meta {
  font-size: 12px;
  color: #6c757d;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Card chrome shared with chart + table */
.lb-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10, 37, 64, 0.04);
}
.lb-card + .lb-card { margin-top: 1rem; }
.lb-card-head {
  background: linear-gradient(120deg, #0a2540 0%, #143659 60%, #1a4775 100%);
  color: #fff;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.lb-card-head-title {
  color: #fd7e14;
  font-weight: 700;
  font-size: 14px;
}
.lb-card-head-sub {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.lb-card-body { padding: 12px 16px; }

/* CFR chart container — height comes from its child div's inline
   style (each widget sets its own appropriate height). Default to
   auto so a shorter chart doesn't leave dead space below. */
.lb-chart-wrap {
  width: 100%;
  position: relative;
}

/* Schemes table */
.lb-schemes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.lb-schemes-table thead th {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #495057;
  font-weight: 700;
}
.lb-schemes-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f3f5;
  vertical-align: middle;
}
.lb-schemes-table tbody tr:last-child td { border-bottom: none; }
.lb-schemes-table tbody tr:hover { background: rgba(253, 126, 20, 0.03); }
.lb-num { text-align: right; font-variant-numeric: tabular-nums; font-family: "DM Mono", monospace; }
.lb-scheme-name { font-weight: 600; color: #0a2540; }

.lb-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
}
.lb-badge-legacy {
  background: rgba(26, 71, 117, 0.12);
  color: #1a4775;
}
.lb-badge-mtfs {
  background: rgba(253, 126, 20, 0.18);
  color: #c84a00;
}
.lb-badge-reserve {
  background: rgba(108, 117, 125, 0.18);
  color: #495057;
}

/* Headline stat (liability benchmark): crimson border + value to
   match the LB line on the chart. The "where we sit" figure. */
.lb-stat-headline {
  background: linear-gradient(120deg, rgba(201, 42, 42, 0.06), rgba(201, 42, 42, 0.02));
  border-left-color: #c92a2a;
}
.lb-stat-headline .lb-stat-value { color: #c92a2a; }

/* "Why this matters" framing block — sits between the chart and
   the scheme-level tables. Heavier visual treatment than the
   methodology note at the bottom because it lands the conceptual
   point users come away from the chart with. */
.lb-framing {
  background: #fff;
  border: 1px solid #e9ecef;
  border-left: 4px solid #5f3dc4;
  border-radius: 8px;
  padding: 16px 20px 18px;
  margin: 1rem 0 1.25rem;
  box-shadow: 0 2px 8px rgba(10, 37, 64, 0.04);
}
.lb-framing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5f3dc4;
  margin-bottom: 4px;
}
.lb-framing-eyebrow .bi { font-size: 14px; }
.lb-framing-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0a2540;
  margin: 0 0 8px;
  line-height: 1.3;
}
.lb-framing-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: #1a1a1a;
}
.lb-framing-body p { margin: 0; }
.lb-framing-body p + p { margin-top: 8px; }
.lb-framing-body strong { color: #0a2540; }
.lb-framing-body em { font-style: italic; color: #495057; }

/* Methodology note at the bottom — same look as predictor's disclaimer */
.lb-note {
  background: rgba(253, 126, 20, 0.05);
  border: 1px solid rgba(253, 126, 20, 0.22);
  border-left: 3px solid #fd7e14;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 1rem;
  font-size: 13px;
  line-height: 1.55;
  color: #1a1a1a;
}
.lb-note-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #c84a00;
  margin-bottom: 4px;
}
.lb-note p { margin: 0; }
.lb-note p + p { margin-top: 6px; }

/* ── Profile picker — canonical LA shapes ──────────────────────────
   Sits above the chart card. Selected chip uses the navy/orange
   accent so the active profile is unambiguous. */
.lb-profile-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 6px;
  padding: 0;
  flex-wrap: wrap;
}
.lb-profile-bar-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6c757d;
  flex-shrink: 0;
}
.lb-profile-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lb-profile-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-family: inherit;
}
.lb-profile-chip:hover {
  background: rgba(253, 126, 20, 0.06);
  border-color: rgba(253, 126, 20, 0.45);
  color: #b85a02;
}
.lb-profile-chip.is-selected {
  background: #0a2540;
  color: #fd7e14;
  border-color: #0a2540;
  font-weight: 700;
}
.lb-profile-narrative {
  margin: 4px 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #495057;
  padding: 10px 14px;
  background: rgba(253, 126, 20, 0.04);
  border-left: 3px solid #fd7e14;
  border-radius: 0 6px 6px 0;
}
.lb-profile-narrative:empty { display: none; }

/* ── LB walk-through table ─────────────────────────────────────────
   Categories down the left, financial years across the top. Subtotal
   rows are visually emphasised so the calculation structure reads
   like an accountant's worksheet. First column sticks on horizontal
   scroll so the label is always visible. */
.lb-walk-card { margin-top: 16px; }
.lb-walk-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lb-walk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.lb-walk-table thead th {
  background: #0a2540;
  color: #fd7e14;
  border-bottom: 1px solid #143659;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.lb-walk-table thead th.lb-walk-row-label {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #0a2540;
}
.lb-walk-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f3f5;
  font-variant-numeric: tabular-nums;
  font-family: "DM Mono", monospace;
  text-align: right;
  white-space: nowrap;
  color: #212529;
}
.lb-walk-table tbody td.lb-walk-row-label {
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  color: #495057;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #ffffff;
}
.lb-walk-table tbody td.lb-walk-row-label.is-bold,
.lb-walk-table tbody td.lb-num.is-bold {
  font-weight: 700;
  color: #0a2540;
}
.lb-walk-table tbody td.lb-walk-row-label.is-indent {
  padding-left: 26px;
  color: #6c757d;
  font-size: 12px;
}
.lb-walk-table tbody td.lb-num.is-indent {
  color: #6c757d;
}
/* Subtotal rows — bordered top + bottom, light grey fill, navy text.
   Reads as "stop here, this is the running total". */
.lb-walk-table tbody tr.is-subtotal-row td {
  background: #fafbfc;
  border-top: 1px solid #ced4da;
  border-bottom: 1px solid #ced4da;
  font-weight: 700;
  color: #0a2540;
}
.lb-walk-table tbody tr.is-subtotal-row td.lb-walk-row-label {
  background: #fafbfc;
}
.lb-walk-table tbody tr.is-subtotal-row td.lb-num {
  border-top: 2px solid #0a2540;
  border-bottom: 2px solid #0a2540;
}
.lb-walk-table tbody tr.is-subtotal-row + tr td {
  border-top: none; /* avoid double border under the subtotal */
}
.lb-walk-table tbody tr:last-child td { border-bottom: none; }

/* Maturity-bunching heatmap rows — used in the course maturity-profile
   widget to flag concentration risk against the LB. */
.lb-walk-table tbody tr.is-subtotal-row.is-warn td {
  background: rgba(252, 196, 25, 0.18);
}
.lb-walk-table tbody tr.is-subtotal-row.is-bad td {
  background: rgba(201, 42, 42, 0.18);
  color: #8b1d1d;
}
.lb-walk-table tbody tr.is-subtotal-row.is-bad td.lb-walk-row-label {
  color: #8b1d1d;
}

/* ── Stress lab — sliders + KPI tiles + live chart ────────────────
   Embedded inside academy course chunks. Compact, mobile-friendly,
   re-uses the same chart engine. */
.lb-stress-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(10, 37, 64, 0.04);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 8px;
  margin: 8px 0 12px;
}
.lb-stress-row {
  display: grid;
  grid-template-columns: 1fr 200px 60px;
  gap: 12px;
  align-items: center;
}
.lb-stress-label {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
}
.lb-stress-range {
  width: 100%;
  accent-color: #fd7e14;
}
.lb-stress-readout {
  font-size: 12px;
  font-weight: 700;
  color: #0a2540;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lb-stress-actions {
  grid-template-columns: 1fr;
  justify-items: end;
  margin-top: 4px;
}
.lb-stress-reset {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 999px;
  cursor: pointer;
}
.lb-stress-reset:hover {
  background: rgba(253, 126, 20, 0.05);
  border-color: rgba(253, 126, 20, 0.40);
  color: #b85a02;
}
.lb-stress-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.lb-stress-kpi {
  padding: 10px 12px;
  background: linear-gradient(135deg, #0a2540 0%, #143659 100%);
  border-radius: 8px;
  color: #fff;
}
.lb-stress-kpi-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fd7e14;
  margin-bottom: 4px;
}
.lb-stress-kpi-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lb-stress-kpi-trend {
  font-size: 12px;
  font-weight: 500;
  margin-left: 6px;
  opacity: 0.85;
}

/* Stress lab tabs — Chart | Walk maths. Both update from the same
   slider state; only one pane visible at a time. */
.lb-stress-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.lb-stress-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.lb-stress-tab:hover {
  background: rgba(253, 126, 20, 0.06);
  border-color: rgba(253, 126, 20, 0.45);
  color: #b85a02;
}
.lb-stress-tab.is-selected {
  background: #0a2540;
  color: #fd7e14;
  border-color: #0a2540;
  font-weight: 700;
}
.curve-chat-root .lb-stress-tab {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #cdd5df;
}
.curve-chat-root .lb-stress-tab:hover {
  background: rgba(253, 126, 20, 0.10);
  border-color: rgba(253, 126, 20, 0.55);
  color: #fd7e14;
}
.curve-chat-root .lb-stress-tab.is-selected {
  background: #fd7e14;
  border-color: #fd7e14;
  color: #0a2540;
  font-weight: 700;
}
.lb-stress-tabpane { margin-top: 4px; }
.lb-stress-tabpane[hidden] { display: none !important; }
@media (max-width: 680px) {
  .lb-stress-row { grid-template-columns: 1fr; gap: 4px; }
  .lb-stress-readout { text-align: left; }
  .lb-stress-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Two-pool flow indicator ─────────────────────────────────────── */
.lb-twopool-flow {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(151, 117, 250, 0.06);
  border: 1px solid rgba(151, 117, 250, 0.30);
  border-radius: 8px;
}
.lb-twopool-flow-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f3dc4;
  margin-bottom: 6px;
}
.lb-twopool-flow-body {
  font-size: 13px;
  color: #495057;
  line-height: 1.5;
}

/* ── Recharge calculator ────────────────────────────────────────── */
.lb-recharge-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.lb-recharge-tab {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 999px;
  cursor: pointer;
}
.lb-recharge-tab:hover {
  background: rgba(253, 126, 20, 0.06);
  border-color: rgba(253, 126, 20, 0.45);
  color: #b85a02;
}
.lb-recharge-tab.is-selected {
  background: #0a2540;
  color: #fd7e14;
  border-color: #0a2540;
}
.lb-recharge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 680px) {
  .lb-recharge-grid { grid-template-columns: 1fr; }
}
.lb-recharge-row-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lb-recharge-label {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
}
.lb-recharge-input {
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.lb-recharge-input:focus {
  outline: none;
  border-color: #fd7e14;
}
.lb-recharge-summary {
  padding: 12px 14px;
  background: #fafbfc;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}
.lb-recharge-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: #495057;
  font-variant-numeric: tabular-nums;
}
.lb-recharge-row.is-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 2px solid #0a2540;
  font-weight: 700;
  color: #0a2540;
  font-size: 14px;
}

/* ============================================================
   Dark variants — scoped under .curve-chat-root so they only
   apply when the LB widgets render inside the academy concierge
   chat. The standalone /liability-benchmark.html page keeps the
   light styles above.
   ============================================================ */
.curve-chat-root .lb-card {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.curve-chat-root .lb-card-head {
  background: linear-gradient(135deg, #0a2540 0%, #143659 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.curve-chat-root .lb-card-head-title { color: #fd7e14; }
.curve-chat-root .lb-card-head-sub { color: rgba(231, 234, 240, 0.65); }

.curve-chat-root .lb-walk-table thead th {
  background: #0a2540;
  border-bottom-color: #fd7e14;
  color: #fd7e14;
}
.curve-chat-root .lb-walk-table thead th.lb-walk-row-label {
  background: #0a2540;
}
.curve-chat-root .lb-walk-table tbody td {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #e7eaf0;
}
.curve-chat-root .lb-walk-table tbody td.lb-walk-row-label {
  background: rgba(15, 23, 42, 0.85);
  color: #cdd5df;
}
.curve-chat-root .lb-walk-table tbody td.lb-walk-row-label.is-bold,
.curve-chat-root .lb-walk-table tbody td.lb-num.is-bold {
  color: #fff;
}
.curve-chat-root .lb-walk-table tbody td.lb-walk-row-label.is-indent {
  color: #94a3b8;
}
.curve-chat-root .lb-walk-table tbody td.lb-num.is-indent {
  color: #94a3b8;
}
.curve-chat-root .lb-walk-table tbody tr.is-subtotal-row td {
  background: rgba(253, 126, 20, 0.10);
  border-top-color: rgba(253, 126, 20, 0.55);
  border-bottom-color: rgba(253, 126, 20, 0.55);
  color: #fff;
}
.curve-chat-root .lb-walk-table tbody tr.is-subtotal-row td.lb-walk-row-label {
  background: rgba(253, 126, 20, 0.18);
  color: #fff;
}
.curve-chat-root .lb-walk-table tbody tr.is-subtotal-row td.lb-num {
  border-top: 2px solid rgba(253, 126, 20, 0.70);
  border-bottom: 2px solid rgba(253, 126, 20, 0.70);
}
.curve-chat-root .lb-walk-table tbody tr.is-subtotal-row.is-warn td {
  background: rgba(252, 196, 25, 0.18);
  color: #ffd43b;
}
.curve-chat-root .lb-walk-table tbody tr.is-subtotal-row.is-bad td {
  background: rgba(255, 107, 107, 0.18);
  color: #ffa8a8;
}

.curve-chat-root .lb-profile-bar-label {
  color: rgba(231, 234, 240, 0.55);
}
.curve-chat-root .lb-profile-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #cdd5df;
}
.curve-chat-root .lb-profile-chip:hover {
  background: rgba(253, 126, 20, 0.10);
  border-color: rgba(253, 126, 20, 0.55);
  color: #fd7e14;
}
.curve-chat-root .lb-profile-chip.is-selected {
  background: #fd7e14;
  border-color: #fd7e14;
  color: #0a2540;
  font-weight: 700;
}
.curve-chat-root .lb-profile-narrative {
  background: rgba(253, 126, 20, 0.08);
  border-left-color: #fd7e14;
  color: #cdd5df;
}

/* Stress lab — sliders + KPI tiles on the dark surface */
.curve-chat-root .lb-stress-panel {
  background: rgba(15, 23, 42, 0.60);
  border-color: rgba(255, 255, 255, 0.10);
}
.curve-chat-root .lb-stress-label { color: #cdd5df; }
.curve-chat-root .lb-stress-readout { color: #fff; }
.curve-chat-root .lb-stress-reset {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.20);
  color: #cdd5df;
}
.curve-chat-root .lb-stress-reset:hover {
  background: rgba(253, 126, 20, 0.10);
  border-color: rgba(253, 126, 20, 0.50);
  color: #fd7e14;
}

/* Recharge calculator — inputs + summary on dark */
.curve-chat-root .lb-recharge-tab {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #cdd5df;
}
.curve-chat-root .lb-recharge-tab:hover {
  background: rgba(253, 126, 20, 0.10);
  border-color: rgba(253, 126, 20, 0.55);
  color: #fd7e14;
}
.curve-chat-root .lb-recharge-tab.is-selected {
  background: #fd7e14;
  border-color: #fd7e14;
  color: #0a2540;
}
.curve-chat-root .lb-recharge-label { color: #cdd5df; }
.curve-chat-root .lb-recharge-input {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.curve-chat-root .lb-recharge-input:focus { border-color: #fd7e14; }
.curve-chat-root .lb-recharge-summary {
  background: rgba(15, 23, 42, 0.60);
  border-color: rgba(255, 255, 255, 0.10);
}
.curve-chat-root .lb-recharge-row { color: #cdd5df; }
.curve-chat-root .lb-recharge-row.is-total {
  border-top-color: #fd7e14;
  color: #fff;
}

/* ── Stepped build-up widget ───────────────────────────────────────
   Module 2's interactive build. Narrative block, chart, then a
   controls row (Back · dots · Next). Finale section reveals at the
   end. Dark-friendly throughout — primary usage is the academy chat. */
.lb-buildup-narrative {
  padding: 10px 14px;
  background: rgba(253, 126, 20, 0.06);
  border: 1px solid rgba(253, 126, 20, 0.30);
  border-left-width: 3px;
  border-radius: 8px;
  margin: 8px 0;
  min-height: 80px;
}
.lb-buildup-narrative p { font-size: 12.5px; line-height: 1.5; }
.curve-chat-root .lb-buildup-narrative {
  background: rgba(253, 126, 20, 0.10);
  border-color: rgba(253, 126, 20, 0.45);
  color: #cdd5df;
}
.lb-buildup-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fd7e14;
  margin-bottom: 4px;
}
.lb-buildup-title {
  font-size: 17px;
  font-weight: 700;
  color: #0a2540;
  margin: 0 0 8px;
}
.curve-chat-root .lb-buildup-title { color: #fff; }
.lb-buildup-narrative p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 6px;
}
.lb-buildup-narrative p:last-child { margin-bottom: 0; }

.lb-buildup-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 0;
}
.lb-buildup-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ced4da;
  color: #495057;
}
.lb-buildup-btn:hover:not(:disabled) {
  background: rgba(253, 126, 20, 0.08);
  border-color: rgba(253, 126, 20, 0.50);
  color: #b85a02;
}
.lb-buildup-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lb-buildup-btn-primary {
  justify-self: end;
  background: #fd7e14;
  border-color: #fd7e14;
  color: #fff;
}
.lb-buildup-btn-primary:hover {
  background: #e66a06;
  border-color: #e66a06;
  color: #fff;
}
.curve-chat-root .lb-buildup-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #cdd5df;
}
.curve-chat-root .lb-buildup-btn:hover:not(:disabled) {
  background: rgba(253, 126, 20, 0.12);
  border-color: rgba(253, 126, 20, 0.55);
  color: #fd7e14;
}
.curve-chat-root .lb-buildup-btn-primary {
  background: #fd7e14;
  border-color: #fd7e14;
  color: #0a2540;
}
.curve-chat-root .lb-buildup-btn-primary:hover {
  background: #ffa94d;
  border-color: #ffa94d;
  color: #0a2540;
}

.lb-buildup-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lb-buildup-stepN {
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  letter-spacing: 0.04em;
}
.curve-chat-root .lb-buildup-stepN { color: rgba(231, 234, 240, 0.65); }

.lb-buildup-dots {
  display: flex;
  gap: 6px;
}
.lb-buildup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(108, 117, 125, 0.30);
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.lb-buildup-dot:hover { transform: scale(1.25); }
.lb-buildup-dot.is-done { background: rgba(253, 126, 20, 0.45); }
.lb-buildup-dot.is-active {
  background: #fd7e14;
  box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.20);
}
.curve-chat-root .lb-buildup-dot { background: rgba(255, 255, 255, 0.18); }
.curve-chat-root .lb-buildup-dot.is-done { background: rgba(253, 126, 20, 0.55); }

.lb-buildup-finale {
  margin-top: 8px;
}
@media (max-width: 680px) {
  .lb-buildup-controls { grid-template-columns: 1fr; gap: 8px; }
  .lb-buildup-btn-primary { justify-self: stretch; }
}