:root{
  --accent: #1B4B66;
  --ink: #19212B;
  --muted: #64748B;
  --bg: #F2F4F7;
  --paper: #FFFFFF;
  --border: #E2E6EC;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --topbar-h: 60px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  margin:0;
}

/* ---------- Top bar ---------- */
.topbar{
  height:var(--topbar-h);
  background:var(--paper);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1030;
}
.topbar-inner{
  height:100%;
  max-width:1600px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand-mark{
  width:36px; height:36px; border-radius:9px;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  flex-shrink:0;
}
.brand-text{font-family:var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.1;}
.brand-accent{color:var(--accent);}
.brand-text small{display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem; color:var(--muted); letter-spacing:.02em;}
.topbar-actions{display:flex; align-items:center; gap:10px;}
.save-status{font-size:.8rem;}
.lang-switch .btn-lang{border:1px solid var(--border); background:#fff; color:var(--muted); font-size:.72rem; font-weight:700; padding:4px 10px;}
.lang-switch .btn-lang.active{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ---------- Mobile toggle ---------- */
.mobile-toggle{position:sticky; top:var(--topbar-h); z-index:1020; background:var(--paper); border-bottom:1px solid var(--border); padding:8px 12px;}
.btn-view{border:1px solid var(--border); background:#fff; color:var(--muted); font-size:.85rem;}
.btn-view.active{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ---------- Builder layout ---------- */
.builder{
  display:flex;
  min-height:calc(100vh - var(--topbar-h));
  max-width:1600px; margin:0 auto;
}
.form-pane{
  width:44%; min-width:400px;
  border-right:1px solid var(--border);
  background:var(--paper);
}
.form-pane-inner{padding:20px 24px;}
.preview-pane{
  width:56%;
  background:var(--bg);
}
.preview-scroll{
  position:sticky; top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
  display:flex; justify-content:center;
  padding:32px 20px;
}

@media (max-width:991.98px){
  .builder{display:block;}
  .form-pane,.preview-pane{width:100%; min-width:0;}
  .preview-pane{display:none;}
  .preview-scroll{position:static; height:auto; padding:16px;}
  body.view-preview .preview-pane{display:block;}
  body.view-preview .form-pane{display:none;}
}

/* ---------- Template & color pickers ---------- */
.section-label{font-family:var(--font-display); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; display:block;}
.template-picker{padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; margin-bottom:20px;}
.color-options{display:flex; gap:8px;}
.clr-btn{
  --c:#1B4B66;
  width:26px; height:26px; border-radius:50%; background:var(--c);
  border:2px solid #fff; box-shadow:0 0 0 1.5px var(--border); cursor:pointer;
}
.clr-btn.active{box-shadow:0 0 0 2px var(--c);}

/* ---------- Accordion ---------- */
.accordion-button{font-family:var(--font-display); font-weight:600; font-size:.92rem;}
.accordion-button:not(.collapsed){background:#EEF3F6; color:var(--accent);}
.accordion-button:focus{box-shadow:none; border-color:var(--border);}
.form-label{font-size:.83rem; font-weight:600; color:var(--ink); margin-bottom:4px;}

/* ---------- Repeatable cards ---------- */
.repeat-card{border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; background:#FBFCFD;}
.repeat-card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.repeat-card-title{font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.btn-remove{border:none; background:none; color:#B94A48; font-size:.95rem; padding:2px 6px;}
.btn-add{border:1.5px dashed var(--accent); color:var(--accent); background:#fff; font-size:.85rem; font-weight:600; border-radius:8px; padding:8px 14px; width:100%;}
.btn-add:hover{background:#EEF3F6; color:var(--accent);}

/* ---------- Skill tags ---------- */
.skill-tags{display:flex; flex-wrap:wrap; gap:8px;}
.skill-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:#EEF3F6; color:var(--accent); border:1px solid var(--border);
  border-radius:20px; padding:5px 12px; font-size:.82rem; font-weight:600;
}
.skill-tag button{border:none; background:none; color:var(--accent); opacity:.6; line-height:1; padding:0;}
.skill-tag button:hover{opacity:1;}

/* ---------- Resume sheet (shared) ---------- */
.resume-sheet{
  width:794px; min-height:1123px;
  background:var(--paper);
  box-shadow:0 4px 24px rgba(20,30,45,.12);
  color:#222;
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.5;
}
.rs-empty{display:flex; align-items:center; justify-content:center; height:1123px; color:#B6BCC6; font-size:.95rem; text-align:center; padding:40px;}

/* ===== Shared entry/heading base — used by all templates unless a template overrides it ===== */
.rs-main-heading{font-family:var(--font-display); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--accent); margin:16px 0 8px;}
.rs-main-heading:first-child{margin-top:0;}
.rs-summary{font-size:.85rem; color:#333;}
.rs-entry{margin-bottom:12px;}
.rs-entry-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px;}
.rs-entry-title{font-weight:700; font-size:.88rem; color:#171b21;}
.rs-entry-sub{font-size:.82rem; color:#333; font-weight:600; margin-top:1px;}
.rs-entry-date{font-size:.75rem; color:#777; white-space:nowrap;}
.rs-entry ul{margin:6px 0 0 18px; padding:0; font-size:.82rem; color:#333;}
.rs-entry ul li{margin-bottom:3px;}
.rs-project-link{font-size:.75rem; color:var(--accent);}
.rs-contact-item{display:flex; align-items:center; gap:8px; font-size:.8rem; margin-bottom:7px; color:#333;}
.rs-side-skill{font-size:.82rem; margin-bottom:6px; color:#333;}
.rs-lang-row{display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:6px; color:#333;}
.rs-side-heading{font-family:var(--font-display); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:#333; margin-bottom:9px;}

/* ===== MODERN template ===== */
.resume-sheet.modern{display:flex;}
.modern .rs-side{
  width:34%; background:var(--accent); color:#fff; padding:34px 22px;
}
.modern .rs-photo{width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.5); margin-bottom:16px; display:block;}
.modern .rs-name{font-family:var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.2; margin-bottom:2px;}
.modern .rs-title{font-size:.85rem; opacity:.9; margin-bottom:20px;}
.modern .rs-side-block{margin-bottom:22px;}
.modern .rs-side-heading{font-family:var(--font-display); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; opacity:.85; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:5px; margin-bottom:10px;}
.modern .rs-contact-item{display:flex; gap:8px; font-size:.78rem; margin-bottom:7px; word-break:break-word; opacity:.95;}
.modern .rs-side-skill{font-size:.8rem; margin-bottom:6px; opacity:.95;}
.modern .rs-side-skill::before{content:"▸ "; opacity:.7;}
.modern .rs-lang-row{display:flex; justify-content:space-between; font-size:.78rem; margin-bottom:6px; opacity:.95;}
.modern .rs-main{width:66%; padding:34px 28px;}
.modern .rs-main-heading{font-family:var(--font-display); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:5px; margin-bottom:12px; margin-top:22px;}
.modern .rs-main-heading:first-child{margin-top:0;}
.modern .rs-summary{font-size:.85rem; color:#333;}
.modern .rs-entry{margin-bottom:14px;}
.modern .rs-entry-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px;}
.modern .rs-entry-title{font-weight:700; font-size:.9rem;}
.modern .rs-entry-sub{color:var(--accent); font-size:.82rem; font-weight:600;}
.modern .rs-entry-date{font-size:.75rem; color:#777; white-space:nowrap;}
.modern .rs-entry ul{margin:6px 0 0 18px; padding:0; font-size:.82rem; color:#333;}
.modern .rs-entry ul li{margin-bottom:3px;}
.modern .rs-project-link{font-size:.75rem; color:var(--accent);}

/* ===== CLASSIC (ATS) template ===== */
.resume-sheet.classic{padding:40px 46px; display:block;}
.classic .rs-header{border-bottom:2px solid var(--accent); padding-bottom:14px; margin-bottom:16px;}
.classic .rs-name{font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#111;}
.classic .rs-title{font-size:.88rem; color:var(--accent); font-weight:600; margin-top:2px;}
.classic .rs-contact-line{font-size:.78rem; color:#444; margin-top:8px; display:flex; flex-wrap:wrap; gap:4px 14px;}
.classic .rs-main-heading{font-family:var(--font-display); font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--accent); margin-top:18px; margin-bottom:8px;}
.classic .rs-main-heading:first-of-type{margin-top:0;}
.classic .rs-summary{font-size:.85rem; color:#333;}
.classic .rs-entry{margin-bottom:12px;}
.classic .rs-entry-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px;}
.classic .rs-entry-title{font-weight:700; font-size:.88rem; color:#111;}
.classic .rs-entry-sub{font-size:.82rem; color:#333; font-weight:600;}
.classic .rs-entry-date{font-size:.75rem; color:#666; white-space:nowrap;}
.classic .rs-entry ul{margin:5px 0 0 18px; padding:0; font-size:.82rem; color:#333;}
.classic .rs-entry ul li{margin-bottom:3px;}
.classic .rs-skills-line{font-size:.82rem; color:#333;}
.classic .rs-lang-line{font-size:.82rem; color:#333;}
.classic .rs-project-link{font-size:.75rem; color:var(--accent);}

/* ---------- Print ---------- */
@media print{
  .topbar,.mobile-toggle,.form-pane,.toast-wrap{display:none !important;}
  .preview-pane{display:block !important; width:100% !important; background:#fff;}
  .preview-scroll{padding:0; position:static; height:auto; display:block !important;}
  .resume-sheet{box-shadow:none;}
  body{background:#fff;}
}

/* ============================================================
   5 ADDITIONAL TEMPLATES
============================================================ */

/* ===== NAVY — light sidebar + navy top band, icon-badge section headings ===== */
.resume-sheet.navy{display:block; padding:0; overflow:hidden;}
.navy .navy-band{background:var(--accent); display:flex; align-items:center; min-height:96px;}
.navy .navy-band-spacer{width:34%; flex-shrink:0;}
.navy .navy-band-text{width:66%; padding:0 30px; color:#fff;}
.navy .navy-band-text .rs-name{font-family:var(--font-display); font-weight:800; font-size:1.4rem; letter-spacing:.02em;}
.navy .navy-band-text .rs-title{font-size:.85rem; opacity:.85; text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}
.navy .navy-body{display:flex;}
.navy .navy-side{width:34%; flex-shrink:0; background:#EFF1F3; padding:20px 22px 30px;}
.navy .navy-photo{width:104px; height:104px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 2px 10px rgba(20,30,45,.18); margin-top:-72px; margin-bottom:16px; display:block;}
.navy .navy-side .rs-side-block{margin-bottom:20px;}
.navy .navy-main{width:66%; padding:26px 30px;}
.navy .navy-main-heading{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--accent); margin:18px 0 10px;}
.navy .navy-main-heading:first-child{margin-top:0;}
.navy .navy-badge{width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0;}

/* ===== TIMELINE — dark top band + light sidebar + timeline experience ===== */
.resume-sheet.timeline{display:block; padding:0; overflow:hidden;}
.timeline .timeline-band{background:#222; display:flex; align-items:center; gap:18px; padding:22px 26px; min-height:110px;}
.timeline .timeline-photo{width:78px; height:78px; border-radius:50%; object-fit:cover; border:3px solid #fff; flex-shrink:0;}
.timeline .timeline-band-text .rs-name{font-family:var(--font-display); color:#fff; font-weight:800; font-size:1.32rem; letter-spacing:.02em;}
.timeline .timeline-band-text .rs-title{color:#ddd; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-top:2px;}
.timeline .timeline-body{display:flex;}
.timeline .timeline-side{width:34%; flex-shrink:0; background:#EFF1F3; padding:22px 20px;}
.timeline .timeline-side .rs-side-heading{border-bottom:1px solid #ccc; padding-bottom:5px;}
.timeline .timeline-side .rs-side-block{margin-bottom:18px;}
.timeline .timeline-main{width:66%; padding:22px 26px;}
.timeline .timeline-contact-row{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.75rem; color:#333; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid #e5e5e5;}
.timeline .timeline-list{border-left:2px solid var(--accent); margin-left:6px; padding-left:16px;}
.timeline .timeline-list .rs-entry{position:relative;}
.timeline .timeline-list .rs-entry::before{content:''; position:absolute; left:-21px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--accent);}

/* ===== DARKSIDEBAR — full-height dark sidebar + dotted timeline main column ===== */
.resume-sheet.darksidebar{display:flex; padding:0; overflow:hidden;}
.darksidebar .ds-side{width:36%; flex-shrink:0; background:#1E1E1E; color:#fff; padding:30px 22px;}
.darksidebar .ds-photo{width:130px; height:130px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 20px;}
.darksidebar .ds-side .rs-side-heading{color:#fff; opacity:.92;}
.darksidebar .ds-side .rs-contact-item,
.darksidebar .ds-side .rs-side-skill,
.darksidebar .ds-side .rs-lang-row{color:#ccc;}
.darksidebar .ds-side .rs-side-block{margin-bottom:20px;}
.darksidebar .ds-main{width:64%; padding:32px 30px;}
.darksidebar .ds-main .rs-name{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#111;}
.darksidebar .ds-main .rs-title{font-size:.85rem; color:#555; margin-bottom:16px;}
.darksidebar .ds-timeline{border-left:2px solid var(--accent); margin-left:6px; padding-left:16px;}
.darksidebar .ds-timeline .rs-entry{position:relative;}
.darksidebar .ds-timeline .rs-entry::before{content:''; position:absolute; left:-21px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--accent);}

/* ===== MINIMALBORDER — bordered card, two-column, ATS-friendly, no photo ===== */
.resume-sheet.minimalborder{display:block; padding:32px; position:relative;}
.minimalborder::before{content:''; position:absolute; inset:14px; border:2.5px solid var(--accent); border-radius:16px; pointer-events:none;}
.minimalborder .mb-inner{padding:16px 20px;}
.minimalborder .mb-header{margin-bottom:16px;}
.minimalborder .mb-header .rs-name{font-family:var(--font-display); font-weight:800; font-size:1.55rem; color:#111;}
.minimalborder .mb-header .rs-title{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:#333; font-weight:700; margin-top:2px;}
.minimalborder .mb-contact-row{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:.76rem; color:#333; margin-top:10px;}
.minimalborder .mb-body{display:flex; gap:26px;}
.minimalborder .mb-col-left{width:38%;}
.minimalborder .mb-col-right{width:62%;}

/* ===== CLEANSPLIT — clean white, photo top-left, two-column body ===== */
.resume-sheet.cleansplit{display:block; padding:32px 34px;}
.cleansplit .cs-header{display:flex; align-items:center; gap:18px; margin-bottom:14px;}
.cleansplit .cs-photo{width:84px; height:84px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.cleansplit .cs-header-text .rs-name{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#111;}
.cleansplit .cs-header-text .rs-title{font-size:.85rem; color:#555; margin-top:1px;}
.cleansplit .cs-contact-row{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.78rem; color:#333; margin-top:6px;}
.cleansplit .cs-divider{height:2px; background:#222; margin-bottom:18px;}
.cleansplit .cs-body{display:flex; gap:26px;}
.cleansplit .cs-col-left{width:34%;}
.cleansplit .cs-col-right{width:66%;}

/* ---------- Template picker grid (7 templates) ---------- */
.template-options{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
.tpl-btn{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 4px; border-radius:8px; border:1.5px solid var(--border);
  background:#fff; font-size:.68rem; color:var(--muted); cursor:pointer; text-align:center;
}
.tpl-btn.active{border-color:var(--accent); color:var(--accent); font-weight:600;}
.tpl-swatch{width:30px; height:38px; border-radius:3px; display:block; border:1px solid var(--border); overflow:hidden; position:relative;}
.tpl-swatch-modern{background:linear-gradient(90deg, var(--accent) 35%, #fff 35%);}
.tpl-swatch-classic{background:#fff; box-shadow:inset 0 0 0 1px var(--border);}
.tpl-swatch-classic::before{content:''; position:absolute; top:4px; left:3px; right:3px; height:2px; background:var(--accent);}
.tpl-swatch-navy{background:linear-gradient(90deg, #EFF1F3 34%, #fff 34%);}
.tpl-swatch-navy::before{content:''; position:absolute; top:0; left:0; right:0; height:9px; background:var(--accent);}
.tpl-swatch-timeline{background:linear-gradient(90deg, #EFF1F3 34%, #fff 34%);}
.tpl-swatch-timeline::before{content:''; position:absolute; top:0; left:0; right:0; height:11px; background:#222;}
.tpl-swatch-darksidebar{background:linear-gradient(90deg, #1E1E1E 36%, #fff 36%);}
.tpl-swatch-minimalborder{background:#fff; box-shadow:inset 0 0 0 2px var(--accent);}
.tpl-swatch-cleansplit{background:#fff; box-shadow:inset 0 0 0 1px var(--border);}
.tpl-swatch-cleansplit::before{content:''; position:absolute; top:5px; left:3px; width:8px; height:8px; border-radius:50%; background:var(--accent);}