/* =======================================================================
   منشئ السيرة الذاتية — style.css
   CV Builder — stylesheet (UI + CV templates + print)
   خطوط الويب اختيارية: يعمل بالكامل بدون إنترنت عبر خطوط النظام
   ======================================================================= */

/* ------------------------- 1. المتغيرات / Tokens ----------------------- */
:root{
  /* هوية الواجهة — ثابتة ومستقلة عن لون السيرة الذاتية */
  --brand:#4F46E5;
  --brand-hover:#4338CA;
  --brand-ink:#FFFFFF;
  --brand-soft:#EEF0FF;
  --brand-ring:rgba(79,70,229,.22);

  /* عائلة التمييز البنفسجي↔الوردي — مشتقة من ألوان الخلفية نفسها.
     الأخضر يبقى في شعار SIFR وحده كلمسة هوية. */
  --uv:#7C3AED;              /* بنفسجي للتعبئات والحدود */
  --uv-text:#6D28D9;         /* نسخة داكنة للنصوص: 5.9:1 على الأبيض */
  --uv-pink:#DB2777;         /* وردي لنهاية التدرّج */
  --uv-soft:color-mix(in srgb,var(--uv) 13%,transparent);
  --uv-line:color-mix(in srgb,var(--uv) 15%,var(--line));

  /* السطح الزجاجي: أبيض شبه شفاف يظهر التدرّج خلفه */
  --glass:color-mix(in srgb,var(--panel) 72%,transparent);
  --glass-strong:color-mix(in srgb,var(--panel) 86%,transparent);
  --glass-shadow:0 10px 30px -12px rgba(109,40,217,.20), 0 2px 8px -2px rgba(219,39,119,.10);

  /* لون السيرة الذاتية — يتحكم به المستخدم، يُستخدم داخل الورقة فقط */
  --accent:#1f6feb;

  --bg:#F4F5F8;

  /* خلفية الموقع: وهج بنفسجي أعلى اليسار ووردي أسفل اليمين فوق أساس فاتح.
     تُستعمل على <body> وعلى صفحة الدخول؛ اللوحات فوقها شفافة فيظهر التدرّج
     متصلاً عبر الشاشة كلها. */
  --aurora:
    radial-gradient(1100px 720px at 88% 94%, rgba(236,72,153,.14), transparent 62%),
    radial-gradient(980px 640px at 10% 4%,  rgba(124,58,237,.11), transparent 60%),
    radial-gradient(820px 620px at 97% 2%,  rgba(167,139,250,.13), transparent 58%),
    linear-gradient(135deg, #F4F2FB 0%, #FAF8FD 46%, #FBECF4 100%);
  --panel:#FFFFFF;
  --panel-2:#F8FAFC;
  --panel-3:#F1F3F7;
  --ink:#0B1524;
  --ink-2:#4A5568;
  --ink-3:#616B7A;
  --line:#E3E7EE;
  --line-2:#EEF1F6;

  --ok:#0F9D58;
  --ok-soft:#E8F7EF;
  --warn:#B45309;
  --warn-bg:#FFF8ED;
  --danger:#DC2626;
  --danger-soft:#FEF2F2;

  --radius-lg:16px;
  --radius:12px;
  --radius-sm:9px;
  --radius-xs:7px;

  --shadow-xs:0 1px 2px rgba(11,21,36,.05);
  --shadow-sm:0 1px 3px rgba(11,21,36,.06), 0 1px 2px rgba(11,21,36,.04);
  --shadow:0 4px 12px rgba(11,21,36,.07), 0 1px 3px rgba(11,21,36,.05);
  --shadow-lg:0 18px 45px rgba(11,21,36,.14), 0 4px 12px rgba(11,21,36,.07);
  --shadow-paper:0 2px 6px rgba(11,21,36,.10), 0 18px 44px rgba(11,21,36,.14);

  /* المسافات — إيقاع 4/8 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  --ui-font:"IBM Plex Sans Arabic","Plus Jakarta Sans","Segoe UI","Noto Kufi Arabic","Dubai",Tahoma,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --cv-font-ar:"Segoe UI","Dubai","Noto Naskh Arabic","Traditional Arabic",Tahoma,Arial,sans-serif;
  --cv-font-en:"Calibri","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --cv-scale:1;

  --topbar-h:62px;
  --ease:cubic-bezier(.32,.72,.34,1);
}
html[dir="ltr"]{
  --ui-font:"Plus Jakarta Sans","IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
html[data-theme="dark"]{
  --brand:#7C7BFF;
  --brand-hover:#8F8EFF;
  --brand-ink:#0B0F1A;
  --brand-soft:#20213C;
  --brand-ring:rgba(124,123,255,.28);

  --uv:#A78BFA;
  --uv-text:#C4B5FD;
  --uv-pink:#F472B6;
  --uv-soft:color-mix(in srgb,var(--uv) 18%,transparent);
  --uv-line:color-mix(in srgb,var(--uv) 22%,var(--line));

  --glass:color-mix(in srgb,var(--panel) 74%,transparent);
  --glass-strong:color-mix(in srgb,var(--panel) 88%,transparent);
  --glass-shadow:0 10px 30px -12px rgba(0,0,0,.55), 0 2px 8px -2px rgba(167,139,250,.14);

  --bg:#0A0E17;
  --aurora:
    radial-gradient(1100px 720px at 88% 94%, rgba(236,72,153,.10), transparent 62%),
    radial-gradient(980px 640px at 10% 4%,  rgba(124,58,237,.16), transparent 60%),
    linear-gradient(135deg, #0C0A18 0%, #0A0E17 52%, #150B16 100%);
  --panel:#131A27;
  --panel-2:#0F1521;
  --panel-3:#1A2231;
  --ink:#E9EEF6;
  --ink-2:#A9B5C7;
  --ink-3:#7B8798;
  --line:#232C3C;
  --line-2:#1A2130;

  --ok:#34D399;
  --ok-soft:#0F2A20;
  --warn:#FBBF24;
  --warn-bg:#2A2113;
  --danger:#F87171;
  --danger-soft:#2A1618;

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow:0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 20px 50px rgba(0,0,0,.55);
  --shadow-paper:0 2px 8px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0; background:var(--aurora); background-attachment:fixed; color:var(--ink);
  overflow:hidden;   /* التمرير داخل اللوحتين لا في الصفحة */
  font-family:var(--ui-font); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* الأيقونات المتجهة / Vector icons */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden;}
svg[class="i"],.i{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ------------------------- 2. الشريط العلوي / Topbar ------------------- */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  height:var(--topbar-h); padding:0 var(--sp-5);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:var(--sp-3);
  text-decoration:none; color:inherit; border-radius:var(--radius-sm);
  padding:var(--sp-1) var(--sp-1);
}
.brand-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#111827));
  color:#fff; box-shadow:var(--shadow-sm); flex:none;
}
.brand-mark .i,.brand-mark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.brand-txt{display:flex;flex-direction:column;line-height:1.25;}
.brand-txt strong{font-size:14.5px;letter-spacing:-.01em;}
.brand-txt small{color:var(--ink-3);font-size:11px;letter-spacing:.02em;}
.topbar-actions{display:flex;align-items:center;gap:var(--sp-2);}

/* ------------------------- 3. عناصر عامة / Controls -------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  min-height:38px; padding:0 14px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
  /* الأزرار قد تكون <a> في الصفحات العامة — بلا خط تحت النص */
  text-decoration:none;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease);
}
.btn:hover{background:var(--panel-3);border-color:color-mix(in srgb,var(--ink-3) 45%,transparent);}
.btn:active{transform:scale(.98);}
.btn .i{width:16px;height:16px;}

.btn.primary{
  background:var(--brand);border-color:var(--brand);color:var(--brand-ink);
  box-shadow:0 1px 2px var(--brand-ring);
}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);box-shadow:0 3px 10px var(--brand-ring);}
.btn.support{
  background:transparent;border-color:color-mix(in srgb,var(--danger) 32%,transparent);
  color:var(--danger);
}
.btn.support:hover{background:var(--danger-soft);border-color:var(--danger);}
.btn.support .i{fill:currentColor;stroke:none;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);}
.btn.ghost:hover{background:var(--panel-3);color:var(--ink);border-color:transparent;}
.btn.small{min-height:30px;padding:0 10px;font-size:12.5px;border-radius:var(--radius-xs);}
.btn.small .i{width:14px;height:14px;}
.btn.block{width:100%;min-height:46px;font-size:14.5px;}
.btn.danger{color:var(--danger);}
.btn.danger:hover{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 40%,transparent);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;}
.btn.add{
  width:100%;margin-top:var(--sp-2);border-style:dashed;color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 32%,var(--line));
  background:transparent;min-height:42px;
}
.btn.add:hover{background:var(--brand-soft);border-color:var(--brand);border-style:solid;}

/* زر أيقونة — هدف لمس 40px مع أيقونة 18px */
.icon-action{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:1px solid transparent;background:transparent;color:var(--ink-2);
  border-radius:var(--radius-sm);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.icon-action:hover{background:var(--panel-3);color:var(--ink);}
.icon-action.small{width:34px;height:34px;}
.icon-action.small .i{width:16px;height:16px;}

.seg{
  display:inline-flex;background:var(--panel-3);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:3px;gap:2px;
}
.seg.wide{width:100%;}
.seg.wide .seg-btn{flex:1;}
.seg-btn{
  border:0;background:transparent;min-height:30px;padding:0 13px;border-radius:6px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.seg-btn:hover{color:var(--ink);}
.seg-btn.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-xs);}


/* قائمة منسدلة / Dropdown menu */
.menu-wrap{position:relative;}
.menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:70;
  min-width:214px;padding:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  animation:menuIn .16s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
.menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:40px;padding:0 10px;border:0;background:transparent;
  border-radius:var(--radius-xs);color:var(--ink-2);
  font-size:13.5px;font-weight:600;text-align:start;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.menu-item:hover{background:var(--panel-3);color:var(--ink);}
.menu-item .i{color:var(--ink-3);}
.menu-item:hover .i{color:var(--ink-2);}
.menu-item.danger{color:var(--danger);}
.menu-item.danger:hover{background:var(--danger-soft);}
.menu-item.danger .i{color:var(--danger);}
.menu-sep{border:0;border-top:1px solid var(--line-2);margin:5px 4px;}

/* مبدّل العرض للجوال */
.pane-switch{display:none;}
.pane-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;border:0;background:transparent;color:var(--ink-2);
  font-size:13.5px;font-weight:600;border-bottom:2px solid transparent;
}
.pane-btn.active{color:var(--brand);border-bottom-color:var(--brand);}

/* ------------------------- 4. التخطيط / Layout ------------------------- */
.layout{
  display:grid; grid-template-columns:minmax(360px,452px) 1fr;
  height:calc(100vh - var(--topbar-h)); height:calc(100dvh - var(--topbar-h));
}
.editor{
  position:relative;   /* يحتوي العناصر المطلقة داخله (.sr-only) فلا تمدّ الصفحة */
  overflow-y:auto;padding:var(--sp-5) var(--sp-5) var(--sp-8);
  border-inline-end:1px solid var(--line);background:transparent;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.editor::-webkit-scrollbar,.paper-scroll::-webkit-scrollbar{width:11px;}
.editor::-webkit-scrollbar-thumb,.paper-scroll::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:99px;
  border:3px solid transparent;background-clip:padding-box;
}
.editor::-webkit-scrollbar-thumb:hover,.paper-scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-3);}

/* ------------------------- 5. تقدّم الإنجاز / Progress ---------------- */
.progress-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow-sm);
}
.progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);}
.progress-label{font-size:13px;font-weight:700;}
.progress-top b{font-size:15px;font-variant-numeric:tabular-nums;color:var(--brand);}
.progress-bar{
  height:7px;border-radius:99px;background:var(--panel-3);
  overflow:hidden;margin-top:10px;
}
.progress-bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#22C55E));
  transition:width .45s var(--ease);
}
.progress-hint{margin:9px 0 0;font-size:12px;color:var(--ink-3);line-height:1.5;}

/* ------------------------- 6. البطاقات / Cards ------------------------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:var(--sp-3); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card[open]{box-shadow:var(--shadow);}
.card>summary{
  list-style:none; cursor:pointer; padding:var(--sp-3) var(--sp-4);
  display:flex; align-items:center; gap:11px; font-weight:700; font-size:14px;
  min-height:52px; user-select:none;
  transition:background .16s var(--ease);
}
.card>summary:hover{background:var(--panel-2);}
.card>summary::-webkit-details-marker{display:none;}
.card>summary .ico{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--panel-3);color:var(--ink-2);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.card[open]>summary .ico{background:var(--brand-soft);color:var(--brand);}
.card>summary::after{
  content:"";margin-inline-start:auto;width:18px;height:18px;flex:none;
  background:currentColor;color:var(--ink-3);
  transition:transform .22s var(--ease);
  -webkit-mask:var(--chev) center/contain no-repeat;
  mask:var(--chev) center/contain no-repeat;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.card[open]>summary::after{transform:rotate(180deg);}
.card-body{padding:var(--sp-2) var(--sp-4) var(--sp-4);border-top:1px solid var(--line-2);}

/* ------------------------- 7. الحقول / Fields -------------------------- */
.field{margin-bottom:var(--sp-3);display:flex;flex-direction:column;gap:6px;}
.field.slim{margin-bottom:var(--sp-2);}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}

input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=password],select,textarea{
  width:100%; min-height:42px; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--panel-2); color:var(--ink);
  font-size:14px; transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.85;}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:color-mix(in srgb,var(--ink-3) 45%,transparent);}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand); background:var(--panel);
  box-shadow:0 0 0 3px var(--brand-ring); outline:none;
}
input[aria-invalid="true"]{border-color:var(--danger);}
input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent);}
textarea{resize:vertical;min-height:88px;line-height:1.65;}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;background-size:16px;
  padding-inline-end:12px;padding-inline-start:34px;
}
html[dir="rtl"] select{background-position:left 12px center;}
html[dir="ltr"] select{background-position:right 12px center;padding-inline-start:12px;padding-inline-end:34px;}
input[type=file]{
  font-size:12.5px;padding:9px 11px;border:1px dashed var(--line);
  border-radius:var(--radius-sm);background:var(--panel-2);width:100%;cursor:pointer;
}
input[type=file]:hover{border-color:var(--brand);background:var(--brand-soft);}
input[type=file]::file-selector-button{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  padding:5px 11px;border-radius:var(--radius-xs);font-size:12px;font-weight:600;
  margin-inline-end:10px;cursor:pointer;
}
.range-row{display:flex;align-items:center;gap:10px;min-height:42px;}
input[type=range]{accent-color:var(--brand);padding:0;flex:1;min-height:0;height:26px;cursor:pointer;}
.range-val{font-size:12.5px;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums;min-width:42px;}

.hint{font-size:12px;color:var(--ink-3);margin:2px 0 0;line-height:1.55;}
.hint.note{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:10px 11px;margin-top:var(--sp-2);
}
.hint.note .i{width:15px;height:15px;margin-top:1px;color:var(--ink-3);}
.hint-inline{color:var(--ink-3);}
.meter{font-size:12px;color:var(--ink-3);}
.meter b{color:var(--ink-2);font-variant-numeric:tabular-nums;}
.field-err{
  display:flex;align-items:center;gap:6px;
  margin:0;font-size:12px;font-weight:600;color:var(--danger);
}
.warn{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--warn-bg); color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:var(--radius-sm); padding:10px 12px;
  font-size:12px; line-height:1.6; margin-top:var(--sp-2);
}
.notice{
  display:flex;gap:9px;align-items:flex-start;
  border-radius:var(--radius-sm);padding:11px 12px;
  font-size:12.5px;line-height:1.6;margin-bottom:var(--sp-4);
}
.notice.demo{background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);}
.notice .i{margin-top:1px;}

/* المفتاح / Switch */
.switch-row{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;min-height:34px;}
.switch{position:relative;display:inline-block;width:44px;height:25px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.slider{
  position:absolute;inset:0;background:var(--line);border-radius:99px;
  cursor:pointer;transition:background .22s var(--ease);
}
.slider::before{
  content:"";position:absolute;height:19px;width:19px;inset-inline-start:3px;top:3px;
  background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .22s var(--ease);
}
.switch input:checked+.slider{background:var(--brand);}
html[dir="rtl"] .switch input:checked+.slider::before{transform:translateX(-19px);}
html[dir="ltr"] .switch input:checked+.slider::before{transform:translateX(19px);}
.switch input:focus-visible+.slider{outline:2px solid var(--brand);outline-offset:2px;}

/* ------------------------- 8. القوالب واللون ---------------------------- */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);}
.tpl{
  border:1.5px solid var(--line);background:var(--panel-2);border-radius:var(--radius-sm);
  padding:9px 8px 10px;text-align:center;
  display:flex;flex-direction:column;gap:6px;align-items:center;
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.tpl:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:var(--panel);}
.tpl.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-ring);}
.tpl b{font-size:12.5px;}
.tpl.active b{color:var(--brand);}
.tpl small{font-size:11px;color:var(--ink-2);line-height:1.4;}
.tpl-thumb{
  width:100%;height:46px;border-radius:5px;background:#fff;
  border:1px solid var(--line);position:relative;overflow:hidden;
}
html[data-theme="dark"] .tpl-thumb{background:#DCE3EE;border-color:transparent;}
.tpl-thumb::before,.tpl-thumb::after{content:"";position:absolute;background:#C3CCDA;}
.tpl-thumb-ats::before{inset:6px 7px auto 7px;height:4px;background:#8894A8;}
.tpl-thumb-ats::after{inset:15px 7px 6px 7px;background:repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 6px);}
.tpl-thumb-ca::before{inset:6px 14px auto 14px;height:4px;background:#8894A8;}
.tpl-thumb-ca::after{inset:16px 7px 6px 7px;background:repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 7px);}
.tpl-thumb-cl::before{inset:0 auto 0 0;width:34%;background:var(--accent);opacity:.9;}
.tpl-thumb-cl::after{inset:8px 7px 7px 40%;background:repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 6px);}

.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:42px;}
.sw{
  width:34px;height:34px;padding:4px;border-radius:50%;
  border:2px solid transparent;background:transparent;
  transition:border-color .18s var(--ease),transform .16s var(--ease);
}
.sw::before{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--sw);box-shadow:var(--shadow-xs);}
.sw:hover{transform:scale(1.08);}
.sw.active{border-color:var(--ink);}

/* الصورة / Photo */
.photo-box{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);align-items:flex-start;}
.photo-prev{
  width:92px;height:92px;flex:none;border-radius:var(--radius);
  border:1px dashed var(--line);background:var(--panel-2);
  display:grid;place-items:center;overflow:hidden;
  font-size:10.5px;color:var(--ink-3);text-align:center;padding:6px;
}
.photo-prev img{width:100%;height:100%;object-fit:cover;}
.photo-ctrl{flex:1;display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;}

/* ------------------------- 9. عناصر القوائم / Repeatables ------------- */
.items{display:flex;flex-direction:column;gap:var(--sp-2);}
.item{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);padding:var(--sp-3);position:relative;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.item:hover{border-color:color-mix(in srgb,var(--ink-3) 40%,transparent);box-shadow:var(--shadow-xs);}
.item:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);}
.item-head{
  display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);
  font-size:12.5px;font-weight:700;color:var(--ink-2);min-width:0;
}
.item-head>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.item-head .idx{
  width:22px;height:22px;flex:none;border-radius:6px;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums;
}
.item-tools{margin-inline-start:auto;display:flex;gap:2px;flex:none;}
.icon-btn{
  border:1px solid transparent;background:transparent;
  width:30px;height:30px;border-radius:var(--radius-xs);display:grid;place-items:center;
  color:var(--ink-3);
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.icon-btn .i{width:15px;height:15px;}
.icon-btn:hover{background:var(--panel);border-color:var(--line);color:var(--ink);}
.icon-btn.del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:var(--danger-soft);}
.item .field{margin-bottom:var(--sp-2);}
.item .field:last-child{margin-bottom:0;}
.chk-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);min-height:34px;cursor:pointer;}
.chk-row input{width:18px;height:18px;flex:none;accent-color:var(--brand);cursor:pointer;}
.chk-row.consent{margin-bottom:var(--sp-4);align-items:flex-start;line-height:1.55;cursor:pointer;}
.chk-row.consent input{margin-top:2px;}

.editor-foot{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;color:var(--ink-3);padding:var(--sp-4) 0 var(--sp-2);
  transition:color .2s var(--ease);
}
.editor-foot .i{width:14px;height:14px;}
.editor-foot.saved{color:var(--ok);}

/* ------------------------- 10. بطاقة الاشتراك / Promo ----------------- */
.promo-card{
  margin-top:var(--sp-5);padding:var(--sp-5);text-align:center;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));
  border-radius:var(--radius);
  background:linear-gradient(160deg,var(--brand-soft),var(--panel) 70%);
  box-shadow:var(--shadow-sm);
}
.promo-ico{
  width:44px;height:44px;margin:0 auto var(--sp-3);border-radius:12px;
  display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);
  box-shadow:0 4px 12px var(--brand-ring);
}
.promo-ico .i{width:21px;height:21px;}
.promo-card h2{font-size:16px;margin-bottom:6px;}
.promo-card>p{margin:0 auto;font-size:12.5px;color:var(--ink-2);line-height:1.65;max-width:46ch;}
.promo-form{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);align-items:flex-start;}
.promo-form .field{flex:1;margin:0;min-width:0;}
.promo-form .btn{min-height:42px;flex:none;}
.promo-card .field-err{justify-content:center;margin-top:8px;}
.promo-foot{margin:var(--sp-3) 0 0;font-size:11.5px;color:var(--ink-3);}

/* ------------------------- 11. المعاينة / Preview --------------------- */
.preview-wrap{position:relative;display:flex;flex-direction:column;overflow:hidden;background:transparent;}
.preview-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:52px;padding:var(--sp-2) var(--sp-5);
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.ats-score{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--ink-2);}
.ats-score>.i{color:var(--ink-3);}
.ats-score .bar{width:112px;height:6px;border-radius:99px;background:var(--panel-3);overflow:hidden;}
.ats-score .bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--ok);transition:width .4s var(--ease),background .3s var(--ease);
}
.ats-score.low .bar i{background:var(--danger);}
.ats-score.mid .bar i{background:var(--warn);}
.ats-score b{min-width:40px;color:var(--ink);font-variant-numeric:tabular-nums;}
.zoom{
  display:flex;align-items:center;gap:2px;font-size:12.5px;color:var(--ink-2);
  background:var(--panel-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px;
}
.zoom span{min-width:46px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;}
.zoom .icon-action:hover{background:var(--panel);}

.paper-scroll{
  flex:1;overflow:auto;padding:var(--sp-6);
  display:flex;justify-content:center;align-items:flex-start;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
/* المسرح يأخذ مقاس الورقة بعد التصغير (يضبطه script.js)، فيجب أن
   تتقلّص الورقة من زاويته لا من مركزها هي — وإلا انزاحت خارجه وظهر
   تمرير أفقي وهمي، وهو أوضح ما يكون على الجوال.
   direction:ltr هنا يثبّت نقطة البداية في الاتجاهين؛ اتجاه نصّ الورقة
   نفسها يحكمه وسم dir عليها فلا يتأثّر. */
.paper-stage{direction:ltr;}
.paper-stage>.paper{transform-origin:top left;}

/* ------------------------- 12. النوافذ / Modals ----------------------- */
.modal{
  position:fixed;inset:0;z-index:90;padding:var(--sp-5);
  background:rgba(8,12,20,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:grid;place-items:center;overflow-y:auto;
  animation:overlayIn .18s var(--ease);
}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
.modal-box{
  background:var(--panel);border-radius:var(--radius-lg);
  width:min(560px,100%);max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
  animation:boxIn .22s var(--ease);
}
@keyframes boxIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.modal-box.narrow{width:min(444px,100%);}
.modal-box.pay{width:min(480px,100%);}
.modal-head{
  display:flex;align-items:center;gap:11px;
  padding:var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--line-2);flex:none;
}
.modal-head strong{font-size:15.5px;flex:1;min-width:0;}
.modal-head .icon-action{margin-inline-start:auto;}
.modal-ico{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
}
.modal-ico.heart{background:var(--danger-soft);color:var(--danger);}
.modal-ico.heart .i{fill:currentColor;stroke:none;}
.modal-body{padding:var(--sp-5);overflow-y:auto;}
.modal-lead{margin:0 0 var(--sp-5);font-size:13px;color:var(--ink-2);line-height:1.7;}
.modal-foot-note{
  display:flex;align-items:flex-start;gap:7px;justify-content:center;
  margin:var(--sp-4) 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.6;text-align:center;
}
.modal-foot-note .i{width:14px;height:14px;margin-top:1px;flex:none;}

.checks{list-style:none;margin:0;padding:var(--sp-2) var(--sp-5) var(--sp-5);overflow-y:auto;}
.checks li{
  display:flex;gap:11px;align-items:flex-start;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line-2);font-size:13px;line-height:1.6;
}
.checks li:last-child{border-bottom:0;}
.checks .mark{
  flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;font-size:0;
}
.checks .mark .i{width:12px;height:12px;stroke-width:2.6;}
.checks .pass .mark{background:var(--ok-soft);color:var(--ok);}
.checks .fail .mark{background:var(--warn-bg);color:var(--warn);}
.checks .fail span:last-child{color:var(--ink-2);}

/* ------------------------- 13. الدعم والدفع / Payment ----------------- */
.amounts{border:0;padding:0;margin:0 0 var(--sp-5);min-width:0;}
.amounts legend{
  padding:0;margin-bottom:var(--sp-3);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);}
.amount{
  min-height:52px;border:1.5px solid var(--line);background:var(--panel-2);
  border-radius:var(--radius-sm);color:var(--ink);
  font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}
.amount:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:var(--panel);}
.amount.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);}
.custom-amount{margin:var(--sp-3) 0 0;}
.amount-input{position:relative;display:flex;align-items:center;}
.amount-input .cur{
  position:absolute;inset-inline-start:12px;
  font-size:12px;font-weight:700;color:var(--ink-3);pointer-events:none;
}
.amount-input input{padding-inline-start:52px;}
.secure-line{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 var(--sp-4);padding:12px 13px;
  background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 78%,var(--ink));
  border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);
  border-radius:var(--radius-sm);font-size:12.5px;line-height:1.6;
}
.secure-line .i{margin-top:1px;flex:none;}
.card-input{position:relative;display:flex;align-items:center;}
.card-input input{padding-inline-end:52px;letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.card-brand{
  position:absolute;inset-inline-end:12px;display:grid;place-items:center;
  color:var(--ink-3);pointer-events:none;transition:color .2s var(--ease);
}
.card-brand .i{width:22px;height:22px;}
.card-brand.known{color:var(--brand);}
.card-brand .brand-name{
  font-size:9.5px;font-weight:800;letter-spacing:.06em;
  padding:3px 6px;border-radius:4px;background:var(--panel-3);color:var(--ink-2);
}

/* زر بحالة تحميل */
.btn .spinner{display:none;width:16px;height:16px;flex:none;}
.btn.loading{pointer-events:none;}
.btn.loading .btn-label{opacity:.65;}
.btn.loading .spinner{
  display:block;border:2px solid color-mix(in srgb,currentColor 30%,transparent);
  border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.pay-done{text-align:center;padding:var(--sp-4) 0 var(--sp-2);}
.done-ico{
  width:58px;height:58px;margin:0 auto var(--sp-4);border-radius:50%;
  display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);
}
.done-ico .i{width:28px;height:28px;stroke-width:2.6;}
.pay-done h3{font-size:18px;margin-bottom:8px;}
.pay-done p{margin:0 0 var(--sp-5);font-size:13px;color:var(--ink-2);line-height:1.65;}

.toast{
  position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--panel);padding:11px 20px;border-radius:99px;
  font-size:13px;font-weight:600;z-index:100;box-shadow:var(--shadow-lg);
  max-width:calc(100vw - 32px);text-align:center;
  animation:toastIn .22s var(--ease);
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%);}}

/* ------------------------- 14. الاستجابة / Responsive ----------------- */
@media screen and (max-width:1180px){
  .layout{grid-template-columns:minmax(330px,400px) 1fr;}
  .editor{padding:var(--sp-4);}
  .paper-scroll{padding:var(--sp-4);}
}
@media screen and (max-width:1024px){
  .hide-sm{display:none;}
  .topbar{padding:0 var(--sp-4);gap:var(--sp-2);}
  .brand-txt small{display:none;}

  .pane-switch{
    position:sticky;top:var(--topbar-h);z-index:50;
    display:flex;background:var(--panel);border-bottom:1px solid var(--line);
  }
  .layout{
    grid-template-columns:1fr;
    height:calc(100dvh - var(--topbar-h) - 43px);
  }
  .layout>.editor,.layout>.preview-wrap{display:none;}
  .layout[data-pane="editor"]>.editor{display:block;}
  .layout[data-pane="preview"]>.preview-wrap{display:flex;}
  .editor{border-inline-end:0;}
}
@media screen and (min-width:1025px){
  .only-sm{display:none;}
}
@media screen and (max-width:600px){
  .row,.tpl-grid{grid-template-columns:1fr;}
  .tpl{flex-direction:row;align-items:center;gap:var(--sp-3);text-align:start;padding:10px;}
  .tpl-thumb{width:52px;height:38px;flex:none;}
  .tpl>span:not(.tpl-thumb),.tpl b,.tpl small{text-align:start;}
  .amount-grid{grid-template-columns:repeat(2,1fr);}
  .promo-form{flex-direction:column;}
  .promo-form .btn{width:100%;}
  .modal{padding:var(--sp-3);align-items:end;}
  .modal-box{width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:92dvh;}
  .modal-body,.modal-head{padding-inline:var(--sp-4);}
  .preview-bar{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2);}
  .ats-score .ats-label{display:none;}
  .ats-score .bar{width:74px;}
  .toast{bottom:16px;}
}

/* ------------------------- 15. الورقة A4 / Paper ---------------------- */
.paper{
  width:210mm; min-height:297mm; background:#fff; color:#1a1a1a;
  box-shadow:var(--shadow-paper); flex:none;
  transform-origin:top center;
  /* --cv-space يضبط الهوامش و --cv-lh التباعد؛ يضبطهما script.js */
  padding:calc(16mm * var(--cv-space,1)) calc(15mm * var(--cv-space,1));
  font-family:var(--cv-font,var(--cv-font-ar)); font-size:calc(10.5pt * var(--cv-scale));
  line-height:var(--cv-lh,1.6);
  transition:opacity .18s var(--ease);
}
/* تلاشٍ قصير عند تبديل القالب */
.paper.swap{animation:paperSwap .26s var(--ease);}
@keyframes paperSwap{from{opacity:.35;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .paper.swap{animation:none;}
}
/* --cv-font يضبطه script.js حسب الخط المختار ولغة السيرة الذاتية.
   القيم الاحتياطية تُبقي المظهر سليماً قبل تشغيل JS. */
.paper[dir="ltr"]{font-family:var(--cv-font,var(--cv-font-en));}
.paper a{color:inherit;text-decoration:none;}
.paper p{margin:0;}
.paper ul{margin:4px 0 0;padding-inline-start:16px;}
.paper li{margin-bottom:2.5px;}

/* رأس السيرة */
.cv-name{font-size:calc(21pt * var(--cv-scale));font-weight:800;letter-spacing:-.2px;line-height:1.15;margin:0;}
.cv-role{font-size:calc(11.5pt * var(--cv-scale));color:#444;margin-top:3px;font-weight:600;}
.cv-contact{margin-top:7px;font-size:calc(9.5pt * var(--cv-scale));color:#333;line-height:1.85;}
.cv-contact span:not(:last-child)::after{content:" · ";color:#999;}
.cv-photo{border:1px solid #ddd;object-fit:cover;flex:none;}
.cv-photo.circle{border-radius:50%;}
.cv-photo.rounded{border-radius:10px;}
.cv-photo.square{border-radius:0;}

.cv-sec{margin-top:calc(13px * var(--cv-scale) * var(--cv-gap,1));break-inside:avoid;}
.cv-sec h2{
  font-size:calc(11pt * var(--cv-scale));font-weight:800;margin:0 0 6px;
  text-transform:uppercase;letter-spacing:.4px;
}
/* العربية لا تقبل التباعد الحرفي ولا الأحرف الكبيرة */
.paper[dir="rtl"] .cv-sec h2,
.paper[dir="rtl"] .cv-name,
.paper[dir="rtl"] .cv-role{text-transform:none;letter-spacing:normal;}
.cv-skills-line{font-size:calc(10pt * var(--cv-scale));line-height:1.75;}
.cv-entry{margin-bottom:9px;break-inside:avoid;}
.cv-entry:last-child{margin-bottom:0;}
.cv-entry-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.cv-entry-title{font-weight:700;font-size:calc(10.5pt * var(--cv-scale));}
.cv-entry-sub{color:#444;font-size:calc(10pt * var(--cv-scale));}
.cv-entry-date{color:#666;font-size:calc(9pt * var(--cv-scale));white-space:nowrap;flex:none;}
.cv-note{color:#555;font-size:calc(9.5pt * var(--cv-scale));margin-top:2px;}
.cv-empty{color:#b9b9b9;text-align:center;padding:70px 20px;font-size:calc(11pt * var(--cv-scale));}

/* ---- قالب ATS: عمود واحد، بلا ألوان، عناوين نصية صريحة ---- */
.tpl-ats .cv-head{display:flex;gap:14mm;align-items:flex-start;}
.tpl-ats .cv-head-txt{flex:1;min-width:0;}
.tpl-ats .cv-photo{width:30mm;height:36mm;}
.tpl-ats .cv-sec h2{border-bottom:1.5px solid #222;padding-bottom:3px;color:#111;}
.tpl-ats .cv-name{color:#111;}

/* ---- قالب كندي: نظيف، خط علوي، تواريخ محاذاة، بلا صورة ---- */
.tpl-canadian{padding:calc(15mm * var(--cv-space,1)) calc(16mm * var(--cv-space,1));}
.tpl-canadian .cv-head{text-align:center;border-bottom:2px solid #111;padding-bottom:9px;}
.tpl-canadian .cv-head-txt{flex:1;}
.tpl-canadian .cv-name{font-size:calc(20pt * var(--cv-scale));letter-spacing:1.4px;text-transform:uppercase;}
.tpl-canadian .cv-role{font-size:calc(10.5pt * var(--cv-scale));text-transform:uppercase;letter-spacing:1.6px;color:#555;}
.tpl-canadian .cv-contact{font-size:calc(9pt * var(--cv-scale));}
.tpl-canadian .cv-sec h2{
  border-bottom:1px solid #bbb;padding-bottom:3px;letter-spacing:1.2px;font-size:calc(10.5pt * var(--cv-scale));
}
.tpl-canadian .cv-photo{display:none;}

/* ---- قالب عادي: عمودان + لون + صورة ---- */
.tpl-classic{padding:0;display:flex;min-height:297mm;}
.tpl-classic .cv-aside{
  width:62mm;flex:none;background:var(--accent);color:var(--accent-ink,#fff);
  padding:calc(14mm * var(--cv-space,1)) calc(8mm * var(--cv-space,1));
}
.tpl-classic .cv-main{flex:1;min-width:0;
  padding:calc(14mm * var(--cv-space,1)) calc(11mm * var(--cv-space,1));}
.tpl-classic .cv-aside .cv-sec h2{
  border-bottom:1px solid color-mix(in srgb,var(--accent-ink,#fff) 45%,transparent);
  color:var(--accent-ink,#fff);
}
.tpl-classic .cv-aside .cv-contact{color:color-mix(in srgb,var(--accent-ink,#fff) 95%,transparent);}
.tpl-classic .cv-aside .cv-contact span::after{content:"";}
.tpl-classic .cv-aside .cv-contact span{display:block;word-break:break-word;}
.tpl-classic .cv-aside .cv-note,
.tpl-classic .cv-aside .cv-entry-sub,
.tpl-classic .cv-aside .cv-entry-date{color:color-mix(in srgb,var(--accent-ink,#fff) 88%,transparent);}
.tpl-classic .cv-photo{
  width:34mm;height:34mm;margin:0 auto 10px;display:block;
  border:3px solid color-mix(in srgb,var(--accent-ink,#fff) 60%,transparent);
}
.tpl-classic .cv-aside .cv-name{font-size:calc(17pt * var(--cv-scale));text-align:center;}
.tpl-classic .cv-aside .cv-role{text-align:center;color:color-mix(in srgb,var(--accent-ink,#fff) 90%,transparent);}
.tpl-classic .cv-main .cv-sec h2{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:3px;}
.tpl-classic .skill-pill{
  display:inline-block;background:color-mix(in srgb,var(--accent-ink,#fff) 18%,transparent);border-radius:99px;
  padding:2px 9px;margin:0 0 4px;font-size:calc(9pt * var(--cv-scale));
}
.tpl-classic .cv-aside ul{list-style:none;padding:0;}


/* ---- قالب تنفيذي: ترويسة متمركزة، خط مزدوج، مسافات مريحة ---- */
.tpl-executive{padding:calc(17mm * var(--cv-space,1));}
.tpl-executive .cv-head{
  text-align:center;padding-bottom:10px;margin-bottom:2px;
  border-bottom:3px double var(--accent);
}
.tpl-executive .cv-head-txt{flex:1;}
.tpl-executive .cv-name{
  font-size:calc(23pt * var(--cv-scale));font-weight:700;
  letter-spacing:2.4px;text-transform:uppercase;color:#111;
}
.tpl-executive .cv-role{
  font-size:calc(11pt * var(--cv-scale));letter-spacing:2.6px;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-top:5px;
}
.tpl-executive .cv-contact{font-size:calc(9pt * var(--cv-scale));color:#555;}
.tpl-executive .cv-sec{margin-top:calc(15px * var(--cv-scale));}
.tpl-executive .cv-sec h2{
  color:var(--accent);letter-spacing:2px;text-align:center;
  font-size:calc(10.5pt * var(--cv-scale));position:relative;padding-bottom:6px;margin-bottom:9px;
}
/* خط قصير متمركز تحت عنوان القسم */
.tpl-executive .cv-sec h2::after{
  content:"";position:absolute;bottom:0;inset-inline:0;margin:0 auto;
  width:34px;height:1.5px;background:var(--accent);
}
.tpl-executive .cv-photo{display:none;}

/* ---- قالب عصري: عمودان، شريط جانبي فاتح، شارات مهارات ---- */
.tpl-modern{padding:0;display:flex;min-height:297mm;}
.tpl-modern .cv-aside{
  width:60mm;flex:none;background:#F2F5F9;color:#243044;
  padding:calc(14mm * var(--cv-space,1)) calc(8mm * var(--cv-space,1));
  border-inline-end:3px solid var(--accent);
}
.tpl-modern .cv-main{flex:1;min-width:0;
  padding:calc(13mm * var(--cv-space,1)) calc(11mm * var(--cv-space,1));}
.tpl-modern .cv-head{margin-bottom:4px;}
.tpl-modern .cv-name{
  font-size:calc(22pt * var(--cv-scale));color:#111;font-weight:800;
}
.tpl-modern .cv-role{
  color:var(--accent);font-size:calc(12pt * var(--cv-scale));font-weight:700;
}
.tpl-modern .cv-aside .cv-sec h2{
  color:var(--accent);border-bottom:1.5px solid rgba(36,48,68,.18);
  padding-bottom:3px;font-size:calc(10pt * var(--cv-scale));
}
.tpl-modern .cv-main .cv-sec h2{
  color:#111;font-size:calc(11pt * var(--cv-scale));
  padding-inline-start:9px;border-inline-start:3.5px solid var(--accent);
}
.tpl-modern .cv-aside .cv-contact{color:#37455C;font-size:calc(9pt * var(--cv-scale));}
.tpl-modern .cv-aside .cv-contact span::after{content:"";}
.tpl-modern .cv-aside .cv-contact span{display:block;word-break:break-word;}
.tpl-modern .cv-aside .cv-note,
.tpl-modern .cv-aside .cv-entry-sub,
.tpl-modern .cv-aside .cv-entry-date{color:#4A5A73;}
.tpl-modern .cv-photo{
  width:32mm;height:32mm;margin:0 auto 11px;display:block;
  border:3px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.18);
}
.tpl-modern .skill-pill{
  display:inline-block;background:#fff;border:1px solid rgba(36,48,68,.14);
  color:#243044;border-radius:99px;padding:2px 9px;margin:0 0 4px;
  font-size:calc(9pt * var(--cv-scale));
}
.tpl-modern .cv-aside ul{list-style:none;padding:0;}

/* ---- قالب مضغوط: كثافة عالية لسيرة من صفحة واحدة ---- */
.tpl-compact{padding:calc(12mm * var(--cv-space,1)) calc(13mm * var(--cv-space,1));
  line-height:calc(var(--cv-lh,1.6) * .9);}
.tpl-compact .cv-head{
  display:flex;gap:8mm;align-items:flex-start;
  border-bottom:1.5px solid #333;padding-bottom:6px;
}
.tpl-compact .cv-head-txt{flex:1;min-width:0;}
.tpl-compact .cv-name{font-size:calc(18pt * var(--cv-scale));}
.tpl-compact .cv-role{font-size:calc(10.5pt * var(--cv-scale));margin-top:1px;}
.tpl-compact .cv-contact{margin-top:4px;line-height:1.5;font-size:calc(8.8pt * var(--cv-scale));}
.tpl-compact .cv-sec{margin-top:calc(8px * var(--cv-scale));}
.tpl-compact .cv-sec h2{
  font-size:calc(9.8pt * var(--cv-scale));margin-bottom:3px;
  border-bottom:1px solid #ccc;padding-bottom:2px;letter-spacing:.8px;
}
.tpl-compact .cv-entry{margin-bottom:5px;}
.tpl-compact .paper ul,.tpl-compact ul{margin-top:2px;}
.tpl-compact li{margin-bottom:1px;}
.tpl-compact .cv-photo{display:none;}

/* ---- قالب أنيق: شريط لون كامل العرض ---- */
.tpl-elegant{padding:0;}
.tpl-elegant .cv-head{
  background:var(--accent);color:var(--accent-ink,#fff);
  padding:calc(13mm * var(--cv-space,1)) calc(15mm * var(--cv-space,1)) calc(11mm * var(--cv-space,1));
  display:flex;gap:10mm;align-items:center;
}
.tpl-elegant .cv-head-txt{flex:1;min-width:0;}
.tpl-elegant .cv-name{color:var(--accent-ink,#fff);font-size:calc(24pt * var(--cv-scale));}
.tpl-elegant .cv-role{
  color:color-mix(in srgb,var(--accent-ink,#fff) 92%,transparent);
  font-size:calc(12pt * var(--cv-scale));
}
.tpl-elegant .cv-photo{
  width:32mm;height:32mm;flex:none;
  border:3px solid color-mix(in srgb,var(--accent-ink,#fff) 75%,transparent);
}
.tpl-elegant .cv-contactbar{
  background:#F4F6FA;padding:7px calc(15mm * var(--cv-space,1));border-bottom:1px solid #E2E7EF;
}
.tpl-elegant .cv-contactbar .cv-contact{margin-top:0;font-size:calc(9pt * var(--cv-scale));color:#3A4658;}
.tpl-elegant .cv-sec{padding:0 calc(15mm * var(--cv-space,1));
  margin-top:calc(13px * var(--cv-scale) * var(--cv-gap,1));}
.tpl-elegant .cv-sec:last-child{padding-bottom:14mm;}
.tpl-elegant .cv-sec h2{
  color:var(--accent);font-size:calc(11pt * var(--cv-scale));
  border-bottom:1.5px solid #E2E7EF;padding-bottom:4px;
}
.tpl-elegant .cv-empty{padding-top:70px;}

/* ---- قالب شرائط: عناوين بيضاء على شريط ملوّن كامل العرض ---- */
.tpl-banded{padding:0;}
.tpl-banded .cv-head{
  display:flex;gap:8mm;align-items:flex-start;
  padding:calc(14mm * var(--cv-space,1)) calc(14mm * var(--cv-space,1)) calc(9mm * var(--cv-space,1));
  border-bottom:4px solid var(--accent);
}
.tpl-banded .cv-head-txt{flex:1;min-width:0;}
.tpl-banded .cv-name{font-size:calc(22pt * var(--cv-scale));color:#141414;}
.tpl-banded .cv-role{
  color:var(--accent);font-weight:700;
  font-size:calc(11.5pt * var(--cv-scale));letter-spacing:.4px;
}
.tpl-banded .cv-contact{font-size:calc(9.2pt * var(--cv-scale));color:#444;}
.tpl-banded .cv-photo{width:30mm;height:34mm;flex:none;}
.tpl-banded .cv-sec{
  margin-top:0;
  padding:0 calc(14mm * var(--cv-space,1)) calc(9px * var(--cv-gap,1));
}
.tpl-banded .cv-sec:first-of-type{padding-top:calc(4px * var(--cv-gap,1));}
.tpl-banded .cv-sec:last-child{padding-bottom:calc(12mm * var(--cv-space,1));}
/* الشريط الملوّن يمتد لعرض الورقة كاملاً رغم الحواف الداخلية */
.tpl-banded .cv-sec h2{
  background:var(--accent);color:var(--accent-ink,#fff);
  margin:calc(11px * var(--cv-gap,1)) calc(-14mm * var(--cv-space,1)) 8px;
  padding:5px calc(14mm * var(--cv-space,1));
  font-size:calc(10.5pt * var(--cv-scale));letter-spacing:.6px;
}

/* ---- قالب فسيح: اسم كبير ومساحات واسعة ---- */
.tpl-airy{
  padding:calc(18mm * var(--cv-space,1)) calc(17mm * var(--cv-space,1));
}
.tpl-airy .cv-head{display:flex;gap:10mm;align-items:center;}
.tpl-airy .cv-head-txt{flex:1;min-width:0;}
.tpl-airy .cv-role{
  order:-1;margin:0 0 2px;color:var(--accent);
  font-size:calc(11pt * var(--cv-scale));font-weight:600;letter-spacing:2px;
}
.tpl-airy .cv-name{
  font-size:calc(30pt * var(--cv-scale));font-weight:300;
  color:#3A3A3A;letter-spacing:-.5px;line-height:1.05;
}
.paper[dir="rtl"].tpl-airy .cv-name{font-weight:400;letter-spacing:normal;}
.tpl-airy .cv-photo{
  width:30mm;height:30mm;flex:none;border:0;box-shadow:0 0 0 1px #E4E4E4;
}
.tpl-airy .cv-contactbar{
  margin-top:calc(9px * var(--cv-gap,1));
  padding-top:calc(8px * var(--cv-gap,1));
  border-top:1px solid #E0E0E0;
}
.tpl-airy .cv-contactbar .cv-contact{
  margin-top:0;font-size:calc(9.2pt * var(--cv-scale));color:#5A5A5A;
}
.tpl-airy .cv-sec{margin-top:calc(17px * var(--cv-scale) * var(--cv-gap,1));}
.tpl-airy .cv-sec h2{
  color:#6B6B6B;font-weight:600;
  font-size:calc(10pt * var(--cv-scale));letter-spacing:2.4px;
  padding-bottom:5px;margin-bottom:8px;border-bottom:1px solid #E6E6E6;
}
.paper[dir="rtl"].tpl-airy .cv-sec h2{letter-spacing:normal;}
.tpl-airy .cv-entry-title{font-weight:600;}
.tpl-airy .cv-entry-date{color:var(--accent);font-weight:600;}

/* ---- مصغّرات القالبين ---- */
.tpl-thumb-bn::before{inset:5px 6px auto 6px;height:5px;background:var(--accent);opacity:.9;}
.tpl-thumb-bn::after{
  inset:14px 0 5px 0;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/100% 4px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 15px/100% 4px no-repeat,
    repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 5px) 6px 6px/calc(100% - 12px) 8px no-repeat;
  opacity:.92;
}
.tpl-thumb-ai::before{inset:7px 7px auto 7px;height:7px;background:#9AA4B4;}
.tpl-thumb-ai::after{
  inset:20px 7px 6px 7px;
  background:repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 8px);
}

/* ---- محاذاة نص السيرة الذاتية ----
   data-align="auto" لا يضع قاعدة، فيتبع النص اتجاه اللغة. */
.paper[data-align="right"], .paper[data-align="right"] .cv-main,
.paper[data-align="right"] .cv-aside{text-align:right;}
.paper[data-align="left"], .paper[data-align="left"] .cv-main,
.paper[data-align="left"] .cv-aside{text-align:left;}
.paper[data-align="center"], .paper[data-align="center"] .cv-main,
.paper[data-align="center"] .cv-aside{text-align:center;}

/* سطر العنوان والتاريخ صفٌّ مرن: عند التوسيط نجعله عمودياً متمركزاً
   وإلا بقي التاريخ معلّقاً في الطرف ويبدو التوسيط ناقصاً. */
.paper[data-align="center"] .cv-entry-top{
  flex-direction:column;align-items:center;gap:2px;
}
.paper[data-align="center"] .cv-entry-date{white-space:normal;}

/* القوائم: النقاط تبقى في الطرف بينما النص متمركز — نزيلها ليستقيم المظهر */
.paper[data-align="center"] ul{list-style:none;padding-inline-start:0;}
.paper[data-align="center"] .cv-contact span{display:inline;}

/* ---- زرّ إظهار كلمة المرور ---- */
.pw-wrap{position:relative;display:block;}
.pw-wrap input{padding-inline-end:40px;}
.pw-eye{
  position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--ink-3);
  border-radius:var(--radius-sm);cursor:pointer;padding:0;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.pw-eye:hover{color:var(--ink-2);background:var(--panel-3,rgba(127,127,127,.1));}
.pw-eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px;color:var(--ink-2);}
.pw-eye .i{width:18px;height:18px;}
.pw-eye[aria-pressed="true"]{color:var(--brand);}

/* ---- لوحة القوالب المخصّصة (admin) ---- */
.tpl-cell{display:flex;align-items:center;gap:10px;}
.tpl-dot{
  width:26px;height:34px;flex:none;border-radius:4px;
  border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.tpl-cell small{display:block;color:var(--ink-3);font-size:12px;direction:ltr;}
.icon-action.danger:hover{color:var(--danger);background:var(--danger-soft);}

/* محرّر القالب: النموذج والمعاينة جنباً إلى جنب */
.modal-box.tpl-editor{width:min(1020px,100%);}
.tpl-editor-body{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--sp-5);align-items:start;overflow-y:auto;
}
.tpl-fs{
  display:flex;align-items:center;gap:10px;
  margin:var(--sp-4) 0 var(--sp-3);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.tpl-fs::after{content:"";flex:1;height:1px;background:var(--line-2);}
.tpl-fs:first-child{margin-top:0;}
.tpl-editor .row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.tpl-editor label.check{
  display:flex;align-items:center;gap:8px;font-size:13px;
  font-weight:500;color:var(--ink-2);cursor:pointer;min-height:26px;
}
.tpl-editor label.check input{width:auto;min-height:0;margin:0;}
.tpl-editor input[type=color]{
  width:100%;min-height:42px;padding:3px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);
}
.tpl-editor input[type=range]{width:100%;accent-color:var(--brand);}
.tpl-editor label b{color:var(--brand);font-variant-numeric:tabular-nums;}

/* المعاينة: ورقة A4 مصغَّرة بلا تمرير */
.tpl-preview-pane{position:sticky;top:0;}
.tpl-preview-t{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;
}
.tpl-preview-scale{
  width:300px;height:424px;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:#fff;
}
.tpl-preview-scale .paper{
  width:210mm;min-height:297mm;transform:scale(.378);
  transform-origin:top right;box-shadow:none;margin:0;
}
html[dir=ltr] .tpl-preview-scale .paper{transform-origin:top left;}

/* تذييل النافذة بأزرار */
.modal-foot{
  display:flex;gap:10px;justify-content:flex-end;flex:none;
  padding:var(--sp-3) var(--sp-5) var(--sp-4);
  border-top:1px solid var(--line-2);
}

@media (max-width:900px){
  .tpl-editor-body{grid-template-columns:1fr;}
  .tpl-preview-pane{position:static;}
  .tpl-preview-scale{width:100%;max-width:300px;}
}

/* ---- استعادة كلمة المرور ---- */
/* صفحة تعيين كلمة المرور بلا عمود تعريفي: بطاقة واحدة متمركزة */
.auth-grid.one{grid-template-columns:minmax(320px,430px);justify-content:center;}

.auth-alt{margin:var(--sp-3) 0 0;text-align:center;}
.linkish{
  background:none;border:0;padding:4px 6px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;
  border-radius:var(--radius-xs);
}
.linkish:hover{color:var(--brand-ink,var(--brand));}
.linkish:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

.field-ok{
  display:flex;align-items:flex-start;gap:8px;
  margin:var(--sp-3) 0 0;padding:11px 13px;
  font-size:13px;line-height:1.7;
  color:color-mix(in srgb,var(--ok) 65%,var(--ink));
  background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);
  border-radius:var(--radius-sm);
}

/* صفحة تعيين كلمة المرور الجديدة */
.reset-state{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;border-radius:var(--radius-sm);
  font-size:13.5px;line-height:1.75;margin-bottom:var(--sp-4);
}
.reset-state.bad{
  color:color-mix(in srgb,var(--danger) 72%,var(--ink));
  background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);
}
.reset-state.good{
  color:color-mix(in srgb,var(--ok) 65%,var(--ink));
  background:var(--ok-soft);
  border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);
}

/* ---- بطاقة حالة قاعدة البيانات ---- */
.health{
  padding:16px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--panel-2);
  font-size:14px;line-height:1.8;
}
.health.ok{
  background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 32%,transparent);
  color:color-mix(in srgb,var(--ok) 62%,var(--ink));
}
.health.bad{
  background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent);
  color:color-mix(in srgb,var(--danger) 70%,var(--ink));
}
.health ul{margin:8px 0;padding-inline-start:20px;}
.health li{margin-bottom:3px;}
.health p{margin:8px 0 0;}
.health code{
  background:color-mix(in srgb,var(--ink) 8%,transparent);
  padding:1px 6px;border-radius:4px;direction:ltr;display:inline-block;
  font-size:12.5px;
}

/* ---- اختبار البريد ---- */
.mail-test{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.mail-test input{flex:1;min-width:240px;}
.mail-test .btn{flex:none;}

/* ==================== 22. الجوال / Mobile ==========================
   الشريط العلوي كان يفيض ١٨٠ بكسل على شاشة ٣٧٥: النصوص تختصر إلى
   أيقونات، والعلامة تتقلّص، فيبقى كل زرّ في متناول الإبهام. */

@media screen and (max-width:640px){
  /* «تحميل PDF» → أيقونة الطابعة وحدها */
  #btnPrint span{display:none;}
  #btnPrint{padding:0 12px;min-width:44px;justify-content:center;}
  #btnPrint .i{margin:0;}

  /* مبدّل اللغة أضيق بلا أن يصغر هدف اللمس */
  .topbar .seg{padding:2px;}
  .topbar .seg-btn{padding:0 9px;font-size:12px;min-height:34px;}

  /* اسم الحساب يكفي عنه الحرف الأول */
  .topbar .auth-area .btn.ghost span{font-size:12.5px;}
}

@media screen and (max-width:480px){
  /* الشعار وحده يكفي للتعريف، والاسم يشغل عرضاً ثميناً */
  .topbar .brand-txt{display:none;}
  .topbar{padding-inline:var(--sp-3);gap:6px;}
  .topbar-actions{gap:5px;}
}

@media screen and (max-width:640px){
  /* شريط المعاينة كان يتمدّد إلى ٩٥ بكسل ارتفاعاً بالالتفاف */
  .preview-bar{
    min-height:46px;padding:6px var(--sp-3);gap:8px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  }
  .preview-bar::-webkit-scrollbar{display:none;}
  .preview-bar>*{flex:none;}
  .zoom span{min-width:38px;font-size:12px;}
  .paper-scroll{padding:var(--sp-3);}

  /* أزرار اللوحتين: أهداف لمس مريحة */
  .pane-btn{min-height:46px;font-size:13.5px;}

  /* النوافذ تفتح من الأسفل — أقرب للإبهام */
  .modal-box{max-height:88dvh;}

  /* الجداول داخل حاوية تمرير: أشعر المستخدم أن فيها مزيداً */
  .table-scroll{-webkit-overflow-scrolling:touch;}
}

/* أهداف لمس مريحة. الشرطان منفصلان عمداً: pointer:coarse يغطّي الجوال
   واللوحي، وعرض الشاشة يغطّي ما لا يُبلّغ عن نوع مؤشّره بدقّة —
   وشاشة بعرض ٦٤٠ بكسل هي جوال عملياً مهما قال المتصفّح. */
@media (pointer:coarse),screen and (max-width:640px){
  .icon-action,.icon-btn{min-width:40px;min-height:40px;}
  .seg-btn{min-height:38px;}
  .menu-item{min-height:44px;}
  .layout-where{min-height:30px;}
  .tpl{min-height:56px;}
  /* شريط التمرير الرفيع صعب المسك بالإصبع */
  input[type=range]{height:34px;}
  /* زرّ العين ورابط «نسيت كلمة المرور» أصغر من الإبهام */
  .pw-eye{width:38px;height:38px;}
  .linkish{display:inline-block;padding:9px 10px;}
  /* منتقي اللون وزرّ إعادة الترتيب وحقل البحث */
  #accentPicker{min-height:38px;}
  #layoutReset{min-height:38px;}
  .search-box input{min-height:40px;}
  /* روابط التذييل: مساحة لمس أوسع بلا تغيير المظهر */
  .site-links a,.auth-foot a{display:inline-block;padding:7px 4px;}
}

/* تبويبات لوحة التحكّم تمرّر أفقياً — نضيف ما يدلّ على ذلك */
@media screen and (max-width:700px){
  .admin-tabs{
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to left,transparent,#000 18px,
                       #000 calc(100% - 18px),transparent);
            mask-image:linear-gradient(to left,transparent,#000 18px,
                       #000 calc(100% - 18px),transparent);
  }
  .admin-tabs::-webkit-scrollbar{display:none;}
  .admin-tab{padding:0 12px;font-size:12.5px;}
  .admin-head{flex-wrap:wrap;gap:10px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .mail-test{flex-direction:column;align-items:stretch;}
  .mail-test .btn{width:100%;justify-content:center;}
}

/* محرّر القوالب: النموذج فوق المعاينة بدل عمودين متزاحمين */
@media screen and (max-width:640px){
  .tpl-editor-body{gap:var(--sp-4);}
  .tpl-preview-scale{width:100%;height:340px;}
  .tpl-preview-scale .paper{transform:scale(.3);}
}

/* ------------------------- 16. الطباعة / Print ------------------------ */
/* margin:0 هو المطلوب، لكن بعض متصفّحات الجوال تتجاهله وتفرض هوامشها.
   القواعد أدناه مكتوبة كي تبقى الورقة سليمة في الحالتين. */
@page{size:A4;margin:0;}
@media print{
  /* overflow:hidden على body ضروري لقشرة التطبيق، لكنه يقصّ الطباعة — نلغيه هنا */
  html{background:#fff;height:auto;overflow:visible !important;}
  /* خلفية الجذر وحدها تُنقل إلى لوحة الصفحة؛ نُبقي ما دونها شفافاً
     كي لا يغطّي عمودَ اللون الممتد على كل الصفحات. */
  body{background:transparent;height:auto;overflow:visible !important;}
  .no-print,.topbar,.pane-switch,.editor,.preview-bar,.modal,.toast,.svg-sprite{display:none !important;}
  .layout{display:block;height:auto;}
  /* شبكة أمان: قواعد التخطيط المتجاوب مقيّدة بـ screen، لكن لو أضاف أحد
     استعلام عرض غير مقيّد مستقبلاً فلن تختفي الورقة عند الطباعة. */
  .layout>.preview-wrap,.preview-wrap{overflow:visible;display:block !important;background:transparent;}
  .paper-stage{display:block !important;}
  /* لا نفرض display على الورقة نفسها: القوالب ذات العمودين تعتمد على flex،
     وفرض block هنا كان يكسر تنسيق الطباعة (الشريط الجانبي يسقط للأعلى). */
  #paper{visibility:visible !important;}
  #paper.tpl-classic,#paper.tpl-modern{display:flex !important;align-items:stretch;}
  .paper-scroll{padding:0;display:block;overflow:visible;}
  .paper-stage{transform:none !important;width:auto !important;height:auto !important;}
  .paper{
    /* 210mm ثابتة كانت تُقصّ على الجوال: متصفّح الهاتف يفرض هوامشه
       على @page أحياناً، فيصير صندوق الصفحة أضيق من 210mm وتخرج
       الحافة البعيدة من الورقة خارج الورق. النسبة المئوية تملأ ما
       يعطيه المتصفّح مهما كان، والحدّ الأقصى يمنع التمدّد على الشاشات. */
    width:100%;max-width:210mm;
    min-height:297mm;box-shadow:none;margin:0;
    transform:none !important;
    /* لا overflow:hidden هنا: الورقة تتجزّأ على عدة صفحات، وإخفاء
       الفائض ينشئ سياق تنسيق جديداً قد يمنع التجزئة فتضيع الصفحات
       التالية. عرض 100% كافٍ لمنع التسرّب أصلاً. */
  }
  /* exact يجبر المتصفح على طباعة الخلفيات والألوان حتى لو كان خيار
     "Background graphics" في نافذة الطباعة مُطفأً. */
  html,body,.paper,.paper *{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  /* --- ترقيم الصفحات --- */
  /* منع كسر القسم أو المدخل بالكامل كان يدفع أي كتلة أطول من بقية الورقة
     إلى الصفحة التالية، فتبقى نصف الصفحة فارغة. الصحيح: اسمح بالكسر
     داخل الكتل الطويلة، وامنعه فقط حيث يقبح — بعد عنوان أو داخل سطر. */
  .cv-sec,.cv-entry{break-inside:auto;page-break-inside:auto;}

  /* عنوان معلّق في آخر الصفحة ومحتواه في التالية: ممنوع */
  .cv-sec h2,.cv-entry-title,.cv-entry-sub,.cv-entry-top{
    break-after:avoid;page-break-after:avoid;
    break-inside:avoid;page-break-inside:avoid;
  }

  /* الوحدات الصغيرة تبقى متماسكة، ولا يُترك سطر وحيد في طرف الصفحة */
  .paper li,.paper p,.cv-contact,.skill-pill{
    break-inside:avoid;page-break-inside:avoid;
  }
  .paper{orphans:2;widows:2;}

  /* الترويسة لا تُفصل عن أول قسم */
  .cv-head,.cv-aside .cv-name,.cv-aside .cv-role{
    break-after:avoid;page-break-after:avoid;
  }

  /* --- امتداد الشريط الجانبي الملوّن على كل الصفحات --- */
  /* عنصر .cv-aside ينتهي مع محتواه، لذا نرسم عمود اللون كخلفية أفقية:
     - على الجذر: خلفيته تُنقل إلى لوحة الصفحة فتُرسم كاملة في كل ورقة.
     - على الورقة نفسها: شبكة أمان تُرسم في كل جزء مطبوع من الورقة.
     التدرّج أفقي بحت، فموضعه واحد في كل الصفحات. */
  html:has(#paper.tpl-classic){
    --cv-band:linear-gradient(to right,var(--accent) 0 62mm,#fff 62mm);
  }
  html:has(#paper.tpl-classic[dir="rtl"]){
    --cv-band:linear-gradient(to left,var(--accent) 0 62mm,#fff 62mm);
  }
  html:has(#paper.tpl-modern){
    /* box-sizing:border-box: حدّ الـ 3px يقع داخل الـ 60mm لا بعدها */
    --cv-band:linear-gradient(to right,
      #F2F5F9 0 calc(60mm - 3px),var(--accent) calc(60mm - 3px) 60mm,#fff 60mm);
  }
  html:has(#paper.tpl-modern[dir="rtl"]){
    /* box-sizing:border-box: حدّ الـ 3px يقع داخل الـ 60mm لا بعدها */
    --cv-band:linear-gradient(to left,
      #F2F5F9 0 calc(60mm - 3px),var(--accent) calc(60mm - 3px) 60mm,#fff 60mm);
  }
  html:has(#paper.tpl-classic),html:has(#paper.tpl-modern){
    background-image:var(--cv-band);
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  #paper.tpl-classic,#paper.tpl-modern{background-image:var(--cv-band);}
  /* الشريط الجانبي يستعيد لونه كخلفية عنصر حقيقية.

     كان شفافاً اعتماداً على عمود اللون المرسوم على لوحة الصفحة وحدها،
     وهي أضعف ما تنفّذه متصفّحات الجوال: تخرج الألوان باهتة أو تسقط.
     خلفية العنصر أوثق بكثير، والعمود يبقى تحتها لتغطية الصفحات التالية —
     وبما أن اللون واحد فلا يظهر أي خط عند حدّه. */
  #paper.tpl-classic .cv-aside{
    background:var(--accent) !important;
    color:var(--accent-ink,#fff);border-inline-end:0;
  }
  #paper.tpl-modern .cv-aside{
    background:#F2F5F9 !important;border-inline-end:0;
  }
  /* اللون مطلوب طباعته حتى لو أطفأ المستخدم «رسوم الخلفية» */
  #paper .cv-aside,#paper .cv-head,#paper .cv-sec h2,#paper .pill{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

/* ------------------- 20. استيراد PDF / PDF import -------------------- */
.import-card{padding:var(--sp-4);}
.import-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:var(--sp-3);}
.import-head .ico{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
}
.import-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.import-txt strong{font-size:14px;}
.import-txt small{font-size:12px;color:var(--ink-3);line-height:1.6;}

.dropzone{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:var(--sp-5) var(--sp-4);text-align:center;
  border:1.5px dashed var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);color:var(--ink-2);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.dropzone:hover,.dropzone:focus-visible{
  border-color:var(--brand);background:var(--brand-soft);color:var(--ink);
}
.dropzone.over{border-color:var(--brand);background:var(--brand-soft);border-style:solid;}
.dropzone .i{width:26px;height:26px;color:var(--brand);}
.dropzone b{font-size:13px;font-weight:600;}
.dropzone small{font-size:11.5px;color:var(--ink-3);}

.import-busy{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--sp-5) var(--sp-4);font-size:13px;color:var(--ink-2);
}
.import-busy .spinner{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--brand) 30%,transparent);
  border-top-color:var(--brand);animation:spin .7s linear infinite;
}

/* --- نافذة المراجعة --- */
.pdf-warn{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4);}
.pdf-warn p{
  display:flex;align-items:flex-start;gap:7px;margin:0;
  padding:8px 10px;border-radius:var(--radius-xs);
  background:var(--warn-soft,color-mix(in srgb,#F59E0B 12%,transparent));
  color:var(--ink-2);font-size:12.5px;line-height:1.65;
}
.pdf-warn .i{width:15px;height:15px;flex:none;margin-top:2px;color:#B45309;}

.pdf-rows{display:flex;flex-direction:column;gap:5px;}
.pdf-row{
  display:flex;align-items:flex-start;gap:9px;
  padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.pdf-row:hover{border-color:var(--ink-3);background:var(--panel);}
.pdf-row.empty{opacity:.5;cursor:default;}
.pdf-row.empty:hover{border-color:var(--line);background:var(--panel-2);}
.pdf-row input{margin-top:3px;flex:none;}
.pdf-row-ico{
  width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:var(--panel-3);color:var(--ink-2);
}
.pdf-row-ico .i{width:15px;height:15px;}
.pdf-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.pdf-row-txt b{font-size:13px;display:flex;align-items:center;gap:6px;}
.pdf-row-txt small{
  font-size:11.5px;color:var(--ink-3);line-height:1.6;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pdf-n{
  font-style:normal;font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:99px;background:var(--brand-soft);color:var(--brand);
}

.pdf-langrow{
  display:flex;align-items:center;gap:9px;
  margin-top:var(--sp-3);padding:9px 10px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  font-size:12.5px;color:var(--ink-2);cursor:pointer;
}
.pdf-src-line{margin:var(--sp-3) 0 0;font-size:11.5px;color:var(--ink-3);}
.pdf-src-line b{color:var(--ink-2);font-weight:600;}

.modal-actions{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-2);
}
.modal-actions .btn{min-height:42px;}
@media screen and (max-width:600px){
  .modal-actions{padding-inline:var(--sp-4);}
  .modal-actions .btn{flex:1 1 100%;justify-content:center;}
}

/* ------------------- 21. ترتيب الأقسام / Section order --------------- */
.layout-list{
  list-style:none;margin:0 0 var(--sp-3);padding:0;
  display:flex;flex-direction:column;gap:5px;
}
.layout-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px 7px 6px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);cursor:grab;
  transition:border-color .16s var(--ease),background .16s var(--ease),opacity .16s var(--ease);
}
.layout-item:hover{border-color:var(--ink-3);background:var(--panel);}
.layout-item.dragging{opacity:.45;cursor:grabbing;}
.layout-item.over{border-color:var(--brand);background:var(--brand-soft);}
.layout-item.off{opacity:.5;}
.layout-item.off .layout-name{text-decoration:line-through;}

.layout-grip{
  flex:none;width:16px;text-align:center;
  color:var(--ink-3);font-size:15px;line-height:1;letter-spacing:-1px;
}
.layout-name{flex:1;min-width:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* شارة العمود: زر نصّي أوضح من أيقونة تحتاج تخميناً */
.layout-where{
  flex:none;border:1px solid var(--line);border-radius:99px;
  padding:2px 9px;min-height:24px;
  background:var(--panel-3);color:var(--ink-2);
  font-size:11px;font-weight:600;white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.layout-where:hover{border-color:var(--brand);color:var(--brand);}
.layout-where.aside{
  background:var(--brand-soft);color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 30%,transparent);
}

.layout-tools{display:flex;gap:2px;flex:none;}
.layout-tools .icon-btn.muted{opacity:.4;}

@media (hover:none),(pointer:coarse){
  /* السحب غير موثوق باللمس — الأسهم هي الطريق هناك */
  .layout-item{cursor:default;}
  .layout-grip{display:none;}
}

/* روابط الصفحات العامة داخل تذييل المحرّر */
.site-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;
  margin:var(--sp-3) 0 6px;
}
.site-links a{
  font-size:12px;color:var(--ink-3);text-decoration:none;
  transition:color .18s var(--ease);
}
.site-links a:hover{color:var(--uv-text);}

/* تذييل صفحة الدخول: روابط أكثر فيحتاج التفافاً مرتّباً */
.auth-foot{flex-wrap:wrap;row-gap:8px;}

/* ------------------------- 17. الحساب / Account UI -------------------- */
.auth-area{display:flex;align-items:center;gap:var(--sp-2);}
.user-chip{
  display:inline-flex;align-items:center;gap:5px;
  min-height:40px;padding:0 8px 0 6px;
  border:1px solid var(--line);background:var(--panel);border-radius:99px;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.user-chip:hover{background:var(--panel-3);border-color:var(--ink-3);}
.user-chip .chev{width:15px;height:15px;color:var(--ink-3);}
.user-avatar{
  width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:var(--brand-ink);font-size:13px;font-weight:700;
}
.menu-head{padding:9px 11px 7px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.menu-head strong{font-size:13.5px;}
.menu-head small{
  font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
}
a.menu-item{text-decoration:none;}

.auth-tabs{
  display:flex;gap:3px;padding:3px;margin-bottom:var(--sp-5);
  background:var(--panel-3);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.auth-tab{
  flex:1;min-height:36px;border:0;background:transparent;border-radius:6px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.auth-tab:hover{color:var(--ink);}
.auth-tab.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-xs);}

/* ------------------------- 18. السير المحفوظة / Cloud ---------------- */
.cloud-card{border-color:color-mix(in srgb,var(--brand) 24%,var(--line));}
.cloud-head{
  display:flex;align-items:center;gap:11px;padding:var(--sp-3) var(--sp-4);
  min-height:56px;
}
.cloud-head .ico{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
}
.cloud-head-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
.cloud-head-txt strong{font-size:14px;}
.cloud-head-txt small{font-size:11.5px;color:var(--ink-3);}
.cloud-card .card-body{border-top:1px solid var(--line-2);}
.cloud-actions{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3);}
.cloud-actions .btn{flex:1;min-height:42px;}
.cloud-list{display:flex;flex-direction:column;gap:6px;}
.cloud-empty{margin:0;padding:var(--sp-4) 0;text-align:center;font-size:12.5px;color:var(--ink-3);}
.cloud-item{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);padding:4px 6px 4px 4px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.cloud-item:hover{border-color:var(--ink-3);background:var(--panel);}
.cloud-item.current{border-color:var(--brand);background:var(--brand-soft);}
.cloud-open{
  flex:1;min-width:0;min-height:42px;display:flex;flex-direction:column;
  justify-content:center;gap:1px;
  border:0;background:transparent;text-align:start;padding:4px 8px;border-radius:var(--radius-xs);
}
.cloud-title{
  font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cloud-meta{font-size:11px;color:var(--ink-3);}

/* ------------------------- 19. مصغّرات القوالب الجديدة --------------- */
.tpl-thumb-ex::before{inset:6px 16px auto 16px;height:4px;background:#8894A8;}
.tpl-thumb-ex::after{
  inset:17px 8px 6px 8px;
  background:
    linear-gradient(to bottom,#A9B4C4 0 1.5px,transparent 1.5px 100%) top/100% 8px no-repeat,
    repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 6px);
}
.tpl-thumb-mo::before{inset:0 auto 0 0;width:32%;background:#DDE3EC;}
.tpl-thumb-mo::after{
  inset:6px 7px 6px 38%;
  background:
    linear-gradient(to bottom,var(--accent) 0 4px,transparent 4px 100%) top/60% 4px no-repeat,
    repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 6px) 0 9px/100% calc(100% - 9px) no-repeat;
}
.tpl-thumb-co::before{inset:5px 6px auto 6px;height:3px;background:#8894A8;}
.tpl-thumb-co::after{inset:11px 6px 4px 6px;background:repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 4px);}
.tpl-thumb-el::before{inset:0 0 auto 0;height:34%;background:var(--accent);opacity:.9;}
.tpl-thumb-el::after{inset:38% 7px 5px 7px;background:repeating-linear-gradient(to bottom,#D3DAE4 0 2px,transparent 2px 6px);}

/* ------------------------- 20. لوحة التحكم / Admin ------------------- */
.admin-body{min-height:100dvh;}
.admin-name{font-size:13px;font-weight:600;padding-inline-end:6px;}
.user-chip .admin-name{color:var(--ink);}

/* بوابة الوصول */
.admin-gate{display:grid;place-items:center;padding:var(--sp-8) var(--sp-5);min-height:60vh;}
.gate-box{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-8) var(--sp-6);text-align:center;box-shadow:var(--shadow);
  width:min(420px,100%);
}
.gate-ico{
  width:54px;height:54px;margin:0 auto var(--sp-4);border-radius:50%;
  display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);
}
.gate-ico .i{width:26px;height:26px;}
.gate-box h1{font-size:19px;margin-bottom:8px;}
.gate-box p{margin:0 0 var(--sp-5);font-size:13.5px;color:var(--ink-2);line-height:1.65;}

.admin-wrap{
  max-width:1180px;margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-10);
}

/* بطاقات الأرقام */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-6);
}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:var(--sp-3);row-gap:2px;align-items:center;
}
.stat-ico{
  grid-row:1 / span 2;width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);
}
.stat-ico.heart{background:var(--danger-soft);color:var(--danger);}
.stat-ico.heart .i{fill:currentColor;stroke:none;}
.stat-ico .i{width:20px;height:20px;}
.stat b{font-size:23px;line-height:1.15;font-variant-numeric:tabular-nums;align-self:end;}
.stat small{font-size:12px;color:var(--ink-2);align-self:start;}
.stat em{
  grid-column:2;font-style:normal;font-size:11px;color:var(--ink-3);
}

/* التبويبات */
.admin-tabs{
  display:flex;gap:3px;padding:3px;margin-bottom:var(--sp-4);overflow-x:auto;
  background:var(--panel-3);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.admin-tab{
  display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 15px;border:0;background:transparent;border-radius:7px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.admin-tab:hover{color:var(--ink);}
.admin-tab.active{background:var(--panel);color:var(--brand);box-shadow:var(--shadow-xs);}

/* اللوحات */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4);border-bottom:1px solid var(--line-2);flex-wrap:wrap;
}
.panel-head h2{font-size:15.5px;}
.panel-body{padding:var(--sp-5);}

.search-box{position:relative;display:flex;align-items:center;}
.search-box .i{position:absolute;inset-inline-start:11px;color:var(--ink-3);pointer-events:none;}
.search-box input{min-width:min(280px,60vw);padding-inline-start:36px;}

/* الجداول */
.table-scroll{overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th,.data-table td{
  padding:11px 14px;text-align:start;border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.data-table th{
  font-size:11.5px;font-weight:700;color:var(--ink-2);
  background:var(--panel-2);position:sticky;top:0;
}
.data-table tbody tr:hover{background:var(--panel-2);}
.data-table tbody tr:last-child td{border-bottom:0;}
.ta-end{text-align:end;}
.td-empty{text-align:center;color:var(--ink-3);padding:var(--sp-8) var(--sp-4) !important;}
.cell-user{font-weight:600;}
.cell-mail{
  max-width:220px;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink-2);font-size:12.5px;
}
.muted-note{color:var(--ink-3);}
.tag-you{
  font-size:10.5px;font-weight:700;color:var(--brand);
  background:var(--brand-soft);border-radius:5px;padding:2px 6px;margin-inline-start:4px;
}

.badge{
  display:inline-block;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:99px;
  background:var(--panel-3);color:var(--ink-2);
}
.badge.admin{background:var(--brand-soft);color:var(--brand);}
.badge.ok{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 58%,var(--ink));}
.badge.off{background:var(--danger-soft);color:color-mix(in srgb,var(--danger) 70%,var(--ink));}

.row-actions{display:flex;gap:4px;justify-content:flex-end;align-items:center;}

/* ترقيم الصفحات */
.pager{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line-2);
}
.pager:empty{display:none;}
.pager-info{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;}

/* مخطط استخدام القوالب */
.tpl-chart{display:flex;flex-direction:column;gap:11px;}
.tpl-bar-row{display:grid;grid-template-columns:96px 1fr 48px;gap:12px;align-items:center;}
.tpl-bar-name{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.tpl-bar{display:block;height:9px;border-radius:99px;background:var(--panel-3);overflow:hidden;}
.tpl-bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#22C55E));
}
.tpl-bar-val{font-size:13px;font-variant-numeric:tabular-nums;text-align:end;}
.panel code{
  background:var(--panel-3);color:var(--ink-2);padding:2px 6px;border-radius:5px;
  font-size:12px;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
}

@media screen and (max-width:700px){
  .admin-wrap{padding:var(--sp-4) var(--sp-3) var(--sp-8);}
  .panel-head{align-items:stretch;}
  .search-box input{width:100%;min-width:0;}
  .stat b{font-size:20px;}
  .brand-txt small{display:none;}
  .admin-name{display:none;}
}
/* ------------------------- 21. تخصيص القالب / Customise ------------- */
.customize{
  margin-top:var(--sp-4);padding:var(--sp-4);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);
}
.customize-head{
  display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);
  font-size:12.5px;font-weight:700;color:var(--ink-2);
}
.customize-head .i{width:16px;height:16px;color:var(--brand);}
.customize .field:last-of-type{margin-bottom:0;}
.customize .hint{margin-top:var(--sp-3);}

.accent-custom{
  display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);padding:5px 10px 5px 5px;min-height:42px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.accent-custom.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);}
.accent-custom input[type=color]{
  width:34px;height:30px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);
  min-height:0;
}
.accent-custom input[type=color]::-webkit-color-swatch-wrapper{padding:2px;}
.accent-custom input[type=color]::-webkit-color-swatch{border:0;border-radius:4px;}
.accent-hex{
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  font-family:ui-monospace,Consolas,monospace;letter-spacing:.4px;
}

/* ------------------------- 22. روابط التواصل / Social -------------- */
.social{
  margin-top:var(--sp-5);padding:var(--sp-5) var(--sp-4) var(--sp-4);
  border-top:1px solid var(--line);text-align:center;
}
.social-title{
  margin:0 0 var(--sp-3);font-size:12px;font-weight:700;
  color:var(--ink-2);letter-spacing:.3px;
}
.social-list{
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:center;gap:var(--sp-2);
}
.social-link{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:50%;
  background:var(--panel);color:var(--ink-2);text-decoration:none;
  transition:color .18s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),transform .16s var(--ease);
}
.social-link .i{width:19px;height:19px;}
.social-link:hover{transform:translateY(-2px);border-color:transparent;color:#fff;}
/* ألوان كل منصة عند التمرير */
.social-link.facebook:hover{background:#1877F2;}
.social-link.instagram:hover{
  background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);
}
.social-link.email:hover{background:var(--brand);}
.social-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.social-copy{
  margin:var(--sp-4) 0 0;font-size:11.5px;color:var(--ink-3);
}

/* ------------------------- 23. هوية صفر ديجيتال / Brand ------------- */
:root{
  --sifr-green:#00B27A;        /* لون العلامة — للنقطة والتعبئات الصلبة */
  --sifr-green-text:#00734D;   /* نسخة داكنة للنصوص: 5.9:1 على الأبيض */
  --sifr-ink:#0D0D0F;
  --sifr-cream:#F8F8F4;
}
html[data-theme="dark"]{
  /* على الخلفية الداكنة يحقق الأخضر العلامي نفسه تبايناً ممتازاً */
  --sifr-green-text:#2ED9A0;
}

/* علامة الشعار: حلقة بفجوتين متقابلتين + نقطة خضراء.
   تأخذ لون النص المحيط فتعمل في الوضعين الفاتح والليلي. */
.logo-mark{width:34px;height:34px;flex:none;display:block;}
.logo-ring{
  fill:none;stroke:currentColor;stroke-width:2.3;
  /* محيط الدائرة عند r=8.6 ≈ 54.03 → شرطتان وفجوتان */
  stroke-dasharray:21.6 5.4;
  transform:rotate(-45deg);transform-origin:center;
}
.logo-dot{fill:var(--sifr-green);stroke:none;}

/* الكتلة النصية للعلامة التجارية */
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0;}
.brand-word{display:flex;flex-direction:column;line-height:1;}
.brand-word .latin{
  font-size:19px;font-weight:800;letter-spacing:1.5px;
  color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;
}
.brand-word .sub{
  font-size:9px;font-weight:600;letter-spacing:4.2px;
  color:var(--ink-3);margin-top:3px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
}

/* كتلة العلامة في صفحة الدخول أكبر: هي أول ما تقع عليه العين.
   المقاسات بـ clamp فتصغر وحدها على الشاشات الضيّقة بلا استعلام وسائط. */
.auth-brand .brand-word .latin{
  font-size:clamp(22px,2.6vw,28px);
  letter-spacing:.10em;
}
.auth-brand .brand-word .sub{
  font-size:clamp(10px,1.05vw,11.5px);
  letter-spacing:.42em;
  /* التباعد الواسع يزيح النص يساراً، فنعوّضه بإزاحة بمقدار مسافة واحدة */
  margin-inline-end:-.42em;
  margin-top:5px;
}

/* ------------------------- 24. صفحة الدخول / Login page ------------- */
.auth-page{
  min-height:100dvh;display:grid;place-items:center;
  padding:var(--sp-6) var(--sp-4);
  background:var(--aurora);
  background-attachment:fixed;
  overflow-y:auto;
}
.auth-shell{width:min(1040px,100%);display:flex;flex-direction:column;gap:var(--sp-5);}

/* ترويسة العلامة أعلى الصفحة */
.auth-brand{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vw,28px);flex-wrap:wrap;
  padding:var(--sp-8) 0 var(--sp-6);
}
.auth-brand .logo-mark{width:46px;height:46px;}
/* حيّز يتنفّس حول العلامة */
.brand-badge{
  display:grid;place-items:center;flex:none;
  width:134px;height:134px;
}
.auth-brand-divider{width:1px;height:clamp(46px,5vw,58px);background:var(--line);flex:none;}
.auth-brand-ar{display:flex;flex-direction:column;line-height:1.35;gap:2px;}
.auth-brand-ar strong{
  font-size:clamp(19px,2.2vw,23px);font-weight:700;letter-spacing:-.01em;
}
.auth-brand-ar small{font-size:clamp(11.5px,1.2vw,13px);color:var(--ink-3);}
.auth-brand-ar .place{
  font-size:clamp(11.5px,1.2vw,12.5px);color:var(--sifr-green-text);font-weight:600;
}

.auth-grid{
  display:grid;grid-template-columns:1fr minmax(340px,400px);
  gap:var(--sp-5);align-items:start;
}

/* العمود التعريفي */
/* المربعان يتقاسمان سطحاً زجاجياً واحداً: أبيض شبه شفاف فوق ضبابية،
   وحد بمسحة بنفسجية بدل الرمادي البارد — فيبدوان طافيين على التدرّج
   لا ملصقين عليه. */
.auth-page .auth-intro,
.auth-page .auth-card{
  background:var(--glass);
  border:1px solid var(--uv-line);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--glass-shadow);
}

.auth-intro{
  border-radius:var(--radius-lg);
  padding:var(--sp-8) var(--sp-6);
}
.auth-intro h1{font-size:29px;line-height:1.28;margin-bottom:var(--sp-4);letter-spacing:-.015em;}
/* العنوان المميّز بتدرّج بنفسجي↔وردي. اللون الصلب أولاً كبديل
   للمتصفحات التي لا تدعم قصّ الخلفية على النص. */
.auth-intro h1 .hl{
  color:var(--uv-text);
  background:linear-gradient(100deg,var(--uv) 0%,var(--uv-pink) 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .auth-intro h1 .hl{color:transparent;}
}
.auth-intro > p{margin:0 0 var(--sp-6);font-size:14px;color:var(--ink-2);line-height:1.75;max-width:52ch;}
.auth-feats{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);}
.auth-feats li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--ink-2);}
.auth-feats .tick{
  width:22px;height:22px;flex:none;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;
  background:var(--uv-soft);color:var(--uv-text);
}
.auth-feats .tick .i{width:13px;height:13px;stroke-width:2.6;}

/* بطاقة النموذج */
.auth-card{
  border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  position:sticky;top:var(--sp-5);
}
.auth-card h2{font-size:18px;margin-bottom:4px;}
.auth-card .lead{margin:0 0 var(--sp-5);font-size:12.5px;color:var(--ink-3);}

.auth-or{
  display:flex;align-items:center;gap:12px;
  margin:var(--sp-5) 0 var(--sp-4);color:var(--ink-3);font-size:11.5px;
}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line);}

.btn.guest{
  width:100%;min-height:46px;background:transparent;
  border:1.5px dashed color-mix(in srgb,var(--uv) 38%,transparent);color:var(--ink-2);
}
.btn.guest:hover{
  border-style:solid;border-color:color-mix(in srgb,var(--uv) 55%,transparent);
  background:var(--uv-soft);color:var(--uv-text);
}
/* السهم عنصر مساعد لا بطل — يبقى رمادياً هادئاً */
.btn.guest .i{color:var(--ink-3);transition:color .2s var(--ease),transform .2s var(--ease);}
.btn.guest:hover .i{color:var(--ink-2);transform:translateX(-3px);}
html[dir="ltr"] .btn.guest:hover .i{transform:translateX(3px);}
.guest-note{margin:10px 0 0;font-size:11px;color:var(--ink-3);text-align:center;line-height:1.6;}

.auth-offline{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--warn-bg);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:var(--radius-sm);padding:11px 12px;
  font-size:12.5px;line-height:1.6;margin-bottom:var(--sp-4);
}
.auth-offline .i{margin-top:1px;flex:none;}

.auth-foot{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-2) 0 var(--sp-4);
  font-size:12px;color:var(--ink-2);
}
.auth-foot a{
  color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px;padding:3px 6px;border-radius:6px;
}
.auth-foot a:hover{color:var(--sifr-green-text);text-decoration:underline;}

@media screen and (max-width:900px){
  .auth-grid{grid-template-columns:1fr;}
  .auth-card{position:static;order:-1;}
  .auth-intro{padding:var(--sp-6) var(--sp-5);}
  .auth-intro h1{font-size:22px;}
}

/* شعار صفر ديجيتال داخل الشريط العلوي */
.brand-mark.logo-chip{
  background:var(--panel-3);
  border:1px solid var(--line);
  box-shadow:none;
}
.brand-mark.logo-chip .logo-mark{width:24px;height:24px;color:var(--ink);}
html[data-theme="dark"] .brand-mark.logo-chip{background:var(--sifr-ink);border-color:var(--line);}

/* ------------------------- 26. حركة صفحة الدخول / Motion ------------ */

/* ---------- الشعار البطل ---------- */
.auth-brand .logo-mark.hero{
  width:110px;height:110px;
  animation:markIn .62s cubic-bezier(.22,.9,.28,1) both;
}
/* الحلقة مفتوحة بفجوتين، فدورانها البطيء يقرأ كحركة طبيعية للعلامة */
.auth-brand .logo-ring{
  animation:ringSpin 22s linear infinite;
  animation-delay:.62s;
}
@keyframes ringSpin{
  from{transform:rotate(-45deg);}
  to{transform:rotate(315deg);}
}
@keyframes markIn{
  from{opacity:0;transform:scale(.82) rotate(-14deg);}
  to{opacity:1;transform:none;}
}

/* بلا توهّج ولا نبض — الحركة الوحيدة هي دوران الحلقة، فيبقى الشعار حادّاً ونظيفاً */
.logo-glow{display:none;}

/* ---------- ظهور متدرّج للأقسام ---------- */
.reveal{animation:riseIn .6s cubic-bezier(.22,.9,.28,1) both;animation-delay:var(--d,0ms);}
@keyframes riseIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
.feat-in{animation:featIn .5s cubic-bezier(.22,.9,.28,1) both;animation-delay:var(--d,0ms);}
@keyframes featIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}

/* ---------- خلفية: دوائر متحدة المركز كما في بانر العلامة ---------- */
.aura{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  display:grid;place-items:center;overflow:hidden;
}
.aura-ring{
  position:absolute;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink-3) 26%,transparent);
  opacity:.28;
  animation:auraBreath 9s ease-in-out infinite;
}
.aura-ring.r1{width:340px;height:340px;animation-delay:0s;}
.aura-ring.r2{width:620px;height:620px;animation-delay:.7s;opacity:.38;}
.aura-ring.r3{width:920px;height:920px;animation-delay:1.4s;opacity:.26;}
.aura-ring.r4{width:1240px;height:1240px;animation-delay:2.1s;opacity:.16;}
@keyframes auraBreath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.045);}
}
/* المحتوى فوق الخلفية */
.auth-shell{position:relative;z-index:1;}

/* ---------- تفاعلات دقيقة ---------- */
.auth-card{transition:box-shadow .3s var(--ease),transform .3s var(--ease);}
.auth-card:focus-within{box-shadow:var(--shadow-lg);}

.auth-intro h1 .hl{display:inline-block;}

.btn.primary,.btn.guest{transition:background .2s var(--ease),border-color .2s var(--ease),
  color .2s var(--ease),transform .16s var(--ease),box-shadow .2s var(--ease);}
.btn.primary:hover,.btn.guest:hover{transform:translateY(-1px);}
.btn.primary:active,.btn.guest:active{transform:translateY(0);}

.auth-feats li{transition:transform .22s var(--ease);}
.auth-feats li:hover{transform:translateX(-3px);}
html[dir="ltr"] .auth-feats li:hover{transform:translateX(3px);}
.auth-feats .tick{transition:transform .22s var(--ease);}
.auth-feats li:hover .tick{transform:scale(1.12);}

/* حقول الإدخال */
.auth-card input{transition:border-color .18s var(--ease),box-shadow .18s var(--ease),
  background .18s var(--ease),transform .18s var(--ease);}

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .auth-brand .logo-mark.hero,
  .auth-brand .logo-ring,
  .auth-brand .logo-dot,
  .logo-glow,
  .reveal,.feat-in,
  .aura-ring{
    animation:none !important;
  }
  /* الحلقة تبقى بزاويتها الأصلية دون دوران */
  .auth-brand .logo-ring{transform:rotate(-45deg);}
  .logo-glow{opacity:0;}
  .btn.primary:hover,.btn.guest:hover,
  .auth-feats li:hover,.auth-feats li:hover .tick{transform:none;}
}

/* الشاشات الصغيرة: شعار أصغر قليلاً وهالة أهدأ */
@media screen and (max-width:600px){
  .auth-brand .logo-mark.hero{width:74px;height:74px;}
  .aura-ring.r3,.aura-ring.r4{display:none;}
}

/* ------------------------- 27. العمق ثلاثي الأبعاد / 3D depth ------- */

/* مشهد ثلاثي الأبعاد يحتوي البطاقتين */
.auth-grid{
  perspective:1500px;
  perspective-origin:50% 40%;
}
.auth-brand{perspective:700px;}

/* ---------- إضاءة متعددة الطبقات ----------
   ظل واحد كبير يبدو مسطّحاً؛ عدة ظلال متدرّجة تحاكي انتشار الضوء الحقيقي. */
.auth-card,
.auth-intro{
  transform-style:preserve-3d;
  transform:
    perspective(1500px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translateZ(0);
  transition:transform .5s cubic-bezier(.22,.9,.28,1),
             box-shadow .5s cubic-bezier(.22,.9,.28,1);
  will-change:transform;
}

.auth-intro{
  box-shadow:
    0 1px 2px rgba(11,21,36,.04),
    0 4px 10px rgba(11,21,36,.035),
    0 14px 30px rgba(11,21,36,.05),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.auth-card{
  /* البطاقة الأقرب للمستخدم: ظلال أعمق وحافة علوية مضيئة */
  box-shadow:
    0 1px 2px rgba(11,21,36,.05),
    0 6px 14px rgba(11,21,36,.05),
    0 18px 40px rgba(11,21,36,.08),
    0 40px 80px rgba(11,21,36,.07),
    inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme="dark"] .auth-intro{
  box-shadow:
    0 2px 6px rgba(0,0,0,.4),
    0 14px 34px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .auth-card{
  box-shadow:
    0 2px 8px rgba(0,0,0,.45),
    0 20px 46px rgba(0,0,0,.5),
    0 44px 88px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* بريق ناعم يتبع المؤشر — يوحي بسطح يعكس الضوء */
.auth-card,.auth-intro{position:relative;}
.auth-card::after,
.auth-intro::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.55), transparent 62%);
}
.auth-card.tilting::after,
.auth-intro.tilting::after{opacity:1;}

/* العناصر الداخلية ترتفع قليلاً فوق سطح البطاقة */
.auth-card h2,
.auth-card .lead,
.auth-tabs,
.auth-card form,
.auth-or,
.btn.guest{transform:translateZ(18px);}
.auth-intro h1{transform:translateZ(26px);}
.auth-feats{transform:translateZ(14px);}

/* ---------- الشعار: عمق ودوران خفيف ---------- */
/* الشعار يبقى مسطّحاً وحادّاً:
   الدوران ثلاثي الأبعاد المستمر يجبر المتصفح على رسم العنصر ثم تحويله،
   فتظهر الحواف ضبابية. والظلال (drop-shadow) تزيد التشويش على شكل هندسي دقيق. */
.auth-brand .logo-mark.hero{
  animation:markIn .62s cubic-bezier(.22,.9,.28,1) both;
  shape-rendering:geometricPrecision;
}

/* ---------- عمق عند التفاعل ---------- */
.btn.primary,.btn.guest{transform-style:preserve-3d;}
.btn.primary:hover{
  transform:translateY(-2px) translateZ(20px);
  box-shadow:0 10px 24px var(--brand-ring),0 3px 8px rgba(11,21,36,.14);
}
.btn.guest:hover{
  transform:translateY(-2px) translateZ(20px);
  box-shadow:0 8px 18px rgba(11,21,36,.10);
}
.auth-feats li:hover .tick{
  transform:scale(1.14) translateZ(10px);
  box-shadow:0 4px 10px rgba(11,21,36,.12);
}
.auth-feats .tick{transition:transform .22s var(--ease),box-shadow .22s var(--ease);}

/* الحقل المركَّز عليه: حلقة لون بدل الحركة في العمق.
   translateZ داخل مشهد perspective يضخّم العنصر قليلاً فيُعاد رسم
   النص بدقة أقل — وهذا سبب ضبابية الكتابة. */
.auth-card input:focus{
  transform:none;
  box-shadow:0 0 0 3px var(--brand-ring);
}

/* عند الكتابة تُسطَّح البطاقة كلياً فيعود النص حادّاً تماماً.
   الميلان الزخرفي يبقى ما دام المستخدم لا يكتب. */
.auth-card:focus-within{
  /* !important لازم هنا: رسوم .reveal تُنهي بـ transform وتتغلّب على
     إعلانات المؤلف العادية — نفس سبب استعماله في استعلامات الوسائط أدناه. */
  transform:none !important;
  transform-style:flat !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:var(--panel);
  will-change:auto;
}

/* ---------- احترام التفضيلات وأجهزة اللمس ---------- */
@media (prefers-reduced-motion:reduce){
  .auth-card,.auth-intro{
    transform:none !important;transition:none !important;
  }
  .auth-card::after,.auth-intro::after{display:none;}
  .auth-brand .logo-mark.hero{animation:none !important;}
  .btn.primary:hover,.btn.guest:hover,
  .auth-card input:focus,
  .auth-feats li:hover .tick{transform:none !important;}
}
/* على اللمس لا يوجد مؤشر يتبعه الميل */
@media (hover:none),(pointer:coarse){
  .auth-card,.auth-intro{transform:none !important;}
  .auth-card::after,.auth-intro::after{display:none;}
}

/* شريط اللغة أعلى صفحة الدخول */
.lang-bar{display:flex;justify-content:flex-end;padding-bottom:0;}
/* مبدّل اللغة يتبع أسلوب المربعات الزجاجي نفسه.
   مقصور على .lang-bar كي تبقى المبدّلات داخل المحرّر كما هي. */
.lang-bar .seg{
  background:var(--glass);
  border-color:var(--uv-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:var(--glass-shadow);
}
.lang-bar .seg-btn.active{background:var(--glass-strong);color:var(--uv-text);}
@media screen and (max-width:900px){
  .lang-bar{justify-content:center;}
}

/* ------------------------- 28. أيقونات الدعم / Tip tiles ------------ */
.tip-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:var(--sp-2);margin-bottom:var(--sp-4);
}
.tip{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:16px 8px 12px;text-decoration:none;
  border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2);color:var(--ink);
  transition:border-color .18s var(--ease),background .18s var(--ease),
             transform .16s var(--ease),box-shadow .18s var(--ease);
}
.tip:hover{
  border-color:var(--brand);background:var(--panel);
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(11,21,36,.10);
}
.tip:active{transform:translateY(-1px);}
.tip:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.tip-ico{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);color:var(--ink-2);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.tip-ico .i{width:20px;height:20px;}
.tip:hover .tip-ico{background:var(--brand-soft);color:var(--brand);}
.tip-amount{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.tip small{font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.35;}

/* الخيار المميّز */
.tip.popular{border-color:var(--brand);background:var(--brand-soft);}
.tip.popular .tip-ico{background:var(--brand);color:var(--brand-ink);}
.tip.popular .tip-amount{color:var(--brand);}
.tip-flag{
  position:absolute;top:-9px;inset-inline-start:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:9.5px;font-weight:700;
  background:var(--brand);color:var(--brand-ink);
  padding:2px 8px;border-radius:99px;
}
html[dir="rtl"] .tip-flag{transform:translateX(50%);}

/* رابط غير مضبوط بعد */
.tip.unset{opacity:.45;pointer-events:none;filter:grayscale(1);}

@media screen and (max-width:600px){
  .tip-grid{grid-template-columns:repeat(3,1fr);}
  .tip{padding:13px 6px 10px;}
  .tip-ico{width:34px;height:34px;}
  .tip-ico .i{width:17px;height:17px;}
}