/* ========================================
   الخطوط المحلية الخاصة باستوديو الشهادات
   ======================================== */

@font-face {
  font-family: "Alyamama";
  src: url("./fonts/alyamama.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arabic Medium";
  src: url("./fonts/arabic-medium.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Interface Arabic";
  src: url("./fonts/interface.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Liftaswashfixed";
  src: url("./fonts/liftaswashfixed.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Milan Display";
  src: url("./fonts/milan-display.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
:root{
  --bg:#f4f6f8;--panel:#fff;--text:#172033;--muted:#738096;--line:#e7eaf0;
  --brand:#0f172a;--brand2:#334155;--radius:18px;--shadow:0 16px 45px rgba(15,23,42,.08)
}
html,body{margin:0;min-height:100%;font-family:"Tajawal",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-header{height:76px;padding:0 28px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:14px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.brand h1{font-size:17px;margin:0 0 2px}.brand p{font-size:12px;color:var(--muted);margin:0}.header-actions{display:flex;gap:8px}
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:700;transition:.2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}.btn.ghost{background:#fff;border:1px solid var(--line);color:#334155}.btn.primary{background:#b9872f;color:#fff}.btn.dark{background:#0f172a;color:#fff}.btn.small{padding:8px 11px;font-size:12px}.danger-text{color:#b42318!important}
.workspace{display:grid;grid-template-columns:390px minmax(0,1fr);min-height:calc(100vh - 76px)}
.editor{background:#fff;border-left:1px solid var(--line);padding:22px;overflow-y:auto;max-height:calc(100vh - 76px);position:sticky;top:76px}
.editor-intro>.eyebrow{display:block;font-size:12px;color:var(--muted);margin-bottom:10px;font-weight:700}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode-btn{display:flex;align-items:center;gap:9px;text-align:right;padding:11px;border:1px solid var(--line);background:#fff;border-radius:14px;color:#4b5563}.mode-btn.active{border-color:#cfa85e;background:#fffaf0;box-shadow:0 0 0 2px rgba(207,168,94,.12)}.mode-icon{font-size:22px}.mode-btn b{font-size:13px;display:block;color:#1f2937}.mode-btn small{display:block;color:#8a94a7;font-size:10px;margin-top:2px}
.editor-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:22px 0 18px;border-bottom:1px solid var(--line);padding-bottom:8px}.tab-btn{border:0;background:transparent;color:#7a8598;font-size:12px;font-weight:700;padding:9px 5px;border-radius:9px}.tab-btn.active{background:#f1f5f9;color:#111827}
.tab-panel{display:none}.tab-panel.active{display:block}.section-title{margin-bottom:16px}.section-title h2{font-size:16px;margin:0 0 4px}.section-title p{font-size:12px;margin:0;color:var(--muted);line-height:1.65}
.field{display:block;margin-bottom:13px}.field>span{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#556176}.field input,.field textarea,.field select,select{width:100%;border:1px solid #dfe4eb;border-radius:11px;background:#fff;padding:10px 12px;outline:none;color:#1f2937;transition:.2s}.field textarea{resize:vertical;line-height:1.7}.field input:focus,.field textarea:focus,.field select:focus,select:focus{border-color:#c29a51;box-shadow:0 0 0 3px rgba(194,154,81,.12)}
.field-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.upload-box{min-height:98px;border:1px dashed #cad1db;border-radius:13px;padding:11px 7px;display:grid;place-items:center;text-align:center;cursor:pointer;background:#fafbfc}.upload-box:hover{border-color:#b98e42;background:#fffaf0}.upload-icon{width:30px;height:30px;border-radius:50%;background:#eef2f6;display:grid;place-items:center;font-size:18px}.upload-box b{font-size:11px}.upload-box small{font-size:9px;color:#8b96a8}
.inline-actions{display:flex;justify-content:flex-end;margin-bottom:13px}
.upload-background{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:12px;border-radius:13px;cursor:pointer}.upload-background b{font-size:12px;display:block}.upload-background small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.upload-background>span{font-size:11px;background:#f1f5f9;border-radius:8px;padding:7px 9px}
.logo-control{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0 14px;background:#fafbfc}.logo-control-preview{width:105px;height:76px;background:#fff;border:1px solid #edf0f3;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:7px;flex:0 0 auto}.logo-control-preview img{max-width:100%;max-height:100%;object-fit:contain}.logo-control-copy{min-width:0}.logo-control-copy>b{display:block;font-size:12px;margin-bottom:3px}.logo-control-copy>small{display:block;font-size:10px;color:var(--muted);line-height:1.6}.logo-control-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.upload-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hidden{display:none!important}
.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.template-card{border:1px solid var(--line);background:#fff;border-radius:11px;padding:6px}.template-card.active{border-color:#c4994b;box-shadow:0 0 0 2px rgba(196,153,75,.12)}.template-card b{font-size:10px;color:#5a6679;display:block;margin-top:5px}.template-preview{height:42px;border-radius:7px;display:block;border:1px solid rgba(0,0,0,.06)}.template-preview.royal{background:linear-gradient(135deg,#fff 55%,#f2e6c7)}.template-preview.emerald{background:linear-gradient(135deg,#fff 50%,#dcefe7)}.template-preview.azure{background:linear-gradient(135deg,#fff 50%,#e0ecfb)}.template-preview.rose{background:linear-gradient(135deg,#fff 50%,#f9e5ed)}.template-preview.sand{background:linear-gradient(135deg,#fffdf7,#ead7b6)}.template-preview.minimal{background:#fff;border:2px solid #1f2937}.template-preview.midnight{background:linear-gradient(135deg,#0d1728,#21304c)}.template-preview.school{background:linear-gradient(135deg,#f5fbff,#e8f4ec)}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0}.color-field{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11px;font-weight:700}.color-field input{width:33px;height:28px;padding:0;border:0;background:transparent}
.range-group{margin:14px 0}.range-group label{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:#556176}.range-group output{color:#b07d25}.range-group input{width:100%;accent-color:#b9872f}
.toggle-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:12px;padding:11px;margin-top:15px}.toggle-row b{font-size:12px;display:block}.toggle-row small{font-size:10px;color:var(--muted)}.toggle-row input{width:18px;height:18px;accent-color:#b9872f}
.signature-editor{display:grid;grid-template-columns:28px 1fr 1.35fr;gap:8px;align-items:end;border-bottom:1px solid #f0f2f5;padding:9px 0}.sig-number{width:25px;height:25px;background:#f1f5f9;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800}.field.compact{margin:0}.field.compact input{padding:8px 9px;font-size:12px}
.help-card{margin-top:16px;padding:12px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}.help-card b{font-size:12px}.help-card p{font-size:11px;color:var(--muted);line-height:1.7;margin:4px 0 0}
.preview-area{padding:24px;min-width:0}.preview-toolbar{max-width:1180px;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:14px}.preview-toolbar>div:first-child b{font-size:14px;display:block}.preview-toolbar>div:first-child span{font-size:11px;color:var(--muted)}.toolbar-actions{display:flex;gap:7px;flex-wrap:wrap}
.certificate-stage{max-width:1180px;margin:0 auto;background:#e8ebef;border-radius:22px;min-height:calc(100vh - 160px);padding:24px;display:flex;align-items:center;justify-content:center;overflow:auto;box-shadow:inset 0 0 0 1px #dfe3e9}
.certificate{
  --title-color:#7a5514;--name-color:#0f172a;--text-color:#334155;--accent:#c89b3c;--font:"Tajawal",sans-serif;
  position:relative;width:1122px;height:793px;min-width:1122px;min-height:793px;background:#fff;overflow:hidden;font-family:var(--font);color:var(--text-color);box-shadow:0 18px 50px rgba(15,23,42,.16);isolation:isolate;
}
.certificate:before,.certificate:after{content:"";position:absolute;z-index:-1;pointer-events:none}.custom-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;z-index:-4;opacity:1}.inner-frame{position:absolute;inset:24px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);z-index:-1;pointer-events:none}.inner-frame:before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.corner{position:absolute;width:90px;height:90px;z-index:-1;opacity:.9}.corner:before,.corner:after{content:"";position:absolute;background:var(--accent)}.corner:before{width:70px;height:2px}.corner:after{width:2px;height:70px}.corner-1{top:31px;right:31px}.corner-1:before,.corner-1:after{top:0;right:0}.corner-2{top:31px;left:31px;transform:scaleX(-1)}.corner-2:before,.corner-2:after{top:0;right:0}.corner-3{bottom:31px;right:31px;transform:scaleY(-1)}.corner-3:before,.corner-3:after{top:0;right:0}.corner-4{bottom:31px;left:31px;transform:scale(-1)}.corner-4:before,.corner-4:after{top:0;right:0}
.cert-header{height:182px;padding:31px 72px 10px;position:relative}.certificate-logo{position:absolute;left:68px;top:34px;width:175px;height:105px;display:flex;align-items:flex-start;justify-content:flex-start}.certificate-logo img{max-width:100%;max-height:100%;object-fit:contain}.institution{position:absolute;right:72px;top:34px;text-align:right;direction:rtl;padding-top:0;max-width:560px}.institution div{font-size:15px;line-height:1.65;min-height:24px;color:var(--text-color);font-weight:700;opacity:1}.institution .fixed-identity-line{font-weight:700}
.cert-content{text-align:center;padding:0 125px}.ornament-line{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--accent);margin:3px auto 10px}.ornament-line span{width:70px;height:1px;background:var(--accent);opacity:.7}.ornament-line i{font-style:normal;font-size:15px}
.cert-content h2{font-size:32px;
  color:var(--title-color);
  margin:0 0 13px;
  font-weight:800;
  }
  .cert-content .intro{font-size:17px;margin:0 0 5px;line-height:1.8}.cert-content h3{font-size:35px;color:var(--name-color);font-weight:800;margin:4px 0 8px;line-height:1.45}.occasion{display:inline-block!important;background:color-mix(in srgb,var(--accent) 12%,white);border:1px solid color-mix(in srgb,var(--accent) 35%,white);color:var(--title-color);border-radius:999px;padding:5px 19px;margin:0 0 10px;font-size:14px}.occasion.hidden{display:none!important}.body-copy{font-size:18px;line-height:2.05;margin:0 auto;max-width:840px;white-space:pre-line}.closing{font-size:14px;margin:11px 0 0;color:color-mix(in srgb,var(--text-color) 80%,white)}.date{font-size:12px;margin:8px 0 0;color:color-mix(in srgb,var(--text-color) 70%,white);min-height:18px}
.cert-footer{position:absolute;right:70px;left:70px;bottom:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:end}.signature{text-align:center;min-height:56px;display:flex;flex-direction:column;justify-content:flex-end}.signature .role{font-size:12px;color:color-mix(in srgb,var(--text-color) 72%,white);font-weight:700;min-height:18px}.signature .role:empty{display:none}.signature .person{font-size:13px;font-weight:800;color:var(--text-color);min-height:20px;margin-top:7px}.signature .role:empty + .person{margin-top:0}
.template-royal{background:linear-gradient(135deg,#fff 0%,#fffdf7 48%,#f4ead2 100%)}.template-royal:before{width:360px;height:360px;border-radius:50%;border:90px solid rgba(196,153,75,.08);left:-190px;top:-190px}.template-royal:after{width:280px;height:280px;border-radius:50%;border:55px solid rgba(196,153,75,.06);right:-150px;bottom:-160px}
.template-emerald{background:linear-gradient(135deg,#fff 0%,#f7fbf9 62%,#deeee7 100%)}.template-emerald:before{inset:0;background:radial-gradient(circle at 0 100%,rgba(14,116,84,.1),transparent 31%),radial-gradient(circle at 100% 0,rgba(14,116,84,.08),transparent 30%)}.template-azure{background:linear-gradient(135deg,#fff 0%,#f6faff 62%,#dceafa 100%)}.template-azure:before{width:420px;height:420px;right:-250px;top:-280px;border-radius:40%;background:rgba(39,105,173,.08);transform:rotate(34deg)}.template-azure:after{width:420px;height:420px;left:-270px;bottom:-300px;border-radius:40%;background:rgba(39,105,173,.06);transform:rotate(34deg)}
.template-rose{background:linear-gradient(135deg,#fff 0%,#fff9fb 58%,#f7e5ec 100%)}.template-rose:before{width:260px;height:520px;left:-120px;top:120px;background:rgba(175,69,111,.055);transform:rotate(32deg);border-radius:50%}.template-sand{background:linear-gradient(135deg,#fffef9,#f7f0df 100%)}.template-sand:before{inset:0;background:repeating-linear-gradient(45deg,transparent 0 18px,rgba(155,112,49,.025) 18px 19px)}.template-minimal{background:#fff}.template-minimal:before{inset:13px;border:5px solid var(--accent);background:transparent}.template-minimal:after{inset:24px;border:1px solid color-mix(in srgb,var(--accent) 35%,white);background:transparent}
.template-midnight{background:linear-gradient(135deg,#0d1728,#172642 62%,#263650);--text-color:#edf2f7;--name-color:#fff;--title-color:#dfbb72}.template-midnight:before{inset:0;background:radial-gradient(circle at 15% 80%,rgba(223,187,114,.08),transparent 27%),radial-gradient(circle at 85% 15%,rgba(223,187,114,.07),transparent 26%)}.template-midnight .institution div,.template-midnight .signature .person{color:var(--text-color)}.template-school{background:linear-gradient(135deg,#fff,#f5fbf9 55%,#e8f2f9)}.template-school:before{width:100%;height:125px;bottom:0;background:linear-gradient(90deg,rgba(51,135,93,.07),rgba(50,113,167,.07));clip-path:polygon(0 55%,20% 28%,42% 58%,61% 20%,79% 52%,100% 22%,100% 100%,0 100%)}
.mobile-hint{display:none;text-align:center;color:var(--muted);font-size:11px;margin-top:8px}.toast{position:fixed;bottom:24px;left:24px;z-index:100;background:#0f172a;color:#fff;padding:11px 15px;border-radius:11px;box-shadow:var(--shadow);font-size:12px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}

@media(max-width:1100px){
  .workspace{grid-template-columns:345px minmax(0,1fr)}.editor{padding:18px}.preview-area{padding:16px}.certificate-stage{justify-content:flex-start}
}
@media(max-width:820px){
  .app-header{padding:0 14px;height:68px}.brand h1{font-size:14px}.brand p{display:none}.brand-mark{width:37px;height:37px}.header-actions .btn{padding:8px 9px;font-size:11px}
  .workspace{display:block}.editor{position:relative;top:0;max-height:none;border-left:0;border-bottom:1px solid var(--line)}.preview-area{padding:12px}.preview-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1;padding:9px 8px;font-size:11px}.certificate-stage{min-height:auto;padding:12px;justify-content:flex-start;border-radius:14px}.mobile-hint{display:block}
}
@media(max-width:460px){
  .mode-switch{grid-template-columns:1fr}.editor-tabs{overflow-x:auto;grid-template-columns:repeat(4,minmax(80px,1fr))}.field-grid.two,.color-grid{grid-template-columns:1fr}.template-grid{grid-template-columns:repeat(4,1fr)}.signature-editor{grid-template-columns:28px 1fr}.signature-editor .field:last-child{grid-column:2}.logo-control{align-items:flex-start}.logo-control-preview{width:90px;height:70px}
}
@page{size:A4 landscape;margin:0}
@media print{
  html,body{width:297mm;height:210mm;background:#fff!important;margin:0!important;padding:0!important;overflow:hidden}
  .no-print,.app-header,.editor,.preview-toolbar,.mobile-hint,.toast{display:none!important}
  .workspace,.preview-area,.certificate-stage{display:block!important;margin:0!important;padding:0!important;width:297mm!important;height:210mm!important;min-height:0!important;background:#fff!important;border:0!important;box-shadow:none!important;overflow:hidden!important}
  .certificate{width:297mm!important;height:210mm!important;min-width:297mm!important;min-height:210mm!important;box-shadow:none!important;transform:none!important}
}

.brand-mark{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:0;
}

.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Embedded inside Tawtheq: keep certificate code isolated while fitting the host view. */
body.embedded .app-header{height:62px;padding:0 18px;position:sticky;top:0}
body.embedded .brand-mark{width:39px;height:39px}
body.embedded .brand h1{font-size:14px}
body.embedded .brand p{font-size:10px}
body.embedded .workspace{min-height:calc(100vh - 62px)}
body.embedded .editor{top:62px;max-height:calc(100vh - 62px)}
body.embedded .preview-area{padding:16px}
body.embedded .certificate-stage{min-height:calc(100vh - 135px)}
@media(max-width:820px){
  body.embedded .app-header{height:58px;padding:0 10px;position:sticky}
  body.embedded .brand-mark{width:34px;height:34px}
  body.embedded .workspace{min-height:auto}
  body.embedded .editor{top:0;max-height:none}
  body.embedded .certificate-stage{min-height:auto}
}

.batch-certificates{border:1px solid #dce2eb;border-radius:14px;padding:16px;margin:16px 0;background:#fff}.batch-certificates summary{cursor:pointer;font-weight:700;color:#183657}.batch-certificates p{font-size:13px;line-height:1.8;color:#475569}.batch-certificates textarea{width:100%;box-sizing:border-box;margin:10px 0;padding:12px;font:inherit;border:1px solid #cbd5e1;border-radius:10px}.batch-actions{display:flex;gap:8px;flex-wrap:wrap}.mode-switch{flex-wrap:wrap}.mode-switch .mode-btn{min-width:0}