/* ═══════════════════════════════════════════════════
   Resume Builder Pro v6 — style.css
   12 Resume Templates with distinct color schemes
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&family=Raleway:wght@300;400;600;700&family=Lato:wght@300;400;700&display=swap');

/* ── CSS Variables ── */
.rbpro-root {
  --rb-primary:    #c0392b;
  --rb-primary-dk: #a93226;
  --rb-primary-lt: #fadbd8;
  --rb-primary-xs: #fef2f1;
  --rb-dark:       #1a1a2e;
  --rb-dark2:      #2c2c3e;
  --rb-txt:        #1a1a2e;
  --rb-muted:      #8e8ea0;
  --rb-border:     #e8e8f0;
  --rb-bg:         #f8f9fa;
  --rb-surface:    #ffffff;
  --rb-res-accent: #c0392b;
  --rb-res-dark:   #1a1a2e;

  display: flex;
  flex-direction: row;
  align-items: stretch;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--rb-txt);
  background: var(--rb-bg);
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
}
.rbpro-root *, .rbpro-root *::before, .rbpro-root *::after { box-sizing: border-box; }

/* ── Force full-width on any WordPress theme ── */
/* These rules apply when a custom page template is NOT used */
body:has(.rbpro-root),
html:has(.rbpro-root) {
  overflow: hidden !important;
  height: 100% !important;
}
/* Hide theme chrome on pages with the builder */
body:has(.rbpro-root) .site-header,
body:has(.rbpro-root) .site-footer,
body:has(.rbpro-root) header:not(.rb-brand),
body:has(.rbpro-root) footer,
body:has(.rbpro-root) .entry-header,
body:has(.rbpro-root) .page-title,
body:has(.rbpro-root) nav.main-navigation,
body:has(.rbpro-root) .sidebar,
body:has(.rbpro-root) aside { display: none !important; }

/* ── Form panel ── */
.rb-form { width: 42%; min-width: 320px; max-width: 560px; flex-shrink: 0; background: var(--rb-surface); border-right: 1px solid var(--rb-border); display: flex; flex-direction: column; overflow-y: auto; position: sticky; top: 0; height: 100vh; }

/* ── Brand bar ── */
.rb-brand { background:var(--rb-dark); padding:16px 26px; }
.rb-brand-inner { display:flex; align-items:center; gap:12px; }
.rb-brand-icon { width:40px; height:40px; border-radius:8px; background:var(--rb-primary); color:#fff; font-family:'Poppins',sans-serif; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rb-brand-name { font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:700; color:#fff; }
.rb-brand-sub  { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:.05em; text-transform:uppercase; }

/* ── Step bar ── */
.rb-stepbar { background:var(--rb-dark); padding:6px 26px 18px; display:flex; align-items:center; }
.rb-step { display:flex; flex-direction:column; align-items:center; gap:4px; }
.rb-step-circle { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.18); color:rgba(255,255,255,.4); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.rb-step span { font-size:10.5px; color:rgba(255,255,255,.35); font-weight:500; }
.rb-step.active .rb-step-circle { background:var(--rb-primary); border-color:var(--rb-primary); color:#fff; box-shadow:0 0 0 4px rgba(192,57,43,.25); }
.rb-step.active span { color:#fff; }
.rb-step.done .rb-step-circle { background:var(--rb-primary-dk); border-color:var(--rb-primary-dk); color:#fff; opacity:.7; }
.rb-step.done span { color:rgba(255,255,255,.55); }
.rb-step-line { flex:1; height:1.5px; background:rgba(255,255,255,.1); margin:0 8px 16px; }

/* ── Panel ── */
.rb-panel { padding:20px 22px 26px; }
.rb-heading { font-family:'Poppins',sans-serif; font-size:19px; font-weight:700; color:var(--rb-dark); margin:0 0 22px; display:flex; align-items:center; gap:10px; }
.rb-heading::before { content:''; width:4px; height:20px; background:var(--rb-primary); border-radius:2px; display:inline-block; }

/* ── Photo zone ── */
.rb-photo-zone { width:110px; height:110px; border-radius:50%; border:2.5px dashed var(--rb-border); cursor:pointer; overflow:hidden; position:relative; margin:0 auto 22px; background:var(--rb-bg); transition:border-color .2s; }
.rb-photo-zone:hover { border-color:var(--rb-primary); }
.rb-photo-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:4px; color:var(--rb-muted); font-size:11px; font-weight:500; }
.rb-photo-ph svg { stroke:var(--rb-primary); opacity:.6; }
.rb-photo-ph small { font-size:9.5px; color:#b8b8cc; }
.rb-photo-chg { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-family:inherit; font-size:10px; font-weight:600; text-align:center; padding:5px 0; border:none; cursor:pointer; }

/* ── Fields ── */
.rb-f { display:flex; flex-direction:column; margin-bottom:13px; }
.rb-f label { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--rb-muted); margin-bottom:5px; }
.rb-f label em { color:var(--rb-primary); font-style:normal; }
.rb-f label small { font-size:10.5px; color:var(--rb-muted); text-transform:none; letter-spacing:0; font-weight:400; margin-left:4px; }
.rb-f input, .rb-f textarea, .rb-f select { padding:10px 13px; border:1.5px solid var(--rb-border); border-radius:8px; font-family:inherit; font-size:14px; color:var(--rb-txt); background:var(--rb-surface); outline:none; transition:border-color .18s, box-shadow .18s; resize:vertical; width:100%; }
.rb-f input::placeholder, .rb-f textarea::placeholder { color:#c0bfc8; }
.rb-f input:focus, .rb-f textarea:focus { border-color:var(--rb-primary); box-shadow:0 0 0 3px rgba(192,57,43,.1); }
.rb-f input.rberr { border-color:#e53e3e!important; }
.rb-ferr { font-size:11px; color:#e53e3e; margin-top:3px; }
.rb-cnt  { font-size:11px; color:var(--rb-muted); text-align:right; margin-top:3px; }
.rb-g2   { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── Buttons ── */
.rb-btn-primary { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:8px; border:none; cursor:pointer; font-family:'Poppins',sans-serif; font-size:14px; font-weight:600; background:var(--rb-primary); color:#fff; width:100%; margin-top:6px; box-shadow:0 4px 14px rgba(0,0,0,.15); transition:background .2s, transform .15s; }
.rb-btn-primary:hover { background:var(--rb-primary-dk); }
.rb-btn-primary:active { transform:scale(.97); }
.rb-btn-primary.rb-flex1 { flex:1; margin-top:0; }
.rb-btn-ghost { display:flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:8px; border:1.5px solid var(--rb-border); font-family:inherit; font-size:14px; font-weight:500; background:transparent; color:var(--rb-muted); cursor:pointer; transition:background .15s; }
.rb-btn-ghost:hover { background:var(--rb-bg); color:var(--rb-txt); }
.rb-btn-row { display:flex; gap:10px; margin-top:8px; }

/* ── Blocks ── */
.rb-block { margin-bottom:22px; }
.rb-block-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rb-block-title { font-size:14px; font-weight:600; color:var(--rb-dark); }
.rb-add-btn { font-family:inherit; font-size:12px; font-weight:600; color:var(--rb-primary); background:var(--rb-primary-xs); border:1.5px solid var(--rb-primary-lt); border-radius:6px; padding:5px 13px; cursor:pointer; transition:background .15s; }
.rb-add-btn:hover { background:var(--rb-primary-lt); }
.rb-card { border:1.5px solid var(--rb-border); border-radius:10px; padding:15px; margin-bottom:10px; background:var(--rb-bg); border-left:3px solid var(--rb-primary); }
.rb-card-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
.rb-card-hdr span { font-size:13px; font-weight:600; color:var(--rb-dark); }
.rb-card-rm { background:none; border:none; color:var(--rb-muted); cursor:pointer; font-size:15px; padding:3px 6px; border-radius:4px; transition:color .15s; }
.rb-card-rm:hover { color:var(--rb-primary); }
.rb-card .rb-f input, .rb-card .rb-f textarea { font-size:13px; padding:8px 11px; }
.rb-dpair { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.rb-dpair select { width:100%; padding:8px 28px 8px 10px; border:1.5px solid var(--rb-border); border-radius:7px; font-family:inherit; font-size:13px; color:var(--rb-txt); background:var(--rb-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238e8ea0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center; appearance:none; outline:none; cursor:pointer; transition:border-color .18s; }
.rb-dpair select:focus { border-color:var(--rb-primary); }
.rb-dpair select:disabled { opacity:.4; cursor:not-allowed; }
.rb-cur { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rb-cur input[type="checkbox"] { width:15px; height:15px; accent-color:var(--rb-primary); flex-shrink:0; cursor:pointer; }
.rb-cur label { font-size:12.5px; color:var(--rb-muted); font-weight:400; text-transform:none; letter-spacing:0; margin:0; cursor:pointer; }

/* ── Tags ── */
.rb-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; min-height:8px; }
.rb-tag { display:inline-flex; align-items:center; gap:5px; background:var(--rb-primary-xs); color:var(--rb-primary); border:1px solid var(--rb-primary-lt); padding:4px 10px; border-radius:100px; font-size:12px; font-weight:500; }
.rb-tag button { background:none; border:none; color:var(--rb-primary); cursor:pointer; font-size:11px; padding:0; opacity:.7; }
.rb-hint { font-size:13px; color:var(--rb-muted); text-align:center; padding:10px 0; }
.rb-hint strong { color:var(--rb-primary); }
.rb-hidden { display:none!important; }

/* ══ TEMPLATE PICKER ══ */
.rb-tpl-section-label { font-size:11px; font-weight:700; color:var(--rb-muted); text-transform:uppercase; letter-spacing:.08em; margin:14px 0 8px; }
.rb-tpl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:4px; }
.rb-tpl {
  cursor:pointer; border:2px solid var(--rb-border); border-radius:10px;
  padding:6px 4px 7px; background:#fff; text-align:center;
  font-family:inherit; font-size:10.5px; font-weight:600; color:var(--rb-muted);
  transition:border-color .18s, transform .15s;
}
.rb-tpl:hover { border-color:var(--rb-primary); transform:translateY(-2px); }
.rb-tpl.active { border-color:var(--rb-primary); color:var(--rb-primary); background:var(--rb-primary-xs); }
.rb-tpl span { display:block; margin-top:4px; }
.rb-tpl-thumb { height:48px; border-radius:5px; overflow:hidden; border:1px solid rgba(0,0,0,.06); }
.rb-tpl-swatches { display:flex; gap:3px; justify-content:center; margin-top:4px; }
.rb-tpl-swatches span { width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.08); display:inline-block; }

/* ── Preview panel ── */
.rb-preview { flex:1; min-width:0; background:#eef0f4; display:flex; flex-direction:column; overflow:hidden; position:sticky; top:0; height:100vh; }
.rb-toolbar { background:var(--rb-dark); padding:8px 14px; display:flex; align-items:center; justify-content:space-between; gap:6px; flex-shrink:0; flex-wrap:nowrap; }
.rb-toolbar-l { display:flex; align-items:center; gap:8px; }
.rb-toolbar-dot { width:8px; height:8px; border-radius:50%; background:var(--rb-primary); display:inline-block; }
.rb-toolbar-title { font-size:11.5px; color:rgba(255,255,255,.45); font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.rb-toolbar-r { display:flex; gap:5px; flex-wrap:nowrap; align-items:center; }
.rb-tb { display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:7px; border:1.5px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:rgba(255,255,255,.7); font-family:inherit; font-size:11.5px; font-weight:500; cursor:pointer; transition:background .15s; white-space:nowrap; }
.rb-tb:hover { background:rgba(255,255,255,.14); color:#fff; }
.rb-tb.primary { background:var(--rb-primary); border-color:var(--rb-primary); color:#fff; font-weight:600; }
.rb-tb.primary:hover { background:var(--rb-primary-dk); }
.rb-tb.accent  { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.7); font-weight:600; }
.rb-tb.accent:hover { background:rgba(255,255,255,.14); color:#fff; }
.rb-canvas { flex:1; overflow-y:auto; padding:20px; display:flex; justify-content:center; align-items:flex-start; min-height:0; }
.rb-stage  { width:100%; max-width:680px; background:#fff; box-shadow:0 4px 32px rgba(0,0,0,.12); border-radius:4px; min-height:800px; overflow:hidden; }
.rb-empty  { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:560px; gap:14px; color:#b0b0c8; }
.rb-empty svg { stroke:#c8c8d8; }
.rb-empty-t { font-size:16px; font-weight:600; color:#9090a8; margin:0; }
.rb-empty-s { font-size:13px; color:#b8b8cc; margin:0; }

/* ── Toast ── */
.rb-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--rb-dark); color:#fff; padding:11px 24px; border-radius:100px; font-family:inherit; font-size:13px; font-weight:500; z-index:99999; opacity:0; transition:opacity .3s,transform .3s; pointer-events:none; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.25); border-left:3px solid var(--rb-primary); }
.rb-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Modal ── */
.rb-modal { position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center; }
.rb-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.rb-modal-box { position:relative; z-index:1; background:#fff; border-radius:16px; padding:26px; width:90%; max-width:380px; box-shadow:0 24px 64px rgba(0,0,0,.25); }
.rb-modal-x { position:absolute; top:14px; right:16px; background:none; border:none; font-size:16px; color:var(--rb-muted); cursor:pointer; padding:4px 8px; border-radius:6px; }
.rb-modal-x:hover { background:var(--rb-bg); }
.rb-modal-hd { text-align:center; margin-bottom:20px; }
.rb-modal-icon { font-size:28px; margin-bottom:8px; }
.rb-modal-box h3 { font-family:'Poppins',sans-serif; font-size:20px; font-weight:700; color:var(--rb-dark); margin:0 0 4px; }
.rb-modal-box p  { font-size:13px; color:var(--rb-muted); margin:0; }
.rb-share-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rb-share-grid-3 { grid-template-columns:repeat(3,1fr); }
.rb-share-item { display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 10px; border:1.5px solid var(--rb-border); border-radius:10px; background:#fff; cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s; }
.rb-share-item:hover { border-color:var(--rb-primary); background:var(--rb-primary-xs); color:var(--rb-primary); }
.rb-share-item span { font-size:12.5px; font-weight:600; }
.rb-share-item small { font-size:10px; color:var(--rb-muted); font-weight:400; }
.rb-share-note { font-size:11.5px; color:var(--rb-muted); text-align:center; margin:14px 0 0; line-height:1.55; }

/* ── Fresher / exp badge ── */
.jx-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px; margin:4px 0 7px; }
.jx-fresher { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.jx-exp     { background:var(--rb-primary-xs); color:var(--rb-primary); border:1px solid var(--rb-primary-lt); }
.jx-badge-sub { opacity:.7; font-weight:400; }


/* ══════════════════════════════════════════════════════════════════
   12 RESUME TEMPLATES
══════════════════════════════════════════════════════════════════ */

.jx-resume { font-family:'Inter',sans-serif; color:#222; }
.jx-resume a { text-decoration:none; color:inherit; }

/* ── Shared resume building blocks ── */
.jx-sec   { margin-bottom:20px; }
.jx-entry { margin-bottom:13px; }
.jx-erow  { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px; }
.jx-etitle { font-size:13.5px; font-weight:600; }
.jx-edate  { font-size:11.5px; white-space:nowrap; }
.jx-esub   { font-size:12.5px; margin-top:2px; }
.jx-eresp  { font-size:12px; line-height:1.65; margin-top:6px; padding-top:6px; white-space:pre-line; }
.jx-skill-wrap { display:flex; flex-wrap:wrap; gap:6px; }
.jx-contacts   { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; }

/* ══════════════════
   1. CRIMSON CLASSIC
   Red diagonal header, clean white body
══════════════════ */
.jx-crimson .jx-hdr { background:linear-gradient(135deg,#c0392b 0%,#922b21 100%); color:#fff; padding:30px 40px 26px; display:flex; gap:22px; align-items:flex-start; position:relative; overflow:hidden; }
.jx-crimson .jx-hdr::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:rgba(255,255,255,.3); }
.jx-crimson .jx-photo { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.4); flex-shrink:0; }
.jx-crimson .jx-ini   { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.18); border:3px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; flex-shrink:0; }
.jx-crimson .jx-name  { font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; margin:0 0 2px; }
.jx-crimson .jx-role  { font-size:13px; opacity:.75; margin:0; }
.jx-crimson .jx-contacts { color:rgba(255,255,255,.7); }
.jx-crimson .jx-body  { padding:28px 40px; }
.jx-crimson .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#c0392b; border-bottom:2px solid #fadbd8; padding-bottom:5px; margin-bottom:12px; }
.jx-crimson .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-crimson .jx-edate { color:#888; background:#fef2f1; padding:2px 8px; border-radius:100px; font-size:11px; font-weight:500; }
.jx-crimson .jx-esub  { color:#c0392b; font-weight:500; }
.jx-crimson .jx-eresp { color:#555; border-top:1px dashed #eee; }
.jx-crimson .jx-skill { background:#fef2f1; color:#c0392b; border:1px solid #fadbd8; padding:4px 12px; border-radius:100px; font-size:12px; font-weight:500; }
.jx-crimson .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-crimson .jx-link  { color:#c0392b; word-break:break-all; }

/* ══════════════════
   2. OCEAN BLUE
   Navy header, blue accents
══════════════════ */
.jx-ocean .jx-hdr { background:linear-gradient(135deg,#1565c0 0%,#0d47a1 100%); color:#fff; padding:30px 40px 26px; display:flex; gap:22px; align-items:flex-start; }
.jx-ocean .jx-photo { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.35); flex-shrink:0; }
.jx-ocean .jx-ini   { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; flex-shrink:0; }
.jx-ocean .jx-name  { font-family:'Raleway',sans-serif; font-size:26px; font-weight:700; margin:0 0 2px; letter-spacing:.01em; }
.jx-ocean .jx-role  { font-size:13px; opacity:.75; margin:0; }
.jx-ocean .jx-contacts { color:rgba(255,255,255,.7); }
.jx-ocean .jx-body  { padding:28px 40px; }
.jx-ocean .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#1565c0; border-bottom:2px solid #bbdefb; padding-bottom:5px; margin-bottom:12px; }
.jx-ocean .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-ocean .jx-edate { color:#1565c0; font-weight:600; font-size:11.5px; }
.jx-ocean .jx-esub  { color:#1976d2; font-weight:500; }
.jx-ocean .jx-eresp { color:#555; border-top:1px dashed #e0e0e0; }
.jx-ocean .jx-skill { background:#e3f2fd; color:#1565c0; border:1px solid #bbdefb; padding:4px 12px; border-radius:100px; font-size:12px; font-weight:500; }
.jx-ocean .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-ocean .jx-link  { color:#1565c0; word-break:break-all; }

/* ══════════════════
   3. FOREST GREEN
   Deep green header, nature tones
══════════════════ */
.jx-forest .jx-hdr { background:linear-gradient(135deg,#2e7d32 0%,#1b5e20 100%); color:#fff; padding:30px 40px 26px; display:flex; gap:22px; align-items:flex-start; }
.jx-forest .jx-photo { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.35); flex-shrink:0; }
.jx-forest .jx-ini   { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; flex-shrink:0; }
.jx-forest .jx-name  { font-family:'Lato',sans-serif; font-size:27px; font-weight:700; margin:0 0 2px; letter-spacing:.02em; }
.jx-forest .jx-role  { font-size:13px; opacity:.75; margin:0; }
.jx-forest .jx-contacts { color:rgba(255,255,255,.7); }
.jx-forest .jx-body  { padding:28px 40px; }
.jx-forest .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#2e7d32; border-bottom:2px solid #c8e6c9; padding-bottom:5px; margin-bottom:12px; }
.jx-forest .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-forest .jx-edate { color:#2e7d32; font-weight:600; font-size:11.5px; }
.jx-forest .jx-esub  { color:#388e3c; font-weight:500; }
.jx-forest .jx-eresp { color:#555; border-top:1px dashed #e0e0e0; }
.jx-forest .jx-skill { background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; padding:4px 12px; border-radius:100px; font-size:12px; font-weight:500; }
.jx-forest .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-forest .jx-link  { color:#2e7d32; word-break:break-all; }

/* ══════════════════
   4. VIOLET PURPLE
   Rich purple header
══════════════════ */
.jx-violet .jx-hdr { background:linear-gradient(135deg,#6a1b9a 0%,#4a148c 100%); color:#fff; padding:30px 40px 26px; display:flex; gap:22px; align-items:flex-start; }
.jx-violet .jx-photo { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.35); flex-shrink:0; }
.jx-violet .jx-ini   { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; flex-shrink:0; }
.jx-violet .jx-name  { font-family:'Raleway',sans-serif; font-size:26px; font-weight:700; margin:0 0 2px; }
.jx-violet .jx-role  { font-size:13px; opacity:.75; margin:0; }
.jx-violet .jx-contacts { color:rgba(255,255,255,.7); }
.jx-violet .jx-body  { padding:28px 40px; }
.jx-violet .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#6a1b9a; border-bottom:2px solid #e1bee7; padding-bottom:5px; margin-bottom:12px; }
.jx-violet .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-violet .jx-edate { color:#6a1b9a; font-weight:600; font-size:11.5px; }
.jx-violet .jx-esub  { color:#7b1fa2; font-weight:500; }
.jx-violet .jx-eresp { color:#555; border-top:1px dashed #e0e0e0; }
.jx-violet .jx-skill { background:#f3e5f5; color:#6a1b9a; border:1px solid #e1bee7; padding:4px 12px; border-radius:100px; font-size:12px; font-weight:500; }
.jx-violet .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-violet .jx-link  { color:#6a1b9a; word-break:break-all; }

/* ══════════════════
   5. SUNSET GRADIENT
   Orange-to-amber gradient header
══════════════════ */
.jx-sunset .jx-hdr { background:linear-gradient(135deg,#e65100,#ff9800); color:#fff; padding:30px 40px 26px; display:flex; gap:22px; align-items:flex-start; }
.jx-sunset .jx-photo { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.4); flex-shrink:0; }
.jx-sunset .jx-ini   { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.18); border:3px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; flex-shrink:0; }
.jx-sunset .jx-name  { font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; margin:0 0 2px; }
.jx-sunset .jx-role  { font-size:13px; opacity:.8; margin:0; }
.jx-sunset .jx-contacts { color:rgba(255,255,255,.8); }
.jx-sunset .jx-body  { padding:28px 40px; }
.jx-sunset .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#e65100; border-bottom:2px solid #ffe0b2; padding-bottom:5px; margin-bottom:12px; }
.jx-sunset .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-sunset .jx-edate { color:#e65100; font-weight:600; font-size:11.5px; }
.jx-sunset .jx-esub  { color:#f57c00; font-weight:500; }
.jx-sunset .jx-eresp { color:#555; border-top:1px dashed #eee; }
.jx-sunset .jx-skill { background:#fff3e0; color:#e65100; border:1px solid #ffcc80; padding:4px 12px; border-radius:100px; font-size:12px; font-weight:500; }
.jx-sunset .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-sunset .jx-link  { color:#e65100; word-break:break-all; }

/* ══════════════════
   6. CORAL PINK SIDEBAR
   Pink header + two-column with sidebar
══════════════════ */
.jx-coral .jx-hdr { background:linear-gradient(135deg,#d81b60,#880e4f); color:#fff; padding:26px 32px 22px; display:flex; gap:18px; align-items:center; }
.jx-coral .jx-photo { width:74px; height:74px; border-radius:8px; object-fit:cover; border:3px solid rgba(255,255,255,.35); flex-shrink:0; }
.jx-coral .jx-ini   { width:74px; height:74px; border-radius:8px; background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#fff; flex-shrink:0; }
.jx-coral .jx-name  { font-family:'Poppins',sans-serif; font-size:22px; font-weight:700; margin:0 0 2px; }
.jx-coral .jx-role  { font-size:13px; opacity:.75; margin:0; }
.jx-coral .jx-contacts { color:rgba(255,255,255,.7); font-size:11.5px; }
.jx-coral .jx-body  { display:grid; grid-template-columns:190px 1fr; }
.jx-coral .jx-sidebar { background:#880e4f; color:#fff; padding:22px 18px; }
.jx-coral .jx-main  { padding:22px 26px; }
.jx-coral .jx-sec-title { font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-bottom:2px solid; padding-bottom:4px; margin-bottom:10px; }
.jx-coral .jx-sidebar .jx-sec-title { color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.2); }
.jx-coral .jx-main .jx-sec-title { color:#d81b60; border-color:#fce4ec; }
.jx-coral .jx-summary { font-size:13px; line-height:1.7; color:#444; }
.jx-coral .jx-sidebar .jx-summary, .jx-coral .jx-sidebar .jx-text { font-size:12.5px; color:rgba(255,255,255,.75); }
.jx-coral .jx-edate { font-size:11px; color:#888; }
.jx-coral .jx-main .jx-edate { color:#d81b60; font-weight:600; }
.jx-coral .jx-esub  { color:#d81b60; font-weight:500; }
.jx-coral .jx-eresp { color:#555; border-top:1px dashed #eee; }
.jx-coral .jx-skill { display:block; font-size:12px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.85); }
.jx-coral .jx-skill:last-child { border-bottom:none; }
.jx-coral .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-coral .jx-link  { color:#d81b60; word-break:break-all; font-size:12px; }

/* ══════════════════
   7. TEAL SIDEBAR
   Dark sidebar left, teal accents
══════════════════ */
.jx-teal { display:flex; min-height:800px; }
.jx-teal .jx-left { width:210px; background:#004d40; color:#fff; padding:36px 20px; flex-shrink:0; display:flex; flex-direction:column; gap:0; }
.jx-teal .jx-photo { width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.3); display:block; margin:0 auto 14px; }
.jx-teal .jx-ini   { width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.1); border:3px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#fff; margin:0 auto 14px; }
.jx-teal .jx-name  { font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; text-align:center; margin:0 0 3px; color:#fff; }
.jx-teal .jx-role  { font-size:11px; text-align:center; color:rgba(255,255,255,.6); margin:0 0 14px; }
.jx-teal .jx-contacts { flex-direction:column; gap:6px; font-size:11px; color:rgba(255,255,255,.7); }
.jx-teal .jx-contacts span { display:block; }
.jx-teal .jx-right { flex:1; padding:30px 32px; }
.jx-teal .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.jx-teal .jx-left .jx-sec-title { color:rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:5px; margin:16px 0 10px; }
.jx-teal .jx-right .jx-sec-title { color:#00695c; border-bottom:2px solid #b2dfdb; padding-bottom:5px; margin-bottom:12px; }
.jx-teal .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-teal .jx-left .jx-summary { font-size:12px; color:rgba(255,255,255,.75); }
.jx-teal .jx-edate { color:#00695c; font-weight:600; font-size:11.5px; }
.jx-teal .jx-esub  { color:#00796b; font-weight:500; }
.jx-teal .jx-eresp { color:#555; border-top:1px dashed #e0e0e0; }
.jx-teal .jx-skill { display:block; font-size:12px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.82); }
.jx-teal .jx-skill:last-child { border-bottom:none; }
.jx-teal .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-teal .jx-left .jx-text { font-size:12px; color:rgba(255,255,255,.75); }
.jx-teal .jx-link  { color:#00695c; word-break:break-all; font-size:12px; }

/* ══════════════════
   8. GOLD & DARK
   Dark header with gold accents
══════════════════ */
.jx-gold .jx-hdr { background:#212121; color:#fff; padding:30px 40px 26px; display:flex; gap:22px; align-items:flex-start; border-top:5px solid #f9a825; }
.jx-gold .jx-photo { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid #f9a825; flex-shrink:0; }
.jx-gold .jx-ini   { width:84px; height:84px; border-radius:50%; background:rgba(249,168,37,.15); border:3px solid #f9a825; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#f9a825; flex-shrink:0; }
.jx-gold .jx-name  { font-family:'Raleway',sans-serif; font-size:26px; font-weight:700; margin:0 0 2px; color:#fff; }
.jx-gold .jx-role  { font-size:13px; color:#f9a825; margin:0; font-weight:500; }
.jx-gold .jx-contacts { color:rgba(255,255,255,.6); }
.jx-gold .jx-body  { padding:28px 40px; }
.jx-gold .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#f9a825; border-bottom:2px solid #fff8e1; padding-bottom:5px; margin-bottom:12px; }
.jx-gold .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-gold .jx-edate { color:#f9a825; font-weight:600; font-size:11.5px; }
.jx-gold .jx-esub  { color:#f57f17; font-weight:500; }
.jx-gold .jx-eresp { color:#555; border-top:1px dashed #eee; }
.jx-gold .jx-skill { background:#fff8e1; color:#e65100; border:1px solid #ffe082; padding:4px 12px; border-radius:100px; font-size:12px; font-weight:500; }
.jx-gold .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-gold .jx-link  { color:#f9a825; word-break:break-all; }

/* ══════════════════
   9. SLATE SIDEBAR
   Slate grey left bar sidebar
══════════════════ */
.jx-slate { display:flex; min-height:800px; }
.jx-slate .jx-bar  { width:8px; background:#37474f; flex-shrink:0; }
.jx-slate .jx-body { flex:1; padding:34px 34px 34px 30px; }
.jx-slate .jx-hdr  { display:flex; gap:18px; align-items:center; margin-bottom:22px; padding-bottom:18px; border-bottom:2px solid #37474f; }
.jx-slate .jx-photo { width:84px; height:84px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.jx-slate .jx-ini   { width:84px; height:84px; border-radius:6px; background:#eceff1; border:2px solid #cfd8dc; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#37474f; flex-shrink:0; }
.jx-slate .jx-name  { font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; margin:0 0 2px; color:#263238; }
.jx-slate .jx-role  { font-size:13px; color:#37474f; font-weight:600; margin:0; text-transform:uppercase; letter-spacing:.06em; }
.jx-slate .jx-contacts { color:#78909c; }
.jx-slate .jx-sec-title { font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#263238; margin-bottom:11px; display:flex; align-items:center; gap:10px; }
.jx-slate .jx-sec-title::after { content:''; flex:1; height:2px; background:#eceff1; }
.jx-slate .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-slate .jx-edate { background:#eceff1; color:#546e7a; padding:2px 9px; border-radius:100px; font-size:11px; font-weight:500; white-space:nowrap; }
.jx-slate .jx-esub  { color:#37474f; font-weight:600; }
.jx-slate .jx-eresp { color:#555; border-top:1px dashed #eceff1; }
.jx-slate .jx-skill { background:#37474f; color:#fff; padding:5px 13px; border-radius:4px; font-size:12px; font-weight:600; }
.jx-slate .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-slate .jx-link  { color:#1976d2; word-break:break-all; font-size:13px; }

/* ══════════════════
   10. MINIMAL BLACK
   Stark white, black typography
══════════════════ */
.jx-minimal { padding:44px 50px; }
.jx-minimal .jx-hdr { display:flex; gap:18px; align-items:center; margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid #222; }
.jx-minimal .jx-photo { width:68px; height:68px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.jx-minimal .jx-ini   { width:68px; height:68px; border-radius:50%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#333; flex-shrink:0; }
.jx-minimal .jx-name  { font-family:'Poppins',sans-serif; font-size:24px; font-weight:700; margin:0 0 2px; color:#111; }
.jx-minimal .jx-role  { font-size:13px; color:#555; font-weight:500; margin:0; }
.jx-minimal .jx-contacts { color:#888; }
.jx-minimal .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#999; margin-bottom:10px; }
.jx-minimal .jx-summary { font-size:13.5px; line-height:1.78; color:#444; }
.jx-minimal .jx-entry { padding-bottom:12px; border-bottom:1px solid #f0f0f0; }
.jx-minimal .jx-entry:last-child { border-bottom:none; }
.jx-minimal .jx-edate { font-size:12px; color:#999; }
.jx-minimal .jx-esub  { color:#555; font-weight:500; }
.jx-minimal .jx-eresp { color:#666; border-top:1px dashed #eee; }
.jx-minimal .jx-skill { background:#f5f5f5; color:#444; border:1px solid #ddd; padding:4px 11px; border-radius:4px; font-size:12px; font-weight:500; }
.jx-minimal .jx-text  { font-size:13.5px; line-height:1.75; color:#444; }
.jx-minimal .jx-link  { color:#333; word-break:break-all; }

/* ══════════════════
   11. ELEGANT GOLD
   Serif font, gold ornamental dividers
══════════════════ */
.jx-elegant { padding:44px 50px; font-family:'Playfair Display',Georgia,serif; color:#3e2723; }
.jx-elegant .jx-hdr { text-align:center; padding-bottom:16px; }
.jx-elegant .jx-photo { width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid #b8860b; display:block; margin:0 auto 12px; }
.jx-elegant .jx-ini   { width:90px; height:90px; border-radius:50%; background:#fff8e1; border:3px solid #b8860b; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:#b8860b; margin:0 auto 12px; }
.jx-elegant .jx-name  { font-size:29px; font-weight:700; letter-spacing:.03em; margin:0 0 4px; color:#3e2723; }
.jx-elegant .jx-role  { font-size:15px; color:#b8860b; font-style:italic; margin:0; }
.jx-elegant .jx-contacts { justify-content:center; font-size:13px; color:#795548; font-family:'Lato',sans-serif; }
.jx-elegant .jx-divider { display:flex; align-items:center; gap:12px; margin:16px 0; }
.jx-elegant .jx-divider::before, .jx-elegant .jx-divider::after { content:''; flex:1; height:1px; background:linear-gradient(to right,transparent,#b8860b,transparent); }
.jx-elegant .jx-divider span { color:#b8860b; font-size:14px; }
.jx-elegant .jx-sec-title { font-family:'Lato',sans-serif; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#b8860b; text-align:center; margin-bottom:12px; }
.jx-elegant .jx-summary { font-size:15px; line-height:1.78; color:#5d4037; text-align:center; font-style:italic; }
.jx-elegant .jx-entry { text-align:center; }
.jx-elegant .jx-erow  { justify-content:center; gap:10px; }
.jx-elegant .jx-edate { font-style:italic; color:#b8860b; font-family:'Lato',sans-serif; font-size:12px; }
.jx-elegant .jx-esub  { font-style:italic; color:#795548; }
.jx-elegant .jx-eresp { font-style:italic; color:#5d4037; border-top:1px dashed #d7ccc8; text-align:center; font-family:'Lato',sans-serif; font-size:13px; }
.jx-elegant .jx-skill { border:1.5px solid #b8860b; color:#b8860b; padding:4px 14px; border-radius:100px; font-family:'Lato',sans-serif; font-size:13px; }
.jx-elegant .jx-skill-wrap { justify-content:center; }
.jx-elegant .jx-text  { font-size:14px; line-height:1.75; color:#5d4037; text-align:center; font-family:'Lato',sans-serif; }
.jx-elegant .jx-link  { color:#b8860b; word-break:break-all; font-family:'Lato',sans-serif; }

/* ══════════════════
   12. NORDIC
   Dark top banner, ice-blue accents
══════════════════ */
.jx-nordic .jx-hdr-wrap { background:#263238; padding:28px 36px 22px; color:#fff; display:flex; gap:22px; align-items:center; position:relative; }
.jx-nordic .jx-hdr-wrap::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#4fc3f7,#00bcd4); }
.jx-nordic .jx-photo { width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid #4fc3f7; flex-shrink:0; }
.jx-nordic .jx-ini   { width:80px; height:80px; border-radius:50%; background:rgba(79,195,247,.15); border:3px solid #4fc3f7; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#4fc3f7; flex-shrink:0; }
.jx-nordic .jx-name  { font-family:'Raleway',sans-serif; font-size:25px; font-weight:700; margin:0 0 2px; }
.jx-nordic .jx-role  { font-size:13px; color:#4fc3f7; margin:0; font-weight:500; }
.jx-nordic .jx-contacts { color:rgba(255,255,255,.6); }
.jx-nordic .jx-body  { padding:28px 36px; background:#f5f5f5; min-height:600px; }
.jx-nordic .jx-sec-title { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#263238; border-left:4px solid #4fc3f7; padding-left:10px; margin-bottom:12px; }
.jx-nordic .jx-summary { font-size:13.5px; line-height:1.75; color:#444; }
.jx-nordic .jx-entry { background:#fff; border-radius:6px; padding:10px 14px; margin-bottom:10px; border-left:3px solid #4fc3f7; }
.jx-nordic .jx-edate { color:#0288d1; font-weight:600; font-size:11.5px; }
.jx-nordic .jx-esub  { color:#546e7a; font-weight:500; }
.jx-nordic .jx-eresp { color:#555; border-top:1px dashed #e0e0e0; }
.jx-nordic .jx-skill { background:#e0f7fa; color:#00838f; border:1px solid #b2ebf2; padding:4px 12px; border-radius:100px; font-size:12px; font-weight:500; }
.jx-nordic .jx-text  { font-size:13.5px; line-height:1.72; color:#444; }
.jx-nordic .jx-link  { color:#0288d1; word-break:break-all; }


/* ══ RESPONSIVE ══ */
@media (max-width:950px) {
  .rbpro-root { flex-direction:column; overflow-y:auto; }
  .rb-form { width:100% !important; max-width:100% !important; min-width:0 !important; height:auto !important; min-height:auto; flex-shrink:0; border-right:none; border-bottom:1px solid var(--rb-border); overflow-y:visible; }
  .rb-preview { height:85vh !important; flex-shrink:0; }
  .rb-canvas { padding:16px; }
  .jx-coral .jx-body { grid-template-columns:1fr; }
  .jx-coral .jx-sidebar { padding:18px 22px; }
  .jx-teal { flex-direction:column; }
  .jx-teal .jx-left { width:100%; flex-direction:row; flex-wrap:wrap; padding:20px 24px; gap:16px; }
  .jx-teal .jx-photo, .jx-teal .jx-ini { width:60px; height:60px; font-size:16px; margin:0; }
  .jx-teal .jx-name { text-align:left; font-size:14px; }
  .jx-teal .jx-contacts { flex-direction:row; flex-wrap:wrap; gap:4px 12px; }
  .jx-slate { flex-direction:column; }
  .jx-slate .jx-bar { width:100%; height:6px; }
  .jx-slate .jx-body { padding:22px 18px; }
  .jx-minimal { padding:24px 20px; }
  .jx-elegant { padding:24px 18px; }
  .jx-crimson .jx-hdr, .jx-crimson .jx-body,
  .jx-ocean .jx-hdr,   .jx-ocean .jx-body,
  .jx-forest .jx-hdr,  .jx-forest .jx-body,
  .jx-violet .jx-hdr,  .jx-violet .jx-body,
  .jx-sunset .jx-hdr,  .jx-sunset .jx-body,
  .jx-gold .jx-hdr,    .jx-gold .jx-body,
  .jx-nordic .jx-hdr-wrap, .jx-nordic .jx-body { padding-left:22px; padding-right:22px; }
}
@media (max-width:560px) {
  .rb-panel { padding:20px 16px 26px; }
  .rb-g2 { grid-template-columns:1fr; }
  .rb-tpl-grid { grid-template-columns:repeat(2,1fr); }
  .rb-toolbar { padding:10px 12px; }
  .rb-tb span { display:none; }
  .rb-tb { padding:8px 10px; }
}

/* ── Share link box ── */
.rb-share-link-box { background:var(--rb-bg); border:1.5px solid var(--rb-border); border-radius:10px; padding:14px; margin-bottom:16px; }
.rb-share-link-label { font-size:12px; font-weight:600; color:var(--rb-dark); margin-bottom:8px; }
.rb-share-link-row { display:flex; gap:8px; }
.rb-share-url-input { flex:1; padding:9px 12px; border:1.5px solid var(--rb-border); border-radius:7px; font-family:inherit; font-size:12.5px; color:var(--rb-txt); background:#fff; outline:none; cursor:text; }
.rb-share-url-input:focus { border-color:var(--rb-primary); }
.rb-copy-link-btn { padding:9px 16px; background:var(--rb-primary); color:#fff; border:none; border-radius:7px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s; flex-shrink:0; }
.rb-copy-link-btn:hover { background:var(--rb-primary-dk); }
.rb-copy-link-btn.copied { background:#2e7d32; }
.rb-share-link-note { font-size:11px; color:var(--rb-muted); margin:8px 0 0; line-height:1.5; }
.rb-share-link-loading { text-align:center; padding:14px; font-size:13px; color:var(--rb-muted); margin-bottom:16px; }

/* ══════════════════════════════════════════════════
   LANDING SCREEN
══════════════════════════════════════════════════ */
.rb-screen-landing { padding:32px 26px 36px; display:flex; flex-direction:column; gap:0; }

.rb-landing-hero { text-align:center; margin-bottom:30px; }
.rb-landing-icon { width:72px; height:72px; background:var(--rb-primary-xs); border:2px solid var(--rb-primary-lt); border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.rb-landing-icon svg { stroke:var(--rb-primary); }
.rb-landing-title { font-family:'Poppins',sans-serif; font-size:22px; font-weight:700; color:var(--rb-dark); margin:0 0 10px; }
.rb-landing-sub   { font-size:14px; color:var(--rb-muted); margin:0; line-height:1.6; }

.rb-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.rb-choice-card {
  background:#fff; border:2px solid var(--rb-border); border-radius:14px;
  padding:22px 16px 18px; cursor:pointer; text-align:center;
  font-family:inherit; transition:border-color .2s, transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.rb-choice-card:hover {
  border-color:var(--rb-primary); transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(0,0,0,.1);
}
.rb-choice-card h2 { font-family:'Poppins',sans-serif; font-size:14px; font-weight:700; color:var(--rb-dark); margin:0; }
.rb-choice-card p  { font-size:12.5px; color:var(--rb-muted); margin:0; line-height:1.55; }

.rb-choice-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rb-choice-icon-upload { background:linear-gradient(135deg,var(--rb-primary-xs),var(--rb-primary-lt)); }
.rb-choice-icon-upload svg { stroke:var(--rb-primary); }
.rb-choice-icon-new { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.rb-choice-icon-new svg { stroke:#2e7d32; }

.rb-choice-badge { font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:100px; background:var(--rb-primary-xs); color:var(--rb-primary); border:1px solid var(--rb-primary-lt); }

/* ══════════════════════════════════════════════════
   UPLOAD SCREEN
══════════════════════════════════════════════════ */
.rb-screen-upload { padding:0 0 30px; display:flex; flex-direction:column; }

.rb-upload-header { padding:20px 26px 16px; }
.rb-back-to-landing {
  display:inline-flex; align-items:center; gap:6px; background:none; border:none;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--rb-muted);
  cursor:pointer; padding:0 0 12px; transition:color .15s;
}
.rb-back-to-landing:hover { color:var(--rb-primary); }
.rb-upload-title { font-family:'Poppins',sans-serif; font-size:18px; font-weight:700; color:var(--rb-dark); margin:0 0 6px; }
.rb-upload-sub   { font-size:13px; color:var(--rb-muted); margin:0; }

/* Drop zone */
.rb-upload-zone {
  margin:0 26px; border:2.5px dashed var(--rb-border); border-radius:14px;
  background:var(--rb-bg); transition:border-color .2s, background .2s; overflow:hidden; cursor:pointer;
}
.rb-upload-zone:hover, .rb-upload-zone.rb-drag-over { border-color:var(--rb-primary); background:var(--rb-primary-xs); }
.rb-upload-zone.rb-drag-over { border-style:solid; }

.rb-upload-zone-inner { padding:28px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.rb-upload-zone-icon { width:64px; height:64px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.rb-upload-zone-icon svg { stroke:var(--rb-primary); }
.rb-upload-zone-text { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.rb-upload-zone-primary { font-size:14px; font-weight:600; color:var(--rb-dark); }
.rb-upload-zone-or      { font-size:12px; color:var(--rb-muted); }
.rb-upload-browse-btn {
  display:inline-flex; align-items:center; padding:8px 18px; border-radius:7px;
  background:var(--rb-primary); color:#fff; border:none; font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer; transition:background .15s;
}
.rb-upload-browse-btn:hover { background:var(--rb-primary-dk); }
.rb-upload-zone-hint { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.rb-format-pill { background:#fff; border:1px solid var(--rb-border); color:var(--rb-muted); font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:3px 9px; border-radius:100px; }
.rb-upload-hint-text { font-size:11px; color:#bbb; }

/* Selected file */
.rb-upload-selected { padding:16px 18px; display:flex; align-items:center; gap:12px; }
.rb-upload-file-icon { width:40px; height:40px; background:var(--rb-primary-xs); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rb-upload-file-icon svg { stroke:var(--rb-primary); }
.rb-upload-file-info { flex:1; min-width:0; }
.rb-upload-file-name { display:block; font-size:13px; font-weight:600; color:var(--rb-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-upload-file-size { display:block; font-size:11px; color:var(--rb-muted); margin-top:2px; }
.rb-upload-file-remove { background:none; border:none; color:var(--rb-muted); cursor:pointer; font-size:16px; padding:4px 6px; border-radius:5px; transition:color .15s; }
.rb-upload-file-remove:hover { color:var(--rb-primary); }

/* Error */
.rb-upload-error {
  margin:10px 26px 0; display:flex; align-items:center; gap:8px;
  background:#fff3f3; border:1.5px solid #fca5a5; border-radius:8px;
  padding:10px 14px; font-size:13px; font-weight:500; color:#c0392b;
}
.rb-upload-error svg { stroke:#c0392b; flex-shrink:0; }

/* Parse progress */
.rb-parse-progress {
  margin:14px 26px 0; background:var(--rb-bg); border:1.5px solid var(--rb-border);
  border-radius:10px; padding:16px 18px; display:flex; align-items:center; gap:14px;
}
.rb-parse-spinner {
  width:24px; height:24px; border:3px solid var(--rb-primary-lt); border-top-color:var(--rb-primary);
  border-radius:50%; flex-shrink:0; animation:rbSpin .7s linear infinite;
}
@keyframes rbSpin { to { transform:rotate(360deg); } }
.rb-parse-steps { display:flex; flex-direction:column; gap:4px; }
.rb-parse-step { font-size:12.5px; color:#bbb; font-weight:500; transition:color .3s; }
.rb-parse-step.active { color:var(--rb-dark); }

/* Submit button inside upload screen */
.rb-screen-upload .rb-btn-primary { margin:16px 26px 0; width:auto; }
.rb-screen-upload .rb-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── Screen builder ── */
.rb-screen-builder { display:flex; flex-direction:column; }

/* Step header with restart button */
.rb-step-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.rb-step-header .rb-heading { margin-bottom:0; }
.rb-restart-btn {
  display:inline-flex; align-items:center; gap:5px; background:none; border:1.5px solid var(--rb-border);
  color:var(--rb-muted); font-family:inherit; font-size:11.5px; font-weight:500;
  padding:6px 12px; border-radius:7px; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.rb-restart-btn:hover { border-color:var(--rb-primary); color:var(--rb-primary); background:var(--rb-primary-xs); }

/* Ensure hidden screens are truly hidden */
.rb-screen-landing.rb-hidden,
.rb-screen-upload.rb-hidden,
.rb-screen-builder.rb-hidden { display:none!important; }

@media (max-width:480px) {
  .rb-choice-grid { grid-template-columns:1fr; }
  .rb-screen-landing { padding:24px 16px 28px; }
  .rb-upload-header { padding:16px 16px 12px; }
  .rb-upload-zone { margin:0 16px; }
  .rb-parse-progress { margin:12px 16px 0; }
  .rb-upload-error { margin:10px 16px 0; }
  .rb-screen-upload .rb-btn-primary { margin:14px 16px 0; }
}

/* ══════════════════════════════════════════════════
   ATS SCORE PANEL
══════════════════════════════════════════════════ */

/* ATS button in toolbar */
.rb-tb.ats-btn { background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.3); color:#93c5fd; }
.rb-tb.ats-btn:hover { background:rgba(59,130,246,.28); color:#bfdbfe; }

/* Panel container — sits below toolbar, above canvas */
.rb-ats-panel {
  background:#fff; border-bottom:1px solid var(--rb-border);
  max-height:460px; overflow-y:auto; flex-shrink:0;
  animation: rbAtsSlide .22s ease;
}
@keyframes rbAtsSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.rb-ats-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 20px; border-bottom:1px solid var(--rb-border);
  background:#f8f9ff; position:sticky; top:0; z-index:1;
}
.rb-ats-panel-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#1e3a8a; }
.rb-ats-panel-title svg { stroke:#3b82f6; flex-shrink:0; }
.rb-ats-close { background:none; border:none; font-size:16px; color:var(--rb-muted); cursor:pointer; padding:3px 8px; border-radius:5px; }
.rb-ats-close:hover { background:var(--rb-bg); }

.rb-ats-body { padding:18px 20px; }

/* Loading */
.rb-ats-loading { display:flex; align-items:center; gap:12px; color:var(--rb-muted); font-size:13.5px; padding:10px 0; }

/* Score ring */
.rb-ats-score-row { display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.rb-ats-ring-wrap { position:relative; width:100px; height:100px; flex-shrink:0; }
.rb-ats-ring { width:100%; height:100%; transform:rotate(-90deg); }
.rb-ats-ring-bg   { fill:none; stroke:#f0f2f5; stroke-width:10; }
.rb-ats-ring-fill { fill:none; stroke:#22c55e; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s; }
.rb-ats-ring-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rb-ats-score-num { font-size:26px; font-weight:800; color:var(--rb-dark); line-height:1; }
.rb-ats-score-pct { font-size:11px; color:var(--rb-muted); font-weight:500; }

.rb-ats-grade-block { flex:1; }
.rb-ats-grade { font-family:'Poppins',sans-serif; font-size:20px; font-weight:700; margin-bottom:3px; }
.rb-ats-grade-excellent { color:#16a34a; }
.rb-ats-grade-good      { color:#2563eb; }
.rb-ats-grade-fair      { color:#d97706; }
.rb-ats-grade-poor      { color:#dc2626; }
.rb-ats-grade-sub  { font-size:11px; color:var(--rb-muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-bottom:6px; }
.rb-ats-grade-desc { font-size:13px; color:#555; line-height:1.5; }

/* Checklist */
.rb-ats-checks { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.rb-ats-check {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:7px; font-size:13px;
}
.rb-ats-check-pass    { background:#f0fdf4; }
.rb-ats-check-partial { background:#fffbeb; }
.rb-ats-check-fail    { background:#fff5f5; }
.rb-ats-check-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.rb-ats-check-pass    .rb-ats-check-icon { background:#dcfce7; color:#16a34a; }
.rb-ats-check-partial .rb-ats-check-icon { background:#fef9c3; color:#ca8a04; }
.rb-ats-check-fail    .rb-ats-check-icon { background:#fee2e2; color:#dc2626; }
.rb-ats-check-label { flex:1; color:var(--rb-txt); font-weight:500; }
.rb-ats-pts { font-size:11px; font-weight:700; padding:2px 7px; border-radius:100px; background:#e0f2fe; color:#0369a1; margin-left:auto; }
.rb-ats-pts.zero { background:#fee2e2; color:#dc2626; }
.rb-ats-opt { font-size:10px; font-weight:400; color:var(--rb-muted); background:#f0f0f5; padding:1px 6px; border-radius:100px; margin-left:4px; }

/* Tips */
.rb-ats-tips-title { font-size:12.5px; font-weight:700; color:var(--rb-dark); margin-bottom:8px; }
.rb-ats-tips { display:flex; flex-direction:column; gap:6px; }
.rb-ats-tip { font-size:12.5px; color:#555; background:#fffbeb; border-left:3px solid #f59e0b; padding:7px 12px; border-radius:0 6px 6px 0; line-height:1.5; }

@media (max-width:560px) {
  .rb-ats-score-row { flex-direction:column; text-align:center; }
  .rb-ats-ring-wrap { width:90px; height:90px; }
  .rb-ats-score-num { font-size:22px; }
  .rb-ats-grade-block { text-align:center; }
}

/* ── ATS Score Badge (always visible in toolbar) ── */
.rb-ats-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 10px; border-radius: 100px;
  background: #ef4444; border: none;
  color: #fff; font-family: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer;
  transition: background .2s, transform .15s;
  margin-left: 12px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.rb-ats-badge:hover { transform: scale(1.05); }

.rb-ats-badge-label { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

.rb-ats-badge-score {
  font-size: 16px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 20px; text-align: center; color: #fff;
}

/* Colour tiers — solid backgrounds */
.rb-ats-badge-excellent { background: #16a34a; }
.rb-ats-badge-good      { background: #2563eb; }
.rb-ats-badge-fair      { background: #d97706; }
.rb-ats-badge-poor      { background: #ef4444; }

.rb-ats-badge-excellent:hover { background: #15803d; }
.rb-ats-badge-good:hover      { background: #1d4ed8; }
.rb-ats-badge-fair:hover      { background: #b45309; }
.rb-ats-badge-poor:hover      { background: #dc2626; }


/* ══ Auto-generated Summary Box ══ */
.rb-summary-box {
  border: 2px solid var(--rb-primary-lt);
  border-radius: 12px;
  background: var(--rb-primary-xs);
  padding: 16px;
  margin-bottom: 18px;
}
.rb-summary-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.rb-summary-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--rb-primary);
}
.rb-summary-title svg { stroke: var(--rb-primary); flex-shrink: 0; }
.rb-summary-actions { display: flex; gap: 6px; }

.rb-summary-regen,
.rb-summary-edit {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 6px; border: none;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.rb-summary-regen {
  background: var(--rb-primary-lt); color: var(--rb-primary);
}
.rb-summary-regen:hover { background: #f5c6c2; }
.rb-summary-edit {
  background: var(--rb-primary); color: #fff;
}
.rb-summary-edit:hover { background: var(--rb-primary-dk); }

.rb-summary-preview {
  font-size: 13.5px; line-height: 1.72; color: var(--rb-txt);
  min-height: 60px;
}
.rb-summary-placeholder { color: var(--rb-muted); font-style: italic; font-size: 13px; }

.rb-summary-edit-wrap { margin-top: 6px; }
.rb-summary-edit-wrap textarea {
  width: 100%; padding: 10px 13px; border: 1.5px solid var(--rb-primary);
  border-radius: 8px; font-family: inherit; font-size: 13.5px;
  color: var(--rb-txt); background: #fff; outline: none; resize: vertical;
  line-height: 1.65;
}
.rb-summary-edit-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.rb-summary-save {
  padding: 7px 18px; border-radius: 7px; border: none;
  background: var(--rb-primary); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.rb-summary-save:hover { background: var(--rb-primary-dk); }

/* ══ Drag-to-resize handle ══ */
.rb-resizer {
  width: 6px;
  flex-shrink: 0;
  background: var(--rb-border);
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 10;
}
.rb-resizer:hover,
.rb-resizer.rb-resizing { background: var(--rb-primary); }

.rb-resizer-bar {
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background: rgba(0,0,0,.18);
  transition: background .15s;
}
.rb-resizer:hover .rb-resizer-bar,
.rb-resizer.rb-resizing .rb-resizer-bar { background: rgba(255,255,255,.7); }

/* Hide resizer on mobile */
@media (max-width:950px) { .rb-resizer { display:none; } }