@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');
/* Main application styles extracted from original index.html */
:root { --paper-w: 794px; --paper-h: 1123px; }
    * { box-sizing: border-box; }
    body { font-family: 'Noto Sans Arabic','Tajawal','Segoe UI',Arial,sans-serif; background: radial-gradient(circle at top right, rgba(245,158,11,.18), transparent 32%), radial-gradient(circle at bottom left, rgba(59,130,246,.13), transparent 34%), #090e1a; color:#e5e7eb; min-height:100vh; }
    .page { display:none; }
    .page.active { display:block; }
    .a4 { width: var(--paper-w); min-height: var(--paper-h); height: var(--paper-h); background:#fff; color:#111827; font-family:'Noto Sans Arabic','Tajawal','Segoe UI',Arial,sans-serif; overflow:hidden; box-shadow:0 28px 80px rgba(0,0,0,.35); }
    .preview-scale { transform: scale(.34); transform-origin: top center; width: var(--paper-w); height: calc(var(--paper-h) * .42); margin:auto; }
    .editor-preview { transform: scale(.60); transform-origin: top center; width: var(--paper-w); height: calc(var(--paper-h) * .60); margin:auto; }
    .cv-main { display:flex; height:100%; }
    .cv-main.rtl { direction:rtl; }
    .cv-main.ltr { direction:ltr; }
    .sidebar { width:260px; background:#1a1a2e; color:#fff; padding:24px; flex-shrink:0; }
    .avatar-wrap { width:128px; height:128px; margin:0 auto 16px; border-radius:9999px; overflow:hidden; border:4px solid #f59e0b; }
    .avatar-wrap img { width:100%; height:100%; object-fit:cover; }
    .side-title { font-weight:700; color:#fbbf24; margin-bottom:8px; border-bottom:1px solid #b45309; padding-bottom:4px; }
    .skill-bar { width:80px; height:8px; background:#f59e0b; border-radius:9999px; overflow:hidden; }
    .skill-bar span { display:block; height:100%; background:#fcd34d; border-radius:9999px; }
    .section-title { font-size:18px; font-weight:700; color:#d97706; margin-bottom:12px; border-bottom:2px solid #fde68a; padding-bottom:8px; }
    .timeline.rtl { border-right:4px solid #f59e0b; padding-right:16px; }
    .timeline.ltr { border-left:4px solid #f59e0b; padding-left:16px; }
    /* Editor inputs must not inherit the CV template colors */
    .input,
    .editor-panel input,
    .editor-panel textarea,
    .editor-panel select {
      width:100%;
      border:1px solid #cbd5e1;
      border-radius:12px;
      padding:10px 12px;
      background:#ffffff !important;
      color:#0f172a !important;
      -webkit-text-fill-color:#0f172a !important;
      caret-color:#d97706;
      outline:none;
    }
    .input::placeholder,
    .editor-panel input::placeholder,
    .editor-panel textarea::placeholder {
      color:#64748b !important;
      -webkit-text-fill-color:#64748b !important;
      opacity:1;
    }
    .input:focus,
    .editor-panel input:focus,
    .editor-panel textarea:focus,
    .editor-panel select:focus {
      border-color:#d97706;
      box-shadow:0 0 0 3px rgba(217,119,6,.18);
      background:#ffffff !important;
      color:#0f172a !important;
      -webkit-text-fill-color:#0f172a !important;
    }
    .label { display:block; font-size:13px; color:#374151; margin-bottom:6px; font-weight:700; }
    .dark-panel { background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.18); }
    .card { background:white; border:1px solid #e5e7eb; border-radius:18px; box-shadow:0 8px 24px rgba(15,23,42,.06); }
    .btn { border-radius:12px; padding:10px 16px; font-weight:700; transition:.2s; }
    .btn-primary { background:#1a1a2e; color:white; }
    .btn-primary:hover { background:#111126; }
    .btn-amber { background:#d97706; color:white; }
    .btn-amber:hover { background:#b45309; }
    .btn-light { background:#f3f4f6; color:#111827; }
    .btn-light:hover { background:#e5e7eb; }
    .step-pill { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:14px; padding:10px; font-size:13px; font-weight:800; color:#6b7280; }
    .step-pill.active { background:#1a1a2e; color:#fff; border-color:#1a1a2e; }
    .step-pill.done { background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .step-no { width:24px; height:24px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.28); border:1px solid currentColor; }
    .form-panel { min-height: 520px; }
    @media print { body { background:white; } body * { visibility:hidden; } #cvPreview, #cvPreview * { visibility:visible; } #cvPreview { position:absolute; inset:0; transform:none !important; width:794px; height:1123px; } .no-print { display:none!important; } }


/* Arabic font rendering fix: keeps Arabic letters connected in preview and PDF export. */
:lang(ar),
[dir="rtl"],
[dir="rtl"] * {
  font-family: Tahoma, Arial, "Segoe UI", "Noto Naskh Arabic", "Noto Kufi Arabic", "Traditional Arabic", sans-serif !important;
  letter-spacing: normal !important;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Keep Latin text inside Arabic templates readable when explicitly marked. */
[lang="en"], [dir="ltr"] {
  font-family: Arial, "Segoe UI", Tahoma, sans-serif;
}


/* Global Arabic RTL correction: keeps Arabic text, lists, and section content aligned properly without affecting English templates. */
[dir="rtl"], [lang="ar"]{direction:rtl;unicode-bidi:plaintext;}
[dir="rtl"] .text-left{ text-align:right !important; }
[dir="rtl"] ul{direction:rtl;text-align:right;padding-right:1.15em;padding-left:0;}
[dir="rtl"] li{direction:rtl;text-align:right;}
[dir="rtl"] input,[dir="rtl"] textarea{direction:rtl;text-align:right;}


/* PDF-safe Arabic list fix: replace browser markers with explicit RTL bullets so html2pdf/html2canvas does not move bullets to the left. */
#cvPreview [dir="rtl"] ul,
#cvPreview [lang="ar"] ul,
#cvPreview .cv-main.rtl ul {
  list-style: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  text-align: right !important;
  direction: rtl !important;
}
#cvPreview [dir="rtl"] li,
#cvPreview [lang="ar"] li,
#cvPreview .cv-main.rtl li {
  list-style: none !important;
  display: block !important;
  position: relative !important;
  padding-right: 1.05em !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext !important;
}
#cvPreview [dir="rtl"] li::before,
#cvPreview [lang="ar"] li::before,
#cvPreview .cv-main.rtl li::before {
  content: "•";
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  color: currentColor;
  font-weight: 900;
}
#cvPreview [dir="rtl"] li::marker,
#cvPreview [lang="ar"] li::marker,
#cvPreview .cv-main.rtl li::marker {
  content: "" !important;
}

/* Unique Minimal templates */
.a4 .minimal-ziad,.a4 .minimal-clean{width:794px;height:1123px;overflow:hidden;box-shadow:none}
.minimal-ziad{background:#f6efe7;color:#222;padding:0 54px 44px;font-family:'Segoe UI',Tahoma,Arial,sans-serif}.minimal-ziad.rtl{direction:rtl;text-align:right;font-family:'Segoe UI',Tahoma,'Noto Naskh Arabic',Arial,sans-serif}.minimal-ziad.ltr{direction:ltr;text-align:left}.mz-top{height:26px;background:#2f2f2f;margin:0 -54px 28px}.mz-head{display:flex;align-items:center;gap:28px;border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:24px}.minimal-ziad.rtl .mz-head{flex-direction:row-reverse}.mz-photo{width:142px;height:142px;border-radius:50%;overflow:hidden;background:#ddd;border:7px solid #efe2d3;flex:none}.mz-photo img{width:100%;height:100%;object-fit:cover}.mz-head h1{font-size:36px;font-weight:800;margin:0}.mz-head p{font-size:18px;margin:8px 0 0;color:#7b6a58}.mz-grid{display:grid;grid-template-columns:1fr 230px;gap:34px;margin-top:30px}.minimal-ziad.rtl .mz-grid{grid-template-columns:230px 1fr}.minimal-ziad.rtl .mz-main{grid-column:2}.minimal-ziad.rtl .mz-side{grid-column:1;grid-row:1}.mz-sec{margin-bottom:22px;break-inside:avoid}.mz-sec h2{font-size:17px;letter-spacing:1px;margin:0 0 10px;border-bottom:2px solid #333;padding-bottom:7px}.mz-sec p,.mz-sec li,.mz-sec small{font-size:13px;line-height:1.55}.mz-sec h3{font-size:15px;margin:0 0 4px}.mz-sec article{margin-bottom:12px}.mz-sec small{color:#777}.minimal-ziad ul{margin:6px 0 0;padding-inline-start:18px}.minimal-ziad.rtl ul{padding-inline-start:0;padding-inline-end:18px;text-align:right}.min-skill{margin:7px 0}.min-skill span{display:block;font-size:12px;margin-bottom:4px}.min-skill:after{content:'';display:block;height:5px;background:#d5c5b4;border-radius:10px}.min-skill b{display:block;height:5px;background:#333;border-radius:10px;margin-top:-5px}
.minimal-clean{padding:38px 46px;background:#fff;color:#111;font-family:'Segoe UI',Tahoma,Arial,sans-serif}.minimal-clean.rtl{direction:rtl;text-align:right;font-family:'Segoe UI',Tahoma,'Noto Naskh Arabic',Arial,sans-serif}.minimal-clean.ltr{direction:ltr;text-align:left}.mc-head{border-bottom:3px solid #111;padding-bottom:20px;margin-bottom:24px}.mc-head h1{font-size:42px;font-weight:800;margin:0}.mc-head p{font-size:17px;color:#555;margin:8px 0 0}.mc-body{display:grid;grid-template-columns:1fr 250px;gap:26px}.minimal-clean.rtl .mc-body{grid-template-columns:250px 1fr}.minimal-clean.rtl .mc-main{grid-column:2;border-right:1px solid #222;padding-right:24px}.minimal-clean.rtl .mc-side{grid-column:1;grid-row:1}.minimal-clean.ltr .mc-main{border-right:1px solid #222;padding-right:24px}.mc-main section,.mc-side section{margin-bottom:18px;break-inside:avoid}.mc-main h2,.mc-side h2{font-size:16px;letter-spacing:.7px;border-bottom:1px solid #333;padding-bottom:6px;margin:0 0 10px}.mc-main p,.mc-side p,.mc-main li,.mc-side li,.mc-main small,.mc-side small{font-size:12.5px;line-height:1.55}.mc-main article{margin-bottom:11px}.minimal-clean ul{margin:5px 0 0;padding-inline-start:17px}.minimal-clean.rtl ul{padding-inline-start:0;padding-inline-end:17px;text-align:right}


/* Green Media Resume - isolated A4/PDF-safe styles */
.green-media-template{width:794px;height:1123px;background:#fff;display:grid;grid-template-columns:260px 1fr;overflow:hidden;color:#334155;font-family:Arial,'Tahoma','Noto Sans Arabic',sans-serif;box-shadow:0 22px 45px rgba(15,23,42,.18)}
.green-media-template.green-rtl{grid-template-columns:1fr 260px;font-family:'Tahoma','Arial','Noto Sans Arabic',sans-serif;text-align:right;direction:rtl}
.green-media-template.green-ltr{direction:ltr;text-align:left}
.green-aside{background:#0b5b60;color:#fff;padding:28px 22px;display:flex;flex-direction:column;gap:18px;min-width:0;overflow:hidden}
.green-avatar-wrap{width:150px;height:150px;border-radius:999px;border:5px solid #fff;overflow:hidden;margin:0 auto 10px;background:#e2e8f0;flex:0 0 auto}
.green-avatar{width:100%;height:100%;object-fit:cover;display:block}
.green-card{background:rgba(255,255,255,.10);border-radius:18px;padding:15px 14px;backdrop-filter:blur(2px);font-size:13px;line-height:1.65;overflow:hidden}
.green-card h3{font-size:18px;font-weight:900;margin:0 0 10px;color:#fff;letter-spacing:.4px}
.green-card p{margin:2px 0;word-break:break-word}
.green-skill{margin:0 0 10px}
.green-skill-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:5px}
.green-rtl .green-skill-top{direction:rtl}
.green-bar{height:7px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden}
.green-bar i{display:block;height:100%;background:#fff;border-radius:999px}
.green-main{padding:34px 36px 28px;overflow:hidden;min-width:0}
.green-main h1{font-size:42px;line-height:1.05;margin:0;color:#0b5b60;font-weight:900;letter-spacing:.4px}
.green-rtl .green-main h1{font-size:38px;letter-spacing:0}
.green-main h2{font-size:24px;line-height:1.2;margin:10px 0 0;color:#475569;font-weight:800}
.green-contact-inline{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 16px;color:#64748b;font-size:13px}
.green-rtl .green-contact-inline{justify-content:flex-end;direction:rtl}
.green-main section{margin-top:24px;break-inside:avoid;page-break-inside:avoid}
.green-main section h3{background:#0b5b60;color:#fff;border-radius:12px;padding:9px 16px;font-size:18px;font-weight:900;margin:0 0 13px;line-height:1.2}
.green-main p{font-size:15px;line-height:1.85;margin:0;color:#475569}
.green-item{margin:0 0 13px;font-size:14px;line-height:1.55;color:#475569;break-inside:avoid;page-break-inside:avoid}
.green-item b{display:block;color:#0f172a;font-size:15px;margin-bottom:2px}.green-item em{display:block;font-style:normal;color:#475569}.green-item small{display:block;color:#64748b;margin-top:2px}.green-row-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.green-rtl .green-row-title{direction:rtl}.green-line{font-size:14px;line-height:1.7;margin:0 0 7px;color:#475569}.green-exp ul{margin:7px 0 0;padding-left:18px}.green-rtl .green-exp ul{padding-right:18px;padding-left:0;direction:rtl;text-align:right;list-style-position:outside}.green-exp li{margin:3px 0;font-size:13px;line-height:1.55}.green-rtl .green-exp li{text-align:right;direction:rtl}.green-rtl *{unicode-bidi:plaintext}


/* Gray Black Bilingual CV - isolated A4 styling */
.gray-black-bilingual-cv{width:794px;height:1123px;overflow:hidden;background:#d6d6d6;display:grid;grid-template-columns:1fr 220px 1fr;box-sizing:border-box;box-shadow:0 18px 40px rgba(15,23,42,.16);font-family:Arial,'Segoe UI',Tahoma,sans-serif;color:#222;}
.gray-black-bilingual-cv *{box-sizing:border-box;break-inside:avoid;}
.gbb-side{background:#fff;padding:24px 22px;overflow:hidden;}
.gbb-arabic{font-family:'Noto Naskh Arabic','Noto Sans Arabic',Tahoma,Arial,sans-serif;text-align:right;direction:rtl;unicode-bidi:plaintext;}
.gbb-english{text-align:left;direction:ltr;}
.gbb-person{margin-bottom:18px;min-height:70px;}
.gbb-person h1{font-size:20px;line-height:1.22;font-weight:900;margin:0;color:#222;}
.gbb-person p{margin:10px 0 0;text-align:center;font-weight:800;color:#4a5144;font-size:14px;}
.gbb-block{margin-bottom:15px;}
.gbb-block.gbb-last{margin-bottom:0;}
.gbb-block-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.gbb-head-rtl{flex-direction:row-reverse;}
.gbb-title-wrap{flex:1;min-height:22px;background:linear-gradient(90deg,#c5ceb0,#fff);display:flex;align-items:center;padding:4px 10px;}
.gbb-ar-block .gbb-title-wrap{background:linear-gradient(270deg,#c5ceb0,#fff);justify-content:flex-end;}
.gbb-title-wrap h3{font-size:12px;line-height:1.2;font-weight:900;color:#4e5747;margin:0;}
.gbb-icon{width:28px;height:28px;display:grid;place-items:center;color:#aab58f;font-size:17px;line-height:1;}
.gbb-body p{font-size:11px;line-height:1.48;margin:0;color:#222;}
.gbb-arabic .gbb-body p{font-size:11.5px;line-height:1.72;text-align:right;}
.gbb-list{list-style:none;margin:0;padding:0;font-size:11px;line-height:1.46;color:#222;}
.gbb-list li{margin-bottom:3px;position:relative;}
.gbb-en-list li{padding-left:16px;text-align:left;direction:ltr;}
.gbb-en-list li:before{content:'◇';position:absolute;left:0;top:0;color:#555;}
.gbb-ar-list{direction:rtl;text-align:right;font-size:11.5px;line-height:1.58;}
.gbb-ar-list li{padding-right:16px;text-align:right;direction:rtl;unicode-bidi:plaintext;}
.gbb-ar-list li:before{content:'◇';position:absolute;right:0;top:0;color:#555;}
.gbb-center{background:#bfc8a8;padding:18px 10px;color:#56584f;display:flex;align-items:center;flex-direction:column;overflow:hidden;}
.gbb-logo{height:80px;width:80px;border-radius:999px;border:2px solid #55584d;display:grid;place-items:center;font-size:34px;font-family:Georgia,serif;font-weight:700;margin:0 0 18px;color:#56584f;}
.gbb-center-info{width:100%;min-height:32px;background:#768665;color:white;display:grid;grid-template-columns:1fr 36px 1fr;align-items:center;margin-bottom:8px;text-align:center;font-size:9.5px;font-weight:800;line-height:1.15;}
.gbb-center-info b{height:36px;background:#5c5146;display:grid;place-items:center;font-size:15px;color:white;}
.gbb-center-info div{padding:0 4px;word-break:break-word;}
.gbb-langs{margin-top:56px;text-align:center;width:100%;}
.gbb-langs h2{font-size:21px;line-height:1.1;font-weight:900;margin:0;color:#56584f;font-family:'Noto Naskh Arabic',Tahoma,Arial,sans-serif;}
.gbb-langs i{display:block;width:120px;height:2px;background:#56584f;margin:8px auto 0;}
.gbb-circle{width:84px;height:84px;border-radius:999px;border:6px solid #5c5146;display:grid;place-items:center;margin:26px auto 8px;font-size:18px;font-weight:900;color:#56584f;}
.gbb-circle.muted{border-color:#5c5146;border-right-color:#fff;}
.gbb-langs strong{display:block;font-size:16px;font-weight:900;margin-bottom:6px;font-family:'Noto Naskh Arabic',Tahoma,Arial,sans-serif;}
.template-card[data-template="gray_black_bilingual_cv"] .template-thumb{background:linear-gradient(90deg,#fff 0 36%,#bfc8a8 36% 64%,#fff 64%);}
@media print{.gray-black-bilingual-cv{box-shadow:none!important;}}


/* Gray Black bilingual: force final layout - English left, info center, Arabic right */
.gray-black-bilingual-cv{direction:ltr!important;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr)!important;grid-template-areas:"gbb-en gbb-center gbb-ar"!important;}
.gray-black-bilingual-cv .gbb-english{grid-area:gbb-en!important;grid-column:1!important;direction:ltr!important;text-align:left!important;}
.gray-black-bilingual-cv .gbb-center{grid-area:gbb-center!important;grid-column:2!important;}
.gray-black-bilingual-cv .gbb-arabic{grid-area:gbb-ar!important;grid-column:3!important;direction:rtl!important;text-align:right!important;font-family:'Noto Naskh Arabic','Noto Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif!important;unicode-bidi:isolate!important;}
.gray-black-bilingual-cv .gbb-arabic *{direction:rtl!important;text-align:right!important;unicode-bidi:isolate!important;}
.gray-black-bilingual-cv .gbb-arabic .gbb-block-head{flex-direction:row-reverse!important;}
.gray-black-bilingual-cv .gbb-arabic .gbb-title-wrap{justify-content:flex-end!important;background:linear-gradient(270deg,#c5ceb0,#fff)!important;}
.gray-black-bilingual-cv .gbb-arabic .gbb-list{direction:rtl!important;text-align:right!important;padding-right:0!important;padding-left:0!important;}
.gray-black-bilingual-cv .gbb-arabic .gbb-list li{direction:rtl!important;text-align:right!important;padding-right:18px!important;padding-left:0!important;}
.gray-black-bilingual-cv .gbb-arabic .gbb-list li:before{right:0!important;left:auto!important;}
.gray-black-bilingual-cv .gbb-arabic .gbb-person h1,.gray-black-bilingual-cv .gbb-arabic .gbb-person p{text-align:right!important;}
@media print{.gray-black-bilingual-cv{direction:ltr!important;grid-template-areas:"gbb-en gbb-center gbb-ar"!important;}.gray-black-bilingual-cv .gbb-arabic{grid-column:3!important;direction:rtl!important;text-align:right!important;}}


/* Exact Beige Resume templates */
.exact-beige-resume{position:relative;width:794px;height:1123px;background:#F9F8F4;color:#4D4D4D;overflow:hidden;font-family:Arial,Tahoma,'Segoe UI',sans-serif;padding:0;box-sizing:border-box;box-shadow:0 20px 45px rgba(0,0,0,.2)}
.exact-beige-resume *{box-sizing:border-box}.beige-rtl{direction:rtl;text-align:right;font-family:Tahoma,Arial,'Segoe UI',sans-serif}.beige-ltr{direction:ltr;text-align:left}.beige-leaf{position:absolute;color:#9A8E7A;opacity:.22;font-size:132px;line-height:1;z-index:0}.beige-leaf-a{top:0;left:26px;transform:rotate(-22deg)}.beige-leaf-b{bottom:8px;right:34px;transform:rotate(32deg)}
.beige-header{position:relative;z-index:1;display:flex;align-items:flex-start;gap:26px;padding:40px 56px 22px}.beige-rtl .beige-header{justify-content:flex-start}.beige-ltr .beige-header{justify-content:flex-start}.beige-head-text{flex:1;padding-top:22px}.beige-name-line{display:flex;align-items:center;gap:12px}.beige-rtl .beige-name-line{justify-content:flex-start}.beige-name-line span{color:#9A8E7A;font-size:17px}.beige-name-line h1{margin:0;font-size:30px;line-height:1.18;font-weight:900;color:#4D4D4D}.beige-head-text p{margin:7px 34px 0 0;color:#808080;font-size:16px}.beige-ltr .beige-head-text p{margin:7px 0 0 34px}.beige-avatar{width:120px;height:120px;border-radius:999px;overflow:hidden;border:4px solid #fff;box-shadow:0 8px 18px rgba(0,0,0,.12);background:linear-gradient(135deg,#d4c4b0,#e8dcd0);flex:0 0 auto}.beige-avatar img{width:100%;height:100%;object-fit:cover}.beige-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#a89585;font-size:48px}
.beige-info{position:relative;z-index:1;margin:0 40px 22px;padding:14px 18px 16px;border-radius:14px;background:#F2F0E9}.beige-info p{margin:8px 4px 0;color:#747474;font-size:12px;line-height:1.75}.beige-pill{display:inline-flex;align-items:center;gap:11px;border:1px solid #4D4D4D;border-radius:999px;background:#fff;color:#4D4D4D;padding:5px 18px;font-size:12px;font-weight:800;line-height:1}.beige-pill i{display:block;width:1px;height:16px;background:#4D4D4D}.beige-pill b{font-size:12px;color:#9A8E7A}.beige-columns{position:relative;z-index:1;display:flex;gap:30px;padding:0 40px}.beige-maincol{width:60%;display:flex;flex-direction:column;gap:19px}.beige-sidecol{width:40%;display:flex;flex-direction:column;gap:24px}.beige-maincol section,.beige-sidecol section{break-inside:avoid;page-break-inside:avoid}.beige-item{font-size:11px;line-height:1.55;margin-top:9px}.beige-item b{display:block;color:#4D4D4D;font-weight:900}.beige-item strong{display:block;color:#4D4D4D;font-size:11px}.beige-item em{display:block;color:#808080;font-style:normal}.beige-item p{margin:3px 0 0;color:#747474;font-size:10.5px;line-height:1.55}.beige-list{display:flex;flex-direction:column;gap:7px;margin-top:10px;color:#747474}.beige-list>div{display:flex;align-items:flex-start;gap:7px;font-size:10.5px;line-height:1.45}.beige-rtl .beige-list>div{flex-direction:row-reverse;justify-content:flex-start}.beige-dot{width:6px;height:6px;border-radius:999px;background:#9A8E7A;margin-top:5px;flex:0 0 auto}.beige-contact{margin-top:10px;text-align:center;color:#747474;font-size:11px;line-height:1.5}.beige-contact p{margin:3px 0}.beige-skills{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:10px}.beige-skills>div{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:10.5px}.beige-rtl .beige-skills>div{flex-direction:row-reverse}.beige-skill-dots{display:flex;gap:4px}.beige-skill-dots span{width:10px;height:10px;border-radius:999px;border:1px solid #4D4D4D}.beige-skill-dots span.on{background:#4D4D4D}.beige-bottom{position:absolute;bottom:9px;left:0;right:0;display:flex;justify-content:center;gap:240px}.beige-bottom span{width:52px;height:26px;border-radius:52px 52px 0 0;border:1px solid #4D4D4D;border-bottom:0;display:block}
.preview-scale .exact-beige-resume{transform:none;box-shadow:none}.cv-preview .exact-beige-resume{margin:auto}@media print{.exact-beige-resume{box-shadow:none}}

/* TopSupplies-safe UI layer: templates page only. Does not affect resume template/PDF classes. */
/* Removed body:has selector because html2canvas/html2pdf may render blank pages when parsing unsupported selectors. */
.ui-shell{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);min-height:100vh;color:#111827;}
.ts-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:24px;box-shadow:0 12px 35px rgba(15,23,42,.06);}
.ts-hero-copy{text-align:right;flex:1;}
.ts-hero-copy h2{color:#111827;line-height:1.25;}
.ts-count-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px 22px;min-width:260px;box-shadow:0 10px 25px rgba(15,23,42,.06);}
.ts-count-icon{width:48px;height:48px;border-radius:14px;background:#fff1eb;color:#f05a16;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;}
.ts-count-label{font-weight:800;color:#64748b;font-size:14px;}
.ts-count-number{font-weight:950;color:#f05a16;font-size:34px;line-height:1;}
.ts-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;box-shadow:0 8px 24px rgba(15,23,42,.04);}
.ts-tabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ts-tab{border:1px solid #e5e7eb;background:#fff;color:#111827;border-radius:10px;padding:10px 16px;font-weight:800;transition:.18s ease;}
.ts-tab:hover{border-color:#fb923c;color:#f05a16;transform:translateY(-1px);}
.ts-tab.active{background:#f97316;color:#fff;border-color:#f97316;box-shadow:0 8px 18px rgba(249,115,22,.22);}
.ts-search{width:min(420px,100%);background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 16px;color:#111827;outline:none;text-align:right;}
.ts-search:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.12);}
.ts-section{margin-bottom:32px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.045);}
.ts-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #e5e7eb;padding:16px 20px;background:#fff;}
.ts-section-title{font-weight:950;color:#111827;font-size:20px;display:flex;align-items:center;gap:10px;}
.ts-badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;border-radius:999px;padding:0 10px;font-weight:900;font-size:13px;background:#e0f2fe;color:#0369a1;}
.ts-section[data-category="ar"] .ts-badge{background:#dcfce7;color:#15803d;}
.ts-section[data-category="en"] .ts-badge{background:#dbeafe;color:#1d4ed8;}
.ts-section[data-category="bi"] .ts-badge{background:#ede9fe;color:#6d28d9;}
.ts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:18px;}
.ts-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:14px;box-shadow:0 8px 22px rgba(15,23,42,.05);transition:.2s ease;display:flex;flex-direction:column;min-height:100%;}
.ts-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,23,42,.10);border-color:#fed7aa;}
.ts-preview{background:#f3f4f6;border-radius:14px;overflow:hidden;height:330px;display:flex;justify-content:center;align-items:flex-start;padding-top:12px;border:1px solid #e5e7eb;}
.ts-card-body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;}
.ts-card-title{font-weight:950;color:#111827;font-size:17px;line-height:1.35;}
.ts-card-desc{color:#64748b;font-size:13px;margin-top:4px;line-height:1.45;}
.ts-lang-pill{display:inline-flex;margin-top:8px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;background:#f1f5f9;color:#475569;}
.ts-lang-pill.ar{background:#dcfce7;color:#15803d;}.ts-lang-pill.en{background:#dbeafe;color:#1d4ed8;}.ts-lang-pill.bi{background:#ede9fe;color:#6d28d9;}
.ts-select{background:#f97316!important;color:#fff!important;border:0!important;border-radius:12px!important;padding:12px 16px!important;font-weight:950!important;min-width:120px;box-shadow:0 8px 18px rgba(249,115,22,.24);}
.ts-select:hover{background:#ea580c!important;}
.ts-empty{padding:30px;text-align:center;color:#64748b;font-weight:800;}
@media (max-width: 1180px){.ts-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width: 900px){.ts-hero,.ts-toolbar{flex-direction:column;align-items:stretch}.ts-count-card{min-width:0}.ts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ts-search{width:100%;}}
@media (max-width: 600px){.ts-grid{grid-template-columns:1fr}.ts-preview{height:300px}.ts-card-body{align-items:stretch;flex-direction:column}.ts-select{width:100%;}.ts-hero{padding:18px}.ts-section-head{align-items:flex-start;flex-direction:column;}}

/* Safe mobile/template-picker fixes only: does not affect #cvPreview, .a4 export, or PDF engine. */
#templates .ts-card,
#templates .ts-section,
#templates .ts-preview {
  overflow: hidden;
}
#templates .ts-card-title,
#templates .ts-card-desc {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
#templates .ts-card-desc {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
#templates .ts-preview {
  position: relative;
  min-height: 330px;
}
#templates .ts-preview > .preview-scale {
  position: absolute;
  top: 12px;
  left: 50%;
  margin: 0 !important;
  transform: translateX(-50%) scale(.34) !important;
  transform-origin: top center !important;
  width: var(--paper-w) !important;
  height: var(--paper-h) !important;
}
#templates .ts-preview > .preview-scale .a4 {
  box-shadow: none !important;
}
@media (max-width: 640px) {
  #templates .max-w-7xl {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  #templates .ts-hero-copy h2 {
    font-size: 30px !important;
    line-height: 1.22 !important;
  }
  #templates .ts-hero-copy p {
    font-size: 14px !important;
  }
  #templates .ts-count-card {
    padding: 14px 16px !important;
  }
  #templates .ts-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #templates .ts-tab {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
  }
  #templates .ts-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 12px !important;
  }
  #templates .ts-card {
    padding: 12px !important;
    border-radius: 18px !important;
  }
  #templates .ts-preview {
    height: 315px !important;
    min-height: 315px !important;
    padding: 0 !important;
  }
  #templates .ts-preview > .preview-scale {
    top: 10px;
    transform: translateX(-50%) scale(.285) !important;
  }
  #templates .ts-card-body {
    gap: 10px !important;
    margin-top: 12px !important;
  }
  #templates .ts-card-title {
    font-size: 18px !important;
  }
  #templates .ts-card-desc {
    font-size: 13px !important;
  }
}
@media (max-width: 380px) {
  #templates .ts-preview { height: 285px !important; min-height: 285px !important; }
  #templates .ts-preview > .preview-scale { transform: translateX(-50%) scale(.25) !important; }
}


/* Safe image upload UI: editor only, does not affect PDF or template rendering */
#editor .image-upload-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
#editor .image-upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #f97316;background:#fff7ed;color:#ea580c;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer;white-space:nowrap}
#editor .image-upload-btn:hover{background:#ffedd5}
#editor .image-upload-btn input{display:none}
#editor .image-help{font-size:12px;color:#94a3b8;margin-top:6px;line-height:1.5}


/* v32 cautious UI polish: editor/template picker only. Does NOT target #cvPreview or .a4 internals. */
body {
  font-family: Tahoma, Arial, "Segoe UI", "Noto Naskh Arabic", sans-serif;
}

#editor {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  color: #0f172a !important;
  min-height: 100vh;
}

#editor > .max-w-7xl {
  max-width: 1580px !important;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  align-items: start;
}

#editor .card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08) !important;
}

#editor .editor-panel {
  max-height: calc(100vh - 52px) !important;
  overflow: auto !important;
  scrollbar-width: thin;
  direction: rtl;
}

#editor #formTitle {
  color: #0f172a !important;
  font-size: 25px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

#editor #backTemplatesBtn,
#editor .btn-light {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-weight: 900 !important;
}

#editor .step-pill {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 14px !important;
  min-height: 62px;
  line-height: 1.35;
}

#editor .step-pill.active {
  background: #17172b !important;
  color: #ffffff !important;
  border-color: #17172b !important;
}

#editor .step-pill.done {
  background: #fff7ed !important;
  color: #c2410c !important;
  border-color: #fed7aa !important;
}

#editor .label,
#editor label {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  display: block;
}

#editor .form-panel {
  min-height: 0 !important;
}

#editor #form .border,
#editor #form section {
  border-color: #dbe3ee !important;
}

#editor #form section {
  background: #ffffff !important;
  color: #0f172a !important;
}

#editor .input,
#editor input,
#editor textarea,
#editor select {
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  min-height: 52px;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

#editor textarea.input,
#editor textarea {
  min-height: 110px;
  resize: vertical;
}

#editor .image-upload-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#editor .image-upload-btn {
  border-radius: 14px !important;
  min-height: 52px;
}

#editor .image-help {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

#editor #wizardNav {
  background: rgba(255,255,255,.96) !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -12px 26px rgba(15,23,42,.08) !important;
  border-radius: 18px 18px 0 0;
  padding: 12px 0 0 !important;
  z-index: 20;
}

#editor #wizardNav button {
  min-height: 54px;
  border-radius: 14px !important;
  font-weight: 950 !important;
  font-size: 16px !important;
}

#editor main.card {
  min-height: calc(100vh - 52px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto !important;
  background: #f8fafc !important;
}

#editor .editor-preview {
  transform: scale(.66) !important;
  transform-origin: top center !important;
  width: var(--paper-w) !important;
  height: calc(var(--paper-h) * .66) !important;
  margin: 0 auto !important;
}

/* v32 template gallery polish only */
#templates.ui-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #eef2f7 100%) !important;
  color: #0f172a !important;
}

#templates .max-w-7xl {
  max-width: 1500px !important;
}

#templates .ts-hero {
  border-radius: 26px !important;
  padding: 30px 34px !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.07) !important;
}

#templates .ts-hero-copy h2 {
  font-size: clamp(30px, 3.2vw, 48px) !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
  color: #0f172a !important;
}

#templates .ts-hero-copy p {
  color: #334155 !important;
  font-size: 17px !important;
}

#templates .ts-toolbar,
#templates .ts-section {
  border-radius: 24px !important;
  box-shadow: 0 14px 35px rgba(15,23,42,.055) !important;
}

#templates .ts-grid {
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)) !important;
  gap: 22px !important;
  padding: 22px !important;
}

#templates .ts-card {
  border-radius: 24px !important;
  padding: 16px !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.07) !important;
}

#templates .ts-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 50px rgba(15,23,42,.12) !important;
}

#templates .ts-preview {
  height: 355px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fafc, #eef2f7) !important;
}

#templates .ts-card-title {
  font-size: 18px !important;
  line-height: 1.45 !important;
  color: #0f172a !important;
}

#templates .ts-card-desc {
  color: #475569 !important;
  font-size: 13.5px !important;
}

#templates .ts-select {
  border-radius: 14px !important;
  min-width: 126px !important;
}

@media (max-width: 1024px) {
  #editor > .max-w-7xl {
    display: flex !important;
    flex-direction: column !important;
  }
  #editor .editor-panel {
    width: 100% !important;
    max-height: none !important;
    order: 2;
  }
  #editor main.card {
    width: 100% !important;
    min-height: 520px !important;
    order: 1;
  }
  #editor .editor-preview {
    transform: scale(.50) !important;
    height: calc(var(--paper-h) * .50) !important;
  }
}

@media (max-width: 640px) {
  #editor > .max-w-7xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #editor .editor-preview {
    transform: scale(.40) !important;
    height: calc(var(--paper-h) * .40) !important;
  }
  #editor .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  #editor #wizardNav {
    position: sticky;
    bottom: 0;
  }
  #templates .ts-preview {
    height: 320px !important;
  }
}

/* v35 STABLE UI POLISH — safe rollback layer.
   Scope: template picker + editor shell only.
   It does NOT target #cvPreview, .a4, resume template classes, or PDF export. */
#templates .ts-hero{
  padding:22px 28px !important;
  border-radius:22px !important;
  box-shadow:0 14px 38px rgba(15,23,42,.055) !important;
}
#templates .ts-hero-copy h2{
  font-size:clamp(25px,2.3vw,36px) !important;
  line-height:1.28 !important;
  letter-spacing:0 !important;
  font-weight:900 !important;
}
#templates .ts-hero-copy p{
  font-size:15px !important;
  line-height:1.8 !important;
  color:#475569 !important;
}
#templates .ts-count-card{
  padding:14px 18px !important;
  min-width:220px !important;
  border-radius:18px !important;
}
#templates .ts-count-number{font-size:28px !important;}
#templates .ts-toolbar{
  padding:12px !important;
  border-radius:20px !important;
}
#templates .ts-tab{
  padding:9px 14px !important;
  border-radius:12px !important;
  font-size:14px !important;
}
#templates .ts-section-title{
  font-size:18px !important;
  line-height:1.4 !important;
}
#templates .ts-grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  gap:18px !important;
  padding:18px !important;
}
#templates .ts-card{
  border-radius:20px !important;
  padding:14px !important;
  box-shadow:0 10px 26px rgba(15,23,42,.055) !important;
}
#templates .ts-preview{
  height:320px !important;
  border-radius:16px !important;
  padding-top:10px !important;
}
#templates .ts-card-body{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  text-align:center !important;
  gap:10px !important;
}
#templates .ts-card-title{
  width:100% !important;
  text-align:center !important;
  direction:auto !important;
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:900 !important;
  margin:0 auto !important;
  color:#111827 !important;
}
#templates .ts-card-desc{
  width:100% !important;
  text-align:center !important;
  direction:auto !important;
  font-size:12.5px !important;
  line-height:1.65 !important;
  color:#64748b !important;
  margin:4px auto 0 !important;
}
#templates .ts-lang-pill{
  margin:8px auto 0 !important;
  font-size:11.5px !important;
}
#templates .ts-select{
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  border-radius:14px !important;
  font-size:15px !important;
  box-shadow:0 8px 18px rgba(249,115,22,.18) !important;
}
#editor #formTitle{
  font-size:21px !important;
  line-height:1.45 !important;
  font-weight:900 !important;
}
#editor .step-pill{
  min-height:54px !important;
  font-size:14px !important;
  border-radius:13px !important;
}
#editor .label,
#editor label{
  font-size:13px !important;
  margin-bottom:6px !important;
}
#editor .input,
#editor input,
#editor textarea,
#editor select{
  min-height:48px !important;
  border-radius:13px !important;
  font-size:14px !important;
}
#editor #wizardNav button{
  min-height:50px !important;
  font-size:15px !important;
}
@media (max-width:640px){
  #templates .ts-hero-copy h2{font-size:25px !important;}
  #templates .ts-preview{height:300px !important;}
}

/* v36 REFINED UI POLISH — interface only, PDF-safe.
   Scope intentionally limited to #templates and #editor. Does not affect #cvPreview/.a4. */
#templates.ui-shell,
#editor{
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

#templates .max-w-7xl{
  max-width:1420px !important;
  padding-top:28px !important;
}
#templates .ts-hero{
  padding:20px 24px !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,#ffffff 0%,#fbfdff 100%) !important;
  border-color:#e8edf5 !important;
  box-shadow:0 12px 32px rgba(15,23,42,.052) !important;
}
#templates .ts-hero-copy h2{
  font-size:clamp(22px,2vw,31px) !important;
  line-height:1.36 !important;
  font-weight:850 !important;
  color:#0f172a !important;
}
#templates .ts-hero-copy p{
  margin-top:6px !important;
  font-size:14px !important;
  line-height:1.75 !important;
  color:#667085 !important;
}
#templates .ts-count-card{
  min-width:190px !important;
  padding:13px 16px !important;
  gap:12px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
}
#templates .ts-count-icon{
  width:42px !important;
  height:42px !important;
  font-size:22px !important;
  border-radius:12px !important;
}
#templates .ts-count-label{font-size:12.5px !important;color:#667085 !important;}
#templates .ts-count-number{font-size:25px !important;}

#templates .ts-toolbar{
  padding:10px !important;
  border-radius:18px !important;
  gap:12px !important;
  border-color:#e8edf5 !important;
}
#templates .ts-tabs{gap:8px !important;}
#templates .ts-tab{
  padding:8px 13px !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:750 !important;
  border-radius:11px !important;
}
#templates .ts-search{
  padding:10px 14px !important;
  font-size:13.5px !important;
  border-radius:12px !important;
  color:#111827 !important;
}

#templates .ts-section{
  border-radius:20px !important;
  border-color:#e8edf5 !important;
  box-shadow:0 10px 28px rgba(15,23,42,.045) !important;
}
#templates .ts-section-head{
  padding:13px 18px !important;
}
#templates .ts-section-title{
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:850 !important;
}
#templates .ts-badge{
  min-width:30px !important;
  height:24px !important;
  font-size:12px !important;
}
#templates .ts-grid{
  grid-template-columns:repeat(auto-fit,minmax(245px,1fr)) !important;
  gap:16px !important;
  padding:16px !important;
}
#templates .ts-card{
  padding:12px !important;
  border-radius:18px !important;
  border-color:#e8edf5 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
}
#templates .ts-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 16px 36px rgba(15,23,42,.095) !important;
}
#templates .ts-preview{
  height:286px !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%) !important;
  overflow:hidden !important;
}
#templates .preview-scale{
  transform:scale(.285) !important;
  height:calc(var(--paper-h) * .34) !important;
}
#templates .ts-card-body{
  gap:8px !important;
  padding-top:12px !important;
}
#templates .ts-card-title{
  font-size:14.5px !important;
  line-height:1.5 !important;
  font-weight:850 !important;
  max-width:95% !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#templates .ts-card-desc{
  font-size:11.8px !important;
  line-height:1.65 !important;
  color:#667085 !important;
  min-height:38px !important;
}
#templates .ts-lang-pill{
  margin-top:3px !important;
  font-size:10.8px !important;
  padding:4px 9px !important;
}
#templates .ts-select{
  min-height:40px !important;
  font-size:13.5px !important;
  font-weight:850 !important;
  border-radius:12px !important;
}

#editor > .max-w-7xl{
  max-width:1500px !important;
  padding-top:20px !important;
  padding-bottom:20px !important;
  gap:18px !important;
  grid-template-columns:400px 1fr !important;
}
#editor .card{
  border-radius:20px !important;
  box-shadow:0 12px 34px rgba(15,23,42,.06) !important;
}
#editor .editor-panel{
  padding:18px !important;
  max-height:calc(100vh - 40px) !important;
}
#editor #formTitle{
  font-size:19px !important;
  font-weight:850 !important;
  color:#101828 !important;
}
#editor #backTemplatesBtn,
#editor .btn-light{
  padding:9px 12px !important;
  font-size:13px !important;
  border-radius:12px !important;
  font-weight:800 !important;
}
#editor .step-pill{
  min-height:48px !important;
  padding:8px !important;
  font-size:12.5px !important;
  font-weight:800 !important;
}
#editor .step-no{
  width:22px !important;
  height:22px !important;
  font-size:12px !important;
}
#editor .label,
#editor label{
  font-size:12.5px !important;
  font-weight:800 !important;
  color:#344054 !important;
}
#editor .input,
#editor input,
#editor textarea,
#editor select{
  min-height:44px !important;
  border-radius:12px !important;
  font-size:13.5px !important;
  border-color:#d8e0eb !important;
}
#editor textarea.input,
#editor textarea{min-height:96px !important;}
#editor #wizardNav button{
  min-height:46px !important;
  font-size:14px !important;
}
#editor main.card{
  min-height:calc(100vh - 40px) !important;
  padding:14px !important;
}
#editor .editor-preview{
  transform:scale(.64) !important;
  height:calc(var(--paper-h) * .64) !important;
}

@media (max-width:1024px){
  #editor > .max-w-7xl{grid-template-columns:1fr !important;}
  #templates .ts-hero{flex-direction:column-reverse !important;align-items:stretch !important;}
  #templates .ts-count-card{min-width:0 !important;width:100% !important;justify-content:center !important;}
  #templates .ts-toolbar{flex-direction:column !important;align-items:stretch !important;}
  #templates .ts-search{width:100% !important;}
}
@media (max-width:640px){
  #templates .ts-grid{grid-template-columns:1fr !important;}
  #templates .ts-preview{height:270px !important;}
  #templates .ts-hero-copy h2{font-size:22px !important;}
  #editor .editor-preview{transform:scale(.38) !important;height:calc(var(--paper-h) * .38) !important;}
}

/* v37 PREMIUM UI THUMBNAILS — interface only, PDF-safe.
   Does NOT target #cvPreview, .a4 outside #templates, or any resume export class. */
#templates.ui-shell,
#templates button,
#templates input,
#templates select,
#templates textarea,
#editor .editor-panel,
#editor .editor-panel button,
#editor .editor-panel input,
#editor .editor-panel select,
#editor .editor-panel textarea{
  font-family:"IBM Plex Sans Arabic","Cairo","Tajawal","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif !important;
}

/* Make the public-facing heading 30% smaller and calmer */
#templates .ts-hero-copy h2{
  font-size:clamp(16px,1.45vw,22px) !important;
  line-height:1.55 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  color:#111827 !important;
  max-width:880px !important;
  margin-inline-start:auto !important;
}
#templates .ts-hero-copy p{
  font-size:12.5px !important;
  line-height:1.9 !important;
  color:#667085 !important;
  margin-top:4px !important;
}
#templates .ts-hero{
  padding:16px 20px !important;
  border-radius:18px !important;
}
#templates .ts-count-card{padding:10px 14px !important;border-radius:15px !important;}
#templates .ts-count-number{font-size:21px !important;}
#templates .ts-count-label{font-size:11.5px !important;}
#templates .ts-count-icon{width:36px !important;height:36px !important;font-size:18px !important;}

/* Cleaner filter bar */
#templates .ts-toolbar{padding:9px !important;border-radius:16px !important;}
#templates .ts-tab{font-size:12.5px !important;padding:7px 12px !important;font-weight:750 !important;}
#templates .ts-search{font-size:12.5px !important;padding:9px 13px !important;}
#templates .ts-section-title{font-size:14px !important;font-weight:800 !important;}

/* Template cards: improve visitor display only, never original template size */
#templates .ts-grid{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;
  gap:16px !important;
  padding:16px !important;
}
#templates .ts-card{
  border-radius:18px !important;
  padding:12px !important;
  background:#fff !important;
  border-color:#e6ebf2 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.045) !important;
}
#templates .ts-card:hover{transform:translateY(-2px) !important;box-shadow:0 16px 36px rgba(15,23,42,.09) !important;}

/* The thumbnail viewport shows the whole resume page without cropping.
   It only changes the preview card rendering in the template picker. */
#templates .ts-preview{
  height:300px !important;
  min-height:300px !important;
  padding:0 !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%) !important;
  display:block !important;
}
#templates .ts-preview > .preview-scale{
  position:absolute !important;
  top:12px !important;
  left:50% !important;
  width:var(--paper-w) !important;
  height:var(--paper-h) !important;
  margin:0 !important;
  transform:translateX(-50%) scale(.245) !important;
  transform-origin:top center !important;
}
#templates .ts-preview > .preview-scale .a4,
#templates .ts-preview > .preview-scale [class*="resume"]{
  box-shadow:0 10px 28px rgba(15,23,42,.10) !important;
}

#templates .ts-card-body{
  padding-top:11px !important;
  gap:7px !important;
  text-align:center !important;
}
#templates .ts-card-title{
  width:100% !important;
  min-height:auto !important;
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:800 !important;
  text-align:center !important;
  direction:auto !important;
  display:block !important;
  color:#101828 !important;
  margin:0 auto !important;
}
#templates .ts-card-desc{
  width:100% !important;
  min-height:auto !important;
  font-size:11.2px !important;
  line-height:1.7 !important;
  text-align:center !important;
  color:#667085 !important;
  margin:2px auto 0 !important;
}
#templates .ts-select{min-height:38px !important;font-size:12.5px !important;border-radius:11px !important;}

@media (max-width:640px){
  #templates .ts-hero-copy h2{font-size:18px !important;}
  #templates .ts-preview{height:285px !important;min-height:285px !important;}
  #templates .ts-preview > .preview-scale{transform:translateX(-50%) scale(.232) !important;}
  #templates .ts-grid{grid-template-columns:1fr !important;}
}

/* v42 SAFE UI TYPOGRAPHY + TEMPLATE THUMBNAIL VIEW ONLY
   Scope: #templates and #editor controls only. Does NOT alter #cvPreview/.a4 or PDF export. */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

#templates.ui-shell,
#templates.ui-shell *:not(.a4):not(.a4 *),
#editor,
#editor *:not(#cvPreview):not(#cvPreview *){
  font-family:"Cairo","Tajawal","Segoe UI",Tahoma,Arial,sans-serif !important;
}

/* Smaller, calmer main heading: about 30% smaller than earlier UI versions */
#templates .ts-hero-copy h2{
  font-family:"Alexandria","Cairo",sans-serif !important;
  font-size:clamp(17px,1.35vw,22px) !important;
  line-height:1.65 !important;
  font-weight:700 !important;
  letter-spacing:-.015em !important;
  color:#101828 !important;
  margin:0 !important;
}
#templates .ts-hero-copy p{
  font-family:"Tajawal","Cairo",sans-serif !important;
  font-size:13.2px !important;
  line-height:1.9 !important;
  color:#667085 !important;
  max-width:760px !important;
}

/* Cleaner cards and less noisy titles */
#templates .ts-section-title,
#templates .ts-card-title,
#templates .ts-tab,
#templates .ts-select,
#templates .ts-count-label,
#templates .ts-count-number{
  font-family:"Cairo","Tajawal",sans-serif !important;
}
#templates .ts-card-title{
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:700 !important;
  min-height:38px !important;
  color:#111827 !important;
  text-align:center !important;
  direction:rtl !important;
  margin-inline:auto !important;
}
#templates .ts-card-desc{
  font-family:"Tajawal","Cairo",sans-serif !important;
  font-size:11.2px !important;
  line-height:1.75 !important;
  min-height:34px !important;
  color:#6b7280 !important;
}
#templates .ts-section-title{
  font-size:14.5px !important;
  font-weight:700 !important;
}
#templates .ts-tab{
  font-size:12.3px !important;
  font-weight:700 !important;
}

/* Show template thumbnails fully inside cards without changing the real template size */
#templates .ts-preview{
  height:310px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%) !important;
}
#templates .ts-preview > .preview-scale,
#templates .preview-scale{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform-origin:center center !important;
  transform:scale(.255) !important;
  width:var(--paper-w) !important;
  height:var(--paper-h) !important;
  max-width:none !important;
  flex:0 0 auto !important;
}
#templates .ts-preview > .preview-scale .a4,
#templates .preview-scale .a4{
  box-shadow:0 16px 42px rgba(15,23,42,.16) !important;
}

/* Editor UI typography only; preserve preview/export */
#editor .editor-panel,
#editor .editor-panel *{
  font-family:"Cairo","Tajawal","Segoe UI",Tahoma,Arial,sans-serif !important;
}
#editor #formTitle{
  font-family:"Alexandria","Cairo",sans-serif !important;
  font-size:19px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
}
#editor .form-panel label,
#editor .form-panel .label{
  font-size:13px !important;
  font-weight:700 !important;
}
#editor input,
#editor textarea,
#editor select{
  font-family:"Tajawal","Cairo",sans-serif !important;
  font-size:13.5px !important;
}

@media (max-width:640px){
  #templates .ts-hero-copy h2{font-size:18px !important;}
  #templates .ts-preview{height:280px !important;}
  #templates .ts-preview > .preview-scale,
  #templates .preview-scale{transform:scale(.23) !important;}
}


/* v44 Arabic typography fix - safe: fonts only, no layout/export size changes */
:root{
  --cv-ar-heading-font:'Tajawal','Noto Sans Arabic',Arial,sans-serif;
  --cv-ar-body-font:'Noto Sans Arabic','Tajawal',Arial,sans-serif;
}
html[dir="rtl"], body, input, textarea, select, button{
  font-family: var(--cv-ar-body-font) !important;
}
/* Interface headings and cards */
.hero-title, .page-title, .templates-title, .template-title,
.template-card h1, .template-card h2, .template-card h3,
.step-title, .form-title, .section-heading{
  font-family: var(--cv-ar-heading-font) !important;
  font-weight:700 !important;
}
.template-card p, .template-description, label, input, textarea, select{
  font-family: var(--cv-ar-body-font) !important;
}
/* Arabic resume content only: override old Tahoma/Traditional Arabic inline stacks */
.a4[dir="rtl"], .a4 [dir="rtl"],
[lang="ar"], [dir="rtl"]{
  font-family: var(--cv-ar-body-font) !important;
}
.a4[dir="rtl"] h1, .a4[dir="rtl"] h2, .a4[dir="rtl"] h3, .a4[dir="rtl"] h4,
.a4 [dir="rtl"] h1, .a4 [dir="rtl"] h2, .a4 [dir="rtl"] h3, .a4 [dir="rtl"] h4,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4{
  font-family: var(--cv-ar-heading-font) !important;
  font-weight:700 !important;
}
.a4[dir="rtl"] p, .a4[dir="rtl"] li, .a4[dir="rtl"] span, .a4[dir="rtl"] div,
.a4 [dir="rtl"] p, .a4 [dir="rtl"] li, .a4 [dir="rtl"] span, .a4 [dir="rtl"] div,
[lang="ar"] p, [lang="ar"] li, [lang="ar"] span, [lang="ar"] div{
  font-family: var(--cv-ar-body-font) !important;
}


/* v45 FIX — Gray/Black Bilingual export crop fix only.
   This template was using CSS Grid, which caused html2canvas/html2pdf to capture only the top row
   in some browsers. Use a fixed flex A4 layout for this template only. */
.gray-black-bilingual-cv,
#cvPreview > .gray-black-bilingual-cv{
  width:794px !important;
  height:1123px !important;
  min-height:1123px !important;
  max-height:1123px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  grid-template-columns:none !important;
  grid-template-areas:none !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#d6d6d6 !important;
  direction:ltr !important;
}
.gray-black-bilingual-cv .gbb-english{
  order:1 !important;
  width:287px !important;
  flex:0 0 287px !important;
  height:1123px !important;
  min-height:1123px !important;
  max-height:1123px !important;
  grid-column:auto !important;
  grid-area:auto !important;
}
.gray-black-bilingual-cv .gbb-center{
  order:2 !important;
  width:220px !important;
  flex:0 0 220px !important;
  height:1123px !important;
  min-height:1123px !important;
  max-height:1123px !important;
  grid-column:auto !important;
  grid-area:auto !important;
}
.gray-black-bilingual-cv .gbb-arabic{
  order:3 !important;
  width:287px !important;
  flex:0 0 287px !important;
  height:1123px !important;
  min-height:1123px !important;
  max-height:1123px !important;
  grid-column:auto !important;
  grid-area:auto !important;
  direction:rtl !important;
  text-align:right !important;
}
@media print{
  .gray-black-bilingual-cv,
  #cvPreview > .gray-black-bilingual-cv{
    display:flex !important;
    width:794px !important;
    height:1123px !important;
  }
}


/* v49.3 Safe Theme Overlay Engine
   Rules target only dynamic classes added to cvPreview. No inline styles, no export logic changes. */
.style-controls-panel{background:rgba(255,255,255,.96);border:1px solid #e5e7eb;color:#0f172a;box-shadow:0 18px 45px rgba(15,23,42,.08)}
.style-panel-head h2{font-size:18px;font-weight:800;margin:0;color:#111827;font-family:'Tajawal',sans-serif}.style-panel-head p{font-size:12px;color:#64748b;margin:3px 0 14px}.style-toggle{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;font-weight:800;cursor:pointer}.style-toggle input{width:18px;height:18px}.style-mini-note{font-size:11px;color:#64748b;margin:8px 2px 14px}.style-group{border-top:1px solid #e5e7eb;padding-top:14px;margin-top:14px;display:grid;gap:10px}.style-group h3{font-size:14px;font-weight:900;color:#0f172a;margin:0 0 2px}.style-group label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#334155}.style-group select,.style-group input[type="color"]{width:100%;height:38px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;padding:0 10px;font-size:13px}.style-check{grid-template-columns:auto 1fr auto!important;align-items:center}.style-check input[type="checkbox"]{width:16px;height:16px}.style-check input[type="color"]{width:46px;padding:3px}
@media (max-width:1024px){#editor>.max-w-7xl{grid-template-columns:1fr!important}.style-controls-panel{order:2}.editor-panel{order:1}#editor main{order:3}}

.cv-theme-scope.cv-theme-active{--cv-ar-heading-font:'Tajawal';--cv-ar-body-font:'Noto Sans Arabic';--cv-en-heading-font:'Inter';--cv-en-body-font:'Inter';--cv-heading-color:inherit;--cv-body-color:inherit;--cv-page-bg:transparent;--cv-accent-bg:transparent;--cv-divider-color:currentColor;--cv-title-bar-bg:#2563eb;--cv-title-bar-color:#fff}

/* v49 stable layout: keep original v41 editor geometry for PDF stability. */
#editor .editor-stable-layout{direction:rtl;}
#editor .editor-stable-layout > main{min-width:0;}
#editor .editor-stable-layout .editor-preview{display:flex;justify-content:center;align-items:flex-start;}
#editorAside{border-radius:22px;padding:18px!important;box-shadow:0 18px 40px rgba(15,23,42,.08)!important;}
#editorAside #formTitle{font-size:20px!important;line-height:1.25!important;}
#editorAside #backTemplatesBtn{padding:9px 12px!important;font-size:13px!important;border-radius:12px!important;}
#editorAside input,#editorAside textarea,#editorAside select{font-size:14px!important;border-radius:13px!important;}
#editorAside label{font-size:13px!important;}
#editorAside .btn{min-height:42px!important;border-radius:14px!important;}

/* v49 style panel is outside the export target and outside the editor grid flow. */
.style-controls-fixed{position:fixed;right:16px;top:82px;width:292px;max-height:calc(100vh - 104px);overflow:auto;z-index:60;}
@media (min-width:1280px){#editor{padding-right:310px;}}
@media (max-width:1279px){.style-controls-fixed{position:relative;right:auto;top:auto;width:auto;max-height:none;margin:16px auto 0;max-width:760px;}#editor{padding-right:0;}}

/* v49.3 theme targeting: CSS-only, class-based, no inline mutation. */
.cv-theme-scope.cv-theme-active.cv-use-ar-heading-font .cv-ar-heading{font-family:var(--cv-ar-heading-font),'Tajawal','Noto Sans Arabic',Arial,sans-serif!important;}
.cv-theme-scope.cv-theme-active.cv-use-ar-body-font .cv-ar-body{font-family:var(--cv-ar-body-font),'Noto Sans Arabic','Tajawal',Arial,sans-serif!important;}
.cv-theme-scope.cv-theme-active.cv-use-en-heading-font .cv-en-heading{font-family:var(--cv-en-heading-font),'Inter',Arial,sans-serif!important;}
.cv-theme-scope.cv-theme-active.cv-use-en-body-font .cv-en-body{font-family:var(--cv-en-body-font),'Inter',Arial,sans-serif!important;}
.cv-theme-scope.cv-theme-active.cv-use-heading-color .cv-heading-like{color:var(--cv-heading-color)!important;}
.cv-theme-scope.cv-theme-active.cv-use-body-color .cv-body-like{color:var(--cv-body-color)!important;}
.cv-theme-scope.cv-theme-active.cv-use-page-bg{background-color:var(--cv-page-bg)!important;}
.cv-theme-scope.cv-theme-active.cv-use-page-bg>div{background-color:var(--cv-page-bg)!important;}
.cv-theme-scope.cv-theme-active.cv-use-divider-color .cv-divider-like,
.cv-theme-scope.cv-theme-active.cv-use-divider-color hr{border-color:var(--cv-divider-color)!important;}
.cv-theme-scope.cv-theme-active.cv-use-accent-bg .cv-accent-like{background-color:var(--cv-accent-bg)!important;background:var(--cv-accent-bg)!important;}
.cv-theme-scope.cv-theme-active.cv-title-bars .cv-title-target{display:inline-block!important;background:var(--cv-title-bar-bg)!important;color:var(--cv-title-bar-color)!important;border-radius:10px!important;padding:4px 10px!important;border-color:transparent!important;line-height:1.32!important;}

/* Never allow the theme panel to change A4 dimensions. */
#cvPreview{width:794px;min-width:794px;max-width:794px;height:1123px;min-height:1123px;max-height:1123px;box-sizing:border-box;}
#cvPreview *{box-sizing:border-box;}

/* v49.1: restore print/export controls without changing theme engine or editor layout */
@media print {
  html, body { width:794px !important; height:1123px !important; margin:0 !important; padding:0 !important; background:#fff !important; overflow:hidden !important; }
  body * { visibility:hidden !important; }
  #editor, #editor.page { display:block !important; visibility:visible !important; margin:0 !important; padding:0 !important; background:#fff !important; }
  #editor > .max-w-7xl, #editor main, #editor .editor-preview { display:block !important; visibility:visible !important; transform:none !important; width:794px !important; height:1123px !important; margin:0 !important; padding:0 !important; overflow:visible !important; max-width:none !important; box-shadow:none !important; border:0 !important; background:#fff !important; }
  #templates, #styleControlsPanel, #editorAside, #wizardNav { display:none !important; }
  #cvPreview, #cvPreview * { visibility:visible !important; }
  #cvPreview { position:absolute !important; left:0 !important; top:0 !important; right:auto !important; bottom:auto !important; transform:none !important; width:794px !important; height:1123px !important; min-height:1123px !important; max-height:1123px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-shadow:none !important; }
}


/* v49.4: Theme export parity safety.
   Typography/color classes are applied only to direct-text leaf elements, not parent containers.
   This prevents html2canvas from reflowing whole cards differently from the live preview. */
.cv-theme-scope.cv-theme-active .cv-heading-like,
.cv-theme-scope.cv-theme-active .cv-body-like{max-width:100%;}

/* v49.6: numeric font and title bar controls - default 100% means no visual change */
.cv-theme-scope.cv-theme-active .cv-ar-heading{font-size:calc(1em * var(--cv-ar-heading-size, 1))!important;}
.cv-theme-scope.cv-theme-active .cv-ar-body{font-size:calc(1em * var(--cv-ar-body-size, 1))!important;}
.cv-theme-scope.cv-theme-active .cv-en-heading{font-size:calc(1em * var(--cv-en-heading-size, 1))!important;}
.cv-theme-scope.cv-theme-active .cv-en-body{font-size:calc(1em * var(--cv-en-body-size, 1))!important;}
.cv-theme-scope.cv-theme-active.cv-title-bars .cv-title-target{
  padding-block:calc(4px * var(--cv-title-bar-size, 1))!important;
  padding-inline:calc(10px * var(--cv-title-bar-size, 1))!important;
}

/* v49.6 personal extra fields compact fix */
.cv-extra-editor{margin-top:.5rem!important;background:rgba(255,255,255,.75)!important}
.cv-extra-editor summary{list-style:none}
.cv-extra-editor summary::-webkit-details-marker{display:none}
.cv-extra-compact-input{min-height:38px!important;height:38px!important;padding:.35rem .55rem!important;border-radius:.75rem!important;font-size:13px!important}
@media (max-width: 640px){
  .cv-extra-editor{padding:.65rem!important}
  .cv-extra-compact-input{height:36px!important;min-height:36px!important;font-size:12px!important}
}
.cv-personal-extra-auto{break-inside:avoid;page-break-inside:avoid}

/* v49.6: personal extra fields participate in Theme Overlay as body text, never as title bars */
.cv-theme-scope.cv-theme-active .cv-personal-extra-auto{
  color:var(--cv-body-color, inherit);
  font-size:calc(.58em * var(--cv-ar-body-size, 1));
}
.cv-theme-scope.cv-theme-active .cv-personal-extra-auto.cv-en-body{
  font-size:calc(.58em * var(--cv-en-body-size, 1));
}
.cv-theme-scope.cv-theme-active.cv-title-bars .cv-personal-extra-auto{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  display:block!important;
}


/* Single Renderer Export Review Alias: keep final review identical to live preview. */
#cvExportPreview{width:794px;min-width:794px;max-width:794px;height:1123px;min-height:1123px;max-height:1123px;box-sizing:border-box;background:#fff;overflow:hidden;}
#cvExportPreview *{box-sizing:border-box;}
#cvExportPreview [dir="rtl"] ul,
#cvExportPreview [lang="ar"] ul,
#cvExportPreview .cv-main.rtl ul{list-style:none!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;text-align:right!important;direction:rtl!important;}
#cvExportPreview [dir="rtl"] li,
#cvExportPreview [lang="ar"] li,
#cvExportPreview .cv-main.rtl li{list-style:none!important;display:block!important;position:relative!important;padding-right:1.05em!important;padding-left:0!important;margin-right:0!important;margin-left:0!important;text-align:right!important;direction:rtl!important;unicode-bidi:plaintext!important;}
#cvExportPreview [dir="rtl"] li::before,
#cvExportPreview [lang="ar"] li::before,
#cvExportPreview .cv-main.rtl li::before{content:"•";position:absolute;right:0;left:auto;top:0;color:currentColor;font-weight:900;}
#cvExportPreview [dir="rtl"] li::marker,
#cvExportPreview [lang="ar"] li::marker,
#cvExportPreview .cv-main.rtl li::marker{content:""!important;}
#cvExportPreview > .gray-black-bilingual-cv{direction:ltr!important;grid-template-areas:"gbb-en gbb-center gbb-ar"!important;}

/* v56 targeted fix: Arabic RTL alignment for the three current bilingual yellow templates only.
   Scope is intentionally limited to .bilingual-yellow-optimized so PDF/Print single renderer
   and other templates are not affected. */
.bilingual-yellow-optimized [dir="rtl"],
.bilingual-yellow-optimized [dir="rtl"] *{
  direction: rtl !important;
  unicode-bidi: plaintext !important;
}
.bilingual-yellow-optimized [dir="rtl"]{
  text-align: right !important;
}
.bilingual-yellow-optimized [dir="rtl"] p,
.bilingual-yellow-optimized [dir="rtl"] h1,
.bilingual-yellow-optimized [dir="rtl"] h2,
.bilingual-yellow-optimized [dir="rtl"] h3,
.bilingual-yellow-optimized [dir="rtl"] div,
.bilingual-yellow-optimized [dir="rtl"] span{
  text-align: right !important;
}
.bilingual-yellow-optimized [dir="rtl"] ul{
  direction: rtl !important;
  text-align: right !important;
  padding-right: 12px !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  list-style-position: outside !important;
}
.bilingual-yellow-optimized [dir="rtl"] li{
  direction: rtl !important;
  text-align: right !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.bilingual-yellow-optimized [dir="rtl"] section > div:first-child{
  justify-content: flex-end !important;
  direction: rtl !important;
  text-align: right !important;
}
.bilingual-yellow-optimized [dir="rtl"] section > div:first-child > div{
  direction: rtl !important;
  text-align: right !important;
  flex-direction: row !important;
}
@media print{
  .bilingual-yellow-optimized [dir="rtl"],
  .bilingual-yellow-optimized [dir="rtl"] *{
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
  }
}

/* v56 input personal info restructure: compact, fixed-width friendly, does not affect preview/export */
.cv-extra-editor-primary{border-color:#dbeafe!important;background:#fff!important;box-shadow:0 6px 16px rgba(15,23,42,.045)!important;max-width:100%;overflow:hidden;}
.cv-extra-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:#0f172a;font-weight:900;font-size:14px;}
.cv-extra-title-row span{color:#2563eb;font-size:16px;line-height:1;}
.cv-extra-editor-primary .cv-extra-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
.cv-extra-editor-primary .cv-personal-field{display:block;min-width:0;font-size:11px;font-weight:900;color:#0f172a;}
.cv-extra-editor-primary .cv-personal-field span{display:flex;align-items:center;gap:5px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-extra-editor-primary .cv-personal-field-icon{color:#2563eb;font-size:12px;font-weight:900;line-height:1;}
.cv-extra-editor-primary .cv-extra-compact-input{height:34px!important;min-height:34px!important;padding:6px 8px!important;font-size:12px!important;border-radius:10px!important;}
@media(max-width:640px){.cv-extra-editor-primary .cv-extra-grid{grid-template-columns:1fr!important;}}

/* v56.2 stronger RTL fix for all six bilingual yellow-derived templates:
   Arabic purple badges and Arabic Personal Info rows must start from the right. */
.bilingual-yellow-optimized .cv-rtl-section-label{
  direction: rtl !important;
  justify-content: flex-start !important;
  text-align: right !important;
}
.bilingual-yellow-optimized .cv-rtl-section-label > div{
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: right !important;
}
.bilingual-yellow-optimized .cv-rtl-section-label > div > span:first-child{
  order: 0 !important;
  text-align: center !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
.bilingual-yellow-optimized .cv-rtl-section-label > div > span:last-child{
  order: 1 !important;
  text-align: right !important;
  direction: rtl !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row{
  direction: ltr !important;
  text-align: right !important;
  grid-template-columns: minmax(0,1fr) auto !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row strong{
  grid-column: 2 !important;
  text-align: right !important;
  direction: rtl !important;
  justify-self: end !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row span{
  grid-column: 1 !important;
  text-align: right !important;
  direction: rtl !important;
  justify-self: end !important;
}
@media print{
  .bilingual-yellow-optimized .cv-rtl-section-label,
  .bilingual-yellow-optimized .cv-rtl-section-label > div,
  .bilingual-yellow-optimized .cv-rtl-personal-row{
    direction: rtl !important;
    text-align: right !important;
  }
  .bilingual-yellow-optimized .cv-rtl-personal-row{
    direction: ltr !important;
  }
}


/* FIX bilingual yellow templates Arabic headers pinned to far right */
.ar-section-title,
.section-title-ar,
.bilingual-ar-title{
 direction:rtl !important;
 text-align:right !important;
 display:flex !important;
 flex-direction:row-reverse !important;
 justify-content:flex-start !important;
 margin-left:auto !important;
 margin-right:0 !important;
 position:relative;
 right:0 !important;
 float:right !important;
}
.ar-section-title i,
.section-title-ar i,
.bilingual-ar-title i{
 order:-1;
 margin-left:0 !important;
 margin-right:6px !important;
}
.ar-personal-info,
.ar-personal-info *{
 direction:rtl !important;
 text-align:right !important;
}

/* v56.3 FINAL: Arabic bilingual-yellow labels pinned at the far RIGHT, icon on the right edge */
.bilingual-yellow-optimized .cv-rtl-section-label{
  direction:ltr !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  text-align:right !important;
  width:100% !important;
}
.bilingual-yellow-optimized .cv-rtl-section-label > div{
  direction:rtl !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
}
.bilingual-yellow-optimized .cv-rtl-section-label > div > span:first-child{
  order:0 !important;
  flex:0 0 auto !important;
  margin-left:2px !important;
  margin-right:0 !important;
}
.bilingual-yellow-optimized .cv-rtl-section-label > div > span:last-child{
  order:1 !important;
  white-space:nowrap !important;
  text-align:right !important;
}
@media print{
  .bilingual-yellow-optimized .cv-rtl-section-label{direction:ltr !important;justify-content:flex-end !important;}
  .bilingual-yellow-optimized .cv-rtl-section-label > div{direction:rtl !important;flex-direction:row !important;margin-left:auto !important;margin-right:0 !important;}
}

/* v56.4 FINAL: Arabic personal-info rows in the six bilingual templates.
   Keep the personal-info icon pinned to the far right, then the Arabic label,
   then the value toward the left side of the same RTL row. */
.bilingual-yellow-optimized .cv-rtl-personal-list{
  direction: rtl !important;
  text-align: right !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row{
  direction: rtl !important;
  text-align: right !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto 14px !important;
  column-gap: 7px !important;
  align-items: start !important;
  width: 100% !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row .cv-rtl-personal-icon{
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: center !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row .cv-rtl-personal-label{
  grid-column: 2 !important;
  justify-self: end !important;
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  white-space: nowrap !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row .cv-rtl-personal-value{
  grid-column: 1 !important;
  justify-self: end !important;
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext !important;
}
@media print{
  .bilingual-yellow-optimized .cv-rtl-personal-row{
    grid-template-columns: minmax(0,1fr) auto 14px !important;
  }
}

/* v56.5 FINAL FIX: Arabic personal-info topic rows must start from the FAR RIGHT.
   Visual order: [icon] [Arabic label] [Arabic value] from right to left. */
.bilingual-yellow-optimized .cv-rtl-personal-list{
  direction: rtl !important;
  text-align: right !important;
  justify-items: stretch !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row{
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 7px !important;
  width: 100% !important;
  direction: rtl !important;
  text-align: right !important;
  grid-template-columns: none !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row .cv-rtl-personal-icon{
  order: 0 !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  margin: 0 !important;
  text-align: center !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  justify-self: auto !important;
  grid-column: auto !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row .cv-rtl-personal-label{
  order: 1 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  text-align: right !important;
  direction: rtl !important;
  justify-self: auto !important;
  grid-column: auto !important;
}
.bilingual-yellow-optimized .cv-rtl-personal-row .cv-rtl-personal-value{
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: right !important;
  direction: rtl !important;
  justify-self: auto !important;
  grid-column: auto !important;
  word-break: break-word !important;
}
@media print{
  .bilingual-yellow-optimized .cv-rtl-personal-row{
    display:flex !important;
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
    grid-template-columns:none !important;
  }
}

/* v56.6 TRUE RTL: Arabic content rows in six bilingual templates start from far right */
.bilingual-yellow-optimized [dir="rtl"],
.bilingual-yellow-optimized [style*="direction:rtl"]{
  text-align:right;
}
.bilingual-yellow-optimized .cv-ar-force-row,
.bilingual-yellow-optimized .cv-rtl-personal-row.cv-ar-force-row{
  display:flex!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  align-items:baseline!important;
  gap:7px!important;
  direction:rtl!important;
  text-align:right!important;
  width:100%!important;
  grid-template-columns:none!important;
}
.bilingual-yellow-optimized .cv-ar-force-row .cv-rtl-personal-icon{
  order:0!important;
  flex:0 0 14px!important;
  width:14px!important;
  min-width:14px!important;
  text-align:center!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  grid-column:auto!important;
}
.bilingual-yellow-optimized .cv-ar-force-row .cv-rtl-personal-label{
  order:1!important;
  flex:0 0 auto!important;
  text-align:right!important;
  direction:rtl!important;
  grid-column:auto!important;
}
.bilingual-yellow-optimized .cv-ar-force-row .cv-rtl-personal-value{
  order:2!important;
  flex:1 1 auto!important;
  min-width:0!important;
  text-align:right!important;
  direction:rtl!important;
  grid-column:auto!important;
}
.bilingual-yellow-optimized .cv-ar-force-topic-row{
  display:flex!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  direction:rtl!important;
  text-align:right!important;
  width:100%!important;
}
.bilingual-yellow-optimized .cv-ar-force-topic-row h3,
.bilingual-yellow-optimized .cv-ar-force-topic-row p,
.bilingual-yellow-optimized .cv-ar-force-topic-row ul,
.bilingual-yellow-optimized .cv-ar-force-topic-row li{
  direction:rtl!important;
  text-align:right!important;
}
.bilingual-yellow-optimized .cv-ar-force-topic-row ul{
  padding-right:12px!important;
  padding-left:0!important;
  list-style-position:outside!important;
}

/* v56 gallery visibility fix for exact Arabic/English/Bilingual templates */
.ts-priority-section{border:2px solid rgba(14,165,233,.35);border-radius:24px;padding:14px;background:linear-gradient(180deg,rgba(14,165,233,.08),rgba(255,255,255,.02));margin-bottom:24px}
.ts-priority-section .ts-section-title span:first-child::before{content:'★ ';color:#0ea5e9}

/* =========================================================
   TOPSUPPLIES_TEMPLATE_GALLERY_3COL_PRO_UI_V2
   Scope: #templates only.
   Safe: visual template gallery only.
   Does NOT affect editor, #cvPreview, .a4 export, PDF, Word, or template data.
   ========================================================= */

#templates .ts-section {
  border-radius: 28px !important;
  border: 1px solid #e8eef6 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .06) !important;
  overflow: hidden !important;
}

#templates .ts-section-head {
  padding: 22px 28px !important;
  border-bottom: 1px solid #edf2f7 !important;
  background: linear-gradient(90deg, #ffffff, #f9fafb) !important;
}

#templates .ts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  padding: 30px !important;
  align-items: stretch !important;
}

#templates .ts-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 650px !important;
  padding: 18px !important;
  border-radius: 26px !important;
  border: 1px solid #e5edf6 !important;
  background: #ffffff !important;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, .075),
    0 2px 8px rgba(15, 23, 42, .035) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

#templates .ts-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(249, 115, 22, .55) !important;
  box-shadow:
    0 26px 70px rgba(15, 23, 42, .12),
    0 10px 25px rgba(249, 115, 22, .10) !important;
}

#templates .ts-preview {
  height: 455px !important;
  min-height: 455px !important;
  padding: 18px 16px 0 !important;
  border-radius: 22px !important;
  border: 1px solid #e7edf5 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(249,115,22,.08), transparent 36%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#templates .ts-preview > .preview-scale {
  transform: scale(.395) !important;
  transform-origin: top center !important;
  margin-top: 0 !important;
}

#templates .ts-preview > .preview-scale .a4 {
  box-shadow:
    0 18px 38px rgba(15, 23, 42, .18),
    0 2px 8px rgba(15, 23, 42, .08) !important;
  border-radius: 4px !important;
}

#templates .ts-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 18px !important;
  text-align: center !important;
}

#templates .ts-card-title {
  color: #101828 !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
  font-weight: 950 !important;
  letter-spacing: -.25px !important;
  text-align: center !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#templates .ts-card-desc {
  color: #667085 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  font-weight: 700 !important;
  text-align: center !important;
  min-height: 58px !important;
  margin: 0 !important;
}

#templates .ts-lang-pill {
  align-self: center !important;
  margin: 2px auto 8px !important;
  padding: 7px 15px !important;
  border-radius: 999px !important;
  background: #eafaf0 !important;
  color: #15803d !important;
  border: 1px solid #cef3dc !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#templates .ts-select {
  margin-top: auto !important;
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
  box-shadow: 0 14px 28px rgba(249, 115, 22, .22) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

#templates .ts-select:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(249, 115, 22, .30) !important;
}

@media (max-width: 1180px) {
  #templates .ts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #templates .ts-card {
    min-height: 620px !important;
  }
}

@media (max-width: 680px) {
  #templates .ts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 16px !important;
  }

  #templates .ts-card {
    min-height: auto !important;
    border-radius: 22px !important;
  }

  #templates .ts-preview {
    height: 340px !important;
    min-height: 340px !important;
  }

  #templates .ts-preview > .preview-scale {
    transform: scale(.30) !important;
  }

  #templates .ts-card-title {
    font-size: 20px !important;
    min-height: auto !important;
  }
}


/* =========================================================
   TOPSUPPLIES_CV_TEMPLATE_TOP_LINKS_STYLE_V1
   Scope: templates page top navigation links only.
   ========================================================= */

#templates .ts-top-links-bar {
  max-width: 1280px !important;
  margin: 18px auto 0 !important;
  padding: 14px !important;
  border: 1px solid #e8eef6 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  box-shadow:
    0 14px 38px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#templates .ts-top-link {
  min-width: 170px !important;
  height: 48px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid #e5edf6 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  text-decoration: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease !important;
}

#templates .ts-top-link:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(249, 115, 22, .45) !important;
  color: #ea580c !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, .08),
    0 8px 20px rgba(249, 115, 22, .10) !important;
}

#templates .ts-top-link-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: #fff7ed !important;
  color: #f97316 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#templates .ts-store-link {
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
}

#templates .ts-drafts-link {
  background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
}

#templates .ts-account-link {
  background: linear-gradient(135deg, #f0fdf4, #ffffff) !important;
}

@media (max-width: 680px) {
  #templates .ts-top-links-bar {
    margin-top: 12px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  #templates .ts-top-link {
    width: 100% !important;
    min-width: 0 !important;
  }
}