/* A4 resume page — shared by builder, thumbnails and example pages */
.cvpage{width:794px;min-height:1123px;background:#fff;color:#222;padding:52px 58px;--accent:#e0633a;direction:rtl;text-align:right;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:13px;line-height:1.7;box-sizing:border-box}
.cvpage *{box-sizing:border-box}
.cvpage h1{margin:0;font-size:30px;line-height:1.25;font-weight:700}
.cvpage .role{color:var(--accent);font-size:15px;margin-top:2px;font-weight:500}
.cvpage .contact{margin-top:8px;color:#555;font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 16px}
.cvpage .contact span{direction:ltr;unicode-bidi:isolate}
.cvpage h3{margin:22px 0 8px;font-size:14px;font-weight:700;color:#222}
.cvpage p{margin:0 0 6px;white-space:pre-wrap}
.cvpage .entry{margin-bottom:12px;break-inside:avoid}
.cvpage .entry-h{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:14px}
.cvpage .entry-h span:last-child{font-weight:400;color:#777;font-size:12px;white-space:nowrap}
.cvpage .sub{color:#888;font-size:12px;margin:0 0 4px}
.cvpage .chips{display:flex;flex-wrap:wrap;gap:6px}
.cvpage .chip{background:color-mix(in srgb,var(--accent) 12%,#fff);border-radius:3px;padding:2px 10px;font-size:12px}
.cvpage .empty-hint{color:#aaa}

/* classic */
.cvpage.classic h1{color:var(--accent)}
.cvpage.classic h3{border-bottom:1px solid #ddd;padding-bottom:4px}

/* modern: colored sidebar */
.cvpage.modern{padding:0;display:grid;grid-template-columns:250px 1fr}
.cvpage.modern .side{background:var(--accent);color:#fff;padding:46px 26px}
.cvpage.modern .side h1{font-size:26px}
.cvpage.modern .side .role,.cvpage.modern .side .contact{color:rgba(255,255,255,.88)}
.cvpage.modern .side .contact{flex-direction:column;gap:4px;align-items:flex-start}
.cvpage.modern .side h3{color:#fff}
.cvpage.modern .side .chip{background:rgba(255,255,255,.18);color:#fff}
.cvpage.modern .main{padding:46px 34px}
.cvpage.modern .main h3:first-child{margin-top:0}

/* minimal */
.cvpage.minimal h1{font-weight:400;font-size:34px}
.cvpage.minimal .role{color:#666}
.cvpage.minimal h3{color:var(--accent);letter-spacing:0}
.cvpage.minimal .chip{background:none;padding:0 0 0 14px}

/* professional: full header band */
.cvpage.professional{padding:0}
.cvpage.professional .band{background:var(--accent);color:#fff;padding:40px 58px 30px}
.cvpage.professional .band .role,.cvpage.professional .band .contact{color:rgba(255,255,255,.9)}
.cvpage.professional .body{padding:10px 58px 48px}
.cvpage.professional h3{display:flex;align-items:center;gap:10px}
.cvpage.professional h3::after{content:"";flex:1;height:2px;background:color-mix(in srgb,var(--accent) 30%,#fff)}

/* elegant: centered serif */
.cvpage.elegant{font-family:"Noto Naskh Arabic",serif;font-size:14px}
.cvpage.elegant .head{text-align:center;border-bottom:3px double var(--accent);padding-bottom:16px}
.cvpage.elegant h1{font-size:36px;font-weight:600}
.cvpage.elegant .contact{justify-content:center}
.cvpage.elegant h3{text-align:center;color:var(--accent);font-size:16px;margin-top:24px}
.cvpage.elegant h3::before,.cvpage.elegant h3::after{content:" — "}
.cvpage.elegant .chips{justify-content:center}

/* executive: light sidebar + timeline */
.cvpage.executive{padding:0;display:grid;grid-template-columns:1fr 240px}
.cvpage.executive .main{padding:48px 40px 48px 30px}
.cvpage.executive .side{background:color-mix(in srgb,var(--accent) 9%,#fff);padding:48px 24px;grid-column:2;grid-row:1}
.cvpage.executive .main{grid-column:1;grid-row:1}
.cvpage.executive h1{color:var(--accent)}
.cvpage.executive .side .contact{flex-direction:column;gap:4px;align-items:flex-start}
.cvpage.executive .main .entry{border-right:2px solid color-mix(in srgb,var(--accent) 30%,#fff);padding-right:16px;position:relative}
.cvpage.executive .main .entry::before{content:"";position:absolute;right:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.cvpage.executive h3{text-transform:none;color:var(--accent)}

/* ats: plain, black, single column */
.cvpage.ats{--accent:#222 !important}
.cvpage.ats h1{font-size:28px}
.cvpage.ats .role{color:#333}
.cvpage.ats h3{border-bottom:1px solid #222;padding-bottom:2px}
.cvpage.ats .chip{background:none;padding:0}
.cvpage.ats .chip:not(:last-child)::after{content:"،"}

/* mini mount */
.cv-mini{width:794px;position:absolute;top:0;right:0;transform-origin:top right;pointer-events:none}

/* ---------- cover letters ---------- */
.cvletter{font-size:14px;line-height:1.95}
.cvletter .lhead{padding-bottom:18px;border-bottom:2px solid var(--accent);margin-bottom:28px}
.cvletter h1{color:var(--accent)}
.cvletter .to{margin-bottom:22px;color:#444}
.cvletter .to b{display:block;margin-top:14px;color:#222}
.cvletter .lbody{white-space:pre-wrap}
.cvletter .sign{margin-top:26px}
.cvletter.l-modern{padding:0}
.cvletter.l-modern .lhead{background:var(--accent);color:#fff;padding:44px 58px 28px;border:0}
.cvletter.l-modern h1{color:#fff}
.cvletter.l-modern .role,.cvletter.l-modern .contact{color:rgba(255,255,255,.9)}
.cvletter.l-modern .lmain{padding:0 58px 48px}
.cvletter.l-side{padding:0;display:grid;grid-template-columns:230px 1fr}
.cvletter.l-side .side{background:color-mix(in srgb,var(--accent) 10%,#fff);padding:48px 24px}
.cvletter.l-side .side .contact{flex-direction:column;gap:4px;align-items:flex-start;margin-top:16px}
.cvletter.l-side .main{padding:48px 40px}
.cvletter.l-elegant{font-family:"Noto Naskh Arabic",serif;font-size:15px}
.cvletter.l-elegant .lhead{text-align:center;border-bottom:3px double var(--accent)}
.cvletter.l-elegant .contact{justify-content:center}
.cvletter.l-elegant h1{font-size:34px;font-weight:600}