/* Siyagha — shared design, direction-agnostic.
 *
 * Ported from the v1 Arabic-only build unchanged in appearance. Every physical
 * side (padding-right, border-left, right:0) became its logical equivalent
 * (padding-inline-start, border-inline-end, inset-inline-start) so one
 * stylesheet lays out correctly in both directions and the two views cannot
 * drift apart visually.
 *
 * Two declarations stayed physical on purpose: the classic template's
 * centred underline (left:50% + translateX(-50%) is geometry, not a side) and
 * the modern template's print header (inset-inline:0 stretches it edge to
 * edge). Both are commented at the point of use.
 *
 * Font stacks resolve through --font-ui / --font-serif / --font-modern /
 * --font-exec, which rtl.css and ltr.css define. Arabic and Latin need
 * different families for the same role, and this is the seam that lets the
 * locale switcher change them without touching any layout rule.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--font-ui);background:#f9f8f5;color:#1a1a2e;min-height:100vh}

/* ======= BRAND HEADER ======= */
:root{--brand-h:64px;--footer-h:54px}
.brand-bar{
  height:var(--brand-h);
  display:flex;align-items:center;gap:14px;
  padding:0 28px;
  background:linear-gradient(100deg,#16314e 0%,#1a3a5c 55%,#1a3a5c 100%);
  border-bottom:3px solid #1abc9c;
  position:sticky;top:0;z-index:60;
  box-shadow:0 2px 12px rgba(26,58,92,.18);
}
/* Official Ṣiyāgha lockup (white version for the dark header bar) */
.brand-logo{height:42px;width:auto;display:block;flex-shrink:0}
.brand-tagline{margin-inline-start:auto;font-size:12px;color:rgba(255,255,255,.7);font-weight:500}
@media(max-width:560px){
  .brand-bar{padding:0 16px;gap:10px}
  .brand-logo{height:34px}
  .brand-tagline{display:none}
}

/* ======= LAYOUT ======= */
.app{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--brand-h) - var(--footer-h))}
@media(max-width:900px){.app{grid-template-columns:1fr}}

/* ======= SITE FOOTER ======= */
.site-footer{height:var(--footer-h);display:flex;align-items:center;justify-content:center;gap:11px;background:#fff;border-top:1px solid #e7e5df;padding:0 20px}
.footer-logo{height:30px;width:auto;display:block;opacity:.95;flex-shrink:0}
.footer-copy{font-size:13px;font-weight:600;color:#4b5563;letter-spacing:.2px;margin:0}
.footer-help{font-size:12.5px;font-weight:600;color:#6b7280;letter-spacing:.2px;margin:0}
.footer-link{color:#1a3a5c;font-weight:800;text-decoration:none;border-bottom:1.5px solid #1abc9c;padding-bottom:1px;transition:color .2s,border-color .2s}
.footer-link:hover,.footer-link:focus{color:#1abc9c;border-color:#1a3a5c;outline:none}
@media(max-width:900px){.site-footer{height:auto;min-height:var(--footer-h);padding:14px 18px;flex-wrap:wrap;text-align:center}}
@media(max-width:640px){.site-footer{gap:6px}.footer-copy,.footer-help{flex:1 1 100%}}

/* ======= LEFT: FORM PANEL ======= */
.form-panel{background:#fff;padding:32px 28px;overflow-y:auto;max-height:calc(100vh - var(--brand-h) - var(--footer-h));border-inline-end:1px solid #e5e7eb}
.form-panel::-webkit-scrollbar{width:5px}
.form-panel::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}

/* Header */
.panel-header{margin-bottom:28px}
.panel-header h1{font-size:22px;font-weight:800;color:#1a3a5c}
.panel-header p{font-size:13px;color:#6b7280;margin-top:4px}
.badge{display:inline-block;background:#e0f2f1;color:#00796b;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-inline-start:6px}

/* Progress bar */
.progress-bar{height:4px;background:#e5e7eb;border-radius:2px;margin-bottom:24px}
.progress-fill{height:4px;background:linear-gradient(90deg,#1a3a5c,#2980b9);border-radius:2px;transition:width .3s ease}

/* Step buttons */
.steps{display:flex;gap:4px;margin-bottom:28px}
.step-btn{flex:1;padding:8px 6px;border:none;border-radius:8px;font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;background:#f3f4f6;color:#6b7280}
.step-btn.active{background:#1a3a5c;color:#fff}
.step-btn.done{background:#d1fae5;color:#065f46}

/* Preview empty state. Chrome, not document: it sits beside the rendered page,
   never inside it, so it cannot end up in an export. */
.preview-empty{margin:14px auto 0;max-width:46ch;text-align:center;font-size:12.5px;line-height:1.7;color:#64748b}

/* Form sections — hidden by default; the controller marks the mounted step
   .active, the same class it uses on the step buttons. Without the second
   rule the panel is built correctly and every field is unreachable. */
.form-section{display:none}
.form-section.active{display:block}
.section-title{font-size:15px;font-weight:700;color:#1a3a5c;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #e5e7eb;display:flex;align-items:center;gap:8px}
.section-title .icon{font-size:18px}

/* Input groups */
.input-group{margin-bottom:16px}
.input-group label{display:block;font-size:12.5px;font-weight:600;color:#374151;margin-bottom:6px}
.input-group .hint{font-size:11.5px;color:#9ca3af;margin-bottom:6px;font-style:italic}
.input-group input,.input-group textarea,.input-group select{width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-family:var(--font-ui);font-size:13px;color:#1a1a2e;outline:none;transition:border-color .2s}
.input-group input:focus,.input-group textarea:focus,.input-group select:focus{border-color:#1a3a5c}
.input-group textarea{resize:vertical;min-height:80px}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* Achievement builder */
.achievement-builder{background:#f8fafc;border:1.5px dashed #cbd5e1;border-radius:10px;padding:16px;margin-bottom:12px}
.achievement-builder .builder-title{font-size:13px;font-weight:700;color:#1a3a5c;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.achievement-builder .builder-subtitle{font-size:11px;color:#94a3b8;margin-bottom:12px;line-height:1.6}
.sentence-parts{display:flex;flex-direction:column;gap:8px}
.sentence-part{display:flex;align-items:center;gap:8px}
.part-label{font-size:11px;font-weight:700;color:#1a3a5c;min-width:90px;flex-shrink:0}
.part-input{flex:1;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:6px;font-family:var(--font-ui);font-size:12.5px;color:#1a1a2e;outline:none;transition:border-color .2s}
.part-input:focus{border-color:#2980b9}
.part-connector{font-size:11px;color:#94a3b8;font-style:italic;padding-inline-start:8px}
.achievement-preview{margin-top:12px;padding:10px 14px;background:#eff6ff;border-inline-start:3px solid #2980b9;border-radius:6px;font-size:12.5px;color:#1e3a5f;line-height:1.6;min-height:44px}
.achievement-preview .preview-label{font-size:10px;font-weight:700;color:#93c5fd;margin-bottom:4px}
.add-achievement-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#f0f9ff;border:1.5px dashed #7dd3fc;border-radius:8px;font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:#0284c7;cursor:pointer;transition:all .2s;width:100%;justify-content:center;margin-top:8px}
.add-achievement-btn:hover{background:#e0f2fe}

/* Order warning */
.order-note{background:#fef9c3;border:1px solid #fde047;border-radius:8px;padding:10px 14px;font-size:12px;color:#713f12;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start}
.order-note .icon{font-size:16px;flex-shrink:0;margin-top:1px}

/* Skills grid */
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.skill-chip{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:#f3f4f6;border-radius:8px;font-size:12.5px;cursor:pointer;border:1.5px solid transparent;transition:all .2s;user-select:none}
.skill-chip.selected{background:#e0f2f1;border-color:#10b981;color:#065f46;font-weight:600}
.skill-chip .checkmark{opacity:0;transition:opacity .2s;font-size:14px}
.skill-chip.selected .checkmark{opacity:1}

/* Nav buttons */
.nav-btns{display:flex;gap:10px;margin-top:24px}
.btn-next{flex:1;padding:12px;background:#1a3a5c;color:#fff;border:none;border-radius:10px;font-family:var(--font-ui);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.btn-next:hover{background:#2980b9}
.btn-back{padding:12px 20px;background:#f3f4f6;color:#374151;border:none;border-radius:10px;font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-back:hover{background:#e5e7eb}
.btn-generate{flex:1;padding:12px;background:linear-gradient(135deg,#1a3a5c,#2980b9);color:#fff;border:none;border-radius:10px;font-family:var(--font-ui);font-size:14px;font-weight:700;cursor:pointer}

/* ======= RIGHT: PREVIEW PANEL ======= */
.preview-panel{background:#e8edf3;padding:24px;overflow-y:auto;max-height:calc(100vh - var(--brand-h) - var(--footer-h));display:flex;flex-direction:column;gap:16px}
.preview-panel::-webkit-scrollbar{width:5px}
.preview-panel::-webkit-scrollbar-thumb{background:#c1c8d4;border-radius:10px}
.preview-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.preview-header h2{font-size:16px;font-weight:700;color:#374151}
.preview-tabs{display:flex;gap:8px}
.tab-btn{padding:7px 16px;border:1.5px solid #d1d5db;border-radius:8px;background:#fff;font-family:var(--font-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;color:#6b7280}
.tab-btn.active{background:#1a3a5c;color:#fff;border-color:#1a3a5c}
.cv-preview-wrap{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.1);overflow:hidden}

/* The ATS document is NOT described here. render-ats.js builds it and
 * render/templates/ats.css styles it, self-contained and linked separately.
 * v1's .ats-* rules were removed rather than ported: a second description of
 * the locked export could drift from it, and two of them used display:flex,
 * which §6 rule 1 forbids in that document. */

/* ====== VISUAL CV — shared structural base (per-template art directions below) ====== */
#visual-cv{display:none;color:#2b2b2b}
.vcv-grid{display:grid;grid-template-columns:30% 1fr}
.vcv-topbar{display:none}
/* Shared header extras used only by the Modern template (hidden elsewhere) */
.vcv-tb-main{min-width:0}
.vcv-tb-photo{display:none}
.vcv-modern-contact{display:none}
.vcv-print-header{display:none}
.vcv-sidebar{padding:28px 20px}
.vcv-photo{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#2980b9,#1abc9c);display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:800;color:#fff;margin:0 auto 18px;letter-spacing:2px;overflow:hidden}
.vcv-s-title{font-size:10px;font-weight:800;letter-spacing:1.5px;margin-bottom:10px;padding-bottom:5px}
.vcv-contact-item{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:8px;word-break:break-word;line-height:1.5}
.vcv-contact-item svg{width:13px;height:13px;flex-shrink:0;display:block}
.vcv-skill-item{margin-bottom:9px}
.vcv-skill-name{font-size:11.5px;margin-bottom:4px}
.vcv-bar-bg{border-radius:10px;height:4px;background:rgba(0,0,0,.1)}
.vcv-bar-fill{border-radius:10px;height:4px;background:#1abc9c}
.vcv-lang-item{margin-bottom:8px}
.vcv-lang-name{font-size:11.5px;margin-bottom:4px}
.vcv-dots{display:flex;gap:4px}
.vcv-dot{width:9px;height:9px;border-radius:50%}
.vcv-dot.on{background:#1abc9c}
.vcv-dot.off{background:rgba(0,0,0,.12)}
#vp-skills-section{margin-top:18px}
#vp-lang-section{margin-top:18px}
.vcv-main{padding:28px 28px 28px 32px}
.vcv-name{font-size:22px;font-weight:800;color:#1a3a5c;margin-bottom:3px}
.vcv-job-title{font-size:12.5px;font-weight:600;color:#2980b9;margin-bottom:10px}
.vcv-summary{font-size:12px;line-height:1.7;color:#4b5563;margin-bottom:16px}
.vcv-section{margin-bottom:16px}
.vcv-section-title{font-size:11.5px;font-weight:800;color:#1a3a5c;letter-spacing:1px;padding-bottom:5px;margin-bottom:12px}
.vcv-exp-entry{margin-bottom:14px}
.vcv-exp-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:2px}
.vcv-exp-title{font-size:12.5px;font-weight:700;color:#1a3a5c}
.vcv-exp-date{font-size:10.5px;font-weight:700;color:#2980b9;white-space:nowrap}
.vcv-exp-company{font-size:11.5px;color:#6b7280;margin-bottom:5px}
.vcv-bullets{padding-inline-start:16px;margin-bottom:4px}
.vcv-bullets li{font-size:11.5px;color:#4b5563;margin-bottom:3px;line-height:1.6;list-style:disc}
.vcv-edu-entry{margin-bottom:10px}
.vcv-edu-degree{font-size:12.5px;font-weight:700;color:#1a3a5c}
.vcv-edu-school{font-size:11.5px;color:#6b7280}
.vcv-cert{margin-bottom:6px}
.vcv-cert-name{font-size:11.5px;font-weight:700;color:#1a3a5c}
.vcv-cert-org{font-size:10.5px;color:#9ca3af}
.vcv-num{font:inherit}

/* ====== VISUAL CV TEMPLATE CHOOSER ====== */
.vt-chooser{display:none;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #d9e0ea;border-radius:12px;padding:12px 16px;box-shadow:0 2px 10px rgba(26,58,92,.06)}
.vt-chooser-label{font-size:12.5px;font-weight:700;color:#1a3a5c;display:flex;align-items:center;gap:6px}
.vt-seg{display:flex;gap:6px;flex-wrap:wrap}
.vt-seg-btn{padding:8px 16px;border:1.5px solid #d1d5db;border-radius:8px;background:#f9f8f5;font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:#374151;cursor:pointer;transition:all .2s}
.vt-seg-btn:hover{border-color:#1abc9c;color:#1a3a5c}
.vt-seg-btn.active{background:#1a3a5c;color:#fff;border-color:#1a3a5c;box-shadow:0 2px 8px rgba(26,58,92,.2)}

/* ============================================================
   THE 3 VISUAL TEMPLATES — distinct art directions, one brand.
   All share the markup above; each toggles a wrapper class on #visual-cv.
   ============================================================ */

/* ===== TEMPLATE 1 — THE CLASSIC (النمط الكلاسيكي) =====
   Academic / dark-academia: cream ground, charcoal text, thin navy & brass
   rules, single wide centered column, serif headings, traditional bullets. */
#visual-cv.vt-classic{font-family:var(--font-serif);background:#faf7f0;color:#2b2722;padding:44px 52px 40px}
#visual-cv.vt-classic .vcv-topbar{display:block;text-align:center;border-bottom:1.5px solid #1a3a5c;padding-bottom:18px;margin-bottom:6px;position:relative}
/* left:50% + translateX(-50%) centres the rule. Geometry, not a side — it must
   not become a logical property or the underline slides to one edge. */
#visual-cv.vt-classic .vcv-topbar::after{content:'';position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:92px;height:3px;background:#9a7b4f}
#visual-cv.vt-classic .vcv-tb-name{font-family:var(--font-serif);font-size:30px;font-weight:700;color:#1a2c3d;letter-spacing:.5px;line-height:1.25}
#visual-cv.vt-classic .vcv-tb-title{font-family:var(--font-serif);font-size:14px;font-weight:500;font-style:italic;color:#5a4a35;letter-spacing:2px;margin-top:5px}
#visual-cv.vt-classic .vcv-tb-contact{font-family:var(--font-ui);font-size:11px;color:#5b5346;letter-spacing:.3px;margin-top:12px}
#visual-cv.vt-classic .vcv-grid{grid-template-columns:1fr}
#visual-cv.vt-classic .vcv-main{order:1;padding:22px 0 0}
#visual-cv.vt-classic .vcv-sidebar{order:2;background:transparent;color:#2b2722;padding:0}
#visual-cv.vt-classic .vcv-photo,
#visual-cv.vt-classic .vcv-contact-title,
#visual-cv.vt-classic .vcv-contact-item,
#visual-cv.vt-classic .vcv-name,
#visual-cv.vt-classic .vcv-job-title{display:none}
#visual-cv.vt-classic .vcv-section-title,
#visual-cv.vt-classic .vcv-s-title{font-family:var(--font-serif);font-size:14px;font-weight:700;color:#1a3a5c;letter-spacing:1px;border-bottom:1px solid #c9bfa9;padding-bottom:5px;margin-bottom:12px}
#visual-cv.vt-classic .vcv-summary{font-family:var(--font-serif);font-size:13.5px;line-height:1.95;color:#3a352d;margin-bottom:20px;text-align:justify}
#visual-cv.vt-classic .vcv-exp-title,
#visual-cv.vt-classic .vcv-edu-degree,
#visual-cv.vt-classic .vcv-cert-name{font-family:var(--font-serif);font-size:13.5px;font-weight:700;color:#1a2c3d}
#visual-cv.vt-classic .vcv-exp-date{font-family:var(--font-serif);color:#9a7b4f;font-style:italic;font-weight:600}
#visual-cv.vt-classic .vcv-exp-company,
#visual-cv.vt-classic .vcv-edu-school,
#visual-cv.vt-classic .vcv-cert-org{font-family:var(--font-ui);color:#6b6354;font-size:11.5px}
#visual-cv.vt-classic .vcv-exp-entry{border-bottom:1px dotted #d8cfba;padding-bottom:10px}
#visual-cv.vt-classic .vcv-bullets{padding-inline-start:18px}
#visual-cv.vt-classic .vcv-bullets li{font-family:var(--font-ui);list-style:disc;color:#3a352d;font-size:12px;line-height:1.75}
#visual-cv.vt-classic .vcv-bullets li::marker{color:#9a7b4f}
#visual-cv.vt-classic .vcv-bar-bg,
#visual-cv.vt-classic .vcv-dots{display:none}
#visual-cv.vt-classic #vp-skills{display:flex;flex-wrap:wrap;gap:3px 22px}
#visual-cv.vt-classic .vcv-skill-item{margin-bottom:2px}
#visual-cv.vt-classic .vcv-skill-name{font-family:var(--font-ui);font-size:12px;color:#3a352d;margin-bottom:0;position:relative;padding-inline-start:13px}
#visual-cv.vt-classic .vcv-skill-name::before{content:'•';position:absolute;inset-inline-start:0;color:#9a7b4f}
#visual-cv.vt-classic .vcv-lang-item{margin-bottom:4px}
#visual-cv.vt-classic .vcv-lang-name{font-family:var(--font-ui);font-size:12px;color:#3a352d;margin-bottom:0}

/* ===== TEMPLATE 2 — THE MODERN (النمط العصري) =====
   Editorial & calm, inspired by the attached reference: a full-width muted
   sage-green header (name, title, neatly ordered contact, optional round photo),
   a subtle light-gray vertical band on the left edge, white single-column content
   with elegant green section titles, and a compact running header for print
   continuity across pages. Off-white / sage palette, brand-consistent. */
#visual-cv.vt-modern{font-family:var(--font-modern);background:#fdfdfc;color:#3e3e3b;position:relative;padding:0 0 34px}
/* subtle decorative left band (mirrors the reference page structure) */
#visual-cv.vt-modern::before{content:'';position:absolute;top:0;inset-inline-end:0;bottom:0;width:34px;background:#ecebe8;z-index:0}

/* ---- Green header ---- */
#visual-cv.vt-modern .vcv-topbar{display:flex;align-items:center;justify-content:space-between;gap:22px;background:#5d7360;color:#f4f7f1;padding:34px 42px 26px 48px;position:relative;z-index:2}
#visual-cv.vt-modern .vcv-tb-main{flex:1}
#visual-cv.vt-modern .vcv-tb-name{font-family:var(--font-modern);font-size:31px;font-weight:700;letter-spacing:.3px;line-height:1.15;color:#f6f8f3}
#visual-cv.vt-modern .vcv-tb-title{font-family:var(--font-modern);font-size:15px;font-weight:500;color:#dce6d8;letter-spacing:.5px;margin-top:5px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.32);margin-bottom:12px}
#visual-cv.vt-modern .vcv-tb-contact{display:none}
#visual-cv.vt-modern .vcv-modern-contact{display:block;font-family:var(--font-modern);font-size:11.5px;line-height:1.9;color:#eaf0e7;word-break:break-word}
#visual-cv.vt-modern .vcv-modern-contact .cc-item{unicode-bidi:isolate}
#visual-cv.vt-modern .vcv-modern-contact .cc-sep{opacity:.45;padding:0 8px}
/* optional round photo (tasteful; shows initials when no image) */
#visual-cv.vt-modern .vcv-tb-photo{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.14);border:3px solid rgba(255,255,255,.55);overflow:hidden;font-size:30px;font-weight:700;color:#f4f7f1}
#visual-cv.vt-modern .vcv-tb-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Single-column content over the band ---- */
#visual-cv.vt-modern .vcv-grid{grid-template-columns:1fr}
#visual-cv.vt-modern .vcv-main{order:1;background:transparent;padding:26px 42px 4px 48px;position:relative;z-index:1}
#visual-cv.vt-modern .vcv-sidebar{order:2;background:transparent;color:#3e3e3b;padding:0 42px 0 48px;position:relative;z-index:1}
#visual-cv.vt-modern .vcv-photo,
#visual-cv.vt-modern .vcv-contact-title,
#visual-cv.vt-modern .vcv-contact-item,
#visual-cv.vt-modern .vcv-name,
#visual-cv.vt-modern .vcv-job-title{display:none!important}
#visual-cv.vt-modern .vcv-summary{font-family:var(--font-modern);font-size:12.5px;line-height:1.95;color:#54544f;margin-bottom:22px}

/* ---- Editorial green section titles ---- */
#visual-cv.vt-modern .vcv-section-title,
#visual-cv.vt-modern .vcv-s-title{font-family:var(--font-modern);font-size:15px;font-weight:700;color:#5d7360;letter-spacing:.3px;text-transform:none;border-bottom:none;padding-bottom:0;margin-bottom:14px;display:flex;align-items:center;gap:10px}
#visual-cv.vt-modern .vcv-section-title::before,
#visual-cv.vt-modern .vcv-s-title::before{content:'';width:22px;height:2px;background:#9bb097;border-radius:2px;flex-shrink:0}
#visual-cv.vt-modern .vcv-section{margin-bottom:22px}

/* ---- Experience ---- */
#visual-cv.vt-modern .vcv-exp-entry{margin-bottom:16px}
#visual-cv.vt-modern .vcv-exp-title{font-family:var(--font-modern);font-weight:700;color:#33332f;font-size:13.5px}
#visual-cv.vt-modern .vcv-exp-date{font-family:var(--font-modern);color:#7d8a78;font-size:10.5px;font-weight:600;font-style:italic}
#visual-cv.vt-modern .vcv-exp-company{font-family:var(--font-modern);color:#6f6f68;font-size:11.5px;margin-bottom:6px}
#visual-cv.vt-modern .vcv-bullets li{font-family:var(--font-modern);color:#4a4a45;list-style:none;position:relative;padding-inline-start:16px;line-height:1.7;margin-bottom:4px}
#visual-cv.vt-modern .vcv-bullets li::before{content:'';position:absolute;inset-inline-start:0;top:8px;width:5px;height:5px;border-radius:50%;background:#8fa88b}

/* ---- Education & certifications ---- */
#visual-cv.vt-modern .vcv-edu-degree{font-family:var(--font-modern);color:#33332f;font-weight:700}
#visual-cv.vt-modern .vcv-edu-school{font-family:var(--font-modern);color:#6f6f68}
#visual-cv.vt-modern .vcv-cert{background:#f4f6f2;border-inline-start:3px solid #9bb097;padding:7px 11px;border-radius:7px;margin-bottom:6px}
#visual-cv.vt-modern .vcv-cert-name{font-family:var(--font-modern);color:#33332f}
#visual-cv.vt-modern .vcv-cert-org{color:#8a8a82}

/* ---- Skills as a clean bulleted list (no bars) ---- */
#visual-cv.vt-modern .vcv-bar-bg{display:none}
#visual-cv.vt-modern #vp-skills{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px}
#visual-cv.vt-modern .vcv-skill-item{margin-bottom:2px}
#visual-cv.vt-modern .vcv-skill-name{font-family:var(--font-modern);font-size:12px;color:#4a4a45;margin-bottom:0;position:relative;padding-inline-start:15px}
#visual-cv.vt-modern .vcv-skill-name::before{content:'';position:absolute;inset-inline-start:2px;top:7px;width:5px;height:5px;border-radius:50%;background:#8fa88b}

/* ---- Languages (subtle) ---- */
#visual-cv.vt-modern #vp-skills-section{margin-bottom:20px}
#visual-cv.vt-modern #vp-lang-section{margin-top:0}
#visual-cv.vt-modern .vcv-lang-item{margin-bottom:6px}
#visual-cv.vt-modern .vcv-lang-name{font-family:var(--font-modern);font-size:12px;color:#4a4a45;margin-bottom:4px}
#visual-cv.vt-modern .vcv-dot.on{background:#7d9679}
#visual-cv.vt-modern .vcv-dot.off{background:#dcdcd6}

/* ---- Compact running header (print continuity across pages) ---- */
/* inset-inline:0 stretches the print header edge to edge in either direction. */
#visual-cv.vt-modern .vcv-print-header{position:fixed;top:0;inset-inline:0;display:none;align-items:center;justify-content:space-between;gap:16px;background:#5d7360;color:#f4f7f1;padding:7px 14mm;font-family:var(--font-modern);border-bottom:2px solid #9bb097}
#visual-cv.vt-modern .vcv-print-header .ph-name{font-size:13px;font-weight:700;color:#f6f8f3}
#visual-cv.vt-modern .vcv-print-header .ph-title{font-size:10.5px;color:#dce6d8;font-weight:500;margin-inline-start:6px}
#visual-cv.vt-modern .vcv-print-header .ph-contact{font-size:9.5px;color:#eaf0e7;text-align:end}
#visual-cv.vt-modern .vcv-print-header .ph-contact .cc-item{unicode-bidi:isolate}
#visual-cv.vt-modern .vcv-print-header .ph-contact .cc-sep{opacity:.5;padding:0 5px}

/* ===== TEMPLATE 3 — THE STRATEGIC EXECUTIVE (النمط التنفيذي) =====
   Assertive business: high-contrast B/W with a single navy accent, strict
   single-column grid, prominent summary, sharp dividers, bold metrics. */
#visual-cv.vt-executive{font-family:var(--font-exec);background:#ffffff;color:#1a1a1a;padding:0 0 36px}
#visual-cv.vt-executive .vcv-topbar{display:block;background:#fff;border-bottom:3px solid #111;padding:34px 40px 18px}
#visual-cv.vt-executive .vcv-tb-name{font-family:var(--font-exec);font-size:30px;font-weight:900;color:#111;letter-spacing:.5px;line-height:1.15}
#visual-cv.vt-executive .vcv-tb-title{font-family:var(--font-exec);font-size:12px;font-weight:700;color:#1a3a5c;letter-spacing:4px;text-transform:uppercase;margin-top:8px}
#visual-cv.vt-executive .vcv-tb-contact{font-family:var(--font-exec);font-size:11px;font-weight:500;color:#444;letter-spacing:.3px;margin-top:12px}
#visual-cv.vt-executive .vcv-grid{grid-template-columns:1fr}
#visual-cv.vt-executive .vcv-main{order:1;padding:24px 40px 0}
#visual-cv.vt-executive .vcv-sidebar{order:2;background:transparent;color:#1a1a1a;padding:0 40px}
#visual-cv.vt-executive .vcv-photo,
#visual-cv.vt-executive .vcv-contact-title,
#visual-cv.vt-executive .vcv-contact-item,
#visual-cv.vt-executive .vcv-name,
#visual-cv.vt-executive .vcv-job-title{display:none}
#visual-cv.vt-executive .vcv-summary{font-family:var(--font-ui);font-size:12.5px;line-height:1.8;color:#222;background:#f4f6f8;border-inline-start:4px solid #1a3a5c;padding:14px 18px;margin-bottom:22px;font-weight:500}
#visual-cv.vt-executive .vcv-section-title,
#visual-cv.vt-executive .vcv-s-title{font-family:var(--font-exec);font-size:12px;font-weight:900;color:#111;letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid #1a3a5c;padding-bottom:6px;margin-bottom:12px}
#visual-cv.vt-executive .vcv-exp-title{font-family:var(--font-exec);font-weight:700;color:#111;font-size:13px}
#visual-cv.vt-executive .vcv-exp-date{font-family:var(--font-exec);color:#1a3a5c;font-weight:700}
#visual-cv.vt-executive .vcv-exp-company{font-family:var(--font-ui);color:#555}
#visual-cv.vt-executive .vcv-exp-entry{border-bottom:1px solid #e0e0e0;padding-bottom:10px;margin-bottom:12px}
#visual-cv.vt-executive .vcv-bullets li{font-family:var(--font-ui);color:#2a2a2a;list-style:square}
#visual-cv.vt-executive .vcv-bullets li::marker{color:#1a3a5c}
#visual-cv.vt-executive .vcv-num{font-weight:900;color:#1a3a5c}
#visual-cv.vt-executive .vcv-edu-degree{font-family:var(--font-exec);color:#111}
#visual-cv.vt-executive .vcv-edu-school,
#visual-cv.vt-executive .vcv-cert-org{font-family:var(--font-ui);color:#555}
#visual-cv.vt-executive .vcv-cert-name{font-family:var(--font-ui);color:#111}
#visual-cv.vt-executive .vcv-bar-bg,
#visual-cv.vt-executive .vcv-dots{display:none}
#visual-cv.vt-executive #vp-skills{display:flex;flex-wrap:wrap;gap:6px 8px}
#visual-cv.vt-executive .vcv-skill-item{margin-bottom:0}
#visual-cv.vt-executive .vcv-skill-name{font-family:var(--font-ui);font-size:11.5px;font-weight:600;color:#111;background:#eef1f4;border:1px solid #d8dee6;padding:3px 10px;border-radius:3px;margin-bottom:0}
#visual-cv.vt-executive .vcv-lang-item{margin-bottom:5px}
#visual-cv.vt-executive .vcv-lang-name{font-family:var(--font-ui);font-size:12px;font-weight:600;color:#1a1a1a;margin-bottom:0}

/* Download buttons */
.download-section{display:flex;gap:10px;flex-wrap:wrap}
.dl-btn{flex:1;min-width:140px;padding:10px;border:none;border-radius:8px;font-family:var(--font-ui);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.dl-ats{background:#1a3a5c;color:#fff}
.dl-visual{background:#1abc9c;color:#fff}
.dl-btn:hover{opacity:.9}
.download-divider{width:100%;font-size:11px;font-weight:700;color:#6b7280;letter-spacing:.5px;margin:6px 0 -2px;display:flex;align-items:center;gap:8px}
.download-divider::before,.download-divider::after{content:'';flex:1;height:1px;background:#cbd5e1}
.dl-word{border:1.5px solid #2b579a;background:#fff;color:#2b579a}
.dl-word:hover{background:#2b579a;color:#fff;opacity:1}

/* Tip box */
.tip-box{background:#fef9c3;border:1px solid #fde047;border-radius:10px;padding:12px 16px;font-size:12px;color:#713f12}

/* ======= ACTIONS CARD (organized export/print controls) ======= */
.actions-card{background:#fff;border:1px solid #dfe4ea;border-radius:14px;padding:16px;box-shadow:0 2px 12px rgba(26,58,92,.06);display:flex;flex-direction:column;gap:13px}
.actions-head{font-size:13px;font-weight:800;color:#1a3a5c}
.actions-doc-seg{display:flex;gap:6px;background:#f1f4f8;padding:5px;border-radius:10px}
.adoc-btn{flex:1;padding:9px 8px;border:none;border-radius:8px;background:transparent;font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:#5b6470;cursor:pointer;transition:all .2s}
.adoc-btn:hover{color:#1a3a5c}
.adoc-btn.active{background:#fff;color:#1a3a5c;box-shadow:0 1px 4px rgba(26,58,92,.15)}
.actions-row{display:flex;gap:10px;flex-wrap:wrap}
.act-btn{flex:1;min-width:120px;padding:11px 14px;border-radius:10px;font-family:var(--font-ui);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;border:1.5px solid transparent}
.act-primary{background:linear-gradient(135deg,#1a3a5c,#2980b9);color:#fff}
.act-primary:hover{filter:brightness(1.07)}
.act-secondary{background:#fff;border-color:#cdd6e0;color:#1a3a5c}
.act-secondary:hover{border-color:#1a3a5c;background:#f4f8fc}
.actions-hint{font-size:11.5px;color:#8a94a2;line-height:1.6}
@media print{.actions-card{display:none!important}}
@media(max-width:640px){.act-btn{flex:1 1 100%}}

/* PDF download buttons (share the Word divider/row layout) */
.dl-pdf{border:1.5px solid #b91c1c;background:#fff;color:#b91c1c}
.dl-pdf:hover{background:#b91c1c;color:#fff;opacity:1}

/* ======= AUTOSAVE: status row + draft restore bar + clear button ======= */
.autosave-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:10px}
.autosave-status{font-size:11.5px;font-weight:600;color:#94a3b8;display:flex;align-items:center;gap:5px;transition:color .2s}
.autosave-status.saved{color:#0f8a73}
.clear-saved-btn{background:#fff;border:1.5px solid #e5e7eb;color:#b91c1c;font-family:var(--font-ui);font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .2s}
.clear-saved-btn:hover{border-color:#b91c1c;background:#fef2f2}
.draft-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:12px;padding:14px 16px;margin-bottom:20px}
.draft-bar-text{font-size:13px;font-weight:600;color:#1a3a5c;display:flex;align-items:center;gap:8px}
.draft-bar-actions{display:flex;gap:8px;flex-wrap:wrap}
.draft-btn{font-family:var(--font-ui);font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;border:1.5px solid transparent;transition:all .2s}
.draft-btn.restore{background:#1a3a5c;color:#fff}
.draft-btn.restore:hover{background:#2980b9}
.draft-btn.fresh{background:#fff;border-color:#cbd5e1;color:#475569}
.draft-btn.fresh:hover{border-color:#94a3b8}

/* Disclosure line under the autosave row (revealed after the first save) */
.autosave-caveat{font-size:11.5px;color:#8a94a2;line-height:1.75;margin-top:6px}

/* ======= INLINE NOTICES (replace browser alert/confirm dialogs) ======= */
.inline-notice{display:flex;align-items:flex-start;gap:10px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:11px 14px;font-size:12px;color:#7c2d12;line-height:1.8}
.inline-notice p{margin:0;flex:1}
.inline-notice a{color:#7c2d12;font-weight:800;text-decoration:underline;cursor:pointer}
.inline-notice .notice-close{background:none;border:none;color:#9a3412;font-size:14px;line-height:1;cursor:pointer;padding:1px 3px;flex-shrink:0}
/* Two-button confirmation bar shown in place of the autosave row */
.clear-confirm{display:none;flex-direction:column;gap:10px;background:#fef2f2;border:1.5px solid #fecaca;border-radius:12px;padding:12px 14px;margin-top:10px}
.clear-confirm-text{font-size:12.5px;font-weight:600;color:#991b1b;line-height:1.7}
.clear-confirm-actions{display:flex;gap:8px;flex-wrap:wrap}
.clear-confirm-actions button{flex:1 1 auto;font-family:var(--font-ui);font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:8px;cursor:pointer;border:1.5px solid transparent}
.cc-danger{background:#b91c1c;color:#fff}
.cc-cancel{background:#fff;border-color:#cbd5e1;color:#475569}

/* ======= VALIDATION MESSAGES ======= */
.validation-box{background:#fef2f2;border:1.5px solid #fecaca;border-radius:10px;padding:12px 16px;margin-bottom:14px}
.validation-box .vb-title{font-size:13px;font-weight:800;color:#b91c1c;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.validation-box ul{margin:0;padding-inline-start:20px}
.validation-box li{font-size:12.5px;color:#991b1b;margin-bottom:3px;line-height:1.6}
.validation-box .vb-text{font-size:12.5px;color:#991b1b;line-height:2;margin:0}
.validation-box .vb-text a{color:#b91c1c;font-weight:800;text-decoration:underline;cursor:pointer}
.input-group input.field-error,.input-group textarea.field-error{border-color:#f87171;background:#fff7f7}

/* ======= AI SUGGESTIONS (optional growth feature) ======= */
.ai-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;padding:10px 14px;background:linear-gradient(135deg,#f5f3ff,#eff6ff);border:1.5px dashed #c4b5fd;border-radius:10px;font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:#6d28d9;cursor:pointer;transition:all .2s}
.ai-btn:hover{background:linear-gradient(135deg,#ede9fe,#dbeafe);border-color:#a78bfa}
.ai-note{font-size:11px;color:#9ca3af;font-style:italic;margin-top:6px;line-height:1.6}
.ai-panel{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.ai-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-panel-head .ai-h{font-size:12px;font-weight:800;color:#6d28d9;display:flex;align-items:center;gap:6px}
.ai-close{background:none;border:none;color:#9ca3af;font-size:16px;cursor:pointer;line-height:1;padding:2px 6px}
.ai-close:hover{color:#6d28d9}
.ai-card{background:#faf5ff;border:1px solid #e9d5ff;border-radius:10px;padding:12px}
.ai-card textarea{width:100%;border:1.5px solid #e5e7eb;border-radius:8px;padding:8px 10px;font-family:var(--font-ui);font-size:12.5px;color:#1a1a2e;line-height:1.7;resize:vertical;min-height:64px;outline:none}
.ai-card textarea:focus{border-color:#a78bfa}
.ai-use-btn{margin-top:8px;padding:7px 14px;background:#6d28d9;color:#fff;border:none;border-radius:8px;font-family:var(--font-ui);font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
.ai-use-btn:hover{background:#5b21b6}
.ai-loading{font-size:12px;color:#6d28d9;font-weight:600;padding:8px 2px}

/* ======= COVER-LETTER AI ASSISTANT ======= */
.ai-cl-block{margin:18px 0 6px}
.ai-cl-textarea{width:100%;border:1.5px solid #e5e7eb;border-radius:8px;padding:10px 12px;font-family:var(--font-ui);font-size:12.5px;color:#1a1a2e;line-height:1.9;resize:vertical;min-height:220px;outline:none}
.ai-cl-textarea:focus{border-color:#a78bfa}
.ai-cl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ai-cl-actions button{font-family:var(--font-ui);font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px;cursor:pointer;transition:all .2s;border:1.5px solid transparent}
.ai-apply-btn{background:#6d28d9;color:#fff;border:none}
.ai-apply-btn:hover{background:#5b21b6}
.ai-regen-btn{background:#fff;border-color:#c4b5fd;color:#6d28d9}
.ai-regen-btn:hover{background:#f5f3ff}
.ai-revert-btn{background:#fff;border-color:#cbd5e1;color:#475569}
.ai-revert-btn:hover{border-color:#94a3b8}
.ai-fallback{background:#fef9c3;border:1px solid #fde047;border-radius:8px;padding:10px 14px;font-size:12px;color:#713f12;line-height:1.7;margin-bottom:2px}
.ai-applied-note{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:8px 12px;font-size:11.5px;font-weight:600;color:#047857;line-height:1.6}

/* ======= NAV ARROWS (RTL-correct & deterministic) =======
   Arrow glyphs are bidi-mirrorable and render inconsistently inside an RTL
   context, so each arrow is isolated in a dir="ltr" inline-block. That fixes the
   glyph exactly as authored. In RTL "forward/next" reads toward the LEFT and
   "back/previous" toward the RIGHT, so the markup places the arrows accordingly. */
.btn-next,.btn-back,.btn-generate{display:flex;align-items:center;justify-content:center;gap:8px}
/* The arrow glyph is isolated so surrounding Arabic cannot reorder it. The
   glyph itself is chosen per locale by the step navigation, not here. */
.nav-arrow{display:inline-block;direction:ltr;unicode-bidi:isolate;font-weight:700;line-height:1}

/* ======= WELCOME / INTRO OVERLAY ======= */
/* Top-aligned, not centred: the card is taller than a short viewport, and
   centring it pushes the headline off the top and the start button below the
   fold with no way to scroll up to either. */
.welcome-overlay{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,#16314e 0%,#1a3a5c 60%,#13283f 100%);display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;overscroll-behavior:contain}
.welcome-overlay.hidden{display:none}
.welcome-card{background:#f9f8f5;border-radius:20px;max-width:680px;width:100%;padding:40px 44px;box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:5px solid #1abc9c;margin:0 auto}
.welcome-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.welcome-logo{height:58px;width:auto;display:block}
.welcome-card h2{font-size:24px;font-weight:800;color:#1a3a5c;margin-bottom:10px;line-height:1.4}
.welcome-intro{font-size:14px;color:#4b5563;line-height:1.9;margin-bottom:24px}
.welcome-prep{font-size:13px;color:#6b7280;line-height:1.9;margin:-14px 0 22px}
.welcome-versions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.wv-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 18px 16px;position:relative}
.wv-card.ats{border-top:3px solid #1a3a5c}
.wv-card.visual{border-top:3px solid #1abc9c}
.wv-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;padding:3px 10px;border-radius:20px;margin-bottom:10px}
.wv-card.ats .wv-tag{background:#e8edf3;color:#1a3a5c}
.wv-card.visual .wv-tag{background:#e0f7f2;color:#0f8a73}
.wv-card h3{font-size:15px;font-weight:800;color:#1a3a5c;margin-bottom:6px}
.wv-card p{font-size:12.5px;color:#5b6470;line-height:1.8}
.welcome-when{font-size:12.5px;color:#6b7280;line-height:1.8;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:14px 16px;margin-bottom:26px}
.welcome-when strong{color:#1a3a5c}
.welcome-start{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:linear-gradient(135deg,#1a3a5c,#1abc9c);color:#fff;border:none;border-radius:12px;font-family:var(--font-ui);font-size:16px;font-weight:800;cursor:pointer;transition:filter .2s,transform .1s;box-shadow:0 8px 22px rgba(26,58,92,.25)}
.welcome-start:hover{filter:brightness(1.06)}
.welcome-start:active{transform:translateY(1px)}

/* ======= SUCCESS MODAL ======= */
.success-overlay{position:fixed;inset:0;z-index:210;background:rgba(19,40,63,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.success-overlay.hidden{display:none}
.success-card{background:#f9f8f5;border-radius:20px;max-width:540px;width:100%;padding:38px 36px 32px;box-shadow:0 24px 60px rgba(0,0,0,.4);border-top:5px solid #1abc9c;text-align:center;margin:auto}
.success-check{width:74px;height:74px;border-radius:50%;background:#e0f7f2;border:2px solid #1abc9c;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.success-check svg{display:block}
.success-card h2{font-size:22px;font-weight:800;color:#1a3a5c;margin-bottom:12px}
.success-card .success-msg{font-size:13.5px;color:#4b5563;line-height:2;margin-bottom:26px}
.success-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sa-btn{padding:13px 12px;border-radius:10px;font-family:var(--font-ui);font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:filter .2s,background .2s}
.sa-btn.primary{background:#1a3a5c;color:#fff;grid-column:1/-1}
.sa-btn.primary:hover{filter:brightness(1.08)}
.sa-btn.ghost{background:#fff;border-color:#1a3a5c;color:#1a3a5c}
.sa-btn.ghost.teal{border-color:#1abc9c;color:#0f8a73}
.sa-btn.ghost:hover{background:#f0f4f8}
.success-close{background:none;border:none;color:#6b7280;font-family:var(--font-ui);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px;text-decoration:underline}
.success-close:hover{color:#1a3a5c}

/* ======= MOBILE RESPONSIVE ======= */
@media(max-width:900px){
  /* Let panels flow with the page instead of each owning a full scroll viewport */
  .form-panel,.preview-panel{max-height:none;overflow-y:visible}
  .form-panel{border-inline-end:none;border-bottom:1px solid #e5e7eb;padding:24px 18px}
  .preview-panel{padding:18px 14px}
}
@media(max-width:640px){
  body{overflow-x:hidden}
  .panel-header h1{font-size:19px}
  .steps{flex-wrap:wrap;gap:6px}
  .step-btn{flex:1 1 28%;font-size:11px;padding:8px 4px}
  /* Stack paired/triple fields so inputs are full-width and comfortable to tap */
  .input-row,.input-row-3{grid-template-columns:1fr;gap:0}
  .skills-grid{grid-template-columns:1fr}
  .nav-btns{flex-wrap:wrap}
  .btn-next,.btn-generate{flex:1 1 100%}
  .btn-back{flex:1 1 100%}
  .preview-header{flex-direction:column;align-items:stretch}
  .preview-tabs{flex-wrap:wrap}
  .tab-btn{flex:1 1 30%}
  .download-section .dl-btn{flex:1 1 100%}
  /* Keep the designed CV readable: stack the navy sidebar above the main column */
  #visual-cv .vcv-grid{grid-template-columns:1fr!important}
  .ats-page{padding:24px 20px}
  .vcv-main{padding:22px 20px}
  .achievement-builder{padding:14px 12px}
  .part-label{min-width:74px;font-size:10.5px}
  .welcome-card{padding:30px 22px}
  .welcome-card h2{font-size:20px}
  .welcome-versions{grid-template-columns:1fr}
  .success-card{padding:30px 22px}
  .success-actions{grid-template-columns:1fr}
}

/* ====== COVER LETTER ====== */
#cover-letter-cv{display:none;padding:36px 40px;font-size:13px;line-height:1.8;color:#1a1a1a;font-family:var(--font-ui)}
.cl-header{text-align:end;font-size:12px;color:#6b7280;margin-bottom:24px}
.cl-date{margin-bottom:4px}
.cl-recipient{font-size:13px;font-weight:700;color:#1a3a5c;margin-bottom:20px}
.cl-body p{margin-bottom:14px;text-align:justify;line-height:1.9}
.cl-greeting{font-size:14px;font-weight:700;color:#1a3a5c;margin-bottom:16px}
.cl-signoff{margin-top:28px}
.cl-signoff .sign-regards{font-weight:700;color:#1a3a5c;margin-bottom:8px}
.cl-signoff .sign-name{font-size:15px;font-weight:800;color:#1a3a5c}
.cl-signoff .sign-contact{font-size:11.5px;color:#6b7280;margin-top:4px}

/* Radio buttons */
.radio-group{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.radio-group-inline{display:flex;flex-direction:row;gap:6px;margin-top:4px}
.radio-group-inline .radio-option{padding:5px 10px;font-size:12px;gap:5px}
.radio-option{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8fafc;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s;font-size:13px}
.radio-option:hover{border-color:#2980b9;background:#f0f9ff}
.radio-option input[type="radio"]{accent-color:#1a3a5c;width:16px;height:16px;cursor:pointer}
.radio-option.selected{border-color:#1a3a5c;background:#eff6ff}

/* ====== PRINT STYLES ====== */
@media print {
  body{background:#fff}
  .brand-bar,.form-panel,.preview-header,.preview-tabs,.vt-chooser,.download-section,.tip-box,.welcome-overlay,.success-overlay,.site-footer,.preview-empty{display:none!important}
  .app{display:block}
  .preview-panel{padding:0;background:#fff;overflow:visible;max-height:none;display:block}
  .cv-preview-wrap{box-shadow:none;border-radius:0}
  /* Only show the active CV version. Direct printing of the page is a
     fallback; every export opens its own window with just one document in it. */
  .ats-doc,#visual-cv,#cover-letter-cv{display:none!important}
  .ats-doc.print-target,#visual-cv.print-target,#cover-letter-cv.print-target{display:block!important}
  #visual-cv.print-target .vcv-grid{display:grid!important}
  /* Preserve template backgrounds/accents (sand sidebar, navy bands, etc.) in print */
  #visual-cv,#visual-cv *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}



/* ===========================================================================
   Bilingual chrome — components with no v1 equivalent.
   =========================================================================== */

/* ---- Locale switcher (brand bar) ---- */
.locale-switch{
  margin-inline-start:auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;
  font-family:var(--font-ui);font-size:12.5px;font-weight:700;
  color:#fff;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.locale-switch:hover{background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.5)}
.locale-switch:focus-visible{outline:2px solid #1abc9c;outline-offset:2px}
.locale-switch .ls-glyph{font-size:13px;line-height:1;opacity:.82}
/* The tagline no longer claims the free space — the switcher does. */
.brand-tagline{margin-inline-start:0}
@media(max-width:700px){.brand-tagline{display:none}}

/* ---- Mirror hints: the other language's text, shown but never copied ---- */
.mirror-note{
  background:#f5f3ff;border:1px solid #ddd6fe;border-inline-start:3px solid #8b5cf6;
  border-radius:8px;padding:10px 13px;margin-bottom:16px;
  font-size:12px;line-height:1.75;color:#4c1d95;
}
.mirror-coverage{font-size:11.5px;font-weight:700;color:#6d28d9;margin-top:5px}
.mirror-coverage.is-complete{color:#047857}
/* A dimmed placeholder, not a value: the field is genuinely empty and will
   export empty until the user writes it. */
.input-group input.has-mirror::placeholder,
.input-group textarea.has-mirror::placeholder{color:#a78bfa;opacity:.85;font-style:italic}

/* ---- ATS lock notice ---- */
.ats-locked-note{
  font-size:11.5px;line-height:1.7;color:#475569;
  background:#f1f5f9;border-radius:8px;padding:9px 12px;margin-bottom:12px;
}

/* ---- Validation "jump to field" affordance ---- */
.validation-box .goto-field{
  background:none;border:none;padding:0 4px;
  font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  color:#1a3a5c;text-decoration:underline;cursor:pointer;
}
.field-flash{animation:field-flash 1.1s ease-out}
@keyframes field-flash{0%{background:#fef9c3}100%{background:transparent}}

/* ---- Pre-hydration: hide the shell until the catalogue has loaded, so no
        untranslated markup is ever painted. ---- */
html:not(.i18n-ready) .app-shell{visibility:hidden}
.boot-fallback{
  padding:48px 24px;text-align:center;font-family:var(--font-ui);
  font-size:14px;line-height:1.9;color:#475569;
}
html.i18n-ready .boot-fallback{display:none}

/* ===========================================================================
   Parity with the published Arabic site — the builder's own components.
   The bilingual builder emits a few class names v1 never had; each is given
   the look of its v1 counterpart here, in v1's colours and 10px corners.
   =========================================================================== */

/* ---- Welcome: the two added paragraphs read as intro text, not body ---- */
.welcome-formats,.welcome-bilingual{font-size:13px;color:#6b7280;line-height:1.9}
.welcome-formats{margin:0 0 6px}
.welcome-bilingual{margin:0 0 24px}
.welcome-card bdi{unicode-bidi:isolate}

/* ---- Step navigation (v1 .btn-next / .btn-back / .btn-generate) ---- */
.nav-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:none;border-radius:10px;font-family:var(--font-ui);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,filter .2s}
.nav-btn.next{flex:1;background:#1a3a5c;color:#fff}
.nav-btn.next:hover{background:#2980b9}
.nav-btn.generate{flex:1;background:linear-gradient(135deg,#1a3a5c,#2980b9);color:#fff}
.nav-btn.generate:hover{filter:brightness(1.07)}
.nav-btn.back{padding:12px 20px;background:#f3f4f6;color:#374151;font-weight:600}
.nav-btn.back:hover{background:#e5e7eb}
/* Arrows are drawn, not written, so the catalogue text stays untouched. Each
   is isolated as LTR so the glyph is exactly the one named here; forward
   points to the inline end of the line, back to its start. */
.nav-btn.next::after,.nav-btn.generate::after,.nav-btn.back::before{display:inline-block;direction:ltr;unicode-bidi:isolate;font-weight:700;line-height:1}
.nav-btn.next::after,.nav-btn.generate::after{content:'←'}
.nav-btn.back::before{content:'→'}
[dir="ltr"] .nav-btn.next::after,[dir="ltr"] .nav-btn.generate::after{content:'→'}
[dir="ltr"] .nav-btn.back::before{content:'←'}

/* ---- Repeatable lists ---- */
.repeater{display:flex;flex-direction:column;gap:12px}
.repeater.link-list{gap:8px}
.repeater > .experience-block,.repeater > .lang-row{background:#f8fafc;border:1.5px solid #e5e7eb;border-radius:10px;padding:16px}
.repeater > .input-row{align-items:end}
/* Add: v1's dashed add button, in navy and teal rather than sky blue. */
.add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 16px;background:#f4f8fc;border:1.5px dashed #9fb3c8;border-radius:10px;font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:#1a3a5c;cursor:pointer;transition:all .2s}
.add-btn:hover{background:#effaf7;border-color:#1abc9c;color:#0f8a73}
/* Remove: the same dashed outline, in the site's clear/danger red. */
.remove-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:flex-start;margin-top:8px;padding:6px 14px;background:#fff;border:1.5px dashed #fca5a5;border-radius:10px;font-family:var(--font-ui);font-size:12px;font-weight:700;color:#b91c1c;cursor:pointer;transition:all .2s}
.remove-btn:hover{background:#fef2f2;border-color:#b91c1c}
.repeater .remove-btn{margin-top:4px}

/* ---- Photo upload: the native control is reduced to a branded button ---- */
.input-group input.file-input{display:block;width:auto;max-width:100%;padding:0;border:none;border-radius:0;background:none;font-size:0;color:transparent;cursor:pointer}
.input-group input.file-input::file-selector-button{margin:0;padding:9px 18px;background:#effaf7;border:1.5px dashed #1abc9c;border-radius:10px;font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:#0f8a73;cursor:pointer;transition:all .2s}
.input-group input.file-input::-webkit-file-upload-button{margin:0;padding:9px 18px;background:#effaf7;border:1.5px dashed #1abc9c;border-radius:10px;font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:#0f8a73;cursor:pointer}
.input-group input.file-input:hover::file-selector-button{background:#e0f7f2;border-color:#0f8a73}
.input-group input.file-input:focus-visible{outline:2px solid #1abc9c;outline-offset:2px;border-radius:10px}
.photo-wrap{display:flex;align-items:center;gap:12px;margin-top:10px}
.photo-preview{width:70px;height:70px;border-radius:50%;object-fit:cover;border:2px solid #e5e7eb;display:block;flex-shrink:0}
.photo-wrap .remove-btn{margin-top:0;align-self:center}

/* ---- Checkbox rows and month pickers ---- */
.check-row{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:12.5px;font-weight:600;color:#374151;cursor:pointer}
.check-row input{accent-color:#1a3a5c;width:16px;height:16px;cursor:pointer}
.input-group input.month-input{direction:ltr}

/* ---- Suggestion block ---- */
.ai-block{margin:4px 0 16px}
.ai-btn.ghost{background:#fff;border-style:solid;border-color:#ddd6fe}
.ai-panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.ai-notice,.ai-draft{background:#fef9c3;border:1px solid #fde047;border-radius:10px;padding:10px 14px;font-size:12px;color:#713f12;line-height:1.7}

/* ---- Notices in the app's soft-coloured family ---- */
.mirror-note{background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;padding:11px 14px;color:#1a3a5c}
.mirror-coverage{display:block;color:#2980b9}
.mirror-coverage.is-complete{color:#0f8a73}
.input-group input.has-mirror::placeholder,
.input-group textarea.has-mirror::placeholder{color:#8aa0b8;opacity:1}
.ats-locked-note{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px;margin-bottom:0;font-size:12px;color:#475569}
.actions-notice{display:flex;align-items:flex-start;gap:10px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:11px 14px;font-size:12px;color:#7c2d12;line-height:1.8}
.validation-box{margin-bottom:0}
.validation-box > strong{display:block;font-size:13px;font-weight:800;color:#b91c1c;margin-bottom:6px}

/* ---- Download panel: Print leads, the three files follow, a 2×2 grid ---- */
.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act-btn{min-width:0;display:flex;align-items:center;justify-content:center;background:#fff;border-color:#cdd6e0;color:#1a3a5c}
.act-btn:hover{border-color:#1a3a5c;background:#f4f8fc}
.act-btn.primary{background:linear-gradient(135deg,#1a3a5c,#2980b9);border-color:transparent;color:#fff}
.act-btn.primary:hover{filter:brightness(1.07);background:linear-gradient(135deg,#1a3a5c,#2980b9)}

/* ---- Preview column: the panel scrolls, its cards never shrink ----
   Without this the flex column squeezes the page to fit the viewport and its
   overflow:hidden crops everything below the contact block. */
.preview-panel > *{flex-shrink:0}

/* ---- Design style picker: shown on the designed tab ---- */
.vt-chooser{display:flex}

/* ---- Empty preview: a faded sample outline under a one-line caption ---- */
.cv-preview-wrap.is-empty .preview-empty{margin:0;max-width:none;padding:10px 16px;background:#f8fafc;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600}
.preview-sample{opacity:.8;pointer-events:none;user-select:none}
/* Latin terms isolated inside Arabic copy: a hair of space keeps the joining و from reading as a Latin letter. */
[dir="rtl"] bdi[dir="ltr"]{margin:0 .15em}
@media print{.preview-sample{display:none!important}}

@media(max-width:640px){
  .nav-btns{flex-wrap:wrap}
  .nav-btn.next,.nav-btn.generate,.nav-btn.back{flex:1 1 100%}
  .welcome-bilingual{margin-bottom:20px}
}
@media(max-width:380px){.actions-row{grid-template-columns:1fr}}

/* ---- Script hint, machine-translation tag, translate button ----
   Small and in the existing palette: the hint reads like the soft orange
   notices, the tag like the ATS badge, and the translate button is the AI
   button in brand teal so the two helpers can sit together in step five. */
.script-hint{margin-top:6px;padding:6px 10px;font-size:11.5px;line-height:1.6;color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;overflow-wrap:anywhere}
.mt-tag{display:inline-block;margin-inline-start:6px;padding:1px 8px;font-size:10.5px;font-weight:700;line-height:1.7;color:#1a3a5c;background:#e8f1fa;border:1px solid #c9dcef;border-radius:10px;vertical-align:middle;white-space:nowrap}
.tr-block{margin:0 0 16px}
.ai-btn.tr-btn{margin-top:0;background:#f0fbf8;border-color:#7fd8c4;color:#0f8a73}
.ai-btn.tr-btn:hover{background:#e3f7f1;border-color:#1abc9c}
.ai-btn.tr-btn:disabled{opacity:.7;cursor:progress}
.form-section .tr-block + .ai-cl-block .ai-btn{margin-top:0}

/* Last word on visibility: the hidden attribute beats every display rule
   above it. Several panels (.draft-bar, .clear-confirm, the preview notices)
   set display in a class, and a class display otherwise wins over the
   attribute — which is how a first visit ended up seeing a saved-draft bar. */
[hidden]{display:none!important}

/* ==========================================================================
   Clarity pass: required fields, optional sections, projects, writing help,
   translation direction, export guidance. Brand colours only.
   ========================================================================== */

/* ---- Visible keyboard focus, everywhere. Inputs keep their border cue and
        gain a ring; mouse clicks do not show it (focus-visible). ---- */
:where(button,a,[role="button"],[tabindex],input,textarea,select,summary):focus-visible{outline:2px solid #1abc9c;outline-offset:2px}
.input-group input:focus-visible,.input-group textarea:focus-visible,.input-group select:focus-visible{outline:2px solid #1abc9c;outline-offset:1px;border-color:#1a3a5c}
#preview-heading:focus{outline:none}
#preview-heading:focus-visible{outline:2px solid #1abc9c;outline-offset:4px;border-radius:4px}
.validation-box:focus{outline:2px solid #fca5a5;outline-offset:2px}
.field-flash{box-shadow:0 0 0 3px #fde68a}

/* ---- Required fields ---- */
.req-mark{color:#b91c1c;font-weight:800;margin-inline-start:2px}
.required-legend{font-size:12px;color:#475569;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;margin:-4px 0 14px;line-height:1.7}
.welcome-required{font-size:12.5px;color:#1a3a5c;background:#f0f6fb;border:1px solid #d6e4f0;border-radius:10px;padding:10px 14px;margin:10px 0 0;line-height:1.8}
.optional-note{font-size:12.5px;color:#475569;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:10px 14px;margin:-4px 0 16px;line-height:1.8}

/* ---- No experience yet / projects ---- */
.no-exp-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.no-exp-box .check-row{font-weight:700;color:#1a3a5c}
.no-exp-box .hint{font-size:11.5px;color:#64748b;margin-top:6px;line-height:1.7}
.no-exp-box .kept-note{color:#92400e}
.subsection{margin-top:22px;padding-top:16px;border-top:1px dashed #e5e7eb}
.section-subtitle{font-size:13.5px;font-weight:800;color:#1a3a5c;margin-bottom:6px}
.subsection > .hint{font-size:11.5px;color:#64748b;margin-bottom:10px;line-height:1.7}
.vcv-project-desc{font-size:12px;line-height:1.75;color:#3a352d;margin-top:2px}

/* ---- Pasted lines in one achievement ---- */
.split-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;font-size:12px;color:#713f12}
.split-btn{padding:5px 12px;border:1.5px solid #1a3a5c;border-radius:8px;background:#fff;color:#1a3a5c;font-family:var(--font-ui);font-size:12px;font-weight:700;cursor:pointer}
.split-btn:hover{background:#f4f8fc}

/* ---- Writing help cards ---- */
.ai-card-label{font-size:11.5px;font-weight:800;color:#6d28d9;margin-bottom:4px}
.ai-card-original{font-size:11.5px;color:#64748b;margin-bottom:6px;line-height:1.7;white-space:pre-wrap}
.ai-card-actions{display:flex;align-items:center;gap:10px;margin-top:6px}
.ai-used{font-size:11.5px;font-weight:700;color:#0f8a73}
.ai-questions{background:#fff;border:1px solid #e9d5ff;border-radius:10px;padding:10px 14px}
.ai-q-title{font-size:12px;font-weight:700;color:#4c1d95;margin-bottom:6px;line-height:1.7}
.ai-questions ul{margin:0;padding-inline-start:20px}
.ai-questions li{font-size:12px;color:#374151;line-height:1.8}
.ai-notice.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.ai-notice.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}

/* ---- Translation: direction stated before the click ---- */
.tr-explain{font-size:12px;color:#475569;line-height:1.7;margin-bottom:8px}
.tr-buttons{display:flex;flex-wrap:wrap;gap:8px}
.tr-buttons .ai-btn{margin-top:0}
.ai-btn.tr-btn.ghost{background:#fff;border-style:dashed}

/* ---- Export guidance ---- */
.actions-row.single{grid-template-columns:1fr}
.actions-pdf-hint{font-size:12px;color:#475569;line-height:1.7;margin-top:8px}
.vb-step{font-size:11.5px;color:#7f1d1d;opacity:.85}
.sample-badge{display:inline-block;padding:1px 9px;margin-inline-end:6px;border-radius:10px;background:#1a3a5c;color:#fff;font-size:11px;font-weight:700;vertical-align:middle}
.success-formats{font-size:12px;color:#64748b;line-height:1.8;margin:-6px 0 16px}
.nav-btn.finish-cv{flex-basis:100%;background:#fff;color:#1a3a5c;border:1.5px solid #1a3a5c}
.nav-btn.finish-cv:hover{background:#f4f8fc}
.nav-btns{flex-wrap:wrap}

/* Arabic is a joined script: any letter-spacing breaks the joins, and the
   templates' tracking (up to 4px on the executive title) printed Arabic job
   titles as separated letters. Tracking stays on Latin documents only. */
#visual-cv[lang="ar"],#visual-cv[lang="ar"] *,#cover-letter-cv[lang="ar"],#cover-letter-cv[lang="ar"] *{letter-spacing:0!important}