body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.step-panel{display:block}
.step-panel.hidden{display:none}
.rounded-md{border-radius:.375rem}
.btn-press{transition:none}
.mx-2{margin-left:.5rem;margin-right:.5rem}
.field{width:100%;background:#020617;border:1px solid #334155;border-radius:8px;padding:12px;color:#e2e8f0;font-size:13px}
.field:focus{outline:2px solid #8b5cf6;border-color:transparent}
.tag-matched{background:rgba(16,185,129,.1);color:#34d399;border:1px solid rgba(16,185,129,.25)}
.tag-missing{background:rgba(244,63,94,.08);color:#fb7185;border:1px solid rgba(244,63,94,.2)}
#drop-zone:focus-within{outline:2px solid #a78bfa}
#template-picker select{background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:4px 8px;margin-left:6px;max-width:260px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Resume preview. Template variables come from resume-templates/selector.js */
/* #resume-page-scale wraps #resume-page and is used by app.js to shrink the whole
   page down to fit narrow/phone screens without reflowing the resume's own layout. */
#resume-page-scale{overflow:hidden}
#resume-page{background:#fff;color:#1a1a1a;font-family:var(--cv-font,Calibri,Arial,sans-serif);line-height:calc(var(--cv-line-height,1.45) * var(--cv-lh,1));zoom:var(--cv-fit,1);max-width:700px;margin:0 auto;padding:36px 40px;border-radius:6px}
#resume-page .cv-name{font-size:24px;font-weight:700;color:var(--cv-accent,#1d4ed8);text-align:var(--cv-name-align,left);margin-bottom:3px}
#resume-page .cv-nw{white-space:nowrap}

/* Templates with icons: contact row, one icon per item (vector SVG, no text for ATS parsers) */
#resume-page .cv-contact-icons{display:flex;flex-wrap:wrap;gap:3px 14px;text-align:left;color:#444}
#resume-page .cv-ci{display:inline-flex;align-items:center;gap:5px}
#resume-page .cv-icon{width:11px;height:11px;flex:none;color:var(--cv-accent,#1d4ed8)}
#resume-page .cv-tagline{font-size:12px;color:#333;margin:0 0 4px;text-align:var(--cv-name-align,left)}

/* Two-column templates: main column comes first in the document (text order for ATS parsers); CSS grid puts the
   shaded sidebar on the chosen side. */
#resume-page .cv-cols{display:grid;grid-template-columns:minmax(0,1fr) 31%;column-gap:20px;align-items:start;margin-top:4px}
#resume-page .cv-cols .cv-main{grid-column:1;grid-row:1;min-width:0}
#resume-page .cv-cols .cv-side{grid-column:2;grid-row:1;min-width:0}
#resume-page .cv-cols.cv-side-left{grid-template-columns:31% minmax(0,1fr)}
#resume-page .cv-cols.cv-side-left .cv-main{grid-column:2}
#resume-page .cv-cols.cv-side-left .cv-side{grid-column:1}
#resume-page .cv-side{background:var(--cv-side-bg,#f1f5f9);padding:2px 12px 12px;border-radius:6px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
#resume-page .cv-side .cv-section:first-child{margin-top:8px}
#resume-page .cv-side .cv-section-title{font-size:11.5px}
#resume-page .cv-side .cv-block-header-row{flex-direction:column;align-items:flex-start;gap:0}
#resume-page .cv-side .cv-block-date{white-space:normal}
#resume-page .cv-side .cv-skills-line{overflow-wrap:anywhere}
#resume-page .cv-block-sub-title{font-style:italic;font-weight:400}
#resume-page .cv-block-sub{font-style:italic;font-size:.95em;margin:0 0 3px}
#resume-page .cv-contact{font-size:11px;color:#555;text-align:var(--cv-name-align,left);margin-bottom:calc(14px * var(--cv-gap,1))}
#resume-page .cv-section{margin-top:calc(14px * var(--cv-gap,1))}
#resume-page .cv-section-title{font-size:12.5px;font-weight:700;letter-spacing:.7px;text-transform:var(--cv-heading-transform,uppercase);border-bottom:var(--cv-heading-rule,1.5px solid #1a1a1a);padding-bottom:2px;margin-bottom:calc(6px * var(--cv-gap,1))}
#resume-page .cv-block-header-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:calc(8px * var(--cv-gap,1))}
#resume-page .cv-block-title{font-size:12.5px;font-weight:700}
#resume-page .cv-block-date{font-size:11px;font-style:italic;color:#555;white-space:nowrap}
#resume-page .cv-block-date-only{font-size:11px;font-style:italic;color:#555;margin:2px 0 4px}
#resume-page ul.cv-bullets{margin:calc(2px * var(--cv-gap,1)) 0 calc(4px * var(--cv-gap,1));padding-left:18px;list-style-type:var(--cv-bullet,disc)}
#resume-page li,#resume-page p{font-size:var(--cv-base-px,11.5px);margin:calc(2px * var(--cv-gap,1)) 0;orphans:2;widows:2}
mark.kw-hit{background:#fef08a;color:#1a1a1a;padding:0 1px;border-radius:2px}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important;margin:0!important}
  html>*:not(body){display:none!important}
  body>*{display:none!important}
  body>#resume-page-scale{display:block!important;overflow:visible!important;height:auto!important}
  #resume-page{max-width:none!important;width:auto!important;transform:none!important;margin:0!important;border-radius:0;padding:calc(10mm / var(--cv-fit,1)) calc(12mm / var(--cv-fit,1))!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  /* a whole section may flow onto the next page; single entries, bullet lists and sidebar sections stay in one piece */
  #resume-page .cv-block,#resume-page ul.cv-bullets,#resume-page .cv-block-header-row,#resume-page .cv-side .cv-section{break-inside:avoid;page-break-inside:avoid}
  #resume-page .cv-section-title,#resume-page .cv-block-header-row,#resume-page .cv-block-sub,#resume-page .cv-block-date-only{break-after:avoid;page-break-after:avoid}
  mark.kw-hit{background:none;padding:0}
}

/* ===== Wizard redesign additions (index.html restructure only - nothing above this line changed) ===== */
html{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.side-nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;border-radius:.75rem;color:#94a3b8;font-size:.875rem;transition:background-color .15s,color .15s}
.side-nav-item:hover{background:#1e293b;color:#c4b5fd}
.side-nav-item.is-active{background:rgba(139,92,246,.16);color:#e9d5ff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.35)}
.side-nav-sub{display:block;font-size:.7rem;color:#64748b}
.side-nav-item.is-active .side-nav-sub{color:#c4b5fd}

.feature-dot{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:9999px;background:rgba(139,92,246,.12);color:#a78bfa;flex-shrink:0}

.wizard-track{position:absolute;top:1.125rem;left:1.125rem;right:1.125rem;height:2px;background:#334155}
.wizard-dot{display:flex;flex-direction:column;align-items:center;gap:.4rem;background:none;border:none;cursor:pointer;flex:1;min-width:0;padding:0}
.wizard-dot-num{width:2.25rem;height:2.25rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;background:#1e293b;border:2px solid #334155;color:#94a3b8;transition:background-color .15s,border-color .15s,color .15s}
.wizard-dot-label{font-size:.68rem;text-align:center;line-height:1.15;color:#64748b;padding:0 2px}
.wizard-dot.is-active .wizard-dot-num{background:#7c3aed;border-color:#7c3aed;color:#fff;box-shadow:0 0 0 4px rgba(124,58,237,.25)}
.wizard-dot.is-active .wizard-dot-label{color:#e2e8f0;font-weight:600}
.wizard-dot.is-done .wizard-dot-num{background:#4c1d95;border-color:#8b5cf6;color:#ddd6fe}
.wizard-dot.is-skipped{opacity:.35}
.wizard-dot:disabled{cursor:not-allowed}

.mode-card{position:relative;background:#0f172a;border:1px solid #334155;border-radius:.9rem;padding:1.5rem;transition:border-color .15s;min-height:100%}
.mode-card:hover{border-color:#8b5cf6}
.mode-card--accent{border-color:rgba(139,92,246,.5);box-shadow:0 0 0 1px rgba(139,92,246,.2)}
.mode-badge{position:absolute;top:1.25rem;right:1.25rem;font-size:.65rem;font-weight:700;background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.3);padding:.2rem .55rem;border-radius:9999px}
.mode-icon{width:2.75rem;height:2.75rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;background:#1e293b;color:#94a3b8}
.mode-icon--accent{background:rgba(139,92,246,.15);color:#a78bfa}

.step-nav-btn{font-weight:600;font-size:.875rem;padding:.6rem 1.25rem;border-radius:.75rem;background:#1e293b;border:1px solid #334155;color:#e2e8f0}
.step-nav-btn:hover{background:#334155}
.step-nav-btn--primary{background:#7c3aed;border-color:transparent}
.step-nav-btn--primary:hover{filter:brightness(1.08)}

/* Cover letter page + print/PDF */
#cover-letter-print-page{display:none;background:#fff;color:#1a1a1a;max-width:760px;margin:0 auto;padding:42px 48px;min-height:980px;font-family:"Times New Roman",Times,serif;font-size:12pt;line-height:1.55}
#cover-letter-print-page .cover-letter-header{text-align:center;border-bottom:1px solid #b7b7b7;padding-bottom:10px;margin-bottom:16px}
#cover-letter-print-page .cover-letter-name{font-family:"Times New Roman",Times,serif;font-size:17pt;font-weight:700;line-height:1.1}
#cover-letter-print-page .cover-letter-role{font-family:Calibri,Arial,sans-serif;color:#2563eb;font-size:10pt;font-weight:700;line-height:1.25;margin-top:2px}
#cover-letter-print-page .cover-letter-contact{font-family:Calibri,Arial,sans-serif;color:#4b5563;font-size:8.5pt;line-height:1.35;margin-top:6px}
#cover-letter-print-page p{margin:0 0 15px;white-space:pre-wrap}
#cover-letter-print-page .cover-letter-subject{font-weight:700;margin-bottom:20px}
#cover-letter-print-page .cover-letter-greeting{margin-bottom:17px}
body.print-cover-letter > *:not(#cover-letter-print-page){display:none!important}
body.print-cover-letter #cover-letter-print-page{display:block!important}
body.print-cover-letter{background:#fff!important}
@media print{
  body.print-cover-letter #cover-letter-print-page{display:block!important;max-width:none!important;width:auto!important;margin:0!important;padding:16mm 18mm!important;min-height:0!important;background:#fff!important;color:#111!important}
  body.print-cover-letter #cover-letter-print-page p{font-size:11.5pt;line-height:1.55;margin:0 0 12pt}
  body.print-cover-letter #cover-letter-print-page .cover-letter-name{font-size:16pt}
  body.print-cover-letter #cover-letter-print-page .cover-letter-role{font-size:9.5pt}
  body.print-cover-letter #cover-letter-print-page .cover-letter-contact{font-size:8.5pt}
}

.template-picker-card #template-select{margin-left:0;margin-top:8px;min-width:280px;padding:9px 12px;font-size:.875rem}