/* Resume Builder UI */
.rb-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.rb-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
}
.rb-step span {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.rb-step.active { background: #0A1628; color: #fff; }
.rb-step.active span { background: #C4A35A; }
.rb-step.done span { background: #10b981; }

.rb-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.rb-panel { display: none; }
.rb-panel.active { display: block; }
.rb-card h3 { font-size: 1.2rem; color: #0A1628; margin-bottom: 4px; }
.rb-hint { color: #94a3b8; font-size: 0.85rem; margin-bottom: 16px; }
.rb-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rb-repeat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.rb-photo-wrap {
  width: 100px; height: 100px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rb-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
#rbPhotoPlaceholder { font-size: 2rem; color: #94a3b8; display: flex; }

.rb-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.rb-tpl-item {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  text-align: center;
  transition: 0.2s;
}
.rb-tpl-item:hover, .rb-tpl-item.active { border-color: #C4A35A; }
.rb-tpl-item span { font-size: 0.68rem; color: #475569; display: block; margin-top: 4px; }
.rb-tpl-swatch {
  height: 48px;
  border-radius: 4px;
  background: linear-gradient(135deg, #0A1628 40%, #e2e8f0 40%);
}

.rb-preview-wrap {
  position: sticky;
  top: 90px;
  background: #e8edf2;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.rb-preview-toolbar {
  background: #0A1628;
  color: #fff;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}
.rb-preview-scroll {
  padding: 16px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Resume paper */
.rb-resume {
  background: #fff;
  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
  min-height: 297mm;
  padding: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: #1e293b;
}
.rb-r-photo {
  width: 90px; height: 90px;
  object-fit: cover;
  border-radius: 8px;
}
.rb-name { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
.rb-title { margin: 0 0 6px; font-size: 0.95rem; opacity: 0.9; }
.rb-contact { margin: 0; font-size: 0.8rem; opacity: 0.8; }
.rb-sec { margin-bottom: 14px; }
.rb-sec-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
}
.rb-sec-body p { margin: 0 0 6px; }
.rb-item { margin-bottom: 10px; }
.rb-meta { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.rb-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-skill {
  background: rgba(0,0,0,0.06);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
}
.rb-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-two-col ul, .rb-side ul { margin: 0; padding-left: 16px; }
.rb-two-col li, .rb-side li { margin-bottom: 4px; }

.rb-layout-classic { padding: 28px 32px; }
.rb-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 3px solid currentColor;
}
.rb-layout-sidebar { display: flex; min-height: 297mm; }
.rb-side {
  width: 34%;
  padding: 24px 18px;
  color: #fff;
}
.rb-side .rb-name { font-size: 1.25rem; color: #fff; }
.rb-side .rb-title { color: rgba(255,255,255,0.85); }
.rb-side .rb-r-photo {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  margin-bottom: 12px;
  display: block;
}
.rb-side-block { margin-top: 16px; }
.rb-side-block h5 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  opacity: 0.9;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 4px;
}
.rb-side-block p, .rb-side-block li { font-size: 0.78rem; color: rgba(255,255,255,0.9); }
.rb-side .rb-skill { background: rgba(255,255,255,0.15); color: #fff; }
.rb-main { width: 66%; padding: 24px 22px; color: #1e293b; }

/* Template colors */
.tpl-classic-navy { color: #0A1628; }
.tpl-classic-navy .rb-sec-title, .tpl-classic-navy .rb-header { color: #0A1628; border-color: #0A1628; }
.tpl-classic-charcoal { color: #1c1917; }
.tpl-classic-charcoal .rb-sec-title, .tpl-classic-charcoal .rb-header { color: #1c1917; border-color: #1c1917; }
.tpl-classic-maroon { color: #7f1d1d; }
.tpl-classic-maroon .rb-sec-title, .tpl-classic-maroon .rb-header { color: #7f1d1d; border-color: #7f1d1d; }
.tpl-classic-teal { color: #0f766e; }
.tpl-classic-teal .rb-sec-title, .tpl-classic-teal .rb-header { color: #0f766e; border-color: #0f766e; }

.tpl-modern-blue .rb-header { background: #1B4F72; color: #fff; border: none; margin: -28px -32px 18px; padding: 24px 32px; }
.tpl-modern-blue .rb-sec-title { color: #1B4F72; border-color: #1B4F72; }
.tpl-modern-green .rb-header { background: #166534; color: #fff; border: none; margin: -28px -32px 18px; padding: 24px 32px; }
.tpl-modern-green .rb-sec-title { color: #166534; border-color: #166534; }
.tpl-modern-slate .rb-header { background: #334155; color: #fff; border: none; margin: -28px -32px 18px; padding: 24px 32px; }
.tpl-modern-slate .rb-sec-title { color: #334155; border-color: #334155; }
.tpl-modern-gold .rb-header { background: #92400e; color: #fff; border: none; margin: -28px -32px 18px; padding: 24px 32px; }
.tpl-modern-gold .rb-sec-title { color: #92400e; border-color: #92400e; }

.tpl-sidebar-navy .rb-side { background: #0A1628; }
.tpl-sidebar-dark .rb-side { background: #111827; }
.tpl-sidebar-forest .rb-side { background: #14532d; }
.tpl-sidebar-burgundy .rb-side { background: #4c0519; }

.tpl-minimal-black .rb-sec-title { border-bottom-width: 1px; color: #000; }
.tpl-minimal-gray .rb-sec-title { color: #4b5563; border-color: #9ca3af; }
.tpl-minimal-indigo .rb-sec-title { color: #3730a3; border-color: #3730a3; }

.tpl-executive-navy .rb-header { border-bottom: 4px double #0A1628; }
.tpl-executive-navy .rb-sec-title { color: #0A1628; }
.tpl-executive-brown .rb-header { border-bottom: 4px double #78350f; color: #78350f; }
.tpl-executive-brown .rb-sec-title { color: #78350f; border-color: #78350f; }

.tpl-elegant-purple .rb-sec-title { color: #6b21a8; border-color: #6b21a8; }
.tpl-elegant-purple .rb-header { color: #6b21a8; border-color: #6b21a8; }
.tpl-elegant-rose .rb-sec-title { color: #9f1239; border-color: #9f1239; }
.tpl-elegant-rose .rb-header { color: #9f1239; border-color: #9f1239; }

.tpl-compact-blue { font-size: 11.5px; }
.tpl-compact-blue .rb-sec-title { color: #1e40af; border-color: #1e40af; }
.tpl-compact-green { font-size: 11.5px; }
.tpl-compact-green .rb-sec-title { color: #047857; border-color: #047857; }

.tpl-timeline-navy .rb-item { border-left: 3px solid #0A1628; padding-left: 12px; }
.tpl-timeline-navy .rb-sec-title { color: #0A1628; }
.tpl-timeline-teal .rb-item { border-left: 3px solid #0f766e; padding-left: 12px; }
.tpl-timeline-teal .rb-sec-title { color: #0f766e; border-color: #0f766e; }

.tpl-corporate-red .rb-header { background: #991b1b; color: #fff; border: none; margin: -28px -32px 18px; padding: 24px 32px; }
.tpl-corporate-red .rb-sec-title { color: #991b1b; border-color: #991b1b; }
.tpl-corporate-ocean .rb-header { background: #0e7490; color: #fff; border: none; margin: -28px -32px 18px; padding: 24px 32px; }
.tpl-corporate-ocean .rb-sec-title { color: #0e7490; border-color: #0e7490; }

/* Swatches in picker */
.rb-tpl-swatch.tpl-classic-navy { background: linear-gradient(135deg, #0A1628 45%, #f1f5f9 45%); }
.rb-tpl-swatch.tpl-classic-charcoal { background: linear-gradient(135deg, #1c1917 45%, #f5f5f4 45%); }
.rb-tpl-swatch.tpl-classic-maroon { background: linear-gradient(135deg, #7f1d1d 45%, #fef2f2 45%); }
.rb-tpl-swatch.tpl-classic-teal { background: linear-gradient(135deg, #0f766e 45%, #f0fdfa 45%); }
.rb-tpl-swatch.tpl-modern-blue { background: linear-gradient(135deg, #1B4F72 50%, #fff 50%); }
.rb-tpl-swatch.tpl-modern-green { background: linear-gradient(135deg, #166534 50%, #fff 50%); }
.rb-tpl-swatch.tpl-modern-slate { background: linear-gradient(135deg, #334155 50%, #fff 50%); }
.rb-tpl-swatch.tpl-modern-gold { background: linear-gradient(135deg, #92400e 50%, #fff 50%); }
.rb-tpl-swatch.tpl-sidebar-navy { background: linear-gradient(90deg, #0A1628 35%, #f8fafc 35%); }
.rb-tpl-swatch.tpl-sidebar-dark { background: linear-gradient(90deg, #111827 35%, #f8fafc 35%); }
.rb-tpl-swatch.tpl-sidebar-forest { background: linear-gradient(90deg, #14532d 35%, #f8fafc 35%); }
.rb-tpl-swatch.tpl-sidebar-burgundy { background: linear-gradient(90deg, #4c0519 35%, #f8fafc 35%); }
.rb-tpl-swatch.tpl-minimal-black { background: linear-gradient(135deg, #000 20%, #fff 20%); }
.rb-tpl-swatch.tpl-minimal-gray { background: linear-gradient(135deg, #6b7280 20%, #fff 20%); }
.rb-tpl-swatch.tpl-minimal-indigo { background: linear-gradient(135deg, #3730a3 20%, #fff 20%); }
.rb-tpl-swatch.tpl-executive-navy { background: linear-gradient(135deg, #0A1628 40%, #e2e8f0 40%); }
.rb-tpl-swatch.tpl-executive-brown { background: linear-gradient(135deg, #78350f 40%, #fef3c7 40%); }
.rb-tpl-swatch.tpl-elegant-purple { background: linear-gradient(135deg, #6b21a8 40%, #faf5ff 40%); }
.rb-tpl-swatch.tpl-elegant-rose { background: linear-gradient(135deg, #9f1239 40%, #fff1f2 40%); }
.rb-tpl-swatch.tpl-compact-blue { background: linear-gradient(135deg, #1e40af 40%, #eff6ff 40%); }
.rb-tpl-swatch.tpl-compact-green { background: linear-gradient(135deg, #047857 40%, #ecfdf5 40%); }
.rb-tpl-swatch.tpl-timeline-navy { background: linear-gradient(135deg, #0A1628 30%, #fff 30%); }
.rb-tpl-swatch.tpl-timeline-teal { background: linear-gradient(135deg, #0f766e 30%, #fff 30%); }
.rb-tpl-swatch.tpl-corporate-red { background: linear-gradient(135deg, #991b1b 50%, #fff 50%); }
.rb-tpl-swatch.tpl-corporate-ocean { background: linear-gradient(135deg, #0e7490 50%, #fff 50%); }

@media (max-width: 991.98px) {
  .rb-preview-wrap { position: relative; top: 0; margin-top: 20px; }
  .rb-preview-scroll { max-height: 60vh; }
}
@media (max-width: 575.98px) {
  .rb-card { padding: 16px; }
  .rb-two-col { grid-template-columns: 1fr; }
  .rb-layout-sidebar { flex-direction: column; }
  .rb-side, .rb-main { width: 100%; }
}

/* Tighter resume - less white space */
.rb-resume {
  min-height: auto !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.rb-layout-classic { padding: 18px 20px !important; }
.rb-header { margin-bottom: 10px !important; padding-bottom: 8px !important; }
.rb-sec { margin-bottom: 10px !important; }
.rb-sec-title { margin-bottom: 5px !important; padding-bottom: 2px !important; font-size: 0.78rem !important; }
.rb-item { margin-bottom: 6px !important; }
.rb-name { font-size: 1.35rem !important; }
.rb-r-photo { width: 72px !important; height: 72px !important; }

/* Banner layout */
.rb-layout-banner .rb-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  color: #fff;
}
.rb-layout-banner .rb-banner-body { padding: 14px 18px; }
.tpl-banner-blue .rb-banner { background: #1B4F72; }
.tpl-banner-maroon .rb-banner { background: #7f1d1d; }
.tpl-banner-teal .rb-banner { background: #0f766e; }
.tpl-banner-blue .rb-sec-title { color: #1B4F72; border-color: #1B4F72; }
.tpl-banner-maroon .rb-sec-title { color: #7f1d1d; border-color: #7f1d1d; }
.tpl-banner-teal .rb-sec-title { color: #0f766e; border-color: #0f766e; }

/* Sidebar right */
.rb-side-right { flex-direction: row-reverse; }

/* Two column */
.rb-layout-twocol { padding: 16px 18px; }
.rb-tc-head { text-align: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #0A1628; }
.rb-tc-grid { display: grid; grid-template-columns: 32% 1fr; gap: 14px; }
.rb-tc-left .rb-r-photo { margin-bottom: 10px; }
.tpl-two-col .rb-tc-head, .tpl-two-col .rb-sec-title { border-color: #0A1628; color: #0A1628; }
.tpl-two-col-teal .rb-tc-head, .tpl-two-col-teal .rb-sec-title { border-color: #0f766e; color: #0f766e; }

/* Timeline items */
.rb-layout-timeline .rb-item {
  border-left: 3px solid #0A1628;
  padding-left: 10px;
  margin-left: 4px;
}
.tpl-timeline-teal .rb-item { border-left-color: #0f766e; }
.tpl-timeline-teal .rb-sec-title { color: #0f766e; border-color: #0f766e; }

/* Compact */
.rb-layout-compact { padding: 14px 16px; font-size: 11px; }
.rb-compact-head { font-size: 1.1rem; margin-bottom: 6px; }
.rb-compact-sum { margin: 0 0 8px; font-size: 0.85rem; color: #475569; }
.tpl-compact-dense .rb-sec-title { color: #1e40af; border-color: #1e40af; }
.tpl-compact-green .rb-sec-title { color: #047857; border-color: #047857; }

/* Executive */
.rb-layout-executive { padding: 18px 22px; }
.rb-exec-top { text-align: center; }
.rb-exec-contact {
  text-align: center;
  font-size: 0.78rem;
  padding: 6px 0;
  margin-bottom: 10px;
  border-top: 2px solid #0A1628;
  border-bottom: 2px solid #0A1628;
}
.tpl-executive .rb-exec-contact, .tpl-executive .rb-sec-title { border-color: #0A1628; color: #0A1628; }
.tpl-executive-brown .rb-exec-contact, .tpl-executive-brown .rb-sec-title { border-color: #78350f; color: #78350f; }

/* Cards */
.rb-layout-cards { padding: 14px; }
.rb-card-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3730a3;
}
.rb-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rb-card-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
}
.tpl-modern-cards .rb-card-hero, .tpl-modern-cards .rb-sec-title { border-color: #3730a3; color: #3730a3; }
.tpl-cards-indigo .rb-card-hero, .tpl-cards-indigo .rb-sec-title { border-color: #4338ca; color: #4338ca; }

/* Header bar */
.rb-layout-hbar { padding: 0; }
.rb-hbar { height: 8px; background: #0A1628; }
.rb-hbar-body { padding: 14px 18px; }
.rb-hbar-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tpl-header-bar .rb-hbar { background: #0A1628; }
.tpl-header-bar .rb-sec-title { color: #0A1628; border-color: #0A1628; }
.tpl-header-gold .rb-hbar { background: #C4A35A; }
.tpl-header-gold .rb-sec-title { color: #92400e; border-color: #C4A35A; }

/* Minimal */
.rb-layout-minimal { padding: 20px 22px; }
.rb-min-line { border: none; border-top: 1px solid #cbd5e1; margin: 8px 0 12px; }
.tpl-minimal-line .rb-sec-title { border-bottom-width: 1px; color: #000; }
.tpl-minimal-gray .rb-sec-title { color: #4b5563; border-color: #9ca3af; }

/* Profile top */
.rb-layout-profile { padding: 0; }
.rb-prof-top {
  text-align: center;
  padding: 20px 16px 14px;
  color: #fff;
  background: #0e7490;
}
.rb-prof-top .rb-r-photo {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.4);
  margin: 0 auto 8px;
  display: block;
}
.rb-prof-body { padding: 14px 18px; }
.tpl-profile-top .rb-prof-top { background: #1B4F72; }
.tpl-profile-top .rb-sec-title { color: #1B4F72; border-color: #1B4F72; }
.tpl-profile-ocean .rb-prof-top { background: #0e7490; }
.tpl-profile-ocean .rb-sec-title { color: #0e7490; border-color: #0e7490; }

.tpl-classic-navy .rb-sec-title, .tpl-classic-navy .rb-header { color: #0A1628; border-color: #0A1628; }
.tpl-classic-charcoal .rb-sec-title, .tpl-classic-charcoal .rb-header { color: #1c1917; border-color: #1c1917; }
.tpl-sidebar-navy .rb-side { background: #0A1628; }
.tpl-sidebar-right .rb-side { background: #1e3a5f; }
.tpl-sidebar-forest .rb-side { background: #14532d; }
.tpl-sidebar-dark .rb-side { background: #111827; }

@media print {
  .rb-resume { box-shadow: none !important; min-height: auto !important; }
}