/* ============================================================
   Bampaa Coach  -  Page Styles
   Uses the global design tokens from styles.css:
   --bg, --panel, --card, --text, --text-muted, --border,
   --brand, --brand-600, --brand-700
   ============================================================ */

/* ── Mode toggle (shared with cleanroom) ─────────────────── */
.mode-toggle-bar {
  width: 100%;
  max-width: 680px;
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}

.mode-toggle {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.mode-toggle-btn {
  padding: 7px 22px;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.mode-toggle-btn:hover {
  color: var(--text);
}

.mode-toggle-btn.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* ── Page shell ──────────────────────────────────────────── */
.coach-page {
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 80px;
}

.coach-container {
  width: 100%;
  max-width: 680px;
}

/* ── Header ──────────────────────────────────────────────── */
.coach-header {
  width: 100%;
  max-width: 680px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 26px;
}

.coach-logo {
  width: 38px;
  height: 38px;
  background: var(--brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  flex-shrink: 0;
}

.coach-brand {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 19px;
}


/* ── Progress bar ────────────────────────────────────────── */
.coach-progress-wrap {
  margin-bottom: 20px;
}

.coach-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.coach-progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.coach-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ── Onboarding step indicator ───────────────────────────── */
.coach-ob-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 0 4px;
}

.ob-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Clickable (done) step - resets button styles, adds pointer + hover */
button.ob-step-back {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
button.ob-step-back:hover .ob-dot.done {
  background: rgba(106,165,156,0.3);
  border-color: var(--brand);
}
button.ob-step-back:hover .ob-step-label.done {
  text-decoration: underline;
}

.ob-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  border: 2px solid var(--border);
  color: var(--text-muted);
  background: var(--panel);
  transition: all 0.2s ease;
}

.ob-dot.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(106,165,156,0.15);
}

.ob-dot.done {
  border-color: var(--brand);
  background: rgba(106,165,156,0.15);
  color: var(--brand);
}

.ob-step-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ob-step-label.active { color: var(--text); font-weight: 600; }
.ob-step-label.done   { color: var(--brand); }

.ob-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 6px;
  margin-bottom: 18px;
  transition: background 0.2s ease;
}

.ob-connector.done { background: var(--brand); }

/* ── Welcome hero ─────────────────────────────────────────── */
.coach-welcome-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coach-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--brand) 8%, var(--panel)),
    var(--panel));
}

.coach-hero-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(106,165,156,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.coach-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.coach-hero-pill {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 14px;
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.2);
  border-radius: 20px;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.coach-hero-pill span {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.coach-btn-hero {
  margin-top: 4px;
}

/* ── How it works strip ───────────────────────────────────── */
.coach-how-strip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 20px 18px;
}

.coach-how-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.coach-how-steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coach-how-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coach-how-num {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.coach-how-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.coach-how-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.coach-how-arrow {
  font-size: 16px;
  color: var(--border);
  flex-shrink: 0;
  padding-bottom: 10px;
}

/* ── Goal option cards (with icon + desc) ────────────────── */
.coach-goal-options,
.coach-time-options {
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.coach-goal-label,
.coach-time-label {
  padding: 14px 16px !important;
}

/* Tool card inner layout */
.co-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.co-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(106,165,156,0.1);
  border: 1px solid rgba(106,165,156,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--teal);
  margin-top: 1px;
}

.co-icon-sql    { background: rgba(60,120,200,0.1);  border-color: rgba(60,120,200,0.22); }
.co-icon-python { background: rgba(75,139,190,0.1);  border-color: rgba(75,139,190,0.2);  }
.co-icon-dax    { background: rgba(242,201,76,0.1);  border-color: rgba(242,201,76,0.2);  }

.co-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.co-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.co-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

.co-recommended {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #6AA59C;
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.28);
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 5px;
  width: fit-content;
}

.coach-option-label:has(.coach-radio-input:checked) .co-name {
  color: var(--brand);
}
.coach-option-label:has(.coach-radio-input:checked) .co-icon {
  background: rgba(106,165,156,0.18);
  border-color: rgba(106,165,156,0.45);
}

/* ── Level option row ────────────────────────────────────── */
.coach-level-label {
  padding: 14px 16px !important;
}

.coach-level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.coach-level-row .co-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}

.coach-level-row > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

/* ── Level meter (4 bars) ────────────────────────────────── */
.lvl-meter {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.lvl-bar {
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
}

.lvl-bar.filled {
  background: var(--brand);
  border-color: var(--brand);
}

.coach-option-label:has(.coach-radio-input:checked) .lvl-bar.filled {
  background: #fff;
  border-color: #fff;
}

/* Section divider between goal / time / tools blocks */
.coach-section-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* ── Selected checkmark badge ────────────────────────────── */
.coach-industry-label,
.coach-option-label {
  position: relative;
}

.coach-industry-label:has(.coach-radio-input:checked)::after,
.coach-option-label:has(.coach-radio-input:checked)::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  text-align: center;
}

/* ── Card ────────────────────────────────────────────────── */
.coach-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 14px;
  animation: coachFadeUp 0.3s ease both;
}

@keyframes coachFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Typography ──────────────────────────────────────────── */
.coach-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.coach-title {
  font-family: 'Syne', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.coach-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.teal { color: var(--brand); }

/* ── Welcome hero ────────────────────────────────────────── */
.coach-hero-tag {
  display: inline-block;
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.2);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.coach-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin-bottom: 12px;
}

.coach-hero-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.coach-flow-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.coach-flow-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
}

.coach-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
}

.coach-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 12px 14px;
  background: rgba(106,165,156,0.06);
  border-radius: 10px;
  border-left: 3px solid var(--brand);
  margin-bottom: 0;
}

/* ── Run button ─────────────────────────────────────────── */
.coach-btn-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  margin-top: 10px;
  background: rgba(106,165,156,0.15);
  color: #6AA59C;
  border: 1px solid rgba(106,165,156,0.4);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.coach-btn-run:hover {
  background: rgba(106,165,156,0.25);
  border-color: #6AA59C;
}

.coach-run-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.coach-run-row .coach-btn-run {
  margin-top: 0;
}
.coach-run-info {
  display: inline;
}
.coach-run-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.coach-run-info-icon::-webkit-details-marker { display: none; }
.coach-run-info-text {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.coach-expected-details {
  margin-top: 10px;
}
.coach-expected-details > summary {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
}

.coach-exec-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.coach-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  margin-top: 20px;
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.coach-btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
  transform: translateY(-1px);
}

.coach-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Button loading spinner — add .btn-loading class to show spinner */
.btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Also apply to ghost and run buttons */
.coach-btn-ghost.btn-loading,
.coach-btn-run.btn-loading,
.coach-btn-hero.btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.coach-btn-ghost.btn-loading::after,
.coach-btn-run.btn-loading::after,
.coach-btn-hero.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(106,165,156,0.3);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

/* Auto-spinner: .coach-pending disables all action buttons, clicked one shows spinner via .btn-loading */
.coach-page.coach-pending .coach-btn-primary,
.coach-page.coach-pending .coach-btn-run,
.coach-page.coach-pending .pm-phase-skip,
.coach-page.coach-pending .coach-btn-send {
  pointer-events: none;
  opacity: 0.5;
}

/* Breadcrumb back-to-plan link at top of exercise card */
.coach-btn-plan-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: color 0.15s;
}
.coach-btn-plan-crumb:hover { color: var(--brand); }

.coach-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.coach-btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.coach-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.coach-btn-secondary:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.coach-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.coach-btn-row .coach-btn-primary {
  margin-top: 0;
  flex: 1;
}

.coach-btn-row .coach-btn-secondary {
  flex: 1;
}

/* Score improvement delta */
.coach-score-delta {
  font-size: 12px;
  font-weight: 500;
  margin-left: 6px;
}

.coach-score-delta.up   { color: #4caf7d; }
.coach-score-delta.down { color: #e07b54; }
.coach-score-delta.same { color: var(--text-muted); }

/* Retry prompt under "stronger answer" label */
.coach-fb-retry-prompt {
  font-size: 12px;
  color: var(--brand);
  font-style: italic;
  margin-bottom: 6px;
}

/* ── Industry grid ───────────────────────────────────────── */
.coach-industry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.coach-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.coach-industry-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 14px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.coach-industry-label:hover {
  border-color: var(--brand);
  background: rgba(106,165,156,0.07);
  transform: translateY(-2px);
}

.coach-industry-label:has(.coach-radio-input:checked) {
  border-color: var(--brand);
  background: rgba(106,165,156,0.12);
}

.ci-icon {
  font-size: 26px;
  margin-bottom: 8px;
}

.ci-name {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.coach-industry-label:has(.coach-radio-input:checked) .ci-name {
  color: var(--brand);
}

.ci-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

.coach-other-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 15px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  margin-top: 10px;
  transition: border-color 0.2s;
}

.coach-other-input:focus {
  outline: none;
  border-color: var(--brand);
}

.coach-other-input::placeholder {
  color: var(--text-muted);
}

/* ── Option list ─────────────────────────────────────────── */
.coach-options {
  display: flex !important;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 6px;
}

.coach-tool-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.coach-tool-options .coach-option-label:hover {
  transform: none;
}

/* legacy — no longer used */
.co-recommended-badge { display: none; }

.coach-option-label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: all 0.18s ease;
  user-select: none;
}

.coach-option-label:hover {
  border-color: var(--brand);
  background: rgba(106,165,156,0.07);
  transform: translateX(3px);
}

.coach-option-label:has(.coach-radio-input:checked) {
  border-color: var(--brand);
  background: rgba(106,165,156,0.1);
  position: relative;
}

.coach-tool-options .coach-option-label:has(.coach-radio-input:checked)::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
}

/* Unselected tool cards slightly dimmed */
.coach-tool-options .coach-option-label:not(:has(.coach-radio-input:checked)) {
  opacity: 0.75;
}
.coach-tool-options .coach-option-label:not(:has(.coach-radio-input:checked)):hover {
  opacity: 1;
}

/* ── Tools checklist ─────────────────────────────────────── */
.coach-tools-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}

.coach-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.coach-tool-label {
  display: flex !important;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  transition: all 0.18s;
  user-select: none;
}

.coach-tool-label:hover {
  border-color: var(--brand);
  background: rgba(106,165,156,0.07);
}

.coach-tool-label:has(.coach-check-input:checked) {
  border-color: var(--brand);
  background: rgba(106,165,156,0.12);
  color: var(--brand);
}

/* ── Skill snap ──────────────────────────────────────────── */
.coach-code-block {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.75;
  color: #C8CDDC;
  margin-bottom: 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Python Notebook Cell ─────────────────────────────────────────────────── */
.coach-notebook-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--bg);
}
.nb-prompt-row {
  background: color-mix(in srgb, var(--bg) 60%, var(--panel));
  border-bottom: 1px solid var(--border);
  padding: 4px 14px;
}
.nb-prompt {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
}
.nb-cell {
  border-radius: 0 !important;
  border: none !important;
  background: var(--bg) !important;
  padding-left: 24px !important;
  margin-bottom: 0 !important;
}

/* ── Spreadsheet Formula Bar ──────────────────────────────────────────────── */
.coach-xl-wrap {
  margin-bottom: 14px;
}
.xl-formula-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a2535;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}
.xl-fx-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.25);
  border-radius: 5px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.xl-formula-text {
  font-size: 13px;
  color: #E8EAF0;
  letter-spacing: 0.3px;
}

/* ── Power BI Measure Editor ──────────────────────────────────────────────── */
.coach-pbi-wrap {
  border: 1px solid rgba(255,193,7,0.15);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #1a1a2e;
}
.pbi-measure-label {
  background: #252540;
  border-bottom: 1px solid rgba(255,193,7,0.12);
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(242,201,76,0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pbi-cell {
  border-radius: 0 !important;
  border: none !important;
  background: #1a1a2e !important;
  margin-bottom: 0 !important;
}

/* Tool-specific annotation accent colours */
.ann-python .coach-ann-keyword { color: #569CD6; }
.ann-xl .coach-ann-keyword { color: #217346; }
.ann-dax .coach-ann-keyword { color: #F2C94C; }

.coach-snap-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 15px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  resize: none;
  min-height: 80px;
  transition: border-color 0.2s;
}

.coach-snap-input:focus {
  outline: none;
  border-color: var(--brand);
}

.coach-snap-input::placeholder {
  color: var(--text-muted);
}

.coach-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.coach-error {
  font-size: 13px;
  color: #f87171;
  margin-top: 8px;
  padding: 10px 13px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: 8px;
}

/* ── Plan screen ─────────────────────────────────────────── */
.coach-plan-topline {
  text-align: center;
  padding: 4px 0 20px;
}

.coach-plan-title {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.coach-plan-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.coach-placement-banner {
  background: rgba(106,165,156,0.1);
  border: 1px solid rgba(106,165,156,0.25);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.coach-placement-icon {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}

.coach-placement-level {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 4px;
}

.coach-placement-msg {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.coach-stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.coach-stat-box {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 14px;
  text-align: center;
}

.coach-stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
}

.coach-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.coach-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--brand);
  text-transform: uppercase;
  margin: 20px 0 10px;
}

.coach-day-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color 0.2s;
}

.coach-day-card:hover {
  border-color: rgba(106,165,156,0.3);
}

.coach-day-card.today {
  border-color: var(--brand);
  background: rgba(106,165,156,0.08);
  cursor: pointer;
}

.coach-day-card.done {
  opacity: 0.5;
}

.coach-day-num {
  width: 30px;
  height: 30px;
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
}

.coach-day-card.today .coach-day-num {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.coach-day-card.done .coach-day-num {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border-color: var(--border);
}

.coach-day-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}

.coach-day-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Portfolio teaser */
.coach-portfolio-teaser {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  opacity: 0.6;
}

.coach-portfolio-teaser::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent);
}

.coach-portfolio-inner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.coach-portfolio-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.coach-portfolio-title {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
}

.coach-portfolio-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

.coach-unlock-pill {
  display: inline-block;
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.2);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 10px;
}

.coach-lock-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 17px;
  opacity: 0.35;
}

/* ── Adaptation note ─────────────────────────────────────── */
.coach-adapt-note {
  font-size: 12px;
  color: var(--brand);
  background: rgba(106,165,156,0.06);
  border: 1px solid rgba(106,165,156,0.15);
  border-radius: 8px;
  padding: 9px 13px;
  margin-bottom: 12px;
  text-align: center;
}

/* ── Phase map (replaces journey strip) ──────────────────── */
.coach-phase-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Left panel */
.pm-left {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}

/* Right panel */
.pm-right {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pm-panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}

/* Step rows (left panel) */
.pm-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0.45;
}

.pm-step.done {
  opacity: 0.6;
}

.pm-step.current {
  opacity: 1;
}

.pm-step-icon {
  font-size: 14px;
  line-height: 1;
  margin-top: 2px;
  color: var(--text-muted);
  min-width: 14px;
  text-align: center;
}

.pm-step.done .pm-step-icon {
  color: var(--brand);
}

.pm-step.current .pm-step-icon {
  color: var(--brand);
}

.pm-step-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.pm-step-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Phase rows (right panel) */
.pm-phase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-rebuild-btn {
  background: none;
  border: 1px solid rgba(239,68,68,0.3);
  color: rgba(239,68,68,0.7);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  width: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pm-rebuild-btn:hover {
  background: rgba(239,68,68,0.08);
  color: rgb(239,68,68);
  border-color: rgba(239,68,68,0.6);
}

.pm-phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.pm-phase-row.pm-phase-here {
  background: rgba(106,165,156,0.07);
  border-color: rgba(106,165,156,0.2);
}

.pm-phase-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-phase-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-phase-here .pm-phase-num {
  background: rgba(106,165,156,0.15);
  border-color: rgba(106,165,156,0.4);
  color: var(--brand);
}

.pm-phase-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.pm-phase-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.pm-phase-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pm-phase-badge.here {
  background: rgba(106,165,156,0.15);
  border: 1px solid rgba(106,165,156,0.35);
  color: var(--brand);
}

.pm-phase-badge.locked {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  opacity: 0.6;
}

.pm-phase-skip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.pm-phase-skip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

@media (max-width: 540px) {
  .coach-phase-map {
    grid-template-columns: 1fr;
  }
  .pm-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .pm-phase-desc {
    display: none;
  }
  .pm-phase-row {
    justify-content: space-between;
  }
  .pm-phase-skip,
  .pm-phase-badge {
    margin-left: auto;
  }
  .pm-rebuild-btn {
    margin-left: auto;
  }
}

/* ── Exercise / Brief screen ─────────────────────────────── */
.coach-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.coach-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(106,165,156,0.08);
  color: var(--brand);
  border: 1px solid rgba(106,165,156,0.2);
}

.coach-tag.grey {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border-color: var(--border);
}

.coach-tag.accent {
  background: rgba(45,122,78,0.12);
  color: #2d7a4e;
  border-color: rgba(45,122,78,0.25);
}

.coach-ex-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

/* ── Scene header (industry context illustration above brief) ── */
.coach-scene-header {
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.coach-scene-header svg {
  display: block;
  width: 100%;
}

/* ── Concept graphic inside brief ──────────────────────────── */
.coach-brief-graphic {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Scene wrapper from scene_graphics.py */
.tut-scene {
  border-radius: 10px;
  overflow: hidden;
}

/* Collapsible brief container */
.coach-brief-details {
  margin: 16px 0;
}

.coach-brief-summary {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--brand);
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(106,165,156,0.05);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background 0.15s;
}

.coach-brief-summary::-webkit-details-marker { display: none; }

.coach-brief-summary::before {
  content: "▶";
  font-size: 9px;
  transition: transform 0.2s;
}

.coach-brief-details[open] .coach-brief-summary::before {
  transform: rotate(90deg);
}

.coach-brief-details[open] .coach-brief-summary {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}

.coach-brief-summary:hover {
  background: rgba(106,165,156,0.10);
}

.coach-brief-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 18px;
  margin-bottom: 0;
}

.coach-brief-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.coach-brief-analogy {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 10px;
}

.coach-brief-explanation {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.coach-brief-points {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coach-brief-point {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
}

.coach-brief-point::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--brand);
}

.coach-brief-point-label {
  color: var(--brand);
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.coach-key-points {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coach-kp-item {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
}

.coach-kp-takeaway {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  padding: 4px 0 0 0;
  list-style: none;
}

.coach-brief-syntax {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  padding: 10px 13px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #a8d8b8;
  margin-bottom: 12px;
}

.coach-ex-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 13px;
}

/* Exercise data table */
.coach-ex-table-wrap {
  margin-bottom: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Foundational concept table + annotation labels */
.coach-concept-table-wrap {
  margin-bottom: 20px;
}

.coach-concept-table {
  margin-bottom: 12px;
}

.coach-concept-labels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.coach-concept-label-item {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 16px;
}
.coach-concept-label-inline {
  padding-left: 0;
  list-style: none;
  position: relative;
  line-height: 1.55;
}

.coach-concept-label-item:not(.coach-concept-label-inline)::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 600;
}

/* ── Annotated concept table (foundational days) ─────────── */
.coach-annot-table-wrap { overflow-x: auto; }

/* ROW highlight — first data row */
.coach-annot-table tbody tr.coach-annot-row td {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

/* COLUMN — left border traces the column extent on body cells only */
.coach-annot-table td.coach-annot-col-cell {
  border-left: 3px solid #7c3aed !important;
}

/* CELL highlight — bottom-right, clear of row and column highlights */
.coach-annot-table td.coach-annot-cell {
  background: color-mix(in srgb, #d97706 22%, transparent);
  outline: 2px solid #d97706;
  outline-offset: -2px;
  vertical-align: top;
}

/* Annotation badges */
.coach-annot-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 1.6;
  white-space: nowrap;
  flex-shrink: 0;
}
.coach-annot-badge.row-badge  { background: #0d9488; color: #fff; }
.coach-annot-badge.col-badge  { background: #7c3aed; color: #fff; }
.coach-annot-badge.cell-badge { background: #d97706; color: #fff; }

/* Inline explanation text next to each badge */
.coach-annot-inline-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.4;
  margin-left: 6px;
  white-space: normal;
}

/* ROW badge cell — extra column, transparent, no border */
.coach-annot-row-badge-cell {
  background: transparent !important;
  border: none !important;
  padding-left: 12px;
  vertical-align: middle;
  max-width: 200px;
}
.coach-annot-table tbody tr.coach-annot-row td.coach-annot-row-badge-cell {
  background: transparent !important;
}
/* Row badge + label laid out horizontally */
.coach-annot-table td.coach-annot-row-badge-cell {
  display: table-cell;
}

/* All headers align to bottom so COLUMN badge doesn't misalign order_id vs other headers */
.coach-annot-table thead th {
  vertical-align: bottom;
}
/* Last row top-aligns so other cells sit level with the value in the CELL badge cell */
.coach-annot-table tbody tr:last-child td {
  vertical-align: top;
}
.coach-annot-col-above {
  display: block;
  margin-bottom: 4px;
}

/* CELL badge row: badge + explanation inside bottom-right cell */
.coach-annot-cell-label-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.coach-ex-table-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

.coach-ex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.coach-ex-table th {
  background: color-mix(in srgb, var(--bg) 60%, var(--panel));
  padding: 9px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--brand);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}

.coach-ex-table td {
  padding: 9px 14px;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  font-size: 13px;
}

.coach-ex-table tbody tr:last-child td {
  border-bottom: none;
}

.coach-ex-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--brand) 3%, transparent);
}

.coach-ex-table tbody tr:hover td {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  transition: background 0.12s;
}

.coach-task-box {
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 16px;
  position: relative;
}

.coach-task-box::before {
  content: "YOUR TASK";
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand);
  margin-bottom: 8px;
}

/* ── Try it yourself note ────────────────────────────────── */
.coach-try-yourself {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
  background: rgba(106,165,156,0.06);
  border: 1px solid rgba(106,165,156,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.coach-answer-area {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 13.5px;
  line-height: 1.75;
  resize: vertical;
  min-height: 130px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.coach-answer-area:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(106,165,156,0.12);
}

.coach-answer-area::placeholder {
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-style: italic;
}

/* ── Feedback screen ─────────────────────────────────────── */
/* ── Feedback screen ─────────────────────────────────────── */
.coach-fb-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.coach-fb-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-radius: 16px 16px 0 0;
  margin-bottom: 0;
}

.coach-fb-header.great { background: color-mix(in srgb, #4caf7d 14%, var(--panel)); border: 1px solid color-mix(in srgb, #4caf7d 30%, var(--border)); }
.coach-fb-header.ok    { background: color-mix(in srgb, #e8a838 12%, var(--panel)); border: 1px solid color-mix(in srgb, #e8a838 28%, var(--border)); }
.coach-fb-header.low   { background: color-mix(in srgb, #e07b54 12%, var(--panel)); border: 1px solid color-mix(in srgb, #e07b54 28%, var(--border)); }

.coach-fb-score-block {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.coach-fb-score-num {
  font-family: 'Syne', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.coach-fb-header.great .coach-fb-score-num { color: #4caf7d; }
.coach-fb-header.ok    .coach-fb-score-num { color: #e8a838; }
.coach-fb-header.low   .coach-fb-score-num { color: #e07b54; }

.coach-fb-score-denom-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-bottom: 4px;
}

.coach-fb-score-denom {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1;
}

.coach-fb-score-pts {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.coach-fb-header-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coach-fb-attempt-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.coach-fb-verdict {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* Two-column what worked / what to fix */
.coach-fb-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.coach-fb-col {
  padding: 16px;
}

.coach-fb-col.worked {
  border-right: 1px solid var(--border);
  border-top: 3px solid #4caf7d;
}

.coach-fb-col.fix {
  border-top: 3px solid #e8a838;
}

.coach-fb-col-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.coach-fb-col.worked .coach-fb-col-label { color: #4caf7d; }
.coach-fb-col.fix    .coach-fb-col-label { color: #e8a838; }

.coach-fb-col-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

/* ── Execution result block ────────────────────────────────── */
.coach-exec-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 12px 0;
  background: var(--panel);
}
.coach-exec-block.error {
  border-color: #f87171;
  background: rgba(248,113,113,0.06);
}
.coach-exec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}
.coach-exec-block.error .coach-exec-label {
  color: #f87171;
}
.coach-exec-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.coach-exec-table-wrap {
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}
.coach-exec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'Fira Code', monospace;
}
.coach-exec-th {
  background: var(--bg);
  color: var(--brand);
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.coach-exec-td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
.coach-exec-trunc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}
.coach-exec-scalar {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Fira Code', monospace;
}
.coach-exec-chart {
  width: 100%;
  border-radius: 8px;
  margin-top: 6px;
  display: block;
}
.coach-exec-stdout {
  font-size: 12px;
  color: var(--text);
  font-family: 'Fira Code', monospace;
  white-space: pre-wrap;
  margin: 0;
  max-height: 150px;
  overflow-y: auto;
}
.coach-exec-error {
  font-size: 12px;
  color: #f87171;
  font-family: 'Fira Code', monospace;
  white-space: pre-wrap;
  margin: 0;
}

/* Stronger answer block */
.coach-fb-answer-block {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 0 0;
  overflow: hidden;
  margin-bottom: 14px;
}

.coach-fb-answer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}

.coach-fb-answer-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.coach-fb-retry-prompt {
  font-size: 11px;
  color: var(--brand);
  font-style: italic;
}

.coach-fb-code {
  margin: 0;
  padding: 14px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  background: rgba(0,0,0,0.15);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Tomorrow teaser */
.coach-fb-tomorrow {
  display: flex;
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 4px;
}

.coach-fb-tomorrow-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  white-space: nowrap;
}

.coach-fb-tomorrow-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

/* Keep section wrapper for any other usage */
.coach-fb-section {
  margin-bottom: 16px;
}

.coach-fb-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}

.coach-fb-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

/* ── Paywall ─────────────────────────────────────────────── */
.coach-paywall {
  text-align: center;
  padding: 40px 24px;
}

.coach-paywall-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.coach-paywall h2 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
}

.coach-paywall p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 380px;
  margin: 0 auto 24px;
}

.coach-paywall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.coach-paywall-btn:hover {
  opacity: 0.85;
}

/* ── Upgrade screen ─────────────────────────────────────── */
.coach-upgrade-days {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 18px 0 24px;
  text-align: left;
}

.coach-upgrade-day {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  opacity: 0.6;
}

.coach-upgrade-day-num {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
}

.coach-upgrade-day-title {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Tool intro (Step 0) ─────────────────────────────────── */
.coach-intro-reassure {
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 14px;
}

.coach-intro-what {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 16px;
}

.coach-intro-why {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── MCQ cards (fill-in step) ───────────────────────────── */
.coach-mcq-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.coach-mcq-card {
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}

.coach-mcq-card:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  transform: translateY(-1px);
}

.coach-fill-hint-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-style: italic;
}

/* ── Helpers row (syntax ref + hint, side by side) ───────── */
.coach-helpers-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}

/* ── Fill in the blank (Step 2) ──────────────────────────── */
.coach-fill-ref-wrap {
  margin-bottom: 14px;
  overflow-x: auto;
}

.coach-fill-ref-table {
  font-size: 13px;
  width: 100%;
}

.coach-fill-pre {
  border: 2px solid color-mix(in srgb, var(--brand) 40%, var(--border));
}

.coach-fill-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}

.coach-fill-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.coach-fill-input:focus {
  outline: none;
  border-color: var(--brand);
}

.coach-btn-check {
  padding: 10px 20px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.coach-btn-check:hover {
  background: var(--brand-600);
}

.coach-fill-feedback {
  min-height: 36px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  transition: all 0.25s;
  line-height: 1.4;
}

.coach-fill-feedback.correct {
  color: #1a5c38;
  background: #d4f0e0;
  border: 1px solid #a3d9b8;
}

.coach-fill-feedback.wrong {
  color: #7a3010;
  background: #fde8d8;
  border: 1px solid #f0c4a0;
}

/* ── Syntax reference + Hint collapsibles (Try It step) ──── */
.coach-ref-details,
.coach-hint-details {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.15s;
}

.coach-ref-details[open],
.coach-hint-details[open] {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
}

.coach-ref-summary {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s;
}

.coach-ref-summary:hover {
  color: var(--text);
}

.coach-ref-details[open] .coach-ref-summary,
.coach-hint-details[open] .coach-hint-summary {
  color: var(--brand);
  border-bottom: 1px solid var(--border);
}

.coach-ref-summary::-webkit-details-marker { display: none; }

.coach-ref-summary::before {
  content: "{ }";
  color: var(--brand);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  background: rgba(106,165,156,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.coach-ref-code {
  padding: 12px 16px 14px;
  margin: 0;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(0,0,0,0.2);
  color: #a8d8b8;
  white-space: pre;
  overflow-x: auto;
}

/* ── Before / after table (Step 3) ──────────────────────── */
.coach-before-after {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin: 16px 0;
}

.coach-ba-panel {
  flex: 1 1 280px;
  min-width: 0;
  overflow-x: auto;
}

.coach-ba-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.coach-ba-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.coach-ba-table th {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
}

.coach-ba-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  color: var(--text);
}

.coach-ba-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel) 60%, var(--bg));
}

.coach-ba-arrow {
  font-size: 22px;
  color: var(--brand);
  padding-top: 28px;
  flex-shrink: 0;
  font-weight: 700;
}

/* ── Analogy box (clean, no label) ───────────────────────── */
.coach-analogy-box {
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  font-style: italic;
}

/* ── Sub-step title ──────────────────────────────────────── */
/* ── Multi-topic section header ──────────────────────────── */
.coach-topic-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 10%, var(--panel)),
    color-mix(in srgb, var(--brand) 5%, var(--panel))
  );
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.coach-topic-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
}

.coach-topic-divider {
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--brand) 40%, transparent);
  flex-shrink: 0;
}

.coach-topic-name {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* ── Small context badge for non-intro sub-steps in multi-topic mode ── */
.coach-topic-context {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 16px;
  display: inline-block;
  letter-spacing: 0.3px;
}

.coach-sub-step-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}

/* ── Sub-step insight chip ───────────────────────────────── */
.coach-substep-insight {
  display: flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Sub-step plain body text (replaces italic analogy box) ── */
.coach-substep-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 14px;
}

/* ── Sub-step bullet points ──────────────────────────────── */
.coach-substep-intro {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.coach-substep-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 14px;
}
.coach-substep-point {
  padding: 5px 0;
  line-height: 1.5;
}

/* ── Syntax build-up ladder ──────────────────────────────── */
/* ── Syntax anatomy diagram (Option A — grouped blocks) ── */
.coach-syntax-diagram {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.coach-sdg-part {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 140px;
}

.coach-sdg-token {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 10px 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  flex: 1;
}

.coach-sdg-keyword {
  background: rgba(106, 165, 156, 0.12);
  color: #6AA59C;
  border: 1px solid rgba(106, 165, 156, 0.28);
  border-bottom: none;
}

.coach-sdg-value {
  background: rgba(255,255,255,0.05);
  color: #E8EAF0;
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: none;
}

.coach-sdg-connector {
  display: none;
}

.coach-sdg-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  padding: 6px 10px;
  border-radius: 0 0 10px 10px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.coach-sdg-keyword + .coach-sdg-connector + .coach-sdg-label,
.coach-sdg-part:has(.coach-sdg-keyword) .coach-sdg-label {
  background: rgba(106, 165, 156, 0.18);
  color: #6AA59C;
  border: 1px solid rgba(106, 165, 156, 0.28);
  border-top: none;
}

.coach-sdg-part:has(.coach-sdg-value) .coach-sdg-label {
  background: rgba(255,255,255,0.04);
  color: rgba(200, 205, 220, 0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: none;
}

/* ── Syntax keyword annotations ─────────────────────────── */
.coach-syntax-annotations {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.coach-ann-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.coach-ann-keyword {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6AA59C;
  min-width: 100px;
  flex-shrink: 0;
}

.coach-ann-desc {
  font-family: 'DM Sans', sans-serif;
  color: rgba(200, 205, 220, 0.65);
  font-size: 0.85rem;
}

.coach-ladder-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.coach-syntax-ladder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.coach-ladder-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.coach-ladder-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}

.coach-ladder-body {
  flex: 1;
  min-width: 0;
}

.coach-ladder-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.coach-ladder-code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  overflow-x: auto;
}

/* ── Exercise step progress ──────────────────────────────── */
.coach-ex-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.coach-ex-dots-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coach-ex-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.coach-ex-step-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.coach-ex-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.2s;
}

.coach-ex-dot.done {
  background: var(--brand);
  opacity: 0.5;
}

.coach-ex-dot.active {
  width: 28px;
  border-radius: 6px;
  background: var(--brand);
}

.coach-ex-step-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ── Exercise nav row ────────────────────────────────────── */
.coach-ex-nav {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: center;
}

.coach-ex-nav .coach-btn-primary {
  margin-top: 0;
  flex: 1;
}

/* ── XP + Streak badges (feedback screen) ───────────────── */
.coach-xp-badges {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.coach-xp-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--brand) 15%, var(--panel));
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.coach-streak-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: #fff5e0;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}

.coach-bonus-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, #2d7a4e 12%, var(--panel));
  color: #2d7a4e;
  font-size: 12px;
  font-weight: 700;
}

/* ── Drill ──────────────────────────────────────────────────────────────── */
.coach-drill-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.coach-drill-dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}
.coach-drill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s;
}
.coach-drill-dot.done   { background: var(--brand); }
.coach-drill-dot.active { background: var(--brand); opacity: 0.5; }
.coach-drill-counter {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.coach-drill-badges { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.coach-drill-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.coach-drill-badge.easy   { background: rgba(45,122,78,0.1);  color: #2d7a4e; border-color: rgba(45,122,78,0.25); }
.coach-drill-badge.medium { background: rgba(180,130,0,0.1);  color: #b48200; border-color: rgba(180,130,0,0.25); }
.coach-drill-badge.hard   { background: rgba(180,50,50,0.1);  color: #b43232; border-color: rgba(180,50,50,0.25); }
.coach-drill-badge.review { background: rgba(106,165,156,0.1); color: var(--brand); border-color: rgba(106,165,156,0.25); }

.coach-drill-table-wrap { overflow-x: auto; margin: 12px 0; border-radius: 8px; }
.coach-drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.coach-drill-table th {
  background: rgba(255,255,255,0.04);
  padding: 7px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.coach-drill-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}

.coach-drill-feedback {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 12px 0 8px;
  font-size: 14px;
  line-height: 1.5;
}
.coach-drill-feedback.correct { background: rgba(45,122,78,0.1);  border-left: 3px solid #2d7a4e; }
.coach-drill-feedback.wrong   { background: rgba(180,50,50,0.08); border-left: 3px solid #b43232; }
.coach-drill-fb-icon { font-weight: 700; font-size: 16px; margin-top: 1px; }
.coach-drill-feedback.correct .coach-drill-fb-icon { color: #2d7a4e; }
.coach-drill-feedback.wrong   .coach-drill-fb-icon { color: #b43232; }
.coach-drill-fb-text { color: var(--text); }

.coach-drill-given-answer {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.coach-drill-user-answer {
  font-family: monospace;
  font-size: 12px;
  color: var(--text);
}

/* Drill summary */
/* ── Drill celebration banner ── */
.coach-drill-celebrate {
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.coach-drill-celebrate.great {
  background: radial-gradient(circle at top left, rgba(106,165,156,0.18), rgba(15,23,42,0.6));
  border: 1px solid rgba(106,165,156,0.35);
}
.coach-drill-celebrate.perfect {
  background: radial-gradient(circle at top left, rgba(251,191,36,0.15), rgba(15,23,42,0.6));
  border: 1px solid rgba(251,191,36,0.35);
}
.coach-drill-celebrate-title {
  font-size: 22px;
  font-weight: 700;
  color: #E8EAF0;
  margin-bottom: 4px;
}
.coach-drill-celebrate.perfect .coach-drill-celebrate-title {
  color: #fbbf24;
}
.coach-drill-celebrate-sub {
  font-size: 13px;
  color: rgba(200,205,220,0.65);
}

.coach-drill-sum-rows { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.coach-drill-sum-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  font-size: 13px;
}
.coach-drill-sum-row.correct { background: rgba(45,122,78,0.08); }
.coach-drill-sum-row.wrong   { background: rgba(192,57,43,0.08); }
.coach-drill-sum-row.skipped { background: rgba(255,255,255,0.02); opacity: 0.7; }

.coach-drill-sum-icon {
  font-size: 14px;
  font-weight: 700;
  width: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.coach-drill-sum-row.correct .coach-drill-sum-icon { color: #2d7a4e; }
.coach-drill-sum-row.wrong   .coach-drill-sum-icon { color: #c0392b; }
.coach-drill-sum-row.skipped .coach-drill-sum-icon { color: var(--text-muted); }

.coach-drill-sum-detail { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.coach-drill-sum-task   { font-size: 13px; color: var(--text); line-height: 1.4; }
.coach-drill-sum-note   { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.coach-drill-sum-stat {
  font-size: 22px;
  font-weight: 800;
  margin-right: 2px;
}
.coach-drill-sum-stat.correct { color: #2d7a4e; }
.coach-drill-sum-stat.wrong   { color: #c0392b; }
.coach-drill-sum-stat.skipped { color: var(--text-muted); }

.coach-drill-skip-nudge {
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--brand);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
  line-height: 1.5;
}

.coach-hint-summary {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s;
}

.coach-hint-summary:hover { color: var(--text); }

.coach-hint-summary::-webkit-details-marker { display: none; }

.coach-hint-summary::before {
  content: "💡";
  font-size: 13px;
  background: rgba(106,165,156,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.coach-hint-body {
  padding: 12px 16px 14px;
  font-size: 13.5px;
  color: var(--text);
  background: rgba(0,0,0,0.1);
  line-height: 1.65;
}

/* ── Review (spaced repetition) screen ──────────────────── */
.coach-review-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.coach-review-context {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.coach-review-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.coach-review-opt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text);
  font-size: 14px;
}
.coach-review-opt-card:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.coach-review-opt-card.correct {
  border-color: #2d7a4e;
  background: color-mix(in srgb, #2d7a4e 10%, transparent);
  color: #2d7a4e;
  font-weight: 600;
  cursor: default;
}
.coach-review-opt-card.wrong {
  border-color: #c0392b;
  background: color-mix(in srgb, #c0392b 10%, transparent);
  color: #c0392b;
  cursor: default;
}
.coach-review-opt-card.dim {
  opacity: 0.45;
  cursor: default;
}

.coach-review-opt-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--border);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  color: var(--text-muted);
}
.coach-review-opt-card.correct .coach-review-opt-key {
  background: #2d7a4e;
  color: #fff;
}
.coach-review-opt-card.wrong .coach-review-opt-key {
  background: #c0392b;
  color: #fff;
}

.coach-review-opt-text { flex: 1; }

.coach-review-question {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* RadioItems wrapper for MCQ */
.coach-mcq-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.coach-mcq-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.coach-mcq-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: all 0.15s;
}

.coach-mcq-label:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}

.coach-mcq-label:hover {
  border-color: var(--brand);
}

/* Result list (after checking) */
.coach-mcq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.coach-mcq-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.coach-mcq-opt.correct {
  border-color: #2d7a4e;
  background: #e8f7ee;
  color: #2d7a4e;
  font-weight: 600;
}

.coach-mcq-opt.wrong {
  border-color: #c0392b;
  background: #fdecea;
  color: #c0392b;
}

.coach-mcq-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--border);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.coach-mcq-opt.correct .coach-mcq-key {
  background: #2d7a4e;
  color: #fff;
}

.coach-mcq-opt.wrong .coach-mcq-key {
  background: #c0392b;
  color: #fff;
}

.coach-review-verdict {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.coach-review-verdict.correct { color: #2d7a4e; }
.coach-review-verdict.wrong   { color: #c0392b; }

.coach-review-explanation {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* ── Week Recap ──────────────────────────────────────────── */
.coach-recap-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.coach-recap-progress {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.coach-recap-dots {
  display: flex;
  gap: 6px;
}

.coach-recap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.coach-recap-dot.done   { background: var(--brand); }
.coach-recap-dot.active { background: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; }

.coach-recap-concept-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.coach-recap-score {
  font-size: 56px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin: 12px 0 4px;
}

.coach-recap-verdict {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.coach-recap-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.coach-recap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.coach-recap-row.correct { border-color: #2d7a4e33; }
.coach-recap-row.wrong   { border-color: #c0392b33; }

.coach-recap-icon {
  font-size: 16px;
  font-weight: 700;
  width: 20px;
  text-align: center;
}

.coach-recap-row.correct .coach-recap-icon { color: #2d7a4e; }
.coach-recap-row.wrong   .coach-recap-icon { color: #c0392b; }

.coach-recap-concept { font-size: 13px; color: var(--text); flex: 1; }

.coach-recap-score-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--text-muted);
  margin-left: 8px;
}
.coach-recap-row.correct .coach-recap-score-pill { background: #dcfce7; color: #2d7a4e; }
.coach-recap-row.wrong   .coach-recap-score-pill { background: #fee2e2; color: #c0392b; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .coach-hero-title    { font-size: 26px; }
  .coach-industry-grid { grid-template-columns: 1fr 1fr; }
  .coach-tools-grid    { grid-template-columns: 1fr 1fr; }
  .coach-stats-row     { flex-wrap: wrap; }
  .coach-card          { padding: 16px; }
  .coach-sdg-part      { min-width: 100px; }
  .coach-scene-header svg,
  .coach-brief-graphic svg,
  .tut-scene svg       { max-width: 100%; height: auto; }

  /* Illustration cards: equal padding, full-width stacking */
  .bg-card {
    padding: 16px !important;
  }
  .bg-card > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  /* Inner boxes stretch full width when stacked */
  .bg-card > div > div:not(.bg-arrow) {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .bg-card table {
    width: 100% !important;
  }
  /* Rotate arrows ↓ when stacked vertically */
  .bg-arrow {
    transform: rotate(90deg);
    flex: 0 0 auto !important;
    padding: 4px 0 !important;
    align-self: center !important;
  }
}

/* ── Follow-up chat ──────────────────────────────────────── */
.coach-chat-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.coach-chat-history {
  min-height: 48px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coach-chat-placeholder {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.coach-chat-row {
  display: flex;
}

.coach-chat-row.user  { justify-content: flex-end; }
.coach-chat-row.ai    { justify-content: flex-start; }

.coach-chat-bubble {
  max-width: 85%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
}

.coach-chat-bubble.user {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.coach-chat-bubble.ai {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.coach-chat-input-row {
  display: flex;
  gap: 8px;
}

.coach-chat-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  outline: none;
}

.coach-chat-input:focus {
  border-color: var(--brand);
}

.coach-chat-limit-nudge {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 10px 0 4px 0;
  text-align: center;
}

.coach-btn-send {
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.coach-btn-send:hover {
  background: var(--brand-600);
}

/* ── Skill map ───────────────────────────────────────────── */
/* ── Learning path (road) ────────────────────────────────── */
.coach-path {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  padding-left: 4px;
}

.coach-path-node {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.coach-path-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.coach-path-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  z-index: 1;
}

.coach-path-dot.done {
  background: var(--brand);
  color: #fff;
}

.coach-path-dot.current {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
}

.coach-path-dot.upcoming {
  background: var(--panel);
  border: 2px solid var(--border);
  color: var(--text-muted);
}

.coach-path-line {
  width: 2px;
  flex: 1;
  min-height: 28px;
}

.coach-path-line.done     { background: var(--brand); }
.coach-path-line.upcoming { background: repeating-linear-gradient(to bottom, var(--border) 0px, var(--border) 4px, transparent 4px, transparent 8px); }

.coach-path-content {
  padding-bottom: 24px;
  padding-top: 4px;
}

.coach-path-concept {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
  margin-bottom: 2px;
}

.coach-path-content.done    .coach-path-concept { color: var(--brand); }
.coach-path-content.current .coach-path-concept { color: var(--text); }

.coach-path-day-title {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── Project thread card ─────────────────────────────────── */
/* ── Project card (mission briefing) ─────────────────────── */
.coach-project-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}

.coach-proj-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  border-bottom: 1px solid var(--border);
}

.coach-proj-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.coach-proj-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 3px;
}

.coach-proj-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.coach-proj-scenario {
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}

.coach-proj-dataset {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.coach-proj-table-name {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.coach-proj-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coach-proj-col-pill {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
}

.coach-proj-progress-wrap {
  padding: 12px 18px 14px;
}

.coach-proj-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.coach-proj-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.coach-proj-progress-label {
  font-size: 12px;
  color: var(--text-muted);
}

.coach-proj-progress-label.done {
  color: var(--brand);
  font-weight: 600;
}

/* ── Completion card ─────────────────────────────────────── */
.coach-complete-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  gap: 16px;
}

.coach-complete-card {
  width: 100%;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--brand) 12%, var(--panel)),
    var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
}

.coach-complete-badge {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.coach-complete-title {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.2;
}

.coach-complete-project {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 24px;
}

.coach-complete-stats {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 28px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.coach-cstat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coach-cstat-num {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--brand);
}

.coach-cstat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.coach-cstat-verdict {
  font-size: 20px !important;
  color: #6AA59C !important;
  line-height: 1.2;
}

.coach-complete-skills-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.coach-complete-skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
  text-align: left;
}

.coach-complete-skill {
  font-size: 13.5px;
  color: var(--text);
  padding-left: 4px;
}

.coach-complete-date {
  font-size: 12px;
  color: var(--text-muted);
}

.coach-complete-teaser {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* ── Week 2 CTA block ────────────────────────────────────── */
.coach-week2-cta {
  width: 100%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 12%, var(--panel)),
    var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
}

.coach-week2-heading {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.coach-week2-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Loading screen ──────────────────────────────────────── */
@keyframes coach-spin {
  to { transform: rotate(360deg); }
}

.coach-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.coach-loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(106, 165, 156, 0.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: coach-spin 0.75s linear infinite;
  margin-bottom: 24px;
}

.coach-loading-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.coach-loading-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ===========================
   Case Study styles
   =========================== */

/* Badge on plan topline */
.coach-cs-badge {
  background: linear-gradient(135deg, rgba(106,165,156,0.25), rgba(106,165,156,0.1));
  color: #6AA59C !important;
  border: 1px solid rgba(106,165,156,0.35);
  border-radius: 20px;
  padding: 3px 12px;
  display: inline-block;
  letter-spacing: 0.06em;
}

/* 2-step dot indicator */
.coach-cs-step-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.coach-cs-dot {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.coach-cs-dot.active {
  color: #6AA59C;
  border-color: rgba(106,165,156,0.45);
  background: rgba(106,165,156,0.08);
}

.coach-cs-dot.done {
  color: var(--text-muted);
  border-color: var(--border);
  text-decoration: line-through;
  opacity: 0.6;
}

.coach-cs-dot-arrow {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.5;
}

/* Scenario card */
.coach-cs-scenario-card {
  padding: 12px 0 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.coach-cs-company {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.coach-cs-message {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
}

/* Business question bar */
.cs-biz-q-bar {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(106,165,156,0.35);
  border-radius: 0 8px 8px 0;
  margin-bottom: 22px;
  font-size: 14px;
}

.cs-biz-q-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.cs-biz-q-text {
  color: var(--text);
  line-height: 1.4;
}

/* Dataset table */
.coach-cs-dataset-wrap {
  margin-bottom: 16px;
}

.coach-cs-table-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.coach-cs-table-scroll {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.coach-cs-dataset-table {
  font-size: 12px;
  white-space: nowrap;
}

/* Key findings panel (Day 3) */
.coach-cs-findings-panel {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(15,23,42,0.7);
  border: 1px solid rgba(106,165,156,0.25);
  margin-bottom: 14px;
}

.coach-cs-findings-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6AA59C;
  font-weight: 700;
  margin-bottom: 8px;
}

.coach-cs-findings-list {
  margin: 0;
  padding-left: 18px;
}

.coach-cs-findings-list li {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 4px;
}

/* Case study task list */
.cs-task-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.cs-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

/* Card per instruction */
.cs-task-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.cs-task-card:hover {
  border-color: rgba(255,255,255,0.13);
}

.cs-task-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cs-task-num {
  font-size: 11px;
  font-weight: 700;
  color: rgba(106,165,156,0.9);
  background: rgba(106,165,156,0.1);
  border: 1px solid rgba(106,165,156,0.22);
  border-radius: 50%;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.cs-task-lead {
  font-size: 0.9rem;
  font-weight: 500;
  color: #dde1ed;
  line-height: 1.5;
  flex: 1;
}

.cs-task-body {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 7px;
  margin-left: 33px;
}

.cs-task-highlight {
  font-weight: 700;
  color: var(--teal);
}

.cs-task-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  margin-left: 33px;
}

.proj-inst-pill {
  display: inline-block;
  padding: 4px 11px;
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.22);
  border-radius: 20px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.proj-inst-pill:hover {
  background: rgba(106,165,156,0.18);
  text-decoration: none;
}

.proj-inst-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.proj-inst-link:hover { color: var(--teal-light, #8fc9c2); }

/* Response section */
.cs-response-section {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cs-response-label {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Response prompt inside project/case-study — no uppercase transform */
.proj-response-prompt {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
}

.cs-response-section .coach-answer-area,
.cs-response-section .coach-cs-answer-area {
  border: none !important;
  border-radius: 0 !important;
  background: rgba(0,0,0,0.2) !important;
  min-height: 160px !important;
}

/* Taller textarea for prose briefs */
.coach-cs-answer-area {
  min-height: 180px !important;
}

/* Case study structured field cards */
.cs-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.cs-field-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cs-field-label {
  background: rgba(106,165,156,0.1);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6AA59C;
}

.cs-field-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.6;
  box-sizing: border-box;
  display: block;
  min-height: 72px;
}
.cs-field-textarea:focus {
  outline: none;
}

.cs-field-code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
  background: rgba(0,0,0,0.15);
}

.cs-run-btn {
  display: block;
  margin: 0 14px 12px;
  padding: 6px 16px;
  background: rgba(106,165,156,0.15);
  border: 1px solid rgba(106,165,156,0.4);
  border-radius: 6px;
  color: #6AA59C;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.cs-run-btn:hover {
  background: rgba(106,165,156,0.28);
}

.cs-run-output {
  margin: 0 14px 12px;
}

.cs-run-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* Tag variant */
.coach-tag.teal {
  background: rgba(106,165,156,0.15);
  color: #6AA59C;
  border-color: rgba(106,165,156,0.3);
}

/* Case study prose feedback (stronger brief) */
.coach-fb-prose {
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Project Screen ─────────────────────────────────────────────────────── */

.proj-header-card {
  margin-bottom: 12px;
}

.proj-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 4px 0 10px;
}

.proj-biz-q {
  font-size: 14px;
  color: #6AA59C;
  font-weight: 600;
  margin-bottom: 8px;
}

.proj-scenario {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.proj-company { font-weight: 600; color: var(--text); }
.proj-sep     { margin: 0 6px; opacity: 0.4; }

/* Breadcrumb */
.proj-breadcrumb {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.proj-breadcrumb::-webkit-scrollbar { display: none; }

.proj-crumb {
  flex: 0 0 9%;       /* equal fixed width — 10 steps × ~9% ≈ 90%, remainder absorbed */
  min-width: 72px;
  padding: 10px 6px;
  text-align: center;
  background: transparent;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
}
.proj-crumb:last-child { border-right: none; }

.proj-crumb-letter {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(180,190,210,0.35);
}
.proj-crumb-label {
  display: block;
  font-size: 10px;
  color: rgba(180,190,210,0.3);
  margin-top: 3px;
  line-height: 1.3;
}

/* Completed */
.proj-crumb.done {
  background: rgba(106,165,156,0.06);
}
.proj-crumb.done .proj-crumb-letter {
  color: var(--teal);
  font-size: 13px;
}
.proj-crumb.done .proj-crumb-label {
  color: rgba(106,165,156,0.7);
}

/* Active */
.proj-crumb.current {
  background: rgba(106,165,156,0.12);
}
.proj-crumb.current .proj-crumb-letter {
  color: var(--teal);
  font-size: 15px;
}
.proj-crumb.current .proj-crumb-label {
  color: #dde1ed;
  font-weight: 600;
}

/* Locked (upcoming) — visibly dimmer */
.proj-crumb.locked .proj-crumb-letter {
  color: rgba(180,190,210,0.25);
}
.proj-crumb.locked .proj-crumb-label {
  color: rgba(180,190,210,0.22);
}

/* Step card */
.proj-step-card { margin-bottom: 12px; }

.proj-step-heading {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.proj-step-objective {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-style: italic;
}

/* Checkpoint pill */
.proj-checkpoint {
  padding: 12px 16px;
  background: rgba(106,165,156,0.06);
  border: 1px solid rgba(106,165,156,0.16);
  border-left: 3px solid rgba(106,165,156,0.45);
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
}

.proj-checkpoint-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 5px;
}

.proj-checkpoint-text {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Inline instruction template/example box */
.proj-inst-box {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid rgba(106,165,156,0.35);
  border-radius: 0 6px 6px 0;
  padding: 11px 14px;
  font-family: 'Fira Mono', 'Courier New', monospace;
  font-size: 0.79rem;
  line-height: 1.65;
  color: rgba(180,195,215,0.65);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 10px 0 4px 33px;
}

/* README template block */
.proj-readme-template {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px;
  font-family: 'Fira Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin-bottom: 16px;
}

/* Dataset */
.proj-dataset-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.proj-dataset-reminder {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.proj-table-card {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}

.proj-table-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 6px;
}

.proj-table-cols {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.proj-table-issue {
  font-size: 12px;
  color: #f59e0b;
  margin-top: 2px;
}

.proj-issues-block {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px;
}

/* Tasks */
.proj-task-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.proj-task-row:last-child { border-bottom: none; }
.proj-task-num {
  font-weight: 700;
  color: #6AA59C;
  min-width: 18px;
}

/* Response area */
.proj-response-area { margin-top: 20px; }

.proj-response-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-style: italic;
}

.proj-textarea {
  width: 100%;
  min-height: 160px;
  background: var(--input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 12px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
  box-sizing: border-box;
}
.proj-textarea:focus {
  outline: none;
  border-color: #6AA59C;
}

/* Step feedback block (shown at top of next step) */
.proj-fb-card {
  padding: 14px 16px;
  background: rgba(106,165,156,0.06);
  border: 1px solid rgba(106,165,156,0.2);
  border-radius: 10px;
  margin-bottom: 12px;
}

.proj-fb-score {
  font-size: 15px;
  font-weight: 700;
  color: #6AA59C;
  margin-bottom: 10px;
}

.proj-fb-row { margin-bottom: 8px; }

.proj-fb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.proj-fb-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
}

/* Complete screen */
.proj-complete-card { text-align: center; }

.proj-complete-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 8px 0;
}

.proj-complete-score {
  font-size: 15px;
  color: #6AA59C;
  font-weight: 600;
  margin-bottom: 24px;
}

.proj-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.proj-recap-step {
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-recap-step-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}

.proj-recap-step-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.proj-recap-score {
  font-size: 18px;
  font-weight: 800;
  color: #6AA59C;
  font-family: 'Syne', sans-serif;
}

.proj-recap-score-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.proj-recap-positive {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.proj-recap-improve {
  font-size: 12.5px;
  color: color-mix(in srgb, #e8a87c 80%, var(--text-muted));
  line-height: 1.5;
  padding-left: 8px;
  border-left: 2px solid rgba(232,168,124,0.4);
}

.proj-fb-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.proj-fb-detail {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Reflection */
.proj-reflection { text-align: left; }

.proj-reflection-q {
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 8px 12px;
  border-left: 3px solid rgba(106,165,156,0.4);
  margin-bottom: 8px;
  line-height: 1.5;
}

/* ── Interview Screen ──────────────────────────────────────────────────────── */

.iv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
}

.iv-company {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.iv-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.iv-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.iv-counter {
  font-size: 12px;
  color: var(--text-muted);
}

.iv-dots {
  display: flex;
  gap: 5px;
}

.iv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.iv-dot.done    { background: #6AA59C; }
.iv-dot.current { background: #6AA59C; box-shadow: 0 0 0 2px rgba(106,165,156,0.3); }

/* Interviewer card */
.iv-interviewer-card { margin-bottom: 12px; }

.iv-interviewer-info { margin-bottom: 14px; }

.iv-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.iv-title {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.iv-speech {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(106,165,156,0.4);
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
  line-height: 1.6;
}

.iv-question-block { margin-top: 4px; }

.iv-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6AA59C;
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.25);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 8px;
}

.iv-question {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* Answer area */
.iv-answer-card { margin-bottom: 12px; }

.iv-answer-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.iv-textarea {
  width: 100%;
  min-height: 180px;
  background: var(--input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 12px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
  box-sizing: border-box;
}
.iv-textarea:focus {
  outline: none;
  border-color: #6AA59C;
}

.iv-btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.iv-closing-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  flex: 1;
}

/* Debrief screen */
.iv-banner-card { margin-bottom: 12px; }

.iv-debrief-role {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 2px;
}

.iv-debrief-interviewer {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.iv-decision-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.iv-decision-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.iv-decision {
  font-size: 18px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
}
.iv-decision.strong-yes { color: #22c55e; background: rgba(34,197,94,0.12); }
.iv-decision.yes        { color: #6AA59C; background: rgba(106,165,156,0.12); }
.iv-decision.maybe      { color: #f59e0b; background: rgba(245,158,11,0.12); }
.iv-decision.no         { color: #ef4444; background: rgba(239,68,68,0.10); }

.iv-decision-reason {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.iv-overall {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
}

.iv-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Per-question grade cards */
.iv-grade-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.02);
}

.iv-debrief-q-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.iv-debrief-q {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  margin-top: 4px;
}

.iv-score-col {
  text-align: right;
  min-width: 48px;
  flex-shrink: 0;
}

.iv-debrief-score {
  font-size: 22px;
  font-weight: 800;
  color: #6AA59C;
  line-height: 1;
}

.iv-debrief-score-denom {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 1px;
}

.iv-debrief-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

.iv-score-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 10px;
}

.iv-score-bar-fill {
  height: 100%;
  background: #6AA59C;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.iv-details-summary {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.iv-details-summary:hover { color: #6AA59C; }

.iv-debrief-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iv-user-answer {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

/* ── Interview stages ───────────────────────────────────────────────────────── */
.iv-stages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iv-stages-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 4px;
}
.iv-stage-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.iv-stage-card.iv-stage-passed {
  border-color: rgba(106,165,156,0.3);
  background: rgba(106,165,156,0.05);
}
.iv-stage-card.iv-stage-locked {
  opacity: 0.4;
}
.iv-stage-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.iv-stage-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  flex-shrink: 0;
}
.iv-stage-text {
  min-width: 0;
}
.iv-stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.iv-stage-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.iv-stage-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.iv-stage-score {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.iv-stage-threshold {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-top: 2px;
}
.iv-stage-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.iv-stage-passed-badge {
  background: rgba(106,165,156,0.15);
  color: var(--brand);
  border: 1px solid rgba(106,165,156,0.3);
}
.iv-stage-locked-badge {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.iv-stage-card .coach-btn-primary {
  margin-top: 0;
  padding: 8px 16px;
  font-size: 12px;
  width: auto;
  white-space: nowrap;
}
.iv-stage-card .coach-btn-ghost {
  padding: 8px 16px;
  font-size: 12px;
  white-space: nowrap;
}

/* Pass / fail banners */
.iv-pass-banner, .iv-fail-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
}
.iv-pass-banner {
  background: rgba(106,165,156,0.08);
  border: 1px solid rgba(106,165,156,0.25);
}
.iv-fail-banner {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
}
.iv-pass-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(106,165,156,0.15);
  padding: 4px 12px;
  border-radius: 20px;
}
.iv-fail-badge {
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,0.15);
  padding: 4px 12px;
  border-radius: 20px;
}
.iv-pass-text, .iv-fail-text {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Voice mic button ───────────────────────────────────────────────────────── */

.voice-mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.voice-mic-btn:hover {
  border-color: #6AA59C;
  color: #6AA59C;
}
.voice-mic-btn.recording {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

.voice-status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
  margin-top: 4px;
  font-style: italic;
}

.iv-answer-header,
.proj-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Phase map panel header with tool badge */
.pm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pm-tool-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6AA59C;
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.25);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ── Tool switcher ───────────────────────────────────────────────────────── */
.pm-tool-switcher-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-tool-switcher-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pm-tool-switcher {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.pm-tool-btn {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.pm-tool-btn:hover {
  border-color: #6AA59C;
  color: var(--text);
}

.pm-tool-btn.active {
  background: rgba(106,165,156,0.15);
  border-color: #6AA59C;
  color: #6AA59C;
  font-weight: 700;
}

.pm-tool-btn.new {
  border-style: dashed;
  opacity: 0.55;
}

.pm-tool-btn.new:hover {
  opacity: 1;
  border-style: solid;
}

/* ── Project UI refresh ──────────────────────────────────────────────────── */

/* Header meta row */
.proj-header-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.proj-header-tool {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6AA59C;
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.25);
  border-radius: 4px;
  padding: 2px 8px;
}

.proj-header-level {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Business question — clean callout */
.proj-biz-q {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(106,165,156,0.07);
  border-left: 3px solid #6AA59C;
  border-radius: 0 8px 8px 0;
  margin: 10px 0 12px;
  font-size: 14px;
  line-height: 1.5;
}

.proj-biz-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6AA59C;
  white-space: nowrap;
  flex-shrink: 0;
}

.proj-biz-text {
  color: var(--text);
  font-weight: 500;
}

/* Scenario block */
.proj-scenario { display: flex; flex-direction: column; gap: 4px; }

.proj-company {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.proj-situation {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.proj-deadline {
  font-size: 12px;
  color: #f59e0b;
  margin-top: 2px;
}

/* Dataset reference collapsible */
.proj-dataset-ref {
  margin-bottom: 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.proj-dataset-summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  list-style: none;
  user-select: none;
}

.proj-dataset-summary:hover {
  color: var(--text);
}

.proj-dataset-detail {
  padding: 16px;
  background: rgba(0,0,0,0.15);
}

/* Column chips */
.proj-col-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 8px;
}

.proj-col-chip {
  font-size: 11.5px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Issue rows */
.proj-table-issue {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: #f59e0b;
  margin-top: 3px;
}

.proj-issue-icon {
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Dataset table */
.proj-table-block {
  margin-bottom: 20px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.proj-table-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.7;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.proj-table-scroll {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.proj-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.proj-th {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.03em;
  opacity: 0.75;
}

.proj-th-issues {
  color: #f59e0b;
  min-width: 200px;
}

.proj-td {
  padding: 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.cs-table-scrollable {
  max-height: 280px;
  overflow-y: auto;
}

.proj-data-table tbody tr:last-child .proj-td {
  border-bottom: none;
}

.proj-data-table tbody tr:nth-child(even) .proj-td {
  background: rgba(255,255,255,0.02);
}

.proj-td-placeholder {
  opacity: 0.4;
  font-style: italic;
}

.proj-td-issues {
  vertical-align: top;
}

.proj-issue-ul {
  margin: 0;
  padding-left: 14px;
}

.proj-issue-li {
  color: #f59e0b;
  font-size: 12px;
  margin-bottom: 2px;
}

.proj-td-null {
  color: #ef4444 !important;
  font-style: italic;
  opacity: 0.85;
}

.proj-td-issue-fb {
  color: #f59e0b;
  font-style: italic;
  font-size: 12px;
}

/* ── Micro-recovery screen ───────────────────────────────── */
.coach-recovery-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}

.coach-recovery-gap {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 10px 14px;
  background: var(--panel);
  border-radius: 8px;
  border-left: 3px solid var(--brand);
  margin-bottom: 12px;
}

.coach-recovery-retry-note {
  font-size: 13px;
  color: #f59e0b;
  padding: 8px 12px;
  background: rgba(245,158,11,0.08);
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ── Spreadsheet chrome table (.xl-sheet-table) ──────────────── */
.xl-sheet-table {
  border-radius: 6px;
  border: 1px solid #1e2a3a;
  overflow: hidden;
  font-family: "Consolas", "Menlo", monospace;
}

.xl-sheet-table table {
  border-collapse: collapse;
  width: 100%;
}

.xl-sheet-table th,
.xl-sheet-table td {
  border: 1px solid #1e2a3a;
}