/* ================================================================
   Workflow Home — Shared styles for ALL devices
   Mobile (≤767px) / Tablet (768-1024px) / Desktop (≥1025px)

   v2: Fixed layout overlap on PC/iPad — absolute header/footer
   no longer collide with workflow content.
   ================================================================ */

/* ── Base: hide workflow home by default, show per breakpoint ──── */
.workflow-home {
  display: none;
  width: 100%;
  position: relative;
  z-index: 5;
}

/* ── Status indicators (shared across breakpoints) ─────────────── */
.wf-status-text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(132, 185, 255, 0.85);
}

.wf-status-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(242, 247, 255, 0.72);
}

.wf-status-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(132, 185, 255, 0.2);
  border-top-color: rgba(132, 185, 255, 0.85);
  border-radius: 50%;
  animation: wf-spin 0.8s linear infinite;
}

@keyframes wf-spin {
  to { transform: rotate(360deg); }
}

.wf-status-success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #41d98c;
}

.wf-status-success::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #41d98c;
  display: grid;
  place-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.wf-status-error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ff7a7a;
}

.wf-status-error::before {
  content: "\26A0";
  font-size: 14px;
}

.wf-status-summary {
  font-size: 12px;
  color: rgba(242, 247, 255, 0.55);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Resume file meta (filename + change button) ────────────────── */
.resume-file-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.resume-file-name {
  max-width: 100%;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.change-resume-btn {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid rgba(243, 213, 107, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: #f3d56b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.change-resume-btn:hover {
  background: rgba(243, 213, 107, 0.1);
  border-color: rgba(243, 213, 107, 0.7);
}

.change-resume-btn:active {
  transform: scale(0.97);
}

/* ── Change target job button ───────────────────────────────────── */
.gap-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 0;
}

.change-target-job-btn {
  min-height: 42px;
  padding: 10px 24px;
  border-radius: 14px;
  border: 1px solid rgba(243, 213, 107, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: #f3d56b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.change-target-job-btn:hover {
  background: rgba(243, 213, 107, 0.1);
  border-color: rgba(243, 213, 107, 0.7);
}

.change-target-job-btn:active {
  transform: scale(0.97);
}

/* ── Stale notice ───────────────────────────────────────────────── */
.workflow-stale-notice {
  color: rgba(243, 213, 107, 0.85);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(243, 213, 107, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(243, 213, 107, 0.2);
}

/* ── Card shared base styles ───────────────────────────────────── */
.wf-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.wf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 240, 184, 0.35), rgba(23, 105, 255, 0.12), rgba(216, 180, 90, 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

.wf-card:active {
  transform: scale(0.98);
}

/* ── Locked / disabled card state ── */
.wf-card.locked {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.4);
  pointer-events: auto;
}

.wf-card.locked:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  transform: none;
}

.wf-card.locked::before {
  opacity: 0.2;
}

.wf-card.highlight {
  border-color: rgba(216, 180, 90, 0.55);
  box-shadow: 0 0 20px rgba(216, 180, 90, 0.12);
  animation: wf-pulse 1.2s ease-in-out 2;
}

@keyframes wf-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(216, 180, 90, 0.12); }
  50% { box-shadow: 0 0 30px rgba(216, 180, 90, 0.25); }
}

.wf-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.wf-card-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(216, 180, 90, 0.25), rgba(23, 105, 255, 0.18));
  border: 1px solid rgba(216, 180, 90, 0.35);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-light);
  flex-shrink: 0;
}

.wf-card-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(216, 180, 90, 0.25));
}

.wf-card-title {
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.wf-card-desc {
  line-height: 1.55;
  color: rgba(242, 247, 255, 0.62);
  margin-bottom: 12px;
}

.wf-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

/* ── Parse Card Completed State ───────────────────────────────── */
.wf-parse-completed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.wf-parse-summary {
  margin: 0;
  color: rgba(242, 247, 255, 0.60);
  font-size: 12px;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: break-word;
}

.wf-parse-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wf-parse-actions .wf-review-btn {
  margin: 0;
}

.wf-parse-actions .change-resume-btn {
  margin: 0;
}

/* ── Results header ────────────────────────────────────────────── */
.wf-results-header {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 240, 184, 0.8);
  text-align: center;
}

.wf-results-header-star {
  color: rgba(216, 180, 90, 0.5);
  font-size: 12px;
}

/* ── Job results grid ──────────────────────────────────────────── */
.wf-job-result {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 16px;
}

.wf-job-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.wf-job-result-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(216, 180, 90, 0.2), rgba(23, 105, 255, 0.15));
  border: 1px solid rgba(216, 180, 90, 0.3);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-light);
  flex-shrink: 0;
}

.wf-job-result-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  flex: 1;
}

.wf-job-result-score {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-light);
}

.wf-job-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.wf-job-result-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(132, 185, 255, 0.1);
  border: 1px solid rgba(132, 185, 255, 0.18);
  color: rgba(242, 247, 255, 0.72);
}

.wf-job-result-section {
  margin-bottom: 10px;
}

.wf-job-result-section-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wf-job-result-section-title.pros { color: #41d98c; }
.wf-job-result-section-title.cons { color: #ff9f7a; }
.wf-job-result-section-title.gaps { color: #80b8ff; }

.wf-job-result-section-title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.wf-job-result-section-title.pros::before { background: #41d98c; }
.wf-job-result-section-title.cons::before { background: #ff9f7a; }
.wf-job-result-section-title.gaps::before { background: #80b8ff; }

.wf-job-result-text {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(242, 247, 255, 0.68);
  padding-left: 8px;
}

.wf-job-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.wf-job-result-btn {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.wf-job-result-btn:active {
  transform: scale(0.97);
}

.wf-job-result-btn.primary {
  background: linear-gradient(135deg, rgba(216, 180, 90, 0.2), rgba(216, 180, 90, 0.08));
  border: 1px solid rgba(216, 180, 90, 0.45);
  color: var(--gold-light);
}

.wf-job-result-btn.secondary {
  background: rgba(132, 185, 255, 0.08);
  border: 1px solid rgba(132, 185, 255, 0.25);
  color: rgba(242, 247, 255, 0.8);
}

/* ── Gap result ────────────────────────────────────────────────── */
.wf-gap-result {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
}

.wf-gap-result-score {
  text-align: center;
  margin-bottom: 12px;
}

/* ── Target Job Card (inside gap result) ─────────────────────────── */
.gap-target-job-card {
  border: 1px solid rgba(216, 180, 90, 0.36);
  background: rgba(8, 22, 45, 0.62);
  border-radius: 18px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-bottom: 16px;
  user-select: none;
}

.gap-target-job-card:hover {
  border-color: rgba(243, 213, 107, 0.72);
  background: rgba(14, 32, 64, 0.82);
}

.gap-target-job-card:active {
  transform: scale(0.98);
}

.gap-target-job-card-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gap-target-job-label {
  color: rgba(243, 213, 107, 0.78);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gap-target-job-title {
  color: #f7ecd0;
  font-weight: 700;
  font-size: 17px;
}

.gap-target-job-hint {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  margin-top: 2px;
}

.wf-gap-result-score-value {
  font-size: 36px;
  font-weight: 900;
  color: var(--gold-light);
}

.wf-gap-result-score-label {
  font-size: 12px;
  color: rgba(242, 247, 255, 0.55);
}

.wf-gap-section {
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
}

.wf-gap-section-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: rgba(255, 240, 184, 0.85);
}

.wf-gap-section-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wf-gap-section-list li {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(242, 247, 255, 0.68);
  padding: 4px 0 4px 14px;
  position: relative;
}

.wf-gap-section-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: rgba(216, 180, 90, 0.55);
}

/* ── R3-FB: Skill tags (Gap Analysis v2) ──────────────────────────── */
.gap-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.gap-skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 215, 100, 0.12);
  border: 1px solid rgba(255, 215, 100, 0.28);
  color: #ffe58a;
  font-size: 12px;
  line-height: 1.4;
}

.gap-severity-high {
  color: rgba(255, 130, 100, 0.90);
}

.gap-severity-medium {
  color: rgba(255, 200, 100, 0.85);
}

/* ── AI Coming Soon ────────────────────────────────────────────── */
.wf-ai-coming-soon {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
  text-align: center;
}

.wf-ai-coming-soon-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 240, 184, 0.6);
  margin-bottom: 8px;
}

.wf-ai-coming-soon-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-ai-coming-soon-item {
  font-size: 12px;
  color: rgba(242, 247, 255, 0.4);
}

/* ── Gap Analysis Error Card ───────────────────────────────────── */
.wf-gap-error-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 180, 80, 0.3);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.wf-gap-error-icon {
  font-size: 36px;
  line-height: 1;
  opacity: 0.7;
}

.wf-gap-error-title {
  color: rgba(255, 240, 184, 0.82);
  font-weight: 700;
  font-size: 15px;
}

.wf-gap-error-desc {
  color: rgba(242, 247, 255, 0.48);
  font-size: 12px;
  line-height: 1.6;
}

.wf-gap-error-retry-btn {
  min-height: 40px;
  padding: 9px 22px;
  border-radius: 14px;
  border: 1px solid rgba(243, 213, 107, 0.45);
  background: rgba(243, 213, 107, 0.08);
  color: #f3d56b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin-top: 4px;
}

.wf-gap-error-retry-btn:hover {
  background: rgba(243, 213, 107, 0.16);
  border-color: rgba(243, 213, 107, 0.7);
}

.wf-gap-error-retry-btn:active {
  transform: scale(0.97);
}

/* ── Closure (4 steps) — base styles ──────────────────────────── */
.wf-closure {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wf-closure-title {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 240, 184, 0.7);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wf-closure-star {
  color: rgba(216, 180, 90, 0.5);
  font-size: 12px;
}

.wf-closure-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wf-closure-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 64px;
}

.wf-closure-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(216, 180, 90, 0.12);
  border: 1px solid rgba(216, 180, 90, 0.25);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--gold-light);
}

.wf-closure-step-icon {
  font-size: 20px;
  line-height: 1;
}

.wf-closure-step-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.wf-closure-step-desc {
  font-size: 10px;
  line-height: 1.4;
  color: rgba(242, 247, 255, 0.45);
}

.wf-closure-arrow {
  font-size: 14px;
  color: rgba(216, 180, 90, 0.35);
  margin-top: -20px;
}

/* ── Toast ──────────────────────────────────────────────────────── */
.wf-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 12px 24px;
  border-radius: 14px;
  background: rgba(3, 14, 38, 0.92);
  border: 1px solid rgba(216, 180, 90, 0.3);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(10px);
  max-width: 90vw;
}

.wf-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* ================================================================
   RESUME PARSE RESULT MODAL — SINGLE DIALOG LAYOUT
   Deep blue glass + gold accents — shared across all breakpoints
   Structure: overlay → dialog → [header, body, footer]
   Header + footer are fixed (flex-shrink: 0), body scrolls (flex: 1).
   ================================================================ */

/* CRITICAL: Ensure NO global `> *` rules leak into this modal's dialog */
.resume-parse-modal,
.resume-parse-modal *,
.resume-parse-modal *::before,
.resume-parse-modal *::after {
  box-sizing: border-box;
}

.resume-parse-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(2, 8, 20, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.resume-parse-modal.active {
  display: flex;
}

/* ── Dialog container — the SINGLE card ── */
.resume-parse-dialog {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 48px));
  max-height: min(84vh, 760px);
  background: rgba(8, 20, 42, 0.96);
  border: 1px solid rgba(216, 180, 90, 0.28);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(216, 180, 90, 0.06) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

/* ── Modal Header ── */
.resume-parse-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: static;
}

.resume-parse-modal-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resume-parse-modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #f3d56b;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: normal;
  word-break: keep-all;
}

.resume-parse-modal-filename {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume-parse-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.resume-parse-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* ── Modal Body ── */
.resume-parse-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Sections ── */
.resume-parse-section {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
}

/* ── Clickable overview card ── */
.resume-parse-section-clickable {
  cursor: pointer;
  border: 1px solid rgba(216, 180, 90, 0.18);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.resume-parse-section-clickable:hover {
  border-color: rgba(216, 180, 90, 0.48);
  background: rgba(255, 255, 255, 0.065);
  transform: translateY(-1px);
}

.resume-parse-section-clickable:active {
  transform: scale(0.985);
}

/* ── Overview card hint text ── */
.resume-parse-section-hint {
  font-size: 11px;
  color: rgba(242, 247, 255, 0.32);
  margin-top: 6px;
  line-height: 1.4;
}

.resume-parse-section-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 240, 184, 0.88);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.resume-parse-section-desc {
  font-size: 12px;
  color: rgba(242, 247, 255, 0.55);
  line-height: 1.5;
}

.resume-parse-section-text {
  font-size: 13px;
  color: rgba(242, 247, 255, 0.6);
  line-height: 1.65;
  margin: 0;
}

/* ── Summary tag list ── */
.resume-parse-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.resume-parse-tag {
  display: inline-block;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(132, 185, 255, 0.1);
  border: 1px solid rgba(132, 185, 255, 0.18);
  color: rgba(242, 247, 255, 0.72);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume-parse-tag.signal-green {
  background: rgba(65, 217, 140, 0.1);
  border-color: rgba(65, 217, 140, 0.22);
  color: rgba(65, 217, 140, 0.85);
}

/* ── Detail card (inside detail views) ── */
.resume-parse-detail-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

.resume-parse-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: #f3d56b;
  margin-bottom: 4px;
  line-height: 1.35;
  word-break: break-word;
}

.resume-parse-detail-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: rgba(242, 247, 255, 0.7);
  margin-bottom: 4px;
}

.resume-parse-detail-meta {
  font-size: 12px;
  color: rgba(242, 247, 255, 0.45);
  line-height: 1.5;
}

.resume-parse-detail-desc {
  margin-top: 8px;
}

.resume-parse-detail-bullet {
  font-size: 12.5px;
  color: rgba(242, 247, 255, 0.62);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.resume-parse-detail-bullet-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.resume-parse-detail-bullet-list li {
  font-size: 12.5px;
  color: rgba(242, 247, 255, 0.62);
  line-height: 1.7;
  margin-bottom: 4px;
  word-break: break-word;
}

.resume-parse-detail-bullet-list li::marker {
  color: rgba(216, 180, 90, 0.5);
}

/* ── Quality diagnosis badges ── */
.resume-parse-quality-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.resume-parse-quality-badge.badge-good {
  background: rgba(65, 217, 140, 0.12);
  border: 1px solid rgba(65, 217, 140, 0.28);
  color: rgba(65, 217, 140, 0.9);
}

.resume-parse-quality-badge.badge-warn {
  background: rgba(243, 213, 107, 0.1);
  border: 1px solid rgba(243, 213, 107, 0.28);
  color: rgba(243, 213, 107, 0.9);
}

.resume-parse-quality-badge.badge-missing {
  background: rgba(245, 95, 95, 0.1);
  border: 1px solid rgba(245, 95, 95, 0.25);
  color: rgba(245, 95, 95, 0.85);
}

.resume-parse-detail-suggestion {
  font-size: 12px;
  color: rgba(243, 213, 107, 0.6);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.5;
}

/* ── Quality Diagnosis Detail (6-dimension scoring) ── */
.diag-total-card {
  background: linear-gradient(135deg, rgba(15, 22, 48, 0.7), rgba(20, 30, 60, 0.6));
  border: 1px solid rgba(216, 180, 90, 0.35);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
  text-align: center;
}

.diag-total-score-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.diag-total-score {
  font-size: 52px;
  font-weight: 800;
  color: #f3d56b;
  line-height: 1;
  font-family: "SF Pro Display", "Inter", system-ui, -apple-system, sans-serif;
}

.diag-total-max {
  font-size: 18px;
  color: rgba(243, 213, 107, 0.5);
  font-weight: 500;
}

.diag-total-level {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 20px;
  border-radius: 999px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.diag-level-excellent {
  background: rgba(65, 217, 140, 0.14);
  border: 1px solid rgba(65, 217, 140, 0.35);
  color: rgba(65, 217, 140, 0.92);
}

.diag-level-good {
  background: rgba(65, 217, 140, 0.08);
  border: 1px solid rgba(65, 217, 140, 0.22);
  color: rgba(65, 217, 140, 0.78);
}

.diag-level-warn {
  background: rgba(243, 213, 107, 0.12);
  border: 1px solid rgba(243, 213, 107, 0.32);
  color: rgba(243, 213, 107, 0.9);
}

.diag-level-missing {
  background: rgba(245, 95, 95, 0.12);
  border: 1px solid rgba(245, 95, 95, 0.3);
  color: rgba(245, 95, 95, 0.88);
}

.diag-total-summary {
  font-size: 13px;
  color: rgba(242, 247, 255, 0.6);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Dimension cards ── */
.diag-dim-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

.diag-dim-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.diag-dim-title {
  font-size: 15px;
  font-weight: 700;
  color: #f3d56b;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.diag-dim-score {
  font-size: 18px;
  font-weight: 700;
  color: rgba(242, 247, 255, 0.85);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Sub-items ── */
.diag-sub-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.diag-sub-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: rgba(242, 247, 255, 0.55);
  white-space: nowrap;
}

.diag-sub-label {
  color: rgba(242, 247, 255, 0.55);
}

.diag-sub-score {
  color: rgba(243, 213, 107, 0.7);
  font-weight: 600;
}

/* ── Evidence tags ── */
.diag-evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.diag-evidence-label {
  font-size: 11.5px;
  color: rgba(65, 217, 140, 0.7);
  font-weight: 600;
  white-space: nowrap;
}

.diag-evidence-tag {
  font-size: 11px;
  background: rgba(65, 217, 140, 0.08);
  border: 1px solid rgba(65, 217, 140, 0.18);
  border-radius: 6px;
  padding: 2px 8px;
  color: rgba(65, 217, 140, 0.75);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Missing tags ── */
.diag-missing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.diag-missing-label {
  font-size: 11.5px;
  color: rgba(245, 95, 95, 0.65);
  font-weight: 600;
  white-space: nowrap;
}

.diag-missing-tag {
  font-size: 11px;
  background: rgba(245, 95, 95, 0.07);
  border: 1px solid rgba(245, 95, 95, 0.16);
  border-radius: 6px;
  padding: 2px 8px;
  color: rgba(245, 95, 95, 0.7);
  white-space: nowrap;
}

/* ── Suggestions ── */
.diag-suggestion {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.diag-suggestion-icon {
  font-size: 13px;
  margin-right: 4px;
}

.diag-suggestion-text {
  font-size: 12px;
  color: rgba(243, 213, 107, 0.6);
  line-height: 1.55;
  margin: 4px 0 0 0;
  word-break: break-word;
}

/* ── Badge additions for "Excellent" ── */
.resume-parse-quality-badge.badge-excellent {
  background: rgba(65, 217, 140, 0.14);
  border: 1px solid rgba(65, 217, 140, 0.32);
  color: rgba(65, 217, 140, 0.92);
}

/* ── Modal Footer ── */
.resume-parse-modal-footer {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: static;
}

.resume-parse-modal-btn {
  min-height: 42px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216, 180, 90, 0.46);
  background: rgba(8, 22, 45, 0.78);
  color: #f7ecd0;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.resume-parse-modal-btn:active {
  transform: scale(0.97);
}

.resume-parse-modal-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.resume-parse-modal-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.resume-parse-modal-btn.primary {
  background: linear-gradient(135deg, rgba(216, 180, 90, 0.22), rgba(216, 180, 90, 0.08));
  border: 1px solid rgba(216, 180, 90, 0.48);
  color: #f3d56b;
}

.resume-parse-modal-btn.primary:hover {
  background: linear-gradient(135deg, rgba(216, 180, 90, 0.3), rgba(216, 180, 90, 0.12));
  border-color: rgba(216, 180, 90, 0.65);
}

/* ── Mobile tweaks ── */
@media (max-width: 767px) {
  .resume-parse-modal {
    padding: 16px;
    align-items: center;
  }

  .resume-parse-dialog {
    width: calc(100vw - 32px);
    max-height: calc(84vh - env(safe-area-inset-bottom));
    border-radius: 20px;
  }

  .resume-parse-modal-header {
    padding: 16px 18px;
    gap: 10px;
  }

  .resume-parse-modal-title {
    font-size: 20px;
    white-space: normal;
  }

  .resume-parse-modal-filename {
    max-width: 240px;
    font-size: 12px;
  }

  .resume-parse-modal-body {
    padding: 16px 18px;
  }

  .resume-parse-modal-footer {
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  }

  .resume-parse-detail-card {
    padding: 14px 14px;
  }

  .resume-parse-detail-title {
    font-size: 14px;
  }

  .resume-parse-detail-bullet-list {
    padding-left: 16px;
  }

  .resume-parse-section-hint {
    font-size: 10px;
  }

  /* ── Mobile diagnosis tweaks ── */
  .diag-total-card {
    padding: 16px 16px;
    border-radius: 14px;
  }

  .diag-total-score {
    font-size: 44px;
  }

  .diag-total-summary {
    font-size: 12px;
  }

  .diag-dim-card {
    padding: 14px 14px;
  }

  .diag-dim-header {
    gap: 8px;
  }

  .diag-dim-title {
    font-size: 14px;
  }

  .diag-dim-score {
    font-size: 16px;
  }

  .diag-sub-items {
    gap: 4px;
  }

  .diag-sub-item {
    padding: 4px 8px;
    font-size: 11px;
  }

  .diag-evidence-tag,
  .diag-missing-tag {
    max-width: 160px;
    font-size: 10.5px;
  }

  .diag-suggestion-text {
    font-size: 11.5px;
  }
}

/* ── Small phones: stack buttons vertically ── */
@media (max-width: 390px) {
  .resume-parse-modal-footer {
    grid-template-columns: 1fr;
  }

  .resume-parse-modal-filename {
    max-width: 180px;
  }

  .resume-parse-detail-card {
    padding: 12px 12px;
  }
}

/* ── iPad / tablet: ensure no overflow ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .resume-parse-dialog {
    width: min(620px, calc(100vw - 64px));
  }

  .resume-parse-modal-header {
    padding: 20px 20px;
  }

  .resume-parse-modal-body {
    padding: 18px 20px;
  }

  .resume-parse-modal-footer {
    padding: 16px 20px 22px;
  }
}


/* ================================================================
   RECOMMEND JOB MODAL
   Deep blue glass + gold accents — centered modal with 2-col grid
   ================================================================ */
.recommend-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(3, 10, 28, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 20px;
  overflow-y: auto;
}

.recommend-modal.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recommend-modal > * {
  width: calc(100vw - 40px);
  max-width: 1040px;
  margin: auto 0;
  max-height: 86vh;
  overflow-y: auto;
  background: rgba(8, 20, 48, 0.94);
  border: 1px solid rgba(216, 180, 90, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(216, 180, 90, 0.08) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Modal Header ── */
.recommend-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(216, 180, 90, 0.12);
  position: sticky;
  top: 0;
  background: rgba(8, 20, 48, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2;
  border-radius: 20px 20px 0 0;
}

.recommend-modal-header-left {
  flex: 1;
  min-width: 0;
}

.recommend-modal-title {
  font-size: 19px;
  font-weight: 800;
  color: #f3d56b;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.recommend-modal-subtitle {
  font-size: 12px;
  color: rgba(242, 247, 255, 0.5);
  line-height: 1.5;
}

.recommend-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.recommend-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* ── Modal Body ── */
.recommend-modal-body {
  padding: 16px 24px 24px;
}

/* ── Job Cards Grid ── */
.recommend-jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* ── Individual Job Card (inside modal) ── */
.recommend-job-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px 20px;
}

.recommend-job-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Actions — pinned to bottom, single full-width button bar ── */
.recommend-job-actions {
  margin-top: auto;
  display: flex;
  width: 100%;
  padding-top: 12px;
}

/* Override wf-job-result-btn for modal cards: full-width action bar */
.recommend-job-actions .wf-job-result-btn {
  width: 100%;
  min-height: 44px;
  height: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.recommend-job-actions .wf-job-result-btn.secondary {
  background: rgba(132, 185, 255, 0.08);
  border: 1px solid rgba(132, 185, 255, 0.25);
  color: rgba(242, 247, 255, 0.8);
}

.recommend-job-actions .wf-job-result-btn:hover {
  background: rgba(132, 185, 255, 0.18);
  border-color: rgba(132, 185, 255, 0.5);
  color: #fff;
}

.recommend-job-actions .wf-job-result-btn:active {
  transform: scale(0.98);
}

/* ── AI Coming Soon inside modal ── */
.recommend-modal-body .wf-ai-coming-soon {
  margin-top: 20px;
  margin-bottom: 0;
  border-radius: 16px;
}

/* ── Mobile tweaks ── */
@media (max-width: 767px) {
  .recommend-modal,
  .recommend-modal.active {
    padding: 0;
    align-items: flex-end;
  }

  .recommend-modal > * {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }

  .recommend-modal-header {
    padding: 18px 18px 14px;
  }

  .recommend-modal-body {
    padding: 12px 18px 20px;
  }

  .recommend-jobs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .recommend-job-card {
    padding: 16px 16px;
    min-height: 0;
  }

  .recommend-modal-title {
    font-size: 17px;
  }
}

/* ── iPad / tablet tweaks ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .recommend-modal > * {
    width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
  }

  .recommend-modal-header {
    padding: 20px 20px 14px;
  }

  .recommend-modal-body {
    padding: 14px 20px 20px;
  }

  .recommend-job-card {
    padding: 16px 16px;
  }
}

/* ── Wide screens ── */
@media (min-width: 1200px) {
  .recommend-modal > * {
    max-width: 1100px;
  }
}

/* ================================================================
   RECOMMEND DETAIL VIEW (inside recommend modal)
   Same deep blue glass + gold accents — replaces separate detail modal
   .rm-detail-wrapper is the single direct child of .recommend-modal
   ================================================================ */

/* ── Detail Wrapper (single child of modal, flex column) ── */
.rm-detail-wrapper {
  width: calc(100vw - 40px);
  max-width: 960px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto 0;
  background: rgba(8, 20, 48, 0.94);
  border: 1px solid rgba(216, 180, 90, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(216, 180, 90, 0.08) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Detail Header ── */
.rm-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(216, 180, 90, 0.12);
  background: rgba(3, 10, 28, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
  border-radius: 20px 20px 0 0;
}

.rm-detail-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rm-detail-score {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.14);
  color: #f6d87b;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(212, 175, 55, 0.22);
}

/* ── Back button ── */
.rm-detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.rm-detail-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
  color: #f6d87b;
}

.rm-detail-back-btn svg {
  flex-shrink: 0;
}

/* ── Title Section ── */
.rm-detail-title-section {
  padding: 12px 24px 8px;
  flex-shrink: 0;
}

.rm-detail-job-title {
  margin: 0;
  font-size: 24px;
  font-weight: 850;
  color: #f6d87b;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.14);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ── Detail Body (scrollable) ── */
.rm-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rm-detail-body::-webkit-scrollbar {
  width: 7px;
}

.rm-detail-body::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.22);
  border-radius: 999px;
}

/* ── Overview Grid ── */
.rm-detail-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.rm-overview-card {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.rm-overview-label {
  margin-bottom: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.44);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rm-overview-value {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
}

/* ── Detail Sections ── */
.rm-detail-section {
  border-radius: 16px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.rm-detail-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.rm-detail-section-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.12);
  color: #f6d87b;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.rm-detail-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f6d87b;
}

/* ── Detail List ── */
.rm-detail-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.rm-detail-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  font-size: 13px;
}

.rm-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.45);
}

/* ── Detail Tags ── */
.rm-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.rm-detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1;
}

.rm-detail-tag.required {
  border-color: rgba(65, 120, 255, 0.25);
  background: rgba(65, 120, 255, 0.08);
  color: rgba(155, 200, 255, 0.90);
}

.rm-detail-tag.preferred {
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.08);
  color: rgba(245, 215, 110, 0.88);
}

/* ── Detail Empty ── */
.rm-detail-empty {
  color: rgba(255, 255, 255, 0.40);
  font-size: 13px;
  margin: 0;
}

/* ── Detail Footer ── */
.rm-detail-footer {
  flex-shrink: 0;
  padding: 16px 24px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(3, 10, 25, 0.30);
  display: flex;
  justify-content: flex-end;
}

.rm-detail-select-btn {
  height: 46px;
  min-width: 160px;
  padding: 0 24px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.40);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(180, 140, 40, 0.08));
  color: #f6d87b;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.rm-detail-select-btn:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.28), rgba(180, 140, 40, 0.14));
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
  transform: translateY(-1px);
}

.rm-detail-select-btn:active {
  transform: translateY(0);
}

/* ── Mobile: Detail View ── */
@media (max-width: 767px) {
  .rm-detail-wrapper {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }

  .rm-detail-header {
    padding: 14px 16px 12px;
    border-radius: 20px 20px 0 0;
  }

  .rm-detail-back-btn span {
    display: none; /* Icon only on mobile */
  }

  .rm-detail-back-btn {
    padding: 8px 10px;
  }

  .rm-detail-title-section {
    padding: 10px 16px 6px;
  }

  .rm-detail-job-title {
    font-size: 20px;
  }

  .rm-detail-body {
    padding: 12px 16px 16px;
    gap: 12px;
  }

  .rm-detail-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .rm-overview-card {
    padding: 10px 12px;
  }

  .rm-overview-value {
    font-size: 13px;
  }

  .rm-detail-section {
    padding: 14px 14px 12px;
  }

  .rm-detail-section-title {
    font-size: 14px;
  }

  .rm-detail-list li {
    font-size: 12px;
  }

  .rm-detail-tag {
    font-size: 11px;
  }

  .rm-detail-footer {
    padding: 14px 16px 18px;
  }

  .rm-detail-select-btn {
    width: 100%;
    min-width: 0;
  }

  .rm-detail-score {
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* ── Tablet: Detail View ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .rm-detail-wrapper {
    width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
  }

  .rm-detail-header {
    padding: 16px 20px 12px;
  }

  .rm-detail-title-section {
    padding: 10px 20px 6px;
  }

  .rm-detail-job-title {
    font-size: 22px;
  }

  .rm-detail-body {
    padding: 14px 20px 18px;
    gap: 14px;
  }

  .rm-detail-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .rm-detail-footer {
    padding: 14px 20px 20px;
  }
}

/* ── Wide screen detail wrapper ── */
@media (min-width: 1200px) {
  .rm-detail-wrapper {
    max-width: 1000px;
  }
}


/* ================================================================
   MOBILE ONLY (max-width: 767px)
   — workflow-home hidden; mobile-workflow-home handles mobile
   ================================================================ */
@media (max-width: 767px) {
  .workflow-home {
    display: none !important;
  }
}


/* ================================================================
   PC + TABLET: Hide 4-step closure (redundant with sidebar)
   ================================================================ */
@media (min-width: 768px) {
  .wf-closure {
    display: none !important;
  }
}

/* ================================================================
   TABLET ONLY (768px - 1024px) — FIXED v2
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ── CRITICAL FIX: Allow page to scroll, prevent overflow ── */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
  }

  /* Make views flow normally */
  .view {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .view:not(.active) {
    display: none !important;
  }

  #homeView {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* ── Topbar — keep absolute but give workflow enough padding-top ── */
  /* (topbar: position:absolute; top:40px in base.css = ~145px occupied) */

  /* ── Marquee — hide on tablet to save space ── */
  .marquee {
    display: none !important;
  }

  /* Hide old desktop hero content and CTA */
  #homeView .hero-content {
    display: none !important;
  }

  #homeView .cta-row {
    display: none !important;
  }

  #homeView .hero {
    min-height: auto !important;
    height: auto !important;
    padding-top: 0 !important;
  }

  /* ── World map — subtle background ── */
  .world-map-bg {
    top: 80px !important;
    height: 20vh !important;
    max-height: 180px !important;
    opacity: 0.12 !important;
  }

  /* ── Workflow Home container — enough top padding to clear header ── */
  .workflow-home {
    display: block;
    /* topbar is absolute at top:40px + brand height ~90px + margin */
    padding: 148px 32px 32px;
    /* 4-step closure hidden; keep safe bottom padding for iPad Safari toolbar */
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Hero row: SINGLE COLUMN (iPad doesn't need side-by-side) ── */
  .wf-hero-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }

  .wf-hero-left {
    width: 100%;
  }

  .wf-hero-right {
    width: 100%;
    max-width: 720px;
  }

  .wf-hero {
    text-align: center;
    position: relative;
    z-index: 5;
  }

  .wf-hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(216, 180, 90, 0.85);
    background: rgba(216, 180, 90, 0.08);
    border: 1px solid rgba(216, 180, 90, 0.22);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 14px;
  }

  .wf-hero-title {
    font-size: clamp(40px, 6vw, 54px);
    line-height: 1.10;
    letter-spacing: -0.04em;
    font-weight: 900;
    margin: 0 auto 14px;
    max-width: 760px;
    background: linear-gradient(90deg, #ffffff 0%, #fff0b8 40%, #d8b45a 70%, #80b8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .wf-hero-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(242, 247, 255, 0.72);
    margin: 0 auto;
    max-width: 640px;
  }

  /* ── Dashboard panel — lightweight list, no card frame ── */
  .wf-dashboard-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: 8px;
  }

  .wf-dashboard-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 240, 184, 0.72);
    margin-bottom: 16px;
    text-align: left;
    padding-left: 4px;
  }

  .wf-dashboard-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .wf-dashboard-item:last-child {
    border-bottom: none;
  }

  .wf-dashboard-item-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    opacity: 0.7;
  }

  .wf-dashboard-item-content {
    flex: 1;
    min-width: 0;
  }

  .wf-dashboard-item-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2px;
  }

  .wf-dashboard-item-desc {
    font-size: 11px;
    color: rgba(242, 247, 255, 0.45);
    line-height: 1.4;
  }

  /* ── Cards — single column on tablet ── */
  .wf-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .wf-card {
    padding: 22px 20px 20px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
  }

  /* Push action/status text to bottom for alignment */
  .wf-card .wf-card-status {
    margin-top: auto;
  }

  .wf-card-title {
    font-size: 19px;
  }

  .wf-card-desc {
    font-size: 14px;
  }

  /* ── Results ── */
  .wf-results {
    margin-top: 24px;
  }

  .wf-job-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .wf-gap-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* ── Closure (4 steps) — 2×2 grid, large text, safe bottom padding ── */
  .wf-closure {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* CRITICAL: enough bottom padding to clear iPad Safari toolbar */
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  .wf-closure-title {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .wf-closure-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
    align-items: stretch;
  }

  /* Hide arrows in grid layout */
  .wf-closure-arrow {
    display: none !important;
  }

  .wf-closure-step {
    min-width: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 14px;
    gap: 8px;
  }

  .wf-closure-step-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .wf-closure-step-icon {
    font-size: 26px;
  }

  .wf-closure-step-name {
    font-size: 15px;
  }

  .wf-closure-step-desc {
    font-size: 13px;
  }

  /* ── Footer — normal document flow ── */
  .footer {
    margin-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
  }

  .footer-privacy-note {
    font-size: 12px;
  }

  .footer-links {
    font-size: 12px;
  }
}


/* iPad 2-column cards at 900+ */
@media (min-width: 900px) and (max-width: 1024px) {
  .wf-cards {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
}


/* ================================================================
   DESKTOP ONLY (min-width: 1025px) — FIXED v2
   ================================================================ */
@media (min-width: 1025px) {

  /* ── CRITICAL FIX: Allow page to scroll, prevent overflow ── */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
  }

  /* Make views flow normally */
  .view {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .view:not(.active) {
    display: none !important;
  }

  #homeView {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* ── Marquee — keep but don't overlap content ── */
  .marquee {
    position: absolute;
    top: 0;
    z-index: var(--z-overlay);
  }

  /* Hide old desktop hero content and CTA */
  #homeView .hero-content {
    display: none !important;
  }

  #homeView .cta-row {
    display: none !important;
  }

  #homeView .hero {
    min-height: auto !important;
    height: auto !important;
    padding-top: 0 !important;
  }

  /* ── World map — subtle background ── */
  .world-map-bg {
    top: 60px !important;
    height: 22vh !important;
    max-height: 200px !important;
    opacity: 0.10 !important;
    z-index: 1 !important;
  }

  /* ── Workflow Home container — enough top padding to clear absolute header ── */
  /* topbar: position:absolute; top:40px; brand is ~90px tall */
  /* marquee: 24px; total ~155px, add comfortable gap */
  .workflow-home {
    display: block;
    max-width: 1320px;
    margin: 0 auto;
    padding: 168px 48px 40px;
  }

  /* ── Hero row: GRID left-text + right-dashboard ── */
  .wf-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.85fr);
    gap: 64px;
    align-items: start;
    padding: 0;
  }

  .wf-hero-left {
    min-width: 0;
  }

  .wf-hero-right {
    min-width: 0;
    margin-top: 12px; /* slight offset to align with title better */
  }

  .wf-hero {
    text-align: left;
    position: relative;
    z-index: 5;
  }

  .wf-hero-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(216, 180, 90, 0.85);
    background: rgba(216, 180, 90, 0.08);
    border: 1px solid rgba(216, 180, 90, 0.22);
    border-radius: 20px;
    padding: 6px 16px;
    margin-bottom: 16px;
  }

  .wf-hero-title {
    font-size: clamp(52px, 4.2vw, 68px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 950;
    margin: 0 0 16px;
    max-width: 680px;
    background: linear-gradient(90deg, #ffffff 0%, #fff0b8 34%, #d8b45a 66%, #80b8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .wf-hero-desc {
    font-size: 18px;
    line-height: 1.75;
    color: rgba(242, 247, 255, 0.72);
    margin: 0;
    max-width: 600px;
  }

  /* ── Dashboard panel — lightweight right-aligned list (no card frame) ── */
  .wf-dashboard-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0;
    max-width: 580px;
    margin-left: auto;
    margin-right: 12px;
  }

  .wf-dashboard-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 240, 184, 0.72);
    margin-bottom: 20px;
    text-align: left;
    padding-left: 4px;
  }

  .wf-dashboard-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 4px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .wf-dashboard-item:last-child {
    border-bottom: none;
  }

  .wf-dashboard-item-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    opacity: 0.7;
  }

  .wf-dashboard-item-content {
    flex: 1;
    min-width: 0;
  }

  .wf-dashboard-item-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2px;
  }

  .wf-dashboard-item-desc {
    font-size: 12px;
    color: rgba(242, 247, 255, 0.45);
    line-height: 1.5;
  }

  /* ── Cards — 4 columns ── */
  .wf-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
    align-items: stretch;
  }

  .wf-card {
    padding: 28px 24px 24px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
  }

  /* Push action/status text to bottom for alignment */
  .wf-card .wf-card-status {
    margin-top: auto;
  }

  .wf-card-title {
    font-size: 20px;
  }

  .wf-card-desc {
    font-size: 14px;
  }

  .wf-card:hover {
    border-color: rgba(216, 180, 90, 0.35);
    box-shadow: 0 4px 24px rgba(216, 180, 90, 0.08);
    transform: translateY(-2px);
  }

  /* ── Results ── */
  .wf-results {
    margin-top: 32px;
  }

  .wf-results-header {
    font-size: 16px;
    margin-bottom: 18px;
  }

  .wf-job-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .wf-job-result {
    padding: 18px 20px;
    border-radius: 18px;
  }

  .wf-job-result-title {
    font-size: 16px;
  }

  .wf-job-result-score {
    font-size: 20px;
  }

  .wf-gap-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .wf-gap-section {
    padding: 14px;
    border-radius: 14px;
  }

  .wf-gap-section-title {
    font-size: 14px;
  }

  .wf-gap-section-list li {
    font-size: 13px;
  }

  /* ── AI Coming Soon ── */
  .wf-ai-coming-soon {
    padding: 20px;
  }

  .wf-ai-coming-soon-title {
    font-size: 15px;
  }

  .wf-ai-coming-soon-items {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .wf-ai-coming-soon-item {
    font-size: 13px;
  }

  /* ── Closure (4 steps) — horizontal cards, large text ── */
  .wf-closure {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 48px;
  }

  .wf-closure-title {
    font-size: 18px;
    margin-bottom: 28px;
  }

  .wf-closure-steps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    max-width: 1100px;
    margin: 0 auto;
  }

  .wf-closure-step {
    min-width: 180px;
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px 18px;
    gap: 10px;
  }

  .wf-closure-step-num {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .wf-closure-step-icon {
    font-size: 30px;
  }

  .wf-closure-step-name {
    font-size: 16px;
  }

  .wf-closure-step-desc {
    font-size: 13px;
  }

  .wf-closure-arrow {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: rgba(216, 180, 90, 0.35);
    margin: 0 8px;
    margin-top: 0;
    flex-shrink: 0;
  }

  /* ── Footer — normal document flow ── */
  .footer {
    margin-top: 48px;
    padding-bottom: 32px;
    font-size: 13px;
  }

  .footer-privacy-note {
    font-size: 13px;
  }

  .footer-links {
    font-size: 13px;
  }
  }
}


/* Desktop medium (1025px - 1100px): 4 columns with tight gap */
@media (min-width: 1025px) and (max-width: 1100px) {
  .wf-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .wf-card {
    padding: 20px 14px 18px;
    min-height: 180px;
  }

  .wf-card-title {
    font-size: 16px;
  }

  .wf-card-desc {
    font-size: 12px;
  }

  .workflow-home {
    padding: 168px 24px 40px;
  }
}

/* Large desktop (1441px+) */
@media (min-width: 1441px) {
  .workflow-home {
    max-width: 1400px;
  }

  .wf-hero-title {
    font-size: 68px;
  }

  .wf-hero-desc {
    font-size: 20px;
  }

  .wf-hero-row {
    gap: 72px;
  }
}


/* Extra small mobile tweaks (keep original mobile-safe rules) */
@media (max-width: 390px) {
  .wf-hero-title {
    font-size: 26px;
  }

  .wf-card {
    padding: 16px 14px 14px;
    border-radius: 18px;
  }

  .wf-card-title {
    font-size: 16px;
  }

  .wf-card-desc {
    font-size: 12px;
  }

  .wf-closure-step {
    min-width: 56px;
  }

  .wf-closure-step-name {
    font-size: 10px;
  }

  .wf-closure-step-desc {
    font-size: 9px;
  }
}


/* ================================================================
   CHANGE RESUME CONFIRM MODAL
   Custom FutureGo-styled confirm dialog replacing browser confirm()
   Deep blue glass + gold accents
   ================================================================ */
.fg-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 8, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fg-confirm-modal.hidden {
  display: none;
}

.fg-confirm-dialog {
  width: min(460px, calc(100vw - 40px));
  background: rgba(8, 20, 42, 0.94);
  border: 1px solid rgba(216, 180, 90, 0.35);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(216, 180, 90, 0.06) inset;
  overflow: hidden;
}

.fg-confirm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 12px;
}

.fg-confirm-title {
  margin: 0;
  color: #f3d56b;
  font-size: 20px;
  font-weight: 700;
}

.fg-confirm-x {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.fg-confirm-x:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.fg-confirm-body {
  padding: 0 22px 18px;
}

.fg-confirm-body-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.7;
}

.fg-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 22px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fg-confirm-btn {
  min-height: 42px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}

.fg-confirm-btn:active {
  transform: scale(0.97);
}

.fg-confirm-cancel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
}

.fg-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.fg-confirm-primary {
  border: 1px solid rgba(216, 180, 90, 0.58);
  background: rgba(8, 22, 45, 0.78);
  color: #f3d56b;
}

.fg-confirm-primary:hover {
  background: rgba(14, 32, 64, 0.92);
  border-color: rgba(243, 213, 107, 0.82);
}

/* ── Mobile tweaks ── */
@media (max-width: 767px) {
  .fg-confirm-modal {
    padding: 18px;
  }

  .fg-confirm-dialog {
    width: calc(100vw - 36px);
  }

  .fg-confirm-header {
    padding: 16px 18px 10px;
  }

  .fg-confirm-title {
    font-size: 18px;
  }

  .fg-confirm-body {
    padding: 0 18px 16px;
  }

  .fg-confirm-actions {
    grid-template-columns: 1fr;
    padding: 14px 18px 18px;
  }
}


/* ================================================================
   GAP TARGET JOB DETAIL MODAL (standalone, inside recommend modal shell)
   Used when clicking the target job card in gap analysis results
   ================================================================ */
.gap-job-detail-wrapper {
  width: calc(100vw - 40px);
  max-width: 960px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
  background: rgba(8, 20, 48, 0.94);
  border: 1px solid rgba(216, 180, 90, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(216, 180, 90, 0.08) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.gap-job-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(216, 180, 90, 0.12);
  background: rgba(3, 10, 28, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
  border-radius: 20px 20px 0 0;
}

.gap-job-detail-header-title {
  margin: 0;
  color: #f3d56b;
  font-size: 22px;
  font-weight: 700;
}

.gap-job-detail-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.gap-job-detail-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.gap-job-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 24px;
}

.gap-job-detail-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.gap-job-overview-card {
  background: rgba(8, 22, 45, 0.55);
  border: 1px solid rgba(216, 180, 90, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
}

.gap-job-overview-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.gap-job-overview-value {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.gap-job-detail-section {
  margin-bottom: 18px;
}

.gap-job-detail-section-title {
  color: rgba(243, 213, 107, 0.82);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gap-job-detail-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.gap-job-detail-list li {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.75;
  margin-bottom: 4px;
}

.gap-job-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gap-job-detail-tag {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1;
}

.gap-job-detail-tag.required {
  border-color: rgba(65, 120, 255, 0.25);
  background: rgba(65, 120, 255, 0.08);
  color: rgba(155, 200, 255, 0.90);
}

.gap-job-detail-tag.preferred {
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.08);
  color: rgba(245, 215, 110, 0.88);
}

.gap-job-detail-empty {
  color: rgba(255, 255, 255, 0.40);
  font-size: 13px;
  margin: 0;
}

/* ── Mobile: gap job detail ── */
@media (max-width: 767px) {
  .gap-job-detail-wrapper {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }

  .gap-job-detail-header {
    padding: 14px 16px 12px;
    border-radius: 20px 20px 0 0;
  }

  .gap-job-detail-header-title {
    font-size: 18px;
  }

  .gap-job-detail-body {
    padding: 14px 16px 20px;
  }

  .gap-job-detail-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gap-job-overview-card {
    padding: 10px 12px;
  }

  .gap-job-overview-value {
    font-size: 13px;
  }

  .gap-job-detail-section-title {
    font-size: 14px;
  }
}

/* ── Tablet: gap job detail ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .gap-job-detail-wrapper {
    width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
  }

  .gap-job-detail-header {
    padding: 16px 20px 12px;
  }

  .gap-job-detail-header-title {
    font-size: 20px;
  }

  .gap-job-detail-body {
    padding: 16px 20px 22px;
  }

  .gap-job-detail-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ── Wide screen: gap job detail ── */
@media (min-width: 1200px) {
  .gap-job-detail-wrapper {
    max-width: 1000px;
  }
}

/* ================================================================
   Gap Job Selection Modal — "选择目标岗位" for gap analysis
   ================================================================ */

/* ── Modal overlay ── */
.gap-job-selection-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(3, 10, 30, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  flex-direction: column;
  align-items: center;
}

.gap-job-selection-modal.active {
  display: flex;
}

/* ── Loading state ── */
.gjs-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
}

.gjs-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(132, 185, 255, 0.18);
  border-top-color: rgba(212, 179, 88, 0.8);
  border-radius: 50%;
  animation: wf-spin 0.8s linear infinite;
  margin-bottom: 16px;
}

/* ── Empty state ── */
.gjs-empty {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 15px;
}

/* ── Header ── */
.gjs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(216, 180, 90, 0.18);
  background: rgba(8, 20, 42, 0.94);
  border-radius: 14px 14px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gjs-header-left {
  flex: 1;
  min-width: 0;
}

.gjs-title {
  font-size: 22px;
  font-weight: 700;
  color: #f3d56b;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}

.gjs-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.5;
}

.gjs-close-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 12px;
  margin-top: 2px;
}

.gjs-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(216, 180, 90, 0.4);
}

/* ── Body ── */
.gjs-body {
  background: rgba(8, 20, 42, 0.88);
  border-radius: 0 0 14px 14px;
  padding: 16px 24px 24px;
  border: 1px solid rgba(216, 180, 90, 0.12);
  border-top: none;
}

/* ── Jobs grid ── */
.gjs-jobs-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Job card ── */
.gjs-job-card {
  display: flex;
  flex-direction: column;
  background: rgba(12, 28, 55, 0.7);
  border: 1px solid rgba(216, 180, 90, 0.18);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.gjs-job-card:hover {
  border-color: rgba(216, 180, 90, 0.4);
  box-shadow: 0 0 18px rgba(216, 180, 90, 0.06);
}

.gjs-job-card.gjs-recommended {
  border-color: rgba(216, 180, 90, 0.35);
  background: rgba(16, 35, 65, 0.75);
}

.gjs-card-main {
  flex: 1;
  min-width: 0;
}

.gjs-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.gjs-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.gjs-card-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(242, 247, 255, 0.95);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Recommend tag ── */
.gjs-card-recommend-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a2e;
  background: linear-gradient(135deg, #f3d56b 0%, #d4b358 100%);
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

/* ── Match score ── */
.gjs-card-score {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #f3d56b;
  white-space: nowrap;
}

/* ── Meta tags ── */
.gjs-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.gjs-card-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  color: rgba(132, 185, 255, 0.8);
  background: rgba(132, 185, 255, 0.08);
  border: 1px solid rgba(132, 185, 255, 0.15);
  border-radius: 4px;
}

/* ── Summary ── */
.gjs-card-summary {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 12px;
  line-height: 1.55;
}

/* ── Card actions ── */
.gjs-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gjs-action-btn {
  flex: 1;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-align: center;
}

.gjs-detail-btn {
  background: rgba(132, 185, 255, 0.1);
  color: rgba(132, 185, 255, 0.9);
  border: 1px solid rgba(132, 185, 255, 0.2);
}

.gjs-detail-btn:hover {
  background: rgba(132, 185, 255, 0.18);
  border-color: rgba(132, 185, 255, 0.4);
  color: #fff;
}

.gjs-select-btn {
  background: linear-gradient(135deg, rgba(243, 213, 107, 0.2) 0%, rgba(212, 179, 88, 0.12) 100%);
  color: #f3d56b;
  border: 1px solid rgba(216, 180, 90, 0.35);
}

.gjs-select-btn:hover {
  background: linear-gradient(135deg, rgba(243, 213, 107, 0.35) 0%, rgba(212, 179, 88, 0.22) 100%);
  border-color: rgba(216, 180, 90, 0.6);
  color: #fff;
}

/* ================================================================
   Gap Job Selection — Detail View
   ================================================================ */

.gjs-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(216, 180, 90, 0.18);
  background: rgba(8, 20, 42, 0.94);
  border-radius: 14px 14px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gjs-detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(132, 185, 255, 0.85);
  background: rgba(132, 185, 255, 0.08);
  border: 1px solid rgba(132, 185, 255, 0.18);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.gjs-detail-back-btn:hover {
  background: rgba(132, 185, 255, 0.15);
  border-color: rgba(132, 185, 255, 0.4);
  color: #fff;
}

.gjs-detail-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gjs-detail-rec-tag {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #1a1a2e;
  background: linear-gradient(135deg, #f3d56b 0%, #d4b358 100%);
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.gjs-detail-score {
  font-size: 14px;
  font-weight: 700;
  color: #f3d56b;
  white-space: nowrap;
}

.gjs-detail-title-section {
  padding: 20px 24px 8px;
  background: rgba(8, 20, 42, 0.88);
}

.gjs-detail-job-title {
  font-size: 22px;
  font-weight: 700;
  color: #f3d56b;
  margin: 0;
  line-height: 1.3;
}

.gjs-detail-body {
  background: rgba(8, 20, 42, 0.88);
  border-radius: 0 0 14px 14px;
  padding: 16px 24px 24px;
  border: 1px solid rgba(216, 180, 90, 0.12);
  border-top: none;
}

/* Overview grid */
.gjs-detail-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.gjs-overview-card {
  background: rgba(12, 28, 55, 0.6);
  border: 1px solid rgba(216, 180, 90, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}

.gjs-overview-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(132, 185, 255, 0.6);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gjs-overview-value {
  font-size: 14px;
  font-weight: 600;
  color: rgba(242, 247, 255, 0.9);
  word-break: break-word;
}

/* Detail sections */
.gjs-detail-section {
  margin-bottom: 20px;
}

.gjs-detail-section:last-child {
  margin-bottom: 0;
}

.gjs-detail-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #f3d56b;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(216, 180, 90, 0.15);
}

.gjs-detail-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0;
}

.gjs-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gjs-detail-list li {
  position: relative;
  padding: 5px 0 5px 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
}

.gjs-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(216, 180, 90, 0.5);
}

.gjs-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gjs-detail-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(132, 185, 255, 0.08);
  border: 1px solid rgba(132, 185, 255, 0.15);
  border-radius: 6px;
}

.gjs-detail-tag.required {
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.2);
  color: rgba(255, 140, 140, 0.9);
}

.gjs-detail-tag.preferred {
  background: rgba(72, 199, 142, 0.1);
  border-color: rgba(72, 199, 142, 0.2);
  color: rgba(100, 220, 160, 0.9);
}

.gjs-detail-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
  font-style: italic;
}

/* ================================================================
   Gap Job Selection — Responsive
   ================================================================ */

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  .gap-job-selection-modal {
    padding: 0;
    align-items: stretch;
  }

  .gjs-header {
    padding: 14px 16px 12px;
    border-radius: 0;
  }

  .gjs-title {
    font-size: 18px;
  }

  .gjs-subtitle {
    font-size: 12px;
  }

  .gjs-body {
    padding: 12px 14px 16px;
    border-radius: 0;
  }

  .gjs-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .gjs-card-title {
    font-size: 15px;
  }

  .gjs-card-score {
    font-size: 12px;
  }

  .gjs-card-actions {
    flex-direction: column;
  }

  .gjs-action-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Detail view mobile */
  .gjs-detail-header {
    padding: 10px 14px;
    border-radius: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .gjs-detail-back-btn {
    font-size: 12px;
    padding: 5px 10px;
  }

  .gjs-detail-header-right {
    gap: 6px;
  }

  .gjs-detail-score {
    font-size: 12px;
  }

  .gjs-detail-title-section {
    padding: 14px 16px 6px;
  }

  .gjs-detail-job-title {
    font-size: 18px;
  }

  .gjs-detail-body {
    padding: 12px 14px 16px;
    border-radius: 0;
  }

  .gjs-detail-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gjs-overview-card {
    padding: 10px 12px;
  }

  .gjs-overview-value {
    font-size: 13px;
  }

  .gjs-detail-section-title {
    font-size: 14px;
  }
}

/* ── Tablet (768-1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .gap-job-selection-modal {
    padding: 20px 32px;
  }

  .gjs-detail-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gjs-header {
    padding: 18px 22px 12px;
  }

  .gjs-detail-header {
    padding: 14px 20px;
  }

  .gjs-detail-body {
    padding: 16px 22px 22px;
  }
}

/* ── Wide screen (≥1200px) ── */
@media (min-width: 1200px) {
  .gap-job-selection-modal {
    padding: 32px 48px;
  }
}


/* ================================================================
   R1-C: Resume Data Source Badge
   Indicates whether analysis uses confirmed_resume or AI parsed
   ================================================================ */

.wf-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
  flex-shrink: 0;
}

.wf-source-badge-icon {
  font-size: 10px;
  line-height: 1;
}

/* Confirmed resume — green/gold */
.wf-source-badge-confirmed {
  background: rgba(72, 199, 142, 0.12);
  border: 1px solid rgba(72, 199, 142, 0.35);
  color: rgba(72, 199, 142, 0.9);
}

.wf-source-badge-confirmed .wf-source-badge-icon {
  color: rgba(72, 199, 142, 0.85);
}

/* AI parsed — amber */
.wf-source-badge-parsed {
  background: rgba(216, 180, 90, 0.10);
  border: 1px solid rgba(216, 180, 90, 0.30);
  color: rgba(216, 180, 90, 0.85);
  cursor: pointer;
}

.wf-source-badge-parsed .wf-source-badge-icon {
  color: rgba(216, 180, 90, 0.80);
}

.wf-source-badge-parsed:hover {
  background: rgba(216, 180, 90, 0.18);
  border-color: rgba(216, 180, 90, 0.50);
  color: rgba(243, 213, 107, 0.95);
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .wf-source-badge {
    font-size: 10px;
    padding: 2px 8px;
    margin-left: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   R2-B: Career Roadmap Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Generate Button in Gap Result ── */
.gap-roadmap-section {
  text-align: center;
  padding: 16px 0 8px;
  margin-top: 12px;
  border-top: 1px solid rgba(216, 180, 90, 0.15);
}

.roadmap-generate-btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  background: linear-gradient(135deg, #d8b45a 0%, #f3d56b 50%, #d8b45a 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.roadmap-generate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(216, 180, 90, 0.35);
}

.roadmap-generate-btn:active:not(:disabled) {
  transform: translateY(0);
}

.roadmap-generate-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.12);
}

.roadmap-btn-hint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ── Roadmap Modal Overlay (fixed) ── */
body.fg-modal-open {
  overflow: hidden;
}

.fg-roadmap-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 8, 24, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Duration Selection Modal ── */

.roadmap-duration-card {
  background: linear-gradient(145deg, #1e2a4a 0%, #162040 100%);
  border: 1px solid rgba(216, 180, 90, 0.2);
  border-radius: 20px;
  padding: 32px;
  width: min(620px, calc(100vw - 40px));
  max-height: min(80vh, 620px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.roadmap-duration-header {
  text-align: center;
  margin-bottom: 24px;
}

.roadmap-duration-header h2 {
  color: #f3d56b;
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 700;
}

.roadmap-duration-header p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin: 0;
}

.roadmap-duration-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.roadmap-duration-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  font-family: inherit;
}

.roadmap-duration-opt:hover {
  background: rgba(216, 180, 90, 0.08);
  border-color: rgba(216, 180, 90, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(216, 180, 90, 0.15);
}

.roadmap-opt-num {
  font-size: 36px;
  font-weight: 800;
  color: #f3d56b;
  line-height: 1;
}

.roadmap-opt-label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.roadmap-opt-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-align: center;
}

.roadmap-duration-close {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.roadmap-duration-close:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}

/* ── Loading Modal ── */

.roadmap-loading-card {
  background: linear-gradient(145deg, #1e2a4a 0%, #162040 100%);
  border: 1px solid rgba(216, 180, 90, 0.15);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
}

.roadmap-loading-card p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  margin: 20px 0 0;
}

.roadmap-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid rgba(216, 180, 90, 0.15);
  border-top: 3px solid #f3d56b;
  border-radius: 50%;
  animation: roadmapSpin 0.8s linear infinite;
}

@keyframes roadmapSpin {
  to { transform: rotate(360deg); }
}

/* ── Result Modal ── */

.roadmap-result-card {
  background: linear-gradient(145deg, #1e2a4a 0%, #162040 100%);
  border: 1px solid rgba(216, 180, 90, 0.2);
  border-radius: 20px;
  padding: 28px;
  width: min(960px, calc(100vw - 48px));
  max-height: min(86vh, 820px);
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

.roadmap-result-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(216, 180, 90, 0.15);
}

.roadmap-result-header h2 {
  color: #f3d56b;
  font-size: 24px;
  margin: 0 0 8px;
  font-weight: 700;
}

.roadmap-result-summary {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.5;
}

.roadmap-result-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.roadmap-meta-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(216, 180, 90, 0.1);
  border: 1px solid rgba(216, 180, 90, 0.2);
  border-radius: 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}

/* ── Phase Title ── */
.roadmap-phase {
  margin-bottom: 20px;
}

.roadmap-phase-title {
  color: #f3d56b;
  font-size: 17px;
  margin: 0 0 12px;
  padding: 8px 16px;
  background: rgba(216, 180, 90, 0.08);
  border-left: 3px solid #d8b45a;
  border-radius: 0 8px 8px 0;
}

/* ── Week Cards ── */
.roadmap-weeks-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.roadmap-week-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px;
  transition: border-color 0.2s;
}

.roadmap-week-card:hover {
  border-color: rgba(216, 180, 90, 0.2);
}

.roadmap-week-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.roadmap-week-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  background: rgba(216, 180, 90, 0.15);
  color: #f3d56b;
  font-size: 12px;
  font-weight: 700;
  border-radius: 14px;
  padding: 0 10px;
}

/* R3-G-1B: Month phase tag for 12-week items */
.roadmap-week-month-phase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 24px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  padding: 0 8px;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .roadmap-week-month-phase {
    min-width: 44px;
    height: 22px;
    font-size: 10px;
  }
}

.roadmap-week-theme {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.roadmap-week-goal {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  padding-left: 52px;
  line-height: 1.4;
}

.roadmap-week-section {
  margin-bottom: 10px;
  padding-left: 52px;
}

.roadmap-week-label {
  font-size: 11px;
  font-weight: 700;
  color: #d8b45a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.roadmap-week-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roadmap-week-list li {
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  line-height: 1.6;
  padding: 2px 0;
}

.roadmap-week-deliverables li {
  color: rgba(243, 213, 107, 0.7);
}

.roadmap-week-bullets li {
  color: rgba(216, 180, 90, 0.8);
  font-style: italic;
}

.roadmap-week-metrics li {
  color: rgba(100, 220, 150, 0.7);
}

/* ── Final Outputs ── */
.roadmap-final-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(216, 180, 90, 0.15);
}

.roadmap-final-section h3 {
  color: #f3d56b;
  font-size: 17px;
  margin: 0 0 14px;
}

.roadmap-final-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.roadmap-final-item {
  background: rgba(216, 180, 90, 0.06);
  border: 1px solid rgba(216, 180, 90, 0.12);
  border-radius: 10px;
  padding: 14px;
}

.roadmap-final-item strong {
  display: block;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  margin-bottom: 4px;
}

.roadmap-final-item p {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}

/* ── Suggestions Sections ── */
.roadmap-suggestions-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(216, 180, 90, 0.1);
}

.roadmap-suggestions-section h3 {
  color: #f3d56b;
  font-size: 15px;
  margin: 0 0 10px;
}

.roadmap-suggestions-section ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.roadmap-suggestions-section li {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  line-height: 1.6;
  padding: 2px 0;
}

/* ── Action Buttons ── */
.roadmap-result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(216, 180, 90, 0.15);
}

.roadmap-action-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.roadmap-action-regenerate {
  background: linear-gradient(135deg, #d8b45a 0%, #f3d56b 50%, #d8b45a 100%);
  color: #1a1a2e;
}

.roadmap-action-regenerate:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(216, 180, 90, 0.3);
}

.roadmap-action-close {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.12);
}

.roadmap-action-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ── Mobile Responsive ── */
@media (max-width: 640px) {
  .roadmap-duration-options {
    grid-template-columns: 1fr;
  }

  .roadmap-duration-opt {
    flex-direction: row;
    padding: 14px 16px;
    gap: 12px;
    text-align: left;
  }

  .roadmap-opt-num {
    font-size: 28px;
    min-width: 36px;
    text-align: center;
  }

  .roadmap-result-card {
    width: calc(100vw - 24px);
    padding: 20px 14px;
    border-radius: 14px;
  }

  .roadmap-result-header h2 {
    font-size: 20px;
  }

  .roadmap-week-section,
  .roadmap-week-goal {
    padding-left: 0;
  }

  .roadmap-week-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .roadmap-final-items {
    grid-template-columns: 1fr;
  }

  .roadmap-result-actions {
    flex-direction: column;
  }

  .roadmap-action-btn {
    width: 100%;
  }

  .roadmap-result-meta {
    gap: 8px;
  }

  .roadmap-meta-tag {
    font-size: 11px;
    padding: 3px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   R3-G-1: Roadmap V2 Styles
   ═══════════════════════════════════════════════════════════════════ */

.roadmap-v2-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(64,224,208,0.15), rgba(132,185,255,0.15));
  color: rgba(64,224,208,0.9);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

.roadmap-v2-card {
  max-height: 85vh;
  overflow-y: auto;
}

.roadmap-strategy-box {
  background: rgba(132,185,255,0.08);
  border: 1px solid rgba(132,185,255,0.15);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

.roadmap-section {
  margin-top: 20px;
}

.roadmap-section-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(132,185,255,0.9);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(132,185,255,0.12);
}

/* Priority Gaps */
.roadmap-priority-gaps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roadmap-priority-gap-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(255,200,50,0.5);
  border-radius: 8px;
  padding: 12px 14px;
}

.roadmap-priority-gap-item.gap-severity-high {
  border-left-color: rgba(255,80,80,0.6);
}

.roadmap-priority-gap-item.gap-severity-low {
  border-left-color: rgba(64,224,208,0.5);
}

.gap-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.gap-skill-name {
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

.gap-type-badge {
  font-size: 10px;
  text-transform: uppercase;
  background: rgba(132,185,255,0.15);
  color: rgba(132,185,255,0.8);
  padding: 2px 8px;
  border-radius: 4px;
}

.gap-severity-badge {
  font-size: 11px;
  font-weight: 600;
}

.gap-reason {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 4px 0;
}

.gap-action {
  font-size: 13px;
  color: rgba(64,224,208,0.85);
  margin: 4px 0 0;
}

/* V2 Week Card */
.roadmap-week-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.roadmap-skill-tag {
  display: inline-block;
  background: rgba(64,224,208,0.12);
  color: rgba(64,224,208,0.9);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(64,224,208,0.2);
}

.roadmap-week-resume-update {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 4px 0;
  line-height: 1.5;
}

.roadmap-week-validation {
  font-size: 13px;
  color: rgba(64,224,208,0.8);
  margin: 4px 0;
}

.roadmap-week-time {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}

.roadmap-v2-card .roadmap-week-label.v2-label {
  font-weight: 600;
  color: rgba(132,185,255,0.8);
}

/* Difficulty tags */
.roadmap-difficulty-high {
  background: rgba(255,80,80,0.15) !important;
  color: rgba(255,120,120,0.9) !important;
}

.roadmap-difficulty-medium {
  background: rgba(255,200,50,0.15) !important;
  color: rgba(255,220,100,0.9) !important;
}

.roadmap-difficulty-low {
  background: rgba(64,224,208,0.12) !important;
  color: rgba(64,224,208,0.9) !important;
}

/* Project cards */
.roadmap-project-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.roadmap-project-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 8px;
}

.roadmap-project-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 4px 0;
}

.roadmap-project-purpose {
  color: rgba(132,185,255,0.85) !important;
}

.roadmap-project-bullet {
  background: rgba(64,224,208,0.08);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px !important;
  font-size: 12px !important;
  color: rgba(64,224,208,0.85) !important;
}

/* Resume rewrite items */
.roadmap-rewrite-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.roadmap-rewrite-item h4 {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}

.roadmap-rewrite-item p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin: 3px 0;
}

.roadmap-rewrite-template {
  color: rgba(132,185,255,0.8) !important;
  font-size: 12px !important;
}

/* Interview items */
.roadmap-interview-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.roadmap-interview-item h4 {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}

/* Checkpoints list */
.roadmap-checkpoints-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roadmap-checkpoints-list li {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border-left: 2px solid rgba(64,224,208,0.4);
  line-height: 1.5;
}

.roadmap-checkpoints-list li em {
  color: rgba(64,224,208,0.8);
}

/* ═══════════════════════════════════════════════════════════════════
   R3-G-1B: Roadmap V2 Duration Selector Styles
   ═══════════════════════════════════════════════════════════════════ */

.roadmap-v2-duration-card {
  background: rgba(15,25,50,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(132,185,255,0.2);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 520px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.roadmap-v2-duration-header {
  text-align: center;
  margin-bottom: 28px;
}

.roadmap-v2-duration-title {
  font-size: 22px;
  font-weight: 700;
  color: rgba(216,180,90,0.95);
  margin: 0 0 8px 0;
}

.roadmap-v2-duration-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.roadmap-v2-duration-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.roadmap-v2-duration-opt {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  color: rgba(255,255,255,0.85);
}

.roadmap-v2-duration-opt:hover {
  background: rgba(132,185,255,0.1);
  border-color: rgba(132,185,255,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(132,185,255,0.1);
}

.roadmap-v2-opt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.roadmap-v2-opt-icon {
  font-size: 22px;
}

.roadmap-v2-opt-label {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

.roadmap-v2-opt-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  display: block;
  margin-top: 4px;
}

.roadmap-v2-duration-cancel {
  display: block;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.roadmap-v2-duration-cancel:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
}

/* ═══════════════════════════════════════════════════════════════════
   R3-G-1B: Daily Plan (1-week sprint) & Monthly Phases (3-month)
   ═══════════════════════════════════════════════════════════════════ */

/* Daily plan section */
.roadmap-daily-plan-section {
  margin: 20px 0;
}

.roadmap-daily-plan-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: rgba(216,180,90,0.9);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(216,180,90,0.2);
}

.roadmap-daily-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: background 0.2s;
}

.roadmap-daily-item:hover {
  background: rgba(132,185,255,0.06);
}

.roadmap-daily-day {
  font-size: 14px;
  font-weight: 700;
  color: rgba(64,224,208,0.9);
  margin-bottom: 6px;
}

.roadmap-daily-theme {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}

.roadmap-daily-tasks {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}

.roadmap-daily-tasks li {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  padding: 3px 0 3px 16px;
  position: relative;
  line-height: 1.5;
}

.roadmap-daily-tasks li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: rgba(132,185,255,0.5);
}

.roadmap-daily-deliverable {
  font-size: 12px;
  color: rgba(64,224,208,0.7);
  margin: 4px 0 0 0;
}

.roadmap-daily-check {
  font-size: 11px;
  color: rgba(216,180,90,0.6);
  margin: 2px 0 0 0;
}

/* Monthly phases section */
.roadmap-monthly-phases-section {
  margin: 20px 0;
}

.roadmap-monthly-phases-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: rgba(216,180,90,0.9);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(216,180,90,0.2);
}

.roadmap-monthly-phase {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid rgba(132,185,255,0.5);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.roadmap-monthly-phase h4 {
  font-size: 16px;
  font-weight: 700;
  color: rgba(132,185,255,0.9);
  margin: 0 0 8px 0;
}

.roadmap-monthly-phase-obj {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
  line-height: 1.5;
}

.roadmap-monthly-phase-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.roadmap-monthly-phase-skill {
  font-size: 11px;
  padding: 3px 10px;
  background: rgba(132,185,255,0.15);
  border: 1px solid rgba(132,185,255,0.25);
  border-radius: 14px;
  color: rgba(132,185,255,0.85);
}

.roadmap-monthly-phase-deliverables {
  font-size: 12px;
  color: rgba(64,224,208,0.75);
  margin: 4px 0;
}

.roadmap-monthly-phase-criteria {
  font-size: 12px;
  color: rgba(216,180,90,0.65);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Horizon badge */
.roadmap-horizon-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 8px;
}

.roadmap-horizon-sprint {
  background: rgba(64,224,208,0.15);
  color: rgba(64,224,208,0.9);
  border: 1px solid rgba(64,224,208,0.25);
}

.roadmap-horizon-monthly {
  background: rgba(132,185,255,0.15);
  color: rgba(132,185,255,0.9);
  border: 1px solid rgba(132,185,255,0.25);
}

.roadmap-horizon-quarter {
  background: rgba(216,180,90,0.15);
  color: rgba(216,180,90,0.9);
  border: 1px solid rgba(216,180,90,0.25);
}

/* V2 mobile responsive */
@media (max-width: 640px) {
  .roadmap-v2-badge {
    font-size: 11px;
  }

  .roadmap-priority-gap-item {
    padding: 10px 12px;
  }

  .gap-item-header {
    gap: 4px;
  }

  .roadmap-project-card {
    padding: 12px;
  }

  .roadmap-project-card h4 {
    font-size: 14px;
  }

  .roadmap-v2-duration-card {
    padding: 24px 16px;
  }

  .roadmap-v2-duration-title {
    font-size: 18px;
  }

  .roadmap-v2-duration-opt {
    padding: 16px 14px;
  }

  .roadmap-daily-item {
    padding: 12px;
  }

  .roadmap-monthly-phase {
    padding: 14px;
  }

  /* R3-G-2: AI Writer mobile */
  .wf-gap-writer-section {
    padding: 12px 10px;
  }

  .wf-gap-writer-item {
    padding: 10px 12px;
  }

  .wf-gap-writer-badge {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   R3-G-2: AI Writer (DeepSeek) Coach Section Styles
   ═══════════════════════════════════════════════════════════════════ */

.wf-gap-writer-section {
  margin: 20px 0;
  background: linear-gradient(135deg, rgba(64,224,208,0.05), rgba(132,185,255,0.05));
  border: 1px solid rgba(132,185,255,0.2);
  border-radius: 12px;
  padding: 16px 18px;
  overflow: hidden;
}

.wf-gap-writer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(132,185,255,0.15);
  flex-wrap: wrap;
  gap: 8px;
}

.wf-gap-writer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(64,224,208,0.9);
  background: rgba(64,224,208,0.1);
  border: 1px solid rgba(64,224,208,0.2);
  border-radius: 20px;
  padding: 4px 14px;
}

.wf-gap-writer-version {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-style: italic;
}

.wf-gap-writer-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: background 0.2s;
}

.wf-gap-writer-item:last-of-type {
  margin-bottom: 0;
}

.wf-gap-writer-item:hover {
  background: rgba(255,255,255,0.05);
}

.wf-gap-writer-item-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(132,185,255,0.85);
  margin-bottom: 6px;
}

.wf-gap-writer-item-text {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  word-break: break-word;
}

.wf-gap-writer-disclaimer {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 11px;
  color: rgba(216,180,90,0.7);
  background: rgba(216,180,90,0.08);
  border: 1px solid rgba(216,180,90,0.15);
  border-radius: 6px;
  line-height: 1.5;
}