:root{--bg:#090911;--panel:#12121d;--panel2:#171724;--line:rgba(255,255,255,.09);--text:#f8f7ff;--muted:#8d899e;--violet:#765cff;--violet2:#9a87ff;--mint:#54d8a4;--cv-accent:#5b5cf0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Alexandria,system-ui,sans-serif}
button,input,textarea,select{font:inherit}
[dir="ltr"] body{direction:ltr}

.cv-header{height:78px;width:min(1280px,calc(100% - 32px));margin:auto;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line)}
.back{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;color:#cfcbdb;text-decoration:none;font-size:14px}
.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-weight:800}
.brand svg{width:32px;height:32px;color:var(--violet)}
.cv-header-tools{margin-inline-start:auto;display:flex;align-items:center;gap:14px}
.cv-lang-switch{display:flex;align-items:center;gap:8px;font-size:11px;color:#8b879c}
.cv-lang-switch button{border:0;background:transparent;color:inherit;cursor:pointer;padding:6px 4px;font-weight:700}
.cv-lang-switch button.active{color:#fff}
.cv-lang-switch span{width:1px;height:12px;background:var(--line)}

main{width:min(1280px,calc(100% - 32px));margin:0 auto 90px}
.cv-intro{padding:40px 0 18px;max-width:640px}
.cv-intro span{color:var(--violet2);font-size:10px;font-weight:700}
.cv-intro h1{font-size:clamp(28px,4vw,42px);line-height:1.2;letter-spacing:-.03em;margin:12px 0 10px}
.cv-intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}

.cv-progress{display:flex;align-items:center;gap:0;margin:10px 0 30px;overflow-x:auto;padding-bottom:4px}
.cv-progress em{height:1px;width:20px;min-width:20px;background:var(--line)}
.cv-step-dot{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#6f6c80;cursor:pointer;padding:6px;white-space:nowrap}
.cv-step-dot i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);font-size:10px;font-style:normal}
.cv-step-dot b{font-size:11px;font-weight:600}
.cv-step-dot.active{color:#fff}
.cv-step-dot.active i{background:var(--violet);border-color:var(--violet);color:#fff}
.cv-step-dot.done i{background:rgba(84,216,164,.15);border-color:#54d8a4;color:#54d8a4}

.cv-layout{display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:start}
.cv-form{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(23,23,36,.98),rgba(14,14,24,.98));padding:32px}
.cv-step{display:none}
.cv-step.active{display:block}
.cv-step-head{margin-bottom:22px}
.cv-step-head small{color:#7d6fef;font-size:10px;font-weight:700}
.cv-step-head h2{margin:8px 0 0;font-size:24px}

.cv-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cv-fields label{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#b4b0c4}
.cv-fields label.wide{grid-column:1/-1}
.cv-fields input,.cv-fields textarea,.cv-entry-card input,.cv-entry-card textarea,.cv-entry-card select{border:1px solid var(--line);border-radius:11px;background:#0c0c15;color:#fff;padding:12px 13px;font-size:12.5px;resize:vertical}
.cv-fields input:focus,.cv-fields textarea:focus,.cv-entry-card input:focus,.cv-entry-card textarea:focus,.cv-entry-card select:focus{outline:2px solid var(--violet);outline-offset:1px}

.cv-avatar-row{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.cv-avatar-preview{width:74px;height:74px;border-radius:50%;border:1px solid var(--line);background:#171724;display:grid;place-items:center;overflow:hidden;font-size:22px;font-weight:700;color:#cbc8d6;flex-shrink:0}
.cv-avatar-preview img{width:100%;height:100%;object-fit:cover}
.cv-upload{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:11px;cursor:pointer;color:#dcd9e8}
.cv-avatar-row small{display:block;margin-top:7px;color:#726f82;font-size:9.5px}

.cv-entry-list{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.cv-entry-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:rgba(255,255,255,.02);position:relative}
.cv-entry-card .cv-entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cv-entry-card label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;color:#b4b0c4;margin-bottom:10px}
.cv-entry-card label.wide{grid-column:1/-1}
.cv-entry-card .cv-current{flex-direction:row;align-items:center;gap:8px;font-size:11px}
.cv-entry-card .cv-current input{width:auto}
.cv-entry-remove{position:absolute;top:14px;inset-inline-end:14px;border:1px solid rgba(255,105,105,.3);background:rgba(255,80,80,.08);color:#ff8b8b;border-radius:8px;width:26px;height:26px;cursor:pointer;font-size:12px}
.cv-entry-empty{border:1px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:#726f82;font-size:11px}

.cv-add{display:inline-flex;align-items:center;gap:8px;border:1px dashed rgba(118,92,255,.4);background:rgba(118,92,255,.06);color:#c8beff;border-radius:11px;padding:11px 16px;font-size:11px;font-weight:700;cursor:pointer}
.cv-add span{font-size:14px}

.cv-tag-input{border:1px solid var(--line);border-radius:11px;padding:10px;background:#0c0c15}
.cv-tag-input input{width:100%;border:0;background:transparent;color:#fff;padding:4px 2px;font-size:12px}
.cv-tag-input input:focus{outline:0}
.cv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.cv-chip{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:99px;background:rgba(118,92,255,.14);color:#cbc0ff;font-size:10.5px}
.cv-chip button{border:0;background:transparent;color:#cbc0ff;cursor:pointer;font-size:11px;padding:0}

.cv-template-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:22px}
@media(max-width:900px){.cv-template-grid{grid-template-columns:repeat(4,1fr)}}
.cv-template-card{border:1px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;background:rgba(255,255,255,.02);text-align:center}
.cv-template-card.active{border-color:var(--violet);background:rgba(118,92,255,.1)}
.cv-template-card .cv-tpl-swatch{height:70px;border-radius:9px;margin-bottom:9px;background:#fff;position:relative;overflow:hidden}
.cv-tpl-swatch i{position:absolute;display:block;border-radius:2px;background:#e2e2e9;font-style:normal}

/* Fresher: offset white name box over a gray sidebar */
.sw-fresher .sw-side{inset-inline-start:0;top:0;bottom:0;width:40%;background:#eee}
.sw-fresher .sw-box{inset-inline-start:30%;top:8%;width:64%;height:20%;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.sw-fresher .sw-line1{inset-inline-start:44%;top:38%;width:46%;height:7%}
.sw-fresher .sw-line2{inset-inline-start:44%;top:52%;width:46%;height:7%}
.sw-fresher .sw-line3{inset-inline-start:44%;top:66%;width:30%;height:7%}

/* Velvet: dark gradient with pill tags */
.cv-tpl-swatch.sw-velvet{background:#211a35}
.sw-velvet .sw-bar{inset-inline-start:6%;top:8%;width:88%;height:16%;border-radius:8px;background:color-mix(in srgb,var(--cv-accent) 45%,#211a35)}
.sw-velvet .sw-tag1{inset-inline-start:6%;top:32%;width:26%;height:12%;border-radius:99px;background:rgba(255,255,255,.18)}
.sw-velvet .sw-tag2{inset-inline-start:36%;top:32%;width:26%;height:12%;border-radius:99px;background:rgba(255,255,255,.18)}
.sw-velvet .sw-line1{inset-inline-start:6%;top:54%;width:40%;height:8%;background:rgba(255,255,255,.14)}
.sw-velvet .sw-line2{inset-inline-start:6%;top:70%;width:56%;height:8%;background:rgba(255,255,255,.14)}

/* Classic: blue capsule header + circular photo */
.sw-classic .sw-cap{inset-inline-start:0;top:14%;width:56%;height:22%;border-radius:0 99px 99px 0;background:#5b8def}
.sw-classic .sw-circle{inset-inline-end:10%;top:10%;width:24%;aspect-ratio:1;border-radius:50%;background:#dfe6f5}
.sw-classic .sw-line1{inset-inline-start:9%;top:50%;width:36%;height:7%}
.sw-classic .sw-line2{inset-inline-start:9%;top:64%;width:36%;height:7%}
.sw-classic .sw-line3{inset-inline-start:52%;top:50%;width:38%;height:7%}

/* Blush: pastel blob photo frame + timeline dots */
.cv-tpl-swatch.sw-blush{background:#fbf1ea}
.sw-blush .sw-blob{inset-inline-end:0;top:0;width:46%;height:52%;border-radius:0 0 0 60%;background:color-mix(in srgb,var(--cv-accent) 35%,#e8c8ae)}
.sw-blush .sw-title{inset-inline-start:8%;top:14%;width:38%;height:15%;background:#7a4a30}
.sw-blush .sw-dot1{inset-inline-start:8%;top:56%;width:6%;aspect-ratio:1;border-radius:50%;background:var(--cv-accent)}
.sw-blush .sw-line1{inset-inline-start:18%;top:54%;width:48%;height:7%}
.sw-blush .sw-dot2{inset-inline-start:8%;top:74%;width:6%;aspect-ratio:1;border-radius:50%;background:var(--cv-accent)}
.sw-blush .sw-line2{inset-inline-start:18%;top:72%;width:48%;height:7%}

/* Twilight: hero band + ring badge, sibling of modern's split layout */
.sw-twilight .sw-hero{inset-inline-start:0;top:0;width:100%;height:30%;background:linear-gradient(120deg,var(--cv-accent),#0f2417)}
.sw-twilight .sw-ring{inset-inline-end:8%;top:6%;width:18%;aspect-ratio:1;border-radius:50%;border:3px solid #fff;background:transparent}
.sw-twilight .sw-line1{inset-inline-start:9%;top:44%;width:36%;height:7%}
.sw-twilight .sw-line2{inset-inline-start:9%;top:58%;width:36%;height:7%;background:#0f2417}

.cv-template-card b{display:block;font-size:11px;font-weight:700;color:#d8d4e8}
.cv-template-card.active b{color:#fff}
.cv-color-row{display:flex;align-items:center;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.cv-color-row>span{font-size:11px;color:#b4b0c4}
.cv-swatches{display:flex;gap:8px}
.cv-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.cv-swatch.active{border-color:#fff}
#cvCustomColor{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer;padding:0}

.cv-future-actions{display:flex;gap:12px;flex-wrap:wrap}
.cv-future-btn{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;background:#14141f;color:#a9a5bb;padding:13px 16px;font-size:11.5px;cursor:not-allowed;opacity:.75}
.cv-future-btn em{font-style:normal;background:rgba(245,186,72,.14);color:#f5ba48;border-radius:99px;padding:3px 9px;font-size:9px;font-weight:700}
.cv-ai-btn{cursor:pointer;opacity:1;border-color:rgba(118,92,255,.4);background:rgba(118,92,255,.08);color:#dcd5ff}
.cv-ai-btn:hover{border-color:rgba(118,92,255,.7)}
.cv-ai-btn:disabled{cursor:default;opacity:.6}
.cv-ai-msg{margin-top:12px;font-size:11px;color:#8b879c}
.cv-ai-msg.is-error{color:#ff8b8b}
.cv-ai-msg.is-done{color:#54d8a4}

.cv-nav-buttons{display:flex;justify-content:space-between;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.cv-primary,.cv-secondary{border-radius:12px;padding:13px 24px;font-size:12px;font-weight:700;cursor:pointer}
.cv-primary{border:0;background:linear-gradient(135deg,#8065ff,#6245ee);color:#fff}
.cv-secondary{border:1px solid var(--line);background:transparent;color:#cbc8d6}
.cv-secondary:disabled{opacity:.35;cursor:default}

.cv-preview-pane{position:sticky;top:20px}
.cv-preview-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#8b879c;font-size:11px}
.cv-preview-frame{border:1px solid var(--line);border-radius:20px;background:#e9e9ee;max-height:calc(100vh - 90px);overflow-y:auto;padding:22px}
.cv-pages{display:flex;flex-direction:column;align-items:center;gap:22px}
.cv-page-hint{margin-top:12px;padding:10px 14px;border-radius:12px;background:#fff4e0;border:1px solid #f0d9a8;color:#8a5a10;font-size:11.5px;text-align:center}
.cv-doc-wrap{position:relative;width:100%;max-width:460px}
.cv-watermark{position:absolute;inset:0;pointer-events:none;opacity:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='130'><text x='-10' y='75' font-family='Arial' font-weight='700' font-size='21' fill='rgba(20,20,35,0.16)' transform='rotate(-24 120 65)'>abrizni.com  •  معاينة</text></svg>");background-repeat:repeat}

/* A4 paper proportions (210×297mm), scaled to fit the preview column; content
   past one page scrolls inside the sheet instead of stretching it taller. */
.cv-doc{width:100%;aspect-ratio:210/297;overflow-y:auto;background:#fff;color:#1b1c25;font-family:"Alexandria",Arial,sans-serif;line-height:1.45;padding:30px 28px;direction:ltr;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.cv-doc[dir="rtl"]{direction:rtl}
.cv-doc h1,.cv-doc h2,.cv-doc h3{margin:0}
.cv-doc h1{letter-spacing:-.015em;font-weight:800}
.cv-doc h3{display:flex;align-items:center;margin-bottom:13px}
.cv-doc .cv-empty-hint{color:#9a9aa5;font-size:11px;text-align:center;padding:60px 20px}
.cv-doc section{margin-bottom:18px}

/* Shared: pill section badge (default look, overridden per template) */
.cv-pill{display:inline-block;border-radius:999px;padding:6px 15px;font-size:9.5px;font-weight:700;background:color-mix(in srgb,var(--cv-accent) 16%,#fff);color:var(--cv-accent)}

/* Shared: timeline with connecting dots */
.cv-timeline{position:relative}
.cv-timeline:before{content:"";position:absolute;inset-inline-start:4px;top:4px;bottom:4px;width:1px;background:rgba(0,0,0,.12)}
.cv-timeline .cv-entry{position:relative;padding-inline-start:20px;margin-bottom:15px}
.cv-timeline .cv-entry:before{content:"";position:absolute;inset-inline-start:0;top:5px;width:9px;height:9px;border-radius:50%;background:var(--cv-accent)}

/* Shared: skill progress bars */
.cv-skill-bar{margin-bottom:9px;font-size:9.5px}
.cv-skill-bar span{display:block;margin-bottom:4px;font-weight:600}
.cv-skill-bar i{display:block;height:6px;border-radius:99px;background:rgba(0,0,0,.08);position:relative;overflow:hidden}
.cv-skill-bar i:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:var(--w);border-radius:99px;background:var(--cv-accent)}

/* Shared: language donut charts */
.cv-donuts{display:flex;gap:14px;flex-wrap:wrap}
.cv-donut{width:62px;text-align:center;font-size:8px}
.cv-donut-ring{position:relative;width:56px;height:56px;margin:0 auto 6px}
.cv-donut-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cv-donut-bg{fill:none;stroke:rgba(0,0,0,.1);stroke-width:3}
.cv-donut-fg{fill:none;stroke:var(--cv-accent);stroke-width:3;stroke-linecap:round}
.cv-donut-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:9.5px}
.cv-donut small{display:block;opacity:.8}

/* Shared: plain dot/number lists (hobbies, sidebar skills) and reference cards */
.cv-dot-list{list-style:disc;margin:0;padding-inline-start:18px}
.cv-dot-list li{margin-bottom:6px;font-size:9.5px}
.cv-num-list{margin:0;padding-inline-start:20px}
.cv-num-list li{margin-bottom:8px;font-size:10px}
.cv-ref-entry{margin-bottom:14px;font-size:9.5px}
.cv-ref-entry b{display:block;margin-bottom:3px;font-size:10.5px}
.cv-ref-entry span{display:block;opacity:.8}

/* Shared: bulleted job entries (title/date row, company, sub-bullets) */
.cv-job2{margin-bottom:16px}
.cv-job2-top{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:700}
.cv-job2-company{font-size:9.5px;opacity:.75;margin:2px 0 6px}
.cv-bullets{margin:0 0 6px;padding-inline-start:16px}
.cv-bullets li{font-size:9.5px;line-height:1.6;margin-bottom:4px}

.cv-entry-top{display:flex;justify-content:space-between;font-weight:700;font-size:11px}
.cv-entry-sub{color:#666;font-size:9.5px;margin:2px 0 5px}
.cv-entry-desc{font-size:10px;color:#333;white-space:pre-line}
.cv-two-col{display:grid;gap:24px}

/* ===== Template: Fresher (inspired by a light-gray sidebar resume with an
   offset white name card and a numbered personal-skills list) ===== */
.cv-doc.tpl-fresher{padding:0;display:grid;grid-template-columns:37% 63%}
.cv-doc.tpl-fresher .cv-fresher-side{position:relative;background:#f0f0f2;padding:112px 20px 30px}
.cv-doc.tpl-fresher .cv-fresher-main{padding:30px 28px 30px 24px}
.cv-doc.tpl-fresher .cv-fresher-namebox{position:absolute;top:24px;inset-inline-start:58%;width:150%;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.1);padding:18px 20px;z-index:2}
.cv-doc.tpl-fresher h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.cv-doc.tpl-fresher .cv-role{font-size:10px;color:#444;margin-top:5px}
.cv-doc.tpl-fresher .cv-fresher-side h3{border-bottom:2px solid #999;padding-bottom:6px;margin-bottom:10px}
.cv-doc.tpl-fresher .cv-fresher-side h3 .cv-pill{background:none;padding:0;color:#111;font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.03em}
.cv-doc.tpl-fresher .cv-fresher-side .cv-contact-list{list-style:none;margin:0;padding:0;font-size:9px;color:#333}
.cv-doc.tpl-fresher .cv-fresher-side .cv-contact-list li{margin-bottom:7px}
.cv-doc.tpl-fresher .cv-fresher-side .cv-dot-list{font-size:9px;color:#333}
.cv-doc.tpl-fresher .cv-fresher-main h3 .cv-pill{background:none;padding:0;color:#111;font-weight:800;font-size:12.5px}
.cv-doc.tpl-fresher .cv-fresher-main h3{gap:12px}
.cv-doc.tpl-fresher .cv-fresher-main h3:after{content:"";flex:1;height:2px;background:#111}
.cv-doc.tpl-fresher .cv-num-list{font-size:9.5px}
@media(max-width:760px){.cv-doc.tpl-fresher{grid-template-columns:1fr}.cv-doc.tpl-fresher .cv-fresher-side{padding-top:30px}.cv-doc.tpl-fresher .cv-fresher-namebox{position:static;width:auto;margin-bottom:16px;box-shadow:none}}

/* ===== Template: Velvet (inspired by a dark purple/pink glass-card resume
   with pill-tag expertise and translucent panels) ===== */
.cv-doc.tpl-velvet{background:linear-gradient(160deg,#2a1f45,#0d0a18);color:#e9e6f5;padding:30px 28px}
.cv-doc.tpl-velvet .cv-velvet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.14)}
.cv-doc.tpl-velvet h1{font-size:22.5px;color:#fff}
.cv-doc.tpl-velvet .cv-role{font-size:11px;color:color-mix(in srgb,var(--cv-accent) 60%,#fff);margin-top:5px;font-weight:700}
.cv-doc.tpl-velvet .cv-velvet-head .cv-contact-list{list-style:none;margin:0;padding:0;font-size:9px;text-align:end;color:#c9c3de}
.cv-doc.tpl-velvet .cv-velvet-head .cv-contact-list li{margin-bottom:5px}
.cv-doc.tpl-velvet .cv-two-col{grid-template-columns:1fr 1.35fr}
.cv-doc.tpl-velvet .cv-velvet-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.cv-doc.tpl-velvet h3 .cv-pill{background:none;padding:0;color:color-mix(in srgb,var(--cv-accent) 65%,#fff);font-weight:800;font-size:9px;letter-spacing:.05em;text-transform:uppercase}
.cv-doc.tpl-velvet .cv-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.cv-doc.tpl-velvet .cv-chip-row span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:5px 11px;font-size:8.5px;color:#e9e6f5}
.cv-doc.tpl-velvet .cv-entry-desc,.cv-doc.tpl-velvet .cv-dot-list{color:#d8d4ea}
.cv-doc.tpl-velvet .cv-job2-top{color:#fff}
.cv-doc.tpl-velvet .cv-job2-top span{color:#b9b2d0;font-weight:400;font-size:9px}
.cv-doc.tpl-velvet .cv-job2-company{color:color-mix(in srgb,var(--cv-accent) 60%,#fff)}
.cv-doc.tpl-velvet .cv-bullets li{color:#d8d4ea}
.cv-doc.tpl-velvet .cv-ref-entry b{color:#fff}
.cv-doc.tpl-velvet .cv-ref-entry span{color:#c3bcd9}
@media(max-width:760px){.cv-doc.tpl-velvet .cv-two-col{grid-template-columns:1fr}.cv-doc.tpl-velvet .cv-velvet-head{flex-direction:column}.cv-doc.tpl-velvet .cv-velvet-head .cv-contact-list{text-align:start}}

/* ===== Template: Classic (inspired by a blue capsule-header resume with a
   circular photo and bulleted work experience) ===== */
.cv-doc.tpl-classic{padding:32px 34px}
.cv-doc.tpl-classic .cv-classic-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cv-doc.tpl-classic .cv-classic-pill{background:color-mix(in srgb,var(--cv-accent) 70%,#fff);border-radius:40px;padding:16px 26px;flex:1}
.cv-doc.tpl-classic h1{font-size:17px;letter-spacing:.06em;color:#151a24}
.cv-doc.tpl-classic .cv-role{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#2c3542;margin-top:4px}
.cv-doc.tpl-classic .cv-avatar-lg{width:96px;height:96px;border-radius:50%;flex-shrink:0;background:#eef2f8;border:4px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.18);display:grid;place-items:center;font-size:21.5px;font-weight:700;overflow:hidden}
.cv-doc.tpl-classic .cv-avatar-lg img{width:100%;height:100%;object-fit:cover}
.cv-doc.tpl-classic .cv-contact-row{display:flex;flex-wrap:wrap;gap:20px;margin:22px 0 18px;padding-bottom:14px;border-bottom:1px solid #dde3ec;font-size:9.5px;color:#3a4048}
.cv-doc.tpl-classic .cv-two-col{grid-template-columns:1fr 1.3fr}
.cv-doc.tpl-classic h3 .cv-pill{background:none;padding:0;color:color-mix(in srgb,var(--cv-accent) 70%,#1b1c25);font-style:italic;font-family:Georgia,"Alexandria",serif;font-weight:700;font-size:12.5px}
.cv-doc.tpl-classic .cv-dot-list{font-size:9.5px;color:#333}
@media(max-width:760px){.cv-doc.tpl-classic .cv-classic-head{flex-direction:column;align-items:flex-start}.cv-doc.tpl-classic .cv-two-col{grid-template-columns:1fr}}

/* ===== Template: Blush (inspired by a pastel resume with a color-blob photo
   frame and a timeline of experience dots) ===== */
.cv-doc.tpl-blush{padding:0;background:#fdf6f1}
.cv-doc.tpl-blush .cv-blush-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:30px 30px 0}
.cv-doc.tpl-blush h1{font-family:Georgia,"Alexandria",serif;font-size:22.5px;line-height:1.15;color:#5b4636;text-transform:uppercase;letter-spacing:.02em}
.cv-doc.tpl-blush .cv-role{font-weight:700;margin-top:8px;font-size:11px;color:#7a4a30}
.cv-doc.tpl-blush .cv-contact-list{list-style:none;margin:14px 0 0;padding:0;font-size:9px;color:#6b5747}
.cv-doc.tpl-blush .cv-contact-list li{margin-bottom:6px}
.cv-doc.tpl-blush .cv-blush-photo{position:relative;width:120px;height:120px;flex-shrink:0}
.cv-doc.tpl-blush .cv-blush-photo:before{content:"";position:absolute;top:-20px;inset-inline-end:-20px;width:170px;height:170px;border-radius:0 0 0 70px;background:color-mix(in srgb,var(--cv-accent) 35%,#e8c8ae);z-index:0}
.cv-doc.tpl-blush .cv-avatar-lg{position:relative;z-index:1;width:120px;height:120px;border-radius:50%;overflow:hidden;background:#f1ece7;border:4px solid #fff;display:grid;place-items:center;font-size:27px;font-weight:700}
.cv-doc.tpl-blush .cv-avatar-lg img{width:100%;height:100%;object-fit:cover}
.cv-doc.tpl-blush .cv-blush-summary{margin:20px 30px 0;font-size:9.5px;color:#57493d}
.cv-doc.tpl-blush .cv-two-col{grid-template-columns:1fr 1.2fr;margin:22px 30px 30px;gap:22px}
.cv-doc.tpl-blush h3 .cv-pill{background:color-mix(in srgb,var(--cv-accent) 22%,#fff);color:#5b4636;border-radius:99px}
.cv-doc.tpl-blush .cv-skill-bar i:before{background:color-mix(in srgb,var(--cv-accent) 70%,#7a4a30)}
@media(max-width:760px){.cv-doc.tpl-blush .cv-blush-head{flex-direction:column}.cv-doc.tpl-blush .cv-blush-photo{position:static;margin-top:16px}.cv-doc.tpl-blush .cv-blush-photo:before{inset-inline-end:auto;inset-inline-start:0}.cv-doc.tpl-blush .cv-two-col{grid-template-columns:1fr;margin:22px 20px 24px}}

/* ===== Template: Twilight (inspired by a split light/dark-green resume: a
   sibling of "modern" with a different palette, percentage skill rows and
   ring-badge contact rows) ===== */
.cv-doc.tpl-twilight{padding:0;position:relative;background:#f4f3ee;overflow:hidden}
.cv-doc.tpl-twilight .cv-twilight-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 26px 0}
.cv-doc.tpl-twilight h1{font-size:20.5px;font-weight:800;color:#1b2b1f}
.cv-doc.tpl-twilight .cv-role{font-size:10.5px;color:#3b4a3d;margin-top:6px}
.cv-doc.tpl-twilight .cv-avatar-lg{width:104px;height:104px;flex-shrink:0;border-radius:50%;background:#cfcabb;border:5px solid #fff;box-shadow:0 10px 22px rgba(0,0,0,.24);display:grid;place-items:center;font-size:25px;font-weight:700;overflow:hidden}
.cv-doc.tpl-twilight .cv-avatar-lg img{width:100%;height:100%;object-fit:cover}
.cv-doc.tpl-twilight .cv-twilight-about{position:relative;z-index:1;margin:16px 26px 0;background:color-mix(in srgb,var(--cv-accent) 22%,#dfe0d0);border-radius:16px;padding:14px 18px}
.cv-doc.tpl-twilight .cv-twilight-about .cv-pill{background:#1b2b1f;color:#fff;margin-bottom:8px;padding:5px 14px;font-size:8.5px}
.cv-doc.tpl-twilight .cv-twilight-about p{margin:0;font-size:9.5px;line-height:1.7;color:#232a20}
.cv-doc.tpl-twilight .cv-twilight-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;margin-top:18px}
.cv-doc.tpl-twilight .cv-twilight-light{padding:8px 20px 24px 26px;color:#1b2b1f}
.cv-doc.tpl-twilight .cv-twilight-dark{background:#16261a;color:#eef1e9;padding:8px 26px 24px 20px}
.cv-doc.tpl-twilight h3 .cv-pill{background:color-mix(in srgb,var(--cv-accent) 45%,#a9ac86);color:#1b2b1f;font-size:8.5px;font-weight:700;padding:6px 14px}
.cv-doc.tpl-twilight .cv-twilight-dark h3 .cv-pill{background:color-mix(in srgb,var(--cv-accent) 40%,#3a4a3d);color:#fff}
.cv-doc.tpl-twilight .cv-skill-row{display:flex;justify-content:space-between;font-size:9.5px;margin-bottom:12px}
.cv-doc.tpl-twilight .cv-skill-row b{font-weight:700}
.cv-doc.tpl-twilight .cv-icon-row{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:9px}
.cv-doc.tpl-twilight .cv-icon-badge{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:color-mix(in srgb,var(--cv-accent) 55%,#1b2b1f);color:#fff;display:grid;place-items:center;font-size:9px}
.cv-doc.tpl-twilight .cv-job2-top{color:#fff}
.cv-doc.tpl-twilight .cv-job2-top span{color:#b9c2ae;font-weight:400;font-size:9px}
.cv-doc.tpl-twilight .cv-job2-company{color:#cdd6bd}
.cv-doc.tpl-twilight .cv-bullets li{color:#dfe4d3}
.cv-doc.tpl-twilight .cv-donuts{gap:10px}
.cv-doc.tpl-twilight .cv-donut{width:56px}
.cv-doc.tpl-twilight .cv-donut-ring{width:50px;height:50px}
.cv-doc.tpl-twilight .cv-donut-bg{stroke:rgba(255,255,255,.15)}
.cv-doc.tpl-twilight .cv-donut-fg{stroke:#fff}
.cv-doc.tpl-twilight .cv-donut-ring b{color:#fff;font-size:9px}
.cv-doc.tpl-twilight .cv-donut small{color:#dfe4d3}
@media(max-width:760px){.cv-doc.tpl-twilight .cv-twilight-grid{grid-template-columns:1fr}.cv-doc.tpl-twilight .cv-avatar-lg{width:88px;height:88px}}

/* Print / "Download PDF": prints only the live-preview document, at the same
   460px design width the preview column already renders at, scaled up
   uniformly (font sizes, padding, everything together) to fill a real A4
   sheet — so the PDF is visually identical to the on-screen template, just
   bigger, instead of relaying out at true A4 pixel width where the
   hand-tuned font/spacing values would look tiny and sparse. */
@media print{
  @page{size:A4;margin:0}
  body *{visibility:hidden}
  .cv-preview-frame,.cv-preview-frame *{visibility:visible}
  .cv-preview-frame{position:fixed;inset:0;margin:0;padding:0;border:0;border-radius:0;max-height:none;overflow:visible;background:#fff}
  .cv-pages{gap:0;align-items:stretch}
  .cv-watermark{display:none}
  .cv-doc-wrap{width:210mm;height:297mm;max-width:none;page-break-after:always}
  .cv-doc-wrap:last-child{page-break-after:auto}
  .cv-doc{width:460px;transform:scale(1.7255);transform-origin:top left;box-shadow:none;overflow:hidden}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media(max-width:980px){
  .cv-layout{grid-template-columns:1fr}
  .cv-preview-pane{position:static;order:2}
  .cv-form{order:1}
}
@media(max-width:620px){
  .cv-form{padding:22px}
  .cv-fields{grid-template-columns:1fr}
  .cv-entry-card .cv-entry-grid{grid-template-columns:1fr}
  .cv-template-grid{grid-template-columns:repeat(3,1fr)}
  .cv-doc.tpl-classic .cv-two-col{grid-template-columns:1fr}
}