/* ─────────────────────────────────────────────────────────────────────────────
   CostPilot Onboarding Wizard Styles
   ───────────────────────────────────────────────────────────────────────────── */

.onboarding-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  padding: 40px 20px;
}

.ob-shell {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ob-universal-progress {
  align-items: flex-start;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: -8px 0 0;
  position: relative;
}
.ob-universal-progress::before {
  background: var(--border);
  content: "";
  height: 2px;
  left: 10%;
  position: absolute;
  right: 10%;
  top: 15px;
}
.ob-universal-stage {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  font-size: 10px;
  gap: 7px;
  position: relative;
  text-align: center;
}
.ob-universal-stage span {
  align-items: center;
  background: var(--bg-base);
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  font-size: 10px;
  height: 30px;
  justify-content: center;
  width: 30px;
  z-index: 1;
}
.ob-universal-stage.active { color: var(--accent); }
.ob-universal-stage.active span { border-color: var(--accent); }
.ob-universal-stage.done { color: var(--accent-green); }
.ob-universal-stage.done span {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #07120a;
}
.ob-connection-plan {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 14px;
}
.ob-setup-overview,
.ob-advanced-setup {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
}
.ob-setup-overview > summary,
.ob-advanced-setup > summary {
  align-items: center;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  padding: 13px 15px;
}
.ob-setup-overview > summary span,
.ob-advanced-setup > summary span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}
.ob-setup-overview[open] > summary,
.ob-advanced-setup[open] > summary {
  border-bottom: 1px solid var(--border);
}
.ob-setup-overview .ob-connection-plan,
.ob-advanced-setup .ob-form {
  border: 0;
  border-radius: 0 0 10px 10px;
  padding: 16px;
}
.ob-connection-plan-item {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.ob-connection-plan-item strong {
  color: var(--text-primary);
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}
.ob-discovery-card {
  background: rgba(88, 166, 255, .045);
  border: 1px solid rgba(88, 166, 255, .3);
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 16px;
}
.ob-discovery-card:empty { display: none; }
.ob-sf-path {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 18px;
}
.ob-sf-path[hidden] { display: none; }
.ob-sf-path h2 {
  color: var(--text-primary);
  font-size: 17px;
  margin: 5px 0 6px;
}
.ob-sf-path-intro {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
  margin: 0 0 15px;
}
.ob-sf-path-intro strong { color: var(--text-primary); }
.ob-sf-path-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ob-sf-path-option {
  align-items: flex-start;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 112px;
  padding: 13px;
}
.ob-sf-path-option.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ob-sf-path-option.unavailable { cursor: not-allowed; opacity: .64; }
.ob-sf-path-option input { margin-top: 3px; }
.ob-sf-path-copy { display: grid; gap: 5px; }
.ob-sf-path-copy strong { color: var(--text-primary); font-size: 12px; }
.ob-sf-path-copy > span:last-child { color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.ob-sf-path-badge {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ob-sf-path-badge.secondary { color: var(--text-muted); }
.ob-sf-path-detail {
  background: rgba(88, 166, 255, .05);
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
  margin-top: 14px;
  padding: 11px 13px;
}
.ob-sf-path-detail strong { color: var(--text-primary); }
.ob-sf-record-list { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 8px; }
.ob-sf-record-list label { align-items: center; color: var(--text-primary); display: flex; gap: 5px; font-size: 10px; }
.ob-discovery-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}
.ob-discovery-head h3 { color: var(--text-primary); font-size: 14px; margin: 0 0 4px; }
.ob-discovery-head p { color: var(--text-muted); font-size: 11px; line-height: 1.5; margin: 0; }
.ob-discovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.ob-discovery-status {
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 13px;
  padding: 8px 10px;
}
.ob-discovery-mapping {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.ob-discovery-map-row {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 120px 1fr 70px;
}
.ob-discovery-map-row label { color: var(--text-primary); font-size: 11px; font-weight: 700; }
.ob-confidence { color: var(--text-muted); font-size: 10px; text-align: right; text-transform: capitalize; }
.ob-discovery-section-head {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding-top: 13px;
}
.ob-discovery-section-head:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.ob-discovery-section-head strong { color: var(--text-primary); font-size: 12px; }
.ob-discovery-section-head span { color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.ob-relationship-list { display: grid; gap: 7px; }
.ob-relationship-row {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) minmax(210px, .9fr) 75px;
  padding: 9px 10px;
}
.ob-relationship-row strong {
  color: var(--text-primary);
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}
.ob-relationship-row div > span { color: var(--text-muted); display: block; font-size: 9px; }
.ob-relationship-row div > small { color: var(--text-muted); display: block; font-size: 8px; margin-top: 3px; opacity: .78; }
.ob-relationship-row.recommended { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.ob-relationship-row.recommended .ob-confidence { color: var(--accent); font-weight: 750; }
.ob-child-behavior { min-width: 0; }
.ob-advanced-relationships {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
}
.ob-advanced-relationships summary { color: var(--text-primary); cursor: pointer; font-size: 11px; font-weight: 700; }
.ob-advanced-relationships summary span { color: var(--text-muted); font-size: 9px; font-weight: 500; margin-left: 5px; }
.ob-advanced-relationships > p { color: var(--text-muted); font-size: 9px; line-height: 1.45; margin: 7px 0 10px; }
.ob-unmapped-choice {
  align-items: center;
  color: var(--text-primary);
  display: grid;
  font-size: 11px;
  font-weight: 700;
  gap: 10px;
  grid-template-columns: 1fr minmax(210px, .9fr) 75px;
}
.ob-context-monitor {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 16px;
  padding: 18px;
}
.ob-context-monitor-summary {
  background: rgba(88, 166, 255, .05);
  border-left: 3px solid var(--accent);
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 10px 12px;
}
.ob-context-monitor-summary strong { color: var(--text-primary); font-size: 11px; }
.ob-context-monitor-summary span { color: var(--text-muted); font-size: 9px; }
.ob-context-change-list { display: grid; gap: 8px; margin-top: 12px; }
.ob-context-change {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 12px;
}
.ob-context-change strong { color: var(--text-primary); display: block; font-size: 11px; margin: 3px 0; }
.ob-context-change small { color: var(--text-muted); display: block; font-size: 9px; }
.ob-context-change-kind { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ob-context-change-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ob-entry-points-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 16px;
  padding: 18px;
}
.ob-entry-tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 4px;
  margin-top: 16px;
}
.ob-entry-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 9px 12px;
}
.ob-entry-tabs button.active { border-bottom-color: var(--accent); color: var(--text-primary); }
.ob-entry-tabs button span { color: var(--text-muted); margin-left: 4px; }
.ob-entry-panel { display: grid; gap: 7px; padding-top: 12px; }
.ob-entry-point-row {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
  padding: 10px 12px;
}
.ob-entry-point-row strong { color: var(--text-primary); display: block; font-size: 11px; }
.ob-entry-point-row small { color: var(--text-muted); display: block; font-size: 9px; margin-top: 2px; }
.ob-entry-status { color: var(--warning, #d29922); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.ob-entry-warning, .ob-entry-empty {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
  padding: 10px 0;
}
.ob-entry-warning { border-left: 3px solid var(--warning, #d29922); margin-top: 10px; padding-left: 10px; }
.ob-entry-manual { align-items: center; display: grid; gap: 10px; grid-template-columns: 120px 1fr; margin-top: 6px; }
.ob-preview-row {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-primary);
}
.ob-entry-manual span { color: var(--text-primary); font-size: 10px; font-weight: 700; }
.ob-entry-footer {
  align-items: center;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 9px;
  gap: 10px;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
}
.ob-entry-footer strong { color: var(--text-primary); }
.ob-entry-activation-summary {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  margin: 14px 20px 0;
  padding: 11px 13px;
}
.ob-entry-activation-summary strong { color: var(--text-primary); font-size: 11px; }
.ob-entry-activation-summary span { color: var(--text-muted); font-size: 10px; }
.ob-verification {
  background: linear-gradient(135deg, rgba(88, 166, 255, .08), rgba(63, 185, 80, .04));
  border: 1px solid rgba(88, 166, 255, .35);
  border-radius: 10px;
  margin-top: 20px;
  padding: 18px;
}
.ob-verification h3 { color: var(--text-primary); font-size: 15px; margin: 0 0 5px; }
.ob-verification > p { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.ob-verification-list { display: grid; gap: 8px; margin: 14px 0; }
.ob-verification-row {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  display: flex;
  font-size: 11px;
  gap: 9px;
  padding: 9px 11px;
}
.ob-verification-row.pass { border-color: rgba(63,185,80,.5); color: var(--text-primary); }
.ob-verification-row .status { color: var(--text-muted); margin-left: auto; }
.ob-verification-row.pass .status { color: var(--accent-green); }
.ob-activation-confirm {
  align-items: flex-start;
  color: var(--text-muted);
  display: flex;
  font-size: 11px;
  gap: 8px;
  line-height: 1.45;
  margin: 14px 0;
}
@media (max-width: 640px) {
  .ob-universal-stage strong { display: none; }
  .ob-connection-plan { grid-template-columns: 1fr; }
  .ob-sf-path-options { grid-template-columns: 1fr; }
  .ob-discovery-map-row { grid-template-columns: 1fr; }
  .ob-relationship-row, .ob-unmapped-choice, .ob-context-change { grid-template-columns: 1fr; }
  .ob-context-change-actions { justify-content: flex-start; }
  .ob-entry-manual { grid-template-columns: 1fr; }
  .ob-confidence { text-align: left; }
}
.ob-legacy-onboarding { display: none !important; }
.onboarding-body.ob-connection-mode .ob-business-first { display: none; }
.onboarding-body.ob-connection-mode #screen-5.ob-legacy-onboarding {
  display: block !important;
}
.ob-business-first {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
}
.ob-question-block {
  border-top: 1px solid var(--border);
  margin-top: 22px;
  padding-top: 22px;
}
.ob-question-block h2,
.ob-template-preview h2 {
  color: var(--text-primary);
  font-size: 16px;
  margin: 0 0 5px;
}
.ob-question-block > p,
.ob-template-preview > p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 13px;
}
.ob-choice-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ob-choice {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  min-height: 44px;
  padding: 9px 11px;
  text-align: left;
}
.ob-choice:hover,
.ob-choice.selected {
  border-color: var(--accent);
  background: rgba(88, 166, 255, .08);
}
.ob-choice-custom { color: var(--accent); }
.ob-custom-entry {
  margin-top: 11px;
}
.ob-business-measures { margin-bottom: 0; }
.ob-template-preview {
  background: linear-gradient(135deg, rgba(88, 166, 255, .09), rgba(63, 185, 80, .04));
  border: 1px solid rgba(88, 166, 255, .4);
  border-radius: 10px;
  margin-top: 22px;
  padding: 18px;
}
.ob-template-flow {
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 7px;
}
.ob-template-flow span {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
}
.ob-template-flow .ob-flow-arrow {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding-inline: 1px;
}
.ob-actions .ob-btn-primary:disabled {
  cursor: not-allowed;
  opacity: .45;
}

/* ── Brand ───────────────────────────────────────────────────────────────────── */
.ob-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ob-brand .brand-logo-img {
  width: min(240px, 42vw);
}
.ob-brand-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 4px;
}
.ob-brand .conn-back-link {
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}
.ob-brand .conn-back-link:hover { color: var(--accent); }

/* ── Progress ────────────────────────────────────────────────────────────────── */
.ob-progress {
  display: flex;
  align-items: center;
  gap: 0;
}
.ob-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.2s;
}
.ob-step.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 168, 255, 0.08);
}
.ob-step.done {
  border-color: var(--accent-green);
  background: var(--accent-green);
  color: #000;
}
.ob-step.done::after {
  content: "✓";
  font-size: 13px;
}
.ob-step.done { font-size: 0; }
.ob-progress-line {
  flex: 1;
  height: 2px;
  background: var(--border);
}
.ob-step-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -20px;
  padding: 0 4px;
}

/* ── Screens ─────────────────────────────────────────────────────────────────── */
.ob-screen { display: none; }
.ob-screen.active { display: block; }

.ob-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.ob-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 28px;
  line-height: 1.6;
}
.ob-universal-banner {
  background: var(--bg-panel, #171717);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 16px 18px;
  margin: -12px 0 28px;
}
.ob-universal-banner strong {
  display: block;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.ob-universal-banner p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 12px;
}
.ob-universal-banner .ob-btn-ghost {
  display: inline-block;
}

/* ── Form elements ───────────────────────────────────────────────────────────── */
.ob-form { display: flex; flex-direction: column; gap: 20px; }
.ob-field { display: flex; flex-direction: column; gap: 6px; }
.ob-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.ob-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.ob-input:focus { border-color: var(--accent); }

/* ── Provider selector ───────────────────────────────────────────────────────── */
.ob-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-provider {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.ob-provider:hover { border-color: var(--accent); }
.ob-provider.selected {
  border-color: var(--accent);
  background: rgba(0, 168, 255, 0.06);
}
.ob-provider-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.ob-provider-models { font-size: 11px; color: var(--text-muted); }
.ob-platform-group { margin-bottom: 18px; }
.ob-platform-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.ob-platform-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.ob-context-card {
  background: linear-gradient(135deg, rgba(88, 166, 255, .09), rgba(63, 185, 80, .04));
  border: 1px solid rgba(88, 166, 255, .45);
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 18px;
}
.ob-context-eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ob-context-card h2 {
  color: var(--text-primary);
  font-size: 16px;
  margin: 6px 0;
}
.ob-context-card > p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.ob-context-questions {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.ob-context-measures {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
  padding: 0;
}
.ob-context-measures legend {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  width: 100%;
}
.ob-context-measures label {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-primary);
  display: flex;
  font-size: 11px;
  gap: 6px;
  padding: 6px 10px;
}
.ob-context-result {
  background: var(--bg-base);
  border-left: 3px solid var(--accent-green);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  padding: 10px 12px;
}
.ob-context-result strong { color: var(--text-primary); }
.ob-context-custom {
  margin-top: 8px;
}
.ob-context-custom[hidden] {
  display: none;
}
.ob-relationship-approved {
  display: grid;
  gap: 5px;
}
.ob-relationship-approved > span {
  display: block;
}
.ob-relationship-preview {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.ob-relationship-preview > div {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.ob-relationship-preview span {
  color: var(--text-muted);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.ob-relationship-preview ul {
  color: var(--text-muted);
  margin: 5px 0 0;
  padding-left: 18px;
}
.ob-relationship-preview li + li {
  margin-top: 4px;
}
.ob-advanced-mapping {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 4px;
}
.ob-advanced-mapping summary {
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 14px;
}
.ob-advanced-mapping summary span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
  margin-left: 6px;
}
.ob-advanced-mapping-body {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
}

/* ── Budget input ────────────────────────────────────────────────────────────── */
.ob-budget-input { display: flex; align-items: center; gap: 8px; }
.ob-currency { font-size: 16px; color: var(--text-muted); font-weight: 600; }
.ob-currency-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.ob-budget-field { flex: 1; }

/* ── Department rows ─────────────────────────────────────────────────────────── */
.ob-dept-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ob-dept-row {
  display: grid;
  grid-template-columns: 1fr 180px 32px;
  gap: 10px;
  align-items: center;
}
.ob-dept-cap-wrap { display: flex; align-items: center; gap: 6px; }
.ob-dept-cap { text-align: right; }
.ob-dept-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  width: 32px;
  height: 36px;
  cursor: pointer;
  font-size: 12px;
}
.ob-dept-remove:hover { border-color: var(--accent-red); color: var(--accent-red); }

.ob-budget-summary {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.ob-budget-summary strong { color: var(--text-primary); }
.ob-budget-summary .green { color: var(--accent-green); }

/* ── Actions ─────────────────────────────────────────────────────────────────── */
.ob-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}
.ob-btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ob-btn-primary:hover { opacity: 0.88; }
.ob-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 14px;
  cursor: pointer;
}
.ob-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.ob-error {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent-red);
  min-height: 18px;
}

/* ── Review screen ───────────────────────────────────────────────────────────── */
.ob-review-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}
.ob-review-section { display: flex; justify-content: space-between; align-items: center; }
.ob-review-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.ob-review-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ob-review-depts {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ob-review-dept-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ob-review-dept-row:last-child { border-bottom: none; }
.ob-review-dept-name { color: var(--text-primary); font-weight: 500; }
.ob-review-dept-cap { color: var(--accent-green); font-family: var(--font-mono); font-weight: 600; }
.ob-review-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
}

/* ── Launch screen ───────────────────────────────────────────────────────────── */
.ob-launch-wrap {
  text-align: center;
  padding: 20px 0;
}
.ob-launch-icon {
  font-size: 48px;
  color: var(--accent);
  margin-bottom: 16px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.ob-launch-steps {
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-family: var(--font-mono);
  min-height: 80px;
}
.ob-launch-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Salesforce Integration Screen ──────────────────────────────────────────── */
.ob-sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Generated Code Block ────────────────────────────────────────────────────── */
.ob-code-section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ob-code-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #1c2128;
  flex-wrap: wrap;
}
.ob-code-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex: 1;
}
.ob-code-hint {
  font-size: 11px;
  color: var(--text-muted);
  flex: 2;
}
.ob-copy-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.ob-copy-btn:hover { opacity: 0.85; }

.ob-code-block {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  padding: 16px 20px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.7;
  margin: 0;
  max-height: 340px;
  overflow-y: auto;
}

/* ── Flow Steps ──────────────────────────────────────────────────────────────── */
.ob-flow-steps { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.ob-flow-step  { display: flex; gap: 14px; align-items: flex-start; font-size: 13px; line-height: 1.6; }
.ob-flow-num   {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #000; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.ob-flow-step code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-base); padding: 1px 5px; border-radius: 4px; }

/* ── Field Table ─────────────────────────────────────────────────────────────── */
.ob-field-table { overflow: hidden; }
.ob-field-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr 1fr;
  padding: 9px 16px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  align-items: center;
}
.ob-field-row:last-child { border-bottom: none; }
.ob-field-row-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  background: #1c2128;
}
.ob-field-row .mono { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }

.ob-map-field-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(180px, 2fr) 28px;
  gap: 8px;
  align-items: center;
}
.ob-map-field-label,
.ob-map-field-name {
  background: var(--bg-base, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text-primary, #e6edf3);
  font-size: 12px;
  padding: 7px 10px;
  min-width: 0;
}
.ob-map-field-name {
  font-family: var(--font-mono);
}
.ob-map-field-label:focus,
.ob-map-field-name:focus {
  border-color: var(--accent);
  outline: none;
}

/* ── Success Banner ──────────────────────────────────────────────────────────── */
.ob-success-banner {
  margin-top: 20px;
  background: #0d2d1a;
  border: 1px solid var(--accent-green);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13px;
  color: var(--accent-green);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .ob-shell { max-width: 100%; }
  .ob-provider-grid,
  .ob-platform-grid,
  .ob-choice-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .ob-sf-row,
  .ob-context-questions,
  .ob-map-field-row,
  .ob-dept-row {
    grid-template-columns: 1fr;
  }
  .ob-budget-summary,
  .ob-review-section,
  .ob-actions {
    align-items: stretch;
    flex-direction: column;
  }
}