/* =====================================================================
   منصة وثبة: نظام التصميم المشترك (base.css)
   مصدر واحد للرموز (tokens) وكل المكونات المشتركة بين الشاشات.
   الهوية: هوية الداعم «السبيعي الخيرية» (الألوان المعتمدة وخط Expo Arabic)،
   وشعار البرنامج «وثبة» بقطعه المتحركة (الخطافان، والعمودان، والمعيّنات).
   قاعدة: لا ألوان ولا مسافات خام خارج قسم الرموز. لا letter-spacing على العربية.
   ===================================================================== */

/* ============ 0. الخط (مستضاف ذاتيًا) ============ */
@font-face{font-family:'Expo Arabic';src:url('../../assets/fonts/ExpoArabic-Light.woff2') format('woff2');font-weight:100 349;font-style:normal;font-display:swap}
@font-face{font-family:'Expo Arabic';src:url('../../assets/fonts/ExpoArabic-Book.woff2') format('woff2');font-weight:350 449;font-style:normal;font-display:swap}
@font-face{font-family:'Expo Arabic';src:url('../../assets/fonts/ExpoArabic-Medium.woff2') format('woff2');font-weight:450 549;font-style:normal;font-display:swap}
/* لا يوجد وزن 700: كل ما فوق 550 يُعرض بالوزن 600 دون تثخين صناعي */
@font-face{font-family:'Expo Arabic';src:url('../../assets/fonts/ExpoArabic-SemiBold.woff2') format('woff2');font-weight:550 900;font-style:normal;font-display:swap}

/* ============ 1. الرموز ============ */
/* نسب التباين محسوبة (WCAG 2): ink 13.7، ink-2 7.4، ink-3 5.2 على الخلفية و5.5 على السطح و4.9 على surface-2؛
   brand-ink 5.6 على الأبيض و4.9 على brand-soft (للنصوص الصغيرة والروابط)؛ الأبيض على brand 4.0 (أزرار ونص ≥ 600)؛
   line-strong 3.06 (حدود الحقول). الغامق: ink-3 6.1 وbrand-ink 9.3 على السطح، والنص الداكن على brand 6.6. */
:root{
  color-scheme:light;
  /* ألوان الهوية المعتمدة: 3135C / 7465C / 7488C / 7545C */
  --teal:#008aab;--turq:#3bbfad;--green:#70d44b;--slate:#415364;
  /* الأساسي (للإجراءات): التعبئة بالأصل، والنص الصغير بدرجة أغمق */
  --brand:#008aab;--brand-ink:#00718d;--brand-soft:#e3f2f6;--brand-line:#bfe0e9;--on-brand:#ffffff;
  /* الثانوي (فيروزي) والإبراز (أخضر): بقدر، ولا يُكتب بالأخضر على خلفية فاتحة */
  --turq-ink:#167567;--turq-soft:#e3f5f2;
  --green-ink:#2f6a1a;--green-soft:#eaf8e3;
  /* أسماء قديمة تستهلكها الشاشات: تشير إلى ألوان الهوية الجديدة (لا بنفسجي ولا أصفر) */
  --blue:var(--turq);--blue-ink:var(--turq-ink);--blue-soft:var(--turq-soft);
  --yellow:var(--green);--yellow-ink:var(--green-ink);--yellow-soft:var(--green-soft);
  /* ألوان ثابتة لا تتبدل مع الوضع (أسطح العلامة الملوّنة) */
  --brand-solid:#008aab;--brand-solid-ink:#006f8a;--turq-solid:#3bbfad;--yellow-solid:#70d44b;--ink-solid:#1f2a33;--white:#ffffff;
  --on-solid:#ffffff;--on-solid-2:rgb(255 255 255 / .9);--on-solid-3:rgb(255 255 255 / .74);--solid-line:rgb(255 255 255 / .26);--solid-fill:rgb(255 255 255 / .16);
  /* شعار «وثبة»: الخطافان / العمودان / المعيّنات */
  --logo-a:#008aab;--logo-b:#3bbfad;--logo-c:#70d44b;
  /* المحايدات: خلفية فاتحة باردة، وحبر من الأردوازي */
  --bg:#f5f8f8;--surface:#ffffff;--surface-2:#eef3f4;--surface-3:#e0e8ea;
  /* سطح الهوية المشوب (لوحة الدخول ومساحات العلامة) وخطوطه */
  --tint:#e6f2f5;--tint-line:rgb(0 138 171 / .12);--tint-bar:rgb(59 191 173 / .14);
  --ink:#1f2a33;--ink-2:#415364;--ink-3:#5b6b78;
  --line:#dce5e8;--line-2:#c5d3d8;--line-strong:#8496a2; /* حدود عناصر الإدخال: تباين 3:1 */
  /* الحالات */
  --ok:#2b7a3b;--ok-soft:#e7f5ea;--bad:#b42318;--bad-soft:#fdecea;--warn:#8a5300;--warn-soft:#fff3db;
  --scrim:rgb(16 32 40 / .5);
  /* العمق: ظلال طبقية ناعمة مشوبة بالأردوازي */
  --sh-1:0 1px 2px rgb(31 42 51 / .05),0 2px 8px rgb(31 42 51 / .04);
  --sh-2:0 2px 4px rgb(31 42 51 / .04),0 12px 32px -6px rgb(31 42 51 / .12);
  --sh-3:0 4px 12px rgb(31 42 51 / .06),0 40px 90px -12px rgb(31 42 51 / .22);
  --ring:0 0 0 4px rgb(0 138 171 / .16);

  /* الخط */
  --font:'Expo Arabic','Segoe UI',Tahoma,sans-serif;
  --fs-2xs:.6875rem;                                     /* 11 */
  --fs-xs:.75rem;                                        /* 12 */
  --fs-sm:clamp(.8125rem,.79rem + .1vw,.875rem);         /* 13 - 14 */
  --fs-base:clamp(.9375rem,.91rem + .15vw,1rem);         /* 15 - 16 */
  --fs-md:clamp(1.0313rem,1rem + .15vw,1.125rem);        /* 16.5 - 18 */
  --fs-lg:clamp(1.1875rem,1.12rem + .3vw,1.3125rem);     /* 19 - 21 */
  --fs-xl:clamp(1.375rem,1.24rem + .6vw,1.625rem);       /* 22 - 26 */
  --fs-2xl:clamp(1.625rem,1.38rem + 1.1vw,2.125rem);     /* 26 - 34 */
  --fs-hero:clamp(2.125rem,1.6rem + 2.4vw,2.75rem);      /* 34 - 44 */
  --fs-display:clamp(2.25rem,1.5rem + 3.4vw,3.75rem);    /* 36 - 60 */
  --fs-input:max(16px,var(--fs-base));                  /* 16 كحد أدنى: يمنع تكبير iOS */
  --lh-body:1.75;--lh-snug:1.55;--lh-head:1.4;--lh-tight:1.25;
  --fw-l:300;--fw-r:400;--fw-m:500;--fw-sb:600;--fw-b:600; /* Expo Arabic أثقله 600 */

  /* المسافات (أساس 4) */
  --sp-px:1px;--sp-0:2px;
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;
  --sp-7:1.75rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-14:3.5rem;--sp-16:4rem;
  --gutter:var(--sp-4);
  --page-x:clamp(1rem,.6rem + 2vw,2.25rem);

  /* الأحجام */
  --tap:44px;--ctl-h:50px;--ctl-h-sm:38px;--btn-h:48px;--btn-h-lg:56px;
  --av:38px;--av-lg:60px;--tile:42px;--tile-sm:36px;--ico:1.25em;
  --header-h:60px;--side-w:268px;--content-max:1240px;--read-max:68ch;--app-max:560px;

  /* الزوايا */
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-2xl:28px;--r-full:999px;

  /* الحركة */
  --ease:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-leap:cubic-bezier(.16,1,.3,1);           /* قفزة الشعار: انطلاق سريع وهبوط هادئ */
  --ease-spring:cubic-bezier(.34,1.3,.64,1);      /* نابض بارتداد خفيف (يُستبدل بمنحنى نابض حقيقي أدناه) */
  --ease-sheet:var(--ease-drawer);                /* نابض مُخمَّد بلا ارتداد (الأوراق من الأسفل) */
  --d1:150ms;--d2:250ms;--d3:420ms;--d4:760ms;--d-fast:110ms;
  --dur-1:var(--d1);--dur-2:var(--d2);--dur-3:var(--d3);
  --d-spring:520ms;--d-sheet:500ms;--d-leap:720ms;--d-vt-out:180ms;--d-vt-in:400ms;--d-loader:1600ms;
  --stagger:60ms;--rise-y:14px;--vt-x:28px;

  /* الطبقات */
  --z-base:1;--z-sticky:30;--z-banner:35;--z-menu:50;--z-layer:80;--z-toast:100;
}
/* منحنيات نابض حقيقية (محسوبة من نابض مُخمَّد) حيث يدعمها المتصفح */
@supports (animation-timing-function:linear(0,1)){:root{
  --ease-spring:linear(0,.074,.236,.424,.599,.745,.855,.933,.983,1.011,1.025,1.028,1.027,1.022,1.017,1.012,1.008,1.004,1.002,1.001,1,.999,1);
  --ease-sheet:linear(0,.06,.186,.33,.466,.584,.682,.76,.821,.868,.903,.929,.949,.963,.973,.981,.986,.99,.993,.995,.997,.998,.999,1);
}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --brand:#33b2d1;--brand-ink:#7cd0e5;--brand-soft:#0f3240;--brand-line:#1c4c5c;--on-brand:#03222c;
  --turq:#4ccbb9;--turq-ink:#7fdccf;--turq-soft:#0f3330;
  --green:#7edb5b;--green-ink:#9be47f;--green-soft:#16301a;
  --logo-a:#1ea4c6;--logo-b:#43c6b4;--logo-c:#78d853;
  --bg:#0e171c;--surface:#152229;--surface-2:#1b2b33;--surface-3:#263943;
  --tint:#112128;--tint-line:rgb(51 178 209 / .14);--tint-bar:rgb(76 203 185 / .07);
  --ink:#e8eff1;--ink-2:#bccad1;--ink-3:#8fa1ab;
  --line:#23353e;--line-2:#344a55;--line-strong:#5f7581;
  --ok:#7fd08e;--ok-soft:#15301c;--bad:#ff8a80;--bad-soft:#3a1a18;--warn:#f5c26b;--warn-soft:#35290f;
  --scrim:rgb(2 8 11 / .66);
  --sh-1:0 1px 2px rgb(0 0 0 / .3),0 2px 8px rgb(0 0 0 / .22);
  --sh-2:0 2px 4px rgb(0 0 0 / .25),0 14px 36px -6px rgb(0 0 0 / .5);
  --sh-3:0 4px 12px rgb(0 0 0 / .3),0 40px 90px -12px rgb(0 0 0 / .6);
  --ring:0 0 0 4px rgb(51 178 209 / .22);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand:#33b2d1;--brand-ink:#7cd0e5;--brand-soft:#0f3240;--brand-line:#1c4c5c;--on-brand:#03222c;
  --turq:#4ccbb9;--turq-ink:#7fdccf;--turq-soft:#0f3330;
  --green:#7edb5b;--green-ink:#9be47f;--green-soft:#16301a;
  --logo-a:#1ea4c6;--logo-b:#43c6b4;--logo-c:#78d853;
  --bg:#0e171c;--surface:#152229;--surface-2:#1b2b33;--surface-3:#263943;
  --tint:#112128;--tint-line:rgb(51 178 209 / .14);--tint-bar:rgb(76 203 185 / .07);
  --ink:#e8eff1;--ink-2:#bccad1;--ink-3:#8fa1ab;
  --line:#23353e;--line-2:#344a55;--line-strong:#5f7581;
  --ok:#7fd08e;--ok-soft:#15301c;--bad:#ff8a80;--bad-soft:#3a1a18;--warn:#f5c26b;--warn-soft:#35290f;
  --scrim:rgb(2 8 11 / .66);
  --sh-1:0 1px 2px rgb(0 0 0 / .3),0 2px 8px rgb(0 0 0 / .22);
  --sh-2:0 2px 4px rgb(0 0 0 / .25),0 14px 36px -6px rgb(0 0 0 / .5);
  --sh-3:0 4px 12px rgb(0 0 0 / .3),0 40px 90px -12px rgb(0 0 0 / .6);
  --ring:0 0 0 4px rgb(51 178 209 / .22);
}
@media (min-width:48rem){:root{--gutter:var(--sp-6)}}

/* ============ 2. الأساس ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block:calc(var(--header-h) + var(--sp-3)) var(--sp-12);scrollbar-color:var(--line-2) transparent}
body{margin:0;min-block-size:100vh;font-synthesis:none;min-block-size:100dvh;overflow-x:clip;font-family:var(--font);font-size:var(--fs-base);font-weight:var(--fw-r);line-height:var(--lh-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,h5{line-height:var(--lh-head);font-weight:var(--fw-b);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
img,svg,video{max-inline-size:100%}
img{block-size:auto}
ul,ol{padding-inline-start:var(--sp-5)}
hr{border:0;border-block-start:1px solid var(--line);margin:var(--sp-5) 0}
::selection{background:var(--brand-soft);color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}
[hidden]{display:none!important}
[dir="ltr"]{unicode-bidi:isolate}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--surface) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 9999s}

/* أشرطة التمرير */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{inline-size:10px;block-size:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--r-full);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:padding-box}

/* ============ 3. أدوات عامة ============ */
.num{font-variant-numeric:lining-nums tabular-nums}
.muted{color:var(--ink-3)}
.ink-2{color:var(--ink-2)}
.ltr{direction:ltr;unicode-bidi:isolate}
.wrap-any{overflow-wrap:anywhere}
.vh{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.center{display:flex;justify-content:center}
.stack{display:grid;gap:var(--sp-4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.spacer{flex:1}
.container{inline-size:min(var(--content-max),100% - 2 * var(--page-x));margin-inline:auto}
.skip-link{position:fixed;inset-block-start:var(--sp-2);inset-inline-start:var(--sp-2);z-index:var(--z-toast);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md);background:var(--ink);color:var(--bg);font-weight:var(--fw-sb);transform:translateY(-200%);transition:transform var(--d2) var(--ease-out)}
.skip-link:focus{transform:none;text-decoration:none}

/* ============ 4. الأيقونات والشعار ============ */
.icon{inline-size:var(--ico);block-size:var(--ico);flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
.dir{transform:scaleX(-1)} /* يعكس الأيقونات الاتجاهية لأن الصفحة RTL */
.lg{display:inline-block;inline-size:auto;block-size:34px;max-inline-size:none}
.lg--dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg--light{display:none}:root:not([data-theme="light"]) .lg--dark{display:inline-block}}
:root[data-theme="dark"] .lg--light{display:none}
:root[data-theme="dark"] .lg--dark{display:inline-block}
/* شعار «وثبة» المضمَّن (ui.js: brandMark): كل قطعة مسار مستقل يتلوّن بالرموز ويتحرك */
.wmark{display:inline-block;flex-shrink:0;block-size:var(--wm-h,34px);aspect-ratio:1281 / 768;line-height:0;vertical-align:middle}
.wmark svg{display:block;inline-size:100%;block-size:100%;overflow:visible}
.w-hook{fill:var(--logo-a)}.w-bar{fill:var(--logo-b)}.w-dot{fill:var(--logo-c)}
.wmark--white{--logo-a:var(--white);--logo-b:var(--white);--logo-c:var(--white)}
.wmark--slate{--logo-a:var(--ink-2);--logo-b:var(--ink-2);--logo-c:var(--ink-2)}
/* «بدعم من» + شعار الداعم (ui.js: donorMark) */
.donor{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--ink-3);font-size:var(--fs-xs);font-weight:var(--fw-m);line-height:1.4;text-decoration:none}
.donor__k{white-space:nowrap}
.donor__lg{display:block;block-size:var(--donor-h,30px);inline-size:auto;max-inline-size:none}
.donor__lg--dark{display:none}
.donor--white{color:var(--on-solid-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .donor__lg--light{display:none}:root:not([data-theme="light"]) .donor__lg--dark{display:block}}
:root[data-theme="dark"] .donor__lg--light{display:none}
:root[data-theme="dark"] .donor__lg--dark{display:block}

/* ============ 5. الأزرار ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-block-size:var(--btn-h);padding:0 var(--sp-6);border-radius:var(--r-full);border:1px solid transparent;font-weight:var(--fw-sb);font-size:var(--fs-base);line-height:1.3;white-space:nowrap;text-decoration:none;user-select:none;-webkit-user-select:none;transition:transform var(--d1) var(--ease),background-color var(--d1) var(--ease),border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease),opacity var(--d1) var(--ease),color var(--d1) var(--ease)}
.btn:hover{text-decoration:none}
@media (hover:hover){.btn:hover{box-shadow:var(--sh-1)}}
.btn:active{transform:scale(.97);box-shadow:none;transition-duration:var(--d-fast)}
.btn .icon{inline-size:18px;block-size:18px}
.btn--primary{background:var(--brand);color:var(--on-brand)}
.btn--primary:hover{background:var(--brand-ink)}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn--secondary:hover{border-color:var(--brand)}
.btn--ghost{background:transparent;color:var(--brand-ink);padding:0 var(--sp-3)}
.btn--ghost:hover{background:var(--brand-soft);box-shadow:none}
.btn--danger{background:var(--bad);color:var(--white)}
.btn--danger:hover{background:color-mix(in srgb,var(--bad) 86%,var(--ink))}
:root[data-theme="dark"] .btn--danger{color:var(--ink-solid)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--danger{color:var(--ink-solid)}}
.btn--danger-soft{background:var(--bad-soft);color:var(--bad)}
.btn--danger-soft:hover{border-color:var(--bad);box-shadow:none}
.btn--on-solid{background:var(--white);color:var(--brand-solid-ink)}
.btn--sm{min-block-size:var(--ctl-h-sm);padding:0 var(--sp-4);font-size:var(--fs-sm)}
.btn--lg{min-block-size:var(--btn-h-lg);padding:0 var(--sp-8);font-size:var(--fs-md)}
.btn--block{inline-size:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
/* حالة الانشغال: يبقى العرض ثابتًا، ويظهر مؤشر دوّار مكان النص */
.btn.is-busy{color:transparent!important;pointer-events:none}
.btn.is-busy > *{opacity:0}
.btn.is-busy::after{--trio-c:var(--busy-c,var(--on-brand))}
.btn.is-busy::after,.spin__c::after{content:"";position:absolute;inset:0;margin:auto;inline-size:7px;block-size:7px;border-radius:1.5px;transform:translate(-6px,3px) rotate(45deg);animation:trio 1200ms var(--ease) infinite}
.btn--secondary.is-busy,.btn--ghost.is-busy{--busy-c:var(--brand)}
.linkbtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:none;color:var(--brand-ink);font-weight:var(--fw-sb);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-1);min-block-size:var(--tap);border-radius:var(--r-sm);text-decoration:none}
.linkbtn:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.linkbtn .icon{inline-size:16px;block-size:16px}
.icon-btn{inline-size:var(--tap);block-size:var(--tap);border-radius:50%;border:0;background:var(--surface-2);display:inline-grid;place-items:center;color:var(--ink-2);flex-shrink:0;padding:0;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.icon-btn:hover{background:var(--surface-3);color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.icon-btn--ghost{background:transparent}
.icon-btn--ghost:hover{background:var(--surface-2)}
.icon-btn .icon{inline-size:20px;block-size:20px}
.pill{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--line-2);background:transparent;border-radius:var(--r-full);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-2);min-block-size:36px;white-space:nowrap;transition:border-color var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.pill:hover{border-color:var(--brand)}
.pill .icon{inline-size:16px;block-size:16px;color:var(--brand)}
a,button,[role="button"],label,summary{-webkit-tap-highlight-color:transparent}

/* ============ 6. الشارات والنقاط ============ */
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px var(--sp-3);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:var(--fw-sb);line-height:1.9;white-space:nowrap;border:0;vertical-align:middle}
.chip .icon{inline-size:14px;block-size:14px;stroke-width:2.2}
.chip b{font-weight:var(--fw-b);margin-inline-end:var(--sp-1)}
.chip--now{background:var(--yellow-soft);color:var(--yellow-ink)}
.chip--soon{background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.chip--done,.chip--ok{background:var(--ok-soft);color:var(--ok)}
.chip--brand{background:var(--brand-soft);color:var(--brand-ink)}
.chip--blue{background:var(--blue-soft);color:var(--blue-ink)}
.chip--bad{background:var(--bad-soft);color:var(--bad)}
.chip--warn{background:var(--warn-soft);color:var(--warn)}
.chip--btn{min-block-size:32px;padding:0 var(--sp-3);cursor:pointer;transition:filter var(--d1) var(--ease)}
.chip--btn:hover{filter:brightness(.97)}
/* نقاط الحالة */
.dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--line-2);flex-shrink:0;display:inline-block}
.dot--ok{background:var(--ok)}.dot--wait{background:var(--warn)}.dot--bad{background:var(--bad)}.dot--brand{background:var(--brand)}.dot--blue{background:var(--blue)}
.st{display:inline-flex;align-items:center;gap:7px}
/* عدّاد صغير فوق الجرس */
.bell{position:relative}
.badge{position:absolute;inset-block-start:-2px;inset-inline-end:-2px;min-inline-size:18px;block-size:18px;border-radius:9px;background:var(--yellow-solid);color:var(--ink-solid);font-size:var(--fs-2xs);font-weight:var(--fw-b);font-style:normal;display:grid;place-items:center;padding:0 5px;line-height:1;box-shadow:0 0 0 2px var(--bg);animation:pop var(--d3) var(--ease-out) both}

/* ============ 7. النماذج ============ */
.field{display:grid;gap:6px;margin-block-end:var(--sp-4);min-inline-size:0}
.flabel,.field > label{font-weight:var(--fw-sb);font-size:var(--fs-sm);line-height:var(--lh-snug)}
.flabel .opt-t,.field > label .opt-t{font-weight:var(--fw-r);color:var(--ink-3);font-size:var(--fs-xs);margin-inline-start:var(--sp-1)}
.input,.textarea,.select{inline-size:100%;font-size:var(--fs-input);background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);min-block-size:var(--ctl-h);outline:none;transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3);opacity:1}
.input:hover,.textarea:hover,.select:hover{border-color:var(--ink-3)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible,.input:focus,.textarea:focus,.select:focus{border-color:var(--brand);box-shadow:var(--ring);outline:none}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--bad)}
.input[aria-invalid="true"]:focus,.textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--bad-soft)}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
.input[readonly]{background:var(--surface-2)}
.input[dir="ltr"],.textarea[dir="ltr"]{text-align:start}
/* حقل لاتيني الاتجاه بتلميح عربي: يُعرض التلميح من اليمين، ويعود الحقل لاتجاهه مع أول حرف */
.input[dir="ltr"]:placeholder-shown{direction:rtl}
.input[type="date"],.input[type="time"]{min-inline-size:0}
.textarea{min-block-size:130px;resize:vertical;line-height:1.8;display:block}
.select,select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:left var(--sp-3) center;padding-inline-end:var(--sp-10)}
.help{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}
.help--c{text-align:center;margin-block-start:var(--sp-3)}
.err{display:flex;align-items:flex-start;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--bad);font-weight:var(--fw-sb);line-height:1.6;animation:rise var(--d2) var(--ease-out) both}
.err .icon{inline-size:14px;block-size:14px;margin-block-start:3px}
.count{font-size:var(--fs-2xs);color:var(--ink-3);text-align:end;margin:var(--sp-1) 0 var(--sp-4)}
/* حقل بزر داخلي (كلمة السر) */
.ctl{position:relative}
.ctl .input{padding-inline-end:calc(var(--tap) + var(--sp-2))}
.ctl__btn{position:absolute;inset-block:0;inset-inline-end:var(--sp-1);margin-block:auto;inline-size:var(--tap);block-size:var(--tap);border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);display:grid;place-items:center;transition:color var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.ctl__btn:hover{color:var(--ink);background:var(--surface-2)}
.ctl__btn .icon{inline-size:20px;block-size:20px}
/* مقياس قوة كلمة السر */
.pwm{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);margin-block-start:var(--sp-1)}
.pwm i{block-size:4px;border-radius:2px;background:var(--surface-3);transition:background-color var(--d2) var(--ease)}
.pwm[data-s="1"] i:nth-child(-n+1){background:var(--bad)}
.pwm[data-s="2"] i:nth-child(-n+2){background:var(--warn)}
.pwm[data-s="3"] i:nth-child(-n+3){background:var(--turq)}
.pwm[data-s="4"] i{background:var(--ok)}
/* خانات الاختيار */
.checks{margin:var(--sp-5) 0}
.checks > * + *{margin-block-start:var(--sp-3)}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;transition:border-color var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.check:hover{border-color:var(--line-2)}
.check input{appearance:none;-webkit-appearance:none;inline-size:22px;block-size:22px;margin:2px 0 0;border:1.5px solid var(--line-strong);border-radius:7px;background:var(--surface);display:grid;place-items:center;flex-shrink:0;cursor:pointer;transition:background-color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.check input::after{content:"";inline-size:11px;block-size:6px;border:2px solid var(--on-brand);border-top:0;border-right:0;margin-block-start:-3px;transform:rotate(-45deg) scale(0);transition:transform var(--d1) var(--ease-out)} /* حدود فيزيائية عمدًا: شكل علامة الصح لا ينعكس */
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.check input[aria-invalid="true"]{border-color:var(--bad)}
.check:has(input:checked){border-color:var(--brand-line);background:color-mix(in srgb,var(--brand-soft) 55%,var(--surface))}
.check:has(input[aria-invalid="true"]){border-color:var(--bad)}
.check__t{display:block;font-weight:var(--fw-sb);line-height:var(--lh-snug)}
.check__s{display:block;font-size:var(--fs-xs);font-weight:var(--fw-r);color:var(--ink-3);margin-block-start:var(--sp-0);line-height:1.7}
.req{display:inline-block;font-size:var(--fs-2xs);font-weight:var(--fw-sb);color:var(--brand-ink);background:var(--brand-soft);padding:0 var(--sp-2);border-radius:var(--r-full);margin-inline-start:6px;line-height:1.8;vertical-align:middle}
/* خيارات راديو بطاقية */
.optg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--sp-2)}
.opt{position:relative;display:flex;gap:10px;align-items:flex-start;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;background:var(--surface);transition:border-color var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.opt input{margin:4px 0 0;accent-color:var(--brand);flex-shrink:0;inline-size:18px;block-size:18px}
.opt b{display:block;font-weight:var(--fw-sb);font-size:var(--fs-sm);line-height:1.5}
.opt small{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.opt:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand-soft) 55%,var(--surface))}
.fform .field{margin-block-end:var(--sp-3)}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--sp-3)}
.qrow{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;margin-block-start:var(--sp-2)}
.chk-row{display:grid;gap:var(--sp-2)}
.chk-row .check{padding:10px var(--sp-3)}
.gr{display:inline-flex;align-items:center;gap:6px}
.gr .input{inline-size:88px;min-block-size:var(--tap);padding:6px 10px}
/* مفتاح تبديل */
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sw-row b{display:block;font-weight:var(--fw-sb)}
.sw-row small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.sw{position:relative;inline-size:52px;block-size:32px;border:1px solid var(--line-strong);padding:0;border-radius:var(--r-full);background:var(--surface-3);flex-shrink:0;transition:background-color var(--d2) var(--ease),border-color var(--d2) var(--ease)}
.sw i{position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:24px;block-size:24px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgb(0 0 0 / .22);transition:transform var(--d2) var(--ease-out)}
.sw[aria-checked="true"]{background:var(--brand);border-color:var(--brand)}
.sw[aria-checked="true"] i{transform:translateX(-20px)} /* RTL: المقبض يتحرك يسارًا عند التشغيل */
.sw:active i{transform:scale(.9)}
.sw[aria-checked="true"]:active i{transform:translateX(-20px) scale(.9)}
/* تبديل مقطعي */
.segc{display:inline-flex;gap:var(--sp-0);padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);max-inline-size:100%}
.segc button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;border-radius:var(--r-full);padding:6px var(--sp-4);min-block-size:var(--ctl-h-sm);font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink-2);white-space:nowrap;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease),box-shadow var(--d1) var(--ease)}
.segc button:hover{color:var(--ink)}
.segc button[aria-pressed="true"],.segc button[aria-checked="true"]{background:var(--surface);color:var(--brand-ink);box-shadow:var(--sh-1)}
.segc--full{display:flex;inline-size:100%}
.segc--full button{flex:1 1 0;min-inline-size:0}
.segc .icon{inline-size:16px;block-size:16px}
.remc{display:flex;flex-wrap:wrap;gap:6px}
.remc__b{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-full);padding:0 var(--sp-4);min-block-size:var(--tap);font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink-2);transition:background-color var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.remc__b .icon{inline-size:14px;block-size:14px;stroke-width:2.4;opacity:0;margin-inline-start:-4px;transition:opacity var(--d1) var(--ease)}
.remc__b[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink)}
.remc__b[aria-pressed="true"] .icon{opacity:1}
/* البحث */
.search{position:relative;flex:0 1 300px;min-inline-size:0}
.search .icon{position:absolute;inset-inline-start:var(--sp-4);inset-block-start:50%;transform:translateY(-50%);color:var(--ink-3);inline-size:18px;block-size:18px;pointer-events:none}
.search input{inline-size:100%;min-block-size:var(--tap);border:1.5px solid var(--line-strong);border-radius:var(--r-full);background:var(--surface);padding-block:0;padding-inline:calc(var(--sp-4) + 26px) var(--sp-4);font-size:var(--fs-input);outline:none;transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease)}
.search input:focus-visible,.search input:focus{border-color:var(--brand);box-shadow:var(--ring)}
/* رفع الملفات */
.drop{display:grid;justify-items:center;gap:var(--sp-0);inline-size:100%;padding:var(--sp-8) var(--sp-4);border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);text-align:center;transition:border-color var(--d1) var(--ease),background-color var(--d1) var(--ease)}
.drop:hover,.drop.is-over{border-color:var(--brand);background:var(--brand-soft)}
.drop .icon{inline-size:30px;block-size:30px;color:var(--brand);margin-block-end:var(--sp-2)}
.drop b{font-size:var(--fs-base)}
.drop small{font-size:var(--fs-xs);color:var(--ink-3)}
.upl{margin:var(--sp-1) 0 var(--sp-3)}
.filechip{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.filechip .icon{color:var(--brand)}
.filechip .b{flex:1;min-inline-size:0}
.filechip b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-sb);overflow-wrap:anywhere}
.filechip small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.progress{block-size:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.progress i{display:block;block-size:100%;inline-size:100%;background:var(--brand);transform-origin:100% 50%;transform:scaleX(var(--p,0));transition:transform var(--d2) var(--ease-out)}

/* ============ 8. التنبيهات والحالات ============ */
.alert{display:flex;gap:10px;align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.7}
.alert .icon{margin-block-start:3px;flex-shrink:0}
.alert b{display:block}
.alert:focus{outline:none}
.alert:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.alert--info{background:var(--blue-soft);color:var(--blue-ink)}
.alert--bad{background:var(--bad-soft);color:var(--bad)}
.alert--ok{background:var(--ok-soft);color:var(--ok)}
.alert--warn{background:var(--warn-soft);color:var(--warn)}
.alert--brand{background:var(--brand-soft);color:var(--brand-ink)}
.alert-in{animation:shake 380ms var(--ease-out) both}
.notebar{display:flex;gap:10px;align-items:flex-start;margin-block-start:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);color:var(--ink-2)}
.notebar .icon{color:var(--brand);margin-block-start:3px}
.hint{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-xs);color:var(--ink-3);margin-block-end:var(--sp-5)}
.hint .icon{inline-size:17px;block-size:17px;color:var(--brand)}
.hint--c{justify-content:center;margin:var(--sp-3) 0 0}
/* الحالة الفارغة: سطر داخل قائمة (التصور) */
.empty{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-4);border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7}
.empty > .icon{color:var(--brand)}
/* الحالة الفارغة: كتلة مصممة لكل قائمة وجدول */
.empty--block{flex-direction:column;justify-content:center;text-align:center;gap:var(--sp-2);padding:var(--sp-10) var(--sp-5);border-style:solid;border-color:var(--line);background:var(--surface);animation:rise var(--d3) var(--ease) both}
.empty__ic{inline-size:56px;block-size:56px;border-radius:18px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);margin-block-end:var(--sp-2);--ic-a:var(--blue-soft)}
.empty__ic .icon{inline-size:26px;block-size:26px}
.empty__t{font-weight:var(--fw-b);font-size:var(--fs-md);color:var(--ink)}
.empty__p{max-inline-size:44ch;color:var(--ink-3);font-size:var(--fs-sm)}
.empty__a{margin-block-start:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center}
.empty--bad .empty__ic{background:var(--bad-soft);color:var(--bad)}
.empty--compact{padding:var(--sp-6) var(--sp-4)}
.empty-row td{padding:var(--sp-10) var(--sp-4);text-align:center;color:var(--ink-3)}
.ph{margin-block-start:var(--sp-5);border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--sp-7);background:var(--surface)}
.ph h3{font-size:var(--fs-lg);margin:var(--sp-3) 0 var(--sp-1)}
.ph p{color:var(--ink-2);max-inline-size:62ch}
.phl{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;gap:10px}
.phl li{display:flex;gap:10px;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.8}
.phl .icon{color:var(--brand);margin-block-start:4px;inline-size:18px;block-size:18px}
/* التحميل */
.spin{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);color:var(--ink-3);font-size:var(--fs-sm)}
.spin__c{--trio-c:var(--brand);position:relative;display:inline-block;inline-size:24px;block-size:22px;flex-shrink:0}
/* محمِّل الصفحة: الشعار بمعيّناته تتنفس (ui.js: loader) */
.loader{display:grid;justify-items:center;gap:var(--sp-3);padding:var(--sp-12) 0;color:var(--ink-3);font-size:var(--fs-sm)}
.spin--block{display:flex;padding:var(--sp-12) 0}
.skel{display:block;background:var(--surface-3);border-radius:var(--r-sm);animation:pulse 1.4s var(--ease) infinite}
.skel--line{block-size:12px;margin-block:var(--sp-2)}
.skel--title{block-size:26px;inline-size:min(320px,70%);border-radius:var(--r-md)}
.skel--sub{block-size:12px;inline-size:min(220px,50%)}
.skel--card{block-size:120px;border-radius:var(--r-lg)}
.skel--row{block-size:52px;border-radius:var(--r-md)}
.skel-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin-block-start:var(--sp-6)}
.skel-list{display:grid;gap:var(--sp-2);margin-block-start:var(--sp-5)}
.skel-list .skel--row:nth-child(2){opacity:.8}.skel-list .skel--row:nth-child(3){opacity:.6}.skel-list .skel--row:nth-child(4){opacity:.4}

/* ============ 9. البطاقات ومكونات المشارك ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.card--link{display:block;color:inherit;transition:transform var(--d2) var(--ease-out),box-shadow var(--d2) var(--ease),border-color var(--d2) var(--ease)}
@media (hover:hover){.card--link:hover{transform:translateY(-2px);box-shadow:var(--sh-2);text-decoration:none}}
.kick{display:block;font-size:var(--fs-sm);color:var(--ink-3);font-weight:var(--fw-m)}
.h2{font-size:var(--fs-xl);line-height:1.3;margin-block-start:var(--sp-0)}
.lead{color:var(--ink-2);margin-block-start:6px}
.pad{padding:var(--sp-2) var(--sp-5) var(--sp-7)}
.sec{padding:var(--sp-6) var(--sp-5);border-block-start:1px solid var(--line)}
.sec__h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin-block-end:var(--sp-4)}
.sec__t{font-size:var(--fs-md);font-weight:var(--fw-b)}
.sec__c{font-size:var(--fs-xs);color:var(--ink-3)}
/* رأس تطبيق المشارك */
.app{min-block-size:100%;display:flex;flex-direction:column;background:var(--bg)}
.app-h{position:sticky;inset-block-start:0;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);min-block-size:var(--header-h);background:var(--bg);transition:box-shadow var(--d2) var(--ease)}
.app-h.is-stuck{box-shadow:0 1px 0 var(--line)}
.app-brand{display:flex;align-items:center;gap:10px;min-inline-size:0}
.app-brand .lg{block-size:28px}
.app-h__sep{inline-size:1px;block-size:20px;background:var(--line-2)}
.app-h__t{font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{inline-size:var(--tap);block-size:var(--tap);border-radius:50%;border:0;background:var(--brand-soft);color:var(--brand-ink);font-weight:var(--fw-b);font-size:var(--fs-sm);display:grid;place-items:center;flex-shrink:0;padding:0}
/* البطاقة العلوية */
.hero{padding:var(--sp-1) var(--sp-5) var(--sp-6)}
.hero__hi{font-size:var(--fs-base);color:var(--ink-2)}
.hero__k{font-size:var(--fs-sm);color:var(--ink-3);font-weight:var(--fw-m);margin-block-start:var(--sp-3)}
.hero__t{font-size:var(--fs-hero);line-height:var(--lh-tight);font-weight:var(--fw-b);margin:var(--sp-0) 0 10px}
.hero__m{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);color:var(--ink-2)}
.hero--fin{margin:var(--sp-1) var(--sp-3) var(--sp-3);padding:var(--sp-6) var(--sp-5);border-radius:var(--r-2xl);background:var(--brand-solid);color:var(--on-solid);position:relative;overflow:hidden;isolation:isolate}
.hero--fin .hero__hi,.hero--fin .hero__k,.hero--fin .hero__m{color:var(--on-solid-2)}
.hero--fin .hero__t{color:var(--on-solid);max-inline-size:9em}
.hero--fin .chip--done{background:var(--solid-fill);color:var(--on-solid)}
.fin__mark{position:absolute;inset-inline-end:-84px;inset-block-start:-34px;block-size:220px;inline-size:auto;max-inline-size:none;z-index:-1;opacity:.16;animation:markIn 1100ms var(--ease-out) both}
.fin__stats{display:grid;grid-template-columns:repeat(3,1fr);margin-block-start:var(--sp-5);border-block-start:1px solid var(--solid-line)}
.fin__stats div{padding-block-start:var(--sp-3)}
.fin__stats div + div{border-inline-start:1px solid var(--solid-line);padding-inline-start:var(--sp-3)}
.fin__stats b{display:block;font-size:var(--fs-xl);line-height:1.3}
.fin__stats > div > span{font-size:var(--fs-2xs);color:var(--on-solid-2)}
/* نسبة مئوية معزولة الاتجاه بعد نص عربي («15%» لا «%15»): pv() في org.js */
.pv{display:inline-flex;align-items:baseline;unicode-bidi:isolate}
.pv small{margin-inline-start:1px}
/* شريط رحلة الجدارات */
.rib__bar{display:flex;gap:var(--sp-1);block-size:10px;margin-block-start:var(--sp-8)}
.rib__seg{position:relative;min-inline-size:0}
.rib__track{position:absolute;inset:0;border-radius:4px;overflow:hidden;background:var(--surface-3)}
.rib__fill{position:absolute;inset:0;background:var(--brand);transform:scaleX(var(--p,0));transform-origin:100% 50%;/* يبدأ الامتلاء من اليمين، بداية القراءة */transition:transform var(--d4) var(--ease-out)}
.rib__seg--done .rib__fill{background:var(--brand-ink)}
.rib__now{position:absolute;inset-block:-5px;inset-inline-start:calc(var(--x) * 100%);inline-size:2px;margin-inline-start:-1px;border-radius:1px;background:var(--ink)}
.rib__now b{position:absolute;inset-block-end:calc(100% + 4px);inset-inline-start:50%;transform:translateX(50%);font-size:var(--fs-2xs);font-weight:var(--fw-b);color:var(--ink-solid);background:var(--yellow-solid);border-radius:var(--r-full);padding:0 var(--sp-2);white-space:nowrap;line-height:1.75}
.rib__labels{display:flex;gap:var(--sp-1);margin-block-start:10px}
.rib__l{min-inline-size:0;font-size:var(--fs-xs);line-height:1.45}
.rib__l b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-weight:var(--fw-sb);text-wrap:balance} /* يلتف سطرين بدل قص اسم الجدارة */
.rib__l span{color:var(--ink-3)}
.rib__l--now span{color:var(--yellow-ink);font-weight:var(--fw-sb)}
.rib__l--done span{color:var(--brand-ink)}
/* الجوال الضيق: اسم الجدارة يلتف (حتى 3 أسطر) بدل قصّه */
@media (max-width:26rem){
  .rib__labels{gap:var(--sp-2)}
  .rib__l{font-size:var(--fs-2xs)}
  .rib__l b{-webkit-line-clamp:3;line-clamp:3}
}
.hero--fin .rib__track{background:var(--solid-line)}
.hero--fin .rib__fill,.hero--fin .rib__seg--done .rib__fill{background:var(--white)}
.hero--fin .rib__l b,.hero--fin .rib__l span{color:var(--on-solid-2)}
/* المطلوب منك */
.todo{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);color:inherit;inline-size:100%;text-align:start}
.todo + .todo{margin-block-start:10px}
@media (hover:hover){.todo{transition:transform var(--d2) var(--ease-out),box-shadow var(--d2) var(--ease)}.todo:hover{transform:translateY(-2px);box-shadow:var(--sh-2);text-decoration:none}}
.todo:active{transform:scale(.99)}
.tile{--ic-a:var(--blue);inline-size:var(--tile);block-size:var(--tile);border-radius:13px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex-shrink:0}
.tile .icon{inline-size:22px;block-size:22px}
.tile img{inline-size:22px;block-size:auto}
.todo__b{flex:1;min-inline-size:0}
.todo__t{font-weight:var(--fw-sb);line-height:1.45}
.todo__m{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.65}
.due-soon{color:var(--warn);font-weight:var(--fw-sb)}
.due-late{color:var(--bad);font-weight:var(--fw-sb)}
/* بطاقة اللقاء */
.meet{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:start}
.cal{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;text-align:center;background:var(--surface)}
.cal i{display:block;font-style:normal;font-size:var(--fs-2xs);font-weight:var(--fw-b);background:var(--brand);color:var(--on-brand);padding:3px 0;line-height:1.5}
.cal b{display:block;font-size:var(--fs-xl);line-height:1.15;padding-block-start:6px}
.cal span{display:block;font-size:var(--fs-2xs);color:var(--ink-3);padding-block-end:7px}
.meet__t{font-weight:var(--fw-b);font-size:var(--fs-md);line-height:1.4;margin:6px 0 var(--sp-2)}
.rows{display:grid;gap:5px;font-size:var(--fs-sm);color:var(--ink-2)}
.row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.row .icon{color:var(--ink-3);inline-size:17px;block-size:17px}
.meet__a{display:flex;gap:6px;margin-block-start:14px;flex-wrap:wrap}
.mcal{inline-size:46px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;text-align:center;background:var(--surface);flex-shrink:0}
.mcal i{display:block;font-style:normal;font-size:10px;font-weight:var(--fw-b);line-height:1.7;background:var(--brand);color:var(--on-brand)}
.mcal b{display:block;font-size:var(--fs-md);line-height:1.55}
/* التقدم */
.prog__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-block-end:10px}
.prog__big{font-size:var(--fs-lg);font-weight:var(--fw-b)}
.prog__big small{font-size:var(--fs-sm);color:var(--ink-3);font-weight:var(--fw-m)}
.bar{block-size:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;block-size:100%;background:var(--brand);transform-origin:100% 50%;transform:scaleX(var(--p,0));transition:transform var(--d4) var(--ease-out)}
.prog__cells{display:grid;grid-template-columns:repeat(3,1fr);margin-block-start:var(--sp-4);border-block-start:1px solid var(--line)}
.cell{padding-block-start:var(--sp-3)}
.cell + .cell{border-inline-start:1px solid var(--line);padding-inline-start:14px}
.cell b{display:block;font-size:var(--fs-lg);line-height:1.3}
.cell span{font-size:var(--fs-xs);color:var(--ink-3)}
/* قائمة الجدارات */
.clist{list-style:none;margin:0;padding:0}
.crow{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:13px 0;border:0;border-block-end:1px solid var(--line);background:none;text-align:start;color:inherit;min-block-size:var(--tap)}
.clist li:last-child .crow{border-block-end:0}
.crow:hover .crow__t{color:var(--brand-ink)}
.cnum{inline-size:34px;block-size:34px;border-radius:50%;display:grid;place-items:center;font-weight:var(--fw-b);font-size:var(--fs-sm);flex-shrink:0;border:1.5px solid var(--line-2);color:var(--ink-3)}
.cnum .icon{inline-size:16px;block-size:16px;stroke-width:2.4}
.cnum--now{border-color:var(--brand);color:var(--brand-ink);box-shadow:0 0 0 4px var(--brand-soft)}
.cnum--done{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
.crow__b{flex:1;min-inline-size:0}
.crow__t{display:block;font-weight:var(--fw-sb);line-height:1.45;transition:color var(--d1) var(--ease)}
.crow__d{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.crow > .icon{color:var(--ink-3);inline-size:18px;block-size:18px}
/* قابل للطي */
.about summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);cursor:pointer;font-weight:var(--fw-b);font-size:var(--fs-md);min-block-size:var(--tap);border-radius:var(--r-sm)}
.about summary::-webkit-details-marker{display:none}
.about summary .icon{color:var(--ink-3);transform:rotate(90deg);transition:transform var(--d2) var(--ease)}
.about[open] summary .icon{transform:rotate(-90deg)}
.about p{color:var(--ink-2);font-size:var(--fs-sm);margin-block-start:6px;line-height:1.9}
.about[open] > :not(summary){animation:rise var(--d2) var(--ease-out) both}
/* الشريط السفلي */
.tabbar{position:sticky;inset-block-end:0;z-index:var(--z-sticky);display:grid;grid-template-columns:repeat(4,1fr);margin-block-start:auto;background:var(--surface);border-block-start:1px solid var(--line);padding:6px var(--sp-2) calc(10px + env(safe-area-inset-bottom,0px))}
.tb{position:relative;display:grid;justify-items:center;gap:1px;border:0;background:none;color:var(--ink-3);font-size:var(--fs-2xs);font-weight:var(--fw-sb);padding:6px 0;min-block-size:52px;border-radius:var(--r-md);text-decoration:none;transition:color var(--d1) var(--ease)}
.tb:hover{color:var(--ink);text-decoration:none}
.tb .icon{inline-size:23px;block-size:23px;transition:transform var(--d2) var(--ease-out)}
.tb:active .icon{transform:scale(.88)}
.tb[aria-current="page"]{--ic-a:var(--turq-soft);color:var(--brand-ink)}
/* مؤشر ينزلق بين التبويبات (اختياري: أضف .tabbar--glide لعنصر الشريط؛ 4 تبويبات).
   الأعمدة تبدأ من اليمين في RTL، فالانتقال للتبويب التالي إزاحة سالبة على X. */
.tabbar--glide{container-type:inline-size}
.tabbar--glide::before{content:"";position:absolute;z-index:0;inset-block-start:12px;inset-inline-start:calc(var(--sp-2) + ((100cqi - 2 * var(--sp-2)) / 4 - 56px) / 2);inline-size:56px;block-size:30px;border-radius:var(--r-full);background:var(--brand-soft);opacity:0;transform:translateX(calc(var(--tb-i,0) * (100cqi - 2 * var(--sp-2)) / -4));transition:transform var(--d-spring) var(--ease-spring),opacity var(--d2) var(--ease);pointer-events:none}
.tabbar--glide:has(.tb[aria-current="page"])::before{opacity:1}
.tabbar--glide:has(.tb:nth-child(2)[aria-current="page"]){--tb-i:1}
.tabbar--glide:has(.tb:nth-child(3)[aria-current="page"]){--tb-i:2}
.tabbar--glide:has(.tb:nth-child(4)[aria-current="page"]){--tb-i:3}
.tabbar--glide .tb{z-index:1}
.tabbar--glide .tb[aria-current="page"] .tb__ic{background:transparent;animation:none}
/* السلايدر */
.pg-h{padding:6px var(--sp-5) var(--sp-4)}
.car{padding-block-end:var(--sp-2)}
.car__track{position:relative;display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--sp-5) var(--sp-3);scroll-padding-inline:var(--sp-5);scrollbar-width:none;overscroll-behavior-x:contain}
.car__track::-webkit-scrollbar{display:none}
.ccard{--ic-a:var(--blue);flex:0 0 84%;scroll-snap-align:center;display:flex;flex-direction:column;gap:var(--sp-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--sh-1)}
.ccard--now{border-color:var(--brand-line);box-shadow:0 0 0 1px var(--brand-line),var(--sh-2)}
.ccard__top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.ccard h3{font-size:var(--fs-xl);line-height:1.25}
.ccard__r{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.ccard__l{list-style:none;margin:0;padding:var(--sp-3) 0 0;border-block-start:1px solid var(--line);display:grid;gap:6px;font-size:var(--fs-sm);color:var(--ink-2)}
.ccard__l li{display:flex;align-items:center;gap:var(--sp-2)}
.ccard__l .icon{inline-size:17px;block-size:17px;color:var(--brand)}
.car__dots{display:flex;justify-content:center;gap:var(--sp-0)}
.car__dot{inline-size:30px;block-size:30px;border:0;background:none;padding:0;display:grid;place-items:center}
.car__dot i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--line-2);transition:transform var(--d2) var(--ease-out),background-color var(--d2) var(--ease)}
.car__dot[aria-current="true"] i{background:var(--brand);transform:scale(1.4)}
/* الحساب */
.acct__h{display:flex;align-items:center;gap:14px;padding:6px var(--sp-5) var(--sp-6)}
.who{display:flex;align-items:center;gap:14px;padding:var(--sp-4);margin:var(--sp-5) 0 var(--sp-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.who__av{inline-size:48px;block-size:48px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:var(--fw-b);font-size:var(--fs-md);flex-shrink:0}
.who__av--lg{inline-size:var(--av-lg);block-size:var(--av-lg);font-size:var(--fs-xl)}
.who b{display:block;font-size:var(--fs-md);line-height:1.4}
.who small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.kv{margin:0}
.kv div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:10px 0;border-block-end:1px solid var(--line);font-size:var(--fs-sm)}
.kv div:last-child{border-block-end:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-weight:var(--fw-sb);text-align:end;overflow-wrap:anywhere}
/* قوائم داخل الأوراق */
.sh-sub{font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-3);margin:var(--sp-5) 0 6px}
.ilist{list-style:none;margin:0;padding:0}
.ilist li{display:flex;align-items:center;gap:var(--sp-3);padding:11px 0;border-block-end:1px solid var(--line)}
.ilist li:last-child{border-block-end:0}
.ilist .tile{inline-size:var(--tile-sm);block-size:var(--tile-sm);border-radius:11px}
.ilist .tile .icon{inline-size:19px;block-size:19px}
.ilist .b{flex:1;min-inline-size:0}
.ilist b{display:block;font-weight:var(--fw-sb);font-size:var(--fs-sm);line-height:1.55}
.ilist small{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.irow{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;border:0;background:none;padding:0;text-align:start;color:inherit;min-block-size:var(--tap)}
.irow > .icon{inline-size:16px;block-size:16px;color:var(--ink-3)}
.irow b{transition:color var(--d1) var(--ease)}
.irow:hover b{color:var(--brand-ink)}
.mhero{display:flex;gap:14px;align-items:center;margin:var(--sp-0) 0 var(--sp-4)}
.mhero .cal{inline-size:62px;flex-shrink:0}
.mhero > div:last-child{display:grid;gap:3px;justify-items:start}
.mhero b{font-size:var(--fs-md);line-height:1.4}
.xp{display:flex;gap:var(--sp-3);align-items:center;margin-block-start:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg)}
.xp small{display:block;font-size:var(--fs-2xs);color:var(--ink-3);font-weight:var(--fw-sb)}
.xp b{display:block;font-weight:var(--fw-sb);line-height:1.5}
.msub{font-size:var(--fs-sm);color:var(--ink-3)}
.att{display:flex;gap:14px;align-items:center;padding:14px;margin-block-end:var(--sp-4);border-radius:var(--r-lg);background:var(--yellow-soft)}
.att b{display:block;color:var(--ink)}
.att small{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.75}
/* الاستبانة والمهمة */
.likert{border:0;padding:0;margin:var(--sp-5) 0 var(--sp-6);min-inline-size:0}
.likert legend{font-weight:var(--fw-sb);line-height:1.6;margin-block-end:var(--sp-3);padding:0}
.likert legend small{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:var(--fw-r)}
.lk{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lk label{position:relative}
.lk input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.lk span{display:grid;place-items:center;block-size:48px;border-radius:var(--r-md);border:1.5px solid var(--line-strong);font-weight:var(--fw-b);background:var(--surface);transition:background-color var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.lk label:active span{transform:scale(.95)}
.lk input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.lk input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.lk__ends{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--ink-3);margin-block-start:6px}
.reading{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--sp-4);margin:14px 0 var(--sp-5)}
.reading h4{font-size:var(--fs-md);margin-block-end:6px}
.reading p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.9}
.answer{margin-block-start:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}
.answer p{font-size:var(--fs-sm);color:var(--ink-2);margin-block-start:var(--sp-1);white-space:pre-wrap;overflow-wrap:anywhere}
/* شاشة الإنجاز */
.done{min-block-size:100%;display:flex;flex-direction:column;justify-content:center;padding:var(--sp-10) var(--sp-6);text-align:center}
.done__ic{inline-size:84px;block-size:84px;border-radius:50%;margin:0 auto var(--sp-5);display:grid;place-items:center;background:var(--brand);color:var(--on-brand);animation:pop var(--d4) var(--ease-out) both}
.done__ic .icon{inline-size:40px;block-size:40px;stroke-width:2.4;stroke-dasharray:30;stroke-dashoffset:30;animation:draw 520ms 260ms var(--ease-out) forwards}
.done__list{text-align:start;margin:var(--sp-6) 0;border-block-start:1px solid var(--line)}
.done__list div{--ic-a:var(--blue-soft);display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) 0;border-block-end:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.done__list .icon{color:var(--brand);margin-block-start:3px}
.done__list b{display:block;color:var(--ink);font-weight:var(--fw-sb)}
/* شريط وضع التجربة (يستخدمه المشارك والطاقم) */
.sim-banner{position:sticky;inset-block-start:0;z-index:var(--z-banner);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);min-block-size:36px;background:var(--yellow-soft);color:var(--yellow-ink);font-size:var(--fs-xs);font-weight:var(--fw-sb);line-height:1.5;text-align:center;border-block-end:1px solid color-mix(in srgb,var(--yellow) 45%,transparent)}
.sim-banner .icon{inline-size:16px;block-size:16px;flex-shrink:0}
.sim-banner b{font-weight:var(--fw-b)}

/* ============ 10. مكونات لوحات المشرف والمؤسسة ============ */
.mh{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}
.mh h1,.mh h2{font-size:var(--fs-2xl);line-height:1.25}
.mh h1:focus{outline:none}
.mh p{font-size:var(--fs-sm);color:var(--ink-3);margin-block-start:var(--sp-1)}
.mh__a{display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* البنية المقصودة: .mh > div > (h1 + p) ثم .mh__a. إن جاء h1 وp مباشرة يبقى الوصف تحت العنوان */
.mh > :is(h1,h2) + p{flex-basis:100%;margin-block-start:calc(var(--sp-1) - var(--sp-4))}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5) var(--sp-5);margin-block-start:var(--sp-5)}
.panel__h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.panel__h b,.panel__h h2,.panel__h h3{font-size:var(--fs-sm);font-weight:var(--fw-b)}
.panel__h span{font-size:var(--fs-xs);color:var(--ink-3)}
.panel--flush{padding:0;overflow:hidden}
.panel--flush > .panel__h{padding:var(--sp-4) var(--sp-5);border-block-end:1px solid var(--line)}
/* مسار التفعيل */
.funnel{display:grid;grid-template-columns:repeat(4,1fr);margin-block-start:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fc{padding:var(--sp-4) var(--sp-5)}
.fc + .fc{border-inline-start:1px solid var(--line)}
.fc__t{font-size:var(--fs-sm);color:var(--ink-2)}
.fc__n{font-size:var(--fs-2xl);font-weight:var(--fw-b);line-height:1.2;margin:var(--sp-0) 0 10px;font-variant-numeric:lining-nums tabular-nums}
.fc__n small{font-size:var(--fs-sm);font-weight:var(--fw-m);color:var(--ink-3);margin-inline-start:var(--sp-1)}
.fc .bar{block-size:4px}
/* المؤشرات */
.band{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);margin-block-start:var(--sp-6)}
.band--4{grid-template-columns:repeat(4,1fr)}
.band > div{padding:var(--sp-4) 0}
.band > div + div{border-inline-start:1px solid var(--line);padding-inline-start:var(--sp-6)}
.band b{display:block;font-size:var(--fs-2xl);line-height:1.15;font-variant-numeric:lining-nums tabular-nums}
.band b small{font-size:var(--fs-sm);color:var(--ink-3);font-weight:var(--fw-m);margin-inline-start:var(--sp-1)}
.band > div > span{font-size:var(--fs-sm);color:var(--ink-2)}
.kpis{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));margin-block-start:var(--sp-5)}
.kpi{display:grid;gap:var(--sp-1);align-content:start}
.kpi__l{font-size:var(--fs-sm);color:var(--ink-2);font-weight:var(--fw-m)}
.kpi__v{font-size:var(--fs-2xl);font-weight:var(--fw-b);line-height:1.15;font-variant-numeric:lining-nums tabular-nums}
.kpi__v small{font-size:var(--fs-sm);color:var(--ink-3);font-weight:var(--fw-m);margin-inline-start:var(--sp-1)}
.kpi__s{font-size:var(--fs-xs);color:var(--ink-3)}
/* أدوات القوائم */
.tools{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:var(--sp-6) 0 var(--sp-3)}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-full);padding:var(--sp-1) var(--sp-3);min-block-size:var(--ctl-h-sm);font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.fchip b{font-weight:var(--fw-b);color:var(--ink)}
.fchip:hover{border-color:var(--ink-3)}
.fchip:active{transform:scale(.97)}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fchip[aria-pressed="true"] b{color:inherit}
/* الجداول: على الجوال تتحول الصفوف إلى بطاقات (data-l على كل خلية)، أو تمرير أفقي مع عمود أول ثابت (.tbl--scroll) */
.tbl-wrap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{inline-size:100%;border-collapse:collapse;font-size:var(--fs-sm);min-inline-size:860px;font-variant-numeric:lining-nums tabular-nums}
.tbl--org{min-inline-size:640px}
.tbl--meet{min-inline-size:720px}
.tbl--auto{min-inline-size:0}
.tbl th{text-align:start;font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-3);padding:11px var(--sp-4);border-block-end:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
.tbl th[aria-sort]{cursor:pointer}
.tbl th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-1)}
.tbl th button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.tbl td{padding:11px var(--sp-4);border-block-end:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tbl tbody tr:last-child td{border-block-end:0}
.tbl tbody tr{transition:background-color var(--d1) var(--ease)}
@media (hover:hover){.tbl tbody tr:hover{background:color-mix(in srgb,var(--brand-soft) 50%,transparent)}}
.tbl td.wrap{white-space:normal}
.tbl--scroll th:first-child,.tbl--scroll td:first-child{position:sticky;inset-inline-start:0;z-index:1;background:var(--surface)}
.tbl--scroll th:first-child{background:var(--surface-2)}
@media (hover:hover){.tbl--scroll tbody tr:hover td:first-child{background:color-mix(in srgb,var(--brand-soft) 50%,var(--surface))}}
.pname{border:0;background:none;padding:0;text-align:start;display:grid;line-height:1.45;color:inherit;min-block-size:var(--tap);align-content:center}
.pname b{font-weight:var(--fw-sb);transition:color var(--d1) var(--ease)}
.pname:hover b{color:var(--brand-ink)}
.pname small{font-size:var(--fs-xs);color:var(--ink-3)}
.mini{display:inline-flex;align-items:center;gap:var(--sp-2)}
.mini .bar{inline-size:46px;block-size:4px}
.c-act{text-align:end}
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--ink-3)}
.pager__b{display:flex;gap:var(--sp-1)}
/* المواد */
.mats{list-style:none;margin:var(--sp-4) 0 0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.mats li{display:flex;align-items:center;gap:14px;padding:14px var(--sp-5);border-block-end:1px solid var(--line);flex-wrap:wrap}
.mats li:last-child{border-block-end:0}
.mats .b{flex:1;min-inline-size:min(200px,100%)}
.mats b{display:block;font-weight:var(--fw-sb);line-height:1.5}
.mats small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.mats__q{display:flex;gap:var(--sp-2);align-items:flex-start;margin-block-start:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--brand-soft);border-radius:10px;font-size:var(--fs-sm);color:var(--brand-ink)}
.mats__a{display:flex;gap:6px;flex-wrap:wrap}
.imp-band{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);margin:var(--sp-0) 0 var(--sp-3)}
.imp-band div{padding:10px 0}
.imp-band div + div{border-inline-start:1px solid var(--line);padding-inline-start:14px}
.imp-band b{display:block;font-size:var(--fs-xl);line-height:1.3}
.imp-band span{font-size:var(--fs-xs);color:var(--ink-3)}
.imp-ok{text-align:center;padding:6px 0 0}
/* توزيع الشرائح وأشرطة المؤشرات */
.dist{list-style:none;margin:var(--sp-3) 0 0;padding:0}
.dist li{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.4fr) 40px;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;border-block-end:1px solid var(--line);font-size:var(--fs-sm)}
.dist li:last-child{border-block-end:0}
.dist__l{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-sb)}
.dist b{text-align:end}
.abars,.cprog,.todo-l{list-style:none;margin:10px 0 0;padding:0}
.abars li{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,1.3fr) 52px;gap:14px;align-items:center;padding:9px 0;border-block-end:1px solid var(--line)}
.abars li:last-child,.cprog li:last-child,.todo-l li:last-child{border-block-end:0}
.abars b,.cprog__l b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-sb);line-height:1.45}
.abars small,.cprog__l small{display:block;font-size:var(--fs-2xs);color:var(--ink-3)}
.abars__v,.cprog__v{font-size:var(--fs-sm);font-weight:var(--fw-b);text-align:end}
.abars__v.muted,.cprog__v.muted{font-weight:var(--fw-m);font-size:var(--fs-xs)}
.cprog li{display:flex;align-items:center;gap:var(--sp-3);padding:10px 0;border-block-end:1px solid var(--line)}
.cprog .cnum{inline-size:30px;block-size:30px;font-size:var(--fs-xs)}
.cprog__l{flex:1;min-inline-size:0}
.cprog .bar{inline-size:34%;flex-shrink:0}
.cprog__v{inline-size:52px;flex-shrink:0}
.todo-l li{display:flex;align-items:center;gap:var(--sp-3);padding:11px 0;border-block-end:1px solid var(--line)}
.todo-l .tile{inline-size:38px;block-size:38px;border-radius:var(--r-md)}
.todo-l .tile .icon{inline-size:20px;block-size:20px}
.todo-l .b{flex:1;min-inline-size:0}
.todo-l b{display:block;font-weight:var(--fw-sb);font-size:var(--fs-sm);line-height:1.5}
.todo-l small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.todo-l__n{font-size:var(--fs-xl);font-weight:var(--fw-b);min-inline-size:30px;text-align:center}
.mnext{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.mnext__d{display:flex;gap:14px;align-items:center}
.mnext__d .cal{inline-size:62px;flex-shrink:0}
.mnext__d > div:last-child{display:grid;gap:var(--sp-1);justify-items:start}
.mnext__d b{font-size:var(--fs-md);line-height:1.4}
.mnext__d .muted{font-size:var(--fs-sm)}
.attc{display:flex;align-items:baseline;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-0)}
.attc b{font-size:var(--fs-2xl);line-height:1.2}
.attc > span{color:var(--ink-2);font-size:var(--fs-sm)}
.attl li{align-items:center}
.attl .b{flex:1;min-inline-size:0}
.attl small{direction:ltr;text-align:end}
.ov{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-5);margin-block-start:var(--sp-5);align-items:start}
.ov .panel{margin-block-start:0}
.chans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-block-start:var(--sp-5);background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.chan{background:var(--surface);padding:var(--sp-4) var(--sp-5);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.chan b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-b)}
.chan small{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.rules{list-style:none;margin:var(--sp-3) 0 0;padding:0}
.rules li{display:flex;align-items:center;gap:var(--sp-3);padding:11px 0;border-block-end:1px solid var(--line)}
.rules li:last-child{border-block-end:0}
.rules .b{flex:1;min-inline-size:0}
.rules b{display:block;font-weight:var(--fw-sb);font-size:var(--fs-sm)}
.rules small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.svq{padding:var(--sp-3) 0;border-block-end:1px solid var(--line)}
.svq b{display:block;font-weight:var(--fw-sb);font-size:var(--fs-sm);line-height:1.6}
.lkd{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;block-size:76px;align-items:end;margin-block-start:10px}
.lkd div{display:grid;grid-template-rows:1fr auto;block-size:100%;gap:var(--sp-1);text-align:center;font-size:var(--fs-2xs);color:var(--ink-3)}
.lkd i{display:block;align-self:end;block-size:calc(var(--h,0) * 56px);min-block-size:3px;background:var(--brand);border-radius:3px 3px 0 0;transform-origin:50% 100%;animation:growY var(--d4) var(--ease-out) both}
.chead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-block-start:var(--sp-5);padding-block-end:var(--sp-3);border-block-end:1px solid var(--line)}
.chead h3{font-size:var(--fs-lg)}
.ilist--w{margin-block-start:10px}
.ilist--w li{flex-wrap:wrap}
.ilist--w .mats__a{margin-inline-start:auto}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:var(--sp-3);padding:11px 0;border-block-end:1px solid var(--line);font-size:var(--fs-sm)}
.tl .dot{margin-block-start:9px}
.tl b{display:block;font-weight:var(--fw-sb);line-height:1.6}
.tl small{display:block;color:var(--ink-3);font-size:var(--fs-xs)}
.names{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:var(--sp-3)}
.preview{background:var(--surface-2);border-radius:var(--r-lg);padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-sm);line-height:1.85}
.orglogo{inline-size:44px;block-size:44px;border:1.5px dashed var(--line-2);border-radius:var(--r-md);display:grid;place-items:center;font-size:10px;color:var(--ink-3);text-align:center;line-height:1.3;flex-shrink:0}

/* ============ 11. الطبقات: النوافذ والأوراق والدرج والتنبيه العائم ============ */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-inline-size:none;max-block-size:none;overflow:visible}
dialog::backdrop{background:var(--scrim);animation:fadeIn var(--d2) var(--ease) both}
dialog.is-closing::backdrop{animation:fadeOut var(--d2) var(--ease) both}
html:has(dialog[open]:modal){overflow:hidden}
/* نافذة حوار */
.dlg{inline-size:min(480px,calc(100% - 2 * var(--sp-4)));margin:auto}
.dlg--lg{inline-size:min(680px,calc(100% - 2 * var(--sp-4)))}
.menu{inline-size:min(440px,calc(100% - 2 * var(--sp-4)))}
.dlg__in{position:relative;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:var(--sp-6);max-block-size:calc(100dvh - var(--sp-12));overflow:auto;overscroll-behavior:contain}
.dlg[open] .dlg__in{animation:dlgIn var(--d-spring) var(--ease-spring) both}
.dlg.is-closing .dlg__in{animation:dlgOut var(--d1) var(--ease) both}
.dlg__h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-block-end:14px}
.dlg__h h3,.dlg__h h2{font-size:var(--fs-lg)}
.dlg__h p{font-size:var(--fs-sm);color:var(--ink-3)}
.dlg__b{color:var(--ink-2)}
.dlg__b > p + p{margin-block-start:var(--sp-2)}
.dlg__a{display:flex;gap:var(--sp-2);margin-block-start:var(--sp-5);flex-wrap:wrap}
/* الورقة: من أسفل الشاشة على الجوال، ولوحة في المنتصف على الكمبيوتر */
.sheet{inline-size:100%;max-inline-size:100%;margin:auto 0 0;padding:0}
.sheet__in{position:relative;background:var(--surface);border-radius:var(--r-2xl) var(--r-2xl) 0 0;max-block-size:92dvh;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom,0px));box-shadow:var(--sh-3);outline:none;scrollbar-width:none}
.sheet__in::-webkit-scrollbar{display:none}
.sheet[open] .sheet__in{animation:sheetUp var(--d-sheet) var(--ease-sheet) both}
.sheet.is-closing .sheet__in{animation:sheetDown var(--d2) var(--ease) both}
.sheet__grab{position:sticky;inset-block-start:0;z-index:2;display:flex;justify-content:center;padding:10px 0 var(--sp-3);margin-inline:calc(-1 * var(--sp-5));background:var(--surface);cursor:grab;touch-action:none}
.sheet__grab i{inline-size:40px;block-size:4px;border-radius:2px;background:var(--line-2)}
.sh-h{display:flex;align-items:center;gap:var(--sp-3);margin-block-end:var(--sp-4)}
.sh-h > div{flex:1;min-inline-size:0}
.sh-h small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.sh-h h3,.sh-h h2{font-size:var(--fs-lg)}
.sh-b{min-inline-size:0}
.sh-a{position:sticky;inset-block-end:calc(-1 * (var(--sp-6) + env(safe-area-inset-bottom,0px)));display:flex;gap:var(--sp-2);margin:var(--sp-5) calc(-1 * var(--sp-5)) 0;padding:var(--sp-3) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom,0px));background:var(--surface);border-block-start:1px solid var(--line)}
.sh-a .btn{flex:1}
@media (min-width:48rem){
  .sheet{inline-size:min(560px,calc(100% - 2 * var(--sp-8)));margin:auto}
  .sheet--wide{inline-size:min(760px,calc(100% - 2 * var(--sp-8)))}
  .sheet__in{border-radius:var(--r-xl);max-block-size:calc(100dvh - var(--sp-16));padding:var(--sp-6) var(--sp-6) var(--sp-6)}
  .sheet__grab{display:none}
  .sheet[open] .sheet__in{animation:dlgIn var(--d-spring) var(--ease-spring) both}
  .sheet.is-closing .sheet__in{animation:dlgOut var(--d1) var(--ease) both}
  .sh-a{inset-block-end:calc(-1 * var(--sp-6));margin:var(--sp-5) calc(-1 * var(--sp-6)) 0;padding:var(--sp-4) var(--sp-6) var(--sp-6)}
}
/* الدرج الجانبي (صفحة المشارك عند المشرف): ينزلق من نهاية السطر (اليسار في RTL) */
.drawer{position:fixed;inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;block-size:100%;max-block-size:100dvh;inline-size:min(440px,100%)}
.drawer .dlg__in{block-size:100%;max-block-size:none;overflow-y:auto;border-radius:0;padding:0}
.drawer[open] .dlg__in{animation:drwIn var(--d-sheet) var(--ease-sheet) both}
.drawer.is-closing .dlg__in{animation:drwOut var(--d2) var(--ease) both}
.drw__h{position:sticky;inset-block-start:0;z-index:1;background:var(--surface);padding:var(--sp-5) var(--sp-6) var(--sp-4);border-block-end:1px solid var(--line);display:flex;align-items:flex-start;gap:14px}
.drw__h > div{flex:1;min-inline-size:0}
.drw__h h3,.drw__h h2{font-size:var(--fs-lg)}
.drw__h small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.drw__b{padding:var(--sp-4) var(--sp-6) var(--sp-7)}
.drw__stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-md)}
.drw__stats div{padding:10px var(--sp-3)}
.drw__stats div + div{border-inline-start:1px solid var(--line)}
.drw__stats b{display:block;font-size:var(--fs-md)}
.drw__stats span{font-size:var(--fs-2xs);color:var(--ink-3)}
.drw__stats .chip{margin-block-end:var(--sp-0)}
/* قائمة خيارات */
.menu__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.menu__i{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:10px;min-block-size:var(--tap);border:0;border-radius:var(--r-md);background:none;text-align:start;color:inherit;transition:background-color var(--d1) var(--ease)}
.menu__i:hover{background:var(--surface-2);text-decoration:none}
.menu__i[aria-current="page"]{background:var(--brand-soft)}
.menu__i .b{flex:1;min-inline-size:0}
.menu__i b{display:block;font-weight:var(--fw-sb);line-height:1.5}
.menu__i small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.menu__i > .icon{inline-size:18px;block-size:18px;color:var(--ink-3)}
.menu__i--bad{color:var(--bad)}
.menu__i--bad > .icon{color:currentColor}
/* التنبيه العائم */
.toast{position:fixed;inset-inline:0;inset-block-end:calc(var(--sp-6) + env(safe-area-inset-bottom,0px));margin-inline:auto;inline-size:max-content;max-inline-size:calc(100% - 2 * var(--sp-4));z-index:var(--z-toast);display:flex;align-items:center;gap:var(--sp-2);background:var(--ink);color:var(--bg);padding:11px var(--sp-5);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:var(--fw-m);line-height:1.6;text-align:center;box-shadow:var(--sh-2);opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity var(--d2) var(--ease),transform var(--d3) var(--ease-out)}
.toast.is-on{opacity:1;transform:none}
.toast--bad{background:var(--bad);color:var(--white)}
.toast--ok .icon{color:var(--ok)}
.toast .icon{inline-size:18px;block-size:18px;flex-shrink:0}
body.has-tabbar .toast{inset-block-end:calc(84px + env(safe-area-inset-bottom,0px))}

/* ============ 12. شاشة الإقلاع والأخطاء العامة ============ */
/* طبقة الشهادة والتحقق (main.js يركّب cert.js داخلها فوق التطبيق) */
.cert-layer{position:fixed;inset:0;z-index:var(--z-layer);overflow-y:auto;overscroll-behavior:contain;background:var(--bg)}
body.has-cert{overflow:hidden}
.cert-ph{display:grid;justify-items:center;gap:var(--sp-6);inline-size:min(440px,100%)}
/* الشعار يُخفى حتى يقرر main.js: مقدمة متحركة (أول تحميل في الجلسة) أو ظهور هادئ بعد 260ms إن طال التحميل */
.splash{position:relative;min-block-size:100vh;min-block-size:100dvh;display:grid;place-content:center;justify-items:center;gap:var(--sp-8);padding:var(--sp-6) var(--sp-6) var(--sp-16)}
.splash__mark{--wm-h:clamp(84px,14vw,112px);animation:fadeIn var(--d3) var(--ease) 260ms both}
.splash.is-intro .splash__mark{animation:none}
.splash .donor{position:absolute;inset-inline:0;inset-block-end:calc(var(--sp-8) + env(safe-area-inset-bottom,0px));justify-content:center;--donor-h:28px;animation:fadeIn var(--d3) var(--ease) 260ms both}
.splash.is-intro .donor{animation:fadeIn var(--d4) var(--ease) 900ms both}
.splash.is-out{animation:splashOut 260ms var(--ease) both}
.fatal{min-block-size:100vh;min-block-size:100dvh;display:grid;place-content:center;padding:var(--sp-6)}
.fatal .empty{max-inline-size:440px}

/* ============ 13. شاشات الدخول والدعوة والاستعادة ============ */
/* الجوال: لوحة الهوية في الأعلى (الشعار والعنوان) ثم لوحة النموذج ترتفع فوقها.
   الكمبيوتر (من 960): النموذج في البداية (اليمين) ولوحة الهوية في النهاية (اليسار) بارتفاع الشاشة. */
.auth{min-block-size:100vh;min-block-size:100dvh;display:grid;grid-template-rows:auto 1fr;background:var(--bg)}
.auth__art{position:relative;overflow:hidden;isolation:isolate;background:var(--tint);color:var(--ink);padding:calc(var(--sp-4) + env(safe-area-inset-top,0px)) var(--page-x) var(--sp-14);display:flex;flex-direction:column;gap:var(--sp-4);view-transition-name:auth-art}
/* أداة الهوية: عمودان قطريان عريضان من هندسة الشعار نفسه، بدرجة قريبة جدًا من سطح اللوحة */
.auth__art::before,.auth__art::after{content:"";position:absolute;z-index:-1;inline-size:34%;block-size:220%;background:var(--tint-bar);inset-block-start:-60%;transform:rotate(45deg);pointer-events:none}
.auth__art::before{inset-inline-end:2%}
.auth__art::after{inset-inline-end:-30%;background:transparent;box-shadow:inset 0 0 0 1px var(--tint-line)}
.auth__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-block-size:var(--tap)}
.auth__top .icon-btn{margin-inline-start:auto}
.auth__name{font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink-2)}
.auth__top .icon-btn{background:var(--surface);color:var(--ink-2);box-shadow:var(--sh-1)}
.auth__top .icon-btn:hover{color:var(--ink)}
.auth__hero{display:flex;align-items:center;gap:var(--sp-5);min-block-size:var(--tap)}
.auth__links:empty{display:none}
.auth__logo{--wm-h:clamp(64px,17vw,84px)}
.auth__art-t{font-size:var(--fs-xl);line-height:var(--lh-tight);font-weight:var(--fw-sb);color:var(--ink);max-inline-size:12em}
.auth__art-p{display:none}
.auth__art-f{display:none}
.auth__cap{font-size:var(--fs-sm);font-weight:var(--fw-m);color:var(--ink-2)}
/* أربع جدارات: أربعة مقاطع بألوان الشعار، تمتد من بداية السطر (اليمين) */
.auth__rail{display:flex;gap:6px;inline-size:min(260px,70%);margin-block-start:var(--sp-3)}
.auth__rail i{flex:1;block-size:6px;border-radius:3px;background:var(--line-2);transform-origin:100% 50%;animation:railIn 700ms var(--ease-out) both}
.auth__rail i:nth-child(1){background:var(--logo-a)}
.auth__rail i:nth-child(2){background:var(--logo-b);animation-delay:90ms}
.auth__rail i:nth-child(3){background:var(--logo-c);animation-delay:180ms}
.auth__rail i:nth-child(4){animation-delay:270ms}
/* لوحة النموذج: ترتفع فوق لوحة الهوية على الجوال */
.auth__main{position:relative;z-index:1;margin-block-start:calc(-1 * var(--sp-8));background:var(--bg);border-radius:var(--r-2xl) var(--r-2xl) 0 0;padding:var(--sp-8) var(--page-x) calc(var(--sp-6) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;box-shadow:0 -1px 0 var(--line),0 -12px 32px -18px rgb(31 42 51 / .18)}
.auth__main:focus{outline:none}
.auth__form{inline-size:100%;max-inline-size:420px;margin-inline:auto;flex:1;display:flex;flex-direction:column}
.auth__k{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--brand-ink)}
.auth__k .icon{inline-size:18px;block-size:18px}
.auth__h{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:var(--fw-sb);margin-block-start:var(--sp-2)}
.auth__h:focus{outline:none}
.auth__p{color:var(--ink-2);margin-block-start:var(--sp-2);max-inline-size:40ch}
.auth__body{margin-block-start:var(--sp-6)}
.auth__body > .alert,.auth__body [data-form-alert] > .alert{margin-block-end:var(--sp-5)}
.auth__row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin:calc(-1 * var(--sp-2)) 0 var(--sp-4)}
.auth__alt{margin-block-start:var(--sp-5);display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}
.auth__foot{margin-block-start:auto;padding-block-start:var(--sp-10);display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-3)}
.auth__links{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.auth__links a{color:var(--ink-3);display:inline-flex;align-items:center;gap:var(--sp-1);min-block-size:var(--tap)}
.auth__links a:hover{color:var(--brand-ink)}
.auth__links .icon{inline-size:15px;block-size:15px}
.auth__foot .donor{justify-content:center;padding-block-start:var(--sp-4);border-block-start:1px solid var(--line);--donor-h:30px}
.auth__desk{display:none}
::view-transition-old(auth-art),::view-transition-new(auth-art){animation:none}
/* مغادرة لوحة الدخول (بعد الدخول): اللوحة تتلاشى مع الصفحة بدل أن تبقى ثابتة حتى نهاية الانتقال */
::view-transition-old(auth-art):only-child{animation:vtFadeOut var(--d-vt-out) var(--ease) both}
.auth .who{margin-block:var(--sp-5) 0;box-shadow:var(--sh-1)}
.auth .about{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-4);background:var(--surface);margin-block-start:var(--sp-4)}
.auth .about summary{font-size:var(--fs-sm)}
.auth .about[open]{padding-block-end:var(--sp-4)}
.privacy{max-block-size:260px;overflow:auto;white-space:pre-wrap;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.9;padding-inline-end:var(--sp-2)}
.state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.state__ic{inline-size:64px;block-size:64px;border-radius:20px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);--ic-a:var(--turq-soft);animation:pop var(--d4) var(--ease-spring) both}
.state__ic .icon{inline-size:30px;block-size:30px}
.state__ic--bad{background:var(--bad-soft);color:var(--bad)}
.state__ic--ok{background:var(--ok-soft);color:var(--ok)}
.state .btn{margin-block-start:var(--sp-3)}
/* مقدمة الشعار في لوحة الدخول: العنوان والوصف والمسار يتبعون هبوط القطع بدل أن تسبقها */
.auth__hero:has(.auth__logo.is-intro) .auth__art-t{animation:rise var(--d3) var(--ease-out) 420ms both}
.auth__hero:has(.auth__logo.is-intro) .auth__art-p{animation:rise var(--d3) var(--ease-out) 520ms both}
.auth__hero:has(.auth__logo.is-intro) .auth__rail i:nth-child(1){animation-delay:620ms}
.auth__hero:has(.auth__logo.is-intro) .auth__rail i:nth-child(2){animation-delay:710ms}
.auth__hero:has(.auth__logo.is-intro) .auth__rail i:nth-child(3){animation-delay:800ms}
.auth__hero:has(.auth__logo.is-intro) .auth__rail i:nth-child(4){animation-delay:890ms}
.auth:has(.auth__logo.is-intro) .auth__art-f{animation:fadeIn var(--d4) var(--ease) 760ms both}
@media (min-width:60rem){
  .auth{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  .auth__main{grid-column:1;grid-row:1;margin:0;border-radius:0;box-shadow:none;padding:var(--sp-10) clamp(2rem,6vw,6rem);justify-content:center}
  .auth__form{flex:0 1 auto;min-block-size:min(640px,100%)}
  .auth__art{grid-column:2;grid-row:1;position:sticky;inset-block-start:0;block-size:100vh;block-size:100dvh;padding:clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,4.5rem);justify-content:space-between;gap:var(--sp-8)}
  .auth__art::before{inline-size:30%;inset-inline-end:8%}
  .auth__art::after{inline-size:30%;inset-inline-end:-18%}
  .auth__hero{flex-direction:column;align-items:flex-start;gap:var(--sp-8)}
  .auth__logo{--wm-h:clamp(120px,13vw,168px)}
  .auth__art-t{font-size:var(--fs-display);max-inline-size:9em;line-height:1.2}
  .auth__art-p{display:block;color:var(--ink-2);font-size:var(--fs-md);max-inline-size:36ch;margin-block-start:var(--sp-4)}
  .auth__art-f{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;padding-block-start:var(--sp-5);border-block-start:1px solid var(--tint-line)}
  .auth__art-f .donor{--donor-h:40px}
  .auth__foot .donor{display:none}
  .auth__desk{display:block}
  .auth__mob{display:none}
}
@media (max-width:59.99rem){
  .auth__rail{display:none}
  /* الجوال: زر المظهر يطفو عند نهاية السطر، فتبقى لوحة الهوية سطرًا واحدًا (الشعار والعنوان) */
  .auth__art{padding-block-start:calc(var(--sp-5) + env(safe-area-inset-top,0px))}
  .auth__top{position:absolute;inset-block-start:calc(var(--sp-4) + env(safe-area-inset-top,0px));inset-inline:var(--page-x);min-block-size:0;pointer-events:none}
  .auth__top > *{pointer-events:auto}
  .auth__name{display:none}
  .auth__hero{padding-inline-end:calc(var(--tap) + var(--sp-2))}
}
@media (max-width:22.5rem){ /* 360 */
  .auth__hero{gap:var(--sp-4)}
  .auth__art-t{font-size:var(--fs-lg)}
}

/* ============ 14. الحركة ============ */
@keyframes rise{from{opacity:0;transform:translateY(var(--rise-y))}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.45}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes dlgIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes dlgOut{to{opacity:0;transform:scale(.97) translateY(4px)}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:translateY(var(--drag,0px))}to{transform:translateY(100%)}}
@keyframes drwIn{from{transform:translateX(-100%)}to{transform:none}} /* اللوحة الجانبية تنزلق من اليسار، نهاية السطر في RTL */
@keyframes drwOut{to{transform:translateX(-100%)}}
@keyframes markIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes railIn{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:none}}
@keyframes growY{from{transform:scaleY(0)}to{transform:none}}
@keyframes splashOut{to{opacity:0;transform:scale(.985)}}

/* ---- توقيع الشعار: «وثبة» تقفز إلى مكانها (≤ 1.4 ثانية، تحويلات فقط) ----
   الترتيب بقراءة الكلمة من اليمين: الواو (الخطاف الأيمن)، ثم عمودا الثاء والباء، ثم خطاف التاء المربوطة،
   ثم المعيّنات تهبط واحدة تلو الأخرى وتستقر. وحدات translate هنا وحدات رسم الشعار (عرضه 1281). */
.wmark path{transform-box:fill-box}
.w-bar{transform-origin:9% 91%} /* الطرف السفلي الأيسر للعمود: منه يمتد على قطره */
.w-dot{transform-origin:50% 50%}
.wmark.is-intro .w-hook{animation:wHook 700ms var(--ease-leap) both}
.wmark.is-intro .w-hook-2{animation-delay:300ms}
.wmark.is-intro .w-bar{animation:wBar 620ms var(--ease-leap) 140ms both}
.wmark.is-intro .w-bar-2{animation-delay:250ms}
.wmark.is-intro .w-dot{animation:wDot 480ms var(--ease-out) both}
.wmark.is-intro .w-dot-2{animation-delay:540ms}
.wmark.is-intro .w-dot-6{animation-delay:610ms}
.wmark.is-intro .w-dot-3{animation-delay:680ms}
.wmark.is-intro .w-dot-1{animation-delay:750ms}
.wmark.is-intro .w-dot-4{animation-delay:820ms}
.wmark.is-intro .w-dot-5{animation-delay:890ms}
@keyframes wHook{from{opacity:0;transform:translate(-110px,110px)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes wBar{from{opacity:0;transform:rotate(-45deg) scaleX(.02) rotate(45deg)}20%{opacity:1}to{opacity:1;transform:rotate(-45deg) scaleX(1) rotate(45deg)}}
@keyframes wDot{0%{opacity:0;transform:translateY(-54px) scale(.4)}60%{opacity:1;transform:translateY(5px) scale(1.07)}100%{opacity:1;transform:none}}
/* المحمِّل الهادئ: المعيّنات تتنفس بالتتابع (يحل محل الدوائر الدوّارة) */
.wmark.is-loading .w-dot{animation:wBreath var(--d-loader) var(--ease) infinite}
.wmark.is-loading .w-dot-2{animation-delay:0ms}
.wmark.is-loading .w-dot-6{animation-delay:120ms}
.wmark.is-loading .w-dot-3{animation-delay:240ms}
.wmark.is-loading .w-dot-1{animation-delay:360ms}
.wmark.is-loading .w-dot-4{animation-delay:480ms}
.wmark.is-loading .w-dot-5{animation-delay:600ms}
@keyframes wBreath{0%,70%,100%{opacity:.25;transform:scale(.72)}30%{opacity:1;transform:none}}
/* لمسة المرور (main.js يضيف .is-hop مرة لكل مرور): المعيّنات تقفز قفزة قصيرة بالتتابع ثم تستقر */
.wmark.is-hop .w-dot{animation:wHop 560ms var(--ease-out) both}
.wmark.is-hop .w-dot-6{animation-delay:50ms}
.wmark.is-hop .w-dot-3{animation-delay:100ms}
.wmark.is-hop .w-dot-1{animation-delay:150ms}
.wmark.is-hop .w-dot-4{animation-delay:200ms}
.wmark.is-hop .w-dot-5{animation-delay:250ms}
@keyframes wHop{0%,100%{transform:none}38%{transform:translateY(-60px)}66%{transform:translateY(8px)}84%{transform:translateY(-3px)}} /* وحدات رسم الشعار (ارتفاعه 768) */
/* انتقال الإقلاع والدخول (main.js: brandHandoff): الشعار عنصر مشترك يطير من شاشة الإقلاع أو لوحة الدخول
   إلى الرأس أو الشريط الجانبي. شعار واحد ظاهر في كل حالة: الشريط الجانبي من 1024 والشريط العلوي دونه */
html.vt-brand :is(.splash.is-intro,.splash.is-shown) .splash__mark,
html.vt-brand .auth__logo,
html.vt-brand .app-brand__mk,
html.vt-brand .side .side__logo,
html.vt-brand .topbar__mark{view-transition-name:brand-mark}
::view-transition-group(brand-mark){z-index:var(--z-toast);animation-duration:var(--d-leap);animation-timing-function:var(--ease-leap)} /* فوق لقطة الرأس الذي يحويه */
/* ثلاث معيّنات «ث» تتنفس بالتتابع: لأزرار الانشغال ومؤشرات التحميل الصغيرة */
@keyframes trio{
  0%,100%{background:color-mix(in srgb,var(--trio-c) 26%,transparent);box-shadow:8.49px -8.49px 0 color-mix(in srgb,var(--trio-c) 26%,transparent),-.71px -9.19px 0 color-mix(in srgb,var(--trio-c) 26%,transparent)}
  18%{background:color-mix(in srgb,var(--trio-c) 26%,transparent);box-shadow:8.49px -8.49px 0 var(--trio-c),-.71px -9.19px 0 color-mix(in srgb,var(--trio-c) 26%,transparent)}
  40%{background:color-mix(in srgb,var(--trio-c) 26%,transparent);box-shadow:8.49px -8.49px 0 color-mix(in srgb,var(--trio-c) 26%,transparent),-.71px -9.19px 0 var(--trio-c)}
  62%{background:var(--trio-c);box-shadow:8.49px -8.49px 0 color-mix(in srgb,var(--trio-c) 26%,transparent),-.71px -9.19px 0 color-mix(in srgb,var(--trio-c) 26%,transparent)}
}

/* دخول متدرج: العنصر يحمل --i لترتيبه */
.rise{animation:rise var(--d3) var(--ease) backwards;animation-delay:calc(var(--i,0) * var(--stagger))}
.swap{animation:rise var(--d3) var(--ease) backwards}
.reveal{opacity:0;transform:translateY(var(--rise-y));transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.reveal.in{opacity:1;transform:none}
/* دخول تلقائي لأبناء أي قسم يُرسم (حتى 7 عناصر) */
.view-in > *{animation:rise var(--d3) var(--ease) backwards}
.view-in > :nth-child(2){animation-delay:calc(1 * var(--stagger))}
.view-in > :nth-child(3){animation-delay:calc(2 * var(--stagger))}
.view-in > :nth-child(4){animation-delay:calc(3 * var(--stagger))}
.view-in > :nth-child(5){animation-delay:calc(4 * var(--stagger))}
.view-in > :nth-child(6){animation-delay:calc(5 * var(--stagger))}
.view-in > :nth-child(n+7){animation-delay:calc(6 * var(--stagger))}
/* ui.js: stagger(el) يضع --i على الأبناء (حتى 8 خطوات) لقوائم وبطاقات تدخل متتابعة */
.stagger-in > *{animation:rise var(--d3) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * var(--stagger))}
.flash{animation:flash 1600ms var(--ease) 1}
@keyframes flash{0%{box-shadow:inset 0 0 0 999px var(--brand-soft)}100%{box-shadow:inset 0 0 0 999px transparent}}

/* ---- الانتقال بين الشاشات (View Transitions، مع بديل) ----
   الاتجاه يراعي RTL: التقدّم (forward) يُدخل الشاشة الجديدة من الحافة اليسرى ويُخرج القديمة يمينًا،
   والرجوع (back) عكسه. بلا اتجاه: تلاشٍ متقاطع مع صعود خفيف. ui.js: withTransition(fn, { dir }) */
::view-transition-old(root){animation:vtFadeOut var(--d-vt-out) var(--ease) both}
::view-transition-new(root){animation:vtFadeIn var(--d-vt-in) var(--ease-out) both}
html[data-vt="forward"]::view-transition-old(root){animation:vtOutRight var(--d-vt-out) var(--ease) both}
html[data-vt="forward"]::view-transition-new(root){animation:vtInLeft var(--d-vt-in) var(--ease-out) both}
html[data-vt="back"]::view-transition-old(root){animation:vtOutLeft var(--d-vt-out) var(--ease) both}
html[data-vt="back"]::view-transition-new(root){animation:vtInRight var(--d-vt-in) var(--ease-out) both}
@keyframes vtFadeOut{to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0;transform:translateY(6px)}}
@keyframes vtInLeft{from{opacity:0;transform:translateX(calc(-1 * var(--vt-x)))}}
@keyframes vtInRight{from{opacity:0;transform:translateX(var(--vt-x))}}
@keyframes vtOutRight{to{opacity:0;transform:translateX(calc(var(--vt-x) * .5))}}
@keyframes vtOutLeft{to{opacity:0;transform:translateX(calc(-.5 * var(--vt-x)))}}
/* البديل حين لا يدعم المتصفح View Transitions: يتحرك العنصر الجديد وحده بالمنحنى نفسه */
.vt-in{animation:vtFadeIn var(--d-vt-in) var(--ease-out) both}
.vt-in--forward{animation-name:vtInLeft}
.vt-in--back{animation-name:vtInRight}
/* تبديل المظهر بدائرة تنطلق من الزر */
html.theme-vt::view-transition-old(root){animation:none}
html.theme-vt::view-transition-new(root){animation:themeIn 620ms var(--ease-io) both}
@keyframes themeIn{from{clip-path:circle(0 at var(--tx,50%) var(--ty,0))}to{clip-path:circle(150vmax at var(--tx,50%) var(--ty,0))}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  /* المؤشرات تبقى حيّة لكن بلا حركة مكانية: تلاشٍ هادئ فقط */
  .skel{animation-duration:1.4s!important;animation-iteration-count:infinite!important}
  .btn.is-busy::after,.spin__c::after{animation-duration:1.8s!important;animation-iteration-count:infinite!important}
  .wmark.is-loading .w-dot{animation:wBreathStill 2.4s var(--ease) infinite!important}
}
@keyframes wBreathStill{0%,100%{opacity:.35}50%{opacity:1}}

/* ============ 15. ألوان النظام عالية التباين ============ */
@media (forced-colors:active){
  .btn,.chip,.fchip,.segc button,.remc__b,.input,.textarea,.select,.check,.opt{border:1px solid ButtonText}
  .sw{border:1px solid ButtonText}.sw i{background:ButtonText}.sw[aria-checked="true"]{background:Highlight}
  [aria-pressed="true"],[aria-selected="true"],[aria-current="page"]{outline:2px solid Highlight;outline-offset:1px}
  .bar i,.rib__fill,.progress i{background:Highlight}
  .icon{forced-color-adjust:auto}
}

/* ============ 16. التجاوب ============ */
@media (max-width:51.25rem){ /* 820 */
  /* النوافذ تصبح أوراقًا من الأسفل */
  .dlg,.dlg.dlg--lg{inline-size:100%;max-inline-size:100%;margin:auto 0 0;padding:0}
  .dlg .dlg__in{border-radius:var(--r-xl) var(--r-xl) 0 0;max-block-size:92dvh;padding-block-end:calc(var(--sp-5) + env(safe-area-inset-bottom,0px))}
  .dlg[open] .dlg__in{animation:sheetUp var(--d-sheet) var(--ease-sheet) both}
  .dlg.is-closing .dlg__in{animation:sheetDown var(--d2) var(--ease) both}
  .dlg .dlg__in > .dlg__a{position:sticky;inset-block-end:calc(-1 * (var(--sp-5) + env(safe-area-inset-bottom,0px)));background:var(--surface);margin:14px calc(-1 * var(--sp-6)) 0;padding:var(--sp-3) var(--sp-6) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));border-block-start:1px solid var(--line)}
  .dlg .dlg__in > .dlg__a .btn{flex:1}
  .menu .dlg__in > .dlg__a{position:static}
  /* الجداول تصبح بطاقات: كل خلية تحمل data-l */
  .tbl:not(.tbl--scroll){min-inline-size:0}
  .tbl:not(.tbl--scroll) thead{display:none}
  .tbl:not(.tbl--scroll),.tbl:not(.tbl--scroll) tbody,.tbl:not(.tbl--scroll) tr,.tbl:not(.tbl--scroll) td{display:block;inline-size:100%}
  .tbl:not(.tbl--scroll) tbody tr{padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line)}
  .tbl:not(.tbl--scroll) tbody tr:last-child{border-block-end:0}
  .tbl:not(.tbl--scroll) td{border:0;padding:var(--sp-1) 0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--sp-1) var(--sp-2);white-space:normal;text-align:end}
  /* التسمية في البداية وكل المحتوى مجموع في النهاية (لا يتوزع التاريخ والوقت على عرض البطاقة) */
  .tbl:not(.tbl--scroll) td::before{content:attr(data-l);font-size:var(--fs-xs);color:var(--ink-3);font-weight:var(--fw-sb);text-align:start;flex-shrink:0;margin-inline-end:auto;padding-inline-end:var(--sp-2)}
  .tbl:not(.tbl--scroll) td.c-name,.tbl:not(.tbl--scroll) td:first-child{text-align:start}
  .tbl:not(.tbl--scroll) td.c-name::before,.tbl:not(.tbl--scroll) td.c-act::before,.tbl:not(.tbl--scroll) td:not([data-l])::before{content:none}
  .tbl:not(.tbl--scroll) td.c-name,.tbl:not(.tbl--scroll) td:not([data-l]){justify-content:flex-start}
  .tbl:not(.tbl--scroll) td.c-act{justify-content:flex-start;padding-block-start:var(--sp-2)}
  .tbl:not(.tbl--scroll) .empty-row td{justify-content:center}
  .tbl:not(.tbl--scroll) td.c-act:not(:has(button,a,input,select)){display:none} /* لا سطر فارغ في بطاقة بلا إجراءات */
  .funnel{grid-template-columns:repeat(2,1fr)}
  .fc:nth-child(3){border-inline-start:0}
  .fc:nth-child(n+3){border-block-start:1px solid var(--line)}
  .band > div + div{padding-inline-start:var(--sp-3)}
  .band b{font-size:var(--fs-xl)}
  .band > div > span{font-size:var(--fs-xs)}
  .band--4{grid-template-columns:repeat(2,1fr)}
  .band--4 > div + div{border-inline-start:0;padding-inline-start:0}
  .band--4 > div:nth-child(2n){border-inline-start:1px solid var(--line);padding-inline-start:var(--sp-4)}
  .band--4 > div:nth-child(n+3){border-block-start:1px solid var(--line)}
  .ov{grid-template-columns:1fr}
  .chans{grid-template-columns:1fr}
  .qrow{grid-template-columns:1fr auto}
  .qrow .q-k{grid-column:1/-1}
  .search{flex:1 1 100%}
  .tools{gap:var(--sp-3)}
}
/* الأجهزة اللوحية العمودية (600 - 820): البطاقة شبكة من أزواج «تسمية فوق قيمة» بدل سطور تمتد بعرض الشاشة،
   فتقصر مسافة العين بين التسمية وقيمتها. الاسم والإجراءات بعرض البطاقة كاملًا */
@media (min-width:37.5rem) and (max-width:51.25rem){
  .tbl:not(.tbl--scroll):not(.pp-tbl):not(.pp-itbl) tbody tr:not(.empty-row){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(108px,100%),1fr));gap:var(--sp-4) var(--sp-5);padding:var(--sp-5)}
  .tbl:not(.tbl--scroll):not(.pp-tbl):not(.pp-itbl) tbody tr:not(.empty-row) > td{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--sp-1);text-align:start;padding:0;min-inline-size:0}
  .tbl:not(.tbl--scroll):not(.pp-tbl):not(.pp-itbl) tbody tr:not(.empty-row) > td::before{margin:0;padding:0}
  .tbl:not(.tbl--scroll):not(.pp-tbl):not(.pp-itbl) tbody tr:not(.empty-row) > :is(td.c-name,td:first-child,td.c-act,td:not([data-l])){grid-column:1/-1}
  .tbl:not(.tbl--scroll):not(.pp-tbl):not(.pp-itbl) tbody tr:not(.empty-row) > td:first-child{padding-block-end:var(--sp-3);border-block-end:1px solid var(--line)}
  .tbl:not(.tbl--scroll):not(.pp-tbl):not(.pp-itbl) tbody tr:not(.empty-row) > td.c-act{flex-direction:row;padding-block-start:var(--sp-1)}
}
@media (max-width:30rem){ /* 480 */
  .dist li{grid-template-columns:minmax(0,1fr) 70px 34px;gap:var(--sp-2)}
  .abars li{grid-template-columns:minmax(0,1fr) 70px 44px;gap:var(--sp-2)}
  .drw__h,.drw__b{padding-inline:var(--sp-4)}
  .dlg__in{padding:var(--sp-5)}
  .dlg .dlg__in > .dlg__a{margin-inline:calc(-1 * var(--sp-5));padding-inline:var(--sp-5)}
  .mh h1,.mh h2{font-size:var(--fs-xl)}
}
/* لمس بالإصبع: كل هدف قابل للنقر 44px على الأقل */
@media (pointer:coarse){.btn--sm,.fchip,.chip--btn{min-block-size:var(--tap)}}
@media print{
  .sim-banner,.toast,.skip-link,.tabbar,.side,.topbar,dialog{display:none!important}
  body.has-cert{overflow:visible}
  body.has-cert > :not(.cert-layer):not(svg){display:none!important}
  .cert-layer{position:static;overflow:visible;background:none}
  body{background:var(--white);color:var(--ink-solid)}
}