.btn--wide { width: 100%; }
.btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.detail-copy--small { font-size: 12px; }
.toast--info { border-color: #b2ccff; background: #eef4ff; }
.toast--info .toast__icon { color: var(--blue); }

.builder-screen { min-height: 100vh; background: var(--canvas); }
.builder-topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 80px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.builder-topbar__brand { display: flex; align-items: center; padding-left: 48px; }
.builder-topbar__main { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 48px; }
.builder-topbar__actions { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.autosave { color: var(--success); font-size: 12px; font-weight: 700; }
.autosave.is-saving { color: var(--muted); }
.autosave.is-error { color: var(--danger); }

.builder-layout {
  display: grid;
  grid-template-columns: 272px minmax(560px, 1fr) 436px;
  min-height: calc(100vh - 80px);
}
.builder-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  min-height: calc(100vh - 80px);
  padding: 34px 32px;
  border-right: 1px solid var(--border);
  background: #fff;
}
.builder-sidebar h2 { margin: 0 0 34px; color: var(--navy); font-size: 18px; }
.step-list { display: grid; gap: 26px; padding: 0; margin: 0; list-style: none; }
.step-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  text-align: left;
}
.step-link__number {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: var(--soft-teal);
  font-size: 12px;
  font-weight: 800;
}
.step-link.is-active { color: var(--navy); font-weight: 700; }
.step-link.is-active .step-link__number { color: var(--orange); background: var(--soft-orange); }
.step-link.is-complete .step-link__number { color: #fff; background: var(--success); }

.builder-main { min-width: 0; padding: 28px 42px 64px 48px; }
.builder-main__header { max-width: 670px; margin-bottom: 22px; }
.step-label { color: var(--teal); font-size: 12px; font-weight: 800; }
.builder-main h1 { margin: 12px 0 0; color: var(--navy); font-size: 30px; line-height: 1.25; }
.mobile-progress { display: none; }

.form-panel {
  max-width: 670px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.form-panel__section + .form-panel__section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.form-panel h2 { margin: 0 0 20px; color: var(--navy); font-size: 19px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid--spaced { margin-top: 24px; }
.field { display: grid; min-width: 0; gap: 7px; }
.field label { color: var(--muted); font-size: 12px; font-weight: 700; }
.field label.required::after { content: " *"; color: var(--danger); }
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 51, 141, .12); }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 11px; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.4; }
.form-tip { display: inline-flex; margin-top: 18px; border-radius: 999px; padding: 8px 12px; color: var(--blue); background: var(--soft-teal); font-size: 11px; font-weight: 700; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; }
.form-actions .btn--primary { min-width: 190px; }

.draft-conflict { display:flex; max-width:760px; align-items:center; justify-content:space-between; gap:18px; margin:0 0 18px; border:1px solid #f0c36d; border-radius:14px; padding:14px 16px; color:#6f4711; background:#fff8e8; }
.draft-conflict p { margin:4px 0 0; font-size:12px; line-height:1.45; }
.draft-conflict > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }

.dynamic-card { display: grid; gap: 16px; border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: #fbfcfe; }
.dynamic-card + .dynamic-card { margin-top: 14px; }
.dynamic-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dynamic-card + .btn,
.form-panel__section > .btn { margin-top: 16px; }

.preview-pane {
  position: sticky;
  top: 80px;
  align-self: start;
  height: calc(100vh - 80px);
  overflow: auto;
  padding: 48px 34px;
  border-left: 1px solid var(--border);
  background: #eef3f7;
}
.preview-pane__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.preview-pane__frame { display: grid; min-height: 620px; place-items: start center; overflow: hidden; }
.preview-pane .cv-sheet { transform: scale(.61); transform-origin: top center; margin-bottom: -320px; }

.review-copy { color: var(--muted); line-height: 1.55; }
.review-checks { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.review-checks li { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; }
.review-checks li span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; font-weight: 800; }
.review-checks .is-complete { color: #176a49; background: #ecfdf3; }
.review-checks .is-complete span { color: #fff; background: var(--success); }
.review-checks .is-warning { color: #8a5314; background: #fff7e8; }
.review-checks .is-warning span { color: #fff; background: #b7791f; }
.mobile-review-preview { display: none; }

.preview-template-name { color: var(--muted); font-size: 12px; font-weight: 700; }
.modal-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 20, 51, .64);
  backdrop-filter: blur(5px);
}
.template-modal { width: min(900px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; padding: 30px; }
.template-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.template-modal__head h2 { margin: 0; color: var(--navy); font-size: 25px; }
.template-modal__head p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.template-modal__head button { border: 0; color: var(--muted); background: transparent; font-size: 24px; }
.template-modal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.template-modal__option { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 14px; color: var(--navy); background: #fff; text-align: left; }
.template-modal__option:hover,
.template-modal__option.is-selected { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 169, 198, .13); }
.template-modal__option .mini-resume { width: 82px; height: 116px; }
.template-modal__option strong,
.template-modal__option small { display: block; }
.template-modal__option small { margin-top: 7px; color: var(--muted); line-height: 1.4; }

@media (max-width: 1180px) {
  .builder-topbar { grid-template-columns: 220px minmax(0, 1fr); }
  .builder-topbar__brand { padding-left: 24px; }
  .builder-layout { grid-template-columns: 220px minmax(520px, 1fr); }
  .builder-sidebar { padding-inline: 22px; }
  .preview-pane { position: relative; top: auto; grid-column: 2; height: auto; min-height: 760px; }
  .preview-pane .cv-sheet { transform: scale(.72); margin-bottom: -230px; }
}

@media (max-width: 820px) {
  .builder-topbar { display: flex; min-height: 64px; padding: 0 20px; }
  .builder-topbar__brand { display: none; }
  .builder-topbar__main { width: 100%; padding: 0; }
  .builder-topbar__main .breadcrumbs { display: none; }
  .builder-topbar__actions { width: 100%; justify-content: space-between; }
  .builder-layout { display: block; min-height: calc(100vh - 64px); }
  .builder-sidebar,
  .preview-pane { display: none; }
  .builder-main { padding: 18px 20px 94px; }
  .builder-main__header { margin-bottom: 24px; }
  .builder-main h1 { font-size: 25px; }
  .mobile-progress { display: block; margin: 12px 0 18px; }
  .mobile-progress__track { height: 6px; border-radius: 999px; background: var(--border); }
  .mobile-progress__fill { height: 100%; border-radius: inherit; background: var(--teal); }
  .form-panel { max-width: none; border: 0; padding: 0; background: transparent; box-shadow: none; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-grid .full { grid-column: auto; }
  .draft-conflict { align-items:flex-start; flex-direction:column; }
  .form-actions {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(255,255,255,.97);
  }
  .form-actions .btn { flex: 1; min-height: 50px; }
  .review-form .form-actions { position: static; padding: 0; border: 0; background: transparent; }
  .mobile-review-preview { display: grid; min-height: 390px; place-items: start center; margin-top: 24px; overflow: hidden; border-radius: 16px; padding: 20px; background: #eef3f7; }
  .mobile-review-preview .cv-sheet { transform: scale(.56); transform-origin: top center; margin-bottom: -365px; }
  .template-modal { padding: 22px; }
  .template-modal__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .builder-main { padding-inline: 18px; }
  .autosave { font-size: 11px; }
  .form-actions { gap: 10px; padding-inline: 18px; }
  .form-actions .btn { padding-inline: 12px; }
  .dynamic-card { padding: 14px; }
  .modal-backdrop { padding: 12px; }
  .template-modal__grid { grid-template-columns: 1fr; }
}

/* Production builder usability pass */
.builder-topbar { grid-template-columns:232px minmax(0,1fr); transition:grid-template-columns .2s ease; }
.builder-layout { grid-template-columns:232px minmax(560px,1fr) 500px; transition:grid-template-columns .2s ease; }
.builder-screen.is-sidebar-collapsed .builder-topbar,
.builder-screen.is-sidebar-collapsed .builder-layout { grid-template-columns:72px minmax(560px,1fr) 500px; }
.builder-screen.is-sidebar-collapsed .builder-topbar__brand { justify-content:center; padding-left:0; }
.builder-screen.is-sidebar-collapsed .builder-topbar__brand .brand > span:last-child { display:none; }
.builder-sidebar { min-width:0; padding:26px 18px; transition:padding .2s ease; }
.builder-sidebar__head { display:flex; min-height:38px; align-items:center; justify-content:space-between; gap:10px; margin-bottom:28px; }
.builder-sidebar__head h2 { margin:0; white-space:nowrap; }
.builder-sidebar__toggle { border:1px solid var(--border); border-radius:9px; padding:7px 9px; color:var(--blue); background:#fff; font-size:10px; font-weight:800; }
.builder-screen.is-sidebar-collapsed .builder-sidebar { padding-inline:12px; }
.builder-screen.is-sidebar-collapsed .builder-sidebar__head { justify-content:center; }
.builder-screen.is-sidebar-collapsed .builder-sidebar__head h2,
.builder-screen.is-sidebar-collapsed .step-link__label { display:none; }
.builder-screen.is-sidebar-collapsed .builder-sidebar__toggle { width:48px; padding-inline:4px; }
.builder-screen.is-sidebar-collapsed .step-list { gap:18px; }
.builder-screen.is-sidebar-collapsed .step-link { display:flex; justify-content:center; }
.builder-screen.is-sidebar-collapsed .step-link__number { flex:0 0 40px; width:40px; height:40px; }
.builder-main { padding:28px 30px 64px; }
.builder-main__header { display:flex; max-width:760px; align-items:flex-end; justify-content:space-between; gap:20px; }
.form-panel { max-width:760px; }
.builder-inline-preview,
.mobile-preview-trigger { display:none; }
.preview-pane { padding:24px 16px 36px; }
.preview-pane__head { align-items:flex-start; margin-bottom:18px; }
.preview-pane__head > div:first-child { display:grid; gap:8px; }
.preview-pane__actions { display:flex; align-items:center; gap:8px; }
.preview-template-name { display:block; color:var(--navy); font-size:12px; }
.preview-zoom { display:flex; min-height:34px; align-items:center; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:#fff; }
.preview-zoom button { width:32px; align-self:stretch; border:0; color:var(--blue); background:transparent; font-weight:800; }
.preview-zoom span { min-width:44px; color:var(--muted); font-size:10px; font-weight:700; text-align:center; }
.preview-pane__frame { position:relative; width:var(--preview-width); min-height:var(--preview-height); height:var(--preview-height); margin-inline:auto; overflow:hidden; }
.preview-pane .cv-sheet { position:absolute; top:0; left:0; transform:scale(var(--preview-scale)); transform-origin:top left; margin-bottom:0; }
.template-modal { width:min(1040px,100%); }
.template-modal__option { grid-template-columns:107px minmax(0,1fr); align-items:start; }
.template-modal__option .template-sample { margin:0; }
.template-modal__option small { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:4; }

.mobile-preview-backdrop { position:fixed; z-index:110; inset:0; display:grid; background:rgba(0,20,51,.72); backdrop-filter:blur(5px); }
.mobile-preview-panel { display:grid; width:100%; height:100%; grid-template-rows:auto minmax(0,1fr) auto; background:#eef3f7; }
.mobile-preview-panel > header,
.mobile-preview-panel > footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; background:#fff; }
.mobile-preview-panel > header { border-bottom:1px solid var(--border); }
.mobile-preview-panel > footer { border-top:1px solid var(--border); }
.mobile-preview-panel > header h2 { margin:7px 0 0; color:var(--navy); font-size:17px; }
.mobile-preview-panel > header > button { border:0; color:var(--blue); background:transparent; font-weight:800; }
.mobile-preview-panel > footer .btn { flex:1; }
.mobile-preview-scroll { overflow:auto; padding:24px 12px; }
.mobile-preview-stage { position:relative; width:333px; height:472px; margin-inline:auto; overflow:hidden; box-shadow:0 16px 38px rgba(0,31,91,.18); }
.mobile-preview-stage .cv-sheet { position:absolute; top:0; left:0; transform:scale(.56); transform-origin:top left; }

@media (max-width: 1360px) and (min-width: 1181px) {
  .builder-layout { grid-template-columns:210px minmax(520px,1fr) 470px; }
  .builder-topbar { grid-template-columns:210px minmax(0,1fr); }
  .builder-screen.is-sidebar-collapsed .builder-topbar,
  .builder-screen.is-sidebar-collapsed .builder-layout { grid-template-columns:72px minmax(520px,1fr) 470px; }
  .builder-main { padding-inline:24px; }
}
@media (max-width: 1180px) {
  .builder-topbar,
  .builder-screen.is-sidebar-collapsed .builder-topbar { display:grid; grid-template-columns:1fr; min-height:68px; }
  .builder-topbar__brand { display:none; }
  .builder-topbar__main { padding-inline:24px; }
  .builder-layout,
  .builder-screen.is-sidebar-collapsed .builder-layout { display:block; }
  .builder-sidebar,
  .preview-pane { display:none; }
  .builder-main { padding:24px 24px 94px; }
  .builder-inline-preview,
  .mobile-preview-trigger { display:inline-flex; }
}
@media (min-width: 561px) and (max-width: 1180px) {
  .mobile-preview-stage { width:488px; height:690px; }
  .mobile-preview-stage .cv-sheet { transform:scale(.82); transform-origin:top left; }
}
@media (max-width: 820px) {
  .builder-topbar,
  .builder-screen.is-sidebar-collapsed .builder-topbar { display:flex; }
  .builder-topbar__actions { gap:10px; }
  .builder-main__header { align-items:flex-start; }
  .builder-inline-preview { display:none; }
  .template-modal__option { grid-template-columns:107px minmax(0,1fr); }
}
@media (max-width: 560px) {
  .builder-topbar__main { padding-inline:16px; }
  .builder-topbar__actions { width:100%; }
  .builder-topbar__actions .autosave { display:none; }
  .builder-topbar__actions .header-action { display:inline-flex; margin-left:auto; }
  .mobile-preview-trigger { min-height:38px; }
  .form-actions .btn,
  .form-actions .btn--primary { min-width:0; padding-inline:10px; }
  .mobile-preview-panel > footer { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  .template-modal__option { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .template-modal__option .template-sample { margin-inline:auto; }
}
@media (max-width: 360px) {
  .mobile-preview-stage { width:274px; height:388px; }
  .mobile-preview-stage .cv-sheet { transform:scale(.46); transform-origin:top left; }
  .mobile-preview-panel > footer { display:grid; grid-template-columns:1fr; }
}