:root {
  --cvb-font: Inter, system-ui, -apple-system, sans-serif;
  --cvb-container-desktop: 1280px;
  --cvb-container-laptop: 1100px;

  /* Brand palette */
  --cvb-navy: #003E5E;
  --cvb-teal: #04A397;
  --cvb-teal-dark: #047274;
  --cvb-teal-hover: #038C80;
  --cvb-teal-accent: #144C58;
  --cvb-dark-bg: #0C3D4D;
  --cvb-side-top: #0C3D4D;
  --cvb-side-bottom: #144C58;

  /* Gold CTA */
  --cvb-gold: #E6BE4F;
  --cvb-gold-border: #D7B248;

  /* Neutrals */
  --cvb-page-bg: #F5F7FA;
  --cvb-card-bg: #FFFFFF;
  --cvb-surface: #F8FBFD;
  --cvb-border: #E6EDF2;
  --cvb-divider: #E2E8ED;
  --cvb-input-border: #D8E2E8;
  --cvb-text: #1F2D36;
  --cvb-muted: #6E848F;

  /* Buttons */
  --cvb-btn-border: #C9D5DC;
  --cvb-btn-hover-bg: #F3F6F8;

  /* Semantic states */
  --cvb-ok-bg: #EAF8F3;
  --cvb-ok-border: #BFE6D5;
  --cvb-ok-text: #1C6D53;
  --cvb-err-bg: #FDEEEE;
  --cvb-err-border: #F1CDCD;
  --cvb-err-text: #7E2B2B;

  /* Misc */
  --cvb-radius-sm: 8px;
  --cvb-radius-md: 12px;

  --cvb-space-section: 64px;
  --cvb-space-card: 32px;
  --cvb-space-field: 20px;
  --cvb-space-btn: 16px;

  --cvb-shadow: 0 8px 24px rgba(0, 62, 94, 0.06);
  --cvb-transition: 200ms ease;
}

* {
  box-sizing: border-box;
}

/* Full width WITHOUT 100vw (round 2): 100vw includes the desktop scrollbar,
   so the builder ran 8px past the right edge and the page scrolled sideways.
   The builder page's containers are already full width with no padding
   (mu-plugin elite-scv-builder-chrome.php), so 100% is edge to edge. */
.cvb-wizard-root {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.cvb-app {
  width: 100%;
  font-family: var(--cvb-font);
  color: var(--cvb-text);
  background: var(--cvb-page-bg);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 880px;
}

.cvb-head {
  background: var(--cvb-dark-bg);
  color: #fff;
  padding: 14px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cvb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.cvb-brand-link {
  color: #fff;
  text-decoration: none;
}

.cvb-brand-link:hover,
.cvb-brand-link:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.96;
}

.cvb-logo-img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

.cvb-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cvb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--cvb-btn-border);
  background: var(--cvb-card-bg);
  color: var(--cvb-navy);
  border-radius: var(--cvb-radius-sm);
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all var(--cvb-transition);
}

.cvb-btn:hover,
.cvb-btn:focus {
  background: var(--cvb-btn-hover-bg);
  color: var(--cvb-navy);
}

.cvb-btn.ghost {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.cvb-btn.ghost:hover,
.cvb-btn.ghost:focus {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.cvb-btn.gold {
  border-color: var(--cvb-gold-border);
  background: var(--cvb-gold);
  color: var(--cvb-text);
}

.cvb-btn.gold:hover,
.cvb-btn.gold:focus {
  background: var(--cvb-gold-border);
  color: var(--cvb-text);
}

.cvb-btn.primary {
  border-color: var(--cvb-teal-dark);
  background: var(--cvb-teal);
  color: #fff;
}

.cvb-btn.primary:hover,
.cvb-btn.primary:focus {
  /* --cvb-teal-hover (#038C80) gave white text only 4.14:1, which is AA-large
     and this label is 14px regular. --cvb-teal-dark reaches 5.73:1. */
  background: var(--cvb-teal-dark);
  color: #fff;
}

.cvb-btn.cvb-btn-muted {
  border-color: var(--cvb-btn-border);
  background: transparent;
  color: #8A9DAA;
  font-size: 13px;
  opacity: 0.8;
}

.cvb-btn.cvb-btn-muted:hover,
.cvb-btn.cvb-btn-muted:focus {
  background: rgba(0, 0, 0, 0.04);
  color: #5a6e7a;
  opacity: 1;
}

.cvb-hero {
  max-width: var(--cvb-container-desktop);
  margin: 0 auto;
  padding: 34px 32px 14px;
  text-align: center;
}

.cvb-hero h1 {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  color: #275770;
}

.cvb-hero p {
  margin: 0 auto;
  max-width: 780px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #3A566B;
}

.cvb-start-grid {
  max-width: var(--cvb-container-desktop);
  margin: 0 auto;
  padding: 0 32px 44px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}

.cvb-start-card {
  grid-column: span 6;
  min-height: 336px;
  background: linear-gradient(135deg, #163B4B, #1D4F61);
  color: #E8F2F6;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cvb-radius-md);
  padding: 24px;
  box-shadow: var(--cvb-shadow);
  transition: transform var(--cvb-transition), box-shadow var(--cvb-transition);
  display: flex;
  flex-direction: column;
}

.cvb-start-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 62, 94, 0.08);
}

.cvb-start-card h3 {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.cvb-start-card p {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(235, 246, 252, 0.92);
}

.cvb-start-card .cvb-btn.gold {
  height: 44px;
  font-size: 15px;
  padding: 0 22px;
  margin-top: auto;
  align-self: flex-start;
}

.cvb-file-picker {
  width: 100%;
  min-height: 40px;
  padding: 4px 8px;
  border-radius: var(--cvb-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cvb-file-picker input[type="file"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cvb-file-trigger {
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}

.cvb-file-trigger:hover,
.cvb-file-trigger:focus {
  background: rgba(255, 255, 255, 0.24);
  color: var(--cvb-navy);
}

.cvb-file-name {
  display: block;
  min-width: 0;
  flex: 1;
  color: #EAF4F8;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cvb-start-card small {
  display: block;
  margin: 8px 0 8px;
  color: rgba(220, 236, 246, 0.9);
  font-size: 12px;
  line-height: 1.4;
}

.cvb-start-card .cvb-file-help {
  margin-top: 8px;
  margin-bottom: 0;
}

/* Step 0 / 1 palette and CTA treatment */
.cvb-app.cvb-step-0 .cvb-hero h1,
.cvb-app.cvb-step-1 .cvb-hero h1 {
  color: var(--cvb-dark-bg);
}

.cvb-app.cvb-step-1 .cvb-start-card {
  background: linear-gradient(135deg, var(--cvb-dark-bg), var(--cvb-teal-accent));
}

.cvb-app.cvb-step-0 .cvb-start-card {
  background: linear-gradient(135deg, var(--cvb-dark-bg), var(--cvb-teal-accent));
  text-align: center;
  align-items: center;
}

.cvb-app.cvb-step-0 .cvb-start-card h3,
.cvb-app.cvb-step-0 .cvb-start-card p {
  text-align: center;
}

.cvb-app.cvb-step-0 .cvb-start-card .cvb-btn.gold {
  align-self: center;
}

.cvb-app.cvb-step-0 .cvb-start-card .cvb-btn.gold,
.cvb-app.cvb-step-1 .cvb-start-card .cvb-btn.gold {
  background: var(--cvb-teal);
  border-color: var(--cvb-teal);
  color: #fff;
}

.cvb-app.cvb-step-0 .cvb-start-card .cvb-btn.gold:hover,
.cvb-app.cvb-step-1 .cvb-start-card .cvb-btn.gold:hover {
  background: var(--cvb-teal-hover);
  border-color: var(--cvb-teal-hover);
}

/* Cover Letter Setup upload controls on light background */
.cvb-app.cvb-step-10 .cvb-file-picker {
  background: var(--cvb-card-bg);
  border: 1px solid var(--cvb-input-border);
}

.cvb-app.cvb-step-10 .cvb-file-trigger {
  background: var(--cvb-teal);
  border-color: var(--cvb-teal);
  color: #fff;
}

.cvb-app.cvb-step-10 .cvb-file-trigger:hover {
  background: var(--cvb-teal-hover);
  border-color: var(--cvb-teal-hover);
}

/* The native input is the keyboard stop; show its focus on the visible picker. */
.cvb-app.cvb-step-10 .cvb-file-picker:focus-within {
  outline: 3px solid #003166;
  outline-offset: 2px;
}

.cvb-app.cvb-step-10 .cvb-file-name {
  color: var(--cvb-muted);
}

.cvb-process-card,
.cvb-step-card {
  max-width: var(--cvb-container-desktop);
  margin: 0 auto var(--cvb-space-section);
  background: var(--cvb-card-bg);
  border: 1px solid var(--cvb-border);
  border-radius: var(--cvb-radius-md);
  box-shadow: var(--cvb-shadow);
  padding: 24px 28px;
}

.cvb-step-card h2,
.cvb-process-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #294F67;
}

.cvb-step-card p,
.cvb-process-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cvb-muted);
}

.cvb-step5-hero {
  padding-top: 26px;
  padding-bottom: 12px;
}

.cvb-step5-hero h1 {
  font-size: 56px;
  font-weight: 500;
  color: #0C4764;
}

.cvb-step5-card {
  max-width: 980px;
  padding: 30px 36px;
}

.cvb-step5-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}

.cvb-design-card {
  width: 100%;
  border: 1px solid var(--cvb-border);
  border-radius: 10px;
  background: var(--cvb-card-bg) !important;
  /* Bottom padding reserves the Preview row that sits over the card as a sibling. */
  padding: 12px 12px 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: border-color var(--cvb-transition), box-shadow var(--cvb-transition), transform var(--cvb-transition);
}



/* Selection must always beat :hover/:focus, which previously rendered a
   STRONGER ring than .active and made the last-touched card look selected.
   Doubled selector raises specificity above .cvb-design-card:focus. */
.cvb-design-card.active,
.cvb-design-card.active:hover,
.cvb-design-card.active:focus,
.cvb-design-card.active:focus-visible {
  background: var(--cvb-card-bg) !important;
  border-color: var(--cvb-teal-dark) !important;
  box-shadow: 0 0 0 3px var(--cvb-teal), 0 6px 18px rgba(4, 163, 151, 0.25) !important;
}

/* Explicit "Selected" badge so the state is not carried by colour alone. */
.cvb-design-card.active .cvb-design-name::after {
  content: " \2713 Selected";
  color: var(--cvb-teal-dark);
  font-weight: 700;
  white-space: nowrap;
}

/* White ground with a thin teal outline. A solid teal fill fought the artwork -
   the thumbnail is what the user is judging - and forced every label to invert,
   which is where the white-on-white bugs kept coming from. Nothing recolours on
   hover now, so that class of bug cannot recur. !important defeats the theme's
   button:hover{background-color:#c36;color:#fff}. */
.cvb-design-card:hover,
.cvb-design-card:focus,
.cvb-design-card:focus-visible,
.cvb-design-card:active {
  background: var(--cvb-card-bg) !important;
  border-color: var(--cvb-teal);
  box-shadow: 0 4px 14px rgba(4, 163, 151, 0.14);
  transform: translateY(-1px);
  color: var(--cvb-text);
}

.cvb-design-card:focus-visible {
  outline: 2px solid var(--cvb-teal-dark);
  outline-offset: 2px;
}

/* Three short, checkable facts with a tick each, in place of a paragraph. Each
   is something we actually verify in the templates - no "professional
   formatting" style claim that cannot be tested. */
.cvb-ats-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 16px;
}

.cvb-ats-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.4;
  color: #415766;
}

.cvb-ats-chip-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--cvb-ok-bg);
  border: 1px solid var(--cvb-ok-border);
  color: var(--cvb-ok-text);
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}

/* Two tiers. Neutral "ATS Optimised" is the floor every design meets; the green
   "Most ATS-Friendly" marks the single-column set. Nobody gets a blank card. */
.cvb-design-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--cvb-border);
  background: var(--cvb-surface);
  color: #415766;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.cvb-design-badge.best {
  border-color: var(--cvb-ok-border);
  background: var(--cvb-ok-bg);
  color: var(--cvb-ok-text);
  font-weight: 700;
}

.cvb-badge-tick {
  font-size: 11px;
  line-height: 1;
}

.cvb-design-card:focus,
.cvb-design-card:focus-visible {
  outline: none;
  border-color: var(--cvb-teal-dark);
  box-shadow: 0 0 0 3px rgba(4, 114, 116, 0.22);
}

.cvb-design-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 210 / 297;
  width: min(100%, 250px);
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #D9E4EA;
  background-color: #f6f8fa;
  overflow: hidden;
}

.cvb-design-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.cvb-design-preview.classic {
  background: linear-gradient(180deg, #F8FBFF, #E9EFF6);
}

.cvb-design-preview.modern {
  background: linear-gradient(135deg, #0F4E66, #207FA4);
}

.cvb-design-name {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #223645;
}

.cvb-design-desc {
  display: block;
  text-align: center;
  margin: 3px 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #5E7481;
}

.cvb-design-badge-row {
  display: block;
  text-align: center;
}

.cvb-step5-actions {
  margin-top: 18px;
}

.cvb-step5-create {
  width: 100%;
  height: 52px;
  font-size: 15px;
  font-weight: 600;
}

.cvb-step5-progress {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #CFE0E8;
  background: #F7FBFD;
  border-radius: 8px;
}

.cvb-step5-progress.active {
  display: block;
}

.cvb-step5-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #335566;
}

.cvb-step5-progress-top strong {
  color: #0B5E7A;
  font-size: 13px;
}

.cvb-step5-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #E2EDF2;
  overflow: hidden;
}

.cvb-step5-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cvb-teal), #208CB3);
  transition: width 260ms ease;
}

.cvb-step8-block {
  margin-bottom: 22px;
}

.cvb-step8-block > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #224456;
  margin-bottom: 10px;
}

.cvb-step8-help {
  margin: 0 0 12px;
  font-size: 14px;
  color: #5E7481;
}

.cvb-step8-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  justify-content: start;
  max-width: none;
}

/* The zoom control sits over the card as a sibling, so it needs a positioned
   ancestor. A sibling rather than a child because a <button> cannot contain
   another <button>, and the card itself must stay one big select target. */
.cvb-design-card-wrap {
  position: relative;
  display: flex;
}

.cvb-design-card-wrap > .cvb-design-card {
  flex: 1;
  min-width: 0;
}

/* Always visible, never hover-only: there is no hover on touch. */
/* Sits in its own row at the foot of the card, never over the artwork - the
   thumbnail is the thing being judged, so nothing should cover it. The card
   reserves the space via padding-bottom, so the two never overlap. */
.cvb-design-zoom {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--cvb-btn-border);
  background: var(--cvb-card-bg);
  color: #223645;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--cvb-transition), color var(--cvb-transition), border-color var(--cvb-transition);
}

.cvb-design-zoom:hover,
.cvb-design-zoom:focus,
.cvb-design-zoom:focus-visible,
.cvb-design-zoom:active {
  /* !important defeats the theme's button:hover{background-color:#c36;color:#fff}. */
  background: var(--cvb-btn-hover-bg) !important;
  color: var(--cvb-teal-dark);
  border-color: var(--cvb-teal-dark);
}

.cvb-design-zoom:focus-visible {
  outline: 2px solid var(--cvb-teal-dark);
  outline-offset: 2px;
}

.cvb-design-zoom-icon {
  font-size: 13px;
  line-height: 1;
}

/* Comfortable thumb target on phones, where this control matters most. */
@media (max-width: 600px) {
  .cvb-design-zoom { height: 40px; }
}

/* Lightbox: step between designs without closing. */
.cvb-thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #D5DFE7;
  background: rgba(255, 255, 255, 0.96);
  color: #234154;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(12, 25, 38, 0.2);
}

.cvb-thumb-nav.prev { left: 6px; }
.cvb-thumb-nav.next { right: 6px; }

.cvb-thumb-nav:hover,
.cvb-thumb-nav:focus,
.cvb-thumb-nav:focus-visible,
.cvb-thumb-nav:active {
  background: #ffffff !important;
  color: var(--cvb-teal-dark);
  border-color: var(--cvb-teal-dark);
}

.cvb-thumb-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cvb-thumb-modal-title {
  font-size: 14px;
  font-weight: 600;
  color: #223645;
  min-width: 0;
}

.cvb-thumb-modal-actions {
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
}

.cvb-thumb-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

.cvb-thumb-modal[hidden] {
  display: none !important;
}

.cvb-thumb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 25, 38, 0.65);
}

.cvb-thumb-modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 640px);
  max-height: 90vh;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.cvb-thumb-modal-img {
  display: block;
  width: 100%;
  max-height: calc(90vh - 120px);
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--cvb-border);
  border-radius: 10px;
  background: #fff;
}

.cvb-thumb-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #D5DFE7;
  background: #fff;
  color: #234154;
  font-size: 24px;
  line-height: 28px;
  cursor: pointer;
}

.cvb-color-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 14px;
}

.cvb-color-swatch {
  border: 1px solid var(--cvb-border);
  background: #fff;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  transition: all var(--cvb-transition);
}

.cvb-color-swatch:hover {
  background: var(--cvb-teal) !important;
  border-color: var(--cvb-teal-dark);
  box-shadow: 0 10px 24px rgba(4, 114, 116, 0.18);
  transform: translateY(-1px);
}

.cvb-color-swatch:hover .cvb-color-name {
  color: #fff;
}

.cvb-color-swatch:focus,
.cvb-color-swatch:focus-visible,
.cvb-color-swatch:active {
  background: var(--cvb-teal) !important;
  border-color: var(--cvb-teal-dark);
  outline: none;
  box-shadow: 0 0 0 3px rgba(4, 114, 116, 0.22);
}

.cvb-color-swatch:focus .cvb-color-name,
.cvb-color-swatch:focus-visible .cvb-color-name,
.cvb-color-swatch:active .cvb-color-name {
  color: #fff;
}

.cvb-color-swatch.active {
  border-color: var(--cvb-teal);
  box-shadow: 0 0 0 3px rgba(4, 163, 151, 0.12);
}

.cvb-color-box {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  margin: 0 auto 10px;
}

.cvb-color-name {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--cvb-text);
}

.cvb-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 5px solid #D8E6EC;
  border-top-color: #4F97A8;
  animation: cvb-spin 0.9s linear infinite;
}

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

.cvb-stage-list {
  border: 1px solid var(--cvb-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.cvb-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cvb-divider);
  font-size: 15px;
  color: #5D7688;
}

.cvb-stage-row:last-child {
  border-bottom: 0;
}

.cvb-stage-row.done {
  color: #2F7685;
}

.cvb-stage-row.active {
  color: #245A71;
  font-weight: 600;
}

.cvb-check {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #4F94A3;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
}

.cvb-summary-list {
  margin: 12px 0;
}

.cvb-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cvb-border);
  border-radius: 8px;
  font-size: 14px;
}

.cvb-row-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cvb-edit-top-tabs {
  max-width: var(--cvb-container-desktop);
  margin: 10px auto 0;
  padding: 12px 32px;
  background: var(--cvb-dark-bg);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
}

.cvb-edit-top-tabs span {
  color: #D8E7F2;
  font-size: 15px;
  white-space: nowrap;
}

.cvb-edit-top-tabs span.active {
  color: #fff;
  border-bottom: 2px solid var(--cvb-teal);
  padding-bottom: 4px;
}

.cvb-stage-tabs {
  gap: 28px;
}

.cvb-stage-tabs span {
  position: relative;
  font-weight: 500;
  color: #BFD2DF;
  letter-spacing: 0.2px;
}

.cvb-stage-tabs span.done {
  color: #DDF3F0;
}

.cvb-stage-tabs span.active {
  color: #fff;
  border-bottom: 0;
  padding-bottom: 0;
}

/* Only the CURRENT step gets the rule. Underlining finished steps too made all
   six read as equally live, so the tick and the number carry the state instead. */
.cvb-stage-tabs span.active::after,
.cvb-stage-tabs .cvb-stage-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  background: var(--cvb-teal);
}

/* Tick for done, number for the rest. */
.cvb-stage-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.cvb-stage-mark.done {
  background: var(--cvb-teal);
  border-color: var(--cvb-teal);
  color: #06232B;
  font-size: 11px;
}

.cvb-stage-mark.current {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--cvb-dark-bg);
}

.cvb-stage-label {
  vertical-align: middle;
}

.cvb-stage-tabs span,
.cvb-stage-tabs .cvb-stage-link {
  display: inline-flex;
  align-items: center;
}

.cvb-edit-layout {
  max-width: var(--cvb-container-desktop);
  margin: 0 auto var(--cvb-space-section);
  padding: 14px 32px 40px;
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 32px;
}

.cvb-left-nav {
  background: linear-gradient(180deg, var(--cvb-side-top), var(--cvb-side-bottom));
  border-radius: 10px;
  color: #CBE0EC;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: width var(--cvb-transition);
}

.cvb-left-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--cvb-transition), color var(--cvb-transition);
}

.cvb-left-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cvb-left-item.active {
  background: #0F91A3;
  color: #fff;
  font-weight: 600;
}

.cvb-left-item-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #D7EAF3;
  background: rgba(0, 0, 0, 0.12);
}

.cvb-left-item-more:hover {
  background: rgba(255, 255, 255, 0.09);
}

.cvb-more-arrow {
  transition: transform var(--cvb-transition);
}

.cvb-left-item-more.open .cvb-more-arrow {
  transform: rotate(180deg);
}

.cvb-left-more .cvb-left-item {
  padding-left: 24px;
}

.cvb-edit-main {
  background: var(--cvb-card-bg);
  border: 1px solid var(--cvb-border);
  border-radius: var(--cvb-radius-md);
  box-shadow: var(--cvb-shadow);
  padding: 24px;
}

.cvb-edit-main h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.cvb-edit-main p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cvb-muted);
}

.cvb-subcard {
  border: 1px solid var(--cvb-border);
  border-radius: 10px;
  padding: 20px;
}

.cvb-subcard h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
}

.cvb-unmapped-panel {
  border: 1px solid #F0DDA7;
  background: #FFF9E8;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}

.cvb-unmapped-panel h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.cvb-unmapped-panel p {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6B6A55;
}

.cvb-unmapped-item {
  border: 1px solid #EBD8A3;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

.cvb-unmapped-text {
  font-size: 13px;
  color: #2A3B45;
  margin-bottom: 6px;
}

.cvb-unmapped-reason {
  font-size: 12px;
  color: #8E6F1F;
  margin-bottom: 8px;
}

.cvb-unmapped-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cvb-unmapped-actions select {
  min-width: 220px;
  height: 34px;
  border: 1px solid var(--cvb-input-border);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
}

.cvb-exp-role,
.cvb-edu-item {
  border: 1px solid var(--cvb-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: #FCFEFF;
}

.cvb-exp-role-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cvb-exp-role-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.cvb-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cvb-field {
  margin-bottom: var(--cvb-space-field);
}

.cvb-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #2D4759;
}

.cvb-conf-badge {
  margin-left: 8px;
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  font-weight: 600;
  vertical-align: middle;
}

.cvb-conf-badge.warn {
  border: 1px solid #E2C587;
  background: #FFF4DB;
  color: #7A5A19;
}

.cvb-field label small {
  color: var(--cvb-muted);
  font-weight: 400;
}

.cvb-field input,
.cvb-field select,
.cvb-field textarea {
  width: 100%;
  border: 1px solid var(--cvb-input-border);
  border-radius: var(--cvb-radius-sm);
  background: #fff;
  color: var(--cvb-text);
  font-size: 14px;
  font-weight: 400;
  transition: border-color var(--cvb-transition), box-shadow var(--cvb-transition), background var(--cvb-transition);
}

.cvb-field input,
.cvb-field select {
  height: 40px;
  padding: 0 14px;
}

.cvb-field textarea {
  min-height: 120px;
  padding: 14px;
  resize: vertical;
}

.cvb-field input::placeholder,
.cvb-field textarea::placeholder {
  color: #9AAEB8;
}

.cvb-field input:focus,
.cvb-field select:focus,
.cvb-field textarea:focus {
  outline: none;
  border-color: var(--cvb-teal);
  box-shadow: 0 0 0 3px rgba(4, 163, 151, 0.15);
}

.cvb-field small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--cvb-muted);
}

.cvb-rich-wrap {
  border: 1px solid var(--cvb-input-border);
  border-radius: var(--cvb-radius-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--cvb-transition), box-shadow var(--cvb-transition);
}

.cvb-rich-wrap:focus-within {
  border-color: var(--cvb-teal);
  box-shadow: 0 0 0 3px rgba(4, 163, 151, 0.15);
}

.cvb-rich-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cvb-border);
  background: var(--cvb-surface);
}

.cvb-rich-btn {
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--cvb-input-border);
  border-radius: 6px;
  background: #fff;
  color: var(--cvb-text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

/* Keep the light ground and the dark label. The theme's button:hover/:focus
   sets colour AND background, so the List button - which holds focus after
   being clicked - was rendering white-on-#f3f6f8, about 1.06:1. */
.cvb-rich-btn:hover,
.cvb-rich-btn:focus,
.cvb-rich-btn:active {
  background: var(--cvb-btn-hover-bg);
  color: var(--cvb-text);
}

.cvb-rich-btn:focus-visible {
  outline: 2px solid var(--cvb-teal);
  outline-offset: 1px;
}

.cvb-rich-editor {
  min-height: 120px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cvb-text);
  outline: none;
}

.cvb-rich-editor ul,
.cvb-rich-editor ol {
  margin: 0 0 0 18px;
  padding: 0;
}

.cvb-rich-editor p {
  margin: 0 0 8px;
}

.cvb-rich-store {
  display: none !important;
}

.cvb-preview,
.cvb-preview-wrap {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  background: var(--cvb-surface);
  border: 1px solid var(--cvb-border);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #365469;
}

.cvb-preview-wrap {
  max-height: none;
  overflow: hidden;
  padding: 0;
}

.cvb-preview-frame {
  width: 100%;
  min-height: 640px;
  border: 0;
  display: block;
  background: var(--cvb-card-bg);
}

.cvb-checks {
  border: 1px solid var(--cvb-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--cvb-surface);
  font-size: 14px;
  line-height: 1.6;
}

.cvb-checks.ok {
  background: var(--cvb-ok-bg);
  border-color: var(--cvb-ok-border);
  color: var(--cvb-ok-text);
}

.cvb-checks.bad {
  background: var(--cvb-err-bg);
  border-color: var(--cvb-err-border);
  color: var(--cvb-err-text);
}

/* Pinned, not in the flow. It used to render at the bottom of the page below
   the whole form, so "Saved." appeared off-screen and the save read as silent. */
.cvb-global-status {
  position: fixed;
  top: 18px;
  right: 18px;
  left: auto;
  max-width: min(420px, calc(100vw - 36px));
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 100002;
  box-shadow: 0 10px 30px rgba(9, 30, 44, 0.18);
  animation: cvb-status-in 160ms ease-out;
}

@keyframes cvb-status-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .cvb-global-status {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

.cvb-global-status.ok {
  background: var(--cvb-ok-bg);
  border: 1px solid var(--cvb-ok-border);
  color: var(--cvb-ok-text);
}

.cvb-global-status.err {
  background: var(--cvb-err-bg);
  border: 1px solid var(--cvb-err-border);
  color: var(--cvb-err-text);
}

.cvb-global-status.hidden {
  display: none;
}

.cvb-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.cvb-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 30, 44, 0.5);
}

.cvb-auth-modal {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  background: #ffffff;
  border: 1px solid var(--cvb-input-border);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.cvb-auth-modal h3 {
  margin: 0 0 10px;
  font-size: 28px;
  color: #10384b;
}

.cvb-auth-modal p {
  margin: 0 0 14px;
  color: #4a6472;
}

.cvb-auth-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cvb-auth-actions .cvb-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cvb-app.is-busy {
  user-select: none;
}

.cvb-global-busy {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 61, 77, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cvb-global-busy.hidden {
  display: none;
}

.cvb-global-busy-card {
  width: min(420px, 92vw);
  background: #fff;
  border: 1px solid var(--cvb-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 42, 66, 0.16);
  padding: 18px 18px 14px;
  text-align: center;
}

.cvb-global-busy-card .cvb-spinner {
  margin-bottom: 10px;
}

.cvb-global-busy-card p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--cvb-text);
}

.cvb-busy-indeterminate {
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background: #dce8ee;
  overflow: hidden;
}

.cvb-busy-indeterminate span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cvb-teal), var(--cvb-teal-dark));
  animation: cvb-busy-slide 1.1s ease-in-out infinite;
}

@keyframes cvb-busy-slide {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(240%);
  }
}

@media (max-width: 1279px) {
  .cvb-hero,
  .cvb-start-grid,
  .cvb-process-card,
  .cvb-step-card,
  .cvb-edit-top-tabs,
  .cvb-edit-layout,
  .cvb-global-status {
    max-width: var(--cvb-container-laptop);
  }

  .cvb-hero h1 {
    font-size: 30px;
  }

  .cvb-start-card h3 {
    font-size: 30px;
  }

  .cvb-step5-hero h1 {
    font-size: 44px;
  }

  .cvb-edit-layout {
    grid-template-columns: 30% 70%;
    gap: 24px;
  }
}

@media (max-width: 1023px) {
  .cvb-head {
    padding: 12px 20px;
  }

  .cvb-hero,
  .cvb-start-grid,
  .cvb-edit-top-tabs,
  .cvb-edit-layout,
  .cvb-process-card,
  .cvb-step-card,
  .cvb-global-status {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cvb-hero h1 {
    font-size: 30px;
  }

  .cvb-hero p {
    font-size: 14px;
  }

  .cvb-start-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 18px;
    padding-bottom: 32px;
  }

  .cvb-start-card {
    grid-column: span 8;
    min-height: 0;
  }

  .cvb-edit-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
  }

  .cvb-grid-2 {
    grid-template-columns: 1fr;
  }

  .cvb-process-card,
  .cvb-step-card {
    padding: 24px;
  }

  .cvb-step5-hero h1 {
    font-size: 34px;
  }

  .cvb-step5-design-grid {
    grid-template-columns: 1fr;
  }

  .cvb-color-row {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
}

@media (max-width: 767px) {
  .cvb-head {
    padding: 10px 16px;
  }

  .cvb-brand {
    font-size: 16px;
  }

  .cvb-logo-img {
    width: 24px;
    height: 24px;
  }

  .cvb-head-actions {
    gap: 8px;
  }

  .cvb-btn {
    width: 100%;
    min-width: 0;
  }

  .cvb-head-actions .cvb-btn {
    width: auto;
  }

  .cvb-hero,
  .cvb-start-grid,
  .cvb-edit-top-tabs,
  .cvb-edit-layout,
  .cvb-process-card,
  .cvb-step-card,
  .cvb-global-status {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cvb-hero {
    padding-top: 26px;
    padding-bottom: 10px;
  }

  .cvb-hero h1 {
    font-size: 24px;
  }

  .cvb-step5-hero h1 {
    font-size: 28px;
  }

  .cvb-hero p {
    font-size: 14px;
  }

  .cvb-start-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding-bottom: 28px;
  }

  .cvb-start-card {
    grid-column: span 4;
    padding: 18px;
  }

  .cvb-start-card h3 {
    font-size: 24px;
  }

  .cvb-edit-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cvb-left-nav {
    display: none;
  }

  .cvb-edit-main,
  .cvb-process-card,
  .cvb-step-card {
    padding: 16px;
  }

  .cvb-edit-main h2,
  .cvb-step-card h2,
  .cvb-process-card h2 {
    font-size: 18px;
  }

  .cvb-edit-main p,
  .cvb-step-card p,
  .cvb-process-card p,
  .cvb-stage-row,
  .cvb-checks {
    font-size: 14px;
  }

  .cvb-row-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cvb-step5-create {
    height: 44px;
  }

  .cvb-color-row {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}

/* Backward compatibility: if older JS still renders the dot span, show the uploaded logo. */
.cvb-logo-dot {
  width: 28px;
  height: 28px;
  border-radius: 0;
  display: block;
  background: url('https://smartcv.elite-cv.com/wp-content/uploads/2026/02/Smart-CV-Logo-White.png') center/contain no-repeat;
  box-shadow: none;
}

@media (max-width: 767px) {
  .cvb-logo-dot {
    width: 24px;
    height: 24px;
  }
}


.cvb-cover-letter-panel {
  margin-top: 20px;
  border: 1px solid var(--cvb-border);
  border-radius: var(--cvb-radius-sm);
  background: #fbfdfe;
  padding: 18px;
}

.cvb-cover-letter-panel h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.cvb-cover-letter-panel p {
  margin: 0 0 12px;
  color: var(--cvb-muted);
}

.cvb-cover-letter-choices {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cvb-cover-choice {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--cvb-radius-sm);
  border: 1px solid var(--cvb-border);
  background: #fff;
  color: var(--cvb-navy);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--cvb-transition);
}

.cvb-cover-choice:hover {
  border-color: var(--cvb-teal-dark);
}

.cvb-cover-choice.active {
  border-color: var(--cvb-teal-dark);
  background: var(--cvb-teal);
  color: #fff;
}

.cvb-cover-letter-panel small {
  color: var(--cvb-muted);
  font-size: 12px;
}

/* Navigable stage tabs. Rendered as <button> for stages the user has already
   reached, but must look identical to the <span> stages beside them. */
.cvb-stage-tabs button.cvb-stage-link {
  position: relative;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #BFD2DF;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
}

.cvb-stage-tabs button.cvb-stage-link.done { color: #DDF3F0; }

.cvb-stage-tabs button.cvb-stage-link:hover,
.cvb-stage-tabs button.cvb-stage-link:focus-visible {
  color: #fff;
  outline: none;
}

/* Keyboard focus must be visible on the dark bar (round 2): a colour change
   and underline alone were too faint. Light teal on navy is about 8:1. */
.cvb-stage-tabs button.cvb-stage-link:focus-visible {
  outline: 2px solid #7FCED2;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Underline the words only - the rule would otherwise strike through the tick. */
.cvb-stage-tabs button.cvb-stage-link:hover .cvb-stage-label,
.cvb-stage-tabs button.cvb-stage-link:focus-visible .cvb-stage-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Inline remove confirmation, in place of the native browser confirm() so the
   prompt reads as part of Smart CV rather than a Chrome alert. */
.cvb-remove-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #e0b4b4;
  border-radius: 8px;
  background: #fdf6f6;
}

.cvb-remove-confirm-q {
  font-size: 0.86em;
  font-weight: 600;
  color: #8a2b2b;
  white-space: nowrap;
}

.cvb-btn.cvb-remove-yes {
  background: #a33;
  border-color: #a33;
  color: #fff;
}

.cvb-btn.cvb-remove-yes:hover,
.cvb-btn.cvb-remove-yes:focus-visible {
  background: #8a2b2b;
  border-color: #8a2b2b;
  color: #fff;
}

.cvb-btn.cvb-remove-no {
  background: transparent;
  border-color: #b9c7d0;
  color: #33505f;
}

@media (max-width: 560px) {
  .cvb-remove-confirm { flex-wrap: wrap; gap: 6px; }
  .cvb-remove-confirm-q { white-space: normal; }
}

/* Standing note at the top of a section, e.g. the References consent reminder.
   The candidate decides whether referee contact details appear on the CV, so
   the decision is stated where they make it rather than left implicit. */
.cvb-section-note {
  margin: 0 0 14px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--cvb-teal);
  background: rgba(4, 163, 151, 0.06);
  border-radius: 0 6px 6px 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #33505f;
}

/* ── In-page confirm dialog ──
   Replaces window.confirm(), which rendered as browser chrome showing the raw
   domain ("smartcv.elite-cv.com says..."), could not be styled or tested, and
   blocked the page. Reuses the auth-modal shell; only the accent differs. */
.cvb-confirm-modal {
  width: min(480px, 100%);
  border-top: 4px solid var(--cvb-teal);
}

.cvb-confirm-modal h3 {
  font-size: 22px;
  color: var(--cvb-navy);
}

.cvb-confirm-modal p {
  font-size: 15px;
  line-height: 1.55;
}

.cvb-confirm-modal .cvb-auth-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

/* Destructive confirm: clearly the weightier of the two, without shouting. */
.cvb-btn.cvb-btn-danger {
  background: #B3261E;
  border-color: #B3261E;
  color: #ffffff;
}

.cvb-btn.cvb-btn-danger:hover,
.cvb-btn.cvb-btn-danger:focus-visible {
  background: #8C1D18;
  border-color: #8C1D18;
  color: #ffffff;
}

/* The theme sets button:focus{background-color:#c36} - a pink that bled into
   every wizard button the moment it took focus (most visibly the confirm
   dialog's Cancel, which is focused on open). The hover states above are
   mirrored onto :focus so the wizard holds its own colours; this restores a
   real focus ring for keyboard users. */
.cvb-btn:focus-visible {
  outline: 2px solid var(--cvb-teal);
  outline-offset: 2px;
}

/* Quiet secondary action - the non-destructive choice in a confirm dialog. */
.cvb-btn.cvb-btn-quiet {
  background: #EEF1F3;
  border-color: #D3DADE;
  color: #3D5866;
}

.cvb-btn.cvb-btn-quiet:hover,
.cvb-btn.cvb-btn-quiet:focus {
  background: #E2E7EA;
  border-color: #C4CDD3;
  color: #2F4552;
}

/* ── Field validation ──
   Personal Details previously accepted an entirely empty form, saved the
   blanks over real data and advanced. Errors now block the save and are shown
   against the field rather than only as a toast. */
.cvb-req {
  color: #B3261E;
  font-weight: 600;
  margin-left: 2px;
}

.cvb-field-msg {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  /* Reserve one line so the form does not shift when a message appears or
     clears - fields below were jumping ~24px and stealing clicks, worst on
     mobile where taps come fast. */
  min-height: 18px;
}

.cvb-field-msg-error { color: #B3261E; }
.cvb-field-msg-warn  { color: #8A6100; }

.cvb-field-error input,
.cvb-field-error textarea {
  border-color: #B3261E;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.cvb-field-warn input,
.cvb-field-warn textarea {
  border-color: #C99A2E;
}

.cvb-global-status.warn {
  background: #FFF6E5;
  border-color: #E8C77A;
  color: #7A5600;
}

/* ── Sidebar progress ──
   All sections looked identical whether complete, partial or empty. */
.cvb-progress-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 6px;
}

.cvb-progress-count {
  display: block;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}

.cvb-progress-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.cvb-progress-bar i {
  display: block;
  height: 100%;
  background: var(--cvb-teal);
  transition: width var(--cvb-transition);
}

.cvb-sec-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  flex: none;
  vertical-align: middle;
}

.cvb-sec-state.done {
  background: var(--cvb-teal);
  color: #fff;
}

.cvb-sec-state.partial {
  background: transparent;
  border: 1px solid var(--cvb-gold, #D9A441);
  color: var(--cvb-gold, #D9A441);
  font-size: 15px;
  line-height: 1;
}

.cvb-sec-state.empty {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
}

.cvb-sec-label { vertical-align: middle; }

/* "We tightened your CV" - what the AI writer removed, shown at Approve. */
.cvb-writer-notes {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--cvb-border);
  border-left: 3px solid var(--cvb-gold-border);
  border-radius: var(--cvb-radius-sm);
  background: var(--cvb-surface);
}

.cvb-writer-notes h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cvb-text);
}

.cvb-writer-notes > p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #415766;
}

.cvb-writer-note-row + .cvb-writer-note-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cvb-divider);
}

.cvb-writer-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cvb-revert-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  flex-shrink: 0;
}

.cvb-writer-note-row strong {
  font-size: 13px;
  color: var(--cvb-text);
}

.cvb-writer-note-count {
  margin-left: 8px;
  font-size: 12px;
  color: #5E7481;
}

.cvb-writer-note-row ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.cvb-writer-note-row li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cvb-text);
}

/* CV / Cover Letter switch above the design preview. */
.cvb-doc-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 14px 0 8px;
  padding: 4px;
  border: 1px solid var(--cvb-border);
  border-radius: 999px;
  background: var(--cvb-surface);
}

.cvb-doc-tab {
  border: 0;
  background: transparent;
  color: #415766;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--cvb-transition), color var(--cvb-transition);
}

.cvb-doc-tab:hover,
.cvb-doc-tab:focus,
.cvb-doc-tab:focus-visible {
  /* !important defeats the theme's button:hover{background-color:#c36;color:#fff}. */
  background: var(--cvb-btn-hover-bg) !important;
  color: var(--cvb-teal-dark);
}

.cvb-doc-tab.active,
.cvb-doc-tab.active:hover,
.cvb-doc-tab.active:focus {
  background: var(--cvb-teal-dark) !important;
  color: #ffffff;
}

.cvb-doc-tab:focus-visible {
  outline: 2px solid var(--cvb-teal-dark);
  outline-offset: 2px;
}

/* Who the cover letter is addressed to. */
.cvb-cover-brief {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--cvb-border);
  border-radius: var(--cvb-radius-sm);
  background: var(--cvb-surface);
}

.cvb-cover-brief-lead {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #415766;
}

.cvb-cover-brief .cvb-field { margin-bottom: 12px; }
.cvb-cover-brief .cvb-field:last-child { margin-bottom: 0; }

/* Advert comparison: two lists, no score. */
.cvb-ad-match {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cvb-border);
  border-radius: var(--cvb-radius-sm);
  background: var(--cvb-card-bg);
}

.cvb-ad-match h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cvb-text);
}

.cvb-ad-group { margin-bottom: 12px; }

.cvb-ad-group-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #5E7481;
}

.cvb-ad-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cvb-ad-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  line-height: 1.5;
}

.cvb-ad-chip.hit {
  border-color: var(--cvb-ok-border);
  background: var(--cvb-ok-bg);
  color: var(--cvb-ok-text);
}

.cvb-ad-chip.gap {
  border-color: var(--cvb-gold-border);
  background: #FDF6E3;
  color: #6B5011;
}

.cvb-ad-empty {
  font-size: 12px;
  color: #5E7481;
}

.cvb-ad-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #5E7481;
}

/* A failure the user can act on, in the page rather than a toast that fades. */
.cvb-inline-error {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--cvb-err-border);
  border-left: 3px solid #B3261E;
  border-radius: var(--cvb-radius-sm);
  background: var(--cvb-err-bg);
}

.cvb-inline-error strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--cvb-err-text);
}

.cvb-inline-error p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cvb-err-text);
}

.cvb-inline-error .cvb-inline-error-note {
  color: #6B3535;
}

.cvb-inline-error .cvb-row-actions { margin: 10px 0 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE APP LAYER
   Everything above this line is desktop-first: seven max-width queries that
   shrink the desktop layout down. That is why the section navigator was simply
   deleted below 767px and the design grid overflowed the screen. This block
   adds the phone-specific behaviour rather than more shrinking.
   Ordered last so it wins the cascade without !important where possible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared: the sheet trigger and backdrop are mobile-only ── */
.cvb-mnav-trigger,
.cvb-mnav-backdrop,
.cvb-mnav-head {
  display: none;
}

body.cvb-scroll-lock {
  overflow: hidden;
}

@media (max-width: 767px) {

  /* ── App shell ──────────────────────────────────────────────────────────
     The wizard header carries each step's Back/Next pair, so making it stick
     turns it into the app's persistent action bar and removes the need to
     scroll to the bottom of a long form to advance. */
  .cvb-head {
    position: sticky;
    top: 0;
    z-index: 60;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 14px;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    box-shadow: 0 2px 10px rgba(6, 32, 42, 0.28);
  }

  /* Two or three buttons next to an 18px wordmark had nowhere to go, because
     .cvb-head never wrapped. Give the actions their own full-width row. */
  .cvb-head-actions {
    flex: 1 0 100%;
    gap: 8px;
  }

  .cvb-head-actions .cvb-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 44px;
    font-size: 15px;
  }

  .cvb-brand {
    font-size: 15px;
  }

  /* 880px of forced height left a dead band under short screens.
     overflow:hidden made .cvb-app a scroll container, so the sticky .cvb-head
     stuck to it (which never scrolls) and scrolled off-screen with the page -
     "Continue to Checkout" vanished on long steps like Design. clip crops the
     same way without creating a scroll container. */
  .cvb-app {
    min-height: 0;
    overflow: clip;
  }

  /* ── Section navigator ──────────────────────────────────────────────────
     Below 767px the <aside> used to be display:none, leaving 23 sections
     reachable only by tapping "Save & Next Section" up to 23 times, each with
     a network save. Same element, same .cvb-left-item contract, presented as
     a bottom sheet. */
  .cvb-edit-layout {
    display: block;
    padding: 0 0 24px;
    position: relative;
  }

  .cvb-mnav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 16px;
    min-height: 56px;
    border: 0;
    border-bottom: 1px solid rgba(12, 61, 77, 0.12);
    background: #fff;
    color: var(--cvb-navy, #0C3D4D);
    text-align: left;
    font: inherit;
    cursor: pointer;
    position: sticky;
    top: var(--cvb-head-h, 56px);
    z-index: 55;
  }

  .cvb-mnav-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .cvb-mnav-trigger-label {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cvb-mnav-trigger-prog {
    font-size: 12px;
    font-weight: 500;
    color: #5B7686;
    letter-spacing: 0.01em;
  }

  /* Chevron drawn in CSS so the sheet needs no icon asset. */
  .cvb-mnav-trigger-icon {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid #4A7086;
    border-bottom: 2px solid #4A7086;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }

  .cvb-edit-layout.mnav-open .cvb-mnav-trigger-icon {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .cvb-mnav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9980;
    background: rgba(6, 28, 37, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .cvb-edit-layout.mnav-open .cvb-mnav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .cvb-left-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9981;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0;
    border: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(101%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 -8px 30px rgba(6, 28, 37, 0.35);
  }

  .cvb-edit-layout.mnav-open .cvb-left-nav {
    transform: translateY(0);
  }

  .cvb-mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    position: sticky;
    top: 0;
    background: var(--cvb-side-top, #123C4D);
    z-index: 1;
  }

  /* Grab handle, so the sheet reads as a sheet before it is touched. */
  .cvb-mnav-head::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
  }

  .cvb-mnav-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }

  .cvb-mnav-close {
    width: 44px;
    height: 44px;
    margin: -8px -10px -8px 0;
    border: 0;
    background: none;
    color: #CBE0EC;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .cvb-left-item {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* ── Forms ──────────────────────────────────────────────────────────────
     16px is the threshold below which iOS Safari zooms the page on focus, and
     44px is the minimum comfortable touch target. Every input in the app was
     14px/40px. */
  .cvb-field input,
  .cvb-field select,
  .cvb-field textarea,
  .cvb-rich-editor {
    font-size: 16px;
  }

  .cvb-field input,
  .cvb-field select {
    height: 48px;
  }

  .cvb-field label {
    font-size: 14px;
  }

  .cvb-rich-btn {
    min-width: 42px;
    height: 40px;
  }

  .cvb-rich-toolbar {
    gap: 6px;
    flex-wrap: wrap;
  }

  /* ── Action rows ────────────────────────────────────────────────────────
     The destructive "Clear All Fields" sat directly beneath the primary
     action in a stacked full-width column, which on a phone is a mis-tap
     waiting to happen. Primary first, destructive last and quiet. */
  .cvb-row-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cvb-row-actions .cvb-btn {
    height: 48px;
    font-size: 15px;
    order: 2;
  }

  .cvb-row-actions .cvb-btn.gold,
  .cvb-row-actions .cvb-btn.primary {
    order: 1;
  }

  .cvb-row-actions .cvb-btn.ghost {
    order: 3;
  }

  .cvb-row-actions .cvb-btn.cvb-btn-muted,
  .cvb-row-actions .cvb-btn.cvb-btn-danger {
    order: 4;
    margin-top: 6px;
    background: none;
    border: 1px solid rgba(180, 60, 60, 0.35);
    color: #9C3B3B;
  }

  /* ── Design picker ──────────────────────────────────────────────────────
     The grid was a hard repeat(3, minmax(220px, 1fr)) with no media query, so
     it needed ~688px inside a 343px viewport and blew out of the container. */
  .cvb-step8-template-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cvb-design-zoom {
    height: 44px;
  }

  .cvb-thumb-nav {
    width: 48px;
    height: 48px;
  }

  .cvb-thumb-modal-dialog {
    width: 100%;
    max-height: 92vh;
  }

  /* ── Journey rail ───────────────────────────────────────────────────────
     Six stages at 24px gaps overflowed and scrolled with no affordance. */
  .cvb-edit-top-tabs {
    gap: 14px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cvb-edit-top-tabs::-webkit-scrollbar {
    display: none;
  }

  .cvb-edit-top-tabs > * {
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* ── Misc ───────────────────────────────────────────────────────────────*/
  .cvb-edit-main,
  .cvb-step-card,
  .cvb-process-card {
    border-radius: 0;
  }

  /* Step 11's 18-row textarea is taller than a phone screen. */
  #cvb-cover-letter-editor {
    min-height: 320px;
  }
}

/* Tablets: two design columns rather than a stretched single or a broken three. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cvb-step8-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Installed / standalone mode: no browser chrome, so the app owns the top
   inset and must paint into it or the status bar sits on a white strip. */
@media (display-mode: standalone) {
  .cvb-head {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
}

/* "Start a new document" sits at the foot of the section menu. Separated by a
   rule and quieter than the section rows so it reads as an escape hatch, not
   another section to fill in. */
.cvb-left-foot {
  margin-top: 10px;
  padding: 10px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cvb-left-new {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 14px;
  border: 1px dashed rgba(215, 234, 243, 0.34);
  border-radius: 9px;
  background: transparent;
  color: #D7EAF3;
  font: 600 13px/1.2 inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cvb-left-new:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(215, 234, 243, 0.6);
}
.cvb-left-new:focus-visible {
  outline: 2px solid #3FBFB4;
  outline-offset: 2px;
}
.cvb-left-new-plus {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

/* Price and purchase terms on the Design step (no price showed before checkout). */
.cvb-price-note {
  margin: 2px 0 16px;
  padding: 10px 12px;
  border-left: 3px solid #04a397;
  background: #f1f8f7;
  color: #2f4a57;
  font-size: 14px;
  line-height: 1.5;
}

.cvb-price-note .cvb-currency-switch {
  display: inline-block;
  margin-top: 4px;
  color: #047f78;
  font-weight: 700;
}

/* Design preview states (retest 4 Nov 2026): loading and error shown in the
   preview itself instead of a silent blank frame. */
.cvb-preview-wrap { position: relative; }
.cvb-preview-wrap.is-loading::before {
  content: "Loading preview\2026";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--cvb-text);
  font-size: 15px;
  font-weight: 600;
  z-index: 2;
}
.cvb-preview-error {
  position: absolute;
  inset: auto 12px 12px 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cvb-err-border);
  border-radius: 8px;
  background: var(--cvb-err-bg);
  color: var(--cvb-err-text);
  font-size: 14px;
  z-index: 3;
}
.cvb-preview-error .cvb-btn { margin-left: 8px; }

/* Design cards are <button>s, and the site theme sets white-space:nowrap on
   every button, so a long description (Right Panel, Statement) kept its full
   width on one line and spilled into the next card (retest 4 Nov 2026).
   Text wraps inside its own card; nothing is clipped. */
.cvb-design-card-wrap { min-width: 0; }
.cvb-design-card { white-space: normal; }
.cvb-design-name,
.cvb-design-desc {
  max-width: 100%;
  align-self: stretch;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Extraction summary notes (round 2): partial or uncertain results are said
   plainly, in amber with dark text (contrast > 7:1), never as a green tick. */
.cvb-extract-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #B26B00;
  background: #FFF6E5;
  color: #4A2E00;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* #59: step bar items are tap targets on phones (they were 23px tall). */
@media (max-width: 767px) {
  .cvb-stage-tabs > button,
  .cvb-stage-tabs > span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}