/* ================= CV builder ================= */
.topbar.compact .inner { height: 72px; }
.top-tools { display: flex; align-items: center; gap: 20px; }
.topbar.compact .logo-word { font-size: 32px; }
.topbar.compact .logo-mark { width: 30px; height: 32px; }
.save-state { font-size: 14px; color: var(--subtle-text); display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .3s; }
.save-state.show { opacity: 1; }
.save-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }

.builder { display: grid; grid-template-columns: 260px minmax(0, 1fr) 460px; max-width: 1680px; margin: 0 auto; min-height: calc(100vh - 72px); }

/* Stepper */
.stepper { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 32px 16px 32px 24px; display: flex; flex-direction: column; gap: 4px; }
[dir="rtl"] .stepper { padding: 32px 24px 32px 16px; }
.progress-card { background: var(--white); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.progress-card b { font-size: 14px; display: flex; justify-content: space-between; }
.progress-card b span { color: var(--orange); }
.pbar { height: 6px; background: #eef0f2; border-radius: 6px; overflow: hidden; margin-top: 10px; }
.pbar i { display: block; height: 100%; background: var(--orange); border-radius: 6px; box-shadow: 0 0 10px rgba(253,97,27,.6); transition: width .5s ease; }
.st { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; text-align: start; color: var(--secondary-text); transition: background .2s, color .2s; position: relative; }
.st:hover { background: rgba(13,12,11,.04); }
.st-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--white); border: 1px solid #e6e8eb; display: grid; place-items: center; flex-shrink: 0; color: var(--tertiary-text); transition: all .25s; }
.st-ico svg { width: 17px; height: 17px; }
.st-txt { display: flex; flex-direction: column; min-width: 0; }
.st-txt b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-txt small { font-size: 12px; color: var(--muted-text); }
.st.is-done .st-ico { background: rgba(253,97,27,.1); border-color: rgba(253,97,27,.3); color: var(--orange); }
.st.is-current { background: var(--white); box-shadow: 0 10px 26px -16px rgba(13,12,11,.3); }
.st.is-current .st-ico { background: var(--orange); border-color: var(--orange); color: var(--white); box-shadow: 0 6px 16px -6px rgba(253,97,27,.8); }
.st.has-error .st-txt small { color: #e5484d; }

/* Editor */
.editor { padding: 32px 32px 64px; min-width: 0; }
.editor-inner { max-width: 720px; margin: 0 auto; }
#step-body:focus { outline: none; }
.step-head { margin-bottom: 24px; }
.step-count { font-size: 13px; color: var(--orange); font-weight: 600; letter-spacing: .02em; }
.step-head h1 { font-size: 30px; font-weight: 700; margin-top: 4px; }
.step-head p { color: var(--tertiary-text); font-size: 16px; line-height: 1.6; margin-top: 6px; max-width: 620px; }
.panel { background: var(--white); border-radius: 16px; padding: 24px; }
.panel + .panel { margin-top: 16px; }
.panel-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.fld { grid-column: span 2; min-width: 0; position: relative; }
.fld.half { grid-column: span 1; }
.fld > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--secondary-text); }
.fld .opt { color: var(--muted-text); font-weight: 400; }
.req { color: var(--orange); font-style: normal; }
.fld .input { font-size: 15px; height: 46px; }
select.input { appearance: none; -webkit-appearance: none; padding-inline-end: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377736f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 12px center; }
[dir="rtl"] select.input { background-position: left 12px center; }
.input.is-disabled { display: flex; align-items: center; background: #f6f7f8; color: var(--muted-text); }
.err { font-size: 13px; color: #e5484d; min-height: 0; margin-top: 4px; }
.err:empty { display: none; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--orange); }

/* AI textarea */
.ai-box { position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--white); transition: border-color .2s, box-shadow .2s; }
.ai-box:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(253,97,27,.15); }
.ai-box textarea { display: block; width: 100%; border: 0; background: transparent; resize: vertical; min-height: 140px; padding: 14px 14px 6px; font: inherit; font-size: 15px; line-height: 1.7; color: var(--primary-text); border-radius: 12px; }
.ai-box textarea:focus { outline: none; }
.ai-box textarea::placeholder { color: #9a9590; }
.ai-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 10px 10px; }
.ai-count { margin-inline-end: auto; font-size: 12px; color: var(--muted-text); padding-inline-start: 4px; }
.ai-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9px; border: 0; color: var(--white); font-weight: 600; font-size: 14px;
  background: linear-gradient(110deg, #fd611b 0%, #ff8a3d 45%, #fd611b 100%); background-size: 200% 100%; box-shadow: 0 6px 18px -8px rgba(253,97,27,.9); transition: transform .2s, box-shadow .2s, background-position .6s; }
.ai-btn:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 10px 22px -8px rgba(253,97,27,1); }
.ai-btn svg { width: 16px; height: 16px; }
.ai-btn:disabled { opacity: .7; cursor: progress; transform: none; }
.ai-btn.is-busy svg { animation: spin 1s linear infinite; }
.undo-btn { height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--white); color: var(--secondary-text); font-size: 14px; }
.undo-btn:hover { border-color: var(--secondary-text); }
.ai-box.is-busy::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(253,97,27,.12) 40%, rgba(255,255,255,.6) 50%, rgba(253,97,27,.12) 60%, transparent 80%); background-size: 250% 100%; animation: aiShimmer 1.1s linear infinite; }
@keyframes aiShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ai-box.just-done { animation: aiGlow 1.4s ease; }
@keyframes aiGlow { 0% { box-shadow: 0 0 0 0 rgba(253,97,27,.0); } 30% { box-shadow: 0 0 0 5px rgba(253,97,27,.25), 0 10px 30px -10px rgba(253,97,27,.6); } 100% { box-shadow: 0 0 0 0 rgba(253,97,27,0); } }
.ai-tip { font-size: 13px; color: var(--muted-text); margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; }
.ai-tip::before { content: "✦"; color: var(--orange); }

/* Photo */
.photo { display: flex; align-items: center; gap: 18px; grid-column: span 2; }
.ph-img { width: 84px; height: 84px; border-radius: 50%; background: #f1f2f4; border: 1px dashed #cfd3d8; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; color: var(--muted-text); }
.ph-img img { width: 100%; height: 100%; object-fit: cover; }
.ph-img svg { width: 32px; height: 32px; }
.ph-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ph-actions .row { display: flex; gap: 8px; }
.ph-actions small { font-size: 13px; color: var(--muted-text); }
.btn.sm { width: auto; height: 38px; font-size: 14px; padding: 0 14px; }
.btn-ghost { background: transparent; color: var(--tertiary-text); font-weight: 400; }
.btn-ghost:hover { color: #e5484d; }

/* Repeatable cards */
.reps { display: flex; flex-direction: column; gap: 12px; }
.rep { background: var(--white); border-radius: 16px; border: 1px solid transparent; transition: border-color .25s, box-shadow .25s; animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.rep.is-open { border-color: rgba(253,97,27,.35); box-shadow: 0 18px 40px -24px rgba(253,97,27,.6); }
.rep-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
.rep-num { width: 30px; height: 30px; border-radius: 9px; background: #f4f6f8; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--tertiary-text); flex-shrink: 0; }
.rep.is-open .rep-num { background: var(--orange); color: var(--white); }
.rep-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rep-title b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-title b.placeholder { color: var(--muted-text); font-weight: 400; }
.rep-title small { font-size: 13px; color: var(--muted-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--tertiary-text); display: grid; place-items: center; transition: background .2s, color .2s; }
.icon-btn:hover { background: #f1f2f4; color: var(--primary-text); }
.icon-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.icon-btn.danger:hover { color: #e5484d; background: rgba(229,72,77,.08); }
.icon-btn svg { width: 17px; height: 17px; }
.chev { transition: transform .3s; }
.rep.is-open .chev { transform: rotate(180deg); }
.rep-body { display: none; padding: 4px 18px 22px; border-top: 1px solid #f0f1f3; }
.rep.is-open .rep-body { display: block; padding-top: 20px; }
.add-btn { margin-top: 14px; width: 100%; height: 56px; border: 1.5px dashed rgba(253,97,27,.5); border-radius: 14px; background: rgba(253,97,27,.04); color: var(--orange); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, border-color .2s, transform .2s; }
.add-btn:hover { background: rgba(253,97,27,.09); border-color: var(--orange); transform: translateY(-1px); }
.empty { background: var(--white); border-radius: 16px; padding: 28px 24px; text-align: center; color: var(--tertiary-text); font-size: 15px; line-height: 1.6; }
.empty svg { width: 40px; height: 40px; color: var(--orange); margin: 0 auto 10px; display: block; opacity: .8; }

/* Skills */
.skill-input { display: flex; gap: 8px; }
.skill-input .input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 14px; border-radius: 40px; background: var(--primary-text); color: var(--white); font-size: 14px; animation: chipIn .3s cubic-bezier(.3,1.6,.5,1) both; }
[dir="rtl"] .chip { padding: 0 14px 0 6px; }
.chip button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: var(--white); display: grid; place-items: center; font-size: 15px; line-height: 1; }
.chip button:hover { background: #e5484d; }
@keyframes chipIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.chip-add { height: 34px; padding: 0 14px; border-radius: 40px; border: 1px dashed rgba(253,97,27,.6); background: rgba(253,97,27,.05); color: var(--secondary-text); font-size: 14px; transition: all .2s; animation: chipIn .3s cubic-bezier(.3,1.6,.5,1) both; }
.chip-add:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }
.suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.suggest-head b { font-size: 15px; }
.muted { color: var(--muted-text); font-size: 14px; }
.skill-count { font-size: 13px; color: var(--muted-text); margin-top: 12px; }

/* Socials */
.with-icon { position: relative; }
.with-icon svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted-text); pointer-events: none; }
.with-icon .input { padding-inline-start: 44px; }

/* Switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch b { font-size: 15px; font-weight: 600; }
.switch small { display: block; color: var(--muted-text); font-size: 13px; margin-top: 4px; font-weight: 400; }
.switch input { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; border-radius: 26px; background: #d9dce0; position: relative; flex-shrink: 0; cursor: pointer; transition: background .25s; }
.switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.switch input:checked { background: var(--orange); }
.switch input:checked::after { transform: translateX(20px); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-20px); }

/* Review */
.score { display: flex; align-items: center; gap: 24px; }
.ring { width: 120px; height: 120px; position: relative; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: #f0f1f3; }
.ring .fg { stroke: var(--orange); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px rgba(253,97,27,.5)); }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 700; }
.score h2 { font-size: 20px; }
.score p { color: var(--tertiary-text); margin-top: 6px; line-height: 1.6; }
.tips { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tips li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fafbfc; font-size: 15px; }
.tips li .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; box-shadow: 0 0 8px rgba(253,97,27,.6); }
.tips li span { flex: 1; }
.tips li button { border: 0; background: none; color: var(--orange); font-weight: 700; font-size: 14px; white-space: nowrap; }
.tips li.ok { color: var(--muted-text); }
.tips li.ok .dot { background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,.6); }
.final-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.final-actions .btn { width: auto; flex: 1; min-width: 200px; }
.danger-link { border: 0; background: none; color: var(--muted-text); font-size: 14px; margin-top: 18px; text-decoration: underline; }
.danger-link:hover { color: #e5484d; }

/* Step navigation */
.step-nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #e6e8eb; }
.step-nav .btn { width: auto; min-width: 120px; }
.step-nav .spacer { flex: 1; }
.btn-light { background: var(--white); color: var(--primary-text); border-color: #e3e5e8; font-weight: 600; }
.btn-light:hover { border-color: var(--primary-text); }
.btn-text { background: transparent; color: var(--tertiary-text); font-weight: 600; }
.btn-text:hover { color: var(--primary-text); }

/* Preview */
.preview { position: sticky; top: 0; align-self: start; height: 100vh; padding: 24px 24px 24px 0; display: flex; flex-direction: column; gap: 12px; }
[dir="rtl"] .preview { padding: 24px 0 24px 24px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; }
.preview-head b { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.preview-head b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation: dotBlink 1.6s ease-in-out infinite; }
@keyframes dotBlink { 50% { opacity: .3; } }
.preview-tools { display: flex; gap: 4px; }
.preview-tools .icon-btn { background: var(--white); }
.close-preview { display: none !important; }
.cv-frame { flex: 1; overflow-y: auto; overflow-x: hidden; border-radius: 14px; background: #e9ebee; padding: 14px; scrollbar-width: thin; }
.cv-scale { overflow: hidden; margin: 0 auto; }
.cv-scale .cv-page { transform-origin: top left; }
[dir="rtl"] .cv-scale .cv-page { transform-origin: top right; }
.preview-fab { display: none; }

/* ---------- The CV document (A4: 794 x 1123 px) ---------- */
.cv-page { width: 794px; min-height: 1123px; background: #fff; color: #1a1816; font-family: "Readex Pro", sans-serif; box-shadow: 0 20px 50px -20px rgba(13,12,11,.35); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.cv-top { background: #0d0c0b; color: #fff; padding: 34px 40px; display: flex; align-items: center; gap: 24px; }
.cv-photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid #fd611b; flex-shrink: 0; }
.cv-name { font-size: 30px; font-weight: 700; line-height: 1.2; }
.cv-name.ph, .cv-role.ph { opacity: .45; }
.cv-role { font-size: 16px; color: #fd8a55; margin-top: 4px; }
.cv-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: #c9c5c1; margin-top: 12px; }
.cv-contact span { direction: ltr; unicode-bidi: isolate; }
.cv-body { display: grid; grid-template-columns: 1fr 250px; flex: 1; }
.cv-main { padding: 28px 30px 30px 40px; }
.cv-side { padding: 28px 40px 30px 24px; background: #f7f7f8; border-inline-start: 1px solid #ececee; }
.cv-page[dir="rtl"] .cv-main { padding: 28px 40px 30px 30px; }
.cv-page[dir="rtl"] .cv-side { padding: 28px 24px 30px 40px; }
.cv-sec + .cv-sec { margin-top: 22px; }
.cv-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #0d0c0b; }
.cv-page[dir="rtl"] .cv-h { letter-spacing: 0; font-size: 14px; }
.cv-h::before { content: ""; width: 8px; height: 8px; background: #fd611b; border-radius: 2px; }
.cv-p { font-size: 12px; line-height: 1.7; color: #4a4642; white-space: pre-line; }
.cv-item + .cv-item { margin-top: 14px; }
.cv-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cv-item-head b { font-size: 13px; font-weight: 700; }
.cv-item-head time { font-size: 11px; color: #8a857f; white-space: nowrap; flex-shrink: 0; }
.cv-sub { font-size: 12px; color: #fd611b; font-weight: 600; margin-top: 2px; }
.cv-item ul { margin: 6px 0 0; padding-inline-start: 16px; }
.cv-item li { font-size: 11.5px; line-height: 1.65; color: #4a4642; }
.cv-item .cv-p { margin-top: 5px; font-size: 11.5px; }
.cv-link { font-size: 11px; color: #8a857f; direction: ltr; unicode-bidi: isolate; word-break: break-all; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-tags span { font-size: 11px; padding: 4px 9px; border-radius: 20px; background: #fff; border: 1px solid #e4e4e7; }
.cv-langs div { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
.cv-langs small { color: #8a857f; }
.cv-links div { font-size: 11.5px; margin-bottom: 6px; }
.cv-links b { display: block; font-size: 11px; color: #0d0c0b; }
.cv-ref + .cv-ref { margin-top: 10px; }
.cv-ref b { font-size: 12px; display: block; }
.cv-ref span { font-size: 11px; color: #6b6762; display: block; line-height: 1.5; }
.cv-empty-hint { font-size: 12px; color: #b3aea8; font-style: italic; }
mark.ph-mark { background: rgba(253,97,27,.15); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--primary-text); color: var(--white); padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 200; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Responsive */
@media (max-width: 1280px) {
  .builder { grid-template-columns: 240px minmax(0, 1fr); }
  .preview { display: none; }
  .preview.is-open { display: flex; position: fixed; inset: 0; z-index: 150; height: auto; padding: 16px; background: rgba(13,12,11,.75); backdrop-filter: blur(6px); }
  .preview.is-open .preview-head b { color: var(--white); }
  .close-preview { display: grid !important; }
  .preview-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 120; height: 48px; padding: 0 18px; border-radius: 40px; border: 0; background: var(--primary-text); color: var(--white); font-weight: 600; font-size: 15px; box-shadow: 0 12px 30px -8px rgba(13,12,11,.5), 0 0 0 3px rgba(253,97,27,.35); }
  .preview-fab svg { width: 18px; height: 18px; }
}
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .stepper { position: sticky; top: 0; z-index: 50; flex-direction: row; overflow-x: auto; max-height: none; padding: 12px 16px; gap: 6px; background: var(--bg); border-bottom: 1px solid #e6e8eb; scrollbar-width: none; }
  .stepper::-webkit-scrollbar { display: none; }
  .progress-card { display: none; }
  .st { width: auto; flex-shrink: 0; padding: 6px 12px 6px 6px; }
  [dir="rtl"] .st { padding: 6px 6px 6px 12px; }
  .st-txt small { display: none; }
  .st-txt b { font-size: 14px; }
  .st-ico { width: 30px; height: 30px; }
  .editor { padding: 24px 16px 96px; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .fld.half { grid-column: span 2; }
  .step-head h1 { font-size: 24px; }
  .panel { padding: 18px; }
  .rep-head { padding: 14px; }
  .rep-body { padding: 4px 14px 18px; }
  .rep-actions .icon-btn:not(.danger):not(.chev-btn) { display: none; }
  .step-nav { flex-wrap: wrap; }
  .step-nav .btn { flex: 1; min-width: 0; }
  .step-nav .spacer { display: none; }
  .score { flex-direction: column; text-align: center; }
  .topbar.compact .save-state { display: none; }
  .ai-bar { flex-wrap: wrap; }
}

/* Print: only the CV, full size */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  body * { visibility: hidden; }
  .cv-page, .cv-page * { visibility: visible; }
  .preview, .preview.is-open { display: block !important; position: static; padding: 0; height: auto; background: none; }
  .cv-frame { padding: 0; background: none; overflow: visible; }
  .cv-scale { width: auto !important; height: auto !important; overflow: visible !important; } .cv-page { transform: none !important; }
  .cv-page { position: absolute; top: 0; left: 0; box-shadow: none; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .stepper, .editor, .preview-head, .preview-fab, .toast { display: none !important; }
}

@media (max-width: 600px) { .nx-full { display: none; } }

@media (max-width: 1280px) { .preview.is-open { top: 0; bottom: 0; left: 0; right: 0; height: 100vh; height: 100dvh; } body.preview-open { overflow: hidden; } body.preview-open .preview-fab { display: none; } }

/* ================= Download dialog ================= */
.top-signin { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.6); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; transition: background .2s; }
.top-signin:hover { background: rgba(255,255,255,.1); }
.modal { position: fixed; inset: 0; z-index: 300; background: rgba(13,12,11,.6); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: 100%; max-width: 480px; background: var(--white); border-radius: 20px; padding: 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.modal-card section { display: flex; flex-direction: column; }
.modal-x { position: absolute; top: 14px; inset-inline-end: 14px; }
.modal-card h2 { font-size: 22px; font-weight: 700; padding-inline-end: 36px; }
.modal-sub { color: var(--tertiary-text); font-size: 15px; line-height: 1.6; margin: 6px 0 20px; }
.formats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.fmt { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1.5px solid #e4e6e9; border-radius: 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.fmt input { position: absolute; opacity: 0; pointer-events: none; }
.fmt:hover { border-color: rgba(253,97,27,.5); }
.fmt:has(input:checked) { border-color: var(--orange); background: rgba(253,97,27,.05); box-shadow: 0 10px 26px -16px rgba(253,97,27,.8); }
.fmt:has(input:focus-visible) { outline: 3px solid rgba(253,97,27,.35); outline-offset: 2px; }
.fmt-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-weight: 700; font-size: 13px; color: #fff; background: var(--orange); }
.fmt-ico.png { background: var(--primary-text); }
.fmt-ico svg { width: 22px; height: 22px; }
.fmt-txt { display: flex; flex-direction: column; gap: 3px; }
.fmt-txt b { font-size: 15px; }
.fmt-txt small { font-size: 13px; color: var(--muted-text); line-height: 1.5; }
.dl-hint { font-size: 13px; color: var(--muted-text); text-align: center; margin-top: 10px; min-height: 18px; }
#dl-go.is-busy { pointer-events: none; opacity: .8; }
.gate-ico { width: 56px; height: 56px; border-radius: 16px; background: rgba(253,97,27,.1); color: var(--orange); display: grid; place-items: center; margin-bottom: 14px; box-shadow: 0 0 0 6px rgba(253,97,27,.05); }
.gate-ico svg { width: 26px; height: 26px; }
/* ================= CV templates ================= */
/* Accent colour (set per CV from JS: --cv-accent, --cv-accent-light) */
.cv-page .cv-photo { border-color: var(--cv-accent, #fd611b); }
.cv-page .cv-role { color: var(--cv-accent-light, #fd8a55); }
.cv-page .cv-h::before { background: var(--cv-accent, #fd611b); }
.cv-page .cv-sub { color: var(--cv-accent, #fd611b); }
.cv-line { font-size: 12px; line-height: 1.75; color: #4a4642; }
.cv-body.one { display: block; }
.cv-links.inline { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cv-links.inline div { margin: 0; }
.cv-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.cv-refs .cv-ref + .cv-ref { margin-top: 0; }

/* Path: dark header + light side column (default look) */

/* Edge: dark side column holding name, contact, skills */
.cv-page.tpl-edge { display: grid; grid-template-columns: 268px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head main" "side main"; }
.tpl-edge .cv-body { display: contents; }
.tpl-edge .cv-top { grid-area: head; flex-direction: column; align-items: flex-start; gap: 16px; padding: 38px 26px 18px; }
.tpl-edge .cv-name { font-size: 25px; }
.tpl-edge .cv-contact { flex-direction: column; gap: 5px; font-size: 11px; }
.tpl-edge .cv-photo { width: 104px; height: 104px; }
.tpl-edge .cv-side { grid-area: side; background: #0d0c0b; color: #e8e6e3; border: 0; padding: 8px 26px 34px; }
.tpl-edge .cv-main { grid-area: main; padding: 38px 38px 34px; }
.tpl-edge .cv-side .cv-h { color: #fff; }
.tpl-edge .cv-side .cv-h::before { background: var(--cv-accent-light); }
.tpl-edge .cv-side .cv-tags span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #f2f0ee; }
.tpl-edge .cv-side .cv-langs small, .tpl-edge .cv-side .cv-link, .tpl-edge .cv-side .cv-ref span { color: #a9a49f; }
.tpl-edge .cv-side .cv-links b, .tpl-edge .cv-side .cv-p { color: #f2f0ee; }
.cv-page[dir="rtl"].tpl-edge .cv-main { padding: 38px 38px 34px; }
.cv-page[dir="rtl"].tpl-edge .cv-side { padding: 8px 26px 34px; }

/* Classic: centered white header with accent rule, one column */
.tpl-classic .cv-top { background: #fff; color: #1a1816; flex-direction: column; text-align: center; gap: 12px; padding: 42px 56px 22px; margin: 0 56px; border-bottom: 3px solid var(--cv-accent); }
.tpl-classic .cv-name { font-size: 32px; letter-spacing: .01em; }
.tpl-classic .cv-role { color: var(--cv-accent); font-weight: 600; }
.tpl-classic .cv-contact { justify-content: center; color: #6b6762; }
.tpl-classic .cv-body.one { padding: 24px 56px 44px; }
.tpl-classic .cv-h { justify-content: center; border-bottom: 1px solid #e4e4e7; padding-bottom: 7px; margin-bottom: 12px; }
.tpl-classic .cv-h::before { display: none; }

/* Simple: minimal black & white, one column — safest for ATS */
.tpl-simple .cv-top { background: #fff; color: #111; padding: 46px 56px 18px; gap: 20px; }
.tpl-simple .cv-name { font-size: 34px; }
.tpl-simple .cv-role { color: var(--cv-accent); font-weight: 600; }
.tpl-simple .cv-contact { color: #555; }
.tpl-simple .cv-photo { width: 84px; height: 84px; border-width: 0; }
.tpl-simple .cv-body.one { padding: 4px 56px 44px; }
.tpl-simple .cv-h { color: var(--cv-accent); border-top: 1px solid #e6e6e6; padding-top: 14px; }
.tpl-simple .cv-h::before { display: none; }
.tpl-simple .cv-sub { color: #555; font-weight: 500; }
.cv-body.one .cv-sec + .cv-sec { margin-top: 20px; }

/* ================= Template chip + picker ================= */
.tpl-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid #e3e5e8; background: var(--white); font-size: 13px; color: var(--secondary-text); transition: border-color .2s, box-shadow .2s; }
.tpl-chip:hover { border-color: var(--orange); box-shadow: 0 6px 16px -8px rgba(253,97,27,.6); }
.tpl-chip b { color: var(--primary-text); }
.tpl-chip svg { width: 14px; height: 14px; }
.tpl-chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.modal-card.wide { max-width: 1040px; max-height: calc(100vh - 32px); overflow-y: auto; }
.tpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.tpl-opt { border: 0; background: none; padding: 0; text-align: start; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.tpl-thumb { position: relative; display: block; width: 100%; border-radius: 12px; overflow: hidden; background: #fff; border: 2px solid #e6e8eb; transition: border-color .2s, box-shadow .25s, transform .25s; }
.tpl-thumb-inner { position: absolute; inset: 0; overflow: hidden; }
.tpl-thumb .cv-page { position: absolute; top: 0; left: 0; transform-origin: top left; box-shadow: none; border-radius: 0; pointer-events: none; }
.tpl-opt:hover .tpl-thumb { transform: translateY(-3px); border-color: rgba(253,97,27,.5); box-shadow: 0 16px 36px -18px rgba(13,12,11,.4); }
.tpl-opt.is-on .tpl-thumb { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(253,97,27,.18), 0 18px 40px -18px rgba(253,97,27,.7); }
.tpl-opt:focus-visible { outline: none; }
.tpl-opt:focus-visible .tpl-thumb { box-shadow: 0 0 0 4px rgba(253,97,27,.35); }
.tpl-check { position: absolute; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 4px 12px rgba(253,97,27,.6); }
.tpl-check svg { width: 15px; height: 15px; }
.tpl-opt.is-on .tpl-check { transform: scale(1); }
.tpl-meta { display: flex; flex-direction: column; gap: 4px; }
.tpl-meta b { font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-meta small { font-size: 13px; color: var(--muted-text); line-height: 1.5; }
.rec-badge { font-style: normal; font-size: 11px; font-weight: 600; color: #fff; background: var(--orange); padding: 2px 8px; border-radius: 20px; }
.tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tpl-tags i { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 20px; background: #f1f2f4; color: var(--tertiary-text); }
.tpl-tags .ats-tag { background: rgba(31,138,91,.1); color: #1f8a5b; font-weight: 600; }
.tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #eef0f2; padding-top: 18px; }
.tpl-foot .btn { width: auto; min-width: 140px; }
.color-row { display: flex; align-items: center; gap: 14px; }
.color-row b { font-size: 14px; }
.swatches { display: flex; gap: 10px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e3e5e8; transition: transform .2s, box-shadow .2s; }
.swatch:hover { transform: scale(1.1); }
.swatch.is-on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sw); }
.tpl-panel-row { display: flex; align-items: center; gap: 14px; }
.tpl-panel-row > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tpl-panel-row b { font-size: 16px; }
.tpl-panel-row small { font-size: 13px; color: var(--muted-text); }
.tpl-panel-dot { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.preview-tools { align-items: center; }
@media (max-width: 1280px) { .preview.is-open .tpl-chip { background: rgba(255,255,255,.95); } }
@media (max-width: 900px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tpl-grid { gap: 12px; }
  .tpl-meta small { display: none; }
  .modal-card { padding: 22px 18px; }
  .tpl-foot { flex-direction: column; align-items: stretch; }
  .tpl-foot .btn { width: 100%; }
  .color-row { justify-content: space-between; }
  .tpl-chip-lbl { display: none; }
  .tpl-panel-row { flex-wrap: wrap; }
}
@media print { .cv-page { transform: none !important; } }@media print { .modal { display: none !important; } }

/* ================= More templates (inspired by popular ATS-passing layouts) ================= */
.cv-page.tpl-scholar, .cv-page.tpl-formal { font-family: "Source Serif 4", "Noto Naskh Arabic", Georgia, serif; }

/* Scholar: centered serif masthead, fine rules */
.tpl-scholar .cv-top { background: #fff; color: #111; flex-direction: column; text-align: center; gap: 10px; padding: 46px 60px 10px; }
.tpl-scholar .cv-name { font-size: 34px; font-weight: 600; }
.tpl-scholar .cv-role { color: #444; font-size: 16px; font-weight: 400; }
.tpl-scholar .cv-contact { justify-content: center; color: #333; font-size: 11.5px; }
.tpl-scholar .cv-photo { width: 84px; height: 84px; border-width: 2px; }
.tpl-scholar .cv-body.one { padding: 12px 60px 46px; }
.tpl-scholar .cv-h { font-size: 14px; letter-spacing: .06em; color: #111; border-top: 1px solid var(--cv-accent); padding-top: 12px; margin-bottom: 10px; }
.tpl-scholar .cv-h::before { display: none; }
.tpl-scholar .cv-p, .tpl-scholar .cv-item li, .tpl-scholar .cv-line { font-size: 12.5px; color: #222; }
.tpl-scholar .cv-sub { color: #444; font-style: italic; font-weight: 400; }
.tpl-scholar .cv-item-head b { font-size: 13.5px; }

/* Formal: left serif name above a double rule, small-caps labels */
.tpl-formal .cv-top { background: #fff; color: #111; gap: 20px; padding: 46px 0 16px; margin: 0 56px; border-bottom: 4px double var(--cv-accent); }
.tpl-formal .cv-name { font-size: 32px; font-weight: 600; }
.tpl-formal .cv-role { color: var(--cv-accent); font-weight: 400; font-style: italic; font-size: 16px; }
.tpl-formal .cv-contact { color: #444; }
.tpl-formal .cv-body.one { padding: 22px 56px 46px; }
.tpl-formal .cv-h { font-variant: small-caps; text-transform: none; letter-spacing: .08em; font-size: 16px; color: var(--cv-accent); }
.cv-page[dir="rtl"].tpl-formal .cv-h { font-size: 15px; letter-spacing: 0; }
.tpl-formal .cv-h::before { display: none; }
.tpl-formal .cv-item-head time { font-style: italic; }
.tpl-formal .cv-sub { color: #333; font-weight: 600; }
.tpl-formal .cv-p, .tpl-formal .cv-item li, .tpl-formal .cv-line { font-size: 12.5px; color: #222; }

/* Atlas: dates in their own column, tinted section labels */
.tpl-atlas .cv-top { background: #fff; color: #111; gap: 20px; padding: 44px 52px 20px; }
.tpl-atlas .cv-name { font-size: 34px; color: var(--cv-accent); }
.tpl-atlas .cv-role { color: #333; font-weight: 400; }
.tpl-atlas .cv-contact { color: #555; }
.tpl-atlas .cv-body.one { padding: 4px 52px 46px; }
.tpl-atlas .cv-h { background: var(--cv-accent-soft); color: var(--cv-accent); padding: 7px 12px; border-radius: 3px; text-transform: none; letter-spacing: 0; font-size: 14px; margin-bottom: 12px; }
.tpl-atlas .cv-h::before { display: none; }
.tpl-atlas .cv-item { display: grid; grid-template-columns: 104px 1fr; column-gap: 18px; }
.tpl-atlas .cv-item-head { display: contents; }
.tpl-atlas .cv-item-head time { grid-column: 1; grid-row: 1 / span 6; color: var(--cv-accent); font-size: 11px; white-space: normal; line-height: 1.5; padding-top: 2px; }
.tpl-atlas .cv-item-head b { grid-column: 2; grid-row: 1; }
.tpl-atlas .cv-item > :not(.cv-item-head) { grid-column: 2; }
.tpl-atlas .cv-sub { color: #555; font-weight: 500; }

/* Halo: light side panel with centered photo */
.cv-page.tpl-halo { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head main" "side main"; }
.tpl-halo .cv-body { display: contents; }
.tpl-halo .cv-top { grid-area: head; background: #f4f5f7; color: #111; flex-direction: column; text-align: center; gap: 12px; padding: 38px 22px 16px; }
.tpl-halo .cv-photo { width: 112px; height: 112px; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--cv-accent); }
.tpl-halo .cv-name { font-size: 22px; }
.tpl-halo .cv-role { color: var(--cv-accent); font-size: 13px; }
.tpl-halo .cv-contact { flex-direction: column; align-items: center; gap: 5px; color: #555; border-top: 1px solid #e1e3e7; padding-top: 12px; margin-top: 12px; }
.tpl-halo .cv-side { grid-area: side; background: #f4f5f7; border: 0; padding: 8px 22px 34px; }
.tpl-halo .cv-main { grid-area: main; padding: 42px 38px 34px; }
.cv-page[dir="rtl"].tpl-halo .cv-main { padding: 42px 38px 34px; }
.cv-page[dir="rtl"].tpl-halo .cv-side { padding: 8px 22px 34px; }
.tpl-halo .cv-h { color: var(--cv-accent); }
.tpl-halo .cv-side .cv-tags span { background: #fff; }

/* Compact: dense, single page */
.tpl-compact .cv-top { background: #fff; color: #111; gap: 16px; padding: 32px 44px 10px; }
.tpl-compact .cv-name { font-size: 26px; }
.tpl-compact .cv-role { color: var(--cv-accent); font-size: 14px; margin-top: 2px; }
.tpl-compact .cv-contact { margin-top: 6px; color: #555; font-size: 11px; }
.tpl-compact .cv-photo { width: 64px; height: 64px; border-width: 2px; }
.tpl-compact .cv-body.one { padding: 6px 44px 32px; }
.tpl-compact .cv-body.one .cv-sec + .cv-sec { margin-top: 12px; }
.tpl-compact .cv-h { font-size: 11.5px; color: #111; border-bottom: 1.5px solid var(--cv-accent); padding-bottom: 3px; margin-bottom: 7px; }
.tpl-compact .cv-h::before { display: none; }
.tpl-compact .cv-item + .cv-item { margin-top: 8px; }
.tpl-compact .cv-item li, .tpl-compact .cv-p, .tpl-compact .cv-line { font-size: 11px; line-height: 1.55; }
.tpl-compact .cv-item-head b { font-size: 12px; }
.tpl-compact .cv-sub { font-size: 11px; color: #444; }
.tpl-compact .cv-item-head time { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: #555; }

/* Picker grid: fit 9 templates nicely */
.tpl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 600px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ================= Creative templates ================= */
.cv-mono, .cv-num { display: none; }
.cv-body { column-gap: 0; }

/* Spotlight: big colour header with soft circles, numbered sections */
.tpl-spotlight .cv-top { position: relative; overflow: hidden; background: var(--cv-accent); color: #fff; padding: 54px 56px 46px; gap: 24px; }
.tpl-spotlight .cv-top::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.12); top: -130px; right: -80px; }
.tpl-spotlight .cv-top::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); bottom: -100px; right: 170px; }
.cv-page[dir="rtl"].tpl-spotlight .cv-top::after { right: auto; left: -80px; }
.cv-page[dir="rtl"].tpl-spotlight .cv-top::before { right: auto; left: 170px; }
.tpl-spotlight .cv-top > * { position: relative; z-index: 1; }
.tpl-spotlight .cv-name { font-size: 44px; font-weight: 700; line-height: 1.05; }
.tpl-spotlight .cv-role { color: #fff; opacity: .88; font-size: 18px; margin-top: 8px; }
.tpl-spotlight .cv-contact { color: rgba(255,255,255,.88); margin-top: 16px; }
.tpl-spotlight .cv-photo { width: 112px; height: 112px; border: 4px solid rgba(255,255,255,.9); }
.tpl-spotlight .cv-body.one { padding: 30px 56px 46px; }
.tpl-spotlight .cv-h { font-size: 15px; gap: 12px; text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
.tpl-spotlight .cv-h::before { display: none; }
.tpl-spotlight .cv-num { display: inline-block; font-size: 26px; font-weight: 700; color: var(--cv-accent); line-height: 1; }
.tpl-spotlight .cv-tags span { background: var(--cv-accent-soft); border-color: transparent; color: var(--cv-accent); font-weight: 600; }
.tpl-spotlight .cv-body.one .cv-sec + .cv-sec { margin-top: 24px; }

/* Timeline: experience & education on a vertical line with dots */
.tpl-timeline .cv-top { background: #fff; color: #111; padding: 40px 40px 22px; gap: 20px; border-top: 8px solid var(--cv-accent); }
.tpl-timeline .cv-name { font-size: 34px; }
.tpl-timeline .cv-role { color: var(--cv-accent); font-weight: 600; }
.tpl-timeline .cv-contact { color: #555; }
.tpl-timeline .cv-side { background: var(--cv-accent-soft); border: 0; }
.tpl-timeline .cv-main .cv-item { position: relative; padding: 0 0 6px 22px; margin-left: 6px; border-left: 2px solid var(--cv-accent-soft); }
.tpl-timeline .cv-main .cv-item + .cv-item { margin-top: 0; padding-top: 12px; }
.tpl-timeline .cv-main .cv-item::before { content: ""; position: absolute; left: -8px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--cv-accent); box-sizing: border-box; }
.tpl-timeline .cv-main .cv-item + .cv-item::before { top: 13px; }
.cv-page[dir="rtl"].tpl-timeline .cv-main .cv-item { padding: 0 22px 6px 0; margin-left: 0; margin-right: 6px; border-left: 0; border-right: 2px solid var(--cv-accent-soft); }
.cv-page[dir="rtl"].tpl-timeline .cv-main .cv-item + .cv-item { padding-top: 12px; }
.cv-page[dir="rtl"].tpl-timeline .cv-main .cv-item::before { left: auto; right: -8px; }
.tpl-timeline .cv-item-head time { background: var(--cv-accent-soft); color: var(--cv-accent); padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.tpl-timeline .cv-side .cv-tags span { background: #fff; border-color: transparent; }

/* Mosaic: every section on its own card */
.cv-page.tpl-mosaic { background: #eef0f3; }
.tpl-mosaic .cv-top { background: #fff; color: #111; margin: 22px 22px 0; border-radius: 16px; padding: 28px 30px; gap: 20px; border-left: 6px solid var(--cv-accent); }
.cv-page[dir="rtl"].tpl-mosaic .cv-top { border-left: 0; border-right: 6px solid var(--cv-accent); }
.tpl-mosaic .cv-name { font-size: 30px; }
.tpl-mosaic .cv-role { color: var(--cv-accent); font-weight: 600; }
.tpl-mosaic .cv-contact { color: #555; }
.tpl-mosaic .cv-body { padding: 14px 22px 22px; column-gap: 14px; grid-template-columns: 1fr 240px; }
.tpl-mosaic .cv-main, .tpl-mosaic .cv-side, .cv-page[dir="rtl"].tpl-mosaic .cv-main, .cv-page[dir="rtl"].tpl-mosaic .cv-side { padding: 0; background: none; border: 0; }
.tpl-mosaic .cv-sec { background: #fff; border-radius: 14px; padding: 16px 18px; }
.tpl-mosaic .cv-sec + .cv-sec { margin-top: 14px; }
.tpl-mosaic .cv-h::before { border-radius: 50%; }
.tpl-mosaic .cv-tags span { background: var(--cv-accent-soft); border-color: transparent; }

/* Bold: full-colour sidebar with initials monogram */
.cv-page.tpl-bold { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head main" "side main"; }
.tpl-bold .cv-body { display: contents; }
.tpl-bold .cv-top { grid-area: head; background: var(--cv-accent); color: #fff; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px 26px 18px; }
.tpl-bold .cv-mono { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 20px; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.55); font-size: 32px; font-weight: 700; color: #fff; }
.tpl-bold .cv-photo { width: 100px; height: 100px; border: 3px solid #fff; border-radius: 20px; }
.tpl-bold .cv-name { font-size: 28px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.tpl-bold .cv-role { color: #fff; opacity: .88; }
.tpl-bold .cv-contact { flex-direction: column; gap: 5px; color: rgba(255,255,255,.88); font-size: 11px; }
.tpl-bold .cv-side { grid-area: side; background: var(--cv-accent); color: #fff; border: 0; padding: 6px 26px 34px; }
.tpl-bold .cv-main { grid-area: main; padding: 42px 38px 34px; }
.cv-page[dir="rtl"].tpl-bold .cv-main { padding: 42px 38px 34px; }
.cv-page[dir="rtl"].tpl-bold .cv-side { padding: 6px 26px 34px; }
.tpl-bold .cv-side .cv-h { color: #fff; }
.tpl-bold .cv-side .cv-h::before { background: #fff; }
.tpl-bold .cv-side .cv-tags span { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.tpl-bold .cv-side .cv-langs small, .tpl-bold .cv-side .cv-link, .tpl-bold .cv-side .cv-ref span { color: rgba(255,255,255,.78); }
.tpl-bold .cv-side .cv-links b, .tpl-bold .cv-side .cv-p { color: #fff; }
.tpl-bold .cv-main .cv-h { font-size: 15px; font-weight: 800; }

/* ================= Picker tabs ================= */
.tpl-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tpl-tab { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #e4e6e9; background: #fff; font-weight: 600; font-size: 14px; color: var(--secondary-text); transition: all .2s; }
.tpl-tab em { font-style: normal; font-size: 12px; background: #f1f2f4; padding: 1px 8px; border-radius: 10px; color: var(--muted-text); }
.tpl-tab .tab-ico { display: inline-flex; }
.tpl-tab .tab-ico svg { width: 16px; height: 16px; }
.tpl-tab:hover { border-color: rgba(253,97,27,.5); }
.tpl-tab.is-on { background: var(--primary-text); color: #fff; border-color: var(--primary-text); box-shadow: 0 8px 20px -10px rgba(13,12,11,.6); }
.tpl-tab.is-on em { background: rgba(255,255,255,.18); color: #fff; }
.tpl-cat-desc { font-size: 14px; line-height: 1.6; padding: 10px 14px; border-radius: 10px; margin-bottom: 18px; animation: stepIn .3s ease both; }
.cat-ats { background: rgba(31,138,91,.08); color: #17694a; }
.cat-modern { background: #eef2f8; color: #2d4a74; }
.cat-creative { background: rgba(253,97,27,.08); color: #a8410f; }
.tpl-tags .creative-tag { background: rgba(253,97,27,.1); color: #c24d12; font-weight: 600; }
.tpl-grid .tpl-opt { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.tpl-grid .tpl-opt:nth-child(2) { animation-delay: .04s; } .tpl-grid .tpl-opt:nth-child(3) { animation-delay: .08s; }
.tpl-grid .tpl-opt:nth-child(4) { animation-delay: .12s; } .tpl-grid .tpl-opt:nth-child(5) { animation-delay: .16s; } .tpl-grid .tpl-opt:nth-child(6) { animation-delay: .2s; }
@media (max-width: 600px) { .tpl-tab { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; } .tpl-tab .tab-ico { display: none; } }
/* Thumbnail mode (builder.html?mode=thumb): only the CV page, used by "My CVs" cards */
.thumb-mode body { background: #fff; overflow: hidden; }
.thumb-mode .topbar, .thumb-mode .stepper, .thumb-mode .editor, .thumb-mode .preview-head, .thumb-mode .preview-fab, .thumb-mode .toast, .thumb-mode .modal { display: none !important; }
.thumb-mode .builder { display: block; min-height: 0; }
.thumb-mode .preview { display: block !important; position: static; padding: 0 !important; height: auto; background: none; }
.thumb-mode .cv-frame { padding: 0; background: #fff; overflow: hidden; border-radius: 0; }
.thumb-mode .cv-scale { width: auto !important; height: auto !important; }
.thumb-mode .cv-page { transform: none !important; box-shadow: none; border-radius: 0; }
/* Export mode (PDF service): let the CV flow across pages, keep entries together */
.export-mode body { overflow: visible; }
.export-mode .cv-item, .export-mode .cv-ref, .export-mode .cv-refs { break-inside: avoid; }
.export-mode .cv-h { break-after: avoid; }/* Breathing room on continuation pages; the first page keeps its full-bleed header */
@page { size: A4; margin: 14mm 0 12mm; }
@page :first { margin-top: 0; }
.export-mode .cv-page { min-height: 0; }