/* ==========================================================================
   Second Eye Security — لوحة الألوان الرسمية
   مستخرجة من الشعار. لا يُضاف لون خارج هذا الملف.
   كل قيمة مفحوصة على WCAG AA.
   ========================================================================== */

:root{
  /* Primary — أزرق الشعار الملكي — الساعة 6
     الاستخدام: الأزرار الأساسية، الروابط المهمة، الحالة النشطة
     RGB 51, 63, 162 · HSL 234, 52%, 42% · تباين على الأبيض 8.85:1 */
  --color-primary: #333FA2;
  /* Primary Dark — اشتقاق: الأساسي −18% إضاءة
     الاستخدام: حالة الضغط والتمرير على الأزرار
     RGB 40, 50, 127 · HSL 233, 52%, 33% · تباين على الأبيض 11.33:1 */
  --color-primary-dark: #28327F;
  /* Secondary — بنفسجي الشعار — الساعة 8
     الاستخدام: الروابط النصية، حلقة التركيز، التأكيد الثانوي
     RGB 78, 58, 142 · HSL 254, 42%, 39% · تباين على الأبيض 9.05:1 */
  --color-secondary: #4E3A8E;
  /* Accent — فيروزي الشعار معتّم للقراءة
     الاستخدام: الأيقونات، المؤشرات، علامات المسار، التأكيد
     RGB 13, 138, 126 · HSL 174, 83%, 30% · تباين على الأبيض 4.24:1 */
  --color-accent: #0D8A7E;
  /* Accent Light — فيروزي الشعار كما هو — الساعة 3
     الاستخدام: الخلفيات الخفيفة، الأشرطة، الرسوم
     RGB 72, 168, 168 · HSL 180, 40%, 47% · تباين على الأبيض 2.82:1 */
  --color-accent-light: #48A8A8;
  /* Accent Mint — نعناعي الشعار — الساعة 1
     الاستخدام: التظليل، التدرّج، الرسوم التوضيحية فقط
     RGB 117, 222, 187 · HSL 160, 61%, 66% · تباين على الأبيض 1.63:1 */
  --color-accent-mint: #75DEBB;
  /* Background — اشتقاق: صبغة الأزرق الملكي بإضاءة 98%
     الاستخدام: خلفية الصفحة
     RGB 247, 249, 252 · HSL 216, 45%, 98% · تباين على الأبيض 1.05:1 */
  --color-bg: #F7F9FC;
  /* Surface — أبيض نقي
     الاستخدام: البطاقات، الحقول، الأسطح المرتفعة
     RGB 255, 255, 255 · HSL 0, 0%, 100% · تباين على الأبيض 1.0:1 */
  --color-surface: #FFFFFF;
  /* Surface Alt — اشتقاق: إضاءة 96%
     الاستخدام: الأسطح داخل الأقسام البيضاء، رؤوس الجداول
     RGB 241, 245, 249 · HSL 210, 40%, 96% · تباين على الأبيض 1.1:1 */
  --color-surface-alt: #F1F5F9;
  /* Border — اشتقاق: إضاءة 92%
     الاستخدام: حدود البطاقات والحقول والفواصل
     RGB 226, 232, 240 · HSL 214, 32%, 91% · تباين على الأبيض 1.23:1 */
  --color-border: #E2E8F0;
  /* Border Strong — اشتقاق: إضاءة 84%
     الاستخدام: الحدود عند التمرير والتركيز
     RGB 203, 213, 225 · HSL 213, 27%, 84% · تباين على الأبيض 1.48:1 */
  --color-border-strong: #CBD5E1;
  /* Text Primary — اشتقاق: صبغة الأزرق الملكي بإضاءة 12%
     الاستخدام: العناوين والنص الأساسي
     RGB 11, 27, 51 · HSL 216, 65%, 12% · تباين على الأبيض 17.23:1 */
  --color-text: #0B1B33;
  /* Text Secondary — اشتقاق: إضاءة 36%
     الاستخدام: النص الشارح والفقرات
     RGB 72, 88, 111 · HSL 215, 21%, 36% · تباين على الأبيض 7.24:1 */
  --color-text-2: #48586F;
  /* Text Muted — اشتقاق: إضاءة 58%
     الاستخدام: التسميات والملاحظات والأكواد
     RGB 122, 139, 159 · HSL 212, 16%, 55% · تباين على الأبيض 3.49:1 */
  --color-text-3: #7A8B9F;
  /* Text Inverse — أبيض
     الاستخدام: النص على الأسطح الداكنة
     RGB 255, 255, 255 · HSL 0, 0%, 100% · تباين على الأبيض 1.0:1 */
  --color-text-inv: #FFFFFF;
  /* Success — فيروزي الشعار — لون النجاح طبيعي في العلامة
     الاستخدام: رسائل النجاح، تأكيد الإرسال
     RGB 13, 138, 126 · HSL 174, 83%, 30% · تباين على الأبيض 4.24:1 */
  --color-success: #0D8A7E;
  /* Warning — اشتقاق من الأخضر المصفر #C1D79A بخفض الإضاءة وتدوير الصبغة
     الاستخدام: التنبيهات، حدود النطاق
     RGB 164, 101, 11 · HSL 35, 87%, 34% · تباين على الأبيض 4.72:1 */
  --color-warning: #A4650B;
  /* Error — مضبوط على تشبّع وإضاءة ماجنتا الشعار مع صبغة حمراء
     الاستخدام: أخطاء النماذج والتحقق
     RGB 180, 50, 45 · HSL 2, 60%, 44% · تباين على الأبيض 6.11:1 */
  --color-error: #B4322D;

  /* ===== طيف الهوية — الترتيب حسب دورانه في الشعار ===== */
  --brand-magenta: #8D3C9F;   /* الساعة 9  */
  --brand-violet:  #4E3A8E;   /* الساعة 8  */
  --brand-blue:    #333FA2;   /* الساعة 6  */
  --brand-steel:   #4C87A6;   /* الساعة 4  */
  --brand-teal:    #48A8A8;   /* الساعة 3  */
  --brand-mint:    #75DEBB;   /* الساعة 1  */

  /* التدرّج الرسمي — للعناصر الرفيعة فقط */
  --brand-grad:   linear-gradient(135deg,#8D3C9F 0%,#4E3A8E 26%,#333FA2 50%,#3D8CA6 76%,#75DEBB 100%);
  --brand-grad-x: linear-gradient(90deg, #8D3C9F 0%,#4E3A8E 24%,#333FA2 48%,#3D8CA6 74%,#75DEBB 100%);
}

/* ---------- 0. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

/* ---------- 1. الخطوط ---------- */
/* Production v1.9.3 uses the native system stack intentionally so iPhone and Windows
   never request missing font files. No phantom font declarations. */

/* ---------- 2. التوكنز ---------- */
:root{
  /* الألوان الرسمية تُحمّل من tokens.css — هو المرجع الوحيد.
     أي تعديل لوني يتم هناك فقط. */

  /* ===== أسماء داخلية مربوطة بالأدوار أعلاه ===== */
  --ink-900:#07162A; --ink-800:var(--color-text); --ink-700:#12243D; --ink-600:#1B3050;
  --slate-500:var(--color-text-2); --slate-400:#65748B; --slate-300:var(--color-text-3);
  --surface:var(--color-surface); --surface-2:var(--color-bg); --surface-3:var(--color-surface-alt);
  --line-1:var(--color-border); --line-2:#EBF0F6; --line-3:#F3F6FA;
  --teal-600:var(--color-accent); --teal-500:var(--color-accent-light);
  --teal-400:var(--color-accent-mint); --teal-50:var(--color-accent-50);
  --violet-600:var(--color-secondary); --violet-500:#5546C4; --violet-50:var(--color-secondary-50);
  --amber-600:var(--color-warning); --red-600:var(--color-error); --red-50:var(--color-error-50);
  --bg:var(--color-bg); --panel:var(--color-surface); --text:var(--color-text);
  --text-2:var(--color-text-2); --text-3:var(--color-text-3);
  --border:var(--color-border); --accent:var(--color-accent); --accent-2:var(--color-secondary);

  /* الخطوط */
  --f-display:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","Segoe UI Mono","Courier New",monospace;

  /* المقاييس */
  --t-caption:.75rem;
  --t-small:clamp(.8125rem,.8vw,.875rem);
  --t-body:clamp(.9063rem,.95vw,1rem);
  --t-lede:clamp(1.0313rem,1.35vw,1.1875rem);
  --t-h3:clamp(1.0313rem,1.15vw,1.125rem);
  --t-h2:clamp(1.5rem,2.9vw,2.125rem);
  --t-h1:clamp(2rem,4.6vw,3.35rem);
  --t-display:clamp(2.6rem,6vw,4.5rem);

  /* الإيقاع — أساس 4 بكسل */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s14:56px; --s18:72px; --s24:96px; --s32:128px;
  --sec-y:clamp(64px,8.5vw,124px);
  --wrap:1240px; --gutter:clamp(20px,4vw,40px);

  /* الأنصاف */
  --r1:4px; --r2:8px; --r3:12px; --r4:20px; --r-full:999px;

  /* الارتفاع — ظلال باردة خفيفة */
  --e1:0 1px 2px rgba(9,22,42,.04);
  --e2:0 1px 2px rgba(9,22,42,.04),0 6px 16px -4px rgba(9,22,42,.06);
  --e3:0 2px 4px rgba(9,22,42,.05),0 16px 36px -8px rgba(9,22,42,.10);

  /* الحركة */
  --d-1:120ms; --d-2:220ms; --d-3:360ms; --d-4:640ms;
  --ease:cubic-bezier(.22,.7,.28,1); --ease-out:cubic-bezier(.16,1,.3,1);

  /* شبكة المخطط */
  --blueprint:linear-gradient(var(--line-3) 1px,transparent 1px),
              linear-gradient(90deg,var(--line-3) 1px,transparent 1px);
  --blueprint-size:44px 44px;
}

/* ---------- 3. الأساس ---------- */
body{
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.85;
  color:var(--text-2);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--teal-500);color:#fff}
:focus-visible{outline:2px solid var(--violet-500);outline-offset:3px;border-radius:var(--r1)}
.skip{position:absolute;inset-inline-start:0;top:-64px;z-index:300;
  background:var(--ink-800);color:#fff;padding:12px 20px;
  border-end-end-radius:var(--r2);transition:top var(--d-2) var(--ease)}
.skip:focus{top:0}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 4. الطباعة ---------- */
h1,.h1,h2,.h2,h3,.h3,h4{font-family:var(--f-display);color:var(--text);text-wrap:balance}
h1,.h1{font-size:var(--t-h1);font-weight:700;line-height:1.14;letter-spacing:-.022em}
h2,.h2{font-size:var(--t-h2);font-weight:600;line-height:1.26;letter-spacing:-.015em}
h3,.h3{font-size:var(--t-h3);font-weight:600;line-height:1.5;letter-spacing:-.006em}
p{color:var(--text-2)}
p+p{margin-top:var(--s3)}
.lede{font-size:var(--t-lede);line-height:1.75;color:var(--text-2);text-wrap:pretty}
.small{font-size:var(--t-small);line-height:1.8}
.note{font-size:var(--t-caption);line-height:1.8;color:var(--text-3)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.01em}
strong{font-weight:600;color:var(--text)}

/* الكيكر — كود مرجعي بعقدة نابضة */
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:var(--s4);
  font-family:var(--f-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal-600);line-height:1}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--teal-500);flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal-500) 18%,transparent)}
.sec--dark .eyebrow{color:#5FD9C7}
.sec--dark .eyebrow::before{background:#5FD9C7;box-shadow:0 0 0 3px rgba(95,217,199,.2)}

/* ---------- 5. الأيقونات ---------- */
.icon{width:20px;height:20px;flex-shrink:0;fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon--lg{width:26px;height:26px}
.iconbox{width:42px;height:42px;border-radius:var(--r2);display:grid;place-items:center;
  background:var(--teal-50);color:var(--teal-600);
  border:1px solid color-mix(in srgb,var(--teal-500) 14%,transparent);
  transition:background var(--d-2) var(--ease),color var(--d-2) var(--ease),
             transform var(--d-2) var(--ease)}
.iconbox--plain{background:var(--surface-3);color:var(--slate-500);border-color:var(--line-1)}

/* ---------- 6. الأزرار ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--f-display);font-weight:500;font-size:.9375rem;line-height:1;
  padding:15px 26px;border:1px solid transparent;border-radius:var(--r2);
  cursor:pointer;white-space:nowrap;
  transition:background var(--d-2) var(--ease),color var(--d-2) var(--ease),
             border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease),
             transform var(--d-1) var(--ease)}
.btn .icon{width:17px;height:17px;transition:transform var(--d-2) var(--ease)}
.btn:hover .icon{transform:translateX(-3px)}
.btn--primary{background:var(--ink-800);color:#fff;box-shadow:var(--e2)}
.btn--primary:hover{background:var(--violet-600);box-shadow:var(--e3)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--ink-600);background:var(--surface)}
.btn--sm{padding:11px 18px;font-size:.875rem}
.btn:active{transform:translateY(1px)}
.sec--dark .btn--primary{background:var(--teal-500);color:#04231F}
.sec--dark .btn--primary:hover{background:var(--teal-400)}
.sec--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.24)}
.sec--dark .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}

/* الروابط — خط سفلي ينمو */
.link{position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-display);font-weight:500;font-size:.875rem;
  color:var(--violet-600);padding-bottom:3px}
.link::after{content:"";position:absolute;inset-inline-start:0;bottom:0;
  width:100%;height:1px;background:currentColor;opacity:.28;
  transform:scaleX(1);transform-origin:right;transition:opacity var(--d-2) var(--ease)}
.link:hover::after{opacity:1}
.link .arw,.link .icon{transition:transform var(--d-2) var(--ease)}
.link:hover .arw,.link:hover .icon{transform:translateX(-4px)}
.link .arw{font-family:var(--f-mono);font-size:.75rem}
.sec--dark .link{color:#7FE3D3}

/* ---------- 7. التخطيط ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y);position:relative}
.sec--tight{padding-block:clamp(48px,6vw,80px)}
.sec--white{background:var(--surface)}
.sec--dark{background:var(--ink-900);color:#DCE5F0}
.sec--dark p,.sec--dark .lede{color:#A9BACE}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:#fff}
.sec-head{max-width:34em;margin-bottom:clamp(32px,4.5vw,var(--s14))}
.sec-head--wide{max-width:46em}
.sec-head h2+.lede{margin-top:var(--s4)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,var(--s18));align-items:start}
.split--wide{grid-template-columns:1.15fr .85fr}

/* شبكة المخطط كخلفية */
.bp{position:absolute;inset:0;pointer-events:none;
  background-image:var(--blueprint);background-size:var(--blueprint-size);
  mask-image:radial-gradient(120% 90% at 80% 0%,#000 0%,transparent 68%);
  -webkit-mask-image:radial-gradient(120% 90% at 80% 0%,#000 0%,transparent 68%)}
.sec--dark .bp{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.sec>.wrap{position:relative;z-index:1}

/* علامات الزوايا — إشارة الرسم الهندسي */
.marks{position:relative}
.marks::before,.marks::after{content:"";position:absolute;width:9px;height:9px;
  border:1px solid var(--teal-500);opacity:.5;pointer-events:none}
.marks::before{top:-1px;inset-inline-end:-1px;border-block-end:0;border-inline-start:0}
.marks::after{bottom:-1px;inset-inline-start:-1px;border-block-start:0;border-inline-end:0}


/* ---------- 8. الترويسة ---------- */
.hdr{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);transition:box-shadow var(--d-2) var(--ease)}
.hdr[data-stuck="true"]{box-shadow:var(--e2);border-bottom-color:var(--line-1)}
.hdr-in{display:flex;align-items:center;gap:var(--s4);height:74px}
.btn-short{display:none}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{width:38px;height:38px;flex-shrink:0;object-fit:contain;
  transition:transform var(--d-3) var(--ease)}
.brand:hover .brand-mark{transform:scale(1.06)}
.brand-txt{line-height:1.15}
.brand-en{display:block;font-family:var(--f-display);font-weight:600;
  font-size:1rem;letter-spacing:-.012em;color:var(--text);text-transform:none}
.brand-ar{display:block;font-family:var(--f-body);font-weight:400;
  font-size:.6875rem;color:var(--slate-400);margin-top:2px;letter-spacing:.01em}

.nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav a{position:relative;font-size:.8438rem;font-weight:500;color:var(--text-2);
  white-space:nowrap;padding:9px 11px;border-radius:var(--r2);transition:color var(--d-2) var(--ease)}
.nav a::after{content:"";position:absolute;inset-inline:11px;bottom:4px;height:1.5px;
  background:var(--teal-500);border-radius:2px;
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-2) var(--ease-out)}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .btn{margin-inline-start:var(--s3);flex-shrink:0}

.burger{display:none;margin-inline-start:auto;width:44px;height:44px;
  background:none;border:1px solid var(--border);border-radius:var(--r2);
  align-items:center;justify-content:center;transition:border-color var(--d-2) var(--ease)}
.burger:hover{border-color:var(--ink-600)}
.burger span{position:relative;display:block;width:18px;height:1.5px;background:var(--text);
  transition:background var(--d-2) var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline-start:0;
  width:18px;height:1.5px;background:var(--text);transition:transform var(--d-2) var(--ease)}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

.mnav{display:none;border-top:1px solid var(--line-2);background:var(--surface)}
.mnav.open{display:block;animation:slideDown var(--d-3) var(--ease-out)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav ul{padding:var(--s2) 0 var(--s5)}
.mnav a{display:flex;align-items:center;justify-content:space-between;
  padding:14px 4px;font-size:.9688rem;font-weight:500;color:var(--text);
  border-bottom:1px solid var(--line-3)}
.mnav a::after{content:"←";font-family:var(--f-mono);font-size:.75rem;color:var(--text-3)}
.mnav .btn{width:100%;margin-top:var(--s4)}

/* ---------- 9. الواجهة الأولى ---------- */
.hero{position:relative;background:var(--surface);border-bottom:1px solid var(--line-1);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--blueprint);background-size:var(--blueprint-size);
  mask-image:radial-gradient(90% 80% at 22% 8%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(90% 80% at 22% 8%,#000,transparent 72%)}
.hero::after{content:"";position:absolute;width:760px;height:760px;border-radius:50%;
  inset-inline-start:-24%;top:-42%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-violet) 15%,transparent),transparent 64%)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,var(--s18));align-items:center;
  padding-block:clamp(var(--s14),8vw,var(--s32))}
.hero h1{max-width:17em;margin-bottom:var(--s5)}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:.32em;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand-mint) 55%,transparent),
             color-mix(in srgb,var(--brand-blue) 16%,transparent));
  border-radius:2px;z-index:-1}
.hero .lede{max-width:31em}

.trust-row{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8);margin-top:var(--s6);
  padding-top:var(--s6);border-top:1px solid var(--line-2)}
.trust-row li{display:flex;align-items:center;gap:10px;font-size:var(--t-small);color:var(--text-2)}
.trust-row .icon{width:18px;height:18px;color:var(--teal-600)}
.trust-row b{color:var(--text);font-weight:500}

/* الشريط السفلي للواجهة */
.strip{position:relative;z-index:1;display:flex;flex-wrap:wrap;
  border-top:1px solid var(--line-1);background:var(--surface-2)}
.strip li{flex:1 1 220px;padding:var(--s5) var(--s6);
  border-inline-start:1px solid var(--line-1);
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.03em;color:var(--text-2)}
.strip li:first-child{border-inline-start:0}
.strip li b{display:block;color:var(--text);font-weight:500;margin-bottom:3px;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* المخطط التفاعلي */
.schema{width:100%;height:auto;overflow:visible}
.schema .s-grid{stroke:var(--line-2);stroke-width:1}
.schema .s-plan{fill:color-mix(in srgb,var(--surface-2) 70%,transparent);stroke:#C4D0DF;stroke-width:1.4}
.schema .s-wall{stroke:#D4DDEA;stroke-width:1.2}
.schema .s-room{fill:var(--violet-50);stroke:#C2B8F9;stroke-width:1}
.schema .s-path{fill:none;stroke:var(--violet-500);stroke-width:1.2;stroke-dasharray:4 4;opacity:.5}
.schema .s-cone{fill:var(--teal-500);opacity:.07}
.schema .s-node{fill:var(--teal-500)}
.schema .s-halo{fill:var(--teal-500);opacity:.14}
.schema .s-lbl{font-family:var(--f-mono);font-size:11px;fill:var(--text-3);letter-spacing:.07em}
.schema .draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.6s var(--ease-out) forwards}
.schema .pop{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .5s var(--ease-out) forwards}
.schema .pop:nth-of-type(1){animation-delay:.7s}
.schema .pop:nth-of-type(2){animation-delay:.8s}
.schema .pop:nth-of-type(3){animation-delay:.9s}
.schema .pop:nth-of-type(4){animation-delay:1s}
.schema .pop:nth-of-type(5){animation-delay:1.1s}
.schema .pop:nth-of-type(6){animation-delay:1.2s}
.schema .s-halo{animation:breathe 3.6s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes breathe{0%,100%{opacity:.14}50%{opacity:.30}}

/* بطاقة عائمة فوق المخطط — إشارة التوثيق */
.schema-wrap{position:relative}
.spec-card{position:absolute;inset-inline-start:0;bottom:6%;
  background:var(--surface);border:1px solid var(--line-1);border-radius:var(--r3);
  box-shadow:var(--e3);padding:var(--s4) var(--s5);min-width:224px;
  animation:floatIn .7s var(--ease-out) 1.35s both}
@keyframes floatIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.spec-card .sc-t{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);font-weight:400;margin-bottom:var(--s3)}
.spec-card dl{display:grid;gap:7px}
.spec-card div{display:flex;justify-content:space-between;gap:var(--s4);
  font-size:.75rem;font-family:var(--f-mono);padding-bottom:6px;border-bottom:1px solid var(--line-3)}
.spec-card div:last-child{border-bottom:0;padding-bottom:0}
.spec-card dt{color:var(--text-3)}
.spec-card dd{color:var(--text);font-weight:500}
.legend{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s5)}
.legend li{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);
  font-size:.6875rem;color:var(--text-3)}
.legend i{width:9px;height:9px;border-radius:2px;flex-shrink:0}

/* ---------- 10. شريط المراحل ---------- */
.rail{position:relative;padding-block:var(--s6)}
.rail-track{position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:1fr;gap:0;counter-reset:r}
.rail-track::before{content:"";position:absolute;inset-inline:0;top:13px;height:1px;
  background:var(--brand-grad-x);opacity:.8}
.rail-step{position:relative;padding-top:var(--s10);padding-inline:var(--s3);
  text-align:center}
.rail-step::before{content:"";position:absolute;top:7px;inset-inline-start:50%;
  translate:50% 0;width:13px;height:13px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--teal-500);
  transition:background var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
.rail-step:hover::before{background:var(--teal-500);transform:scale(1.25)}
.rail-step b{display:block;font-family:var(--f-display);font-weight:600;
  font-size:.875rem;color:var(--text);margin-bottom:5px}
.rail-step span{display:block;font-size:.75rem;line-height:1.7;color:var(--text-3)}
.rail-step em{position:absolute;top:-4px;inset-inline-start:50%;translate:50% 0;
  font-family:var(--f-mono);font-size:.6875rem;font-style:normal;color:var(--text-3)}

/* ---------- 12. البطاقات ---------- */
.grid{display:grid;gap:var(--s4)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{position:relative;background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r3);padding:var(--s6);
  transition:border-color var(--d-2) var(--ease),transform var(--d-2) var(--ease),
             box-shadow var(--d-2) var(--ease)}
.card:hover{border-color:#D4DEEA;transform:translateY(-2px);box-shadow:var(--e2)}
.card:hover .iconbox{transform:scale(1.06)}
.card>.iconbox{margin-bottom:var(--s4)}
.card h2,.card h3{font-size:var(--t-h3);font-weight:600;line-height:1.5;margin-bottom:var(--s2)}
.card p{font-size:var(--t-small)}
.sec--white .card{background:var(--surface-2)}
.sec--dark .card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
.sec--dark .card:hover{border-color:rgba(255,255,255,.2)}
/* الحد المائل الملوّن */
.card--rule::before{content:"";position:absolute;
  inset-block:var(--s5);inset-inline-end:-1px;width:2px;border-radius:2px;
  transform:scaleY(.4);transform-origin:center;
  transition:transform var(--d-3) var(--ease-out)}
.card--rule::before{background:var(--teal-500)}
.card--rule:hover::before{transform:scaleY(1)}

.idx{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s3)}

/* بطاقة ميزة أفقية */
.feature{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.feature h3{margin-bottom:4px}
.feature p{font-size:var(--t-small);margin:0}
.track{position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r4);padding:clamp(24px,3vw,var(--s10));overflow:hidden;
  transition:border-color var(--d-2) var(--ease),transform var(--d-2) var(--ease),
             box-shadow var(--d-2) var(--ease)}
.track::after{content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:var(--brand-grad-x);
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-3) var(--ease-out)}
.track:hover{transform:translateY(-3px);box-shadow:var(--e3);border-color:#D4DEEA}
.track:hover::after{transform:scaleX(1)}
.track:hover .iconbox{transform:scale(1.06)}
.track-head{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s4)}
.track h3{font-size:clamp(1.125rem,1.6vw,1.375rem);margin-bottom:5px;letter-spacing:-.014em}
.track .when{font-size:var(--t-small);color:var(--text-3);margin-bottom:var(--s5)}
.track ul{margin:var(--s1) 0 var(--s5)}
.track li{position:relative;padding-inline-start:18px;font-size:var(--t-small);
  line-height:1.85;color:var(--text-2)}
.track li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;
  width:7px;height:1.5px;background:var(--teal-500);border-radius:1px}
.gain{margin-top:auto;padding-top:var(--s5);border-top:1px dashed var(--line-1);
  font-size:var(--t-small);color:var(--text)}
.gain b{display:block;font-family:var(--f-mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.track .link{align-self:flex-start;margin-top:var(--s5)}

/* الخطوات */
.steps{display:grid;gap:var(--s2)}
.step{display:grid;grid-template-columns:50px 1fr;gap:var(--s5);
  padding:var(--s5) var(--s6);background:var(--surface);
  border:1px solid var(--line-1);border-radius:var(--r3);
  transition:border-color var(--d-2) var(--ease),background var(--d-2) var(--ease)}
.step:hover{border-color:#D4DEEA;background:var(--surface)}
.sec--white .step{background:var(--surface-2)}
.step-n{font-family:var(--f-mono);font-size:.8125rem;font-weight:500;
  color:var(--teal-600);padding-top:2px}
.step h3{font-size:.9688rem;margin-bottom:5px}
.step p{font-size:var(--t-small);margin:0}
.out{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;
  background:var(--color-accent-50);color:var(--color-accent-dark);
  padding:5px 10px;border-radius:var(--r1)}

/* جدول القدرات */
.caps{display:grid;border:1px solid var(--line-1);border-radius:var(--r3);
  overflow:hidden;background:var(--surface)}
.cap{display:grid;grid-template-columns:240px 1fr;gap:var(--s6);
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--line-2);
  transition:background var(--d-2) var(--ease)}
.cap:last-child{border-bottom:0}
.cap:hover{background:var(--surface-2)}
.cap-t{display:flex;align-items:flex-start;gap:var(--s3)}
.cap h3{font-size:.9688rem}
.cap p{font-size:var(--t-small);margin:0}

/* ---------- 14. الإفصاح التدريجي ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips li{display:flex;align-items:center;gap:8px;font-size:var(--t-small);
  padding:9px 16px;background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-full);color:var(--text-2);
  transition:border-color var(--d-2) var(--ease),color var(--d-2) var(--ease),
             transform var(--d-2) var(--ease)}
.chips li:hover{border-color:var(--teal-500);color:var(--text);transform:translateY(-2px)}
.chips .icon{width:16px;height:16px;color:var(--teal-600)}
.sec--white .chips li{background:var(--surface-2)}

.notice{background:var(--surface);border:1px solid var(--line-1);
  border-inline-start:2px solid var(--violet-500);border-radius:var(--r3);
  padding:var(--s5) var(--s6)}
.sec--white .notice{background:var(--surface-2)}
.notice h2,.notice h3{font-size:.9375rem;margin-bottom:var(--s2);letter-spacing:-.006em}
.notice p{font-size:var(--t-small)}
.notice--limits{border-inline-start-color:#C3CCD9}
.limits{display:grid;gap:10px}
.limits li{position:relative;padding-inline-start:18px;font-size:var(--t-small);
  line-height:1.85;color:var(--text-2)}
.limits li::before{content:"";position:absolute;inset-inline-start:0;top:.88em;
  width:8px;height:1px;background:#C3CCD9}
@keyframes fadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 15. الجداول ---------- */
.data,.route{background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r3);overflow:hidden}
.data tr,.route tr{border-bottom:1px solid var(--line-2)}
.data tr:last-child,.route tr:last-child{border-bottom:0}
.data th,.data td,.route th,.route td{text-align:start;padding:var(--s4) var(--s6);
  font-size:var(--t-small);vertical-align:top}
.data th{font-weight:400;color:var(--text-3);width:240px}
.data td{color:var(--text);font-weight:500}
.data td.num,.num{font-family:var(--f-mono);letter-spacing:.02em}
.route thead th{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);font-weight:400;background:var(--surface-2)}
.route tbody tr{transition:background var(--d-2) var(--ease)}
.route tbody tr:hover{background:var(--surface-2)}
.route td:first-child{color:var(--text-2)}
.route td:last-child{color:var(--text);font-weight:500}

/* ---------- 16. النماذج ---------- */
.form{display:grid;gap:var(--s5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field{display:grid;gap:8px}
.field>label{font-family:var(--f-display);font-weight:500;font-size:var(--t-small);color:var(--text)}
.field .req{color:var(--violet-600);font-size:.6875rem;font-family:var(--f-mono)}
.field .hint{font-size:var(--t-caption);color:var(--text-3);line-height:1.7}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line-1);border-radius:var(--r2);font-size:.9375rem;
  transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238D9AAC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 16px center;padding-inline-start:44px}
textarea{min-height:120px;resize:vertical;line-height:1.8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet-500);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--violet-500) 13%,transparent)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red-600)}
.err{display:none;font-size:var(--t-caption);color:var(--red-600)}
.err.show{display:block;animation:fadeUp var(--d-2) var(--ease-out)}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:11px 17px;background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-full);font-size:var(--t-small);color:var(--text-2);cursor:pointer;
  transition:border-color var(--d-2) var(--ease),color var(--d-2) var(--ease),
             background var(--d-2) var(--ease)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt:hover{border-color:#C5D0DE}
.opt:has(input:checked){border-color:var(--ink-800);color:var(--text);
  background:var(--surface-3);font-weight:500}
.opt:has(input:focus-visible){outline:2px solid var(--violet-500);outline-offset:2px}
.hp{position:absolute;inset-inline-start:-9999px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.form-msg{display:none;font-size:var(--t-small);line-height:1.8;
  padding:var(--s4) var(--s5);border-radius:var(--r2)}
.form-msg.show{display:block;animation:fadeUp var(--d-3) var(--ease-out)}
.form-msg.ok{background:var(--color-success-50);color:var(--color-accent-dark);border:1px solid #BEE9E1}
.form-msg.bad{background:var(--red-50);color:var(--red-600);border:1px solid #F2D6D4}
.check{display:grid;grid-template-columns:22px 1fr;gap:var(--s3);align-items:start;
  padding:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--line-1);
  border-inline-start:2px solid var(--violet-500);border-radius:var(--r3);cursor:pointer;
  transition:border-color var(--d-2) var(--ease)}
.sec--white .check{background:var(--surface-2)}
.check input{width:18px;height:18px;margin-top:4px;accent-color:var(--violet-500);cursor:pointer}
.check span{font-size:var(--t-small);line-height:1.8;color:var(--text)}
.check a{color:var(--violet-600);border-bottom:1px solid color-mix(in srgb,var(--violet-500) 32%,transparent)}
.check[data-invalid="true"]{border-color:var(--red-600);border-inline-start-color:var(--red-600)}

/* ---------- 17. الطبقة السفلية ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(70% 90% at 72% 36%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(70% 90% at 72% 36%,#000,transparent 72%)}
.cta-band::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  inset-inline-end:-8%;bottom:-56%;pointer-events:none;
  background:radial-gradient(circle,rgba(72,168,168,.22),transparent 66%)}
.cta-band .wrap{position:relative;z-index:1}
.cta-in{max-width:34em}
.cta-in h2{margin-bottom:var(--s4)}

.fab{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink-800);color:#fff;padding:14px 20px;border-radius:var(--r-full);
  font-family:var(--f-display);font-weight:500;font-size:.875rem;
  box-shadow:var(--e3);
  transition:background var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
.fab::before{content:"";position:absolute;inset:-4px;border-radius:inherit;
  border:1px solid var(--teal-500);opacity:0;animation:ping 3s var(--ease-out) 2s 3}
@keyframes ping{0%{opacity:.6;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
.fab:hover{background:var(--teal-600);transform:translateY(-3px)}
.fab svg{width:18px;height:18px;flex-shrink:0}

.ftr{background:var(--ink-900);color:#8FA1B8;padding-block:clamp(48px,6vw,var(--s24)) 0;
  position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--brand-grad-x)}
.ftr a{color:#BFCBDB;transition:color var(--d-2) var(--ease)}
.ftr a:hover{color:#fff}
.ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;
  gap:var(--s8);padding-bottom:var(--s10)}
.ftr h2{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:#67799A;font-weight:400;margin-bottom:var(--s4)}
.ftr ul{display:grid;gap:10px}
.ftr li,.ftr p{font-size:var(--t-small);line-height:1.85}
.f-brand-en{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;color:#fff}
.f-brand-ar{font-family:var(--f-body);font-size:.8125rem;color:#67799A;margin-top:3px}
.f-desc{margin-top:var(--s4);max-width:32em;color:#8FA1B8}
.ftr-legal{border-top:1px solid rgba(255,255,255,.08);padding-block:var(--s6);display:grid;gap:var(--s3)}
.ftr-legal p{font-size:var(--t-caption);color:#7387A2;line-height:1.9}
.ftr-nums{font-family:var(--f-mono);font-size:.6875rem;color:#A2B2C6;letter-spacing:.02em}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.08);padding-block:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  font-size:var(--t-caption);color:#67799A}
.ftr-bottom ul{display:flex;gap:var(--s5)}
.ftr .soon{opacity:.45;cursor:default}
.ftr .soon::after{content:" — قريباً";font-size:.6875rem;font-family:var(--f-mono)}

/* ---------- 18. عناصر مستقبلية وصور ---------- */
.phead{position:relative;background:var(--surface);border-bottom:1px solid var(--line-1);overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--blueprint);background-size:var(--blueprint-size);
  mask-image:radial-gradient(80% 90% at 88% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(80% 90% at 88% 0%,#000,transparent 70%)}
.phead-in{position:relative;z-index:1;padding-block:clamp(48px,6vw,var(--s24));max-width:44em}
.phead h1{margin-bottom:var(--s4)}
.crumb{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.07em;
  color:var(--text-3);margin-bottom:var(--s4)}
.crumb a:hover{color:var(--text)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.legal{max-width:46em}
.legal h2{font-size:1.1875rem;margin-top:var(--s10);margin-bottom:var(--s3)}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{font-size:var(--t-small);line-height:1.9}
.legal ul{display:grid;gap:9px;margin-top:var(--s3)}
.legal li{position:relative;padding-inline-start:18px}
.legal li::before{content:"";position:absolute;inset-inline-start:0;top:.9em;
  width:8px;height:1px;background:var(--teal-500)}
.legal .updated{font-family:var(--f-mono);font-size:var(--t-caption);
  color:var(--text-3);margin-bottom:var(--s8)}

.tag-soft{display:inline-block;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.1em;color:var(--text-3);border:1px solid var(--line-1);
  border-radius:var(--r1);padding:3px 8px;margin-inline-start:8px;vertical-align:middle}

.nf{min-height:56vh;display:grid;place-content:center;text-align:center;padding-block:var(--s24)}
.nf .code{font-family:var(--f-mono);font-size:clamp(3rem,8vw,5rem);color:var(--line-1);
  line-height:1;margin-bottom:var(--s5)}
.nf h1{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:var(--s4)}
.nf .btn-row{justify-content:center}
.nf ul{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:center;margin-top:var(--s8)}
.nf ul a{font-size:var(--t-small);color:var(--text-2);
  border-bottom:1px solid var(--line-1);padding-bottom:3px}
.nf ul a:hover{color:var(--text);border-color:var(--ink-600)}

/* ---------- 19. الحركة ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-g>*{opacity:0;transform:translateY(16px);
  transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out)}
.reveal-g.in>*{opacity:1;transform:none}
.reveal-g.in>*:nth-child(1){transition-delay:0ms}
.reveal-g.in>*:nth-child(2){transition-delay:70ms}
.reveal-g.in>*:nth-child(3){transition-delay:140ms}
.reveal-g.in>*:nth-child(4){transition-delay:210ms}
.reveal-g.in>*:nth-child(5){transition-delay:280ms}
.reveal-g.in>*:nth-child(6){transition-delay:350ms}
.reveal-g.in>*:nth-child(7){transition-delay:420ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal,.reveal-g>*{opacity:1!important;transform:none!important}
  .schema .draw{stroke-dashoffset:0}
  .schema .pop,.spec-card{opacity:1}
}

/* ---------- 20. المرافق ---------- */
.mt-s{margin-top:var(--s4)}
.mt-m{margin-top:var(--s6)}
.mt-l{margin-top:var(--s10)}
.stack{display:grid;gap:var(--s4)}
.center{text-align:center}

/* ---------- 21. الاستجابة ---------- */
@media (max-width:1080px){
  .ftr-top{grid-template-columns:1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1160px){
  .nav,.hdr-in>.btn{display:none}
  .burger{display:flex}
}
@media (max-width:940px){
  .hero-in{grid-template-columns:1fr;gap:var(--s10)}
  .hero-art{order:-1}
  .hero h1{max-width:none}
  .split,.split--wide{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .rail-track{grid-auto-flow:row;gap:var(--s5)}
  .rail-track::before{inset-inline:auto;inset-block:0;
    inset-inline-start:6px;width:1px;height:auto;
    background:var(--brand-grad);opacity:.8}
  .rail-step{padding-top:0;padding-inline-start:var(--s8);text-align:start}
  .rail-step::before{top:5px;inset-inline-start:0;translate:0 0}
  .rail-step em{position:static;display:block;margin-bottom:3px}
}
@media (max-width:700px){
.g-2,.g-3,.g-4,.form-grid{grid-template-columns:1fr}
  .cap{grid-template-columns:1fr;gap:7px}
  .caps{border-radius:var(--r2)}
  .step{grid-template-columns:38px 1fr;gap:var(--s4);padding:var(--s5)}
  .strip li{flex-basis:100%;border-inline-start:0;border-top:1px solid var(--line-1)}
  .strip li:first-child{border-top:0}
  .spec-card{position:static;margin-top:var(--s4);min-width:0}
  .trust-row{gap:var(--s4)}
  .data th,.data td{display:block;width:auto;padding:10px var(--s5)}
  .data th{padding-bottom:0}
  .data tr{padding-block:7px}
  .route thead{display:none}
  .route td{display:block;padding:6px var(--s5)}
  .route tr{padding-block:10px}
  .route td:last-child{padding-bottom:var(--s4)}
}
@media (max-width:560px){
  .ftr-top{grid-template-columns:1fr;gap:var(--s6)}
  .fab{padding:14px;inset-inline-start:16px;inset-block-end:16px}
  .fab span{display:none}
}


/* شريط تقدّم القراءة — خيط رفيع بألوان الهوية */
.progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:120;
  background:var(--brand-grad-x);transform:scaleX(0);transform-origin:right;
  transition:transform 80ms linear;pointer-events:none}

/* شريط إجراء ثابت على الجوال — أوضح مسار للتحويل */
.actionbar{display:none;position:fixed;inset-inline:0;inset-block-end:0;z-index:95;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--color-surface) 92%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--color-border)}
.actionbar .btn{flex:1;padding:14px 16px;font-size:.9375rem;min-height:48px}
.actionbar .btn--ghost{flex:0 0 auto;padding-inline:18px}
.actionbar .btn--ghost .icon{width:20px;height:20px}

@media (max-width:940px){
  .actionbar{display:flex}
  .fab{display:none}
  body{padding-bottom:76px}
  /* أهداف لمس لا تقل عن 44 بكسل */
  .mnav a{min-height:52px}
  .chips li{padding:11px 16px;min-height:44px}
  .opt{padding:13px 18px;min-height:46px}
  .ftr-bottom ul{gap:var(--s6)}
  .ftr li a{display:inline-block;padding-block:3px}
  /* واجهة أقصر ليصل الزائر للفعل أسرع */
  .hero-in{padding-block:clamp(36px,7vw,56px)}
}

/* منع تكبير iOS التلقائي عند التركيز على الحقول */
@media (max-width:940px){
  input[type=text],input[type=tel],input[type=email],select,textarea{font-size:16px}
}
/* تحسين قراءة الأسطر الطويلة */
.lede,.legal p{max-width:66ch}

/* إبراز الهدف عند القفز إليه بمرساة */
:target{scroll-margin-top:96px}
section[id]:target>.wrap>.sec-head{animation:hint 1.4s var(--ease)}
@keyframes hint{0%{opacity:.35}100%{opacity:1}}

/* ---------- 23. الأكورديون — أزرار قابلة للوصول ---------- */
.acc{border-top:1px solid var(--line-1)}
.acc-item{border-bottom:1px solid var(--line-1);transition:background var(--d-2) var(--ease)}
.acc-item.open{background:var(--surface)}
.sec--white .acc-item.open{background:var(--surface-2)}
.acc-btn{display:flex;align-items:flex-start;gap:var(--s4);width:100%;
  padding:var(--s5) var(--s4);background:none;border:0;cursor:pointer;text-align:start;
  font-family:var(--f-display);font-weight:500;font-size:.9688rem;line-height:1.6;
  color:var(--text);transition:color var(--d-2) var(--ease)}
.acc-btn:hover{color:var(--color-secondary)}
.acc-ico{margin-inline-start:auto;flex-shrink:0;width:18px;height:18px;margin-top:3px;
  background:currentColor;color:var(--color-accent);
  -webkit-mask: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'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: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'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--d-3) var(--ease-out)}
.acc-btn[aria-expanded="true"] .acc-ico{transform:rotate(135deg)}
.acc-panel{padding:0 var(--s4) var(--s6)}
.acc-panel p{font-size:var(--t-small);max-width:66ch}
.acc-panel p+p{margin-top:var(--s3)}
.acc-panel ol{display:grid;gap:8px;margin-top:var(--s3);counter-reset:a}
.acc-panel ol li{position:relative;padding-inline-start:26px;font-size:var(--t-small);
  line-height:1.85;color:var(--text-2);counter-increment:a}
.acc-panel ol li::before{content:counter(a);position:absolute;inset-inline-start:0;top:.15em;
  width:19px;height:19px;border-radius:50%;background:var(--color-accent-50);
  color:var(--color-accent-dark);font-family:var(--f-mono);font-size:.6875rem;
  display:grid;place-items:center}

/* قائمة الأسئلة المختصرة في الرئيسية */
.qlist{display:grid;gap:1px;background:var(--line-1);border:1px solid var(--line-1);
  border-radius:var(--r3);overflow:hidden}
.qlist a{display:flex;align-items:center;gap:var(--s4);padding:16px var(--s5);
  background:var(--surface);font-size:var(--t-small);color:var(--text);
  transition:background var(--d-2) var(--ease),padding-inline-start var(--d-2) var(--ease)}
.sec--white .qlist a{background:var(--surface-2)}
.qlist a:hover{background:var(--color-accent-50);padding-inline-start:var(--s6)}
.qlist .n{font-family:var(--f-mono);font-size:.6875rem;color:var(--text-3);flex-shrink:0;min-width:20px}
.qlist .icon{margin-inline-start:auto;width:15px;height:15px;color:var(--text-3);flex-shrink:0}

/* حالة فارغة مؤسسية */
.empty{text-align:center;padding:clamp(40px,6vw,var(--s24)) var(--s5);
  background:var(--surface);border:1px dashed var(--color-border-strong);border-radius:var(--r4)}
.sec--white .empty{background:var(--surface-2)}
.empty .iconbox{margin-inline:auto;margin-bottom:var(--s5);width:52px;height:52px}
.empty h2,.empty h3{margin-bottom:var(--s3)}
.empty p{max-width:44ch;margin-inline:auto}

/* بنية دراسة الحالة */
.case-struct{display:grid;gap:2px;counter-reset:cs}
.case-struct li{display:grid;grid-template-columns:34px 1fr;gap:var(--s4);align-items:baseline;
  padding:14px var(--s5);background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r2);font-size:var(--t-small);color:var(--text-2);counter-increment:cs}
.sec--white .case-struct li{background:var(--surface-2)}
.case-struct li::before{content:counter(cs,decimal-leading-zero);font-family:var(--f-mono);
  font-size:.6875rem;color:var(--color-accent-dark)}
.case-struct b{color:var(--text);font-weight:600}


/* ---------- 24. ضبط تجربة الجوال ---------- */
@media (max-width:700px){
  /* إيقاع رأسي أقصر — الزائر يصل للفعل أسرع */
  :root{ --sec-y:clamp(44px,10vw,64px); }
  .sec--tight{ padding-block:clamp(32px,7vw,44px); }

  /* حجم نص مريح للقراءة على الجوال */
  :root{ --t-body:1rem; --t-small:.9063rem; --t-lede:1.0625rem; --t-caption:.8125rem; }
  h1{ font-size:clamp(1.75rem,7.5vw,2.25rem); line-height:1.28; }
  h2{ font-size:clamp(1.375rem,5.6vw,1.75rem); }
  .lede{ line-height:1.8; }

  /* بطاقات أوسع من الداخل وأقرب من الحواف */
  .card,.track{ padding:var(--s5); border-radius:var(--r3); }
  .notice{ padding:var(--s5); }
  .grid{ gap:12px; }
  .sec-head{ margin-bottom:var(--s8); }

  /* الأزرار بعرض كامل — أسهل في اللمس */
  .btn-row{ gap:10px; }
  .btn-row .btn{ width:100%; justify-content:center; }
  .phead-in .btn-row .link{ justify-content:center; width:100%; }
  .cta-in .btn-row .btn{ width:100%; }

  /* شريط الإجراء الثابت */
  .actionbar .btn{ font-size:.9688rem; min-height:50px; }

  /* الواجهة الأولى */
  .hero-in{ gap:var(--s8); }
  .trust-row{ gap:var(--s4); padding-top:var(--s5); margin-top:var(--s5); }
  .trust-row li{ font-size:.875rem; }
  .spec-card{ padding:var(--s4); }

  /* الأكورديون — مساحة لمس أوسع */
  .acc-btn{ padding:var(--s5) var(--s2); font-size:.9375rem; }
  .acc-panel{ padding:0 var(--s2) var(--s5); }
  .qlist a{ padding:15px var(--s4); }
}

@media (max-width:420px){
  .wrap{ padding-inline:16px; }
  .strip li{ padding:14px 16px; }
}


/* ---------- 25. صقل التفاصيل ---------- */

/* حالات المرور — أهدأ وأدق */
.card:hover,.track:hover{ transform:translateY(-2px); }
.link:hover .arw{ transform:translateX(-3px); }
.chips li:hover{ transform:none; border-color:var(--color-accent); }
.btn--primary:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* حركة أخف وأقصر */
:root{ --d-4:520ms; }
.reveal{ transform:translateY(14px); }
.reveal-g>*{ transform:translateY(12px); }
.reveal-g.in>*:nth-child(n+5){ transition-delay:240ms; }

/* اتساق الهوامش بين الأقسام المتجاورة بالخلفية نفسها */
.sec+.sec:not(.sec--white):not(.sec--dark){ padding-top:0; }
.sec--white+.sec--white{ padding-top:0; }

/* الفواصل داخل البطاقات */
.gain{ padding-top:var(--s4); margin-top:var(--s4); }
.gain+.gain{ margin-top:var(--s3); padding-top:var(--s3); }
.card .limits{ margin-top:var(--s3); }

/* الجداول — محاذاة رأسية أوضح */
.route td,.route th{ vertical-align:middle; }
.data th{ font-weight:400; }

/* الحقول — تركيز أوضح */
.field>label{ margin-bottom:2px; }
input:hover,select:hover,textarea:hover{ border-color:var(--color-border-strong); }

/* زر بعرض كامل داخل النموذج */
.form>.btn{ justify-self:start; }

/* شريط الإجراء لا يحجب آخر عنصر */
@media (max-width:1160px){ body{ padding-bottom:80px; } }


/* ---------- 26. الشريط الثابت — ظهور ذكي ---------- */

/* ينزلق للأسفل عند وجود دعوة أخرى على الشاشة، فلا تظهر مرتين */
.actionbar{
  transition:transform 280ms var(--ease), opacity 200ms var(--ease);
  will-change:transform;
}
.actionbar[data-hide="true"]{
  transform:translateY(calc(100% + 8px));
  opacity:0;
  pointer-events:none;
}

/* توزيع واضح بلا تداخل: الدعوة تأخذ المتاح، وواتساب بعرض ثابت */
.actionbar .btn--primary{ flex:1 1 auto; min-width:0; }
.actionbar .btn--ghost{
  flex:0 0 auto; width:52px; padding:0;
  display:grid; place-items:center;
  background:var(--color-surface);
  border-color:var(--color-border-strong);
}
.actionbar .btn--ghost .icon{ width:22px; height:22px; color:var(--color-accent); }
.actionbar .btn--ghost:hover{ border-color:var(--color-accent); background:var(--color-accent-50); }

@media (prefers-reduced-motion:reduce){
  .actionbar{ transition:none; }
}


/* ---------- 27. شريط الخدمات ---------- */
.strip li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-body); font-size:var(--t-small); letter-spacing:0;
  color:var(--color-text); font-weight:500;
}
.strip .icon{ width:17px; height:17px; color:var(--color-accent); flex-shrink:0; }
@media (max-width:700px){
  .strip li{ flex-basis:100%; padding:13px var(--s5); font-size:.875rem; }
}


/* ---------- 28. القائمة المفتوحة: إخفاء كل العناصر العائمة ---------- */
.menu-open .actionbar,
.menu-open .fab{
  transform:translateY(calc(100% + 16px));
  opacity:0;
  pointer-events:none;
}
.menu-open .progress{ opacity:0; }
.fab{ transition:transform 280ms var(--ease), opacity 200ms var(--ease), background 200ms var(--ease); }
.progress{ transition:transform 80ms linear, opacity 200ms var(--ease); }

/* منع تمرير الخلفية خلف القائمة */
.menu-open{ overflow:hidden; }

/* ---------- 29. القائمة الجانبية — أخف وأكثر إحكاماً ---------- */
.mnav ul{ padding:var(--s1) 0 var(--s4); }
.mnav a{
  padding:12px 4px;
  min-height:46px;
  font-size:.9375rem;
  border-bottom:1px solid var(--line-3);
}
.mnav a:last-child{ border-bottom:0; }
.mnav a[aria-current="page"]{ color:var(--color-secondary); font-weight:600; }
.mnav a[aria-current="page"]::after{ color:var(--color-secondary); }
.mnav .btn{ margin-top:var(--s3); min-height:50px; }
@media (max-width:700px){
  .mnav a{ padding:11px 4px; min-height:44px; font-size:.9063rem; }
}


/* القائمة قابلة للتمرير على الشاشات القصيرة */
.mnav.open{
  max-height:calc(100vh - 74px);
  max-height:calc(100dvh - 74px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}


/* ---------- 30. القائمة: إبراز الإجراء + عزل الطبقة ---------- */

/* عنصر الإجراء داخل القائمة يتميّز بلون التفاعل وخط علوي */
.mnav a[href="assessment.html"],
.mnav a[href="#form"]{
  color:var(--color-primary);
  font-weight:600;
}
.mnav a[href="assessment.html"]::after,
.mnav a[href="#form"]::after{ color:var(--color-primary); }

/* ضمان: أي زر يوضع داخل القائمة لاحقاً لا يرث لون الروابط */
.mnav .btn{
  justify-content:center;
  color:var(--color-text-inv);
  border-bottom:0;
}
.mnav .btn::after{ content:none; }
.mnav .btn--ghost{ color:var(--color-text); }

/* ستارة تعزل القائمة عمّا خلفها */
.mnav.open::after{
  content:"";
  position:fixed;
  inset:0;
  top:100%;
  background:rgba(7,22,42,.34);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:-1;
  animation:fadeIn 220ms var(--ease);
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.mnav{ position:relative; z-index:101; }

/* ---------- 31. إخفاء العناصر الثابتة عند فتح القائمة ---------- */
/* تخصيص أعلى (html.menu-open) يضمن الأسبقية على أي قاعدة سابقة */
html.menu-open .actionbar,
html.menu-open .fab{
  transform:translateY(calc(100% + 24px));
  opacity:0;
  pointer-events:none;
}
html.menu-open .progress{ opacity:0; }


/* ---------- 32. التواصل المباشر أسفل النموذج ---------- */
.direct{
  margin-top:var(--s6);
  padding-top:var(--s6);
  border-top:1px dashed var(--color-border);
}
.direct>p{
  font-size:var(--t-small);
  color:var(--color-text-2);
  margin-bottom:var(--s4);
}
.direct-row{ display:flex; flex-wrap:wrap; gap:10px; }
.direct-row .btn{ flex:1 1 auto; justify-content:center; }
.direct-row .icon{ color:var(--color-accent); }
.direct-row .mono{ font-size:.875rem; letter-spacing:.02em; }
@media (max-width:700px){
  .direct-row .btn{ flex-basis:100%; }
}


/* ---------- 33. حالات المرور على الأجهزة اللمسية ---------- */
/* على الجوال تبقى حالة hover عالقة بعد اللمس، فيظهر الزر بلون التمرير.
   نحصر كل تأثيرات المرور في الأجهزة التي تملك مؤشراً فعلياً. */
@media (hover:none){
  .btn--primary:hover{ background:var(--color-text); box-shadow:var(--e2); transform:none; }
  .btn--ghost:hover{ border-color:var(--color-border); background:transparent; }
  .sec--dark .btn--primary:hover{ background:var(--color-accent); }
  .sec--dark .btn--ghost:hover{ border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06); }
  .card:hover,.track:hover,.stat:hover,.tile:hover,.list-item:hover{
    transform:none; box-shadow:none; border-color:var(--color-border);
  }
  .card:hover .iconbox,.track:hover .iconbox{ transform:none; }
  .chips li:hover{ border-color:var(--color-border); color:var(--color-text-2); }
  .nav a:hover::after{ transform:scaleX(0); }
  .nav a[aria-current="page"]:hover::after{ transform:scaleX(1); }
  .link:hover .arw,.link:hover .icon{ transform:none; }
  .btn:hover .icon{ transform:none; }
  .fab:hover{ background:var(--color-text); transform:none; }
  .qlist a:hover{ background:var(--color-surface); padding-inline-start:var(--s5); }
  .sec--white .qlist a:hover{ background:var(--color-bg); }
  .cap:hover{ background:transparent; }
  .acc-btn:hover{ color:var(--color-text); }
  .actionbar .btn--ghost:hover{ border-color:var(--color-border-strong); background:var(--color-surface); }
  .direct-row .btn:hover{ border-color:var(--color-border); background:transparent; }
  /* الحالة النشطة فقط تُعطي ارتداداً لحظياً عند اللمس */
  .btn:active{ transform:translateY(1px); opacity:.92; }
  .card:active,.track:active{ border-color:var(--color-border-strong); }
}

/* v1.5 bilingual control */
.se-lang-toggle{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:999px;padding:.5rem .8rem;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}.se-lang-toggle:hover{border-color:var(--color-primary);color:var(--color-primary)}
html[dir="ltr"] body{direction:ltr;text-align:left}html[dir="ltr"] .nav,html[dir="ltr"] .hdr-in,html[dir="ltr"] .row{direction:ltr}html[dir="ltr"] .icon{transform:none}
@media(max-width:900px){.hdr-in>.se-lang-toggle{margin-inline-start:auto;margin-inline-end:.35rem}}

/* v1.7 UX system */
.se-lang-toggle{order:8;flex:0 0 auto;margin-inline-start:4px}.hdr-in>.btn{order:9}.burger{order:10}
@media(min-width:901px) and (max-width:1180px){.hdr-in{gap:8px}.nav a{font-size:.77rem;padding-inline:7px}.hdr .btn{padding-inline:12px;font-size:.76rem}.brand-en{font-size:.9rem}.brand-ar{font-size:.6875rem}}
@media(max-width:1280px){.nav{display:none}.burger{display:flex}.hdr-in>.btn{margin-inline-start:auto}.se-lang-toggle{margin-inline-start:0}}
.hero-in{padding-block:clamp(64px,7vw,104px)}.sec{padding-block:clamp(64px,7vw,96px)}
html[dir="ltr"] .hero h1{max-width:14em;font-size:clamp(2.5rem,5.2vw,5.15rem);line-height:1.02}.hero-art{min-width:0}
@media(max-width:700px){.hero-in{padding-block:44px 54px}.sec{padding-block:52px}.hdr-in{height:66px}.se-lang-toggle{margin-inline-start:auto}
/* زر الدعوة يبقى في الترويسة بصيغة مختصرة بدل إخفائه تمامًا:
   كان يختفي ويعتمد على الشريط السفلي وحده، والشريط ينزلق عند وجود دعوة
   أخرى على الشاشة، فتمر لحظات بلا أي دعوة مرئية. */
.hdr-in>.btn{display:inline-flex;padding-inline:12px;font-size:.72rem;white-space:nowrap;flex-shrink:0}
.hdr-in>.btn .btn-long{display:none}.hdr-in>.btn .btn-short{display:inline}}

/* ================================================================
   v1.7.1 responsive hotfix — English hero, header, and portal gate
   Scope: layout only. No content, auth, database, or behavior changes.
   ================================================================ */

/* Long English phrases must be allowed to wrap inside their grid column. */
html[dir="ltr"] .hero h1{
  max-width:12.5ch;
  font-size:clamp(2.65rem,4.65vw,4.75rem);
  line-height:1.035;
  letter-spacing:-.035em;
  text-wrap:balance;
  overflow-wrap:normal;
}
html[dir="ltr"] .hero h1 em{
  white-space:normal;
  background:linear-gradient(transparent 68%,color-mix(in srgb,var(--brand-mint) 55%,transparent) 68%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-inline:.02em;
}
html[dir="ltr"] .hero h1 em::after{display:none}
html[dir="ltr"] .hero .lede{max-width:35rem}
html[dir="ltr"] .hero-in{
  grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
  gap:clamp(32px,4vw,64px);
}
html[dir="ltr"] .hero-in>div{min-width:0}
html[dir="ltr"] .hero-art{width:100%;max-width:520px;justify-self:end}
html[dir="ltr"] .schema-wrap{min-width:0}
html[dir="ltr"] .spec-card{min-width:250px;max-width:290px;padding:18px 20px}
html[dir="ltr"] .spec-card div{gap:22px}
html[dir="ltr"] .spec-card dd{white-space:normal;text-align:right;max-width:132px;line-height:1.45}
html[dir="ltr"] .legend{gap:12px 20px}

/* Laptop header: switch to the compact navigation before clipping can occur. */
@media (max-width:1280px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-in>.btn{margin-inline-start:auto}
  .se-lang-toggle{margin-inline-start:0}
}

/* Medium laptops: preserve brand, language and CTA with comfortable breathing room. */
@media (min-width:1041px) and (max-width:1280px){
  .hdr-in{gap:10px}
  .hdr-in>.btn{display:inline-flex;max-width:210px;padding-inline:14px;font-size:.75rem}
  .se-lang-toggle{font-size:.75rem;padding:.48rem .72rem}
}

/* English home hero at common laptop widths. */
@media (min-width:941px) and (max-width:1280px){
  html[dir="ltr"] .hero h1{font-size:clamp(2.75rem,4.4vw,4rem);max-width:13ch}
  html[dir="ltr"] .hero-in{grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:34px}
  html[dir="ltr"] .spec-card{min-width:230px;max-width:260px}
}

/* Portal login: give the form a stable column and prevent headline collisions. */
html[dir="ltr"] #gate .hero-in{
  grid-template-columns:minmax(0,1fr) minmax(390px,460px);
  gap:clamp(40px,5vw,74px);
  align-items:center;
}
html[dir="ltr"] #gate .hero h1{
  max-width:12ch;
  font-size:clamp(2.65rem,4.15vw,4.25rem);
  line-height:1.04;
}
html[dir="ltr"] #gate .hero-art{max-width:460px;width:100%;justify-self:end}
html[dir="ltr"] #gate .track{width:100%}
html[dir="ltr"] #gate .portal-login{max-width:none;width:100%;margin-inline:0}
html[dir="ltr"] #gate .portal-login .field>span{text-align:left}
html[dir="ltr"] #gate .note{text-align:left}

@media (min-width:941px) and (max-width:1180px){
  html[dir="ltr"] #gate .hero-in{grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:34px}
  html[dir="ltr"] #gate .hero h1{font-size:clamp(2.45rem,4vw,3.45rem);max-width:13ch}
}

/* Tablet / mobile: stack cleanly with the message first and no horizontal overflow. */
@media (max-width:940px){
  html[dir="ltr"] .hero-in,
  html[dir="ltr"] #gate .hero-in{grid-template-columns:1fr;gap:28px}
  html[dir="ltr"] .hero h1,
  html[dir="ltr"] #gate .hero h1{max-width:none;font-size:clamp(2.25rem,8.5vw,3.25rem);text-wrap:balance}
  html[dir="ltr"] .hero-art,
  html[dir="ltr"] #gate .hero-art{max-width:620px;width:100%;justify-self:stretch;order:0}
  html[dir="ltr"] #gate .hero-art{max-width:520px}
  html[dir="ltr"] .spec-card{max-width:none}
}

@media (max-width:700px){
  html[dir="ltr"] .hero h1,
  html[dir="ltr"] #gate .hero h1{font-size:clamp(2rem,10vw,2.75rem);line-height:1.07}
  html[dir="ltr"] #gate .hero-in{padding-block:36px 46px}
}

/* Defensive overflow guard for translated content. */
.hdr,.hero,.hero-in,.hero-art,#gate,#gate .track{min-width:0}
html[dir="ltr"] body{overflow-x:hidden}


/* ================================================================
   v1.7.2 — Client proof, compact navigation and language switcher
   ================================================================ */
.client-proof{padding-block:34px;border-block:1px solid var(--line-2);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--teal-100)))}
.client-proof .wrap{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.55fr);align-items:center;gap:clamp(28px,5vw,72px)}
.client-proof-head .eyebrow{margin-bottom:8px}.client-proof-head h2{font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.25;margin:0;max-width:18em}
.client-wordmarks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line-2);border-radius:var(--r3);overflow:hidden;background:var(--surface)}
.client-wordmark{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:18px 12px;border-inline-end:1px solid var(--line-2);text-align:center}.client-wordmark:last-child{border-inline-end:0}
.client-wordmark strong{font-family:var(--f-display);font-size:1rem;letter-spacing:.02em;color:var(--text)}.client-wordmark span{font-size:.72rem;color:var(--text-3)}
.se-lang-toggle{display:inline-flex!important;align-items:center;gap:2px;padding:3px!important;border:1px solid var(--line-1)!important;background:var(--surface-2)!important;border-radius:999px!important;min-width:82px;justify-content:center}
.se-lang-toggle .lang-opt{min-width:35px;padding:7px 9px;border-radius:999px;font-size:.72rem;font-weight:700;color:var(--text-3);line-height:1;transition:.2s ease}
.se-lang-toggle .lang-opt.is-active{background:var(--teal-500);color:#062a25;box-shadow:0 2px 8px rgba(29,184,164,.18)}
.mnav-lang-slot{padding:14px 0!important;border-bottom:1px solid var(--line-3)}.mnav-lang-slot .se-lang-toggle{width:100%;max-width:150px}.mnav .btn{justify-content:center}.mnav .btn::after{display:none}
@media(max-width:1280px){.hdr-in>.se-lang-toggle{display:none!important}.mnav-lang-slot .se-lang-toggle{display:inline-flex!important}}
@media(min-width:1281px){.mnav-lang-slot{display:none!important}}
@media(max-width:760px){.client-proof .wrap{grid-template-columns:1fr}.client-wordmarks{grid-template-columns:repeat(2,1fr)}.client-wordmark:nth-child(2){border-inline-end:0}.client-wordmark:nth-child(-n+2){border-bottom:1px solid var(--line-2)}}


/* v1.7.2 — operations portal showcase */
.platform-showcase-grid{align-items:center}.platform-audience{display:grid;gap:0;margin-top:28px;border-block:1px solid var(--line-2)}.platform-audience>div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-3)}.platform-audience>div:last-child{border-bottom:0}.platform-audience b{font-size:.86rem}.platform-audience span{font-size:.84rem;color:var(--text-3)}
.portal-map-card{border:1px solid var(--line-1);border-radius:20px;background:var(--surface);box-shadow:var(--e2);overflow:hidden}.portal-map-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}.portal-map-top span{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.09em;color:var(--text-3)}.portal-map-top strong{font-family:var(--f-display);font-size:.9rem}.portal-map-flow{padding:22px;display:grid;gap:12px}.map-node,.map-record{border:1px solid var(--line-2);border-radius:13px;padding:14px 15px;background:#fff}.map-node small{display:block;font-size:.6875rem;color:var(--text-3);margin-bottom:3px}.map-node b{display:block;font-size:.9rem}.map-node span,.map-record span{display:block;font-size:.72rem;color:var(--text-3);margin-top:4px}.map-node--client{border-color:color-mix(in srgb,var(--teal-500) 35%,var(--line-2));background:color-mix(in srgb,var(--teal-100) 18%,#fff)}.map-arrow{text-align:center;font-family:var(--f-mono);color:var(--teal-500);line-height:1}.map-branches{display:grid;grid-template-columns:1fr 1fr;gap:10px}.map-record{display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:color-mix(in srgb,var(--violet-500) 30%,var(--line-2))}.map-record span{margin:0;text-align:end}
@media(max-width:760px){.platform-audience>div{grid-template-columns:1fr;gap:4px}.map-branches{grid-template-columns:1fr}.map-record{display:block}.map-record span{text-align:start;margin-top:4px}}

/* v1.7.2 — mobile navigation as a focused full-screen menu */
@media(max-width:1280px){
  .hdr{z-index:200}
  .mnav{position:fixed!important;inset:66px 0 0!important;z-index:190!important;background:var(--ink-900)!important;border-top:1px solid rgba(255,255,255,.08)!important;overflow:auto;overscroll-behavior:contain}
  .mnav.open{display:block!important;animation:menuIn .24s var(--ease-out)}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .mnav .wrap{max-width:640px;padding-top:18px;padding-bottom:34px}
  .mnav ul{padding:0!important}
  .mnav li{list-style:none}
  .mnav a:not(.btn){color:#b9c7d6!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding:15px 6px!important;min-height:54px!important;font-family:var(--f-display);font-size:1.05rem!important;font-weight:600!important}
  .mnav a:not(.btn)::after{color:#5bd4c1!important}
  .mnav a[aria-current="page"]{color:#fff!important}
  .mnav a[aria-current="page"]::after{color:#5bd4c1!important}
  .mnav-lang-slot{border-bottom:0!important;padding:22px 0 8px!important}
  .mnav-lang-slot .se-lang-toggle{background:#0f2032!important;border-color:rgba(91,212,193,.28)!important;min-width:142px!important}
  .mnav-lang-slot .se-lang-toggle .lang-opt{color:#8fa2b6}
  .mnav .btn{margin-top:18px!important;min-height:54px!important;background:var(--teal-500)!important;color:#062a25!important;border-color:transparent!important}
  .mnav.open::after{display:none!important}
}
@media(min-width:701px) and (max-width:1280px){.mnav{inset-block-start:74px!important}}

/* ======================================================================
   v1.9 Production Candidate — client proof polish
   ====================================================================== */
.client-logos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line-2);border-radius:var(--r3);overflow:hidden;background:var(--surface)}
.client-logo{min-height:104px;display:flex;align-items:center;justify-content:center;padding:16px 14px;border-inline-end:1px solid var(--line-2);background:#fff}
.client-logo:last-child{border-inline-end:0}.client-logo img{display:block;width:100%;height:62px;object-fit:contain;object-position:center;filter:none}.client-logo--dark{background:#fff}.client-logo--dark img{height:56px}
@media(max-width:1080px){.client-proof .wrap{grid-template-columns:1fr}.client-logos{grid-template-columns:repeat(4,1fr)}.client-logo{border-bottom:1px solid var(--line-2)}.client-logo:nth-child(4n){border-inline-end:0}}
@media(max-width:620px){.client-logos{grid-template-columns:repeat(2,1fr)}.client-logo{min-height:92px;padding:13px}.client-logo:nth-child(2n){border-inline-end:0}.client-logo img{height:54px}.client-logo:last-child{grid-column:1/-1}.client-proof{padding-block:28px}}

/* ======================================================================
   v1.9.1 — iOS mobile drawer hotfix + client logo background correction
   ====================================================================== */
/* كل بطاقات الشعارات بيضاء. أُعيد بناء أصول americana و utec و mohammad-alhabib
   بخلفية شفافة وحبر داكن، فلم يعد أي شعار يحتاج بطاقة داكنة. */
.client-logo--dark{background:#fff}

@media(max-width:1280px){
  body>.mnav{
    position:fixed!important;
    inset-inline:0!important;
    inset-block-start:66px!important;
    inset-block-end:0!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    z-index:9999!important;
    background:var(--ink-900)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    isolation:isolate;
  }
  body>.mnav.open{display:block!important}
}
@media(min-width:701px) and (max-width:1280px){body>.mnav{inset-block-start:74px!important}}
/* ==========================================================================
   Second Eye Security — رموز مشتقة ناقصة
   هذه الرموز مستدعاة داخل assets/css/style.css لكنها غير معرّفة في tokens.css،
   فتظهر العناصر التالية بلا لون على الموقع الحالي:
     · أرقام بنود الأكورديون  (.acc-panel ol li::before)
     · رسالة نجاح النموذج     (.form-msg.ok)
     · تظليل قائمة الأسئلة    (.qlist a:hover)
     · حالة الخطأ في النموذج  (.form-msg.bad)
   كلها اشتقاقات من ألوان tokens.css بواسطة color-mix — بلا أي صبغة جديدة.
   اربط هذا الملف بعد tokens.css في جميع صفحات الموقع، أو انقل الكتلة إليه.
   ========================================================================== */

/* ── القيم الثابتة أولًا: تعمل في كل المتصفحات ── */
:root{
  --color-accent-50:    #ECF6F5;
  --color-accent-dark:  #0D7670;
  --color-success-50:   #ECF6F5;
  --color-secondary-50: #F1EFF6;
  --color-error-50:     #F9EFEE;

  /* حد التمرير — القيمة مستخدمة أصلًا داخل style.css على
     .card:hover و .track:hover و .step:hover؛ رُفعت هنا إلى رمز
     ليتوقف تكرارها يدويًا في أي ملف جديد. */
  --color-border-hover: #D4DEEA;
}

/* ── الاشتقاق الحيّ عند دعم color-mix: يتتبع أي تغيير في tokens.css ── */
@supports (color: color-mix(in srgb, red 50%, white)){
  :root{
    --color-accent-50:    color-mix(in srgb, var(--color-accent) 8%,  #fff);
    --color-accent-dark:  color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
    --color-success-50:   color-mix(in srgb, var(--color-success) 8%, #fff);
    --color-secondary-50: color-mix(in srgb, var(--color-secondary) 8%, #fff);
    --color-error-50:     color-mix(in srgb, var(--color-error) 8%,  #fff);
  }
}
/* Second Eye v1.11 — public-site review fixes (M-001..M-007) */

/* M-002: solution cards use a consistent vertical rhythm. */
.grid.g-3 > .track{height:100%}
.track .track-head{min-height:78px}
.track .when{margin-bottom:0;min-height:2.9em}
.track ul{flex:1;margin-top:var(--s4)}
.track .link{margin-top:auto;padding-top:var(--s4)}

/* M-003: VOX Cinemas as a clean typographic wordmark when no local brand asset exists. */
.client-logos{grid-template-columns:repeat(8,minmax(0,1fr))}
.client-logo--vox{background:#fff}
.vox-wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#111827;font-family:Arial,sans-serif;font-size:1.45rem;font-weight:900;line-height:.9;letter-spacing:-.06em}
.vox-wordmark b{font-size:.47em;font-weight:800;letter-spacing:.24em;margin-top:7px;margin-inline-start:.24em}
@media(max-width:1080px){.client-logos{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.client-logos{grid-template-columns:repeat(2,1fr)}.client-logo:last-child{grid-column:auto}}

/* M-004: value-led platform benefits. */
.platform-benefits>div{grid-template-columns:140px 1fr}
.platform-benefits b{font-family:var(--f-display);font-weight:800;letter-spacing:0;text-transform:none}
@media(max-width:760px){.platform-benefits>div{grid-template-columns:1fr}}

/* M-001: compact home knowledge base. */
.home-faq .wrap{max-width:1000px}
.home-faq .home-faq-list{margin-top:var(--s5)}
.home-faq .btn-row{margin-top:var(--s6)}

/* M-005: keep sector cards concise and scannable. */
body:has(.phead) .grid.g-2 .card--rule .gain{margin-top:var(--s5)}
body:has(.phead) .grid.g-2 .card--rule .limits{margin-bottom:0}

/* M-007: English follows the same visual scale as Arabic instead of becoming oversized. */
html[dir="ltr"] .hero h1{font-size:clamp(2.25rem,4.05vw,3.9rem)!important;max-width:15ch!important;line-height:1.06!important;letter-spacing:-.028em!important}
html[dir="ltr"] .hero .lede{font-size:clamp(.98rem,1.25vw,1.08rem);max-width:38rem}
html[dir="ltr"] .nav a{font-size:.8rem}
html[dir="ltr"] .btn{font-size:.82rem}
@media(max-width:700px){
 html[dir="ltr"] .hero h1{font-size:clamp(2rem,9vw,2.65rem)!important;max-width:13ch!important;line-height:1.08!important}
 html[dir="ltr"] .hero .lede{font-size:.96rem}
}
/* Second Eye public site v1.12.0 QA polish */
html[dir="rtl"] .eyebrow,html[dir="rtl"] .mono,html[dir="rtl"] [class*="kicker"]{letter-spacing:0!important}
/* Keep English visual hierarchy aligned with Arabic. */
html[lang="en"] .hero h1,html[dir="ltr"] .hero h1{font-size:clamp(2.35rem,5.2vw,4.6rem)!important;line-height:1.02!important}
html[lang="en"] body,html[dir="ltr"] body{font-size:1rem}
/* ==========================================================================
   Second Eye Operations — طبقة البوابة
   تعتمد كليًا على tokens.css و style.css. القاعدة الملزمة:
     · لا قيمة لونية مكتوبة يدويًا — فقط var(--color-*) أو var(--brand-*)
     · لا نصف قطر ولا ظل ولا مسافة خارج --r* / --e* / --s*
     · لا حركة خارج --d* / --ease
     · أي مكوّن له مقابل في style.css يُستخدم كما هو ولا يُعاد تعريفه
   الترتيب: tokens.css ← style.css ← tokens-ext.css ← portal.css
   ========================================================================== */

/* ── قيم مشتقة: ثابتة أولًا ثم color-mix عند دعم المتصفح ──
   المتصفحات القديمة تحصل على القيمة الثابتة المكافئة، فلا يختفي أي لون. */
:root{
  --pm-1:#EFE3D3;
  --pm-2:#E0CBAC;
  --pm-3:#F9F4EE;
  --pm-4:#F8F3EB;
  --pm-5:#DFE9EF;
  --pm-6:#F1F5F8;
  --pm-7:#DEE0F0;
  --pm-8:#F1F2F8;
  --pm-9:rgba(255,255,255,.92);
  --pm-10:rgba(255,255,255,.86);
  --pm-11:rgba(7,22,42,.42);
  --pm-12:rgba(7,22,42,.52);
  --pm-13:#F2DAD9;
  --pm-14:#E7BDBC;
  --pm-15:#E5F3F3;
  --pm-16:#DEEFEF;
  --pm-17:#D3EAE8;
  --pm-18:#E7E5F7;
  --pm-19:#E3DFED;
}
@supports (color: color-mix(in srgb, red 50%, white)){
:root{
  --pm-1:color-mix(in srgb,var(--amber-600) 18%,transparent);
  --pm-2:color-mix(in srgb,var(--amber-600) 34%,transparent);
  --pm-3:color-mix(in srgb,var(--amber-600) 7%,var(--color-surface));
  --pm-4:color-mix(in srgb,var(--amber-600) 8%,var(--color-surface));
  --pm-5:color-mix(in srgb,var(--brand-steel) 18%,transparent);
  --pm-6:color-mix(in srgb,var(--brand-steel) 8%,var(--color-surface));
  --pm-7:color-mix(in srgb,var(--color-primary) 16%,transparent);
  --pm-8:color-mix(in srgb,var(--color-primary) 7%,var(--color-surface));
  --pm-9:color-mix(in srgb,var(--color-surface) 92%,transparent);
  --pm-10:color-mix(in srgb,var(--surface) 86%,transparent);
  --pm-11:color-mix(in srgb,var(--ink-900) 42%,transparent);
  --pm-12:color-mix(in srgb,var(--ink-900) 52%,transparent);
  --pm-13:color-mix(in srgb,var(--red-600) 18%,transparent);
  --pm-14:color-mix(in srgb,var(--red-600) 32%,transparent);
  --pm-15:color-mix(in srgb,var(--teal-500) 14%,transparent);
  --pm-16:color-mix(in srgb,var(--teal-500) 18%,transparent);
  --pm-17:color-mix(in srgb,var(--teal-600) 18%,transparent);
  --pm-18:color-mix(in srgb,var(--violet-500) 14%,transparent);
  --pm-19:color-mix(in srgb,var(--violet-600) 16%,transparent);
}
}


/* ══════════════════════════════════════════════════════════════════════════
   5) طبقة البوابة — مكوّنات غير موجودة في الموقع (شريط جانبي، جداول عمليات،
   قوائم إغلاق، نوافذ). مبنية حصراً على رموز tokens.css وأنماط style.css.
   لا لون ولا نصف قطر ولا ظل ولا حركة خارج ما هو معرّف أعلاه.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- الهيكل ---- */
#app{display:none}
.shell{display:grid;grid-template-columns:264px 1fr;min-height:100dvh}
.side{background:var(--surface);border-inline-start:1px solid var(--line-1);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh}
.side-head{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2);height:74px;display:flex;align-items:center}
.side-nav{padding:var(--s3) var(--s3);overflow-y:auto;flex:1}
.nav-label{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);padding:var(--s4) var(--s2) var(--s2)}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  padding:10px 11px;border-radius:var(--r2);background:none;border:0;cursor:pointer;
  font-size:.8438rem;font-weight:500;color:var(--text-2);
  transition:color var(--d-2) var(--ease),background var(--d-2) var(--ease)}
.nav-item::after{content:"";position:absolute;inset-inline:11px;bottom:5px;height:1.5px;
  background:var(--teal-500);border-radius:2px;
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-2) var(--ease-out)}
.nav-item:hover{color:var(--text)}
.nav-item:hover::after{transform:scaleX(1)}
.nav-item.on{color:var(--text);background:var(--surface-3)}
.nav-item.on::after{transform:scaleX(1)}
.nav-item .icon{width:18px;height:18px;color:var(--text-3)}
.nav-item.on .icon{color:var(--teal-600)}
.nav-item .pill{margin-inline-start:auto;font-family:var(--f-mono);font-size:.6875rem;
  padding:2px 7px;border-radius:var(--r-full);
  background:var(--color-accent-50);color:var(--color-accent-dark)}
.nav-item .pill.hot{background:var(--color-error-50);color:var(--red-600)}
.side-user{border-top:1px solid var(--line-2);padding:var(--s3) var(--s4)}
.ru{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--ink-800);color:var(--color-text-inv);font-family:var(--f-display);font-weight:600;font-size:.8125rem}
.ru b{display:block;font-family:var(--f-display);font-weight:500;font-size:.8125rem;color:var(--text)}
.ru i{display:block;font-style:normal;font-size:.6875rem;color:var(--text-3)}
.ru button{margin-inline-start:auto;background:none;border:0;cursor:pointer;color:var(--text-3);
  padding:6px;border-radius:var(--r1);transition:color var(--d-2) var(--ease)}
.ru button:hover{color:var(--red-600)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:100;height:74px;display:flex;align-items:center;gap:var(--s3);
  padding-inline:var(--gutter);
  background:var(--pm-10);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);transition:box-shadow var(--d-2) var(--ease)}
.topbar[data-stuck="true"]{box-shadow:var(--e2);border-bottom-color:var(--line-1)}
.tb-title{flex:1;min-width:0}
.tb-title h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tb-title p{font-size:var(--t-caption);color:var(--text-3);line-height:1.5}
.bell{position:relative;width:44px;height:44px;flex-shrink:0;background:none;
  border:1px solid var(--border);border-radius:var(--r2);display:grid;place-items:center;
  cursor:pointer;color:var(--text-2);transition:border-color var(--d-2) var(--ease),color var(--d-2) var(--ease)}
.bell:hover{border-color:var(--ink-600);color:var(--text)}
.bell .bdg{position:absolute;top:-5px;inset-inline-start:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-full);background:var(--violet-600);color:var(--color-text-inv);border:2px solid var(--surface);
  font-family:var(--f-mono);font-size:.6875rem;display:grid;place-items:center}
.content{padding:var(--s8) var(--gutter) var(--s24);max-width:1360px;width:100%}

/* ---- امتدادات الأزرار على نفس نمط .btn ---- */
.btn--ok{background:var(--teal-600);color:var(--color-text-inv);box-shadow:var(--e2)}
.btn--ok:hover{background:var(--color-accent-dark);box-shadow:var(--e3)}
.btn--danger{background:transparent;color:var(--red-600);border-color:var(--pm-14)}
.btn--danger:hover{background:var(--color-error-50);border-color:var(--red-600)}
.btn--block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn:disabled:hover{background:inherit;border-color:inherit;transform:none}

/* ---- البطاقات: نفس .card مع رأس/جسم داخلي ---- */
.card:has(.card-head),.card:has(.card-pad),.card:has(.tbl-wrap){padding:0}
.card:has(.card-head):hover,.card:has(.tbl-wrap):hover{transform:none;box-shadow:none;border-color:var(--line-1)}
.card-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2)}
.card-head h3{flex:1;font-size:.9375rem;font-weight:600;margin:0}
.card-head .hint{font-size:var(--t-caption);color:var(--text-3)}
.card-pad{padding:var(--s5)}
.card .empty{border:0;background:transparent;padding:var(--s8) var(--s4)}
.card .empty .icon{width:26px;height:26px;color:var(--text-3);margin-inline:auto;margin-bottom:var(--s3)}
.card .empty b{display:block;font-family:var(--f-display);font-weight:500;
  font-size:.9375rem;color:var(--text);margin-bottom:4px}
.card .empty p{font-size:var(--t-small);color:var(--text-3)}

/* ---- بطاقة أمر العمل — لغة .track ---- */
.wo{position:relative;display:block;width:100%;text-align:start;overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-1);border-radius:var(--r3);
  padding:var(--s5);
  transition:border-color var(--d-2) var(--ease),transform var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.wo::after{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--brand-grad-x);
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-3) var(--ease-out)}
.wo:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--color-border-hover)}
.wo:hover::after{transform:scaleX(1)}
.wo-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:var(--s3)}
.wo-id{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--text-3)}
.wo h4{font-family:var(--f-display);font-weight:600;font-size:.9688rem;color:var(--text);
  line-height:1.5;margin-bottom:3px}
.wo .sub{font-size:var(--t-caption);color:var(--text-3)}
.wo-meta{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px dashed var(--line-1)}
.wo-meta div{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}
.wo-meta b{display:block;font-family:var(--f-body);font-weight:500;font-size:.75rem;
  letter-spacing:0;text-transform:none;color:var(--text);margin-top:3px}

/* ---- الوسوم ---- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);
  font-size:.6875rem;font-weight:500;white-space:nowrap;border:1px solid transparent;line-height:1.6}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.t-new{color:var(--violet-600);background:var(--color-secondary-50);
  border-color:var(--pm-19)}
.t-assigned{color:var(--brand-steel);background:var(--pm-6);
  border-color:var(--pm-5)}
.t-progress{color:var(--color-primary);background:var(--pm-8);
  border-color:var(--pm-7)}
.t-review{color:var(--amber-600);background:var(--pm-4);
  border-color:var(--pm-1)}
.t-done{color:var(--color-accent-dark);background:var(--color-accent-50);
  border-color:var(--pm-17)}
.t-reject{color:var(--red-600);background:var(--color-error-50);
  border-color:var(--pm-13)}
.t-grey{color:var(--text-3);background:var(--surface-3);border-color:var(--line-1)}

/* ---- المؤشرات ---- */
.stat{position:relative;background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r3);padding:var(--s5);overflow:hidden;
  transition:border-color var(--d-2) var(--ease),transform var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.stat::before{content:"";position:absolute;inset-block:var(--s5);inset-inline-end:-1px;width:2px;
  border-radius:2px;background:var(--teal-500);transform:scaleY(.4);transform-origin:center;
  transition:transform var(--d-3) var(--ease-out)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--color-border-hover)}
.stat:hover::before{transform:scaleY(1)}
.stat .k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.stat .v{font-family:var(--f-mono);font-weight:500;font-size:1.75rem;line-height:1.25;
  color:var(--text);margin-top:6px;font-variant-numeric:tabular-nums}
.stat .s{font-size:var(--t-caption);color:var(--text-3);margin-top:2px}

/* ---- الجداول — لغة .route ---- */
.tbl-wrap{overflow-x:auto}
.tbl-wrap table{width:100%}
.tbl-wrap th{text-align:start;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);font-weight:400;background:var(--surface-2);
  padding:var(--s3) var(--s5);white-space:nowrap;border-bottom:1px solid var(--line-2)}
.tbl-wrap td{padding:var(--s4) var(--s5);font-size:var(--t-small);color:var(--text-2);
  border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl-wrap tr:last-child td{border-bottom:0}
.tbl-wrap tbody tr{transition:background var(--d-2) var(--ease)}
.tbl-wrap tbody tr.clickable{cursor:pointer}
.tbl-wrap tbody tr.clickable:hover{background:var(--surface-2)}

/* ---- رأس التفاصيل ---- */
.detail-head{position:relative;background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r4);overflow:hidden;margin-bottom:var(--s5)}
.detail-strip{height:2px;background:var(--brand-grad-x)}
.detail-body{padding:clamp(20px,3vw,var(--s8))}
.detail-body h2{font-size:clamp(1.125rem,1.8vw,1.5rem);margin-bottom:4px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s5);
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px dashed var(--line-1)}
.kv .k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-3)}
.kv .v{font-size:var(--t-small);font-weight:500;color:var(--text);margin-top:4px}

/* ---- خط المراحل ---- */
.flowline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;margin-top:var(--s6)}
.flowline::before{content:"";position:absolute;inset-inline:0;top:6px;height:1px;background:var(--line-1)}
.flowstep{position:relative;text-align:center;padding-top:var(--s6);padding-inline:var(--s2)}
.flowstep::before{content:"";position:absolute;top:0;inset-inline-start:50%;translate:50% 0;
  width:13px;height:13px;border-radius:50%;background:var(--surface);
  border:1.5px solid var(--line-1);transition:background var(--d-2) var(--ease)}
.flowstep.done::before{background:var(--teal-500);border-color:var(--teal-500)}
.flowstep.cur::before{border-color:var(--violet-500);
  box-shadow:0 0 0 4px var(--pm-18)}
.flowstep span{font-size:.6875rem;color:var(--text-3);line-height:1.6}
.flowstep.done span,.flowstep.cur span{color:var(--text);font-weight:500}

/* ---- قائمة الإغلاق ---- */
.ck{border:1px solid var(--line-1);border-radius:var(--r3);overflow:hidden;
  background:var(--surface);margin-bottom:var(--s3)}
.ck-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.ck-h .n{width:22px;height:22px;border-radius:var(--r1);display:grid;place-items:center;flex-shrink:0;
  background:var(--surface);border:1px solid var(--line-1);
  font-family:var(--f-mono);font-size:.6875rem;color:var(--text-3)}
.ck.ok .ck-h{background:var(--color-accent-50);border-bottom-color:var(--pm-16)}
.ck.ok .ck-h .n{background:var(--teal-600);border-color:var(--teal-600);color:var(--color-text-inv)}
.ck-h b{flex:1;font-family:var(--f-display);font-weight:500;font-size:.875rem;color:var(--text)}
.ck-h .st{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--text-3)}
.ck.ok .ck-h .st{color:var(--color-accent-dark)}
.ck-b{padding:var(--s5)}
.thumbs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.thumb{width:76px;height:76px;border-radius:var(--r2);object-fit:cover;
  border:1px solid var(--line-1);background:var(--surface-3)}
.thumb-box{position:relative}
.thumb-x{position:absolute;top:-6px;inset-inline-end:-6px;width:22px;height:22px;border-radius:50%;
  background:var(--ink-800);color:var(--color-text-inv);border:0;cursor:pointer;font-size:.75rem;line-height:1;
  display:grid;place-items:center;box-shadow:var(--e2)}
.filepick{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  padding:var(--s5);border:1px dashed var(--color-border-strong);border-radius:var(--r2);
  cursor:pointer;font-family:var(--f-display);font-weight:500;font-size:.875rem;color:var(--text-2);
  background:var(--surface-2);transition:border-color var(--d-2) var(--ease),color var(--d-2) var(--ease)}
.filepick:hover{border-color:var(--teal-500);color:var(--teal-600)}
.filerow{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--line-1);border-radius:var(--r2);background:var(--surface-2);margin-top:var(--s2)}
.filerow b{flex:1;font-weight:500;font-size:var(--t-small);color:var(--text);word-break:break-word}
.filerow .icon{color:var(--text-3)}
.sigpad{width:100%;height:170px;display:block;touch-action:none;background:var(--surface);
  border:1px dashed var(--color-border-strong);border-radius:var(--r2)}
.devrow{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-bottom:var(--s2)}
.inp{width:100%}

/* ---- التنبيهات — لغة .notice ---- */
.banner{display:flex;gap:var(--s3);padding:var(--s4) var(--s5);margin-bottom:var(--s4);
  background:var(--surface);border:1px solid var(--line-1);border-radius:var(--r3);
  border-inline-start:2px solid var(--line-1);font-size:var(--t-small);line-height:1.8}
.banner .icon{width:18px;height:18px;margin-top:3px}
.b-info{border-inline-start-color:var(--violet-500);color:var(--text-2)}
.b-info .icon{color:var(--violet-600)}
.b-ok{border-inline-start-color:var(--teal-500);color:var(--text-2)}
.b-ok .icon{color:var(--teal-600)}
.b-warn{border-inline-start-color:var(--amber-600);color:var(--text-2)}
.b-warn .icon{color:var(--amber-600)}
.b-danger{border-inline-start-color:var(--red-600);color:var(--text-2)}
.b-danger .icon{color:var(--red-600)}
.banner b{color:var(--text);font-weight:600}

/* ---- الخط الزمني ---- */
.timeline{position:relative;padding-inline-start:var(--s6)}
.timeline::before{content:"";position:absolute;inset-inline-start:6px;top:6px;bottom:6px;
  width:1px;background:var(--line-1)}
.tl-item{position:relative;padding-bottom:var(--s5)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;inset-inline-start:calc(var(--s6) * -1 + 2px);top:5px;
  width:9px;height:9px;border-radius:50%;background:var(--surface);border:1.5px solid var(--teal-500)}
.tl-item.hi::before{background:var(--teal-500)}
.tl-t{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--text-3)}
.tl-b{font-family:var(--f-display);font-weight:500;font-size:var(--t-small);color:var(--text);margin-top:2px}
.tl-d{font-size:var(--t-caption);color:var(--text-3)}

/* ---- الرقائق القابلة للنقر — لغة .chips li ---- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-1);border-radius:var(--r-full);
  font-size:var(--t-small);color:var(--text-2);
  transition:border-color var(--d-2) var(--ease),color var(--d-2) var(--ease),
             background var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
.chip:hover{border-color:var(--teal-500);color:var(--text);transform:translateY(-2px)}
.chip.on{background:var(--surface-3);border-color:var(--ink-800);color:var(--text);font-weight:500}
.chip .c{font-family:var(--f-mono);font-size:.6875rem;color:var(--text-3)}
.chip.on .c{color:var(--text-2)}

/* ---- النوافذ ---- */
/* منع تمرير الصفحة خلف النافذة — على iOS خصوصًا تُمرَّر الخلفية بدلها */
html.modal-open,html.modal-open body{overflow:hidden}
.modal-bg{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:var(--s5);
  background:var(--pm-12);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:fadeUp var(--d-2) var(--ease-out)}
.modal{width:100%;max-width:600px;max-height:88dvh;overflow:auto;background:var(--surface);
  border:1px solid var(--line-1);border-radius:var(--r4);box-shadow:var(--e3)}
.modal-strip{height:2px;background:var(--brand-grad-x)}
.modal-h{padding:var(--s6) var(--s6) var(--s2)}
.modal-h h3{font-size:1.0625rem;font-weight:600}
.modal-h p{font-size:var(--t-small);color:var(--text-3);margin-top:5px}
.modal-b{padding:var(--s5) var(--s6)}
.modal-f{display:flex;gap:var(--s3);padding:var(--s5) var(--s6);
  border-top:1px solid var(--line-2);background:var(--surface-2)}
.toast{position:fixed;inset-block-end:var(--s6);inset-inline-start:var(--s6);z-index:400;
  max-width:340px;padding:14px 20px;border-radius:var(--r2);
  background:var(--ink-800);color:var(--color-text-inv);font-family:var(--f-display);font-weight:500;
  font-size:.875rem;box-shadow:var(--e3);animation:floatIn var(--d-3) var(--ease-out)}

/* ---- عناصر مساعدة ---- */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.spacer{flex:1}
.sla{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:.6875rem}
.sla.good{color:var(--color-accent-dark)}
.sla.risk{color:var(--amber-600)}
.sla.late{color:var(--red-600)}
.bar{height:5px;border-radius:var(--r-full);background:var(--line-2);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:var(--r-full);background:var(--teal-500)}
.mbars{display:flex;align-items:flex-end;gap:var(--s2);height:132px;padding-top:var(--s2)}
.mbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.mbar .fill{width:100%;border-radius:var(--r1) var(--r1) 0 0;background:var(--teal-500);
  min-height:3px;opacity:.85;transition:opacity var(--d-2) var(--ease)}
.mbar:hover .fill{opacity:1}
.mbar small{font-family:var(--f-mono);font-size:.6875rem;color:var(--text-3)}
.qrbox{display:grid;place-items:center;gap:var(--s3);padding:var(--s6);
  background:var(--surface-2);border:1px solid var(--line-1);border-radius:var(--r3)}
.stars{display:flex;gap:5px;direction:ltr}
.star{width:28px;height:28px;border-radius:var(--r1);display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-1);color:var(--line-1);font-size:.875rem;
  transition:color var(--d-2) var(--ease),border-color var(--d-2) var(--ease)}
.star.on{color:var(--amber-600);border-color:var(--pm-2);
  background:var(--pm-3)}
.rate-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line-2)}
.rate-row b{flex:1;font-weight:500;font-size:var(--t-small);color:var(--text-2)}
.checkbox{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s2) 0;cursor:pointer}
.checkbox input{width:18px;height:18px;margin-top:4px;accent-color:var(--violet-500);flex-shrink:0}
.checkbox span{font-size:var(--t-small);line-height:1.8;color:var(--text-2)}
.field label{display:block;font-family:var(--f-display);font-weight:500;
  font-size:var(--t-small);color:var(--text);margin-bottom:8px}
.field{display:block;margin-bottom:var(--s4)}
.help{font-size:var(--t-caption);color:var(--text-3);line-height:1.7;margin-top:6px}

/* ---- صف الإشعار ---- */
.nrow{display:flex;gap:var(--s4);padding:var(--s4) var(--s5);cursor:pointer;
  border-bottom:1px solid var(--line-2);transition:background var(--d-2) var(--ease)}
.nrow:last-child{border-bottom:0}
.nrow:hover{background:var(--surface-2)}
.nrow.unread{background:var(--color-accent-50)}
.nrow .ni{width:36px;height:36px;border-radius:var(--r2);display:grid;place-items:center;flex-shrink:0;
  background:var(--surface-3);border:1px solid var(--line-1);color:var(--text-3)}
.nrow b{display:block;font-family:var(--f-display);font-weight:500;font-size:var(--t-small);color:var(--text)}
.nrow p{font-size:var(--t-caption);color:var(--text-3);margin-top:2px}
.nrow .nt{font-family:var(--f-mono);font-size:.6875rem;color:var(--text-3);white-space:nowrap}

/* ---- شبكات البوابة ---- */
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.mobile-bar,.mobile-bar.show{display:none}

/* ---- شاشة الدخول: لوحة الأدوار داخل بطاقة .track ---- */
.gsec{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:var(--s5) 0 var(--s3)}
.gsec:first-child{margin-top:0}
.role-btn{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:start;cursor:pointer;
  padding:var(--s3) var(--s4);margin-bottom:var(--s2);
  background:var(--surface);border:1px solid var(--line-1);border-radius:var(--r2);
  transition:border-color var(--d-2) var(--ease),transform var(--d-2) var(--ease),
             box-shadow var(--d-2) var(--ease)}
.role-btn:hover{border-color:var(--teal-500);transform:translateX(-3px);box-shadow:var(--e2)}
.role-btn:hover .iconbox{transform:scale(1.06)}
.role-btn .ri{width:38px;height:38px;border-radius:var(--r2);display:grid;place-items:center;flex-shrink:0;
  background:var(--color-accent-50);color:var(--teal-600);
  border:1px solid var(--pm-15);
  transition:transform var(--d-2) var(--ease)}
.role-btn:hover .ri{transform:scale(1.06)}
.role-btn .rt{flex:1;min-width:0}
.role-btn .rt b{display:block;font-family:var(--f-display);font-weight:500;
  font-size:.875rem;color:var(--text);line-height:1.5}
.role-btn .rt i{display:block;font-style:normal;font-size:var(--t-caption);color:var(--text-3);line-height:1.6}
.role-btn .rk{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);flex-shrink:0}

/* ---- الاستجابة ---- */
@media (max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:940px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-end:0;width:280px;z-index:200;
    transform:translateX(100%);transition:transform var(--d-3) var(--ease-out);box-shadow:var(--e3)}
  .side.open{transform:translateX(0)}
  .scrim{position:fixed;inset:0;z-index:150;background:var(--pm-11)}
  .topbar .burger{display:flex;margin-inline-start:0}
  /* الأزرار تنتقل إلى الشريط السفلي — فلا يزدحم الرأس */
  #tbActions{display:none}
  .content{padding-bottom:var(--s32)}
  body{padding-bottom:0}
  .mobile-bar.show{display:flex;position:fixed;inset-inline:0;inset-block-end:0;z-index:95;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--pm-9);
    backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--color-border)}
  .mobile-bar.show .btn{flex:1;padding:14px 16px;min-height:48px}
  .flowline{grid-auto-flow:row;gap:var(--s3)}
  .flowline::before{inset-inline:auto;inset-block:0;inset-inline-start:6px;width:1px;height:auto}
  .flowstep{padding-top:0;padding-inline-start:var(--s8);text-align:start}
  .flowstep::before{top:4px;inset-inline-start:0;translate:0 0}
}
@media (max-width:700px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .devrow{grid-template-columns:1fr}
  .card-head,.card-pad{padding-inline:var(--s4)}
  .tbl-wrap th,.tbl-wrap td{padding-inline:var(--s4)}
}
@media print{.side,.topbar,.mobile-bar{display:none!important}.content{padding:0}}


/* ── اختيار نوع الطلب في بوابة العميل ── */
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.segbtn{display:flex;flex-direction:column;gap:3px;text-align:right;padding:12px 13px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;
  cursor:pointer;font-family:inherit;transition:.15s}
.segbtn b{font-size:14px;color:var(--color-text);font-weight:700}
.segbtn i{font-style:normal;font-size:11.5px;color:var(--color-text-3);line-height:1.45}
.segbtn.on{background:var(--color-primary);border-color:var(--color-primary)}
.segbtn.on b,.segbtn.on i{color:#fff}
@media (max-width:680px){.seg3{grid-template-columns:1fr}}

/* Production Auth */
.portal-login{display:grid;gap:14px;margin-top:18px;text-align:right}.portal-login .field{display:grid;gap:7px}.portal-login .field>span{font-size:12px;font-weight:700;color:var(--color-text-2)}.portal-login .inp{width:100%}.form-msg{min-height:20px;margin:0;font-size:12px;color:var(--color-error)}.portal-login .btn[disabled]{opacity:.6;cursor:wait}.user-admin-toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:14px}.user-role{font-size:12px;color:var(--color-text-3)}


/* ══════════════════════════════════════════════════════════════════════════
   v1.4 Executive UX Refresh
   ══════════════════════════════════════════════════════════════════════════ */
.nav-section-label{padding:14px 11px 5px;margin-top:3px;font-size:.6875rem;font-weight:700;color:var(--text-3);letter-spacing:.04em}
.exec-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);padding:clamp(20px,3vw,32px);margin-bottom:16px;border:1px solid var(--line-1);border-radius:var(--r4);background:var(--surface);position:relative;overflow:hidden}
.exec-hero::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--brand-grad-y)}
.exec-kicker{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.13em;color:var(--teal-600)}
.exec-hero h2{font-size:clamp(1.35rem,2.2vw,2rem);margin:6px 0 4px}.exec-hero p{max-width:720px;color:var(--text-2);font-size:.875rem;line-height:1.8}.exec-hero-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.exec-kpis .stat{min-height:125px}.exec-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s4)}
.attention-list{display:grid;gap:8px}.attention-item{display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:10px;width:100%;text-align:start;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--surface);cursor:pointer;color:var(--text-2);transition:.15s}.attention-item:hover{border-color:var(--color-border-hover);background:var(--surface-2)}.attention-item .icon{width:16px}.attention-num{width:34px;height:30px;display:grid;place-items:center;border-radius:var(--r2);font-family:var(--f-mono);font-weight:600;background:var(--surface-3);color:var(--text)}.attention-item.danger .attention-num{background:var(--color-error-50);color:var(--red-600)}.attention-item.warn .attention-num{background:var(--pm-4);color:var(--amber-600)}.attention-item.info .attention-num{background:var(--color-accent-50);color:var(--teal-600)}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick-grid button{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;text-align:start;column-gap:10px;padding:14px;border:1px solid var(--line-1);border-radius:var(--r2);background:var(--surface);cursor:pointer}.quick-grid button:hover{background:var(--surface-2);border-color:var(--color-border-hover)}.quick-grid .icon{grid-row:1/3;width:22px;height:22px;color:var(--teal-600)}.quick-grid b{font-size:.82rem;color:var(--text)}.quick-grid span{font-size:.6875rem;color:var(--text-3);margin-top:2px}
.recent-list{display:grid;gap:2px}.recent-list>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 4px;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:start;cursor:pointer}.recent-list>button:last-child{border-bottom:0}.recent-list>button:hover{background:var(--surface-2)}.recent-list b{display:block;font-size:.8rem;color:var(--text)}.recent-list small{display:block;font-size:.6875rem;color:var(--text-3);margin-top:2px}
.health-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.health-list>div{padding:14px;border:1px solid var(--line-2);border-radius:var(--r2)}.health-list span,.health-list small{display:block;font-size:.6875rem;color:var(--text-3)}.health-list b{display:block;font-family:var(--f-mono);font-size:1.25rem;color:var(--text);margin:3px 0}.link-btn{border:0;background:none;color:var(--teal-600);font-size:.75rem;cursor:pointer}
.user-admin-card{overflow:hidden}.user-summary .stat{min-height:108px}.user-filterbar{padding:14px 16px;margin:0;border-bottom:1px solid var(--line-2);background:var(--surface-2)}.user-search{flex:1;min-width:240px}.user-filterbar>.inp{width:auto;min-width:150px}.filter-count{font-size:.72rem;color:var(--text-3);white-space:nowrap}.user-cell{display:flex;align-items:center;gap:10px}.user-cell b{display:block;color:var(--text);font-size:.82rem}.user-cell small{display:block;color:var(--text-3);font-size:.6875rem;margin-top:2px}.user-avatar{width:30px;height:30px}.last-seen{font-size:.72rem;color:var(--text-3)}.user-manage-note{margin-top:14px;padding:12px 14px;border-radius:var(--r2);background:var(--surface-2);border:1px solid var(--line-2);font-size:.75rem;color:var(--text-2);line-height:1.7}
@media(max-width:900px){.exec-hero{align-items:flex-start;flex-direction:column}.exec-layout{grid-template-columns:1fr}.user-filterbar>.inp{min-width:130px}}
@media(max-width:620px){.quick-grid,.health-list{grid-template-columns:1fr}.user-search{min-width:100%}.user-filterbar>.inp{width:100%}.exec-hero-actions{width:100%}.exec-hero-actions .btn{flex:1}}

/* === v1.5 Client Experience === */
.client-home-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 28px;margin-bottom:18px;background:linear-gradient(135deg,var(--color-surface),var(--pm-6));border:1px solid var(--color-border);border-radius:var(--r3)}.client-home-hero h2{margin:5px 0 7px;font-size:clamp(22px,3vw,32px)}.client-home-hero p{margin:0;color:var(--color-text-3);max-width:620px}.client-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.client-kpis>.stat{min-height:112px}.client-home-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-bottom:16px}.attention-card{border-color:color-mix(in srgb,var(--color-primary) 28%,var(--color-border))}.attention-count{display:grid;place-items:center;min-width:32px;height:32px;border-radius:999px;background:var(--pm-3);font-weight:800}.action-list,.activity-feed{padding:4px 16px 14px}.action-item,.activity-feed button{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;border-bottom:1px solid var(--color-border);text-align:start;color:inherit;cursor:pointer}.action-item span:first-child,.activity-feed button span:last-child{display:grid;gap:3px}.action-item small,.activity-feed small{color:var(--color-text-3)}.action-cta{font-size:12px;font-weight:800;color:var(--color-primary);white-space:nowrap}.activity-feed button{justify-content:flex-start}.activity-dot{width:9px;height:9px;border-radius:50%;background:var(--color-primary);flex:0 0 auto}.client-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.client-shortcuts button{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--r2);padding:18px;text-align:start;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;color:inherit;cursor:pointer}.client-shortcuts svg{grid-row:1/3}.client-shortcuts span{color:var(--color-text-3);font-size:12px}.client-section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 10px}.client-section-head span{color:var(--color-text-3)}.client-project{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--r2);padding:18px;text-align:start;color:inherit;cursor:pointer}.cp-top{display:flex;justify-content:space-between;gap:12px}.cp-top>span:first-child{display:grid;gap:3px}.cp-top small{color:var(--color-text-3)}.journey{height:5px;background:var(--pm-5);border-radius:99px;margin:18px 0 10px;overflow:hidden}.journey span{display:block;height:100%;background:var(--color-primary);border-radius:inherit}.cp-stage{font-size:13px;color:var(--color-text-3)}.cp-meta{display:flex;justify-content:space-between;gap:10px;margin-top:15px;padding-top:12px;border-top:1px solid var(--color-border);font-size:12px;color:var(--color-text-3)}.cp-meta span{display:grid;gap:2px}.cp-meta b{color:var(--color-text)}.doc-toolbar{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.doc-toolbar p{margin:3px 0 0;color:var(--color-text-3)}.doc-toolbar .inp{max-width:320px}.doc-list{display:grid;gap:8px}.doc-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--r2);text-align:start;color:inherit;cursor:pointer}.doc-row span:nth-child(2){display:grid;gap:3px;flex:1}.doc-row small{color:var(--color-text-3)}.request-success{text-align:center;padding:12px 0 4px}.request-success>svg{width:48px;height:48px;color:var(--color-success)}.request-success h3{font-size:22px;margin:8px 0}.request-success p{margin:12px 0 2px;color:var(--color-text-3)}.request-success>b{font-size:20px}.request-success>div{margin-top:8px;color:var(--color-text-3)}.branch-file-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--r3);margin-bottom:12px}.branch-file-head h2{margin:4px 0}.branch-file-head p{margin:0;color:var(--color-text-3)}.branch-health{padding:8px 12px;border-radius:999px;background:var(--pm-6);font-size:12px;font-weight:800}.branch-tabs{display:flex;gap:4px;overflow:auto;border-bottom:1px solid var(--color-border);margin-bottom:16px}.branch-tabs button{border:0;background:transparent;padding:12px 14px;white-space:nowrap;color:var(--color-text-3);font-weight:700;cursor:pointer;border-bottom:2px solid transparent}.branch-tabs button.on{color:var(--color-primary);border-color:var(--color-primary)}.branch-status{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid var(--color-border);border-radius:var(--r2);margin-bottom:14px}.branch-status>div{display:grid;gap:3px}.branch-status small{color:var(--color-text-3)}.status-orb{width:12px;height:12px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 5px color-mix(in srgb,var(--color-success) 12%,transparent)}.branch-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.branch-contact>div{display:grid;gap:4px;padding:16px;border-top:1px solid var(--color-border)}.branch-contact span{font-size:11px;color:var(--color-text-3)}
html[dir="ltr"] .rail{left:0;right:auto}html[dir="ltr"] .main{margin-right:0;margin-left:var(--rail-w)}html[dir="ltr"] .nav-item,html[dir="ltr"] .doc-row,html[dir="ltr"] .client-project{text-align:left}
@media(max-width:900px){.client-kpis{grid-template-columns:repeat(2,1fr)}.client-home-grid{grid-template-columns:1fr}.client-shortcuts{grid-template-columns:1fr}.client-home-hero{align-items:flex-start;flex-direction:column}.branch-contact{grid-template-columns:1fr}.doc-toolbar{align-items:stretch;flex-direction:column}.doc-toolbar .inp{max-width:none}html[dir="ltr"] .main{margin-left:0}}

/* v1.7 portal UX */
.entity-tabs{display:flex;gap:6px;overflow:auto;padding:4px;margin-bottom:16px;border-bottom:1px solid var(--color-border)}.entity-tabs button{border:0;background:transparent;padding:10px 12px;color:var(--color-text-3);font-weight:750;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent}.entity-tabs button.on{color:var(--color-primary);border-color:var(--color-primary)}.entity-tabs span{margin-inline-start:6px;font-size:11px;opacity:.7}
.client-directory{display:grid;gap:10px}.client-account-card{width:100%;display:grid;grid-template-columns:minmax(240px,1fr) auto auto;align-items:center;gap:20px;text-align:start;padding:20px 22px;border:1px solid var(--color-border);border-radius:var(--r3);background:var(--color-surface);color:inherit;cursor:pointer}.client-account-card h3{margin:4px 0}.client-account-card p{margin:0;color:var(--color-text-3)}.client-account-metrics{display:flex;gap:24px}.client-account-metrics span{display:grid;gap:3px;font-size:11px;color:var(--color-text-3)}.client-account-metrics b{font-size:18px;color:var(--color-text)}
.account-hero{padding:24px;border:1px solid var(--color-border);border-radius:var(--r3);background:var(--color-surface);margin-bottom:20px}.account-hero h2{margin:5px 0}.account-hero p{color:var(--color-text-3);margin:0 0 20px}.account-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 10px}.branch-account-card{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid var(--color-border);border-radius:var(--r2);background:var(--color-surface);color:inherit;text-align:start;cursor:pointer}.branch-account-card>div{flex:1}.branch-account-card h4{margin:0 0 4px}.branch-account-card p{margin:0;color:var(--color-text-3);font-size:12px}
.nav-section-label{display:none}.nav-label{margin-bottom:10px}.rail-nav{padding-top:4px}.nav-item{margin-bottom:3px}.topbar{min-height:72px}.content{padding-top:22px}.exec-kpis .stat{min-height:116px}.exec-secondary .stat{min-height:94px}.exec-hero p{max-width:640px}.quick-grid{display:none}
#gate .hero-in{padding-block:clamp(52px,6vw,84px);grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:clamp(38px,6vw,80px)}#gate .portal-login{max-width:460px;margin-inline:auto}#gate .portal-login .inp{min-height:50px}#gate .portal-login .btn{min-height:48px}
@media(max-width:900px){.client-account-card{grid-template-columns:1fr auto}.client-account-metrics{grid-column:1/-1;justify-content:space-between}.account-summary{grid-template-columns:repeat(2,1fr)}#gate .hero-in{grid-template-columns:1fr;gap:30px}}
@media(max-width:600px){.client-account-card{padding:16px}.client-account-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}.account-summary{grid-template-columns:1fr 1fr}}

/* ================================================================
   v1.7.1 portal responsive hotfix
   Keeps the authenticated workspace stable on common laptop widths.
   ================================================================ */
@media (min-width:901px) and (max-width:1280px){
  .shell{grid-template-columns:238px minmax(0,1fr)}
  .content{padding-inline:18px}
  .topbar{padding-inline:18px}
  .exec-hero{gap:18px}
  .exec-hero p{max-width:600px}
}

@media (min-width:901px) and (max-width:1100px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
  .side{min-width:0}
  .nav-item{font-size:.82rem}
  .exec-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .exec-layout{grid-template-columns:1fr}
}


/* ================================================================
   v1.7.2 — Dedicated Operations Portal sign-in
   ================================================================ */
#gate{min-height:100vh;background:var(--color-bg)}
.portal-gate-header{position:relative;z-index:30;border-bottom:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 92%,transparent);backdrop-filter:blur(14px)}
.portal-gate-header-in{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}.portal-gate-tools{display:flex;align-items:center;gap:12px}.portal-home-link{font-size:13px;color:var(--color-text-2);font-weight:600}.portal-home-link:hover{color:var(--color-primary)}
.portal-auth-main{min-height:calc(100vh - 78px);display:grid}.portal-auth-shell{position:relative;display:grid;align-items:center;padding-block:clamp(46px,7vw,92px);overflow:hidden}.portal-auth-shell::before{content:"";position:absolute;inset:0;background-image:var(--blueprint);background-size:var(--blueprint-size);opacity:.35;mask-image:radial-gradient(80% 90% at 15% 10%,#000,transparent 72%);pointer-events:none}
.portal-auth-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,480px);gap:clamp(48px,7vw,104px);align-items:center}.portal-auth-intro{max-width:660px}.portal-auth-intro h1{font-size:clamp(2.7rem,5vw,5.2rem);line-height:1.02;letter-spacing:-.04em;margin:15px 0 20px}.portal-auth-intro h1 em{font-style:normal;background:linear-gradient(transparent 68%,color-mix(in srgb,var(--color-primary) 35%,transparent) 68%)}.portal-auth-intro>p{font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.85;color:var(--color-text-2);max-width:44rem}.portal-auth-points{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:30px;color:var(--color-text-2);font-size:13px}.portal-auth-points span{display:inline-flex;align-items:center;gap:8px}.portal-auth-points .icon{color:var(--color-primary)}
.portal-auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:24px;padding:clamp(26px,3vw,38px);box-shadow:0 22px 70px rgba(18,33,52,.09);min-width:0}.portal-auth-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:26px}.portal-auth-card-head h2{font-size:1.45rem;margin:2px 0 5px}.portal-auth-card-head p{margin:0;font-size:13px;color:var(--color-text-3)}
#gate .portal-login{max-width:none!important;margin:0!important;gap:16px!important;text-align:inherit}#gate .portal-login .field>span{font-size:13px}#gate .portal-login .inp{min-height:54px;border-radius:12px;padding-inline:15px;font-size:15px}#gate .portal-login .btn{min-height:54px;border-radius:12px;font-size:15px;font-weight:700}.password-wrap{position:relative;display:block}.password-wrap .inp{padding-inline-end:72px}.password-eye{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--color-primary);font-size:12px;font-weight:700;cursor:pointer;padding:8px}.forgot-link{justify-self:start;border:0;background:transparent;padding:0;color:var(--color-primary);font-size:12.5px;font-weight:700;cursor:pointer}.portal-access-note{margin:18px 0 0;padding-top:17px;border-top:1px solid var(--color-border);font-size:12px;color:var(--color-text-3);text-align:center}.form-msg.ok{color:var(--color-success)}
#gate .form-msg:empty{display:none}
#gate .form-msg:not(:empty){display:block}
#gate .form-msg.is-info{color:var(--color-text-3)}
#gate .form-msg.is-error{color:var(--color-error)}
#gate .form-msg.is-ok{color:var(--color-success)}
html[dir="ltr"] .portal-auth-grid{direction:ltr}html[dir="ltr"] .portal-auth-intro h1{max-width:12ch}html[dir="ltr"] #gate .portal-login{text-align:left}
@media(max-width:900px){.portal-gate-header-in{min-height:70px}.portal-gate-header .brand-txt{display:block}.portal-home-link{display:none}.portal-auth-main{min-height:calc(100vh - 70px)}.portal-auth-shell{padding-block:28px 52px}.portal-auth-grid{grid-template-columns:1fr;gap:24px}.portal-auth-intro{text-align:center;margin-inline:auto}.portal-auth-intro .eyebrow{display:none}.portal-auth-intro h1{font-size:clamp(2rem,10vw,3rem);max-width:12em;margin:0 auto 12px}.portal-auth-intro>p{font-size:.94rem;line-height:1.65;max-width:34em;margin-inline:auto}.portal-auth-points{justify-content:center;margin-top:18px}.portal-auth-card{max-width:540px;width:100%;margin-inline:auto;padding:24px}.portal-lang-slot .se-lang-toggle{display:inline-flex!important}}
@media(max-width:560px){.portal-gate-header-in{padding-inline:18px}.portal-gate-header .brand-mark{width:36px;height:36px}.portal-gate-header .brand-en{font-size:.92rem}.portal-gate-header .brand-ar{font-size:.6875rem}.portal-auth-shell{padding:18px 0 34px}.portal-auth-grid{padding-inline:18px}.portal-auth-intro h1{font-size:2rem;max-width:10em}.portal-auth-intro>p{display:none}.portal-auth-points{display:none}.portal-auth-card{border-radius:20px;padding:22px 18px}.portal-auth-card-head{margin-bottom:20px}.portal-auth-card-head h2{font-size:1.35rem}.portal-auth-card-head .iconbox{width:42px;height:42px}#gate .portal-login .inp,#gate .portal-login .btn{min-height:52px}.portal-gate-tools{gap:6px}}
#gate>.ftr{display:none}
/* v1.8 simplified request UX */
.request-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:920px;margin:24px auto}.request-choice-card{border:1px solid var(--color-border);background:var(--color-surface);border-radius:18px;padding:28px;text-align:start;display:flex;gap:18px;align-items:flex-start;cursor:pointer;min-height:170px;transition:.2s ease}.request-choice-card:hover{transform:translateY(-2px);border-color:var(--color-primary)}.request-choice-card>span{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary)}.request-choice-card h3{margin:2px 0 8px;font-size:21px}.request-choice-card p{margin:0;color:var(--color-text-3);line-height:1.7}@media(max-width:700px){.request-choice-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.request-choice-card{min-height:0;padding:20px}}

/* ======================================================================
   v1.9 Production Candidate — workflow & mobile UX
   ====================================================================== */
.action-needed{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--color-border));border-radius:12px;background:color-mix(in srgb,var(--color-primary) 5%,var(--color-surface));margin-bottom:14px}
.action-needed b{display:block;font-size:.9rem}.action-needed span{font-size:.78rem;color:var(--color-text-2)}
.workflow-journey{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0 0 16px;padding:15px 14px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface)}
.workflow-step{position:relative;text-align:center;font-size:.72rem;color:var(--color-text-3);padding-top:25px;line-height:1.3}.workflow-step:before{content:"";position:absolute;top:5px;left:50%;translate:-50% 0;width:14px;height:14px;border:2px solid var(--color-border-strong);border-radius:50%;background:var(--color-surface);z-index:2}.workflow-step:after{content:"";position:absolute;top:11px;inset-inline-start:-50%;width:100%;height:2px;background:var(--color-border);z-index:1}.workflow-step:first-child:after{display:none}.workflow-step.done:before{background:var(--color-primary);border-color:var(--color-primary)}.workflow-step.done:after,.workflow-step.current:after{background:var(--color-primary)}.workflow-step.current{color:var(--color-text);font-weight:700}.workflow-step.current:before{border-color:var(--color-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 12%,transparent)}
.success-state{text-align:center;padding:18px 6px 6px}.success-icon{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--color-success) 12%,var(--color-surface));color:var(--color-success);font-size:1.45rem;font-weight:800}.success-state h3{margin:0 0 6px;font-size:1.15rem}.success-state p{margin:0;color:var(--color-text-2)}.success-ref{margin:15px auto 0;padding:11px 14px;border-radius:10px;background:var(--color-surface-2);font-family:var(--font-mono);font-weight:800;max-width:260px}
.import-issues{margin-top:12px;display:grid;gap:7px}.import-issue{padding:9px 11px;border-radius:9px;background:var(--color-surface-2);font-size:.78rem;color:var(--color-text-2)}.import-issue.bad{background:color-mix(in srgb,var(--color-error) 8%,var(--color-surface));color:var(--color-error)}
.mobile-role-nav{display:none}
.phone-actions{display:flex;gap:8px;flex-wrap:wrap}.phone-actions a{text-decoration:none}
.entity-list-clean{display:grid;gap:8px}.entity-row-clean{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(4,minmax(90px,.7fr));align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--color-border);background:transparent;text-align:start;width:100%;color:inherit}.entity-row-clean:last-child{border-bottom:0}.entity-row-clean:hover{background:var(--color-surface-2)}.entity-row-clean b{font-size:.88rem}.entity-row-clean small{display:block;color:var(--color-text-3);margin-top:3px}
@media(max-width:760px){
  /* أسماء الأصناف التي يولّدها portal-ui.js فعلًا: .modal-bg و .modal-b
     كانت هذه القواعد تستهدف .modal-backdrop و .modal-body فلا تُطبَّق إطلاقًا،
     فتظهر كل نوافذ البوابة على الجوال بتنسيق سطح المكتب، وقد يُقصّ زر الإرسال
     أسفل الشاشة على iOS. */
  #modalRoot .modal-bg{align-items:flex-end;padding:0}
  #modalRoot .modal{width:100%;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;
    margin:0;display:flex;flex-direction:column;overflow:hidden}
  #modalRoot .modal-h{flex:0 0 auto}
  #modalRoot .modal-b{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain}
  /* شريط الأزرار يبقى مرئيًا فوق الحافة السفلية ولا يُقصّ */
  #modalRoot .modal-f{flex:0 0 auto;position:sticky;bottom:0;
    background:var(--surface-2);border-top:1px solid var(--line-2);
    padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  #modalRoot .modal-f .btn{flex:1 1 auto;min-height:48px}
  .workflow-journey{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 10px;gap:0}.workflow-step{min-width:96px;scroll-snap-align:center}.workflow-step:after{inset-inline-start:-50%}
  .mobile-role-nav{position:fixed;z-index:70;inset-inline:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--color-surface) 96%,transparent);border-top:1px solid var(--color-border);backdrop-filter:blur(12px);padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 -8px 22px rgba(16,30,44,.08)}
  .mobile-role-nav button{min-height:50px;border:0;background:transparent;border-radius:10px;color:var(--color-text-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.6875rem}.mobile-role-nav button svg{width:18px;height:18px}.mobile-role-nav button.on{color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,transparent)}
  .main .content{padding-bottom:86px}
  .entity-row-clean{grid-template-columns:1fr 1fr;gap:8px;padding:13px}.entity-row-clean>div:first-child{grid-column:1/-1}
  .tech-task-card .phone-actions{margin-top:10px}
}
@media(max-width:760px){.mobile-role-nav[data-role="client"]{grid-template-columns:repeat(5,1fr)}.mobile-role-nav .primary-mobile-action{color:#fff;background:var(--color-primary);width:52px;height:52px;min-height:52px;border-radius:50%;justify-self:center;translate:0 -13px;box-shadow:0 8px 18px color-mix(in srgb,var(--color-primary) 28%,transparent)}.mobile-role-nav .primary-mobile-action svg{width:20px;height:20px}.mobile-role-nav .primary-mobile-action span{font-size:.6875rem;color:#fff}}
/* ======================================================================
   Second Eye Portal v1.10 — Mobile First UX + Typography + Speed polish
   ====================================================================== */

/* ---------- Typography system ---------- */
#app,#gate{font-size:14px;line-height:1.62}
#app .tb-title h2{font-size:1.28rem;line-height:1.3;font-weight:700;letter-spacing:-.015em}
#app .tb-title p{font-size:.82rem;line-height:1.45}
#app .card-head h3,#app .section-title h3,#app .client-section-head h3{font-size:1rem;line-height:1.4}
#app .card h4,#app .wo h4{font-size:.94rem;line-height:1.45}
#app .stat .k{font-size:.78rem}
#app .stat .v{font-size:1.72rem;line-height:1.05}
#app .stat .s,#app .hint,#app .help,#app small{font-size:.75rem;line-height:1.45}
#app .tag,#app .pill,#app .badge,#app .eyebrow{font-size:.72rem}
#app .nav-label,#app .role-btn .rk,#app .schema .s-lbl{font-size:.6875rem!important}
#app .inp,#app .btn,#app button,#app select,#app textarea{font-size:.875rem}

html[lang="en"] #app,html[dir="ltr"] #app{line-height:1.5}
html[lang="en"] #app .tb-title h2,html[dir="ltr"] #app .tb-title h2{font-size:1.12rem;letter-spacing:-.02em}
html[lang="en"] #app .card-head h3,html[dir="ltr"] #app .card-head h3{font-size:.96rem}
html[lang="en"] #app .stat .v,html[dir="ltr"] #app .stat .v{font-size:1.55rem}
html[lang="en"] #gate .portal-auth-intro h1,html[dir="ltr"] #gate .portal-auth-intro h1{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.08;max-width:13ch}
html[lang="en"] #gate .portal-auth-intro>p,html[dir="ltr"] #gate .portal-auth-intro>p{line-height:1.55}

/* ---------- Perceived loading ---------- */
.portal-quick-loader{display:grid;gap:12px;max-width:820px;padding-top:4px}
.portal-quick-loader span{height:84px;border-radius:14px;background:linear-gradient(90deg,var(--color-surface-2),var(--color-surface),var(--color-surface-2));background-size:220% 100%;animation:v110Shimmer 1.15s linear infinite;border:1px solid var(--color-border)}
.portal-quick-loader span:nth-child(2){height:150px}.portal-quick-loader span:nth-child(3){height:110px}
@keyframes v110Shimmer{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.portal-quick-loader span{animation:none}}

/* ---------- Desktop density ---------- */
#app .content{padding-top:20px}
#app .card{box-shadow:none}
#app .entity-row-clean{min-height:58px}

/* ---------- Mobile-first authenticated workspace ---------- */
@media(max-width:940px){
  html,body{max-width:100%;overflow-x:hidden}
  body.rail-open{overflow:hidden;touch-action:none}
  #app,.shell,.main,.content{width:100%;max-width:100%;min-width:0}
  .shell{display:block;min-height:100dvh}

  /* Drawer: correct direction for RTL/LTR. It never pushes the page. */
  .side{position:fixed!important;z-index:220!important;inset-block:0!important;width:min(86vw,320px)!important;height:100dvh!important;box-shadow:0 18px 46px rgba(7,24,41,.22)!important;transition:transform .22s ease!important;will-change:transform;overflow:hidden}
  html[dir="rtl"] .side{left:0!important;right:auto!important;transform:translateX(-105%)!important;border-left:0!important;border-right:1px solid var(--color-border)!important}
  html[dir="ltr"] .side{right:0!important;left:auto!important;transform:translateX(105%)!important;border-right:0!important;border-left:1px solid var(--color-border)!important}
  html[dir="rtl"] .side.open,html[dir="ltr"] .side.open{transform:translateX(0)!important}
  .scrim{position:fixed!important;z-index:210!important;inset:0!important;background:rgba(4,18,31,.48)!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .side-head{height:66px;padding:10px 16px}
  .side-nav{padding:8px 10px 14px;overscroll-behavior:contain}
  .side-user{padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  .nav-label{display:none}
  .nav-section-label{display:block;font-size:.72rem;color:var(--color-text-3);padding:14px 10px 6px;font-weight:700}
  .nav-item{min-height:46px;padding:10px 12px;font-size:.9rem;border-radius:10px}

  /* Compact topbar: menu + title + notification only. */
  .topbar{height:62px!important;min-height:62px!important;padding-inline:12px!important;gap:8px!important;background:color-mix(in srgb,var(--color-surface) 96%,transparent)!important;z-index:120!important}
  .topbar .burger{display:flex!important;width:42px;height:42px;flex:0 0 42px;border-radius:11px}
  .topbar .bell{width:42px;height:42px;flex:0 0 42px;border-radius:11px}
  .tb-title{min-width:0;overflow:hidden}
  .tb-title h2{font-size:1.02rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  .tb-title p{display:none!important}
  #tbActions{display:none!important}

  /* Content uses full mobile width without giant gutters. */
  .content{padding:14px 12px calc(92px + env(safe-area-inset-bottom))!important;margin:0!important}
  .grid,.g2,.g3,.g4,.g5,.exec-kpis,.exec-secondary,.client-kpis,.client-home-grid,.account-summary,.branch-contact{grid-template-columns:1fr!important}
  .exec-kpis,.client-kpis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .exec-kpis .stat,.client-kpis .stat{min-height:92px!important;padding:14px!important}
  .exec-kpis .stat .v,.client-kpis .stat .v{font-size:1.42rem!important}
  .exec-kpis .stat .s,.client-kpis .stat .s{font-size:.7rem!important}

  /* Mobile rows/cards — never require horizontal scrolling. */
  .tbl-wrap{overflow:visible!important}
  .tbl-wrap table{display:block;width:100%!important;min-width:0!important}
  .tbl-wrap thead{display:none!important}
  .tbl-wrap tbody{display:grid;gap:9px}
  .tbl-wrap tr{display:grid!important;grid-template-columns:1fr 1fr;gap:5px 10px;padding:12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
  .tbl-wrap td{display:block!important;padding:2px 0!important;border:0!important;min-width:0;white-space:normal!important;overflow-wrap:anywhere}
  .tbl-wrap td:first-child{grid-column:1/-1;font-weight:700}
  .entity-row-clean{display:grid!important;grid-template-columns:1fr auto!important;gap:6px 10px!important;padding:13px 14px!important;border:1px solid var(--color-border)!important;border-radius:12px!important;background:var(--color-surface)!important;margin-bottom:8px}
  .entity-row-clean>div:first-child{grid-column:1/-1!important}
  .entity-list-clean{gap:0!important}
  .wo{padding:14px!important;border-radius:12px!important}

  /* Clean card rhythm */
  .card{border-radius:14px!important}
  .card-head{padding:14px 14px 10px!important;gap:10px}
  .card-pad{padding:12px 14px 14px!important}
  .client-home-hero{padding:18px!important;border-radius:14px!important;margin-bottom:12px!important;gap:14px!important}
  .client-home-hero h2{font-size:1.18rem!important;line-height:1.4;margin:3px 0 6px!important}
  .client-home-hero p{font-size:.82rem;line-height:1.55}
  .client-home-hero .btn{width:100%;min-height:48px}
  .action-needed{padding:12px!important;border-radius:12px!important}
  .attention-item,.action-item,.activity-feed button{min-height:52px}

  /* Inputs and primary actions are thumb-friendly. */
  .inp{min-height:48px!important;border-radius:11px!important;font-size:16px!important} /* prevents iOS auto zoom */
  textarea.inp{min-height:96px!important}
  .btn{min-height:44px}
  .btn--primary,.btn--ok{min-height:48px}
  .field{margin-bottom:14px!important}
  .field label{font-size:.79rem!important;margin-bottom:6px!important}

  /* Bottom sheets */
  #modalRoot .modal-bg{align-items:flex-end!important;padding:0!important}
  #modalRoot .modal{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:20px 20px 0 0!important;margin:0!important}
  #modalRoot .modal-h{padding:15px 16px!important}
  #modalRoot .modal-b{padding:14px 16px!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
  #modalRoot .modal-f{padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;gap:8px!important}
  #modalRoot .modal-f .btn{min-height:48px!important}

  /* Bottom navigation for daily use */
  .mobile-role-nav{display:grid!important;position:fixed!important;z-index:180!important;inset-inline:0!important;bottom:0!important;background:color-mix(in srgb,var(--color-surface) 97%,transparent)!important;border-top:1px solid var(--color-border)!important;box-shadow:0 -8px 24px rgba(13,31,48,.08)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:5px 8px calc(5px + env(safe-area-inset-bottom))!important}
  .mobile-role-nav button{min-height:52px!important;font-size:.7rem!important;padding:4px 2px!important}
  .mobile-role-nav button svg{width:19px!important;height:19px!important}
  .mobile-role-nav .primary-mobile-action{width:50px!important;height:50px!important;min-height:50px!important}
  .main .mobile-bar.show{bottom:calc(64px + env(safe-area-inset-bottom))!important;z-index:175!important}
  .main:has(.mobile-role-nav:not(:empty)) .content{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
  .main:has(.mobile-role-nav:not(:empty)) .mobile-bar.show+.content{padding-bottom:150px!important}

  /* Workflow and branch detail scroll naturally */
  .workflow-journey{margin-inline:-2px!important;overflow-x:auto!important;scrollbar-width:none}
  .workflow-journey::-webkit-scrollbar{display:none}
  .workflow-step{min-width:88px!important;font-size:.68rem!important}
  .branch-file-head{padding:16px!important;align-items:flex-start!important;gap:12px!important;flex-direction:column!important}
  .branch-tabs,.entity-tabs{margin-inline:-12px;padding-inline:12px;scrollbar-width:none}
  .branch-tabs::-webkit-scrollbar,.entity-tabs::-webkit-scrollbar{display:none}
  .doc-toolbar{display:grid!important;gap:10px!important}

  /* Login becomes compact and app-like on phone */
  #gate .portal-auth-main{min-height:calc(100dvh - 62px)}
  #gate .portal-auth-shell{padding:16px 0 24px!important}
  #gate .portal-auth-intro{display:none!important}
  #gate .portal-auth-grid{display:block!important;padding-inline:14px!important}
  #gate .portal-auth-card{padding:20px 16px!important;border-radius:16px!important;box-shadow:none!important}
  #gate .portal-auth-card-head h2{font-size:1.15rem!important}
  #gate .portal-auth-card-head p{font-size:.78rem!important}
  #gate .portal-gate-header-in{min-height:62px!important;padding-inline:14px!important}
}

@media(max-width:520px){
  .exec-kpis,.client-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .topbar{padding-inline:10px!important}
  .content{padding-inline:10px!important}
  .tb-title h2{font-size:.98rem!important}
  html[lang="en"] #app .tb-title h2,html[dir="ltr"] #app .tb-title h2{font-size:.94rem!important}
  .request-choice-grid{gap:10px!important}.request-choice-card{padding:16px!important;gap:12px!important}.request-choice-card>span{width:42px;height:42px}.request-choice-card h3{font-size:1rem!important}.request-choice-card p{font-size:.78rem;line-height:1.5}
}
@media(max-width:940px){
  .mobile-role-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .mobile-role-nav[data-role="client"]{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .mobile-role-nav .primary-mobile-action{color:#fff!important;background:var(--color-primary)!important;border-radius:50%!important;translate:0 -10px!important;box-shadow:0 8px 18px color-mix(in srgb,var(--color-primary) 28%,transparent)!important;justify-self:center!important}
  .mobile-role-nav .primary-mobile-action span{color:#fff!important}
}
/* Second Eye Portal v1.11 — reviewed UX implementation (M-008..M-017) */

/* Shared form rhythm: one clear column by default. */
.se-form-stack{display:grid;grid-template-columns:1fr;gap:0}
.se-form-stack .field{min-width:0}
.se-field-note,.se-field-error{font-size:.72rem;line-height:1.55;margin-top:5px}
.se-field-note{color:var(--color-text-3)}
.se-field-error{display:none;color:var(--color-error)}
.se-field-error.show{display:block}
.se-char-count{font-size:.68rem;color:var(--color-text-3);text-align:end;margin-top:4px;font-variant-numeric:tabular-nums}
.se-password-wrap{position:relative}.se-password-wrap .inp{padding-inline-end:76px}
.se-password-toggle{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--color-primary);font-weight:700;font-size:.72rem;padding:7px;cursor:pointer}
.se-owner-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}.se-owner-lock{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:800;color:var(--color-text-2)}
.se-protected-note{padding:11px 13px;border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:11px;color:var(--color-text-2);font-size:.75rem;line-height:1.65}

/* Busy / progress feedback. */
.btn.se-busy{pointer-events:none;opacity:.78;cursor:wait}
.btn.se-busy::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:se111Spin .72s linear infinite;flex:0 0 auto}
@keyframes se111Spin{to{transform:rotate(360deg)}}
.se-upload-progress{height:5px;background:var(--color-border);border-radius:99px;overflow:hidden;margin-top:7px}.se-upload-progress>span{display:block;height:100%;width:0;background:var(--color-primary);border-radius:inherit;transition:width .15s ease}.se-upload-progress-label{font-size:.68rem;color:var(--color-text-3);margin-top:4px}

/* Add client / agreement. */
.se-agreement-box{margin-top:5px;padding:14px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-2)}
.se-agreement-box>h4{font-size:.86rem;margin:0 0 3px}.se-agreement-box>p{font-size:.72rem;color:var(--color-text-3);margin:0 0 13px;line-height:1.6}
.agreement-card{border:1px solid var(--color-border);background:var(--color-surface);border-radius:14px;padding:17px;margin-bottom:16px}
.agreement-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.agreement-card-head h3{font-size:.95rem;margin:2px 0}.agreement-card-head p{font-size:.73rem;color:var(--color-text-3);margin:0}
.agreement-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.agreement-meta>div{padding:10px 12px;border-radius:10px;background:var(--color-surface-2)}.agreement-meta span{display:block;font-size:.68rem;color:var(--color-text-3);margin-bottom:3px}.agreement-meta b{font-size:.82rem}
.agreement-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid var(--color-border)}
.agreement-alert{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--color-warning) 35%,var(--color-border));background:color-mix(in srgb,var(--color-warning) 7%,var(--color-surface));border-radius:12px;font-size:.77rem;line-height:1.65}.agreement-alert b{display:block}.agreement-alert span{color:var(--color-text-3)}

/* Finance: claims before Daftra invoicing. */
.billing-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px;padding:17px 18px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:14px}.billing-hero h3{font-size:1rem;margin:0 0 4px}.billing-hero p{font-size:.75rem;color:var(--color-text-3);margin:0;max-width:720px}.billing-hero-actions{display:flex;gap:7px;flex-wrap:wrap}
.billing-filter{display:grid;grid-template-columns:1.25fr 1.2fr 1fr 1fr .9fr .9fr;gap:9px;padding:13px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.billing-filter .field{margin:0}.billing-filter label{font-size:.68rem!important}
.billing-quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 13px 13px;background:var(--color-surface-2)}
.billing-summary{margin-bottom:14px}.billing-summary .stat{min-height:105px}
.billing-selectbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid var(--color-border)}.billing-selectbar .hint{font-size:.72rem}.billing-total-selected{font-weight:800;font-variant-numeric:tabular-nums}
.billing-type{display:inline-flex;align-items:center;gap:6px}.billing-type::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-primary)}.billing-type.project::before{background:var(--color-accent)}
.daftra-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:.67rem;font-weight:800;background:var(--color-surface-2);border:1px solid var(--color-border)}
.invoice-list{margin-top:14px}

/* Mobile-first modals and service request forms. */
@media(max-width:940px){
 #modalRoot .modal{display:flex!important;flex-direction:column!important;overflow:hidden!important}
 #modalRoot .modal-h{flex:0 0 auto}
 #modalRoot .modal-b{flex:1 1 auto;min-height:0;overflow-y:auto!important;overscroll-behavior:contain}
 #modalRoot .modal-f{position:sticky;bottom:0;flex:0 0 auto;background:var(--color-surface);border-top:1px solid var(--color-border);display:grid!important;grid-template-columns:1fr!important}
 #modalRoot .modal-f .btn{width:100%;justify-content:center}
 .se-form-stack .field{margin-bottom:13px!important}
 .agreement-meta{grid-template-columns:1fr 1fr}.agreement-actions{display:grid;grid-template-columns:1fr 1fr}.agreement-actions .btn{width:100%}
 .billing-hero{align-items:stretch;flex-direction:column}.billing-hero-actions{display:grid;grid-template-columns:1fr 1fr}.billing-hero-actions .btn{width:100%}
 .billing-filter{grid-template-columns:1fr!important}.billing-quick{padding-top:4px}
 .billing-selectbar{align-items:flex-start;flex-direction:column}
 .billing-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
 .agreement-meta{grid-template-columns:1fr}.agreement-actions{grid-template-columns:1fr}
 .billing-hero-actions{grid-template-columns:1fr}.billing-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Make desktop forms calmer too; modal itself is compact. */
@media(min-width:941px){
 .modal.se-wide{max-width:760px}
 .se-user-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
 .se-user-edit-grid .se-full{grid-column:1/-1}
}
/* Second Eye Portal v1.12.0 — production QA remediation (QA-001..QA-056) */

/* Arabic typography must never inherit mono/English tracking. */
html[dir="rtl"] #app .stat .k,
html[dir="rtl"] #app .eyebrow,
html[dir="rtl"] #app .nav-label,
html[dir="rtl"] #app .nav-section-label,
html[dir="rtl"] #app .gsec,
html[dir="rtl"] #app .tbl-wrap th,
html[dir="rtl"] #app .wo-id,
html[dir="rtl"] #app .wo-meta div,
html[dir="rtl"] #app .kv .k,
html[dir="rtl"] #app .ck-h .st,
html[dir="rtl"] #app .tl-t,
html[dir="rtl"] #app .exec-kicker,
html[dir="rtl"] #app .role-btn .rk{
  letter-spacing:0!important;
}
html[dir="rtl"] #app .stat .k,
html[dir="rtl"] #app .eyebrow,
html[dir="rtl"] #app .nav-section-label,
html[dir="rtl"] #app .gsec,
html[dir="rtl"] #app .tbl-wrap th,
html[dir="rtl"] #app .kv .k{
  font-family:inherit!important;
}

/* The bottom navigation was intentionally removed after live mobile QA. */
#mobileBar,.mobile-bar,#roleMobileNav,.mobile-role-nav{display:none!important}

/* Navigation feedback. */
html.se112-navigating .topbar::after{
  content:"";position:absolute;inset-inline-start:0;inset-block-end:0;height:2px;width:38%;
  background:var(--brand-grad-x);animation:se112-load .72s ease-in-out infinite alternate;
}
@keyframes se112-load{from{transform:translateX(-25%);opacity:.55}to{transform:translateX(190%);opacity:1}}

/* Primary actions remain reachable on mobile, but live inside content rather than a second nav. */
.page-actions-mobile{display:none}
@media(max-width:940px){
  #tbActions{display:none!important}
  .page-actions-mobile{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;position:relative;z-index:2}
  .page-actions-mobile .btn{flex:1 1 150px;min-height:44px;justify-content:center}
  .content{padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
  .grid.g4,.exec-kpis,.account-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .grid.g4 .stat,.exec-kpis .stat,.account-summary .stat{min-height:90px!important;padding:16px!important}
  .exec-kpis .stat:last-child:nth-child(odd){grid-column:1/-1}
  .stat .v{font-size:clamp(1.55rem,9vw,2.25rem)!important}
  .stat .s{font-size:.82rem!important}
}

/* Clean empty client metadata instead of showing a lone separator. */
.client-account-card p:empty{display:none!important}

/* Mobile sheets are single-scroll, full-width and actions are always visible. */
@media(max-width:940px){
  #modalRoot .modal-bg{align-items:stretch!important;padding:0!important}
  #modalRoot .modal{width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important}
  #modalRoot .modal-strip{position:absolute;inset-inline:0;top:0;z-index:2}
  #modalRoot .modal-h{padding:calc(18px + env(safe-area-inset-top)) 18px 10px!important}
  #modalRoot .modal-b{padding:12px 18px 22px!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
  #modalRoot .modal-f{position:relative!important;bottom:auto!important;padding:10px 18px calc(12px + env(safe-area-inset-bottom))!important;background:var(--color-surface)!important;border-top:1px solid var(--color-border)!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  #modalRoot .modal-f .btn{width:100%!important;min-height:50px!important;justify-content:center!important}
}

/* Unified field-level feedback. */
.se112-form-error{display:none;margin:0 0 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--color-error) 35%,var(--color-border));border-radius:10px;background:color-mix(in srgb,var(--color-error) 7%,var(--color-surface));color:var(--color-error);font-size:.88rem;line-height:1.6}
.se112-form-error.show{display:block}
.se-field-error.show{margin-top:6px;color:var(--color-error);font-size:.8rem;line-height:1.45}
[aria-invalid="true"]{border-color:var(--color-error)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-error) 12%,transparent)!important}

/* Custom Saudi city combobox. */
.se112-city-combo{position:relative}
.se112-city-menu{display:none;position:absolute;z-index:360;inset-inline:0;top:calc(100% + 4px);max-height:240px;overflow:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:var(--shadow-lg,0 12px 36px rgba(11,27,51,.16));padding:6px}
.se112-city-combo.open .se112-city-menu{display:block}
.se112-city-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;border:0;background:transparent;padding:11px 12px;border-radius:8px;text-align:start;color:var(--color-text);font:inherit;cursor:pointer}
.se112-city-option:hover,.se112-city-option:focus{background:var(--color-surface-2);outline:none}
.se112-city-option small{color:var(--color-text-3);font-size:.75rem;direction:ltr}
.se112-city-empty{padding:14px;color:var(--color-text-3);text-align:center;font-size:.84rem}

/* Custom file picker — hides browser English labels. */
.se112-file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.se112-file-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.se112-file-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);font-weight:600;cursor:pointer}
.se112-file-name{font-size:.82rem;color:var(--color-text-3);overflow-wrap:anywhere}

/* Billing: filters first, compact export controls, clear empty state. */
.billing-toolbar-112{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.billing-toolbar-112 .btn{min-height:42px}
.billing-empty-hint{padding:12px 14px;border:1px dashed var(--color-border);border-radius:12px;color:var(--color-text-3);background:var(--color-surface-2);margin-bottom:12px}
@media(max-width:940px){
 .billing-toolbar-112{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .billing-toolbar-112 .btn{min-width:0;padding-inline:8px;font-size:.8rem}
 .billing-filters .field{margin-bottom:12px}
}

/* Empty states should be visible, not a blank page. */
.se112-empty-page{min-height:260px;display:grid;place-items:center;text-align:center;padding:30px 18px;border:1px dashed var(--color-border);border-radius:16px;background:var(--color-surface)}
.se112-empty-page b{display:block;font-size:1rem;margin-bottom:6px}.se112-empty-page p{color:var(--color-text-3);margin:0 0 16px}

/* Prevent duplicated + in RTL labels. */
.nav-item .se112-single-plus{display:inline-flex}

/* Accessible disabled billing action. */
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
/* Numeric date display over the native mobile date picker. */
.se112-date-wrap{position:relative}
.se112-date-display{display:flex;align-items:center;min-height:48px;width:100%;padding:10px 13px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);font-variant-numeric:tabular-nums;direction:ltr;justify-content:flex-end}
.se112-date-native{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:2}
.se112-date-wrap:focus-within .se112-date-display{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 12%,transparent)}
/* Second Eye Portal v1.13.0 */
.se113-file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
.se113-file-picker{border:1px dashed var(--color-border,#d8e0e8);border-radius:12px;padding:12px;margin-top:6px;background:var(--color-surface-soft,#f8fafb)}
.se113-file-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.se113-file-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;color:var(--color-primary);padding:8px 10px;border-radius:9px;background:#fff;border:1px solid var(--color-border,#d8e0e8)}
.se113-file-remove{border:0;background:transparent;color:var(--color-error,#b42318);cursor:pointer;font:inherit;font-weight:700}.se113-file-name{margin-top:8px;font-size:.875rem;font-weight:600;word-break:break-word}.se113-file-hint{margin-top:5px;font-size:.78rem;color:var(--color-text-muted,#687789);line-height:1.55}
.se113-danger-confirm{display:flex;gap:12px;padding:13px;border-radius:12px;background:#fff5f4;margin-bottom:14px}.se113-danger-confirm svg{flex:none;color:var(--color-error,#b42318)}.se113-danger-confirm p{margin:4px 0 0;color:var(--color-text-muted,#687789);line-height:1.65}
.se113-activity{margin-top:16px}.se113-event{display:grid;grid-template-columns:14px 1fr;gap:10px;position:relative;padding:10px 0}.se113-event:not(:last-child){border-bottom:1px solid var(--color-border,#e6ebef)}.se113-event-dot{width:9px;height:9px;border-radius:50%;background:var(--color-primary);margin-top:7px}.se113-event p,.se113-event small{margin:3px 0 0;color:var(--color-text-muted,#687789);font-size:.8rem}
.se113-import-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.se113-import-summary>div{padding:12px;border:1px solid var(--color-border,#d8e0e8);border-radius:10px;text-align:center}.se113-import-summary b{display:block;font-size:1.25rem}.se113-import-summary span{font-size:.78rem;color:var(--color-text-muted,#687789)}.se113-import-summary .ok b{color:#147a45}.se113-import-summary .bad b{color:#b42318}.se113-import-errors{max-height:210px;overflow:auto;padding:8px 10px;border-radius:10px;background:#fff5f4;margin:10px 0}.se113-import-errors p{margin:5px 0;font-size:.82rem}.se113-progress{text-align:center;padding:7px;color:var(--color-text-muted,#687789)}.se113-import-result{text-align:center;padding:12px}.se113-template-row{justify-content:flex-start}
.se113-search-btn{font-size:1.35rem;line-height:1}.se113-search-results{display:grid;gap:7px;max-height:55vh;overflow:auto}.se113-search-result{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;text-align:right;border:1px solid var(--color-border,#d8e0e8);background:#fff;border-radius:10px;padding:10px;cursor:pointer;font:inherit}.se113-search-result>span{grid-row:1/3;font-size:.72rem;color:var(--color-primary);font-weight:800;padding-top:2px}.se113-search-result b{font-size:.9rem}.se113-search-result small{color:var(--color-text-muted,#687789)}
@media(max-width:940px){#tbActions{display:none!important}.page-actions-mobile{display:flex!important;gap:8px;flex-wrap:wrap;margin-bottom:12px}.page-actions-mobile .btn{flex:1 1 auto;min-height:42px}.se113-file-picker{padding:11px}.agreement-actions{display:flex;gap:7px;flex-wrap:wrap}.se113-import-summary{grid-template-columns:repeat(3,1fr)}}
/* Second Eye Portal v1.14.0 — performance UX */
.se114-loading-strip{position:absolute;inset-inline:0;bottom:0;height:2px;overflow:hidden;background:transparent;pointer-events:none}
.se114-loading-strip:after{content:"";display:block;width:38%;height:100%;background:currentColor;animation:se114load .9s ease-in-out infinite;color:var(--color-primary)}
@keyframes se114load{from{transform:translateX(-120%)}to{transform:translateX(360%)}}
html[dir="rtl"] .se114-loading-strip:after{animation-direction:reverse}
.se114-skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.se114-skeleton-card,.se114-skeleton-panel{border-radius:16px;background:linear-gradient(90deg,var(--color-surface-2,#f3f5f7) 25%,var(--color-surface,#fff) 45%,var(--color-surface-2,#f3f5f7) 65%);background-size:220% 100%;animation:se114shimmer 1.25s linear infinite;border:1px solid var(--color-border,#e6e9ee)}
.se114-skeleton-card{height:96px}.se114-skeleton-panel{height:280px}
@keyframes se114shimmer{to{background-position:-220% 0}}
@media(max-width:940px){.se114-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.se114-skeleton-card{height:82px}.se114-skeleton-panel{height:220px}.content{content-visibility:auto}}
@media(prefers-reduced-motion:reduce){.se114-loading-strip:after,.se114-skeleton-card,.se114-skeleton-panel{animation:none}}

/* v1.14.1 — client service-request mobile hotfix */
.se114-request-kind-fixed{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border,#dbe3ef);border-radius:14px;background:var(--surface-soft,#f8fafc);margin-bottom:4px}.se114-request-kind-fixed b{font-size:1rem}.se114-request-kind-fixed span{font-size:.86rem;color:var(--muted,#7b879b)}


/* v1.14.2 — iOS Safari form reliability */
@media(max-width:940px){
  #modalRoot .se112-city-combo.open .se112-city-menu{
    position:static!important;display:block!important;margin-top:6px!important;max-height:220px!important;
    box-shadow:none!important;border-radius:10px!important;overflow-y:auto!important;
  }
  #modalRoot .se112-city-menu .se112-city-option{min-height:44px!important}
}
#modalRoot .se112-date-native{
  opacity:.001!important;-webkit-appearance:none!important;appearance:none!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;background:transparent!important;
}
#modalRoot .se112-date-native::-webkit-date-and-time-value{color:transparent!important;-webkit-text-fill-color:transparent!important}
#modalRoot .se113-file-input{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;clip-path:inset(50%)!important;overflow:hidden!important}
#modalRoot .se113-file-picker{display:block!important}


/* v1.15.0 Workflow Reliability & Mobile UX */
.se115-journey{grid-template-columns:repeat(8,minmax(90px,1fr));overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.se115-journey::-webkit-scrollbar{display:none}.se115-journey .workflow-step{white-space:nowrap}
.se115-scope-text{white-space:pre-wrap;line-height:1.8;margin:0}.se115-timeline{display:grid;gap:0}.se115-event{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding:0 0 18px}.se115-event:after{content:"";position:absolute;right:7px;top:15px;bottom:0;width:1px;background:var(--color-line,#dfe6ef)}html[dir="ltr"] .se115-event:after{right:auto;left:7px}.se115-event:last-child:after{display:none}.se115-event-dot{width:14px;height:14px;border-radius:50%;background:var(--color-accent,#54b6ae);margin-top:4px;z-index:1}.se115-event p{margin:4px 0;color:var(--color-text-2)}.se115-event small,.se115-timeline-empty{color:var(--color-text-3)}
.se115-requirements{padding:11px 12px;border-radius:12px;background:#f5f7fa;color:var(--color-text-2);font-size:13px;line-height:1.6}.se115-requirements .ok{color:#16794c}.se115-requirements .bad{color:var(--color-error,#b23a31)}
.se113-file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.se113-file-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.se115-file-preview{border:1px solid var(--color-line);background:#fff;border-radius:10px;padding:9px 12px;font:inherit;cursor:pointer}.se115-pick-photo,.se115-pick-pdf{cursor:pointer}
.se115-notes .nrow{width:100%;border:0;border-bottom:1px solid var(--color-line);background:#fff;text-align:inherit;display:flex;align-items:flex-start;gap:12px;padding:18px;cursor:default}.se115-notes .nrow.is-actionable{cursor:pointer}.se115-notes .nrow.is-actionable:active{transform:scale(.995)}.se115-note-body{flex:1;min-width:0}.se115-note-body p{margin:5px 0}.se115-note-cta{display:inline-flex;align-items:center;gap:6px;color:var(--color-primary);font-weight:700;margin-top:6px}
@media(max-width:760px){.se115-journey{margin-inline:-4px;grid-template-columns:repeat(8,minmax(112px,1fr))}.se115-quote-form textarea{min-height:110px!important}.se115-notes .nrow{padding:16px 14px}.se115-notes .nt{font-size:11px;white-space:nowrap}.se113-file-line .se113-file-btn{flex:1 1 135px;justify-content:center}.se115-file-preview{flex:0 0 auto}}


/* v1.16.0 — Unified Forms & Mobile Reliability */
.se116-native-file{min-height:44px;justify-content:center}.se116-file-eye{width:42px;height:42px;border:1px solid var(--color-border,#d8e0e8);background:#fff;border-radius:10px;display:inline-grid;place-items:center;font-size:1.08rem;cursor:pointer}.se116-file-delete{border:0;background:transparent;color:var(--color-error,#b42318);font:inherit;font-weight:700;cursor:pointer}.se116-stored-file{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--color-border,#d8e0e8);border-radius:12px;background:var(--color-surface,#fff);max-width:100%}.se116-file-name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.se116-po-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.se116-po-line>.se116-stored-file{flex:1 1 260px}
.se116-duration{display:flex;align-items:center;justify-content:center;min-height:44px;margin:-2px 0 14px;border-radius:12px;background:var(--color-surface-2,#f5f7fa);font-weight:800;color:var(--color-primary)}.se116-schedule{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.se116-schedule>div{padding:12px;border-radius:12px;background:var(--color-surface-2,#f5f7fa)}.se116-schedule span{display:block;color:var(--color-text-3);font-size:.72rem;margin-bottom:4px}.se116-schedule b{font-size:.9rem}
.se116-request-tabs{overflow-x:auto;scrollbar-width:none}.se116-request-tabs::-webkit-scrollbar{display:none}.se116-request-tabs button{white-space:nowrap}.se116-request-row{grid-template-columns:minmax(0,1.5fr) minmax(110px,.8fr) auto}.se116-client-state{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--color-surface-2);font-size:.75rem;font-weight:800}.se116-clickable-kpi{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}.se116-clickable-kpi:active{transform:scale(.985)}
.se116-search-head{display:grid;grid-template-columns:1fr 44px;gap:8px;align-items:start}.se116-search-head .field{margin:0}.se116-search-close{width:44px;height:44px;border:1px solid var(--color-border);background:#fff;border-radius:12px;font:inherit;font-size:1.5rem;cursor:pointer}.se116-search-results{max-height:min(62vh,560px);padding-top:10px}.se116-search-empty{padding:28px 12px;text-align:center;color:var(--color-text-3)}.se116-search-group{display:grid;gap:7px;margin-bottom:14px}.se116-search-group h4{margin:0;padding:3px 2px;font-size:.75rem;color:var(--color-text-3)}.se116-search-modal .modal-f{display:none!important}
@media(max-width:940px){.se116-date-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}.se116-schedule{grid-template-columns:1fr 1fr 1fr}.se116-request-row{grid-template-columns:1fr auto!important;gap:8px}.se116-request-row>div:last-child{grid-column:1/-1;font-size:.72rem;color:var(--color-text-3)}.se116-search-modal{align-self:flex-start!important;max-height:78dvh!important;margin-top:8dvh!important}.se116-search-modal .modal-b{padding-bottom:14px!important}}
@media(max-width:520px){.se116-date-grid{grid-template-columns:1fr!important}.se116-schedule{grid-template-columns:1fr}.se116-stored-file{padding:9px 10px}.se116-file-eye{width:40px;height:40px}.se116-search-modal{margin:0!important;max-height:100dvh!important;height:auto!important}.se116-search-results{max-height:68dvh}.se116-request-tabs{margin-inline:-10px;padding-inline:10px}}

/* v1.16.3: workflow action feedback must remain visible on mobile while disabled. */
.btn.se-busy:disabled{opacity:1!important;visibility:visible!important;display:flex!important}
.se116-action-status{grid-column:1/-1;min-height:22px;padding:2px 4px;text-align:center;font-size:.82rem;color:var(--color-text-2)}

/* v1.17.0 — QA-091 multi attachments */
.se117-file-picker{display:grid;gap:10px}
.se117-file-picker .se113-file-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.se117-file-picker .se117-count{margin-inline-start:auto;font-size:.82rem;color:var(--muted,#7c899d);font-variant-numeric:tabular-nums}
.se117-file-picker .se113-file-btn.is-disabled{opacity:.5;pointer-events:none}
.se117-file-list{display:grid;gap:8px}
.se117-file-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line,#e2e8f0);border-radius:12px;background:#fff}
.se117-file-row .se116-file-name{min-width:0;display:grid;gap:2px}
.se117-file-row .se116-file-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.se117-file-row .se116-file-name small{font-size:.76rem;color:var(--muted,#7c899d)}
.se117-no-file{padding:8px 2px;color:var(--muted,#7c899d);font-size:.88rem}
.se117-upload-status{min-height:1.1em;color:var(--muted,#7c899d);font-size:.82rem}
.se117-file-row .se116-file-eye,.se117-file-row .se113-file-remove{min-width:42px;min-height:42px;border-radius:10px}
@media(max-width:760px){.se117-file-row{grid-template-columns:minmax(0,1fr) 42px 58px}.se117-file-picker .se113-file-btn{width:auto;min-width:150px}}
/* v1.18 technician lifecycle feedback */
.se118-submit-status{min-height:22px;margin-top:10px;font-size:12px;color:var(--color-text-3);line-height:1.6}.se117-file-picker .se113-file-btn.is-disabled{opacity:.5;pointer-events:none}

/* v1.19.1 */
.se119-stat-link{cursor:pointer!important;transition:transform .15s ease,border-color .15s ease;background .15s ease}.se119-stat-link:active{transform:scale(.985)}.se119-branch-kpis{grid-template-columns:repeat(3,1fr)}.se119-branch-kpis .stat{border:1px solid var(--color-border);background:var(--color-surface);text-align:start}.se119-filter-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--color-text-3);font-size:13px}.se119-push-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--r2);margin-bottom:14px}.se119-push-card p{margin:4px 0 0;color:var(--color-text-3);font-size:13px;line-height:1.7}.se119-note-list .nrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding-inline:12px}.se119-note-main{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:12px;width:100%;padding:14px 4px;text-align:start;cursor:pointer}.se119-note-main p{margin:4px 0 0;color:var(--color-text-3)}.se119-note-action{white-space:nowrap}.se119-network-busy{pointer-events:none;opacity:.82}.se119-network-busy::before{content:'';display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;margin-inline-end:7px;vertical-align:-2px;animation:se119spin .7s linear infinite}@keyframes se119spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.se119-branch-kpis{grid-template-columns:1fr 1fr}.se119-branch-kpis .stat:last-child{grid-column:1/-1}.se119-push-card{align-items:flex-start;flex-direction:column}.se119-push-card .btn{width:100%}.se119-note-list .nrow{grid-template-columns:1fr}.se119-note-action{margin:0 4px 12px;width:calc(100% - 8px)}.branch-contact{grid-template-columns:1fr}}
.se119-push-onboard{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin:0 0 14px;border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--color-border));border-radius:var(--r2);background:color-mix(in srgb,var(--color-primary) 5%,var(--color-surface))}.se119-push-onboard p{margin:3px 0 0;color:var(--color-text-3);font-size:13px}.se119-push-onboard .row{flex-wrap:nowrap}@media(max-width:720px){.se119-push-onboard{align-items:flex-start;flex-direction:column}.se119-push-onboard .row{width:100%}.se119-push-onboard .btn{flex:1}}


/* ===== v1.23.0 Final Acceptance ===== */
/* Second Eye Portal v1.23.0 — Final Acceptance */

/* P1-GLOBAL: date fields must remain natively clickable on desktop/mobile.
   v1.14.2 used a visual proxy but the invisible native input was not overlaid,
   which made the visible date surface non-interactive in several flows. */
#app .se112-date-wrap,
#modalRoot .se112-date-wrap{position:relative!important}
#app .se112-date-display,
#modalRoot .se112-date-display{display:none!important}
#app input[type="date"].se112-date-native,
#modalRoot input[type="date"].se112-date-native{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  opacity:1!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
  color:var(--color-text)!important;
  -webkit-text-fill-color:var(--color-text)!important;
  background:var(--color-surface)!important;
  direction:ltr!important;
  text-align:start!important;
  cursor:pointer!important;
}
#app input[type="date"].se112-date-native::-webkit-date-and-time-value,
#modalRoot input[type="date"].se112-date-native::-webkit-date-and-time-value{
  color:var(--color-text)!important;
  -webkit-text-fill-color:var(--color-text)!important;
  text-align:start!important;
}
#app input[type="date"]::-webkit-calendar-picker-indicator,
#modalRoot input[type="date"]::-webkit-calendar-picker-indicator{opacity:1!important;cursor:pointer!important}

/* Global active navigation */
.nav-item.on{background:var(--pm-5)!important;color:var(--color-primary)!important;font-weight:800!important}

/* Shared operational list layout */
.se123-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.se123-search{flex:1;min-width:240px;max-width:420px}
.se123-filterbar{display:flex;gap:6px;overflow:auto;padding-bottom:2px;scrollbar-width:thin}
.se123-filterbar button{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-2);border-radius:999px;padding:8px 11px;white-space:nowrap;font-weight:750;cursor:pointer}
.se123-filterbar button.on{border-color:var(--color-primary);background:var(--pm-5);color:var(--color-primary)}
.se123-filterbar .count{margin-inline-start:5px;font-size:.72rem;opacity:.72}
.se123-list{display:grid;gap:8px}
.se123-row{width:100%;display:grid;grid-template-columns:minmax(155px,1.1fr) minmax(210px,1.5fr) minmax(125px,.8fr) minmax(125px,.8fr) minmax(130px,.85fr);align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);text-align:start;color:inherit;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.se123-row:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));box-shadow:0 8px 24px rgba(11,27,51,.06);transform:translateY(-1px)}
.se123-cell{min-width:0;display:grid;gap:3px}
.se123-cell>span,.se123-cell>small{color:var(--color-text-3);font-size:.7rem}
.se123-cell>b{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se123-ref{font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.se123-row.is-late{border-inline-start:4px solid var(--color-error)}
.se123-row.is-urgent:not(.is-late){border-inline-start:4px solid var(--color-warning)}
.se123-empty.card{padding:26px}
.se123-statusline{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Client request list remains a LIST, not cards. */
.se123-client-request-list{display:grid;gap:7px}
.se123-client-request-row{width:100%;display:grid;grid-template-columns:minmax(150px,.8fr) minmax(260px,1.8fr) minmax(145px,.8fr) minmax(110px,.6fr);align-items:center;gap:12px;padding:13px 15px;border:0;border-bottom:1px solid var(--color-border);background:transparent;text-align:start;color:inherit;cursor:pointer}
.se123-client-request-row:last-child{border-bottom:0}
.se123-client-request-row:hover{background:var(--pm-6)}
.se123-request-kind{display:inline-flex;width:max-content;max-width:100%;padding:5px 9px;border-radius:999px;background:var(--pm-5);color:var(--color-primary);font-size:.72rem;font-weight:800}
.se123-request-main{display:grid;gap:3px;min-width:0}
.se123-request-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se123-request-main small{color:var(--color-text-3)}

/* Technician: cards-first across breakpoints */
.se123-tech-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.se123-tech-card{width:100%;border:1px solid var(--color-border);background:var(--color-surface);border-radius:14px;padding:15px;text-align:start;color:inherit;cursor:pointer;display:grid;gap:11px}
.se123-tech-card:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));box-shadow:0 8px 24px rgba(11,27,51,.06)}
.se123-tech-card.is-late{border-inline-start:4px solid var(--color-error)}
.se123-tech-card.is-urgent:not(.is-late){border-inline-start:4px solid var(--color-warning)}
.se123-tech-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.se123-tech-title{display:grid;gap:3px}.se123-tech-title small{color:var(--color-text-3)}
.se123-tech-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:10px;border-top:1px solid var(--color-border)}
.se123-tech-meta span{display:grid;gap:2px;color:var(--color-text-3);font-size:.68rem}.se123-tech-meta b{color:var(--color-text);font-size:.76rem}
.se123-next-action{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--color-primary);font-size:.75rem;font-weight:800}

/* Make KPI cards visibly actionable where JS attaches interaction. */
.se123-clickable-stat{cursor:pointer;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.se123-clickable-stat:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));transform:translateY(-1px);box-shadow:0 8px 24px rgba(11,27,51,.05)}

/* Project planned vs actual schedule */
.se123-schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.se123-schedule-box{border:1px solid var(--color-border);border-radius:12px;padding:13px;display:grid;gap:7px}
.se123-schedule-box>span{font-size:.72rem;color:var(--color-text-3);font-weight:700}
.se123-schedule-box>div{display:flex;justify-content:space-between;gap:10px;font-size:.78rem}

@media(max-width:940px){
  .se123-toolbar{align-items:stretch;flex-direction:column}.se123-search{max-width:none;min-width:0;width:100%}
  .se123-row{grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .se123-row .se123-cell:nth-child(2){grid-column:1/-1;grid-row:1}
  .se123-row .se123-cell:nth-child(1){grid-column:1/-1;grid-row:2}
  .se123-client-request-row{grid-template-columns:1fr 1fr;padding:13px 10px}
  .se123-client-request-row .se123-request-main{grid-column:1/-1;grid-row:1}
  .se123-tech-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .se123-row,.se123-client-request-row{grid-template-columns:1fr}
  .se123-row .se123-cell,.se123-client-request-row>*{grid-column:auto!important;grid-row:auto!important}
  .se123-tech-meta{grid-template-columns:1fr 1fr}
  .se123-schedule-grid{grid-template-columns:1fr}
}

/* ===== v1.24.0 final workflow ===== */
.se124-inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.se124-map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.se124-map-grid label{display:block;font-size:12px;color:var(--color-text-3);margin-bottom:5px}
.se124-import-preview{max-height:360px;overflow:auto;border:1px solid var(--color-border);border-radius:14px}.se124-import-row{display:grid;grid-template-columns:48px 100px 1.1fr 2fr 1fr;gap:8px;align-items:center;padding:9px 11px;border-bottom:1px solid var(--color-border);font-size:12px}.se124-import-row:last-child{border-bottom:0}.se124-import-row.bad{background:color-mix(in srgb,var(--color-error) 6%,transparent)}.se124-import-row.ok small{color:var(--color-success)}.se124-import-row.bad small{color:var(--color-error)}
.se124-branch-history{display:grid;gap:10px}.se124-branch-history-row{border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);overflow:hidden}.se124-branch-history-main{width:100%;border:0;background:transparent;color:inherit;text-align:start;display:grid;grid-template-columns:140px minmax(0,1fr) 150px 120px;gap:12px;align-items:center;padding:14px 16px;cursor:pointer}.se124-branch-history-main:hover{background:var(--color-surface-2)}.se124-ref-docs{padding:9px 16px 12px;border-top:1px solid var(--color-border);display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:12px}.se124-ref-docs.muted{color:var(--color-text-3)}.se124-doc-chip{border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:999px;padding:5px 9px;cursor:pointer;color:inherit}
.se124-claims-filters{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:10px;align-items:end}.se124-claims-filters .field{margin:0}.se124-claim-list{display:grid}.se124-claim-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--color-border)}.se124-claim-row:first-child{border-top:0}.se124-claim-row>button{border:0;background:transparent;color:inherit;text-align:start;display:grid;grid-template-columns:120px minmax(0,1fr) 120px 130px;gap:12px;align-items:center;cursor:pointer}.se124-claim-row.missing{background:color-mix(in srgb,var(--color-warning) 6%,transparent)}.se124-claim-row>small{grid-column:2/-1;color:var(--color-warning)}
.se124-gate{margin-top:14px}
@media(max-width:760px){.se124-map-grid{grid-template-columns:1fr}.se124-import-row{grid-template-columns:42px 74px 1fr}.se124-import-row span:nth-child(4),.se124-import-row small{grid-column:2/-1}.se124-branch-history-main{grid-template-columns:1fr 100px}.se124-branch-history-main>.se123-request-kind{grid-column:1/-1;justify-self:start}.se124-branch-history-main>span:nth-child(2){grid-column:1/-1}.se124-claims-filters{grid-template-columns:1fr 1fr}.se124-claims-filters>.field:first-child,.se124-claims-filters>button{grid-column:1/-1}.se124-claim-row{grid-template-columns:28px 1fr}.se124-claim-row>button{grid-template-columns:1fr 90px;gap:7px}.se124-claim-row>button>.se123-request-kind,.se124-claim-row>button>span:nth-child(2){grid-column:1/-1}.se124-claim-row>.tag{grid-column:2}.se124-claim-row>small{grid-column:2}}

/* v1.25.0 — SaaS agreement experience */
.se125-home-agreement{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:start;border:1px solid var(--line-1);background:var(--surface-1);border-radius:16px;padding:15px 16px;margin:0 0 14px;cursor:pointer;color:inherit;box-shadow:0 4px 18px rgba(14,23,38,.04)}
.se125-home-agreement>div{display:grid;gap:3px}.se125-home-agreement span:first-child,.se125-agreement-info span{font-size:.78rem;color:var(--text-3)}.se125-home-agreement b{font-size:.96rem}.se125-home-agreement small{color:var(--text-3)}
.se125-home-agreement.is-active,.se125-home-agreement.is-renewing{border-inline-start:4px solid #218a62}.se125-home-agreement.is-warning{border-inline-start:4px solid #c58a18}.se125-home-agreement.is-stopped,.se125-home-agreement.is-expired,.se125-home-agreement.is-not-renewing{border-inline-start:4px solid #b34a4a}
.se125-agreement-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px;border:1px solid var(--line-1);border-radius:18px;background:var(--surface-1);box-shadow:0 6px 24px rgba(14,23,38,.04)}
.se125-agreement-hero h2{margin:5px 0 4px;font-size:clamp(1.12rem,3.8vw,1.45rem)}.se125-agreement-hero p{margin:0;color:var(--text-3)}
.se125-agreement-state{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:800}.se125-agreement-state.is-active,.se125-agreement-state.is-renewing{background:#e9f7f0;color:#176f50}.se125-agreement-state.is-warning{background:#fff6df;color:#986710}.se125-agreement-state.is-stopped,.se125-agreement-state.is-expired,.se125-agreement-state.is-not-renewing{background:#fdecec;color:#9c3434}
.se125-agreement-info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.se125-agreement-info>div{display:grid;gap:5px;padding:13px;border:1px solid var(--line-1);border-radius:14px;background:var(--surface-1)}
.se125-agreement-note{border-radius:13px;padding:11px 13px;margin-bottom:14px;font-size:.86rem}.se125-agreement-note.is-active,.se125-agreement-note.is-renewing{background:#edf8f3;color:#176f50}.se125-agreement-note.is-warning{background:#fff7e5;color:#8c6217}.se125-agreement-note.is-stopped,.se125-agreement-note.is-expired,.se125-agreement-note.is-not-renewing{background:#fff0f0;color:#943c3c}
.se125-docs{margin-top:0}.se125-docs .card-head{align-items:flex-start}.se125-docs .card-head .hint{display:block;margin-top:3px}.se125-doc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-1)}.se125-doc:last-child{border-bottom:0}.se125-doc>div{display:grid;gap:3px}.se125-doc small{color:var(--text-3)}.se125-doc-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--surface-2)}.se125-doc.is-missing{opacity:.65}.se125-doc-skeleton{height:62px;border-radius:12px;background:linear-gradient(90deg,var(--surface-2),var(--surface-1),var(--surface-2));background-size:200% 100%;animation:se125Pulse 1.2s linear infinite;margin:6px 0}.se125-agreement-empty{text-align:center;padding:36px 20px;border:1px dashed var(--line-1);border-radius:18px;background:var(--surface-1)}.se125-agreement-empty svg{width:36px;height:36px}.se125-agreement-empty h3{margin:10px 0 6px}.se125-agreement-empty p{margin:0;color:var(--text-3)}
@keyframes se125Pulse{to{background-position:-200% 0}}
@media(max-width:700px){.se125-agreement-hero{padding:16px;flex-direction:column}.se125-agreement-info{grid-template-columns:1fr 1fr}.se125-doc{grid-template-columns:auto 1fr}.se125-doc .btn{grid-column:1/-1;width:100%}.se125-home-agreement{padding:13px 14px}}

/* ===== v1.27.0 — unified English Gregorian date picker ===== */
.se127-date-wrap{position:relative;display:flex;align-items:center;width:100%;direction:ltr}
.se127-date-display{padding-inline-end:42px!important;cursor:pointer;text-align:left;font-variant-numeric:tabular-nums;background:var(--color-surface,#fff)!important}
.se127-date-trigger{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:9px;background:transparent;display:grid;place-items:center;cursor:pointer;font-size:16px;color:var(--color-text-2,#52606d)}
.se127-date-trigger:hover{background:var(--color-surface-2,#f5f7fa)}
.se127-date-popover{position:fixed;z-index:100000;background:var(--color-surface,#fff);border:1px solid var(--color-border,#dfe4ea);border-radius:16px;padding:12px;box-shadow:0 18px 50px rgba(11,27,51,.18);font-family:inherit;color:var(--color-text,#17212b);direction:ltr}
.se127-date-popover[hidden]{display:none!important}
.se127-date-head{display:grid;grid-template-columns:34px 1fr 34px;gap:8px;align-items:center;margin-bottom:10px}
.se127-date-nav{height:34px;border:1px solid var(--color-border,#dfe4ea);background:var(--color-surface,#fff);border-radius:9px;font-size:22px;line-height:1;cursor:pointer;color:inherit}
.se127-date-nav:hover{background:var(--color-surface-2,#f5f7fa)}
.se127-date-selects{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:7px}
.se127-date-selects select{height:34px;min-width:0;border:1px solid var(--color-border,#dfe4ea);border-radius:9px;background:var(--color-surface,#fff);padding:0 8px;font:inherit;font-size:12px;font-weight:700;color:inherit;direction:ltr}
.se127-date-week,.se127-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.se127-date-week{margin-bottom:4px}.se127-date-week span{text-align:center;font-size:10px;font-weight:800;color:var(--color-text-3,#7b8794);padding:4px 0}
.se127-date-day,.se127-date-blank{aspect-ratio:1/1;min-width:0}
.se127-date-day{border:0;border-radius:9px;background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:12px;font-weight:650;display:grid;place-items:center}
.se127-date-day:hover:not(:disabled){background:var(--color-surface-2,#f2f5f8)}
.se127-date-day.is-today{box-shadow:inset 0 0 0 1px var(--color-primary,#3c6f78)}
.se127-date-day.is-selected{background:var(--color-primary,#3c6f78);color:#fff;box-shadow:none}
.se127-date-day:disabled{opacity:.28;cursor:not-allowed}
.se127-date-foot{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--color-border,#dfe4ea);margin-top:10px;padding-top:10px}
.se127-date-foot button{border:0;background:transparent;color:var(--color-primary,#3c6f78);font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:6px 8px;border-radius:8px}
.se127-date-foot button:hover{background:var(--color-surface-2,#f2f5f8)}
@media(max-width:600px){
 .se127-date-popover{left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom));top:auto!important;width:auto!important;border-radius:18px;padding:14px}
 .se127-date-day{font-size:13px}.se127-date-week span{font-size:11px}.se127-date-head{margin-bottom:12px}
}


/* Second Eye v1.28.3 — accepted UX consolidation */
.se128-spinner{width:15px;height:15px;border:2px solid currentColor;border-left-color:transparent;border-radius:50%;display:inline-block;vertical-align:-3px;animation:se128spin .7s linear infinite;margin-inline-end:7px}.se128-ok{font-weight:900;margin-inline-end:6px}@keyframes se128spin{to{transform:rotate(360deg)}}
.btn[aria-busy="true"]{cursor:wait;opacity:.88}.btn--xs{padding:4px 8px;font-size:11px;min-height:26px}.se117-file-row{gap:7px}.se128-replace{margin-inline-start:auto}
.se128-delivery-card .card-pad{display:grid;gap:14px}.se128-delivery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.se128-delivery-box{border:1px solid var(--color-border);border-radius:14px;padding:14px;background:var(--color-surface)}.se128-delivery-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.se128-counter{font:700 12px/1 var(--font-mono,monospace);color:var(--color-text-3)}.se128-delivery-box small{display:block;margin-top:7px;color:var(--color-text-3)}.se128-delivery-gate{font-size:13px;color:var(--color-text-3)}.se128-send-delivery{justify-self:start}
.se128-table-card{border:1px solid var(--color-border);border-radius:16px;overflow:hidden;background:var(--color-surface);margin-top:14px}.se128-table-head,.se128-table-row{display:grid;grid-template-columns:1.15fr 1.35fr 1fr .9fr .9fr .8fr;gap:14px;align-items:center;padding:12px 14px}.se128-table-head{background:var(--color-surface-2);font-size:12px;font-weight:800;color:var(--color-text-3)}.se128-table-row{width:100%;border:0;border-top:1px solid var(--color-border);background:transparent;text-align:start;color:inherit;cursor:pointer}.se128-table-row:hover{background:var(--color-surface-2)}.se128-table-row>span{min-width:0}.se128-table-row small{display:block;color:var(--color-text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.se128-exec-head,.se128-exec-row{grid-template-columns:1fr 1.3fr 1.05fr .9fr 1fr .9fr}
.se128-priority{margin-top:16px}.se128-action-list{display:grid}.se128-action-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:0;border-top:1px solid var(--color-border);background:transparent;color:inherit;text-align:start;cursor:pointer}.se128-action-row:first-child{border-top:0}.se128-action-row:hover{background:var(--color-surface-2)}.se128-action-row small{display:block;color:var(--color-text-3);margin-top:4px}.se128-empty-ok{padding:22px;text-align:center;color:var(--color-text-3)}
.se128-skeleton-list{display:grid;gap:10px;margin-top:14px}.se128-skeleton-row{height:72px;border-radius:14px;background:linear-gradient(90deg,var(--color-surface-2),var(--color-surface),var(--color-surface-2));background-size:220% 100%;animation:se128shimmer 1.2s linear infinite}@keyframes se128shimmer{to{background-position:-220% 0}}
.se128-notes .nrow{display:flex;width:100%;align-items:center;gap:12px;border:0;border-top:1px solid var(--color-border);background:transparent;color:inherit;text-align:start;padding:14px 16px;cursor:pointer}.se128-notes .nrow:first-child{border-top:0}.se128-notes .nrow.unread{background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.se128-note-main{flex:1;min-width:0}.se128-note-main small{display:block;color:var(--color-text-3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.se128-load-more{display:block;margin:14px auto}.exec-kpis.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){.exec-kpis.g6{grid-template-columns:repeat(3,minmax(0,1fr))}.se128-delivery-grid{grid-template-columns:1fr}.se128-table-head{display:none}.se128-table-row,.se128-exec-row{grid-template-columns:1fr 1fr}.se128-table-row>span{padding:2px 0}}
@media(max-width:700px){.exec-kpis.g6{grid-template-columns:repeat(2,minmax(0,1fr))}.se128-table-row,.se128-exec-row{grid-template-columns:1fr}.se128-table-card{border:0;background:transparent;display:grid;gap:10px}.se128-table-row{border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);padding:14px}.se128-action-row{align-items:flex-start}.se128-send-delivery{width:100%}}


/* v1.28.2 — client/location files, owner reports and responsive refinements */
.se128-client-list{display:grid;gap:9px;margin-top:12px}
.se128-client-row{width:100%;display:grid;grid-template-columns:minmax(210px,2fr) repeat(4,minmax(95px,.8fr)) 24px;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--color-border);border-radius:13px;background:var(--color-surface);color:inherit;text-align:start;cursor:pointer}
.se128-client-row:hover{background:var(--color-surface-2);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border))}
.se128-client-row>span{min-width:0}.se128-client-row>span:not(.se128-client-main){display:grid;gap:3px}.se128-client-row small{display:block;color:var(--color-text-3);font-size:.7rem}.se128-client-main{display:grid;gap:4px}.se128-client-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se128-location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.se128-client-tabs,.se128-report-tabs{margin-bottom:14px}
.se128-client-items{display:grid;gap:8px}.se128-client-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);color:inherit;text-align:start;cursor:pointer}.se128-client-item:hover{background:var(--color-surface-2)}.se128-client-item>span:first-child{min-width:0;display:grid;gap:3px}.se128-client-item small{display:block;color:var(--color-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se128-owner-governance{margin-bottom:14px}.se128-report-tabs{margin-top:14px}.se128-report-tabs button{white-space:nowrap}
@media(max-width:1050px){.se128-client-row{grid-template-columns:2fr repeat(2,1fr) 24px}.se128-client-row>span:nth-child(4),.se128-client-row>span:nth-child(5){display:none}.se128-location-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.se128-client-row{grid-template-columns:1fr auto;align-items:start}.se128-client-row>span:not(.se128-client-main):not(:last-child){display:none}.se128-location-grid{grid-template-columns:1fr}.se128-client-item{align-items:flex-start}}
@media print{#rail,#topbar,#tbActions,.drawer-backdrop,.modal-root{display:none!important}.app-main{margin:0!important}.content{max-width:none!important;padding:0!important}.card{break-inside:avoid}.se128-report-tabs,.se124-claims-filters{display:none!important}}

/* v1.28.3 pilot feedback batch */
.se1283-preview{display:flex;align-items:center;justify-content:center;min-height:260px;max-height:72vh;overflow:auto;background:#f7f8fb;border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:10px}
.se1283-preview img{max-width:100%;max-height:68vh;object-fit:contain;border-radius:10px}
.se1283-preview-pdf{padding:0;height:min(72vh,760px)}
.se1283-preview-pdf iframe{width:100%;height:100%;border:0;border-radius:14px;background:#fff}
.se1283-assigned-tech .card-pad{display:flex;flex-direction:column;gap:4px}
.se1283-assigned-tech small{color:var(--muted,#6b7280)}
.se128-replace{display:none!important}
@media(max-width:760px){.se1283-preview-pdf{height:65vh}.se1283-preview{min-height:220px}}

/* v1.28.4 */
.se1284-scope-box{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2,#f8fafc)}
.se1284-scope-box h4{margin:0 0 4px}.se1284-scope-box label{display:flex;gap:8px;align-items:center;font-size:13px}.se1284-scope-separate{padding-top:9px;border-top:1px solid var(--line)}
.se1284-review-docs{margin-bottom:14px}.se1284-maint-amount{max-width:420px;margin:14px 0}.se1284-review-primary{gap:10px;flex-wrap:wrap}.se1284-more-actions{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.se1284-more-actions summary{cursor:pointer;font-weight:700;margin-bottom:10px}
.se1284-tech-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.se1284-tech-summary div{display:grid;gap:5px}.se1284-tech-summary span{color:var(--muted);font-size:12px}
@media(max-width:700px){.se1284-tech-summary{grid-template-columns:1fr}.se1284-review-primary .btn{width:100%}}

/* ===== v1.28.5 — third pilot feedback ===== */
.se1285-action-busy{display:inline-flex!important;visibility:visible!important;align-items:center;justify-content:center;gap:8px;min-width:max-content;opacity:1!important}
.se1285-request-success{padding-top:8px}
.se1285-stage-filters{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.se1285-stage-filters::-webkit-scrollbar{display:none}
.se1285-stage-filters>button{flex:0 0 auto;scroll-snap-align:start}
#tbTitle.se1285-full-ref{min-width:0;max-width:100%}
#tbTitle.se1285-full-ref h2{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
@media(max-width:760px){
 .se123-filterbar,.se1285-stage-filters{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;touch-action:pan-x}
 .se123-filterbar::-webkit-scrollbar,.se1285-stage-filters::-webkit-scrollbar{display:none}
 .se123-filterbar>button,.se1285-stage-filters>button{flex:0 0 auto!important;white-space:nowrap!important}
 .workflow-journey,.se115-journey{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:0!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-inline:12px;padding-inline:12px!important}
 .workflow-journey .workflow-step,.se115-journey .workflow-step{flex:0 0 112px!important;min-width:112px!important;scroll-snap-align:start}
 .workflow-journey .workflow-step:first-child,.se115-journey .workflow-step:first-child{margin-inline-start:0}
 .workflow-journey .workflow-step:last-child,.se115-journey .workflow-step:last-child{margin-inline-end:12px}
 .page-actions-mobile{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
 .page-actions-mobile .btn{flex:1 1 calc(50% - 4px)!important;min-width:130px;min-height:44px}
 #tbTitle.se1285-full-ref h2{font-size:.98rem!important;line-height:1.35!important}
}
.se1285-action-busy::before{display:none!important}