/* ============================================================
   CV Builder Online — builder.css
   Editor UI + A4 preview + 10 resume templates + print
   ============================================================ */

body.builder-body{overflow:hidden;height:100vh}

/* ---------- App shell ---------- */
.app{display:flex;flex-direction:column;height:100vh}
.app-toolbar{
  height:60px;flex:none;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);z-index:50;
}
.app-toolbar .logo{font-size:1rem}
.app-toolbar .logo .logo-mark{width:30px;height:30px;border-radius:9px;font-size:.7rem}
.tb-spacer{flex:1}
.tb-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
  font-size:.82rem;font-weight:600;font-family:var(--font-display);
  background:var(--ghost-bg);border:1px solid var(--line);color:var(--ink);
  transition:.2s;
}
.tb-btn:hover:not(:disabled){background:var(--ghost-bg-hover)}
.tb-btn:disabled{opacity:.35;cursor:not-allowed}
.tb-btn.primary{background:var(--grad-primary);border-color:transparent;box-shadow:0 6px 16px -6px rgba(46,91,255,.55)}
.tb-btn.primary:hover{transform:translateY(-1px)}
.tb-save-state{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:88px}
.tb-save-state .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);transition:.3s}
.tb-save-state.saving .dot{background:var(--gold)}

.app-main{flex:1;display:flex;min-height:0}

/* ---------- Editor panel ---------- */
.editor{
  width:460px;flex:none;display:flex;flex-direction:column;min-height:0;
  background:var(--panel);border-right:1px solid var(--line);
}
.editor-tabs{display:flex;flex:none;border-bottom:1px solid var(--line)}
.editor-tab{
  flex:1;padding:13px;font-family:var(--font-display);font-weight:600;font-size:.86rem;
  color:var(--muted);border-bottom:2px solid transparent;transition:.2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.editor-tab.active{color:var(--ink);border-bottom-color:var(--purple)}
.editor-scroll{flex:1;overflow-y:auto;padding:18px 18px 90px;scrollbar-width:thin;scrollbar-color:var(--navy-700) transparent}
.editor-scroll::-webkit-scrollbar{width:8px}
.editor-scroll::-webkit-scrollbar-thumb{background:var(--navy-700);border-radius:4px}

.pane{display:none}
.pane.active{display:block}

/* Section cards */
.sec-card{
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  margin-bottom:14px;overflow:hidden;transition:border-color .2s,opacity .2s;
}
.sec-card.dragging{opacity:.4;border-style:dashed}
.sec-card.drag-over{border-color:var(--cyan)}
.sec-card.disabled-sec .sec-body{display:none}
.sec-card.disabled-sec{opacity:.55}
.sec-head{
  display:flex;align-items:center;gap:9px;padding:12px 12px 12px 8px;user-select:none;
}
.drag-handle{cursor:grab;color:var(--muted);padding:4px 2px;flex:none;touch-action:none}
.drag-handle:active{cursor:grabbing}
.sec-title{font-family:var(--font-display);font-weight:600;font-size:.9rem;flex:1;display:flex;align-items:center;gap:8px}
.sec-actions{display:flex;gap:2px;align-items:center}
.icon-btn{
  width:29px;height:29px;border-radius:8px;display:grid;place-items:center;
  color:var(--muted);transition:.2s;flex:none;
}
.icon-btn:hover{background:var(--ghost-bg-hover);color:var(--ink)}
.icon-btn.danger:hover{background:rgba(236,72,153,.14);color:var(--pink)}
.sec-body{padding:2px 14px 16px;border-top:1px solid var(--ghost-bg)}
.sec-card.collapsed .sec-body{display:none}
.sec-card.collapsed .chev-btn svg{transform:rotate(-90deg)}
.chev-btn svg{transition:transform .25s}

/* Toggle switch */
.switch{position:relative;width:36px;height:20px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.switch .track{
  position:absolute;inset:0;border-radius:999px;background:rgba(147,160,196,.25);transition:.25s;
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:.25s;
}
.switch input:checked + .track{background:var(--grad-primary)}
.switch input:checked + .track::after{transform:translateX(16px)}

/* Fields */
.field{margin-top:12px}
.field label{display:block;font-size:.74rem;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.03em}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],
.field input[type=month],.field select,.field textarea{
  width:100%;padding:10px 12px;border-radius:10px;font-size:.88rem;
  background:var(--input-bg);border:1px solid var(--line);color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18);
}
.field textarea{resize:vertical;min-height:74px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field .hint{font-size:.7rem;color:var(--muted);margin-top:5px}

/* Entry (repeatable item) */
.entry{
  border:1px solid rgba(147,160,196,.14);border-radius:12px;padding:2px 13px 14px;
  margin-top:12px;background:var(--input-bg);position:relative;
}
.entry-top{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.entry-top b{font-size:.78rem;color:var(--cyan);font-family:var(--font-display)}
.add-entry{
  margin-top:12px;width:100%;padding:10px;border-radius:10px;border:1px dashed rgba(147,160,196,.35);
  color:var(--muted);font-size:.82rem;font-weight:600;transition:.2s;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.add-entry:hover{border-color:var(--purple);color:var(--ink);background:rgba(139,92,246,.08)}

/* Skills tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag-chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 13px;border-radius:999px;
  background:rgba(46,91,255,.14);border:1px solid rgba(46,91,255,.35);font-size:.8rem;font-weight:500;
}
.tag-chip button{color:var(--muted);display:grid;place-items:center}
.tag-chip button:hover{color:var(--pink)}

/* Photo */
.photo-row{display:flex;align-items:center;gap:14px;margin-top:12px}
.photo-preview{
  width:62px;height:62px;border-radius:50%;background:var(--input-bg);
  border:1px solid var(--line);object-fit:cover;flex:none;display:grid;place-items:center;color:var(--muted);
  overflow:hidden;
}
.photo-preview img{width:100%;height:100%;object-fit:cover}

/* Add custom section */
.add-section-btn{
  width:100%;padding:13px;border-radius:14px;border:1px dashed rgba(139,92,246,.5);
  color:var(--badge-purple);font-family:var(--font-display);font-weight:600;font-size:.88rem;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s;
}
.add-section-btn:hover{background:rgba(139,92,246,.1)}

/* ---------- Design pane ---------- */
.design-group{margin-bottom:26px}
.design-group h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}

.tpl-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.tpl-opt{
  border:1.5px solid var(--line);border-radius:12px;padding:11px;text-align:left;transition:.2s;
  background:var(--input-bg);
}
.tpl-opt:hover{border-color:rgba(139,92,246,.5)}
.tpl-opt.active{border-color:var(--purple);background:rgba(139,92,246,.12);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.tpl-opt b{display:block;font-family:var(--font-display);font-size:.84rem;margin-bottom:2px}
.tpl-opt span{font-size:.7rem;color:var(--muted)}

.swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.swatch{
  width:32px;height:32px;border-radius:50%;border:2px solid transparent;transition:.2s;position:relative;
  box-shadow:inset 0 0 0 2px rgba(7,11,26,.5);
}
.swatch.active{border-color:#fff;transform:scale(1.12)}
.swatch-custom{position:relative;overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.swatch-custom input{position:absolute;inset:-6px;opacity:0;cursor:pointer}

.font-picker{display:grid;gap:9px}
.font-opt{
  padding:11px 14px;border-radius:11px;border:1.5px solid var(--line);text-align:left;
  background:var(--input-bg);transition:.2s;display:flex;justify-content:space-between;align-items:center;
}
.font-opt.active{border-color:var(--purple);background:rgba(139,92,246,.12)}
.font-opt b{font-size:.95rem}
.font-opt span{font-size:.7rem;color:var(--muted)}

.slider-row{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.slider-row label{font-size:.82rem;color:var(--muted);width:78px;flex:none}
.slider-row input[type=range]{flex:1;accent-color:var(--purple)}
.slider-row output{font-size:.78rem;color:var(--cyan);width:42px;text-align:right;font-weight:600}

/* ---------- Preview area ---------- */
.preview-wrap{
  flex:1;min-width:0;overflow:auto;display:flex;justify-content:center;
  padding:34px 30px 60px;
  background:
    radial-gradient(700px 400px at 70% 0%,rgba(46,91,255,.09),transparent 60%),
    radial-gradient(600px 400px at 20% 100%,rgba(139,92,246,.08),transparent 60%),
    #0A0F22;
}
.preview-scaler{transform-origin:top center}
.preview-hint{
  position:fixed;bottom:16px;right:22px;font-size:.72rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);padding:7px 13px;border-radius:999px;
  backdrop-filter:blur(10px);z-index:40;
}

/* ============================================================
   THE PAGE (A4) — shared resume structure
   ============================================================ */
.page{
  --acc:#2E5BFF;
  --pg-ink:#1C2536;
  --pg-muted:#5A6478;
  width:210mm;min-height:297mm;background:#fff;color:#1C2536;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.65);
  font-size:calc(10.2pt * var(--scale,1));
  line-height:calc(1.5 * var(--sp,1));
  display:flex;flex-direction:column;
}
.page,.page *{box-sizing:border-box}
.page a{color:inherit;text-decoration:none}

/* font choices */
.page.f-inter{font-family:'Inter',Arial,Helvetica,sans-serif}
.page.f-georgia{font-family:Georgia,'Times New Roman',serif}
.page.f-arial{font-family:Arial,Helvetica,sans-serif}
.page.f-times{font-family:'Times New Roman',Times,serif}
.page.f-trebuchet{font-family:'Trebuchet MS','Segoe UI',sans-serif}

.pg-body{display:flex;flex:1;min-height:0}
.pg-main{flex:1;padding:12mm 13mm;min-width:0}
.pg-side{display:none}

/* Header block */
.pg-header{padding:13mm 13mm 6mm}
.pg-name{font-size:2.15em;font-weight:800;letter-spacing:-.01em;line-height:1.12;color:#141C2E}
.pg-title{font-size:1.06em;font-weight:600;color:var(--acc);margin-top:1.5mm}
.pg-contact{
  display:flex;flex-wrap:wrap;gap:2mm 6mm;margin-top:3mm;
  font-size:.82em;color:#4A5570;
}
.pg-contact span{display:inline-flex;align-items:center;gap:1.6mm}
.pg-contact svg{width:3.2mm;height:3.2mm;color:var(--acc);flex:none}
.pg-photo{width:24mm;height:24mm;border-radius:50%;object-fit:cover;flex:none}

/* Sections */
.pg-sec{margin-bottom:calc(6mm * var(--sp,1))}
.pg-sec:last-child{margin-bottom:0}
.pg-sec-h{
  font-size:.86em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);margin-bottom:calc(2.6mm * var(--sp,1));
  padding-bottom:1.4mm;border-bottom:.55mm solid var(--acc);
}
.pg-p{color:#333D54;white-space:pre-wrap}

.pg-item{margin-bottom:calc(3.8mm * var(--sp,1));break-inside:avoid}
.pg-item:last-child{margin-bottom:0}
.pg-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:6mm}
.pg-item-role{font-weight:700;font-size:1em;color:#141C2E}
.pg-item-date{font-size:.8em;color:#69748F;white-space:nowrap;font-weight:500}
.pg-item-sub{font-size:.9em;color:var(--acc);font-weight:600;margin-top:.4mm}
.pg-item-desc{font-size:.92em;color:#3B455E;margin-top:1.2mm;white-space:pre-wrap}

.pg-skills{display:flex;flex-wrap:wrap;gap:2mm}
.pg-skill{
  padding:1.1mm 3.4mm;border-radius:999px;font-size:.84em;font-weight:600;
  background:color-mix(in srgb,var(--acc) 10%,#fff);color:var(--acc);
  border:.3mm solid color-mix(in srgb,var(--acc) 30%,#fff);
}
.pg-langs{display:flex;flex-wrap:wrap;gap:2mm 8mm}
.pg-lang b{font-weight:700}
.pg-lang span{color:#69748F;font-size:.88em}

/* ============================================================
   TEMPLATE VARIANTS
   ============================================================ */

/* --- Classic: neutral header, thin rules --- */
.tpl-classic .pg-name{font-weight:700}
.tpl-classic .pg-title{color:#3B455E}
.tpl-classic .pg-sec-h{color:#141C2E;border-bottom:.35mm solid #C9D0DE;letter-spacing:.18em}
.tpl-classic .pg-item-sub{color:#3B455E}
.tpl-classic .pg-skill{background:#F0F2F7;color:#333D54;border-color:#DDE2EC}
.tpl-classic .pg-contact svg{color:#69748F}

/* --- Modern (default look) — accent line under header --- */
.tpl-modern .pg-header{border-bottom:1mm solid var(--acc);padding-bottom:5mm;margin-bottom:2mm}

/* --- Minimal: airy, no rules, small caps headings --- */
.tpl-minimal .pg-name{font-weight:600;letter-spacing:.01em}
.tpl-minimal .pg-sec-h{border-bottom:none;color:#8A93AB;font-weight:700;letter-spacing:.24em;font-size:.76em}
.tpl-minimal .pg-title{color:#141C2E;font-weight:500}
.tpl-minimal .pg-skill{background:none;border:none;padding:0;color:#333D54;font-weight:500}
.tpl-minimal .pg-skill + .pg-skill::before{content:"·";margin-right:2mm;color:#B4BCCE}
.tpl-minimal .pg-item-sub{color:#69748F}

/* --- Executive: centered header, gold-friendly serif feel --- */
.tpl-executive .pg-header{text-align:center}
.tpl-executive .pg-contact{justify-content:center}
.tpl-executive .pg-name{letter-spacing:.03em}
.tpl-executive .pg-sec-h{
  text-align:center;border-bottom:none;position:relative;padding-bottom:0;
}
.tpl-executive .pg-sec-h::after{
  content:"";display:block;width:16mm;height:.55mm;background:var(--acc);margin:1.6mm auto 0;
}
.tpl-executive .pg-photo{margin:0 auto 3mm}

/* --- Bold: full accent header band --- */
.tpl-bold .pg-header{
  background:var(--acc);color:#fff;padding:12mm 13mm 9mm;
  display:flex;align-items:center;gap:8mm;
}
.tpl-bold .pg-name,.tpl-bold .pg-title{color:#fff}
.tpl-bold .pg-title{opacity:.92}
.tpl-bold .pg-contact,.tpl-bold .pg-contact svg{color:rgba(255,255,255,.88)}
.tpl-bold .pg-photo{border:.8mm solid rgba(255,255,255,.5)}

/* --- Compact: tighter rhythm, two-line header --- */
.tpl-compact{font-size:calc(9.4pt * var(--scale,1))}
.tpl-compact .pg-header{padding:10mm 13mm 4mm}
.tpl-compact .pg-main{padding:8mm 13mm 10mm}
.tpl-compact .pg-sec{margin-bottom:calc(4.4mm * var(--sp,1))}
.tpl-compact .pg-item{margin-bottom:calc(2.8mm * var(--sp,1))}
.tpl-compact .pg-sec-h{border-bottom-width:.35mm}

/* --- Elegant: hairline left accent on headings --- */
.tpl-elegant .pg-sec-h{
  border-bottom:none;border-left:1mm solid var(--acc);padding:0 0 0 3mm;color:#141C2E;
}
.tpl-elegant .pg-name{font-weight:700}
.tpl-elegant .pg-title{letter-spacing:.06em;text-transform:uppercase;font-size:.9em}

/* --- Corporate: grey header panel --- */
.tpl-corporate .pg-header{background:#F2F4F9;border-bottom:.3mm solid #DDE2EC}
.tpl-corporate .pg-sec-h{border-bottom:.35mm solid #DDE2EC;color:#141C2E}
.tpl-corporate .pg-sec-h::first-letter{color:var(--acc)}
.tpl-corporate .pg-skill{border-radius:2mm}

/* --- Sidebar & Creative: two columns --- */
.tpl-sidebar .pg-side,.tpl-creative .pg-side{
  display:block;width:64mm;flex:none;padding:12mm 8mm;
}
.tpl-sidebar .pg-side{background:#141C2E;color:#E7ECF6}
.tpl-sidebar .pg-side .pg-sec-h{color:#fff;border-bottom-color:var(--acc)}
.tpl-sidebar .pg-side .pg-p,.tpl-sidebar .pg-side .pg-lang span{color:#B7C1D9}
.tpl-sidebar .pg-side .pg-skill{background:rgba(255,255,255,.08);color:#E7ECF6;border-color:rgba(255,255,255,.18)}
.tpl-sidebar .pg-side .pg-contact{flex-direction:column;gap:2.4mm;color:#B7C1D9;margin-top:0}
.tpl-sidebar .pg-header{display:none}
.tpl-sidebar .pg-side .side-name{font-size:1.7em;font-weight:800;color:#fff;line-height:1.15}
.tpl-sidebar .pg-side .side-title{color:var(--acc);font-weight:600;margin:1.5mm 0 5mm;filter:brightness(1.5)}
.tpl-sidebar .pg-side .pg-photo{margin-bottom:4mm}
.tpl-sidebar .pg-main{padding-top:12mm}

.tpl-creative .pg-side{background:color-mix(in srgb,var(--acc) 8%,#fff);border-right:.8mm solid var(--acc)}
.tpl-creative .pg-side .pg-contact{flex-direction:column;gap:2.4mm;margin-top:0}
.tpl-creative .pg-header{display:none}
.tpl-creative .pg-side .side-name{font-size:1.7em;font-weight:800;line-height:1.15;color:#141C2E}
.tpl-creative .pg-side .side-title{color:var(--acc);font-weight:700;margin:1.5mm 0 5mm}
.tpl-creative .pg-side .pg-photo{margin-bottom:4mm;border:.8mm solid var(--acc)}
.tpl-creative .pg-main{padding-top:12mm}

/* Empty state on page */
.pg-empty{
  padding:30mm 20mm;text-align:center;color:#8A93AB;font-size:.95em;
}

/* ============================================================
   PRINT — the whole point
   ============================================================ */
@media print{
  @page{size:A4;margin:0}
  html,body{
    background:#fff !important;overflow:visible !important;
    height:auto !important;width:auto !important;
  }
  body.builder-body{overflow:visible !important}

  /* hide the app chrome completely */
  .app-toolbar,.editor,.preview-hint,.mobile-switch{display:none !important}

  /* flatten every wrapper around the page */
  .app,.app-main,.preview-wrap,.preview-scaler{
    display:block !important;position:static !important;
    height:auto !important;width:auto !important;min-height:0 !important;
    overflow:visible !important;padding:0 !important;margin:0 !important;
    background:#fff !important;transform:none !important;
  }

  .page{
    position:static !important;margin:0 !important;box-shadow:none !important;
    width:210mm !important;min-height:0 !important;
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
  }
  .page *{
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
  }
  .pg-item{break-inside:avoid}
  .pg-sec{break-inside:avoid}
  .pg-sec-h{break-inside:avoid;break-after:avoid}
}

/* ---------- Responsive builder ---------- */
.mobile-switch{display:none}
@media (max-width:920px){
  body.builder-body{overflow:auto}
  .app{height:auto;min-height:100vh}
  .app-main{flex-direction:column}
  .editor{width:100%;border-right:none;max-height:none}
  .editor-scroll{overflow:visible;padding-bottom:24px}
  .preview-wrap{padding:22px 10px 70px;overflow:visible}
  .mobile-switch{
    display:flex;position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:60;
    background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px;
    backdrop-filter:blur(12px);box-shadow:var(--shadow-card);
  }
  .mobile-switch button{
    padding:9px 20px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--muted);
  }
  .mobile-switch button.active{background:var(--grad-primary);color:#fff}
  .app-main.show-preview .editor{display:none}
  .app-main:not(.show-preview) .preview-wrap{display:none}
  .preview-hint{display:none}
  .tb-btn .tb-label{display:none}
  .app-toolbar{gap:8px;padding:0 12px}
  .tb-save-state{min-width:0}
  .tb-save-state .txt{display:none}
}

/* ---------- Light theme: builder ---------- */
[data-theme="light"] .app-toolbar{background:rgba(255,255,255,.92)}
[data-theme="light"] .editor{background:var(--panel)}
[data-theme="light"] .sec-card,[data-theme="light"] .tpl-opt,[data-theme="light"] .font-opt{background:#F8FAFD}
[data-theme="light"] .entry{background:#fff}
[data-theme="light"] .preview-wrap{
  background:
    radial-gradient(700px 400px at 70% 0%,rgba(46,91,255,.06),transparent 60%),
    radial-gradient(600px 400px at 20% 100%,rgba(139,92,246,.05),transparent 60%),
    #E8ECF5;
}
[data-theme="light"] .page{box-shadow:0 24px 60px -22px rgba(20,28,51,.35)}
[data-theme="light"] .tb-btn{background:var(--ghost-bg)}
[data-theme="light"] .tb-btn.primary{background:var(--grad-primary);color:#fff}
[data-theme="light"] .editor-scroll{scrollbar-color:#C7CFDF transparent}
[data-theme="light"] .switch .track{background:rgba(20,28,51,.2)}
[data-theme="light"] .preview-hint{background:#fff}
[data-theme="light"] .mobile-switch{background:#fff}

/* ---------- Print tip modal + toast ---------- */
.cvbo-overlay{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(4,8,20,.6);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.cvbo-overlay.open{opacity:1;pointer-events:auto}
.cvbo-modal{
  width:100%;max-width:420px;padding:26px 26px 22px;border-radius:18px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  transform:translateY(10px);transition:transform .25s;
}
.cvbo-overlay.open .cvbo-modal{transform:none}
.cvbo-modal h3{font-size:1.1rem;margin-bottom:10px}
.cvbo-modal p{color:var(--muted);font-size:.9rem;margin-bottom:10px}
.cvbo-modal ol{margin:0 0 18px 20px;color:var(--text-soft);font-size:.9rem;display:grid;gap:7px}
.cvbo-modal b{color:var(--ink)}
.cvbo-modal-actions{display:flex;gap:10px;justify-content:flex-end}
.cvbo-toast{
  position:fixed;bottom:22px;left:50%;transform:translate(-50%,16px);z-index:210;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:12px 20px;border-radius:12px;font-size:.86rem;font-weight:500;
  box-shadow:var(--shadow-card);opacity:0;transition:.35s;max-width:90vw;text-align:center;
}
.cvbo-toast.in{opacity:1;transform:translate(-50%,0)}

/* ---------- Mobile polish ---------- */
@media (max-width:920px){
  .app-toolbar{
    overflow-x:auto;overflow-y:hidden;justify-content:flex-start;
    scrollbar-width:none;
  }
  .app-toolbar::-webkit-scrollbar{display:none}
  .app-toolbar .logo span:last-child{display:none}
  .tb-spacer{flex:0 0 6px}
  .tb-btn{padding:8px 11px;flex:none}
  .preview-wrap{padding:14px 8px 80px}
  .theme-toggle{width:34px;height:34px}
}

/* ============================================================
   TEMPLATES 11–20
   ============================================================ */

/* --- Gradient: gradient header band (Digital Marketer) --- */
.tpl-gradient .pg-header{
  background:linear-gradient(120deg,var(--acc),color-mix(in srgb,var(--acc) 40%,#101A33));
  color:#fff;padding:12mm 13mm 9mm;
}
.tpl-gradient .pg-name,.tpl-gradient .pg-title{color:#fff}
.tpl-gradient .pg-title{opacity:.92}
.tpl-gradient .pg-contact,.tpl-gradient .pg-contact svg{color:rgba(255,255,255,.9)}

/* --- Split: name left, contacts right, thick rule (Business Analyst) --- */
.tpl-split .pg-header{
  display:flex;justify-content:space-between;align-items:flex-end;gap:8mm;
  border-bottom:1.3mm solid var(--acc);padding-bottom:5mm;
}
.tpl-split .pg-contact{flex-direction:column;align-items:flex-end;gap:1.6mm;margin-top:0;text-align:right}

/* --- Timeline: dotted rail on items (Project Manager) --- */
.tpl-timeline .pg-item{position:relative;padding-left:6mm;border-left:.45mm solid #D9DFEC}
.tpl-timeline .pg-item:last-child{border-left-color:transparent}
.tpl-timeline .pg-item::before{
  content:"";position:absolute;left:-1.25mm;top:1.8mm;width:2.1mm;height:2.1mm;
  border-radius:50%;background:var(--acc);
}
.tpl-timeline .pg-sec-h{border-bottom:none;color:#141C2E}
.tpl-timeline .pg-sec-h::after{content:"";display:block;width:14mm;height:.6mm;background:var(--acc);margin-top:1.2mm}

/* --- Boxed: filled heading chips (Teacher) --- */
.tpl-boxed .pg-sec-h{
  display:inline-block;background:var(--acc);color:#fff;
  padding:1.2mm 4mm;border-radius:1.6mm;border-bottom:none;letter-spacing:.1em;
}
.tpl-boxed .pg-sec{margin-bottom:calc(6.5mm * var(--sp,1))}

/* --- Mono: code vibe (Web Developer) --- */
.tpl-mono .pg-name{text-transform:uppercase;letter-spacing:.05em;font-size:1.85em}
.tpl-mono .pg-sec-h{
  font-family:'Courier New',Courier,monospace;letter-spacing:.06em;
  border-bottom:.4mm dashed var(--acc);
}
.tpl-mono .pg-sec-h::before{content:"// ";color:var(--acc)}
.tpl-mono .pg-skill{border-radius:1.2mm;font-family:'Courier New',Courier,monospace;font-size:.8em}

/* --- Ribbon: tinted heading strips (Chef / Hospitality) --- */
.tpl-ribbon .pg-sec-h{
  background:color-mix(in srgb,var(--acc) 10%,#fff);
  border-bottom:none;border-left:1.3mm solid var(--acc);
  padding:1.6mm 3mm;color:#141C2E;
}

/* --- Tinted: soft color header panel (HR / Office) --- */
.tpl-tinted .pg-header{
  background:color-mix(in srgb,var(--acc) 8%,#fff);
  border-bottom:.7mm solid var(--acc);
}

/* --- Duo: sidebar on the RIGHT (Graphic Designer) --- */
.tpl-duo .pg-header{display:none}
.tpl-duo .pg-side{
  display:block;width:64mm;flex:none;padding:12mm 8mm;order:2;
  background:#141C2E;color:#E7ECF6;
}
.tpl-duo .pg-side .pg-sec-h{color:#fff;border-bottom-color:var(--acc)}
.tpl-duo .pg-side .pg-p,.tpl-duo .pg-side .pg-lang span{color:#B7C1D9}
.tpl-duo .pg-side .pg-skill{background:rgba(255,255,255,.08);color:#E7ECF6;border-color:rgba(255,255,255,.18)}
.tpl-duo .pg-side .pg-contact{flex-direction:column;gap:2.4mm;color:#B7C1D9;margin-top:0}
.tpl-duo .pg-side .side-name{font-size:1.7em;font-weight:800;color:#fff;line-height:1.15}
.tpl-duo .pg-side .side-title{color:var(--acc);font-weight:600;margin:1.5mm 0 5mm;filter:brightness(1.5)}
.tpl-duo .pg-side .pg-photo{margin-bottom:4mm}
.tpl-duo .pg-main{padding-top:12mm}

/* --- Noir: dark resume page (Creative Director) --- */
.tpl-noir{background:#151C33;color:#E8EDFB}
.tpl-noir .pg-name,.tpl-noir .pg-item-role,.tpl-noir .pg-lang b{color:#fff}
.tpl-noir .pg-title{filter:brightness(1.5)}
.tpl-noir .pg-sec-h{filter:brightness(1.4)}
.tpl-noir .pg-p,.tpl-noir .pg-item-desc{color:#C4CDE4}
.tpl-noir .pg-item-sub{filter:brightness(1.55)}
.tpl-noir .pg-contact{color:#A9B4D0}
.tpl-noir .pg-contact svg{filter:brightness(1.5)}
.tpl-noir .pg-item-date,.tpl-noir .pg-lang span{color:#93A0C4}
.tpl-noir .pg-skill{background:rgba(255,255,255,.08);color:#E8EDFB;border-color:rgba(255,255,255,.2)}
.tpl-noir .pg-empty{color:#93A0C4}

/* --- Apex: full-height accent bar (Sales / Real Estate) --- */
.tpl-apex{border-left:5mm solid var(--acc)}
.tpl-apex .pg-sec-h{border-bottom:none;color:#141C2E}
.tpl-apex .pg-sec-h::after{content:"";display:block;width:12mm;height:.7mm;background:var(--acc);margin-top:1.2mm}
.tpl-apex .pg-title{letter-spacing:.04em}