/* ═══════════════════════════════════════════════════════════
   OPTIMODEL CV SCORER — PAGE-SPECIFIC STYLES
   Extends style.css design system (same variables, patterns)
   ═══════════════════════════════════════════════════════════ */

/* ── Upload Zone ──────────────────────────────────────────── */
.scorer-app {
  max-width: 780px;
  margin: 0 auto;
}

.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem;
  text-align: center;
  background: var(--white);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  cursor: pointer;
  position: relative;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--orange);
  background: #FFF8F3;
  box-shadow: 0 0 0 4px rgba(234,88,12,.08);
}
.upload-zone.has-file {
  border-color: var(--green);
  background: #F0FDF9;
  border-style: solid;
}
.upload-icon {
  width: 72px; height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: #FFF3ED;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--orange);
  transition: transform var(--transition);
}
.upload-zone:hover .upload-icon { transform: scale(1.08); }
.upload-zone.has-file .upload-icon {
  background: #D1FAE5; color: var(--green);
}
.upload-zone h3 {
  color: var(--dark); margin-bottom: .35rem; font-size: 1.15rem;
}
.upload-zone p { font-size: .9rem; }
.upload-zone .file-types {
  font-size: .78rem; color: var(--muted); margin-top: .75rem;
}
.upload-zone .file-types i { margin-right: .3rem; }

/* file selected state */
.file-info {
  display: none;
  align-items: center; gap: .75rem;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem 1rem;
  margin-top: 1rem;
}
.file-info.visible { display: inline-flex; }
.file-info i { color: var(--green); font-size: 1.1rem; }
.file-name { font-size: .88rem; font-weight: 600; color: var(--dark); }
.file-remove {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; padding: .2rem;
  transition: color var(--transition);
}
.file-remove:hover { color: var(--orange); }

/* role selector */
.role-selector {
  margin-top: 1.75rem;
  display: flex; flex-direction: column; gap: .75rem; text-align: left;
}
.role-selector label {
  font-size: .85rem; font-weight: 600; color: var(--dark);
}
.role-selector select {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: .95rem; font-family: var(--font);
  color: var(--dark); background: var(--white);
  transition: border-color var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.role-selector select:focus {
  outline: none; border-color: var(--navy);
}

/* analyze button */
.analyze-btn {
  margin-top: 1.5rem;
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
}
.analyze-btn:disabled {
  opacity: .45; cursor: not-allowed; transform: none !important;
  box-shadow: none !important;
}

/* ── Processing Overlay ───────────────────────────────────── */
.processing-overlay {
  display: none;
  text-align: center;
  padding: 3rem 2rem;
}
.processing-overlay.visible { display: block; }

.processing-spinner {
  width: 56px; height: 56px;
  border: 4px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

.processing-steps {
  display: flex; flex-direction: column; gap: .6rem;
  max-width: 280px; margin: 1.5rem auto 0;
}
.processing-step {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--muted);
  transition: color .3s ease;
}
.processing-step.active { color: var(--dark); font-weight: 600; }
.processing-step.done { color: var(--green); }
.processing-step i { width: 18px; text-align: center; }

/* ── Results Container ────────────────────────────────────── */
.results-container {
  display: none;
}
.results-container.visible { display: block; }

/* overall score hero */
.score-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #0d4a8a 100%);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  position: relative; overflow: hidden;
  margin-bottom: 2rem;
}
.score-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(234,88,12,.1) 0%, transparent 70%);
  pointer-events: none;
}
.score-hero > * { position: relative; z-index: 1; }

.score-ring-wrap {
  width: 160px; height: 160px;
  margin: 0 auto 1.25rem;
  position: relative;
}
.score-ring {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.score-ring-bg {
  fill: none; stroke: rgba(255,255,255,.1); stroke-width: 8;
}
.score-ring-fill {
  fill: none; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 440; stroke-dashoffset: 440;
  transition: stroke-dashoffset 1.5s ease-out, stroke .5s ease;
}
.score-ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-number {
  font-size: 3rem; font-weight: 800; color: var(--white); line-height: 1;
}
.score-label { font-size: .75rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; }

.score-grade {
  display: inline-block;
  padding: .4rem 1.25rem; border-radius: 100px;
  font-size: .85rem; font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: .75rem;
}
.grade-exceptional { background: rgba(5,150,105,.2); color: #6EE7B7; }
.grade-strong { background: rgba(8,145,178,.2); color: #67E8F9; }
.grade-developing { background: rgba(212,168,67,.2); color: #FDE68A; }
.grade-needs-work { background: rgba(224,123,57,.2); color: #FDBA74; }
.grade-critical { background: rgba(196,69,54,.2); color: #FCA5A5; }

.score-hero .candidate-meta {
  color: rgba(255,255,255,.6); font-size: .88rem;
}
.score-hero .candidate-meta strong { color: var(--white); }

/* dimension bars */
.dimensions-section { margin-bottom: 2rem; }
.dim-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
}
.dim-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--light-bg);
}
.dim-row:last-child { border-bottom: none; }
.dim-name {
  width: 200px; flex-shrink: 0;
  font-size: .88rem; font-weight: 600; color: var(--dark);
}
.dim-bar-track {
  flex: 1; height: 10px; background: var(--light-bg);
  border-radius: 100px; overflow: hidden;
}
.dim-bar-fill {
  height: 100%; border-radius: 100px;
  transition: width 1s ease-out;
  min-width: 0;
}
.dim-score {
  width: 52px; text-align: right; flex-shrink: 0;
  font-size: .85rem; font-weight: 700;
}
.dim-weight {
  width: 42px; text-align: right; flex-shrink: 0;
  font-size: .75rem; color: var(--muted);
}

@media (max-width: 600px) {
  .dim-row { flex-wrap: wrap; gap: .5rem; }
  .dim-name { width: 100%; }
  .dim-weight { display: none; }
}

/* strengths & gaps */
.sg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 600px) { .sg-grid { grid-template-columns: 1fr; } }

.sg-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
}
.sg-card h4 { margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.sg-card ul { display: flex; flex-direction: column; gap: .6rem; }
.sg-card li {
  font-size: .88rem; color: var(--mid); line-height: 1.55;
  padding-left: 1.5rem; position: relative;
}
.sg-card li::before {
  position: absolute; left: 0; font-weight: 700;
}
.strengths-card { border-top: 3px solid var(--green); }
.strengths-card li::before { content: '+'; color: var(--green); }
.gaps-card { border-top: 3px solid var(--orange); }
.gaps-card li::before { content: '!'; color: var(--orange); }

/* detailed dimensions (expandable) */
.detail-accordion { margin-bottom: 2rem; }
.detail-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: .75rem;
  overflow: hidden;
}
.detail-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; cursor: pointer;
  transition: background var(--transition);
}
.detail-header:hover { background: var(--light-bg); }
.detail-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.detail-header h4 { flex: 1; font-size: .92rem; }
.detail-header .detail-score { font-weight: 700; font-size: .88rem; }
.detail-chevron {
  color: var(--muted); transition: transform .25s ease;
}
.detail-item.open .detail-chevron { transform: rotate(180deg); }
.detail-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.detail-item.open .detail-body { max-height: 800px; }
.detail-body-inner {
  padding: 0 1.25rem 1.25rem;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;
}
@media (max-width: 768px) { .detail-body-inner { grid-template-columns: 1fr; } }
.detail-col h5 {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem;
}
.detail-col ul { display: flex; flex-direction: column; gap: .35rem; }
.detail-col li { font-size: .82rem; color: var(--mid); line-height: 1.5; }

/* rewrites */
.rewrites-section { margin-bottom: 2rem; }
.rewrite-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  margin-bottom: 1rem;
}
.rewrite-num {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .75rem;
}
.rewrite-before, .rewrite-after {
  padding: .85rem 1rem; border-radius: 8px; margin-bottom: .5rem;
  font-size: .88rem; line-height: 1.6;
}
.rewrite-before {
  background: #FEF2F2; border-left: 3px solid #C44536; color: #7F1D1D;
}
.rewrite-after {
  background: #F0FDF4; border-left: 3px solid #059669; color: #14532D;
  font-weight: 600;
}
.rewrite-why {
  font-size: .82rem; color: var(--muted); font-style: italic;
  padding-left: 1rem; margin-top: .5rem;
}

/* keywords */
.keywords-grid {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem;
}
.keyword-tag {
  padding: .35rem .85rem; border-radius: 100px;
  background: #EBF4FF; color: var(--navy);
  font-size: .82rem; font-weight: 600;
  border: 1px solid #DBEAFE;
}

/* SCAI pathway */
.scai-modules { margin-top: 1rem; }
.scai-module {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--light-bg);
}
.scai-module:last-child { border-bottom: none; }
.scai-id {
  background: var(--navy); color: var(--white);
  padding: .25rem .6rem; border-radius: 6px;
  font-size: .72rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  margin-top: .15rem;
}
.scai-module-name { font-weight: 600; font-size: .92rem; color: var(--dark); }
.scai-module-meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

/* career pathway */
.pathway-visual { margin: 1.5rem 0; }
.pathway-step {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.25rem; margin-bottom: .4rem;
  border-radius: 10px; font-size: .9rem;
  transition: background var(--transition);
}
.pathway-done { background: #F0FDF4; color: var(--green); }
.pathway-done i { color: var(--green); }
.pathway-current {
  background: linear-gradient(135deg, var(--navy), #0d4a8a);
  color: var(--white); font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,43,91,.25);
}
.pathway-current i { color: var(--orange); }
.pathway-future { background: var(--light-bg); color: var(--muted); }
.pathway-future i { color: var(--border); }

/* CTA box */
.scorer-cta {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #0d4a8a 100%);
  border-radius: var(--radius-lg); padding: 3rem;
  text-align: center; position: relative; overflow: hidden;
}
.scorer-cta::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(234,88,12,.08) 0%, transparent 70%);
  pointer-events: none;
}
.scorer-cta > * { position: relative; z-index: 1; }
.scorer-cta h2 { color: var(--white); margin-bottom: .75rem; }
.scorer-cta p { color: rgba(255,255,255,.7); max-width: 520px; margin: 0 auto 1.5rem; }

/* how it works */
.how-steps { counter-reset: step; }
.how-step {
  display: flex; gap: 1.25rem; padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.how-step:last-child { border-bottom: none; }
.how-step::before {
  counter-increment: step;
  content: counter(step);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; flex-shrink: 0;
}
.how-step h4 { color: var(--dark); margin-bottom: .2rem; }
.how-step p { font-size: .88rem; }

/* scoring categories grid */
.scoring-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .scoring-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .scoring-cats { grid-template-columns: 1fr; } }
.scoring-cat {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.scoring-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.scoring-cat-pct {
  font-size: 1.6rem; font-weight: 800; color: var(--orange);
  line-height: 1; margin-bottom: .3rem;
}
.scoring-cat h4 { font-size: .88rem; color: var(--dark); margin-bottom: .3rem; }
.scoring-cat p { font-size: .78rem; }

/* download button area */
.download-area {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ── API Key Modal ────────────────────────────────────────── */
.api-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,20,50,.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.api-modal-backdrop.visible { display: flex; }
.api-modal {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.5rem; max-width: 480px; width: 90%;
  box-shadow: var(--shadow-xl);
}
.api-modal h3 { color: var(--dark); margin-bottom: .5rem; }
.api-modal p { font-size: .9rem; margin-bottom: 1.25rem; }
.api-modal .form-group { margin-bottom: 1rem; }
.api-modal .provider-tabs {
  display: flex; gap: .5rem; margin-bottom: 1rem;
}
.provider-tab {
  flex: 1; padding: .6rem; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--white);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  text-align: center; transition: all var(--transition);
  font-family: var(--font); color: var(--mid);
}
.provider-tab.active {
  border-color: var(--navy); color: var(--navy); background: #EBF4FF;
}
.provider-tab:hover:not(.active) { border-color: var(--muted); }

/* ── Pricing Badge ────────────────────────────────────────── */
.pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .5rem 1.25rem;
  border-radius: 24px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
}
.pricing-flag {
  background: var(--orange);
  color: #fff;
  padding: .1rem .45rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ── Report Download Card ────────────────────────────────── */
.report-download-card {
  background: #FFF7ED;
}

/* ── Meeting Card ────────────────────────────────────────── */
.meeting-card {
  background: #F0FDF9;
}
.meeting-price {
  margin: .75rem 0;
}
.meeting-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green, #059669);
}
.btn-green {
  background: #059669;
  color: #fff;
  border: none;
}
.btn-green:hover {
  background: #047857;
  color: #fff;
}

/* ── Provider Selector ────────────────────────────────────── */
.provider-selector {
  margin-top: 1.25rem;
  text-align: left;
}
.provider-selector label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .35rem;
}
.provider-selector select {
  width: 100%;
  padding: .65rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  font-family: var(--font);
  background: var(--white);
  transition: border-color var(--transition);
}
.provider-selector select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,.08);
}

/* ── Lead Capture Fields ─────────────────────────────────── */
.lead-fields {
  margin-top: 1.25rem;
}
.lead-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.lead-fields .form-group {
  text-align: left;
}
.lead-fields label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .35rem;
}
.lead-fields input {
  width: 100%;
  padding: .65rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  font-family: var(--font);
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.lead-fields input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,.08);
}
@media (max-width: 600px) {
  .lead-row { grid-template-columns: 1fr; }
}

/* ── Backend Status Badge ────────────────────────────────── */
.backend-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  padding: .4rem 1rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
}
.backend-status.ready {
  background: rgba(5,150,105,.15);
  color: #A7F3D0;
}
.backend-status.error {
  background: rgba(239,68,68,.15);
  color: #FCA5A5;
}

/* ── LLM Info Badge ──────────────────────────────────────── */
.llm-info {
  margin-top: .75rem;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: center;
}

/* ── SCAI Module Cards ───────────────────────────────────── */
.scai-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.scai-module-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.scai-module-card:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.scai-module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
.scai-module-id {
  font-size: .75rem;
  font-weight: 700;
  color: var(--orange);
  background: #FFF7ED;
  padding: .15rem .5rem;
  border-radius: 4px;
}
.scai-module-level {
  font-size: .72rem;
  font-weight: 600;
  color: var(--navy);
  background: #EBF4FF;
  padding: .15rem .5rem;
  border-radius: 4px;
}
.scai-module-card h4 {
  font-size: .95rem;
  color: var(--dark);
  margin-bottom: .4rem;
}
.scai-module-card p {
  font-size: .83rem;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: .6rem;
}
.scai-module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .75rem;
  color: var(--muted);
}
.scai-module-meta i {
  margin-right: .25rem;
  color: var(--orange);
}
@media (max-width: 600px) {
  .scai-modules-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   TRAINING LANDSCAPE — Tabs, Cards, ROI
   ═══════════════════════════════════════════════════════════ */

.training-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.training-tab {
  padding: .55rem 1rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--mid);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.training-tab:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.training-tab.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.training-tab.tab-optimodel.active {
  background: var(--orange);
  border-color: var(--orange);
}

.training-panel {
  display: none;
}
.training-panel.active {
  display: block;
}
.training-panel-header {
  margin-bottom: 1rem;
}
.training-panel-header h4 {
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: .25rem;
}
.training-panel-header p {
  font-size: .85rem;
  color: var(--mid);
  margin: 0;
}
.training-panel-header.optimodel-header {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFF 100%);
  border: 2px solid var(--orange);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.training-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.training-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all .25s ease;
  position: relative;
}
.training-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  border-color: var(--navy);
}
.training-card.card-academic {
  border-left: 4px solid #1E3A5F;
}
.training-card.card-industry {
  border-left: 4px solid #059669;
}
.training-card.card-product {
  border-left: 4px solid #7C3AED;
}

.training-card-provider {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: .25rem;
}
.training-card h5 {
  font-size: .95rem;
  color: var(--dark);
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.training-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.training-card-detail {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--mid);
  background: var(--light);
  padding: .2rem .55rem;
  border-radius: 6px;
}
.training-card-detail i {
  font-size: .7rem;
}
.training-card-detail.cost-tag {
  font-weight: 600;
  color: #C44536;
  background: #FEF2F2;
}
.training-card-credential {
  font-size: .8rem;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: .5rem;
}

/* Optimodel relation badge */
.optimodel-relation-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 20px;
  margin-bottom: .5rem;
}
.optimodel-relation-badge.rel-prerequisite {
  background: #DBEAFE;
  color: #1E40AF;
}
.optimodel-relation-badge.rel-complementary {
  background: #D1FAE5;
  color: #065F46;
}
.optimodel-relation-badge.rel-advanced {
  background: #FEF3C7;
  color: #92400E;
}

.training-card-note {
  font-size: .8rem;
  color: var(--mid);
  line-height: 1.5;
  background: #F8FAFC;
  border-radius: 8px;
  padding: .6rem .75rem;
  border-left: 3px solid var(--orange);
  margin-top: .5rem;
}
.training-card-note strong {
  color: var(--orange);
}

/* Optimodel prereq pills */
.prereq-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .4rem;
}
.prereq-pill {
  font-size: .7rem;
  font-weight: 600;
  background: var(--orange);
  color: #fff;
  padding: .15rem .45rem;
  border-radius: 4px;
}

/* ROI Comparison Card */
.roi-comparison-card {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFF 100%);
  border: 2px solid #059669;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.roi-comparison-card h4 {
  font-size: .95rem;
  color: var(--dark);
  margin-bottom: .75rem;
}
.roi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.roi-table th {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 2px solid #D1D5DB;
  color: var(--mid);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.roi-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid #E5E7EB;
  color: var(--dark);
}
.roi-table tr:last-child td {
  border-bottom: none;
}
.roi-table .roi-highlight {
  background: #FFF7ED;
  font-weight: 700;
}
.roi-table .roi-highlight td {
  color: var(--orange);
}
.roi-savings {
  margin-top: .75rem;
  font-size: .82rem;
  color: #059669;
  font-weight: 600;
}

/* ── Training Profile Context Card ─────────────────────── */
.training-profile-card {
  background: linear-gradient(135deg, #F8FAFC 0%, #EBF4FF 100%);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.profile-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.profile-context-item {
  padding: .75rem;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border);
}
.profile-context-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.profile-context-label i {
  font-size: .7rem;
}
.strengths-context .profile-context-label i { color: var(--green); }
.gaps-context .profile-context-label i { color: var(--orange); }
.profile-context-value {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
}
.profile-context-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.profile-context-list li {
  font-size: .8rem;
  color: var(--mid);
  line-height: 1.45;
  padding-left: .85rem;
  position: relative;
}
.strengths-context .profile-context-list li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--green);
}
.gaps-context .profile-context-list li::before {
  content: '!';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--orange);
}

@media (max-width: 768px) {
  .profile-context-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Tab Relevance Badge ──────────────────────────────── */
.tab-relevance-badge {
  font-size: .62rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border-radius: 3px;
  margin-left: .25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tab-rel-core {
  background: rgba(5,150,105,.2);
  color: #059669;
}
.tab-rel-partial {
  background: rgba(212,168,67,.2);
  color: #92400E;
}
.tab-rel-supplementary {
  background: rgba(156,163,175,.2);
  color: #6B7280;
}
.training-tab.tab-optimodel.active .tab-relevance-badge {
  background: rgba(255,255,255,.3);
  color: #fff;
}

.training-empty {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
}

@media (max-width: 600px) {
  .training-tabs {
    gap: .35rem;
  }
  .training-tab {
    font-size: .75rem;
    padding: .4rem .65rem;
  }
  .training-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM BLUR / PAYWALL
   ═══════════════════════════════════════════════════════════ */

/* Blur wrapper — content is blurred and non-interactive */
.premium-blur-wrap {
  position: relative;
}
.premium-blur-wrap .premium-blur-content {
  filter: blur(6px);
  -webkit-filter: blur(6px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: .55;
  transition: filter .4s ease, opacity .4s ease;
}
/* Gradient fade at top of blurred area */
.premium-blur-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, var(--white), transparent);
  z-index: 2;
  pointer-events: none;
}

/* Unlocked state — remove blur */
.premium-blur-wrap.unlocked .premium-blur-content {
  filter: none;
  -webkit-filter: none;
  pointer-events: auto;
  user-select: auto;
  -webkit-user-select: auto;
  opacity: 1;
}
.premium-blur-wrap.unlocked::before {
  display: none;
}

/* ── Unlock CTA Card ───────────────────────────────────────── */
.unlock-cta-card {
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 50%, #FFF7ED 100%);
  border: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  z-index: 5;
}
.unlock-cta-card::before {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(234,88,12,.06) 0%, transparent 70%);
  pointer-events: none;
}
.unlock-cta-inner {
  position: relative;
  z-index: 1;
}
.unlock-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.unlock-cta-card h3 {
  color: var(--dark);
  margin-bottom: .5rem;
  font-size: 1.35rem;
}
.unlock-cta-card > .unlock-cta-inner > p {
  color: var(--mid);
  font-size: .92rem;
  max-width: 480px;
  margin: 0 auto 1.25rem;
}
/* ── Lead Capture Unlock Form ──────────────────────────────── */
.unlock-lead-form {
  text-align: left;
  max-width: 520px;
  margin: 1rem auto 0;
}
.unlock-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: .75rem;
}
.unlock-form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .3rem;
}
.unlock-form-group label .required {
  color: var(--orange);
}
.unlock-form-group input {
  width: 100%;
  padding: .6rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .88rem;
  font-family: var(--font);
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.unlock-form-group input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,.08);
}
.unlock-note {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .75rem;
  text-align: center;
}

/* ── OTP Verification ─────────────────────────────────────── */
.otp-input-group {
  display: flex;
  gap: .75rem;
  justify-content: center;
  margin: 1.25rem auto;
  max-width: 320px;
}
.otp-input {
  flex: 1;
  padding: .75rem 1rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: .35em;
  text-align: center;
  transition: border-color var(--transition);
}
.otp-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,.1);
}
.otp-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: .5rem;
}
.otp-resend-btn, .otp-back-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: .82rem;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.otp-resend-btn {
  color: var(--navy);
  font-weight: 600;
}
.otp-resend-btn:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
.otp-resend-btn:not(:disabled):hover {
  background: var(--light-bg);
}
.otp-back-btn {
  color: var(--muted);
}
.otp-back-btn:hover {
  color: var(--dark);
  background: var(--light-bg);
}
.otp-error {
  margin-top: .75rem;
  padding: .5rem 1rem;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #991B1B;
  font-size: .85rem;
  text-align: center;
}

@media (max-width: 600px) {
  .unlock-form-row {
    grid-template-columns: 1fr;
  }
  .unlock-cta-card {
    padding: 2rem 1.25rem;
  }
  .otp-input-group {
    flex-direction: column;
    max-width: 220px;
  }
}