:root {
  --ink: #172033; --muted: #687385; --soft-muted: #9aa4b2; --line: #dce3e8;
  --surface: #fff; --canvas: #f5f8f8; --preview-bg: #e2f0ee;
  --accent: #0f766e; --accent-soft: #d6efeb; --shadow: 0 18px 45px rgba(20,43,52,.11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--canvas); color: var(--ink); font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin: 0; }
button,input,select,textarea { font: inherit; }
.topbar { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); padding: 13px 4vw; position: sticky; top: 0; z-index: 10; }
.topbar-inner { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1600px; }
.brand { align-items: center; color: var(--ink); display: inline-flex; font-size: 1.15rem; font-weight: 800; gap: 8px; letter-spacing: -.06em; text-decoration: none; }.brand-mark { align-items: center; background: var(--accent); border-radius: 7px; color: #fff; display: inline-flex; font-size: .85rem; height: 27px; justify-content: center; width: 27px; }.brand-accent { color: var(--accent); }
.topnav { display: flex; gap: 28px; margin-left: 70px; }.topnav a { color: var(--muted); font-size: .73rem; font-weight: 650; text-decoration: none; }.topnav a:hover { color: var(--accent); }
.topbar-actions { align-items: center; display: flex; gap: 18px; }.privacy-note { align-items: center; color: var(--muted); display: flex; font-size: .7rem; gap: 7px; }.shield { align-items: center; border: 1px solid #9ed2c8; border-radius: 50%; color: var(--accent); display: inline-flex; font-size: .58rem; height: 18px; justify-content: center; width: 18px; }.header-cta,.primary-button { background: var(--accent); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-size: .72rem; font-weight: 750; padding: 10px 14px; text-decoration: none; }.header-cta span,.primary-button span { margin-left: 8px; }
.locale-switch { align-items: center; color: var(--soft-muted); display: flex; font-size: .65rem; gap: 4px; }.locale-switch a { color: var(--muted); font-weight: 750; text-decoration: none; }.locale-switch a:hover { color: var(--accent); }.locale-switch a.active { color: var(--accent); }
.layout { margin: 0 auto; max-width: 1600px; padding: 30px 4vw 70px; }.intro { margin-bottom: 22px; }.editor-heading { align-items: end; display: flex; justify-content: space-between; }.section-kicker { color: var(--accent); font-size: .66rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 8px; text-transform: uppercase; }h1 { font-size: clamp(2rem,3vw,3.1rem); letter-spacing: -.07em; line-height: .98; margin: 0; }.intro-copy { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 11px 0 0; }.editor-trust { align-items: center; color: var(--soft-muted); display: flex; font-size: .68rem; gap: 16px; padding-bottom: 5px; }.editor-trust span:first-child { color: var(--accent); }
.workspace { align-items: start; display: grid; gap: 25px; grid-template-columns: minmax(420px,.93fr) minmax(520px,1.07fr); }.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px rgba(20,43,52,.045); padding: 25px; }.mode-switch { background: #f2f5f6; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 3px; margin-bottom: 20px; padding: 4px; }.mode-tab { background: transparent; border: 0; border-radius: 5px; color: var(--muted); cursor: pointer; flex: 1; font-size: .72rem; font-weight: 750; padding: 10px; }.mode-tab.active { background: #fff; box-shadow: 0 2px 5px rgba(20,43,52,.08); color: var(--accent); }
.source-panel { background: #fbfdfd; border: 1.5px dashed #8aa5a5; border-radius: 9px; margin-bottom: 20px; padding: 23px 18px 17px; transition: background .2s,border-color .2s; }.source-panel.is-dragging { background: #e9f7f3; border-color: var(--accent); }.source-copy { align-items: center; display: flex; flex-direction: column; gap: 8px; text-align: center; }.source-copy strong,.source-copy small { display: block; }.source-copy strong { font-size: .79rem; }.source-copy small { color: var(--muted); font-size: .68rem; line-height: 1.45; max-width: 350px; }.source-icon { align-items: center; background: var(--accent-soft); border-radius: 8px; color: var(--accent); display: flex; font-size: 1.25rem; height: 38px; justify-content: center; width: 38px; }.source-actions { display: flex; gap: 8px; justify-content: center; margin-top: 15px; }.source-upload,.blank-button { border-radius: 6px; cursor: pointer; font-size: .68rem; font-weight: 750; padding: 9px 12px; }.source-upload { background: var(--accent); color: #fff; }.source-upload input { display: none; }.blank-button { background: #fff; border: 1px solid #b9cfce; color: var(--accent); }.file-status { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.card-heading { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 18px; }.card-heading h2 { font-size: 1.28rem; letter-spacing: -.045em; margin: 0; }.card-subtitle { color: var(--muted); font-size: .72rem; line-height: 1.45; margin: 6px 0 0; }.autosave { align-items: center; color: var(--muted); display: flex; font-size: .65rem; gap: 6px; white-space: nowrap; }.status-dot { background: #25a36f; border-radius: 50%; height: 6px; width: 6px; }.field-grid { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }.field { display: block; margin-bottom: 15px; }.field-wide { grid-column: 1 / -1; }.field span,.control-field span,.experience-fields label > span { color: #465365; display: block; font-size: .68rem; font-weight: 700; margin-bottom: 6px; }.field em { color: var(--soft-muted); font-size: .62rem; font-style: normal; font-weight: 500; margin-left: 3px; }input,textarea,select { background: #fcfefe; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-size: .76rem; outline: none; padding: 10px 11px; width: 100%; }textarea { line-height: 1.5; resize: vertical; }input::placeholder,textarea::placeholder { color: #aab4bf; }input:focus,textarea:focus,select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.photo-field { margin-top: 2px; }.photo-upload { align-items: center; border: 1px dashed #b9cfce; border-radius: 7px; cursor: pointer; display: flex; gap: 10px; padding: 10px 12px; }.photo-upload input { display: none; }.photo-placeholder { align-items: center; background: var(--accent-soft); border-radius: 50%; color: var(--accent); display: flex; font-size: 1rem; height: 28px; justify-content: center; width: 28px; }.photo-upload strong,.photo-upload small { display: block; }.photo-upload strong { font-size: .7rem; }.photo-upload small { color: var(--muted); font-size: .61rem; margin-top: 2px; }
.builder-section,.appearance-section { border-top: 1px solid var(--line); margin: 22px 0; padding-top: 20px; }.builder-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 13px; }.builder-heading > div > span { display: block; font-size: .72rem; font-weight: 750; }.builder-heading small { color: var(--muted); display: block; font-size: .63rem; margin-top: 4px; }.add-button { background: #edf9f6; border: 1px solid #b9e1da; border-radius: 6px; color: var(--accent); cursor: pointer; font-size: .65rem; font-weight: 750; padding: 8px 10px; }.experience-card { background: #fbfdfd; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; padding: 13px; }.experience-card-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 11px; }.experience-card-header strong { font-size: .7rem; }.remove-experience { background: none; border: 0; color: #b25e65; cursor: pointer; font-size: .63rem; }.experience-fields { display: grid; gap: 11px; grid-template-columns: 1fr 1fr; }.experience-fields label:last-child { grid-column: 1 / -1; }.experience-fields textarea { min-height: 70px; }.appearance-controls { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }.control-field { display: block; }.control-field input[type=color] { cursor: pointer; height: 37px; padding: 3px; }.form-actions { border-top: 1px solid var(--line); display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 19px; }
.preview-panel { background: var(--preview-bg); border: 1px solid #c8e2de; border-radius: 12px; min-height: 760px; padding: 18px; position: sticky; top: 76px; }.preview-toolbar { align-items: center; display: flex; justify-content: space-between; padding: 1px 3px 15px; }.preview-title { align-items: center; color: var(--ink); display: flex; font-size: .71rem; gap: 8px; }.preview-divider { background: #b6d1ce; height: 15px; width: 1px; }.page-count { background: rgba(255,255,255,.72); border: 1px solid #c6dedb; border-radius: 5px; color: #43615f; font-size: .65rem; padding: 6px 8px; }.live-dot { background: #20a06d; border-radius: 50%; height: 7px; width: 7px; }.resume-preview,.letter-preview { background: #fff; box-shadow: var(--shadow); margin: 0 auto; max-width: 690px; min-height: 850px; padding: 45px 48px; }.resume-header { border-bottom: 2px solid var(--accent); padding-bottom: 17px; position: relative; }.resume-header h2,.letter-preview-header h2 { font-size: 1.9rem; letter-spacing: -.06em; margin: 0; }.resume-header p { color: var(--accent); font-size: .78rem; font-weight: 700; margin: 5px 0 11px; }.contact-line { color: #596574; display: flex; flex-wrap: wrap; font-size: .61rem; gap: 5px 14px; }.contact-line span:not(:last-child)::after { color: #b3bdc5; content: "·"; margin-left: 14px; }.resume-photo { border-radius: 50%; float: right; height: 65px; object-fit: cover; width: 65px; }.resume-section { border-bottom: 1px solid #e5ebed; padding: 17px 0 12px; }.resume-section h3 { color: var(--accent); font-size: .68rem; letter-spacing: .1em; margin: 0 0 9px; text-transform: uppercase; }.resume-section p,.entry-detail { color: #566271; font-size: .68rem; line-height: 1.55; margin: 0; }.resume-entry { margin-bottom: 13px; }.resume-entry:last-child { margin-bottom: 0; }.entry-title,.entry-company { display: block; font-size: .7rem; }.entry-company { color: var(--accent); margin-top: 2px; }.entry-meta { color: #788391; display: block; font-size: .61rem; margin-top: 3px; }.resume-entry ul { color: #566271; font-size: .66rem; line-height: 1.5; margin: 6px 0 0; padding-left: 17px; }.skill-list { display: flex; flex-wrap: wrap; gap: 6px; }.skill-chip { background: #edf9f6; border: 1px solid #c9e7e1; border-radius: 4px; color: #216961; font-size: .62rem; padding: 4px 7px; }.empty-preview { color: #9aa4ae; font-size: .65rem; }
.letter-preview { padding-top: 55px; }.letter-preview-label { color: var(--accent); font-size: .62rem; font-weight: 800; letter-spacing: .16em; }.letter-preview-header { border-bottom: 1px solid var(--line); margin-top: 22px; padding-bottom: 15px; }.letter-preview-header p { color: var(--muted); font-size: .72rem; margin: 0 0 4px; }.letter-date,.letter-content,.letter-signature { color: #566271; font-size: .72rem; line-height: 1.65; }.letter-content { white-space: pre-line; }.letter-signature { margin-top: 28px; }
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 35px 4vw 20px; }.footer-main { display: flex; justify-content: space-between; margin: 0 auto; max-width: 1600px; }.footer-brand p { color: var(--muted); font-size: .7rem; }.footer-links { display: grid; gap: 50px; grid-template-columns: repeat(3,auto); }.footer-links > div { display: flex; flex-direction: column; gap: 7px; }.footer-links strong { font-size: .68rem; }.footer-links a,.footer-links span { color: var(--muted); font-size: .65rem; text-decoration: none; }.footer-bottom { border-top: 1px solid var(--line); color: var(--soft-muted); display: flex; font-size: .62rem; justify-content: space-between; margin: 28px auto 0; max-width: 1600px; padding-top: 14px; }
@media (max-width:1000px) { .topnav { margin-left: 20px; }.workspace { grid-template-columns: 1fr; }.preview-panel { min-height: 0; position: static; }.resume-preview,.letter-preview { max-width: 690px; } }
@media (max-width:700px) { .topnav,.privacy-note { display: none; }.layout { padding: 23px 16px 50px; }.editor-heading { align-items: flex-start; display: block; }.editor-trust { margin-top: 14px; }.form-card { padding: 17px; }.field-grid,.experience-fields,.appearance-controls { grid-template-columns: 1fr; }.field-wide,.experience-fields label:last-child { grid-column: auto; }.card-heading { display: block; }.autosave { margin-top: 10px; }.source-actions { align-items: stretch; flex-direction: column; }.preview-panel { padding: 10px; }.resume-preview,.letter-preview { min-height: 700px; padding: 30px 25px; }.footer-main { display: block; }.footer-links { gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 25px; }.footer-bottom { flex-direction: column; gap: 7px; } }
@media print { .topbar,.intro,.form-card,.preview-toolbar,.site-footer { display: none !important; }.layout { padding: 0; }.workspace { display: block; }.preview-panel { background: #fff; border: 0; box-shadow: none; padding: 0; position: static; }.resume-preview,.letter-preview { box-shadow: none; margin: 0 auto; max-width: 800px; } }

/* Typography and responsive workstation refinements. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: Inter, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3, .brand, .mode-tab, .primary-button, .header-cta { font-weight: 650; }
h1, h2, h3 { text-wrap: balance; }
input, textarea, select, button { letter-spacing: -.01em; }
.card-heading h2, .resume-header h2, .letter-preview-header h2 { font-weight: 650; }
.resume-preview { font-family: Inter, Geist, ui-sans-serif, system-ui, sans-serif; }

@media (max-width: 1100px) {
  .layout { padding-left: 28px; padding-right: 28px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .form-card { max-width: 900px; width: 100%; }
  .preview-panel { min-height: 0; position: static; }
  .resume-preview, .letter-preview { max-width: 700px; }
}

@media (max-width: 820px) {
  .topbar { padding-left: 22px; padding-right: 22px; }
  .topnav { display: none; }
  .topbar-actions { gap: 10px; }
  .layout { padding: 24px 20px 55px; }
  .editor-heading { align-items: flex-start; gap: 15px; }
  .editor-trust { flex-direction: column; align-items: flex-end; gap: 5px; }
  .preview-panel { padding: 14px; }
  .preview-toolbar { gap: 10px; }
  .resume-preview, .letter-preview { min-height: 780px; padding: 40px 42px; }
  .footer-links { gap: 30px; }
}

@media (max-width: 600px) {
  .topbar { padding: 11px 15px; }
  .brand { font-size: 1.05rem; }
  .privacy-note { display: none; }
  .header-cta { font-size: .65rem; padding: 9px 10px; }
  .layout { padding: 21px 12px 42px; }
  h1 { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  .intro-copy { font-size: .76rem; max-width: 290px; }
  .editor-heading { display: block; }
  .editor-trust { align-items: flex-start; flex-direction: row; flex-wrap: wrap; margin-top: 14px; }
  .form-card { border-radius: 10px; padding: 14px; }
  .mode-switch { margin-bottom: 14px; }
  .source-panel { padding: 20px 12px 14px; }
  .source-actions { align-items: stretch; flex-direction: column; }
  .source-upload, .blank-button { text-align: center; }
  .card-heading { display: block; }
  .autosave { margin-top: 10px; }
  .field-grid, .experience-fields, .appearance-controls { grid-template-columns: 1fr; }
  .field-wide, .experience-fields label:last-child { grid-column: auto; }
  .builder-heading { gap: 9px; }
  .add-button { max-width: 130px; }
  .preview-panel { border-radius: 10px; padding: 9px; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; padding: 4px 3px 11px; }
  .resume-preview, .letter-preview { min-height: 650px; padding: 28px 23px; width: 100%; }
  .resume-header h2, .letter-preview-header h2 { font-size: 1.55rem; }
  .contact-line { gap: 4px 9px; }
  .contact-line span:not(:last-child)::after { margin-left: 9px; }
  .footer-main { padding: 0; }
  .footer-links { gap: 18px; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .header-cta { font-size: 0; }
  .header-cta span { font-size: .9rem; margin-left: 0; }
  .editor-trust { font-size: .62rem; }
  .resume-preview, .letter-preview { padding-left: 18px; padding-right: 18px; }
  .footer-links { grid-template-columns: 1fr; }
}

/* Reference implementation alignment: desktop editor workstation. */
:root { --ink: #0f172a; --muted: #64748b; --soft-muted: #94a3b8; --line: #e2e8f0; --canvas: #f8fafc; --accent: #16a34a; --accent-soft: #f0fdf4; --preview-bg: #e2e8f0; --shadow: 0 4px 12px rgba(0,0,0,.06); }
body { background: var(--canvas); }
.topbar { height: 64px; padding: 0 24px; }
.topbar-inner { max-width: none; width: 100%; }
.brand-mark { background: var(--accent); border-radius: 6px; height: 28px; width: 28px; }
.brand-accent, .locale-switch a.active, .topnav a:hover { color: var(--accent); }
.header-cta, .primary-button, .source-upload { background: var(--accent); }
.privacy-note { background: var(--accent-soft); border-radius: 20px; color: var(--accent); padding: 6px 12px; }
.shield { border: 0; color: var(--accent); height: auto; width: auto; }
.layout { max-width: none; padding: 0; }
.intro { display: none; }
.workspace { gap: 0; grid-template-columns: 1fr 1fr; height: calc(100vh - 64px); }
.form-card { border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; height: 100%; max-width: none; overflow-y: auto; padding: 32px; }
.preview-panel { background: var(--preview-bg); border: 0; border-radius: 0; height: calc(100vh - 64px); min-height: 0; overflow-y: auto; padding: 32px; position: sticky; top: 64px; }
.mode-switch { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 12px; justify-content: flex-start; margin-bottom: 24px; padding: 0 0 8px; }
.mode-tab { border-bottom: 2px solid transparent; border-radius: 0; flex: initial; font-size: .95rem; padding: 6px 4px; }
.mode-tab.active { background: transparent; box-shadow: none; border-bottom-color: var(--accent); color: var(--accent); }
.source-panel { background: var(--surface); border: 2px dashed #cbd5e1; border-radius: 10px; margin-bottom: 24px; padding: 32px 20px; }
.source-panel.is-dragging { background: var(--accent-soft); border-color: var(--accent); }
.source-icon { background: transparent; font-size: 2rem; height: auto; width: auto; }
.source-copy strong { font-size: 1.05rem; }.source-copy small { font-size: .85rem; }
.source-actions { display: flex; justify-content: center; margin-top: 16px; }
.source-panel .file-status { text-align: center; }
.card-heading { border: 0; margin-bottom: 16px; padding-bottom: 0; }.card-heading h2 { font-size: 1.1rem; }.card-subtitle { display: none; }
.field span, .control-field span, .experience-fields label > span { color: var(--muted); font-size: .85rem; font-weight: 500; }
input, textarea, select { background: #fff; border-radius: 6px; font-size: .95rem; padding: 10px 14px; }
.builder-section, .appearance-section { margin: 24px 0; padding-top: 24px; }
.experience-card { background: #fff; box-shadow: var(--shadow); }
.add-button { border-style: dashed; font-size: .85rem; width: 100%; }
.preview-toolbar { margin: 0 auto 16px; max-width: 210mm; padding: 0; width: 100%; }
.preview-title { font-size: .85rem; font-weight: 600; }.page-count { background: transparent; border: 0; font-size: .85rem; font-weight: 600; padding: 0; }
.resume-preview, .letter-preview { border-radius: 0; box-shadow: var(--shadow); font-family: Inter, sans-serif; max-width: 210mm; min-height: 297mm; padding: 20mm; width: 100%; }
.resume-header { border-bottom: 1.5px solid #000; margin-bottom: 16px; padding-bottom: 12px; }.resume-header h2 { font-size: 1.7rem; text-transform: uppercase; }.resume-header p { color: #374151; font-size: 1.05rem; }.contact-line { color: #4b5563; font-size: .85rem; gap: 6px 12px; }
.resume-section { border: 0; margin-top: 18px; padding: 0; }.resume-section h3 { border-bottom: 1px solid #d1d5db; color: #111827; font-size: .95rem; letter-spacing: .03em; padding-bottom: 4px; }.resume-section p, .entry-detail { color: #374151; font-size: .9rem; }.entry-title, .entry-company { font-size: .92rem; }.entry-meta { font-size: .85rem; }.resume-entry ul { font-size: .88rem; }.skill-chip { background: transparent; border: 0; color: #374151; font-size: .88rem; padding: 0; }
.site-footer { display: none; }
@media (max-width: 992px) { .workspace { height: auto; grid-template-columns: 1fr; overflow: visible; }.form-card, .preview-panel { height: auto; overflow: visible; }.form-card { border-right: 0; }.preview-panel { min-height: 0; position: static; }.resume-preview, .letter-preview { min-height: auto; width: 100%; } }
@media (max-width: 600px) { .topbar { height: 58px; padding: 0 15px; }.topbar-actions { gap: 7px; }.locale-switch { display: none; }.header-cta { font-size: 0; padding: 9px 11px; }.header-cta span { font-size: .9rem; margin: 0; }.workspace { grid-template-columns: minmax(0,1fr); }.form-card { padding: 22px 15px; }.preview-panel { padding: 18px 10px; }.source-panel { padding: 26px 12px; }.resume-preview, .letter-preview { padding: 18mm 14mm; } }
@media print { .preview-panel { position: static; } }
@media print {
  html, body { background: #fff; height: auto; margin: 0; overflow: visible; }
  body * { visibility: hidden; }
  #resume-preview, #resume-preview * { visibility: visible; }
  .layout, .workspace, .preview-panel { display: block; height: auto; margin: 0; max-width: none; overflow: visible; padding: 0; }
  #resume-preview { background: #fff; box-shadow: none; display: block; height: auto; left: auto; margin: 0; max-width: none; min-height: 297mm; overflow: visible; padding: 18mm 20mm; position: relative; top: auto; transform: none !important; width: 210mm; zoom: 1 !important; }
  .topbar, .landing-hero, .intro, .form-card, .preview-toolbar, .page-limit-indicator, .site-footer, .letter-preview { display: none !important; }
  .resume-section, .resume-entry { break-inside: avoid; page-break-inside: avoid; }
}

/* Presentation artwork fills the entire landing area. */
.landing-hero { background-image: linear-gradient(90deg, rgba(248,250,252,.97) 0%, rgba(248,250,252,.9) 38%, rgba(248,250,252,.32) 72%, rgba(248,250,252,.08) 100%), url('/assets/images/ap-ats-v3.jpg'), url('/assets/images/ap-ats-v2.jpg'); background-position: center; background-size: cover; min-height: 620px; padding-left: 7vw; padding-right: 7vw; position: relative; }
.landing-hero > * { position: relative; z-index: 1; }
.hero-visual { display: none; }
.hero-copy { max-width: 560px; }
@media (max-width: 620px) { .landing-hero { background-position: 62% center; min-height: 610px; } }

/* Keep the presentation artwork full-bleed and viewport-height. */
.landing-hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; min-height: calc(100vh - 60px); width: 100vw; }
@media (max-width: 600px) { .landing-hero { min-height: calc(100vh - 60px); } }

/* Clear separation between presentation and generator. */
.intro { background: #fff; border-top: 1px solid var(--line); display: block; margin: 0; padding: 78px 7vw 24px; }
.editor-heading { margin: 0 auto; max-width: 1440px; }
.workspace { background: var(--canvas); border-top: 1px solid #eef2f5; padding-top: 32px; }
.intro .section-kicker { margin-bottom: 10px; }
.intro h1 { font-size: clamp(2rem, 3vw, 3.1rem); }
.intro .intro-copy { font-size: .9rem; }
@media (max-width: 600px) { .intro { padding: 52px 20px 18px; }.workspace { padding-top: 20px; } }
@media print { .landing-hero, .intro { display: none !important; } }

@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff; height: auto; margin: 0; overflow: visible; }
  body * { visibility: hidden; }
  #resume-preview, #resume-preview * { visibility: visible; }
  #resume-preview { background: #fff; box-shadow: none; display: block; height: auto; left: 0; margin: 0; max-width: none; min-height: 297mm; overflow: visible; padding: 18mm 20mm; position: absolute; top: 0; transform: none !important; width: 210mm; zoom: 1 !important; }
  .preview-panel { background: #fff; display: block; height: auto; overflow: visible; padding: 0; position: static; }
  .topbar, .landing-hero, .intro, .form-card, .preview-toolbar, .page-limit-indicator, .site-footer, .letter-preview { display: none !important; }
  .resume-section, .resume-entry { break-inside: avoid; page-break-inside: avoid; }
}
.page-limit-indicator { display: block; }
@media print { .page-limit-indicator { display: none !important; } }
[hidden] { display: none !important; }

/* Restore the stable generator workstation layout. */
.workspace { gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(100vh - 64px); margin: 0; max-width: none; padding: 0; }
.workspace > * { min-width: 0; }
.form-card { border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; display: block; height: 100%; max-width: none; overflow-y: auto; padding: 32px; }
.mode-switch { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 12px; margin-bottom: 24px; padding: 0 0 8px; }
.mode-tab { border-bottom: 2px solid transparent; border-radius: 0; flex: initial; font-size: .95rem; padding: 6px 4px; }.mode-tab.active { background: transparent; border-bottom-color: var(--accent); box-shadow: none; color: var(--accent); }
.source-panel { background: #fbfdfd; border: 1.5px dashed #8aa5a5; border-radius: 9px; margin-bottom: 20px; padding: 23px 18px 17px; }.source-copy { align-items: center; flex-direction: column; gap: 8px; text-align: center; }.source-icon { background: var(--accent-soft); border-radius: 8px; color: var(--accent); font-size: 1.25rem; height: 38px; padding: 0; width: 38px; }.source-copy strong { font-size: .79rem; }.source-copy small { font-size: .68rem; }.source-actions { justify-content: center; margin-top: 15px; }
.preview-panel { align-items: center; background: var(--preview-bg); border: 0; border-radius: 0; display: flex; flex-direction: column; height: calc(100vh - 64px); min-height: 0; min-width: 0; overflow-y: auto; padding: 18px; position: sticky; top: 64px; }
.preview-toolbar { margin: 0 auto; padding: 1px 3px 15px; }.page-limit-indicator { margin: 0 auto 12px; max-width: 760px; }.resume-preview,.letter-preview { border: 0; box-shadow: var(--shadow); max-width: min(760px, 100%); min-height: 850px; padding: 45px 48px; width: 100%; }
.site-footer { display: none; }
@media (max-width: 992px) { .workspace { height: auto; grid-template-columns: 1fr; overflow: visible; padding: 24px 20px 60px; }.form-card,.preview-panel { height: auto; overflow: visible; }.form-card { border-right: 0; }.preview-panel { position: static; }.resume-preview,.letter-preview { max-width: 700px; min-height: auto; } }
@media (max-width: 600px) { .workspace { padding: 16px 12px 40px; }.form-card { padding: 18px 14px; }.source-copy { flex-direction: column; }.source-actions { align-items: stretch; flex-direction: column; }.source-upload,.blank-button { text-align: center; }.preview-panel { padding: 10px; }.resume-preview,.letter-preview { padding: 30px 23px; width: 100%; } }
@media print { .preview-panel { position: static; } }

/* Landing hero, preview toolbar and ATS Job Matcher. */
.landing-hero { align-items: center; display: grid; gap: 42px; grid-template-columns: minmax(330px,.78fr) minmax(520px,1.22fr); min-height: 520px; padding: 54px 5vw 48px; }
.hero-copy { max-width: 520px; }.hero-eyebrow { color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .1em; margin: 0 0 18px; text-transform: uppercase; }.hero-copy h1 { font-size: clamp(2.9rem,5vw,5.2rem); letter-spacing: -.085em; line-height: .95; margin: 0; }.hero-copy > p:not(.hero-eyebrow) { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 25px 0 28px; max-width: 475px; }.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 20px; }.hero-cta { background: var(--accent); border-radius: 8px; color: white; font-weight: 700; padding: 14px 18px; text-decoration: none; }.hero-cta span { margin-left: 12px; }.hero-secondary { color: var(--ink); font-size: .85rem; text-decoration: underline; text-underline-offset: 4px; }.hero-privacy { align-items: center; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: flex; gap: 11px; margin-top: 38px; max-width: 300px; padding: 12px 15px; }.hero-privacy > span { align-items: center; background: var(--accent-soft); border-radius: 50%; color: var(--accent); display: flex; height: 28px; justify-content: center; width: 28px; }.hero-privacy strong,.hero-privacy small { display: block; }.hero-privacy strong { font-size: .75rem; }.hero-privacy small { color: var(--muted); font-size: .63rem; margin-top: 3px; }.hero-visual { overflow: hidden; }.hero-visual img { border-radius: 12px; box-shadow: 0 20px 55px rgba(15,23,42,.14); display: block; height: auto; max-width: 100%; object-fit: cover; }
.preview-tools { align-items: center; display: flex; gap: 5px; }.preview-tools button,.preview-tools select { background: rgba(255,255,255,.8); border: 1px solid #cbd5e1; border-radius: 5px; color: #475569; cursor: pointer; font-size: .68rem; height: 29px; padding: 0 8px; width: auto; }.preview-tools button:hover { border-color: var(--accent); color: var(--accent); }.preview-tools select { padding: 0 5px; }.preview-tools #zoom-value { color: #64748b; font-size: .65rem; min-width: 35px; text-align: center; }.preview-tools .quick-export { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; margin-left: 5px; }.page-limit-indicator { color: #7b8794; font-size: .61rem; margin: 0 auto 12px; max-width: 210mm; text-align: center; }.page-limit-indicator span { border-top: 1px dashed #94a3b8; display: block; margin-bottom: 5px; }
.job-matcher { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 38px auto 0; max-width: 1280px; padding: 32px; }.matcher-heading { align-items: center; display: flex; gap: 30px; justify-content: space-between; }.matcher-heading h2 { font-size: 1.65rem; letter-spacing: -.05em; margin: 0; }.matcher-heading p:not(.section-kicker) { color: var(--muted); font-size: .78rem; line-height: 1.5; margin: 8px 0 0; max-width: 580px; }.matcher-score { align-items: center; background: conic-gradient(var(--accent) calc(var(--score) * 1%), #e2e8f0 0); border-radius: 50%; display: flex; flex-direction: column; height: 112px; justify-content: center; min-width: 112px; position: relative; text-align: center; }.matcher-score::before { background: #fff; border-radius: 50%; content: ''; inset: 8px; position: absolute; }.matcher-score strong,.matcher-score span { position: relative; z-index: 1; }.matcher-score strong { font-size: 1.45rem; }.matcher-score span { color: var(--muted); font-size: .55rem; max-width: 60px; }.matcher-grid { display: grid; gap: 20px; grid-template-columns: minmax(280px, .85fr) minmax(350px, 1.15fr); margin-top: 28px; }.job-description-field > span { color: var(--muted); display: block; font-size: .78rem; font-weight: 650; margin-bottom: 7px; }.job-description-field textarea { min-height: 180px; }.keyword-results { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }.keyword-card { border: 1px solid var(--line); border-radius: 8px; min-height: 180px; padding: 16px; }.keyword-card.found { border-color: #a7d8bb; background: #f7fdf9; }.keyword-card h3 { font-size: .75rem; margin: 0 0 13px; }.keyword-card h3 span { background: #e2e8f0; border-radius: 10px; color: var(--muted); font-size: .62rem; margin-left: 5px; padding: 2px 6px; }.keyword-card.found h3 span { background: #d1fae5; color: #166534; }.keyword-list { display: flex; flex-wrap: wrap; gap: 7px; }.keyword-chip { background: #e2f0e8; border-radius: 14px; color: #166534; font-size: .65rem; padding: 6px 9px; }.keyword-card.missing .keyword-chip { background: #f8fafc; border: 1px solid var(--line); color: #475569; }.keyword-empty { color: var(--muted); font-size: .68rem; line-height: 1.4; }
@media (max-width: 1000px) { .landing-hero { grid-template-columns: 1fr; padding-bottom: 25px; }.hero-copy { max-width: 680px; }.hero-visual { max-width: 760px; }.job-matcher { margin-left: 20px; margin-right: 20px; }.matcher-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .landing-hero { gap: 24px; min-height: 0; padding: 38px 18px 24px; }.hero-copy h1 { font-size: clamp(2.7rem, 12vw, 4rem); }.hero-copy > p:not(.hero-eyebrow) { font-size: .88rem; }.hero-actions { align-items: stretch; flex-direction: column; gap: 14px; }.hero-cta,.hero-secondary { text-align: center; }.hero-privacy { margin-top: 25px; }.preview-tools { flex-wrap: wrap; }.page-limit-indicator { margin-left: 10px; margin-right: 10px; }.job-matcher { border-radius: 10px; margin: 25px 12px 0; padding: 20px 15px; }.matcher-heading { align-items: flex-start; flex-direction: column; }.matcher-heading h2 { font-size: 1.35rem; }.matcher-score { align-self: center; }.keyword-results { grid-template-columns: 1fr; } }
@media print { .landing-hero, .job-matcher { display: none !important; } }

.matcher-example { margin: 24px 0 0; position: relative; }.matcher-example img { border: 1px solid var(--line); border-radius: 8px; display: block; height: 145px; object-fit: cover; object-position: center 39%; opacity: .86; width: 100%; }.matcher-example figcaption { background: rgba(255,255,255,.9); bottom: 8px; color: var(--muted); font-size: .62rem; left: 8px; padding: 5px 8px; position: absolute; }
@media (max-width: 620px) { .matcher-example img { height: 110px; } }

/* Final visual alignment with the supplied editor reference. */
:root { --accent: #16a34a; --accent-dark: #15803d; --canvas: #f8fafc; --surface: #fff; --line: #e2e8f0; --ink: #0f172a; --muted: #64748b; }
.topbar { height: 60px; padding: 0 20px; }
.topbar-inner { max-width: 1440px; }
.topnav { gap: 20px; }.topnav a { font-size: .9rem; font-weight: 500; }.privacy-note { font-size: .8rem; padding: 4px 10px; }.header-cta { font-size: .9rem; padding: 8px 16px; }
.workspace { align-items: start; gap: 28px; grid-template-columns: 1fr 1fr; height: auto; margin: 0 auto; max-width: 1440px; padding: 24px 20px; }
.form-card { border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 20px; height: auto; max-width: none; overflow: visible; padding: 24px; }
.mode-switch { border-bottom: 1px solid var(--line); gap: 8px; margin: 0; padding: 0 0 12px; }.mode-tab { border: 0; border-radius: 4px; color: var(--muted); font-size: .9rem; padding: 6px 12px; }.mode-tab.active { background: #f1f5f9; border: 0; color: var(--ink); }
.source-panel { background: #fafafa; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px; }.source-copy { align-items: flex-start; flex-direction: row; gap: 12px; text-align: left; }.source-icon { background: #0077b5; border-radius: 4px; color: #fff; font-size: .8rem; font-weight: 700; height: auto; padding: 2px 6px; width: auto; }.source-copy strong { font-size: .95rem; }.source-copy small { font-size: .8rem; }.source-actions { gap: 10px; justify-content: flex-start; margin: 0; }.source-upload,.blank-button { font-size: .85rem; padding: 8px 14px; }
.field-grid { gap: 14px; }.field { font-size: .85rem; gap: 4px; }.field span,.control-field span,.experience-fields label > span { font-size: .85rem; font-weight: 500; }.field input,.field textarea,.control-field select { font-size: .9rem; padding: 8px 12px; }
.builder-section,.appearance-section { border-top: 0; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }.builder-heading { align-items: center; }.builder-heading > div > span { font-size: .95rem; }.builder-heading small { display: none; }.add-button { border: 1px solid var(--line); font-size: .85rem; padding: 6px 12px; width: auto; }.experience-card { background: #fafafa; border-radius: 6px; margin-bottom: 12px; padding: 14px; }.experience-card-header { margin-bottom: 10px; }.remove-experience { color: #dc2626; font-size: .8rem; }.experience-fields { gap: 10px; }.appearance-controls { gap: 12px; }
.preview-panel { align-items: center; background: transparent; border: 0; display: flex; height: auto; min-height: 0; overflow: visible; padding: 0; position: sticky; top: 80px; }.preview-toolbar { font-size: .85rem; margin-bottom: 10px; max-width: 210mm; width: 100%; }.preview-tools { gap: 8px; }.preview-tools button,.preview-tools select { padding: 4px 8px; }.quick-export { margin-left: 6px; }.page-limit-indicator { border-top: 1px dashed #cbd5e1; font-size: .75rem; margin-bottom: 6px; max-width: 210mm; padding-top: 4px; text-align: right; width: 100%; }.resume-preview,.letter-preview { border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.06); font-size: 9.5pt; max-width: none; min-height: 297mm; padding: 18mm 20mm; transform-origin: top center; width: 210mm; }.resume-header { border-bottom: 1.5px solid #111827; margin-bottom: 14px; padding-bottom: 8px; }.resume-header h2 { font-size: 1.6rem; letter-spacing: -.5px; }.resume-header p { color: #374151; font-size: 1rem; }.contact-line { color: #4b5563; font-size: .85rem; gap: 10px; margin-top: 4px; }.resume-section { border: 0; margin-top: 14px; padding: 0; }.resume-section h3 { border-bottom: 1px solid #e5e7eb; color: #111827; font-size: .95rem; letter-spacing: .5px; margin-bottom: 6px; padding-bottom: 2px; }.resume-entry { margin-bottom: 10px; }.entry-title { font-size: .92rem; }.entry-meta { font-size: .8rem; }.resume-entry ul { margin-top: 4px; }.resume-entry li { margin-bottom: 3px; }
.landing-hero { max-width: 1440px; margin: 0 auto; }
@media (max-width: 992px) { .workspace { grid-template-columns: 1fr; padding: 24px 20px; }.form-card { height: auto; }.preview-panel { position: static; }.resume-preview,.letter-preview { max-width: 100%; width: 100%; } }
@media (max-width: 600px) { .workspace { padding: 16px 12px; }.form-card { padding: 18px 14px; }.source-copy { flex-direction: row; }.source-actions { align-items: stretch; flex-direction: column; }.source-upload,.blank-button { justify-content: center; text-align: center; }.preview-toolbar { align-items: flex-start; flex-direction: column; }.preview-tools { width: 100%; }.preview-tools .quick-export { margin-left: auto; }.resume-preview,.letter-preview { min-height: auto; padding: 14mm 12mm; }.job-matcher { margin-top: 10px; padding: 28px 12px; }.matcher-grid { grid-template-columns: 1fr; }.keyword-results { grid-template-columns: 1fr; } }
@media print { .preview-panel { position: static; } }

/* Resume customization controls. */
.resume-preview.photo-left .resume-photo { float: left; margin: 0 18px 10px 0; }
.resume-preview.photo-top .resume-header { text-align: center; }
.resume-preview.photo-top .resume-photo { display: block; float: none; margin: 0 auto 12px; }
.resume-preview.photo-top .contact-line { justify-content: center; }
.resume-preview.photo-hidden .resume-photo { display: none; }
.resume-preview.spacing-compact { --section-gap: 10px; }
.resume-preview.spacing-comfortable { --section-gap: 18px; }
.resume-preview.spacing-spacious { --section-gap: 28px; }
.resume-preview[class*="spacing-"] .resume-section { margin-top: var(--section-gap); }
.resume-preview.section-bold .resume-section h3 { border-bottom: 2px solid var(--accent); }
.resume-preview.section-none .resume-section { border-bottom: 0; }
.resume-preview.section-none .resume-section h3 { border-bottom: 0; }

/* Keep the A4 paper behind every rendered section. The preview is allowed to
   grow naturally when the imported/manual content needs more than one page. */
.resume-preview {
  align-self: center;
  display: flow-root;
  flex: 0 0 auto;
  height: max-content !important;
  max-height: none !important;
  min-height: 297mm;
  min-width: 0;
  overflow: visible !important;
  overflow-wrap: anywhere;
  background: #fff;
}

.resume-preview * { max-width: 100%; overflow-wrap: anywhere; }
.resume-preview { position: relative; }
.preview-paywall-blur { background: linear-gradient(to bottom, rgba(255,255,255,.04) 0%, rgba(255,255,255,.1) 12%, rgba(255,255,255,.2) 28%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.5) 68%, rgba(255,255,255,.66) 84%, rgba(255,255,255,.78) 100%); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); bottom: 0; height: auto; left: 0; min-height: 520px; pointer-events: none; position: absolute; right: 0; top: 430px; z-index: 2; }
.preview-paywall-cta { align-items: center; background: rgba(255,255,255,.92); border: 1px solid #c9e7e1; border-radius: 10px; bottom: 54px; display: flex; flex-direction: column; gap: 4px; left: 50%; padding: 16px 22px; position: absolute; text-align: center; transform: translateX(-50%); width: min(350px, calc(100% - 40px)); z-index: 3; }.preview-paywall-cta strong { font-size: .82rem; }.preview-paywall-cta span { color: var(--muted); font-size: .68rem; }.preview-paywall-cta .primary-button { font-size: .74rem; margin-top: 7px; padding: 10px 15px; }

.resume-preview > :last-child { margin-bottom: 0; }
.footer-legal { display: flex; gap: 14px; }.footer-legal a { color: inherit; text-decoration: none; }.footer-legal a:hover { color: var(--accent); }
.site-footer { display: block; }
@media print { .site-footer { display: none !important; } }
.account-button { background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); cursor: pointer; font-size: .72rem; font-weight: 700; padding: 9px 12px; }.account-button:hover { border-color: var(--accent); color: var(--accent); }
.auth-dialog { background: transparent; border: 0; max-width: 430px; padding: 0; width: calc(100% - 28px); }.auth-dialog::backdrop { background: rgba(15,23,42,.38); }.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 70px rgba(15,23,42,.2); padding: 28px; position: relative; }.auth-card h2 { font-size: 1.45rem; margin: 0; }.auth-copy { color: var(--muted); font-size: .75rem; line-height: 1.5; margin: 7px 0 20px; }.auth-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1.4rem; position: absolute; right: 14px; top: 10px; }.auth-submit { width: 100%; }.auth-toggle { background: transparent; border: 0; color: var(--accent); cursor: pointer; display: block; font-size: .72rem; margin: 14px auto 0; }.auth-status { color: var(--muted); font-size: .72rem; min-height: 18px; }
.auth-logout { background: transparent; border: 1px solid #fecaca; border-radius: 7px; color: #b91c1c; cursor: pointer; display: block; font-size: .72rem; margin: 14px auto 0; padding: 8px 12px; }
.export-dialog { background: transparent; border: 0; max-width: 760px; padding: 0; width: calc(100% - 28px); }.export-dialog::backdrop { background: rgba(15,23,42,.42); }.export-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 70px rgba(15,23,42,.2); padding: 28px; position: relative; }.export-card h2 { font-size: 1.45rem; margin: 0; }.export-checks { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 15px 0 20px; padding: 0; }.export-checks:empty { display: none; }.export-checks .quality-check { padding: 6px 8px; }.export-checks .quality-check strong { font-size: .62rem; }.export-checks .quality-check small { display: none; }.export-options { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }.export-option { border: 1px solid var(--line); border-radius: 9px; padding: 17px; }.export-option-featured { border-color: #9ed2c8; background: #f7fdf9; }.export-option-label { color: var(--accent); font-size: .62rem; font-weight: 800; text-transform: uppercase; }.export-option h3 { font-size: 1rem; margin: 6px 0; }.export-option > strong { font-size: 1.25rem; }.export-option p { color: var(--muted); font-size: .7rem; line-height: 1.45; min-height: 32px; }.export-option .primary-button { width: 100%; }.export-option .field { margin-top: 14px; }.export-option .field span { font-size: .62rem; }.export-option .field input { font-size: .75rem; padding: 8px; }.export-dialog .auth-status { margin-top: 15px; }.export-dialog .auth-toggle { margin-top: 11px; }
.export-now { margin-top: 4px; width: 100%; }.export-deferred { color: var(--muted); font-size: .68rem; margin: 10px 0 0; text-align: center; }
.checkout-help { color: var(--muted); display: block; font-size: .62rem; line-height: 1.35; margin-top: 6px; }
@media (max-width: 600px) { .export-options { grid-template-columns: 1fr; }.export-card { padding: 22px 16px; } }
@media print { .export-dialog { display: none !important; } }
#print-blocked-message { display: none; }
@media print {
  body[data-print-blocked="true"] #resume-preview,
  body[data-print-blocked="true"] #letter-preview { display: none !important; }
  .preview-paywall-blur, .preview-paywall-cta { display: none !important; }
  body[data-print-blocked="true"] #print-blocked-message { background: #fff; color: #0f172a; display: block !important; font: 16pt/1.5 Inter, Arial, sans-serif; padding: 30mm; visibility: visible !important; }
}
@media (max-width: 600px) { .account-button { font-size: 0; padding: 9px 10px; }.account-button::before { content: '↪'; font-size: .9rem; } }

.quality-panel { border: 1px solid var(--line); border-radius: 10px; background: #fbfdfd; padding: 16px; }
.quality-heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.quality-heading .section-kicker { margin-bottom: 6px; }.quality-heading h3 { font-size: .98rem; margin: 0; }.quality-heading p:not(.section-kicker) { color: var(--muted); font-size: .68rem; line-height: 1.4; margin: 5px 0 0; max-width: 350px; }
.quality-score { align-items: center; background: #f1f5f9; border-radius: 999px; color: #64748b; display: flex; font-size: .82rem; height: 48px; justify-content: center; min-width: 48px; }.quality-score.is-ready { background: #dcfce7; color: #15803d; }
.quality-checks { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; list-style: none; margin: 16px 0 0; padding: 0; }.quality-check { align-items: flex-start; background: #fff; border: 1px solid #e5e7eb; border-radius: 7px; display: flex; gap: 8px; padding: 8px; }.quality-icon { color: #94a3b8; font-size: .78rem; font-weight: 800; line-height: 1.3; }.quality-check.is-complete .quality-icon { color: #16a34a; }.quality-check strong,.quality-check small { display: block; }.quality-check strong { font-size: .67rem; }.quality-check small { color: var(--muted); font-size: .59rem; line-height: 1.35; margin-top: 2px; }
@media (max-width: 600px) { .quality-checks { grid-template-columns: 1fr; } }
@media print { .quality-panel { display: none !important; } }

/* Final generator layout correction: keep the two columns balanced. */
.workspace { gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(100vh - 64px); margin: 0; max-width: none; padding: 0; }
.workspace > * { min-width: 0; }
.form-card { border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; display: block; height: 100%; max-width: none; overflow-y: auto; padding: 32px; }
.preview-panel { align-items: center; background: var(--preview-bg); border: 0; border-radius: 0; display: flex; flex-direction: column; height: calc(100vh - 64px); min-height: 0; min-width: 0; overflow-y: auto; padding: 18px; position: sticky; top: 64px; }
.preview-toolbar { margin: 0 auto; max-width: 100%; padding: 1px 3px 15px; width: 100%; }.page-limit-indicator { max-width: 100%; width: 100%; }.resume-preview,.letter-preview { border: 0; box-shadow: var(--shadow); max-width: 100%; min-height: 850px; padding: 45px 48px; width: 100%; }
@media (max-width: 992px) { .workspace { height: auto; grid-template-columns: 1fr; overflow: visible; padding: 24px 20px 60px; }.form-card,.preview-panel { height: auto; overflow: visible; }.form-card { border-right: 0; }.preview-panel { position: static; }.resume-preview,.letter-preview { max-width: 700px; min-height: auto; } }
@media (max-width: 600px) { .workspace { padding: 16px 12px 40px; }.form-card { padding: 18px 14px; }.preview-panel { padding: 10px; }.resume-preview,.letter-preview { padding: 30px 23px; width: 100%; } }
@media print { .preview-panel { position: static; } }
@media print {
  html, body { background: #fff; height: auto; margin: 0; overflow: visible; }
  body * { visibility: hidden; }
  #resume-preview, #resume-preview * { visibility: visible; }
  .layout, .workspace, .preview-panel { display: block; height: auto; margin: 0; max-width: none; overflow: visible; padding: 0; }
  #resume-preview { background: #fff; box-shadow: none; display: block; height: auto; left: auto; margin: 0; max-width: none; min-height: 297mm; overflow: visible; padding: 18mm 20mm; position: relative; top: auto; transform: none !important; width: 210mm; zoom: 1 !important; }
  .topbar, .landing-hero, .intro, .form-card, .preview-toolbar, .page-limit-indicator, .site-footer, .letter-preview { display: none !important; }
  .resume-section, .resume-entry { break-inside: avoid; page-break-inside: avoid; }
}
@media print {
  html, body { background: #fff; height: auto; margin: 0; overflow: visible; }
  body * { visibility: hidden; }
  #resume-preview, #resume-preview * { visibility: visible; }
  #resume-preview { background: #fff; box-shadow: none; display: block; height: auto; left: 0; margin: 0; max-width: none; min-height: 297mm; overflow: visible; padding: 18mm 20mm; position: absolute; top: 0; transform: none !important; width: 210mm; zoom: 1 !important; }
  .preview-panel { background: #fff; display: block; height: auto; overflow: visible; padding: 0; position: static; }
  .topbar, .landing-hero, .intro, .form-card, .preview-toolbar, .page-limit-indicator, .site-footer, .letter-preview { display: none !important; }
  .resume-section, .resume-entry { break-inside: avoid; page-break-inside: avoid; }
}
.landing-hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; min-height: calc(100vh - 60px); width: 100vw; }
@media (max-width: 600px) { .landing-hero { min-height: calc(100vh - 58px); } }

@media (max-width: 600px) {
  .landing-hero {
    background-image: linear-gradient(180deg, rgba(248,250,252,.99) 0%, rgba(248,250,252,.96) 38%, rgba(248,250,252,.78) 62%, rgba(248,250,252,.42) 82%, rgba(248,250,252,.2) 100%), url('/assets/images/ap-ats-sm.jpg');
    background-position: 68% center;
    background-size: cover;
  }
}
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; height: auto !important; margin: 0 !important; overflow: visible !important; }
  body * { visibility: hidden !important; }
  .layout, .workspace, .preview-panel { display: block !important; height: auto !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; visibility: visible !important; }
  .topbar, .landing-hero, .intro, .form-card, .preview-toolbar, .page-limit-indicator, .site-footer, #resume-preview[hidden], #letter-preview[hidden] { display: none !important; }
  #resume-preview, #letter-preview { background: #fff !important; box-shadow: none !important; height: auto !important; left: auto !important; margin: 0 !important; max-width: none !important; min-height: 297mm !important; overflow: visible !important; padding: 18mm 20mm !important; position: static !important; transform: none !important; width: 210mm !important; zoom: 1 !important; }
  body[data-print-mode="resume"] #resume-preview { display: flow-root !important; visibility: visible !important; }
  body[data-print-mode="resume"] #resume-preview * { visibility: visible !important; }
  body[data-print-mode="letter"] #letter-preview { display: flow-root !important; visibility: visible !important; }
  body[data-print-mode="letter"] #letter-preview * { visibility: visible !important; }
  body[data-print-mode="resume"] #letter-preview,
  body[data-print-mode="letter"] #resume-preview { display: none !important; }
}

/*
 * Print/export contract.
 * Keep one continuous paper for the active document. The browser is
 * responsible for splitting that paper into A4 sheets; forcing every section
 * to stay together creates large white gaps before the next page.
 */
.resume-preview,
.letter-preview {
  align-self: center;
  display: flow-root;
  height: auto !important;
  max-height: none !important;
  min-height: 297mm;
  overflow: visible !important;
}

@media print {
  .resume-section,
  .letter-preview-header,
  .letter-signature {
    break-inside: auto;
    page-break-inside: auto;
  }

  .resume-entry {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .resume-section h3,
  .letter-preview-label {
    break-after: avoid;
    page-break-after: avoid;
  }
}