/* ================================================================
   FutureGo workbench redesign
   Visual shell only: preserves all workflow IDs, events, and data.
   ================================================================ */

@media (min-width: 768px) {
  html:not(.landing-active),
  html:not(.landing-active) body {
    background: #f2f0e9;
  }

  html:not(.landing-active) .app:has(#homeView.active) {
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    color: #172033;
    background:
      radial-gradient(circle at 92% 4%, rgba(44, 73, 112, 0.08), transparent 26rem),
      #f2f0e9;
  }

  html:not(.landing-active) .app:has(#homeView.active)::before,
  html:not(.landing-active) .app:has(#homeView.active) .orb,
  html:not(.landing-active) .app:has(#homeView.active) .marquee,
  html:not(.landing-active) #homeView.active .world-map-bg {
    display: none !important;
  }

  html:not(.landing-active) .app:has(#homeView.active) .topbar {
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 76px;
    padding: 0 max(28px, calc((100vw - 1320px) / 2));
    grid-template-columns: 1fr auto;
    gap: 24px;
    background: rgba(248, 247, 242, 0.94);
    border-bottom: 1px solid rgba(30, 43, 63, 0.1);
    box-shadow: 0 10px 30px rgba(27, 38, 55, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  html:not(.landing-active) .app:has(#homeView.active) .topbar > div:first-child {
    display: none;
  }

  html:not(.landing-active) .app:has(#homeView.active) .brand {
    justify-self: start;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0;
    text-align: left;
  }

  html:not(.landing-active) .app:has(#homeView.active) .brand::after {
    display: none;
  }

  html:not(.landing-active) .app:has(#homeView.active) .brand-title {
    color: #15243b;
    background: none;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-shadow: none;
  }

  html:not(.landing-active) .app:has(#homeView.active) .brand-sub {
    margin: 0;
    color: #78808d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  html:not(.landing-active) .app:has(#homeView.active) .top-actions {
    grid-column: 2;
    gap: 10px;
  }

  html:not(.landing-active) .app:has(#homeView.active) .nav-btn {
    height: 38px;
    min-width: 0;
    padding: 0 14px;
    border-radius: 8px;
    border-color: rgba(30, 43, 63, 0.14);
    color: #354155;
    background: #ffffff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
  }

  html:not(.landing-active) .app:has(#homeView.active) .nav-btn:hover {
    color: #172033;
    border-color: rgba(161, 126, 48, 0.55);
    box-shadow: 0 7px 18px rgba(27, 38, 55, 0.07);
    transform: translateY(-1px);
  }

  html:not(.landing-active) #homeView.active {
    position: relative;
    inset: auto;
    min-height: 100dvh;
    color: #172033;
    opacity: 1;
    transform: none;
  }

  html:not(.landing-active) #homeView.active .hero,
  html:not(.landing-active) #homeView.active .cta-row {
    display: none !important;
  }

  html:not(.landing-active) #homeView.active .workflow-home {
    display: block;
    width: min(1320px, calc(100% - 56px));
    max-width: none;
    margin: 0 auto;
    padding: 116px 0 72px;
  }

  html:not(.landing-active) .app:has(#homeView.active) .brand-sub {
    color: #5f6977;
    text-shadow: none;
  }

  html:not(.landing-active) #homeView.active .wf-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
    gap: 24px;
    align-items: stretch;
    padding: 0;
  }

  html:not(.landing-active) #homeView.active .wf-hero-left,
  html:not(.landing-active) #homeView.active .wf-hero-right {
    width: auto;
    min-width: 0;
    margin: 0;
  }

  html:not(.landing-active) #homeView.active .wf-hero {
    height: 100%;
    padding: clamp(30px, 4vw, 52px);
    text-align: left;
    border-radius: 14px;
    color: #f8f5eb;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 52%),
      #17263e;
    box-shadow: 0 18px 44px rgba(27, 38, 55, 0.12);
  }

  html:not(.landing-active) #homeView.active .wf-hero-eyebrow {
    display: inline-block;
    margin: 0 0 24px;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 2px solid #b99748;
    border-radius: 0;
    color: #d5bb7d;
    background: none;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.18em;
  }

  html:not(.landing-active) #homeView.active .wf-hero-title {
    max-width: 15em;
    margin: 0 0 18px;
    color: #f8f5eb;
    background: none;
    font-size: clamp(30px, 3.1vw, 46px);
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  html:not(.landing-active) #homeView.active .wf-hero-desc {
    max-width: 42rem;
    margin: 0;
    color: rgba(237, 240, 244, 0.72);
    font-size: 15px;
    line-height: 1.85;
    text-wrap: pretty;
  }

  html:not(.landing-active) #homeView.active .wf-dashboard-panel {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 26px 24px;
    border: 1px solid rgba(30, 43, 63, 0.11) !important;
    border-radius: 14px !important;
    background: #faf9f5 !important;
    box-shadow: 0 14px 36px rgba(27, 38, 55, 0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:not(.landing-active) #homeView.active .wf-dashboard-panel-title {
    margin: 0 0 15px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(30, 43, 63, 0.1);
    color: #172033;
    font-size: 15px;
    font-weight: 780;
    letter-spacing: 0;
  }

  html:not(.landing-active) #homeView.active .wf-dashboard-item {
    gap: 11px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(30, 43, 63, 0.075);
  }

  html:not(.landing-active) #homeView.active .wf-dashboard-item:last-child {
    border-bottom: 0;
  }

  html:not(.landing-active) #homeView.active .wf-dashboard-item-icon {
    width: 26px;
    color: #8b6e2d;
    font-size: 16px;
    filter: grayscale(1);
    opacity: 0.72;
  }

  html:not(.landing-active) #homeView.active .wf-dashboard-item-label {
    color: #263248;
    font-size: 13px;
    font-weight: 750;
  }

  html:not(.landing-active) #homeView.active .wf-dashboard-item-desc {
    color: #89909b;
    font-size: 11px;
  }

  html:not(.landing-active) #homeView.active .wf-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: none;
    margin: 24px 0 0;
  }

  html:not(.landing-active) #homeView.active .wf-card {
    min-height: 190px;
    padding: 25px 26px 22px;
    border: 1px solid rgba(30, 43, 63, 0.11);
    border-radius: 12px;
    color: #172033;
    background: #faf9f5;
    box-shadow: 0 12px 28px rgba(27, 38, 55, 0.055);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  html:not(.landing-active) #homeView.active .wf-card::before {
    display: none;
  }

  html:not(.landing-active) #homeView.active .wf-card:hover {
    border-color: rgba(139, 110, 45, 0.42);
    box-shadow: 0 18px 38px rgba(27, 38, 55, 0.09);
    transform: translateY(-2px);
  }

  html:not(.landing-active) #homeView.active .wf-card.locked {
    opacity: 0.5;
    filter: grayscale(0.65);
  }

  html:not(.landing-active) #homeView.active .wf-card-header {
    gap: 9px;
    margin-bottom: 18px;
  }

  html:not(.landing-active) #homeView.active .wf-card-num {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(139, 110, 45, 0.28);
    border-radius: 6px;
    color: #745a22;
    background: #eee8d9;
    font-size: 11px;
  }

  html:not(.landing-active) #homeView.active .wf-card-icon {
    font-size: 18px;
    filter: grayscale(1);
    opacity: 0.72;
  }

  html:not(.landing-active) #homeView.active .wf-card-title {
    margin-bottom: 8px;
    color: #172033;
    font-size: 20px;
    font-weight: 790;
    letter-spacing: -0.025em;
  }

  html:not(.landing-active) #homeView.active .wf-card-desc {
    max-width: 42rem;
    margin-bottom: 18px;
    color: #737c89;
    font-size: 13px;
    line-height: 1.7;
  }

  html:not(.landing-active) #homeView.active .wf-card-status {
    margin-top: auto;
  }

  html:not(.landing-active) #homeView.active .wf-records-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    font: inherit;
  }

  html:not(.landing-active) #homeView.active .wf-status-text,
  html:not(.landing-active) #homeView.active .wf-status-summary,
  html:not(.landing-active) #homeView.active .wf-parse-summary {
    color: #8b6e2d;
  }

  html:not(.landing-active) #homeView.active .change-resume-btn,
  html:not(.landing-active) #homeView.active .wf-review-btn,
  html:not(.landing-active) #homeView.active .change-target-job-btn {
    border-color: rgba(139, 110, 45, 0.34);
    border-radius: 8px;
    color: #6f5620;
    background: #f3efe4;
    box-shadow: none;
  }

  html:not(.landing-active) #homeView.active .wf-results {
    margin-top: 24px;
    color: #172033;
  }

  html:not(.landing-active) #homeView.active .wf-closure {
    display: none;
  }

  html:not(.landing-active) .app:has(#homeView.active) .footer {
    color: #7b8490;
  }

  html:not(.landing-active) .app:has(#homeView.active) .footer-privacy-note,
  html:not(.landing-active) .app:has(#homeView.active) .footer-links a {
    color: #7b8490;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  html:not(.landing-active) #homeView.active .workflow-home {
    width: min(100% - 40px, 900px);
    padding-top: 104px;
  }

  html:not(.landing-active) #homeView.active .wf-hero-row {
    grid-template-columns: 1fr;
  }

  html:not(.landing-active) #homeView.active .wf-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  html:not(.landing-active) .app:has(#homeView.active) {
    background: #f2f0e9;
  }

  html:not(.landing-active) .app:has(#homeView.active)::before,
  html:not(.landing-active) .app:has(#homeView.active) .orb,
  html:not(.landing-active) .app:has(#homeView.active) .marquee,
  html:not(.landing-active) #homeView.active .world-map-bg {
    display: none !important;
  }

  html:not(.landing-active) #homeView.active .mobile-workflow-home {
    color: #172033;
    background: #f2f0e9;
  }

  html:not(.landing-active) #homeView.active .mw-hero-title,
  html:not(.landing-active) #homeView.active .mw-card-title {
    color: #172033;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  html:not(.landing-active) #homeView.active .mw-hero-desc,
  html:not(.landing-active) #homeView.active .mw-card-desc {
    color: #737c89;
  }

  html:not(.landing-active) #homeView.active .mw-card {
    border-color: rgba(30, 43, 63, 0.11);
    border-radius: 12px;
    color: #172033;
    background: #faf9f5;
    box-shadow: 0 10px 24px rgba(27, 38, 55, 0.06);
  }
}

/* Remaining app dialogs: records, resume editor, career job dialogs */
html:not(.landing-active) .records-overlay,
html:not(.landing-active) .rrc-overlay,
html:not(.landing-active) .job-detail-modal-overlay,
html:not(.landing-active) .job-selection-modal-overlay {
  background: rgba(28, 36, 49, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html:not(.landing-active) .records-modal,
html:not(.landing-active) .rrc-modal,
html:not(.landing-active) .job-detail-modal,
html:not(.landing-active) .job-selection-modal {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  border-radius: 14px;
  background: var(--wb-surface);
  box-shadow: 0 26px 70px rgba(20, 29, 43, 0.22);
}

html:not(.landing-active) .job-detail-modal-glow,
html:not(.landing-active) .job-selection-modal-glow {
  display: none;
}

html:not(.landing-active) .records-header,
html:not(.landing-active) .rrc-header,
html:not(.landing-active) .rrc-tabs,
html:not(.landing-active) .rrc-body,
html:not(.landing-active) .rrc-footer,
html:not(.landing-active) .job-detail-modal-header,
html:not(.landing-active) .job-detail-modal-body,
html:not(.landing-active) .job-detail-modal-footer,
html:not(.landing-active) .job-selection-modal-header,
html:not(.landing-active) .job-selection-modal-filters,
html:not(.landing-active) .job-selection-modal-content,
html:not(.landing-active) .job-selection-modal-footer {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not(.landing-active) .records-header h2,
html:not(.landing-active) .records-section-title,
html:not(.landing-active) .rrc-header-title,
html:not(.landing-active) .job-detail-modal-title,
html:not(.landing-active) #jobSelectionModalTitle,
html:not(.landing-active) .modal-job-card-title,
html:not(.landing-active) .modal-job-detail-title,
html:not(.landing-active) .modal-job-detail-section h4 {
  color: var(--wb-ink);
  text-shadow: none;
}

html:not(.landing-active) .records-loading,
html:not(.landing-active) .records-empty,
html:not(.landing-active) .records-hint,
html:not(.landing-active) .rrc-header-subtitle,
html:not(.landing-active) .rrc-footer-hint,
html:not(.landing-active) .rrc-skills-hint,
html:not(.landing-active) .job-detail-eyebrow,
html:not(.landing-active) .job-selection-eyebrow,
html:not(.landing-active) .job-selection-modal-header p,
html:not(.landing-active) .modal-job-card-meta,
html:not(.landing-active) .modal-job-card-desc,
html:not(.landing-active) .modal-job-detail-meta,
html:not(.landing-active) .modal-job-detail-section li {
  color: var(--wb-muted);
}

html:not(.landing-active) .records-close-btn,
html:not(.landing-active) .rrc-close-btn,
html:not(.landing-active) .job-detail-modal-close,
html:not(.landing-active) .job-selection-modal-close {
  border-color: var(--wb-border);
  color: var(--wb-ink-soft);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .records-table th,
html:not(.landing-active) .records-table td,
html:not(.landing-active) .records-section,
html:not(.landing-active) .rrc-tabs,
html:not(.landing-active) .rrc-footer {
  border-color: var(--wb-border);
}

html:not(.landing-active) .records-table th {
  color: var(--wb-ink-soft);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .records-table td {
  color: var(--wb-ink);
}

html:not(.landing-active) .records-table tbody tr:hover {
  background: #eeeae0;
}

html:not(.landing-active) .rrc-tab {
  color: var(--wb-muted);
}

html:not(.landing-active) .rrc-tab:hover,
html:not(.landing-active) .rrc-tab.active {
  color: var(--wb-ink);
}

html:not(.landing-active) .rrc-tab.active {
  border-bottom-color: var(--wb-brass);
}

html:not(.landing-active) .rrc-item-card,
html:not(.landing-active) .job-overview-card,
html:not(.landing-active) .job-detail-section,
html:not(.landing-active) .job-selection-list-panel,
html:not(.landing-active) .job-selection-detail-panel,
html:not(.landing-active) .modal-job-card,
html:not(.landing-active) .modal-job-detail-section {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .rrc-field-label,
html:not(.landing-active) .rrc-item-index {
  color: var(--wb-ink-soft);
}

html:not(.landing-active) .rrc-field input,
html:not(.landing-active) .rrc-field textarea,
html:not(.landing-active) .rrc-field select,
html:not(.landing-active) .rrc-skills-flat textarea,
html:not(.landing-active) .job-selection-modal-filters input,
html:not(.landing-active) .job-selection-modal-filters select {
  border-color: var(--wb-border);
  color: var(--wb-ink);
  background: #ffffff;
}

html:not(.landing-active) .rrc-field input::placeholder,
html:not(.landing-active) .rrc-field textarea::placeholder,
html:not(.landing-active) .job-selection-modal-filters input::placeholder {
  color: #a1a7b0;
}

html:not(.landing-active) .job-selection-modal-filters select option {
  color: var(--wb-ink);
  background: #ffffff;
}

html:not(.landing-active) .rrc-pdf-link,
html:not(.landing-active) .rrc-add-btn,
html:not(.landing-active) .job-detail-modal-badge,
html:not(.landing-active) .modal-job-card-meta span,
html:not(.landing-active) .modal-job-detail-badge,
html:not(.landing-active) .modal-job-keyword {
  border-color: rgba(139, 110, 45, 0.2);
  color: var(--wb-brass);
  background: var(--wb-brass-bg);
}

html:not(.landing-active) .rrc-save-btn,
html:not(.landing-active) .records-action-btn,
html:not(.landing-active) .modal-job-card-detail-btn {
  border-color: #17263e;
  color: #ffffff;
  background: #17263e;
  box-shadow: none;
}

/* ================================================================
   Unified modal and generated-result theme
   ================================================================ */
html:not(.landing-active) {
  --wb-ink: #172033;
  --wb-ink-soft: #4f5b6c;
  --wb-muted: #7c8592;
  --wb-canvas: #f2f0e9;
  --wb-surface: #fbfaf6;
  --wb-surface-2: #f4f1e9;
  --wb-border: rgba(30, 43, 63, 0.13);
  --wb-border-strong: rgba(30, 43, 63, 0.22);
  --wb-brass: #8b6e2d;
  --wb-brass-bg: #eee8d9;
  --wb-success: #23845c;
  --wb-danger: #b85045;
}

html:not(.landing-active) .resume-parse-modal,
html:not(.landing-active) .recommend-modal,
html:not(.landing-active) .gap-job-selection-modal,
html:not(.landing-active) .fg-confirm-modal,
html:not(.landing-active) .fg-roadmap-overlay {
  background: rgba(28, 36, 49, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html:not(.landing-active) .resume-parse-dialog,
html:not(.landing-active) .recommend-modal > *,
html:not(.landing-active) .rm-detail-wrapper,
html:not(.landing-active) .fg-confirm-dialog,
html:not(.landing-active) .roadmap-duration-card,
html:not(.landing-active) .roadmap-v2-duration-card,
html:not(.landing-active) .roadmap-loading-card,
html:not(.landing-active) .roadmap-result-card {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  border-radius: 14px;
  background: var(--wb-surface);
  box-shadow: 0 26px 70px rgba(20, 29, 43, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not(.landing-active) .resume-parse-modal-header,
html:not(.landing-active) .recommend-modal-header,
html:not(.landing-active) .rm-detail-header,
html:not(.landing-active) .gjs-header,
html:not(.landing-active) .gjs-detail-header,
html:not(.landing-active) .fg-confirm-header,
html:not(.landing-active) .roadmap-result-header {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not(.landing-active) .resume-parse-modal-title,
html:not(.landing-active) .recommend-modal-title,
html:not(.landing-active) .rm-detail-job-title,
html:not(.landing-active) .gjs-title,
html:not(.landing-active) .gjs-detail-job-title,
html:not(.landing-active) .fg-confirm-title,
html:not(.landing-active) .roadmap-duration-header h2,
html:not(.landing-active) .roadmap-v2-duration-title,
html:not(.landing-active) .roadmap-result-header h2 {
  color: var(--wb-ink);
  text-shadow: none;
}

html:not(.landing-active) .resume-parse-modal-filename,
html:not(.landing-active) .recommend-modal-subtitle,
html:not(.landing-active) .gjs-subtitle,
html:not(.landing-active) .fg-confirm-body-text,
html:not(.landing-active) .roadmap-duration-header p,
html:not(.landing-active) .roadmap-v2-duration-subtitle,
html:not(.landing-active) .roadmap-loading-card p,
html:not(.landing-active) .roadmap-result-summary {
  color: var(--wb-muted);
}

html:not(.landing-active) .resume-parse-modal-close,
html:not(.landing-active) .recommend-modal-close,
html:not(.landing-active) .gjs-close-btn,
html:not(.landing-active) .gap-job-detail-close,
html:not(.landing-active) .fg-confirm-x {
  border-color: var(--wb-border);
  color: var(--wb-ink-soft);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .resume-parse-modal-close:hover,
html:not(.landing-active) .recommend-modal-close:hover,
html:not(.landing-active) .gjs-close-btn:hover,
html:not(.landing-active) .gap-job-detail-close:hover,
html:not(.landing-active) .fg-confirm-x:hover {
  border-color: var(--wb-border-strong);
  color: var(--wb-ink);
  background: #ebe7dd;
}

/* Resume parse modal */
html:not(.landing-active) .resume-parse-modal-body,
html:not(.landing-active) .resume-parse-modal-footer {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface);
}

html:not(.landing-active) .resume-parse-section,
html:not(.landing-active) .resume-parse-detail-card,
html:not(.landing-active) .diag-total-card {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .resume-parse-section-clickable:hover {
  border-color: rgba(139, 110, 45, 0.38);
  background: #eeeae0;
}

html:not(.landing-active) .resume-parse-section-title,
html:not(.landing-active) .resume-parse-detail-title,
html:not(.landing-active) .resume-parse-detail-subtitle,
html:not(.landing-active) .diag-total-score {
  color: var(--wb-ink);
}

html:not(.landing-active) .resume-parse-section-desc,
html:not(.landing-active) .resume-parse-section-text,
html:not(.landing-active) .resume-parse-section-hint,
html:not(.landing-active) .resume-parse-detail-meta,
html:not(.landing-active) .resume-parse-detail-bullet,
html:not(.landing-active) .resume-parse-detail-bullet-list li,
html:not(.landing-active) .resume-parse-detail-suggestion {
  color: var(--wb-ink-soft);
}

html:not(.landing-active) .resume-parse-tag {
  border-color: rgba(58, 80, 111, 0.16);
  color: #4b607b;
  background: #e9edf2;
}

html:not(.landing-active) .resume-parse-tag.signal-green,
html:not(.landing-active) .resume-parse-quality-badge.badge-good {
  border-color: rgba(35, 132, 92, 0.22);
  color: var(--wb-success);
  background: rgba(35, 132, 92, 0.08);
}

html:not(.landing-active) .resume-parse-quality-badge.badge-warn {
  border-color: rgba(139, 110, 45, 0.25);
  color: #806522;
  background: var(--wb-brass-bg);
}

html:not(.landing-active) .resume-parse-quality-badge.badge-missing {
  border-color: rgba(184, 80, 69, 0.22);
  color: var(--wb-danger);
  background: rgba(184, 80, 69, 0.08);
}

/* Recommendation modal and details */
html:not(.landing-active) .recommend-modal-body,
html:not(.landing-active) .rm-detail-body,
html:not(.landing-active) .rm-detail-footer,
html:not(.landing-active) .rm-detail-title-section {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface);
}

html:not(.landing-active) .recommend-job-card,
html:not(.landing-active) .rm-overview-card,
html:not(.landing-active) .rm-detail-section {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .recommend-job-card .wf-job-result-title,
html:not(.landing-active) .recommend-job-card .wf-job-result-score,
html:not(.landing-active) .recommend-job-card .wf-job-result-section-title,
html:not(.landing-active) .rm-overview-value,
html:not(.landing-active) .rm-detail-section-title {
  color: var(--wb-ink);
}

html:not(.landing-active) .recommend-job-card .wf-job-result-text,
html:not(.landing-active) .recommend-job-card .wf-job-result-meta,
html:not(.landing-active) .rm-overview-label,
html:not(.landing-active) .rm-detail-list li,
html:not(.landing-active) .rm-detail-empty {
  color: var(--wb-ink-soft);
}

html:not(.landing-active) .wf-job-result-tag,
html:not(.landing-active) .rm-detail-tag,
html:not(.landing-active) .gjs-card-tag,
html:not(.landing-active) .gjs-detail-tag {
  border-color: rgba(58, 80, 111, 0.16);
  color: #4b607b;
  background: #e9edf2;
}

html:not(.landing-active) .rm-detail-tag.required,
html:not(.landing-active) .gjs-detail-tag.required {
  border-color: rgba(184, 80, 69, 0.2);
  color: var(--wb-danger);
  background: rgba(184, 80, 69, 0.07);
}

html:not(.landing-active) .rm-detail-tag.preferred,
html:not(.landing-active) .gjs-detail-tag.preferred {
  border-color: rgba(35, 132, 92, 0.2);
  color: var(--wb-success);
  background: rgba(35, 132, 92, 0.07);
}

html:not(.landing-active) .rm-detail-score,
html:not(.landing-active) .gjs-card-score,
html:not(.landing-active) .gjs-detail-score {
  border-color: rgba(139, 110, 45, 0.2);
  color: var(--wb-brass);
  background: var(--wb-brass-bg);
}

html:not(.landing-active) .recommend-job-actions .wf-job-result-btn,
html:not(.landing-active) .rm-detail-back-btn,
html:not(.landing-active) .gjs-detail-btn,
html:not(.landing-active) .gjs-detail-back-btn {
  border-color: var(--wb-border);
  color: var(--wb-ink);
  background: #ffffff;
}

html:not(.landing-active) .rm-detail-select-btn,
html:not(.landing-active) .gjs-select-btn,
html:not(.landing-active) .fg-confirm-primary,
html:not(.landing-active) .roadmap-action-regenerate {
  border-color: #17263e;
  color: #ffffff;
  background: #17263e;
  box-shadow: none;
}

html:not(.landing-active) .rm-detail-select-btn:hover,
html:not(.landing-active) .gjs-select-btn:hover,
html:not(.landing-active) .fg-confirm-primary:hover,
html:not(.landing-active) .roadmap-action-regenerate:hover {
  border-color: #253a58;
  color: #ffffff;
  background: #253a58;
  box-shadow: 0 8px 18px rgba(23, 38, 62, 0.16);
}

/* Target-job selection modal */
html:not(.landing-active) .gjs-header,
html:not(.landing-active) .gjs-body,
html:not(.landing-active) .gjs-detail-header,
html:not(.landing-active) .gjs-detail-title-section,
html:not(.landing-active) .gjs-detail-body,
html:not(.landing-active) .gap-job-detail-wrapper,
html:not(.landing-active) .gap-job-detail-header,
html:not(.landing-active) .gap-job-detail-body {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface);
}

html:not(.landing-active) .gjs-job-card,
html:not(.landing-active) .gjs-overview-card,
html:not(.landing-active) .gap-job-overview-card,
html:not(.landing-active) .gap-job-detail-section {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .gjs-job-card:hover,
html:not(.landing-active) .gjs-job-card.gjs-recommended {
  border-color: rgba(139, 110, 45, 0.38);
  background: #eeeae0;
  box-shadow: none;
}

html:not(.landing-active) .gjs-card-title,
html:not(.landing-active) .gjs-overview-value,
html:not(.landing-active) .gjs-detail-section-title,
html:not(.landing-active) .gap-job-detail-header-title,
html:not(.landing-active) .gap-job-overview-value,
html:not(.landing-active) .gap-job-detail-section-title {
  color: var(--wb-ink);
}

html:not(.landing-active) .gjs-card-summary,
html:not(.landing-active) .gjs-detail-text,
html:not(.landing-active) .gjs-detail-list li,
html:not(.landing-active) .gjs-detail-empty,
html:not(.landing-active) .gjs-overview-label,
html:not(.landing-active) .gjs-loading,
html:not(.landing-active) .gjs-empty,
html:not(.landing-active) .gap-job-detail-list li,
html:not(.landing-active) .gap-job-detail-empty,
html:not(.landing-active) .gap-job-overview-label {
  color: var(--wb-ink-soft);
}

html:not(.landing-active) .gjs-card-actions {
  border-color: var(--wb-border);
}

/* Gap-analysis generated result */
html:not(.landing-active) #homeView.active .wf-results,
html:not(.landing-active) #homeView.active .wf-gap-result,
html:not(.landing-active) #homeView.active .wf-gap-result * {
  text-shadow: none;
}

html:not(.landing-active) #homeView.active .wf-gap-result {
  color: var(--wb-ink);
  border: 1px solid var(--wb-border);
  background: var(--wb-surface);
  box-shadow: 0 14px 36px rgba(27, 38, 55, 0.07);
}

html:not(.landing-active) #homeView.active .gap-target-job-card,
html:not(.landing-active) #homeView.active .wf-gap-section,
html:not(.landing-active) #homeView.active .wf-gap-writer-section,
html:not(.landing-active) #homeView.active .wf-gap-writer-item,
html:not(.landing-active) #homeView.active .roadmap-priority-gap-item,
html:not(.landing-active) #homeView.active .roadmap-project-card,
html:not(.landing-active) #homeView.active .roadmap-rewrite-item,
html:not(.landing-active) #homeView.active .roadmap-interview-item {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

html:not(.landing-active) #homeView.active .gap-target-job-title,
html:not(.landing-active) #homeView.active .wf-gap-section-title,
html:not(.landing-active) #homeView.active .wf-gap-writer-item-title,
html:not(.landing-active) #homeView.active .gap-skill-name,
html:not(.landing-active) #homeView.active .roadmap-project-card h4,
html:not(.landing-active) #homeView.active .roadmap-rewrite-item h4,
html:not(.landing-active) #homeView.active .roadmap-interview-item h4 {
  color: var(--wb-ink);
}

html:not(.landing-active) #homeView.active .wf-gap-result-score-value,
html:not(.landing-active) #homeView.active .gap-target-job-label {
  color: var(--wb-brass);
}

html:not(.landing-active) #homeView.active .wf-gap-result-score-label,
html:not(.landing-active) #homeView.active .gap-target-job-hint,
html:not(.landing-active) #homeView.active .wf-gap-section-list li,
html:not(.landing-active) #homeView.active .wf-gap-writer-item-text,
html:not(.landing-active) #homeView.active .wf-gap-writer-version,
html:not(.landing-active) #homeView.active .gap-reason,
html:not(.landing-active) #homeView.active .gap-action,
html:not(.landing-active) #homeView.active .roadmap-project-card p,
html:not(.landing-active) #homeView.active .roadmap-rewrite-item p {
  color: var(--wb-ink-soft);
}

html:not(.landing-active) #homeView.active .gap-skill-tag,
html:not(.landing-active) #homeView.active .gap-type-badge,
html:not(.landing-active) #homeView.active .roadmap-skill-tag {
  border-color: rgba(139, 110, 45, 0.2);
  color: var(--wb-brass);
  background: var(--wb-brass-bg);
}

/* Confirmation and roadmap modals */
html:not(.landing-active) .fg-confirm-actions,
html:not(.landing-active) .roadmap-result-actions {
  border-color: var(--wb-border);
}

html:not(.landing-active) .fg-confirm-cancel,
html:not(.landing-active) .roadmap-action-close,
html:not(.landing-active) .roadmap-duration-close,
html:not(.landing-active) .roadmap-v2-duration-cancel {
  border-color: var(--wb-border);
  color: var(--wb-ink);
  background: #ffffff;
}

html:not(.landing-active) .roadmap-duration-opt,
html:not(.landing-active) .roadmap-v2-duration-opt,
html:not(.landing-active) .roadmap-week-card,
html:not(.landing-active) .roadmap-final-item,
html:not(.landing-active) .roadmap-v2-card,
html:not(.landing-active) .roadmap-strategy-box,
html:not(.landing-active) .roadmap-priority-gap-item,
html:not(.landing-active) .roadmap-project-card,
html:not(.landing-active) .roadmap-rewrite-item,
html:not(.landing-active) .roadmap-interview-item,
html:not(.landing-active) .roadmap-daily-item,
html:not(.landing-active) .roadmap-monthly-phase {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .roadmap-duration-opt:hover,
html:not(.landing-active) .roadmap-v2-duration-opt:hover,
html:not(.landing-active) .roadmap-week-card:hover,
html:not(.landing-active) .roadmap-daily-item:hover {
  border-color: rgba(139, 110, 45, 0.38);
  background: #eeeae0;
  box-shadow: none;
}

html:not(.landing-active) .roadmap-opt-num,
html:not(.landing-active) .roadmap-phase-title,
html:not(.landing-active) .roadmap-week-label,
html:not(.landing-active) .roadmap-final-section h3,
html:not(.landing-active) .roadmap-suggestions-section h3,
html:not(.landing-active) .roadmap-section-title,
html:not(.landing-active) .roadmap-v2-duration-title,
html:not(.landing-active) .roadmap-v2-opt-label,
html:not(.landing-active) .roadmap-daily-theme,
html:not(.landing-active) .roadmap-monthly-phase h4 {
  color: var(--wb-ink);
}

html:not(.landing-active) .roadmap-opt-label,
html:not(.landing-active) .roadmap-week-theme,
html:not(.landing-active) .roadmap-final-item strong,
html:not(.landing-active) .roadmap-project-card h4,
html:not(.landing-active) .roadmap-rewrite-item h4,
html:not(.landing-active) .roadmap-interview-item h4 {
  color: var(--wb-ink);
}

html:not(.landing-active) .roadmap-opt-desc,
html:not(.landing-active) .roadmap-week-goal,
html:not(.landing-active) .roadmap-week-list li,
html:not(.landing-active) .roadmap-final-item p,
html:not(.landing-active) .roadmap-suggestions-section li,
html:not(.landing-active) .roadmap-v2-opt-desc,
html:not(.landing-active) .roadmap-project-card p,
html:not(.landing-active) .roadmap-rewrite-item p,
html:not(.landing-active) .roadmap-daily-tasks li,
html:not(.landing-active) .roadmap-monthly-phase-obj {
  color: var(--wb-ink-soft);
}

html:not(.landing-active) .roadmap-meta-tag,
html:not(.landing-active) .roadmap-week-num,
html:not(.landing-active) .roadmap-skill-tag,
html:not(.landing-active) .roadmap-horizon-badge,
html:not(.landing-active) .roadmap-monthly-phase-skill {
  border-color: rgba(139, 110, 45, 0.2);
  color: var(--wb-brass);
  background: var(--wb-brass-bg);
}

html:not(.landing-active) .roadmap-spinner,
html:not(.landing-active) .gjs-loading-spinner {
  border-color: rgba(23, 38, 62, 0.14);
  border-top-color: #17263e;
}

@media (max-width: 767px) {
  html:not(.landing-active) .resume-parse-dialog,
  html:not(.landing-active) .recommend-modal > *,
  html:not(.landing-active) .rm-detail-wrapper,
  html:not(.landing-active) .roadmap-result-card {
    border-radius: 14px 14px 0 0;
  }
}

/* ================================================================
   Alignment and readability fixes
   ================================================================ */

/* Header controls remain legible on the light workbench header. */
html:not(.landing-active) .app:has(#homeView.active) .lang-option {
  color: #536074;
}

html:not(.landing-active) .app:has(#homeView.active) .lang-option.active {
  color: #17263e;
  border-color: rgba(139, 110, 45, 0.28);
  background: #eee8d9;
  box-shadow: none;
}

html:not(.landing-active) .app:has(#homeView.active) .lang-divider {
  color: #9aa1ab;
}

html:not(.landing-active) .app:has(#homeView.active) .user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 94px;
  text-align: center;
}

html:not(.landing-active) .app:has(#homeView.active) .user-btn::after {
  margin-left: 0;
  color: #7c8592;
}

html:not(.landing-active) .app:has(#homeView.active) .user-dropdown-menu {
  min-width: 164px;
  padding: 7px;
  border: 1px solid var(--wb-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(20, 29, 43, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not(.landing-active) .app:has(#homeView.active) .user-dropdown-item,
html:not(.landing-active) .app:has(#homeView.active) .user-dropdown-item.logout {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  color: #354155;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
}

html:not(.landing-active) .app:has(#homeView.active) .user-dropdown-item + .user-dropdown-item {
  margin-top: 2px;
}

html:not(.landing-active) .app:has(#homeView.active) .user-dropdown-item:hover,
html:not(.landing-active) .app:has(#homeView.active) .user-dropdown-item.logout:hover {
  color: #17263e;
  border-color: transparent;
  background: #f2f0e9;
  box-shadow: none;
  transform: none;
}

html:not(.landing-active) .app:has(#homeView.active) .user-dropdown-item.logout {
  color: #a04c44;
}

/* Target-job picker: the header and job list occupy separate layout rows. */
html:not(.landing-active) .gap-job-selection-modal.active {
  overflow: hidden;
  padding: 24px;
  justify-content: center;
}

html:not(.landing-active) .gap-job-selection-modal > .gjs-header,
html:not(.landing-active) .gap-job-selection-modal > .gjs-body,
html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-header,
html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-title-section,
html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-body {
  width: min(780px, calc(100vw - 48px));
  box-sizing: border-box;
}

html:not(.landing-active) .gap-job-selection-modal > .gjs-header,
html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-header {
  position: relative;
  top: auto;
  z-index: 1;
  flex: 0 0 auto;
}

html:not(.landing-active) .gap-job-selection-modal > .gjs-body,
html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-body {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-title-section {
  flex: 0 0 auto;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--wb-border);
}

html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-title-section .gjs-detail-job-title {
  text-align: left;
}

/* Recommendation detail is one continuous, aligned panel. */
html:not(.landing-active) .recommend-modal > .rm-detail-wrapper {
  width: min(960px, calc(100vw - 40px));
  max-width: 960px;
  overflow: hidden;
  margin: auto;
  box-sizing: border-box;
}

html:not(.landing-active) .rm-detail-wrapper > .rm-detail-header,
html:not(.landing-active) .rm-detail-wrapper > .rm-detail-title-section,
html:not(.landing-active) .rm-detail-wrapper > .rm-detail-body,
html:not(.landing-active) .rm-detail-wrapper > .rm-detail-footer {
  width: 100%;
  box-sizing: border-box;
}

html:not(.landing-active) .rm-detail-title-section {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--wb-border);
}

html:not(.landing-active) .rm-detail-job-title {
  text-align: left;
}

/* Roadmap V2 contains legacy dark-theme text colors; force a clear light theme. */
html:not(.landing-active) .roadmap-v2-card,
html:not(.landing-active) .roadmap-v2-card .roadmap-result-body,
html:not(.landing-active) .roadmap-v2-card .roadmap-section,
html:not(.landing-active) .roadmap-v2-card .roadmap-priority-gap-item {
  color: var(--wb-ink);
}

html:not(.landing-active) .roadmap-v2-card .roadmap-priority-gap-item {
  border-color: var(--wb-border);
  border-left-color: #b99748;
  background: var(--wb-surface-2);
}

html:not(.landing-active) .roadmap-v2-card .roadmap-priority-gap-item.gap-severity-high {
  border-left-color: #b85045;
}

html:not(.landing-active) .roadmap-v2-card .roadmap-priority-gap-item.gap-severity-low {
  border-left-color: #23845c;
}

html:not(.landing-active) .roadmap-v2-card .gap-skill-name,
html:not(.landing-active) .roadmap-v2-card .gap-severity-badge {
  color: var(--wb-ink);
}

html:not(.landing-active) .roadmap-v2-card .gap-reason {
  color: var(--wb-ink-soft);
}

html:not(.landing-active) .roadmap-v2-card .gap-action {
  color: #23765b;
}

html:not(.landing-active) .roadmap-v2-card .gap-type-badge {
  color: #4b607b;
  background: #e5eaf0;
}

html:not(.landing-active) .roadmap-v2-card .roadmap-strategy-box {
  color: var(--wb-ink);
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

html:not(.landing-active) .roadmap-v2-card .roadmap-v2-badge {
  color: #23765b;
  background: rgba(35, 132, 92, 0.08);
}

@media (max-width: 767px) {
  html:not(.landing-active) .gap-job-selection-modal.active {
    padding: 0;
    justify-content: flex-start;
  }

  html:not(.landing-active) .gap-job-selection-modal > .gjs-header,
  html:not(.landing-active) .gap-job-selection-modal > .gjs-body,
  html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-header,
  html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-title-section,
  html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-body {
    width: 100%;
  }

  html:not(.landing-active) .gap-job-selection-modal > .gjs-body,
  html:not(.landing-active) .gap-job-selection-modal > .gjs-detail-body {
    max-height: calc(100dvh - 106px);
  }

  html:not(.landing-active) .rm-detail-title-section {
    padding: 16px;
  }
}

/* Mobile uses the same workflow cards, state, and handlers as desktop. */
@media (max-width: 767px) {
  html:not(.landing-active),
  html:not(.landing-active) body {
    background: #f2f0e9;
  }

  html:not(.landing-active) .app:has(#homeView.active) {
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    color: #172033;
    background: #f2f0e9;
  }

  html:not(.landing-active) #homeView.active .mobile-workflow-home {
    display: none !important;
  }

  html:not(.landing-active) #homeView.active .workflow-home {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 22px 16px calc(96px + env(safe-area-inset-bottom, 0px));
    color: #172033;
  }

  html:not(.landing-active) #homeView.active .wf-hero-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
  }

  html:not(.landing-active) #homeView.active .wf-hero-left,
  html:not(.landing-active) #homeView.active .wf-hero-right {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  html:not(.landing-active) #homeView.active .wf-hero {
    padding: 22px 20px;
    text-align: left;
    border-radius: 14px;
    color: #f8f5eb;
    background: #17263e;
    box-shadow: 0 14px 32px rgba(27, 38, 55, 0.12);
  }

  html:not(.landing-active) #homeView.active .wf-hero-eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid #b99748;
    color: #d5bb7d;
    background: none;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.14em;
  }

  html:not(.landing-active) #homeView.active .wf-hero-title {
    margin: 0 0 12px;
    color: #f8f5eb;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(27px, 8.4vw, 36px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.035em;
  }

  html:not(.landing-active) #homeView.active .wf-hero-desc {
    margin: 0;
    color: rgba(237, 240, 244, 0.78);
    font-size: 13px;
    line-height: 1.75;
  }

  html:not(.landing-active) #homeView.active .wf-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: none;
    margin: 14px 0 0;
  }

  html:not(.landing-active) #homeView.active .wf-card {
    display: flex;
    min-height: 0;
    padding: 20px 18px 18px;
    flex-direction: column;
    border: 1px solid rgba(30, 43, 63, 0.12);
    border-radius: 12px;
    color: #172033;
    background: #faf9f5;
    box-shadow: 0 10px 24px rgba(27, 38, 55, 0.06);
  }

  html:not(.landing-active) #homeView.active .wf-card::before {
    display: none;
  }

  html:not(.landing-active) #homeView.active .wf-records-card {
    width: 100%;
    text-align: left;
    font: inherit;
  }

  html:not(.landing-active) #homeView.active .wf-records-card .wf-card-num {
    display: none;
  }

  html:not(.landing-active) #homeView.active .wf-card-header {
    gap: 9px;
    margin-bottom: 14px;
  }

  html:not(.landing-active) #homeView.active .wf-card-num {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(139, 110, 45, 0.28);
    border-radius: 6px;
    color: #745a22;
    background: #eee8d9;
    font-size: 11px;
  }

  html:not(.landing-active) #homeView.active .wf-card-icon {
    font-size: 18px;
    filter: grayscale(1);
    opacity: 0.75;
  }

  html:not(.landing-active) #homeView.active .wf-card-title {
    margin-bottom: 7px;
    color: #172033;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  html:not(.landing-active) #homeView.active .wf-card-desc {
    margin-bottom: 14px;
    color: #667181;
    font-size: 13px;
    line-height: 1.7;
  }

  html:not(.landing-active) #homeView.active .wf-status-text,
  html:not(.landing-active) #homeView.active .wf-status-summary,
  html:not(.landing-active) #homeView.active .wf-parse-summary,
  html:not(.landing-active) #homeView.active .resume-file-name {
    color: #765d27;
  }

  html:not(.landing-active) #homeView.active .wf-status-loading {
    color: #526071;
  }

  html:not(.landing-active) #homeView.active .change-resume-btn,
  html:not(.landing-active) #homeView.active .wf-review-btn,
  html:not(.landing-active) #homeView.active .change-target-job-btn {
    border-color: rgba(139, 110, 45, 0.34);
    border-radius: 8px;
    color: #6f5620;
    background: #f3efe4;
    box-shadow: none;
  }

  html:not(.landing-active) #homeView.active .wf-results {
    margin-top: 16px;
    color: #172033;
  }

  html:not(.landing-active) #homeView.active .wf-closure {
    display: block;
    margin-top: 26px;
    padding: 22px 0 0;
    border-top: 1px solid rgba(30, 43, 63, 0.1);
  }

  html:not(.landing-active) #homeView.active .wf-closure-title {
    margin-bottom: 16px;
    color: #6f5620;
    font-size: 13px;
  }

  html:not(.landing-active) #homeView.active .wf-closure-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  html:not(.landing-active) #homeView.active .wf-closure-arrow {
    display: none !important;
  }

  html:not(.landing-active) #homeView.active .wf-closure-step {
    min-width: 0;
    min-height: 138px;
    padding: 14px 10px;
    justify-content: center;
    border: 1px solid rgba(30, 43, 63, 0.1);
    border-radius: 10px;
    background: #faf9f5;
  }

  html:not(.landing-active) #homeView.active .wf-closure-step-name {
    color: #253147;
  }

  html:not(.landing-active) #homeView.active .wf-closure-step-desc {
    color: #737c89;
  }
}

/* Keep generated roadmap copy readable on the light workbench theme. */
html:not(.landing-active) .roadmap-v2-card .roadmap-result-body,
html:not(.landing-active) .roadmap-v2-card .roadmap-result-body * {
  color: #17263e;
  text-shadow: none;
}

html:not(.landing-active) .roadmap-v2-card .roadmap-result-summary,
html:not(.landing-active) .roadmap-v2-card .roadmap-strategy-box,
html:not(.landing-active) .roadmap-v2-card .roadmap-section-title,
html:not(.landing-active) .roadmap-v2-card .roadmap-week-theme,
html:not(.landing-active) .roadmap-v2-card .roadmap-week-goal,
html:not(.landing-active) .roadmap-v2-card .roadmap-week-list li,
html:not(.landing-active) .roadmap-v2-card .roadmap-daily-theme,
html:not(.landing-active) .roadmap-v2-card .roadmap-daily-obj,
html:not(.landing-active) .roadmap-v2-card .roadmap-daily-tasks li,
html:not(.landing-active) .roadmap-v2-card .roadmap-daily-deliverable,
html:not(.landing-active) .roadmap-v2-card .roadmap-daily-check,
html:not(.landing-active) .roadmap-v2-card .roadmap-monthly-phase h4,
html:not(.landing-active) .roadmap-v2-card .roadmap-monthly-phase-theme,
html:not(.landing-active) .roadmap-v2-card .roadmap-monthly-phase-obj,
html:not(.landing-active) .roadmap-v2-card .roadmap-monthly-phase-deliverables li,
html:not(.landing-active) .roadmap-v2-card .roadmap-monthly-phase-criteria,
html:not(.landing-active) .roadmap-v2-card .roadmap-project-card h4,
html:not(.landing-active) .roadmap-v2-card .roadmap-project-card p,
html:not(.landing-active) .roadmap-v2-card .roadmap-rewrite-item h4,
html:not(.landing-active) .roadmap-v2-card .roadmap-rewrite-item p,
html:not(.landing-active) .roadmap-v2-card .roadmap-interview-item h4,
html:not(.landing-active) .roadmap-v2-card .roadmap-interview-item p,
html:not(.landing-active) .roadmap-v2-card .roadmap-checkpoints-list li,
html:not(.landing-active) .roadmap-v2-card .roadmap-checkpoints-list li em,
html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-section,
html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-item,
html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-item-title,
html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-item-text,
html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-version,
html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-disclaimer {
  color: #17263e;
  text-shadow: none;
}

html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-section,
html:not(.landing-active) .roadmap-v2-card .wf-gap-writer-item {
  border-color: var(--wb-border);
  background: var(--wb-surface-2);
}

/* Week-card status copy has legacy accent colors with very low light-theme contrast. */
html:not(.landing-active) .roadmap-v2-card .roadmap-week-label,
html:not(.landing-active) .roadmap-v2-card .roadmap-week-label.v2-label,
html:not(.landing-active) .roadmap-v2-card .roadmap-week-resume-update,
html:not(.landing-active) .roadmap-v2-card .roadmap-week-validation,
html:not(.landing-active) .roadmap-v2-card .roadmap-week-time,
html:not(.landing-active) .roadmap-v2-card .roadmap-project-purpose,
html:not(.landing-active) .roadmap-v2-card .roadmap-project-bullet,
html:not(.landing-active) .roadmap-v2-card .roadmap-rewrite-template {
  color: #17263e !important;
  text-shadow: none !important;
  opacity: 1;
}

html:not(.landing-active) .roadmap-v2-card .roadmap-week-time {
  border-top-color: rgba(23, 38, 62, 0.2);
}

/* Detail-modal readability guard for desktop and tablet light workbench. */
html:not(.landing-active) .resume-parse-modal .diag-total-summary,
html:not(.landing-active) .resume-parse-modal .diag-dim-card,
html:not(.landing-active) .resume-parse-modal .diag-dim-title,
html:not(.landing-active) .resume-parse-modal .diag-dim-score,
html:not(.landing-active) .resume-parse-modal .diag-sub-item,
html:not(.landing-active) .resume-parse-modal .diag-sub-label,
html:not(.landing-active) .resume-parse-modal .diag-sub-score,
html:not(.landing-active) .resume-parse-modal .diag-suggestion-text {
  color: #17263e !important;
  text-shadow: none !important;
  opacity: 1;
}

html:not(.landing-active) .resume-parse-modal .diag-dim-card,
html:not(.landing-active) .resume-parse-modal .diag-sub-item {
  border-color: rgba(23, 38, 62, 0.14);
  background: #faf9f5;
}

html:not(.landing-active) .resume-parse-modal .diag-evidence-label,
html:not(.landing-active) .resume-parse-modal .diag-evidence-tag {
  color: #23765b !important;
  opacity: 1;
}

html:not(.landing-active) .resume-parse-modal .diag-missing-label,
html:not(.landing-active) .resume-parse-modal .diag-missing-tag {
  color: #a4433a !important;
  opacity: 1;
}

html:not(.landing-active) #roadmapResultModal .roadmap-v2-card,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card p,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card li,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card strong,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card em,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-week-label,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-week-resume-update,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-week-validation,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-week-time,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-daily-obj,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-daily-deliverable,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-daily-check,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-monthly-phase-obj,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-monthly-phase-deliverables,
html:not(.landing-active) #roadmapResultModal .roadmap-v2-card .roadmap-monthly-phase-criteria {
  color: #17263e !important;
  text-shadow: none !important;
  opacity: 1;
}

/* Compact resume-template card attached to the resume parsing step. */
html:not(.landing-active) #homeView.active .wf-template-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 142px;
  margin-left: auto;
  padding: 8px 10px;
  border: 1px solid rgba(139, 110, 45, 0.25);
  border-radius: 9px;
  color: #17263e;
  background: #f3efe4;
  box-shadow: 0 5px 14px rgba(27, 38, 55, 0.055);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html:not(.landing-active) #homeView.active .wf-template-card:hover {
  border-color: rgba(139, 110, 45, 0.5);
  background: #eee8d9;
  box-shadow: 0 9px 20px rgba(27, 38, 55, 0.09);
  transform: translateY(-1px);
}

html:not(.landing-active) #homeView.active .wf-template-card:focus-visible {
  outline: 2px solid rgba(139, 110, 45, 0.55);
  outline-offset: 3px;
}

html:not(.landing-active) #homeView.active .wf-template-card-icon {
  font-size: 17px;
  filter: grayscale(1);
  opacity: 0.72;
}

html:not(.landing-active) #homeView.active .wf-template-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

html:not(.landing-active) #homeView.active .wf-template-card-title {
  color: #5f4818;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
  white-space: nowrap;
}

html:not(.landing-active) #homeView.active .wf-template-card-hint {
  color: #7d7361;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

html:not(.landing-active) #homeView.active .wf-template-card-arrow {
  color: #8b6e2d;
  font-size: 13px;
  line-height: 1;
}

@media (min-width: 768px) and (max-width: 1024px) {
  html:not(.landing-active) #homeView.active .wf-template-card {
    min-width: 128px;
    padding: 7px 9px;
  }

  html:not(.landing-active) #homeView.active .wf-template-card-hint {
    display: none;
  }
}

@media (max-width: 420px) {
  html:not(.landing-active) #homeView.active .wf-template-card {
    min-width: 0;
    padding: 7px 9px;
  }

  html:not(.landing-active) #homeView.active .wf-template-card-hint,
  html:not(.landing-active) #homeView.active .wf-template-card-arrow {
    display: none;
  }
}

/* Guest mode keeps the workflow available while clearly disabling saved records. */
html.guest-mode:not(.landing-active) #homeView.active .wf-records-card.guest-disabled {
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
  opacity: 0.42;
  box-shadow: none;
  transform: none;
}

html.guest-mode:not(.landing-active) #homeView.active .wf-records-card.guest-disabled:hover {
  border-color: rgba(27, 38, 55, 0.12);
  box-shadow: none;
  transform: none;
}