/* ═══════════════════════════════════════════
   SMART RESUME BUILDER PRO — Main Styles
═══════════════════════════════════════════ */
:root {
  --srb-primary:   #1a2744;
  --srb-accent:    #c9a84c;
  --srb-accent2:   #e8c97a;
  --srb-bg:        #f4f6f9;
  --srb-surface:   #ffffff;
  --srb-border:    #e2e8f0;
  --srb-text:      #1e293b;
  --srb-muted:     #64748b;
  --srb-success:   #059669;
  --srb-radius:    12px;
  --srb-shadow:    0 4px 24px rgba(26,39,68,.10);
  --srb-shadow-lg: 0 12px 48px rgba(26,39,68,.16);

  /* Template colors */
  --tpl-exec-sidebar: #1a2744;
  --tpl-modern-head:  #2d6a4f;
  --tpl-minimal-bar:  #111827;
  --tpl-creative-acc: #e63946;
  --tpl-corp-band:    #14304d;
  --tpl-info-dark:    #0f172a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── WRAPPER ── */
.srb-wrap {
  font-family: 'Inter', sans-serif;
  color: var(--srb-text);
  background: var(--srb-bg);
  min-height: 100vh;
  padding: 32px 16px;
}

/* ── STEPS ── */
.srb-step { display: none; animation: srbFadeIn .35s ease; }
.srb-step.active { display: block; }
@keyframes srbFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.srb-step-header {
  text-align: center;
  margin-bottom: 36px;
}
.srb-badge {
  display: inline-block;
  background: var(--srb-primary);
  color: var(--srb-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.srb-step-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--srb-primary);
  margin-bottom: 8px;
}
.srb-step-header p { color: var(--srb-muted); font-size: .95rem; }

/* ── TEMPLATE GRID ── */
.srb-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 36px;
}

.srb-tpl-card {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--srb-border);
  border-radius: var(--srb-radius);
  background: var(--srb-surface);
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.srb-tpl-card:hover {
  border-color: var(--srb-accent);
  transform: translateY(-3px);
  box-shadow: var(--srb-shadow-lg);
}
.srb-tpl-card input[type=radio] { display: none; }
.srb-tpl-card:has(input:checked) {
  border-color: var(--srb-accent);
  box-shadow: 0 0 0 3px rgba(201,168,76,.25), var(--srb-shadow);
}
.srb-tpl-check {
  display: none;
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  background: var(--srb-accent);
  color: var(--srb-primary);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}
.srb-tpl-card:has(input:checked) .srb-tpl-check { display: flex; }

/* Template Thumbnails */
.srb-tpl-thumb {
  height: 140px;
  position: relative;
  overflow: hidden;
}

/* Executive */
.tpl-executive {
  background: #f8f9fb;
  display: flex;
}
.tpl-executive .tpl-thumb-sidebar {
  width: 38%;
  background: var(--tpl-exec-sidebar);
}
.tpl-executive .tpl-thumb-content {
  padding: 12px;
  flex: 1;
}
.tpl-executive .tpl-thumb-name {
  height: 8px; background: #1a2744; border-radius: 3px; width: 70%; margin-bottom: 5px;
}
.tpl-executive .tpl-thumb-title {
  height: 5px; background: #c9a84c; border-radius: 2px; width: 50%; margin-bottom: 10px;
}
.tpl-executive .tpl-thumb-lines span {
  display: block; height: 4px; background: #e2e8f0; border-radius: 2px; margin: 6px 0; width: 90%;
}
.tpl-executive .tpl-thumb-lines span:last-child { width: 60%; }

/* Modern */
.tpl-modern { background: #fff; }
.tpl-thumb-header { height: 40px; background: var(--tpl-modern-head); }
.tpl-thumb-body { display: flex; padding: 10px; gap: 8px; }
.tpl-thumb-col1 { width: 35%; }
.tpl-thumb-col1 div { height: 5px; background: #e2e8f0; margin: 5px 0; border-radius: 2px; }
.tpl-thumb-col2 { flex: 1; }
.tpl-thumb-col2 span { display: block; height: 4px; background: #e2e8f0; margin: 6px 0; border-radius: 2px; width: 90%; }
.tpl-thumb-col2 span:last-child { width: 60%; }

/* Minimal */
.tpl-minimal { background: #fff; padding: 14px; }
.tpl-thumb-bar { height: 4px; background: var(--tpl-minimal-bar); margin-bottom: 12px; }
.tpl-thumb-mono span { display: block; height: 5px; background: #1a1a1a; border-radius: 1px; margin: 8px 0; }
.tpl-thumb-mono span:first-child { width: 55%; }
.tpl-thumb-mono span:nth-child(2) { width: 40%; background: #999; }
.tpl-thumb-mono span:nth-child(3) { width: 80%; background: #e2e8f0; }
.tpl-thumb-mono span:last-child { width: 65%; background: #e2e8f0; }

/* Creative */
.tpl-creative { background: #fff; }
.tpl-thumb-accent { height: 8px; background: var(--tpl-creative-acc); }
.tpl-thumb-creative-body { padding: 12px; }
.tpl-thumb-creative-body div {
  height: 6px; border-radius: 2px; margin: 8px 0;
  background: linear-gradient(90deg, var(--tpl-creative-acc) 30%, #e2e8f0 30%);
}
.tpl-thumb-creative-body div:nth-child(2) { background: linear-gradient(90deg, var(--tpl-creative-acc) 55%, #e2e8f0 55%); }
.tpl-thumb-creative-body div:last-child { background: linear-gradient(90deg, var(--tpl-creative-acc) 75%, #e2e8f0 75%); }

/* Corporate */
.tpl-corporate { background: #f8f9fb; }
.tpl-thumb-top-band { height: 50px; background: var(--tpl-corp-band); }
.tpl-thumb-corp-body { padding: 12px; }
.tpl-thumb-corp-body span { display: block; height: 5px; background: #e2e8f0; margin: 8px 0; border-radius: 2px; }
.tpl-thumb-corp-body span:first-child { width: 80%; }
.tpl-thumb-corp-body span:nth-child(2) { width: 60%; }
.tpl-thumb-corp-body span:last-child { width: 90%; }

/* Infographic */
.tpl-infographic { background: #fff; display: flex; }
.tpl-thumb-dark-side { width: 40%; background: var(--tpl-info-dark); }
.tpl-thumb-skills-bars { flex: 1; padding: 16px 12px; }
.tpl-thumb-skills-bars span {
  display: block; height: 8px; background: #f59e0b; border-radius: 4px; margin: 12px 0;
}

.srb-tpl-meta {
  padding: 12px 14px;
  border-top: 1px solid var(--srb-border);
}
.srb-tpl-meta strong { display: block; font-size: .9rem; color: var(--srb-primary); font-weight: 600; }
.srb-tpl-meta em { font-style: normal; font-size: .75rem; color: var(--srb-muted); }

/* ── FORM LAYOUT ── */
.srb-form-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: start;
}

/* ── PANELS ── */
.srb-panel {
  background: var(--srb-surface);
  border-radius: var(--srb-radius);
  box-shadow: var(--srb-shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.srb-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--srb-border);
}
.srb-panel-icon { font-size: 1.2rem; }
.srb-panel-head h3 { font-size: .95rem; font-weight: 600; color: var(--srb-primary); flex: 1; }
.srb-panel-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--srb-muted);
  transition: transform .2s;
}
.srb-panel.collapsed .srb-panel-toggle { transform: rotate(-90deg); }
.srb-panel.collapsed .srb-panel-body { display: none; }
.srb-panel-body { padding: 20px; }

/* ── FORM FIELDS ── */
.srb-field { margin-bottom: 14px; }
.srb-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--srb-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.srb-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--srb-border);
  border-radius: 8px;
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
  color: var(--srb-text);
  background: #fafbfc;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.srb-input:focus {
  border-color: var(--srb-accent);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
  background: #fff;
}
textarea.srb-input { resize: vertical; min-height: 90px; }
select.srb-input { cursor: pointer; }

.srb-form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.srb-hint {
  display: block;
  font-size: .78rem;
  color: var(--srb-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── REPEATER ITEMS ── */
.srb-repeater-item {
  background: #f8fafc;
  border: 1px solid var(--srb-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.srb-item-drag {
  position: absolute;
  top: 8px; left: 8px;
  color: #cbd5e1;
  cursor: grab;
  font-size: 1rem;
}
.srb-item-remove {
  position: absolute;
  top: 8px; right: 8px;
  background: none; border: none;
  color: #f87171; cursor: pointer;
  font-size: .9rem; padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.srb-item-remove:hover { background: #fee2e2; }

/* ── SKILLS GRID ── */
.srb-skills-grid { display: flex; flex-direction: column; gap: 10px; }
.srb-skill-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--srb-border);
}
.srb-skill-item input { border: none; background: transparent; font-size: .9rem; outline: none; }
.srb-skill-rating { display: flex; gap: 3px; }
.srb-star { cursor: pointer; font-size: 1rem; color: #d1d5db; transition: color .15s; }
.srb-star.active { color: var(--srb-accent); }
.srb-skill-remove { background: none; border: none; color: #f87171; cursor: pointer; font-size: .85rem; }

/* ── BUTTONS ── */
.srb-btn-primary {
  background: var(--srb-primary);
  color: var(--srb-accent);
  border: none;
  padding: 13px 32px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .15s;
  font-family: 'Inter', sans-serif;
}
.srb-btn-primary:hover {
  background: #243460;
  transform: translateY(-1px);
}
.srb-btn-secondary {
  background: var(--srb-surface);
  color: var(--srb-primary);
  border: 2px solid var(--srb-border);
  padding: 11px 28px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
}
.srb-btn-secondary:hover { border-color: var(--srb-primary); }
.srb-btn-ghost {
  background: none;
  color: var(--srb-muted);
  border: none;
  padding: 11px 20px;
  font-size: .9rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.srb-btn-ghost:hover { color: var(--srb-text); }
.srb-btn-full { width: 100%; font-size: 1rem; padding: 15px; }
.srb-add-btn {
  background: none;
  border: 2px dashed var(--srb-border);
  color: var(--srb-accent);
  font-weight: 600;
  font-size: .85rem;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
  margin-top: 8px;
}
.srb-add-btn:hover { border-color: var(--srb-accent); background: rgba(201,168,76,.05); }

.srb-step-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  padding-top: 20px;
}

/* ── PREVIEW PANE ── */
.srb-preview-pane {
  position: sticky;
  top: 20px;
  background: var(--srb-surface);
  border-radius: var(--srb-radius);
  box-shadow: var(--srb-shadow-lg);
  overflow: hidden;
}
.srb-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--srb-primary);
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.srb-preview-controls { display: flex; align-items: center; gap: 8px; }
.srb-zoom-btn {
  background: rgba(255,255,255,.1);
  border: none; color: #fff;
  width: 24px; height: 24px;
  border-radius: 4px; cursor: pointer;
  font-size: 1rem; line-height: 1;
}
#srb-zoom-label { font-size: .75rem; min-width: 34px; text-align: center; }

.srb-preview-scroll {
  overflow-y: auto;
  max-height: 680px;
  background: #e5e7eb;
  padding: 20px;
}
#srb-preview-wrapper {
  transform-origin: top center;
  width: 794px; /* A4 width in px at 96dpi */
  transform: scale(0.75);
  margin: 0 auto;
  transition: transform .2s;
}

/* ── EXPORT STEP ── */
.srb-export-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.srb-export-preview {
  background: #e5e7eb;
  border-radius: var(--srb-radius);
  padding: 24px;
  min-height: 600px;
  display: flex;
  justify-content: center;
}
.srb-export-card {
  background: var(--srb-surface);
  border-radius: var(--srb-radius);
  padding: 24px;
  box-shadow: var(--srb-shadow);
  margin-bottom: 16px;
}
.srb-export-card h3 { margin-bottom: 8px; font-size: 1.1rem; color: var(--srb-primary); }
.srb-export-card > p { color: var(--srb-muted); font-size: .85rem; margin-bottom: 20px; }
.srb-pdf-options { margin-bottom: 20px; }
.srb-export-tips { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--srb-border); }
.srb-export-tips h4 { font-size: .85rem; margin-bottom: 10px; color: var(--srb-primary); }
.srb-export-tips ul { list-style: none; }
.srb-export-tips ul li { font-size: .82rem; color: var(--srb-muted); padding: 3px 0; }
.srb-export-tips ul li::before { content: '• '; color: var(--srb-success); }
.srb-export-actions { display: flex; flex-direction: column; gap: 10px; }

/* ════════════════════════════════════════
   RESUME TEMPLATES
════════════════════════════════════════ */
.srb-resume {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
}

/* ── TEMPLATE: EXECUTIVE ── */
.tpl-executive-resume {
  display: flex;
  font-family: 'Inter', sans-serif;
}
.tpl-exec-sidebar {
  width: 240px;
  background: var(--tpl-exec-sidebar);
  color: #e2e8f0;
  padding: 36px 24px;
  flex-shrink: 0;
  min-height: 1123px;
}
.tpl-exec-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(201,168,76,.2);
  border: 3px solid var(--srb-accent);
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--srb-accent);
}
.tpl-exec-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
}
.tpl-exec-title {
  color: var(--srb-accent);
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.tpl-exec-section-head {
  color: var(--srb-accent);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-bottom: 1px solid rgba(201,168,76,.3);
  padding-bottom: 5px;
  margin-bottom: 12px;
  margin-top: 20px;
}
.tpl-exec-contact-item { font-size: .78rem; margin: 5px 0; color: #cbd5e1; }
.tpl-exec-contact-item span { color: #fff; }
.tpl-exec-skill-bar { margin: 6px 0; }
.tpl-exec-skill-name { font-size: .78rem; color: #e2e8f0; margin-bottom: 3px; }
.tpl-exec-skill-track { height: 4px; background: rgba(255,255,255,.15); border-radius: 2px; }
.tpl-exec-skill-fill { height: 4px; background: var(--srb-accent); border-radius: 2px; }
.tpl-exec-lang-item { display: flex; justify-content: space-between; font-size: .78rem; color: #cbd5e1; margin: 4px 0; }
.tpl-exec-lang-level { color: var(--srb-accent); font-size: .7rem; }

.tpl-exec-main { flex: 1; padding: 40px 36px; }
.tpl-exec-main-section { margin-bottom: 28px; }
.tpl-exec-main-section-head {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tpl-exec-sidebar);
  border-bottom: 2px solid var(--srb-accent);
  padding-bottom: 6px;
  margin-bottom: 16px;
}
.tpl-exec-summary { color: #374151; font-size: .85rem; line-height: 1.7; }
.tpl-exec-job { margin-bottom: 18px; }
.tpl-exec-job-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3px; }
.tpl-exec-job-title { font-weight: 700; color: var(--tpl-exec-sidebar); font-size: .9rem; }
.tpl-exec-job-dates { font-size: .78rem; color: var(--srb-muted); white-space: nowrap; }
.tpl-exec-job-company { color: var(--srb-accent); font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.tpl-exec-job-desc { color: #4b5563; font-size: .83rem; line-height: 1.6; }

/* ── TEMPLATE: MODERN PRO ── */
.tpl-modern-resume {
  font-family: 'Montserrat', sans-serif;
}
.tpl-modern-header {
  background: #2d6a4f;
  color: #fff;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.tpl-modern-avatar {
  width: 72px; height: 72px;
  border-radius: 12px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; flex-shrink: 0;
}
.tpl-modern-name { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }
.tpl-modern-title { font-size: .9rem; opacity: .8; margin-top: 4px; }
.tpl-modern-contact { margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; }
.tpl-modern-contact span { font-size: .75rem; opacity: .85; }
.tpl-modern-body { display: grid; grid-template-columns: 200px 1fr; }
.tpl-modern-aside { background: #f0fdf4; padding: 28px 20px; border-right: 1px solid #dcfce7; }
.tpl-modern-main { padding: 28px 32px; }
.tpl-modern-section-head {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #2d6a4f;
  border-bottom: 2px solid #2d6a4f;
  padding-bottom: 4px;
  margin-bottom: 12px;
  margin-top: 20px;
}
.tpl-modern-aside .tpl-modern-section-head:first-child { margin-top: 0; }
.tpl-modern-skill-item { margin: 6px 0; font-size: .8rem; color: #374151; }
.tpl-modern-skill-bar { height: 5px; background: #dcfce7; border-radius: 3px; margin-top: 3px; }
.tpl-modern-skill-fill { height: 5px; background: #2d6a4f; border-radius: 3px; }
.tpl-modern-job { margin-bottom: 18px; }
.tpl-modern-job-title { font-weight: 700; font-size: .9rem; color: #111827; }
.tpl-modern-job-meta { display: flex; justify-content: space-between; }
.tpl-modern-job-company { color: #2d6a4f; font-size: .82rem; font-weight: 600; }
.tpl-modern-job-dates { font-size: .78rem; color: var(--srb-muted); }
.tpl-modern-job-desc { font-size: .82rem; color: #4b5563; margin-top: 4px; line-height: 1.6; }

/* ── TEMPLATE: MINIMAL ELITE ── */
.tpl-minimal-resume {
  font-family: 'Merriweather', serif;
  padding: 60px 64px;
  background: #fff;
}
.tpl-minimal-top { border-bottom: 3px solid #111827; padding-bottom: 20px; margin-bottom: 24px; }
.tpl-minimal-name {
  font-size: 2.2rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -.03em;
}
.tpl-minimal-title { font-size: .95rem; color: #6b7280; margin-top: 4px; font-weight: 300; font-style: italic; }
.tpl-minimal-contact-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 12px;
}
.tpl-minimal-contact-row span { font-size: .78rem; color: #4b5563; font-family: 'Inter', sans-serif; }
.tpl-minimal-section { margin-bottom: 28px; }
.tpl-minimal-section-head {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #111827;
  margin-bottom: 14px;
  font-family: 'Inter', sans-serif;
}
.tpl-minimal-summary { font-size: .88rem; color: #374151; line-height: 1.8; font-weight: 300; }
.tpl-minimal-job { display: grid; grid-template-columns: 140px 1fr; gap: 16px; margin-bottom: 16px; }
.tpl-minimal-job-dates { font-size: .78rem; color: #9ca3af; font-family: 'Inter', sans-serif; font-weight: 300; padding-top: 2px; }
.tpl-minimal-job-title { font-weight: 700; font-size: .9rem; color: #111827; }
.tpl-minimal-job-company { color: #6b7280; font-size: .85rem; font-style: italic; margin-bottom: 5px; }
.tpl-minimal-job-desc { font-size: .83rem; color: #4b5563; line-height: 1.7; font-weight: 300; }
.tpl-minimal-skills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-minimal-skill-tag {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  border: 1px solid #e5e7eb;
  padding: 4px 12px;
  border-radius: 3px;
  color: #374151;
}

/* ── TEMPLATE: CREATIVE EDGE ── */
.tpl-creative-resume {
  font-family: 'Inter', sans-serif;
  display: flex;
}
.tpl-creative-left {
  width: 250px;
  background: var(--tpl-creative-acc);
  color: #fff;
  padding: 40px 24px;
  min-height: 1123px;
}
.tpl-creative-name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.tpl-creative-title {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .85;
  margin-bottom: 28px;
}
.tpl-creative-section-head {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 5px;
  margin-bottom: 12px;
  margin-top: 24px;
}
.tpl-creative-contact-item { font-size: .78rem; opacity: .9; margin: 5px 0; }
.tpl-creative-skill-item { margin: 6px 0; }
.tpl-creative-skill-name { font-size: .8rem; margin-bottom: 3px; }
.tpl-creative-skill-bar { height: 4px; background: rgba(255,255,255,.3); border-radius: 2px; }
.tpl-creative-skill-fill { height: 4px; background: #fff; border-radius: 2px; }

.tpl-creative-right { flex: 1; padding: 40px 36px; }
.tpl-creative-main-head {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tpl-creative-acc);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-left: 3px solid var(--tpl-creative-acc);
  padding-left: 10px;
  margin-bottom: 14px;
  margin-top: 24px;
}
.tpl-creative-main-head:first-child { margin-top: 0; }
.tpl-creative-summary { font-size: .85rem; color: #4b5563; line-height: 1.7; }
.tpl-creative-job { margin-bottom: 18px; padding-left: 12px; border-left: 2px solid #fecaca; }
.tpl-creative-job-title { font-weight: 700; font-size: .9rem; color: #111827; }
.tpl-creative-job-company { color: var(--tpl-creative-acc); font-size: .82rem; font-weight: 600; }
.tpl-creative-job-dates { font-size: .76rem; color: #9ca3af; }
.tpl-creative-job-desc { font-size: .82rem; color: #4b5563; margin-top: 5px; line-height: 1.6; }

/* ── TEMPLATE: CORPORATE CLASSIC ── */
.tpl-corporate-resume {
  font-family: 'Inter', sans-serif;
}
.tpl-corp-header {
  background: var(--tpl-corp-band);
  color: #fff;
  padding: 40px 50px;
}
.tpl-corp-name {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.tpl-corp-title { color: #93c5fd; font-size: .9rem; margin-top: 4px; }
.tpl-corp-contact { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }
.tpl-corp-contact span { font-size: .78rem; color: #bfdbfe; }
.tpl-corp-body { padding: 36px 50px; }
.tpl-corp-section-head {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tpl-corp-band);
  border-bottom: 2px solid #bfdbfe;
  padding-bottom: 6px;
  margin-bottom: 16px;
  margin-top: 28px;
}
.tpl-corp-section-head:first-child { margin-top: 0; }
.tpl-corp-summary { font-size: .87rem; color: #374151; line-height: 1.7; }
.tpl-corp-job { margin-bottom: 18px; }
.tpl-corp-job-header { display: flex; justify-content: space-between; }
.tpl-corp-job-title { font-weight: 700; font-size: .9rem; color: #1e293b; }
.tpl-corp-job-dates { font-size: .78rem; color: var(--srb-muted); }
.tpl-corp-job-company { color: var(--tpl-corp-band); font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.tpl-corp-job-desc { font-size: .83rem; color: #4b5563; line-height: 1.6; }
.tpl-corp-skills-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-corp-skill-tag {
  background: #eff6ff; color: var(--tpl-corp-band);
  font-size: .78rem; padding: 4px 12px;
  border-radius: 4px; font-weight: 500;
}

/* ── TEMPLATE: INFOGRAPHIC ── */
.tpl-infographic-resume {
  font-family: 'Montserrat', sans-serif;
  display: flex;
}
.tpl-info-left {
  width: 260px;
  background: var(--tpl-info-dark);
  color: #e2e8f0;
  padding: 36px 24px;
  min-height: 1123px;
}
.tpl-info-avatar-wrap {
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(245,158,11,.15);
  border: 3px solid #f59e0b;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.tpl-info-name { font-size: 1.2rem; font-weight: 700; color: #fff; text-align: center; }
.tpl-info-title { font-size: .75rem; color: #f59e0b; text-align: center; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; margin-bottom: 24px; }
.tpl-info-section-head {
  color: #f59e0b;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 12px;
  margin-top: 24px;
}
.tpl-info-contact-item { font-size: .76rem; color: #94a3b8; margin: 5px 0; }
.tpl-info-skill-wrap { margin: 6px 0; }
.tpl-info-skill-label { display: flex; justify-content: space-between; font-size: .76rem; margin-bottom: 3px; color: #e2e8f0; }
.tpl-info-skill-pct { color: #f59e0b; font-size: .7rem; }
.tpl-info-skill-track { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; }
.tpl-info-skill-fill { height: 6px; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 3px; }

.tpl-info-right { flex: 1; padding: 36px 32px; background: #fff; }
.tpl-info-main-head {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--tpl-info-dark);
  margin-bottom: 14px; margin-top: 24px;
}
.tpl-info-main-head:first-child { margin-top: 0; }
.tpl-info-main-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.tpl-info-summary { font-size: .84rem; color: #4b5563; line-height: 1.7; }
.tpl-info-job { margin-bottom: 16px; padding-left: 12px; border-left: 3px solid #f59e0b; }
.tpl-info-job-title { font-weight: 700; font-size: .88rem; color: #111827; }
.tpl-info-job-meta { display: flex; justify-content: space-between; }
.tpl-info-job-company { color: #f59e0b; font-size: .8rem; font-weight: 600; }
.tpl-info-job-dates { font-size: .75rem; color: #9ca3af; }
.tpl-info-job-desc { font-size: .81rem; color: #4b5563; margin-top: 4px; line-height: 1.6; }

/* ── SHARED RESUME UTILS ── */
.srb-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.srb-ref-item p { font-size: .8rem; }
.srb-ref-name { font-weight: 700; font-size: .85rem !important; }
.srb-ref-available { font-style: italic; color: #6b7280; font-size: .82rem; margin-top: 8px; }
.srb-cert-item { margin-bottom: 10px; }
.srb-cert-name { font-weight: 600; font-size: .85rem; }
.srb-cert-meta { font-size: .78rem; color: var(--srb-muted); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .srb-form-layout { grid-template-columns: 1fr; }
  .srb-preview-pane { position: static; }
  .srb-export-layout { grid-template-columns: 1fr; }
  #srb-preview-wrapper { transform: scale(0.55); }
  #srb-zoom-label { display: none; }
}
@media (max-width: 600px) {
  .srb-template-grid { grid-template-columns: 1fr 1fr; }
  .srb-form-row.two-col { grid-template-columns: 1fr; }
  #srb-preview-wrapper { transform: scale(0.38); }
}