:root {
  --ink: #071f36;
  --muted: #6f6a63;
  --paper: #fffef9;
  --canvas: #f6f2e9;
  --brand: #071f36;
  --brand-2: #c38a24;
  --line: #d8c9ad;
  --soft: #faf7f0;
  --danger: #b60018;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Cairo", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar { display:none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--brand); font: 700 24px "Cairo"; }
.brand strong, .brand small { display: block; line-height: 1.25; }
.brand small { color: var(--muted); font: 500 11px "Libre Franklin", sans-serif; letter-spacing: .06em; }
.top-actions { display: flex; gap: 8px; }
.btn { min-height: 42px; border-radius: 10px; border: 1px solid transparent; padding: 0 18px; font-weight: 700; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { color: white; background: var(--brand); box-shadow: 0 8px 22px rgba(18,60,53,.16); }
.btn.ghost { color: var(--brand); background: white; border-color: var(--line); }
.btn.text { background: transparent; color: var(--danger); }
.btn.wide { width: 100%; }

.app-shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(380px, 470px) 1fr; direction: ltr; }
.form-panel { position: relative; height: calc(100vh - 72px); overflow-y: auto; padding: 28px 28px 110px; background: white; border-right: 1px solid var(--line); direction: rtl; }
.form-heading { margin-bottom: 28px; }
.eyebrow { margin: 0 0 6px; color: var(--brand-2); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.form-heading h1 { margin: 0 0 8px; font-size: 25px; line-height: 1.35; }
.form-heading p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.form-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #edf0ed; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.section-title span { color: var(--brand-2); font: 700 11px "Libre Franklin"; }
.section-title h2 { margin: 0; font-size: 15px; }
.fields { display: grid; gap: 10px; }
.fields.two { grid-template-columns: 1fr 1fr; }
.span-2 { grid-column: 1 / -1; }
label { display: grid; gap: 5px; color: #4c5a56; font-size: 11px; font-weight: 700; }
input, select, textarea { width: 100%; height: 41px; border: 1px solid #d9dfdc; border-radius: 8px; padding: 0 11px; color: var(--ink); background: #fff; outline: none; font-size: 12px; font-weight: 500; }
textarea { min-height: 76px; resize: vertical; padding-top: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(183,146,82,.12); }
.language-card { display: grid; gap: 9px; margin-bottom: 10px; padding: 13px; border-radius: 12px; border: 1px solid var(--line); }
.arabic-card { background: #fbfaf5; border-right: 3px solid var(--brand-2); }
.english-card { background: #f4f8f7; border-left: 3px solid var(--brand); font-family: "Libre Franklin", sans-serif; }
.language-tag { width: max-content; padding: 3px 8px; border-radius: 999px; color: var(--brand); background: white; border: 1px solid var(--line); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.compact { margin-top: 10px; }
.upload-field { padding: 14px; border: 1px dashed #bbc7c2; border-radius: 10px; background: var(--soft); }
.upload-field input { height: auto; border: 0; padding: 0; background: transparent; }
.upload-field span { color: var(--muted); font-weight: 500; }
.sticky-actions { position: sticky; bottom: -110px; z-index: 4; display: grid; gap: 3px; margin: 24px -28px -110px; padding: 14px 28px 20px; background: linear-gradient(180deg, rgba(255,255,255,.7), #fff 24%); }

.preview-panel { min-width: 0; padding: 24px; direction: rtl; }
.preview-toolbar { max-width: 1100px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.preview-toolbar strong, .preview-toolbar span { display: block; }
.preview-toolbar strong { font-size: 14px; }
.preview-toolbar div > span { color: var(--muted); font-size: 11px; }
.status-badge { padding: 7px 11px; border-radius: 999px; color: var(--brand); background: #dceae6; font-size: 10px; font-weight: 800; }
.pages { max-width: 1100px; margin: auto; display: grid; gap: 24px; }
.contract-page { position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; background: var(--paper); box-shadow: 0 12px 36px rgba(18, 40, 35, .12); border: 1px solid #d7dbd7; }
.page-frame { position: absolute; inset: 3.5%; border: 1px solid #9d895e; padding: 2.5%; display: grid; grid-template-rows: auto 1fr auto; }
.page-header { min-height: 7.5%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 1.6%; border-bottom: 1px solid #bba87b; }
.page-logo { width: 46px; height: 46px; object-fit: contain; justify-self: start; }
.page-logo.placeholder { display: grid; place-items: center; border: 1px solid #bba87b; border-radius: 50%; color: var(--brand); font-weight: 800; }
.page-title { text-align: center; }
.page-title strong { display: block; font-size: clamp(10px, 1.2vw, 16px); }
.page-title span { display: block; font: 600 clamp(7px, .75vw, 10px) "Libre Franklin", sans-serif; color: #6e716d; }
.contract-no { direction: ltr; justify-self: end; color: #6e716d; font: 600 clamp(7px, .72vw, 10px) "Libre Franklin", sans-serif; }
.bilingual-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; direction: ltr; }
.contract-column { min-width: 0; padding: 4.2% 4.4% 2%; overflow: hidden; }
.contract-column.en { border-right: 1px solid #cabd9f; direction: ltr; font-family: "Libre Franklin", sans-serif; }
.contract-column.ar { direction: rtl; font-family: "Cairo", sans-serif; }
.contract-column h2 { margin: 0 0 3.2%; color: var(--brand); text-align: center; font-size: clamp(9px, 1vw, 13px); }
.contract-column h3 { margin: 3.5% 0 1.2%; color: #876b35; font-size: clamp(7px, .75vw, 10.5px); line-height: 1.45; }
.contract-column p, .contract-column li { margin: 0 0 2.1%; color: #263833; font-size: clamp(6.7px, .68vw, 9.2px); line-height: 1.58; text-align: justify; }
.contract-column ul { margin: 0; padding-inline-start: 16px; }
.opening-box { margin-bottom: 3.2%; padding: 3%; border: 1px solid #d7cfbc; background: #fbfaf5; }
.opening-box p:last-child { margin-bottom: 0; }
.key-value { display: grid; grid-template-columns: minmax(72px, .72fr) 1.5fr; gap: 5px; margin-bottom: 1.5%; font-size: clamp(6.7px, .68vw, 9.2px); }
.key-value b { color: #50605b; }
.signature { margin-top: 7%; display: grid; grid-template-columns: 1fr 1fr; gap: 9%; }
.signature-box { min-height: 76px; padding-top: 6px; border-top: 1px solid #9d895e; }
.signature-box b, .signature-box span { display: block; font-size: clamp(7px, .7vw, 9.5px); }
.signature-box span { margin-top: 9px; color: #6b7471; }
.page-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 1.4%; border-top: 1px solid #bba87b; color: #747b78; font-size: clamp(6px, .63vw, 8.5px); }
.page-footer span:nth-child(2) { font-weight: 800; color: var(--brand); }
.page-footer span:last-child { direction: ltr; text-align: right; font-family: "Libre Franklin", sans-serif; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; padding: 11px 18px; border-radius: 9px; color: white; background: #163b34; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 12px; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Retained visual identity from the previous generator */
.legacy-header { background: #fbfaf6; box-shadow: 0 4px 18px rgba(0,0,0,.10); }
.navy-bar, .cream-bar { display:flex; align-items:center; justify-content:space-between; padding-inline: max(8vw, 28px); }
.navy-bar { height: 61px; direction: rtl; background:#061d30; color:white; }
.cream-bar { height: 76px; direction: rtl; border-bottom: 4px double #aa0016; }
.legacy-brand, .tool-identity { display:flex; align-items:center; gap:12px; }
.legacy-brand strong, .legacy-brand small, .tool-identity strong, .tool-identity small { display:block; }
.legacy-brand strong { font-size:14px; }
.legacy-brand small, .tool-identity small { opacity:.72; font-size:9px; }
.tool-identity strong { font:700 19px "Amiri", serif; }
.legacy-logo { position:relative; width:45px; height:45px; display:grid; place-items:center; overflow:hidden; border:1px solid #d59e32; border-radius:50%; color:#e8b548; background:#020d16; font:800 12px "Libre Franklin"; box-shadow: inset 0 0 0 3px #071f36; }
.legacy-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.legacy-logo.light { width:52px; height:52px; }
.tools-link { padding:10px 22px; border:1px solid #d59e32; border-radius:999px; color:#f1b940; text-decoration:none; font-size:12px; font-weight:800; }
.cream-bar nav { display:flex; align-items:center; gap:35px; direction:rtl; }
.cream-bar nav a, .cream-bar nav button { border:0; color:#66656a; background:transparent; text-decoration:none; font-size:12px; }

.legacy-hero { min-height:500px; display:grid; grid-template-columns:1.08fr .92fr; gap:8%; align-items:center; padding:62px max(8vw, 40px) 68px; direction:rtl; background:radial-gradient(circle at 65% 25%, #fffef9 0, #f7f3ea 55%, #f0ede5 100%); border-bottom:1px solid #c89534; }
.hero-copy { text-align:center; }
.public-badge { display:inline-block; padding:4px 14px; border:1px solid #caa464; border-radius:3px; color:#8d5d12; font-size:11px; }
.hero-copy h1 { max-width:720px; margin:18px auto 20px; color:#071f36; font:700 clamp(38px,4.4vw,64px)/1.35 "Amiri",serif; }
.hero-copy h1 em { color:#b50018; font-style:normal; }
.hero-copy > p { max-width:680px; margin:auto; color:#575b64; font-size:15px; line-height:2; }
.hero-language-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hero-language-actions button { min-height:44px; padding:8px 18px; border:1px solid #b50018; border-radius:4px; color:#fff; background:#b50018; font-size:12px; font-weight:800; }
.hero-language-actions button + button { border-color:#071f36; background:#071f36; }
.hero-language-actions button:hover, .hero-language-actions button:focus-visible { outline:2px solid #c89534; outline-offset:2px; }
.hero-points { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:24px; color:#8c0015; font-size:11px; }
.hero-contract { position:relative; width:min(500px,100%); margin:auto; transform:rotate(.6deg); }
.paper-mock { min-height:335px; padding:28px 35px; border:1px solid #cbbda4; background:white; box-shadow:0 14px 30px rgba(28,25,18,.09); text-align:center; }
.paper-mock i { display:block; height:4px; margin-bottom:16px; border-top:2px solid #b40019; border-bottom:1px solid #c59636; }
.paper-mock h2 { margin:0; font:700 22px "Amiri",serif; }
.paper-mock small { color:#7f7980; }
.paper-mock p { margin:16px 0 0; color:#707078; font:400 12px "Amiri",serif; }
.paper-mock b { position:absolute; bottom:32px; left:34px; width:64px; height:64px; display:grid; place-items:center; border:2px solid #c6293b; border-radius:50%; color:#c6293b; font-size:25px; }
.law-stamp { position:absolute; z-index:2; top:-16px; right:-12px; padding:5px 10px; color:white; background:#b50018; border:3px double white; outline:1px solid #b50018; font-size:11px; font-weight:800; transform:rotate(-4deg); }
.end-note { position:absolute; right:18px; bottom:-12px; padding:5px 9px; color:#a90016; background:#fffdf7; border:1px solid #cfba91; font-size:10px; }
.legacy-ribbon { margin-top:0; padding:14px 20px; color:white; background:#b50018; border-top:3px solid #c89b3c; border-bottom:3px double #b50018; text-align:center; font-size:13px; font-weight:800; }

.app-shell { display:block; min-height:auto; padding:34px max(8vw, 28px) 60px; direction:rtl; background:#faf8f2; }
.form-panel { width:100%; height:auto; overflow:visible; padding:0; border:0; background:transparent; }
.form-heading { text-align:center; margin-bottom:28px; }
.form-heading:before, .form-heading:after { content:""; display:inline-block; width:24%; height:2px; margin:0 18px 6px; background:linear-gradient(90deg,#c49a4a,#b40019); }
.form-heading .eyebrow { display:inline-block; color:#071f36; font:700 24px "Amiri",serif; }
.form-heading h1 { font:700 27px "Amiri",serif; }
.form-heading p:last-child { max-width:760px; margin-inline:auto; }
#contractForm { display:grid; gap:24px; }
.form-section { margin:0; padding:26px; border:1px solid #d6c5a7; border-top:5px double #b50018; border-radius:0 0 3px 3px; background:#fffdfa; box-shadow:0 5px 20px rgba(68,50,20,.04); }
.form-section:has(.language-card) { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-section:has(.language-card) .section-title, .form-section:has(.language-card) .fields { grid-column:1/-1; }
.section-title { border-bottom:1px solid #ddccb0; padding-bottom:10px; }
.section-title span { width:32px; height:32px; display:grid; place-items:center; border:1px solid #c92a3c; border-radius:50%; color:#b50018; }
.section-title h2 { font:700 22px "Amiri",serif; }
.fields.two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
label { color:#13273b; font-size:12px; }
input, select, textarea { height:45px; border-color:#ddd1bc; border-radius:5px; background:#fff; }
input:focus, select:focus, textarea:focus { border-color:#b50018; box-shadow:0 0 0 3px rgba(181,0,24,.07); }
.language-card { margin:0; padding:18px; border-radius:3px; }
.arabic-card { background:#fffdf9; border:1px solid #d9c7a7; border-right:4px solid #b50018; }
.english-card { background:#fafbfd; border:1px solid #c9d0d7; border-left:4px solid #071f36; }
.language-tag { color:#071f36; border-color:#d6c5a7; border-radius:2px; }
.sticky-actions { position:static; grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:4px 0 0; padding:18px; border:1px solid #d6c5a7; background:#f4efe5; }
.clause-editor { margin-top:24px; padding:24px; border:1px solid #d6c5a7; border-top:5px double #b50018; background:#fffdfa; }
.clause-editor[hidden] { display:none; }
.clause-editor > p { color:var(--muted); font-size:12px; }
#clauseFields { display:grid; gap:14px; margin:20px 0; }
.clause-edit-card { padding:14px; border:1px solid #d6c5a7; background:#faf8f2; }
.clause-edit-card strong { display:block; margin-bottom:9px; font-size:13px; }
.clause-edit-card .edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.clause-edit-card textarea { min-height:110px; height:auto; padding:10px; line-height:1.7; }
.btn { border-radius:4px; }
.btn.primary { background:#071f36; }
.btn.print { color:white; background:#b50018; }
.btn.ghost { border-color:#c59a49; color:#8b5d12; background:#fffaf0; }
.btn.wide { width:auto; }
.preview-panel { padding:50px 0 0; }
.preview-toolbar { max-width:none; padding:18px 22px; border-top:5px double #b50018; border-inline:1px solid #d6c5a7; background:#fffdfa; }
.pages { max-width:1100px; }
.status-badge { color:#8b0013; background:#f7e7e8; }
.contract-page { background:#fffef9; border-color:#c9b486; }
.page-frame { border-color:#b28e46; }
.page-header, .page-footer { border-color:#b50018; }
.page-title strong, .contract-column h2 { color:#071f36; }
.contract-column h3 { color:#a70016; }
.checkbox-label { display:flex; align-items:center; gap:10px; }
.checkbox-label input { width:16px; height:16px; flex:none; }
.preview-panel { overflow-x:auto; }
.pages { width:794px; max-width:none; }
.contract-page { width:794px; height:1123px; aspect-ratio:auto; }
.page-frame { inset:28px; padding:16px; min-height:0; }
.page-header { min-height:58px; }
.contract-body { min-height:0; overflow:hidden; }
.content-row { break-inside:avoid; page-break-inside:avoid; }
.bilingual-row { display:grid; grid-template-columns:1fr 1fr; direction:ltr; }
.arabic-row { display:block; }
.content-row .contract-column { padding:1px 9px; overflow:visible; }
.bilingual-row .contract-column.en { border-right:1px solid #cabd9f; }
.arabic-row .contract-column.ar { padding-inline:24px; }
.content-row .contract-column h2 { margin:5px 0 3px; font-size:11px; }
.content-row .contract-column h3 { margin:3px 0 1px; font-size:8.7px; }
.content-row .contract-column p, .content-row .key-value { margin-bottom:2px; font-size:8px; line-height:1.38; }
.arabic-row .contract-column p, .arabic-row .key-value { font-size:10px; line-height:1.5; }
.content-row .opening-box { margin:3px 0; padding:6px; }
.content-row .signature { margin-top:15px; }
.page-footer { min-height:22px; }

@media (max-width: 900px) {
  .legacy-hero { grid-template-columns:1fr; padding-top:40px; }
  .hero-contract { width:min(520px,88%); }
  .form-section:has(.language-card) { grid-template-columns:1fr; }
  .form-section:has(.language-card) .section-title, .form-section:has(.language-card) .fields { grid-column:auto; }
  .sticky-actions { grid-template-columns:1fr 1fr; }
  .cream-bar nav a { display:none; }
}

@media (max-width: 560px) {
  .navy-bar, .cream-bar { padding-inline:14px; }
  .tools-link { padding:8px 10px; font-size:9px; }
  .legacy-brand small { display:none; }
  .legacy-hero { padding:36px 16px 54px; }
  .hero-copy h1 { font-size:38px; }
  .app-shell { padding-inline:12px; }
  .form-heading:before, .form-heading:after { display:none; }
  .fields.two, .sticky-actions, .clause-edit-card .edit-grid { grid-template-columns:1fr; }
  .btn.wide { width:100%; }
}

@media (max-width: 980px) {
  .preview-panel { padding-top: 30px; }
}
@media (max-width: 560px) {
  .preview-toolbar { align-items: flex-start; }
}

@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: white; }
  .topbar, .legacy-header, .legacy-hero, .legacy-ribbon, .form-panel, .preview-toolbar, .toast { display: none !important; }
  .app-shell, .preview-panel, .pages { display: block; padding: 0; margin: 0; max-width: none; }
  .contract-page { width: 210mm; height: 297mm; aspect-ratio: auto; border: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .contract-page:last-child { break-after: auto; page-break-after: auto; }
  .page-frame { inset: 7.4mm; padding: 4.2mm; }
  .page-logo { width: 12mm; height: 12mm; }
  .page-title strong { font-size: 11pt; }
  .page-title span, .contract-no { font-size: 7pt; }
  .contract-column { padding: 5mm 4.5mm 3mm; }
  .contract-column h2 { font-size: 9pt; }
  .contract-column h3 { font-size: 7.2pt; }
  .contract-column p, .contract-column li, .key-value { font-size: 7.3pt; line-height: 1.55; }
  .page-footer { font-size: 6.3pt; }
  .pages { width:210mm; }
  .contract-body { overflow:hidden; }
  .content-row .contract-column { padding:0.26mm 2.3mm; }
  .arabic-row .contract-column.ar { padding-inline:6mm; }
  .content-row .contract-column h2 { font-size:9pt; }
  .content-row .contract-column h3 { font-size:6.8pt; }
  .content-row .contract-column p, .content-row .key-value { font-size:6pt; line-height:1.38; }
  .arabic-row .contract-column p, .arabic-row .key-value { font-size:7.5pt; line-height:1.5; }
}