/* رصد — الهوية الجديدة: المتغيرات والأساس (RASD_DESIGN_SYSTEM.md الأقسام 2–6). القيم حرفياً من النموذج v4. */
:root{
  --page:#FFFFFF; --inset:#F4F6FA; --card:#FFFFFF;
  --ink:#14284B; --ink-2:#47556F; --ink-3:#626E85;
  --line:rgba(20,40,75,.09); --line-2:rgba(20,40,75,.16);
  --blue:#1E3C72; --blue-2:#2A5298; --blue-tint:#ECF1FA;
  --gold:#C9A227; --gold-2:#F1D77A; --gold-ink:#7D6311; --gold-tint:#FBF5E1;
  --seal:#B3261E; --seal-tint:#FCECEA;
  --green:#2E6B55; --green-tint:#E7F2EC;
  --ring:0 0 0 1px rgba(20,40,75,.07),0 1px 2px rgba(20,40,75,.05),0 6px 18px -8px rgba(20,40,75,.12);
  --lift:0 0 0 1px rgba(20,40,75,.08),0 2px 4px rgba(20,40,75,.05),0 16px 32px -14px rgba(20,40,75,.22);
  --ease:cubic-bezier(.23,1,.32,1);
  --f:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  /* أدوات النماذج والتنبيهات وأزرارها (الملحق، البند 4). --on-blue و--on-seal لون النص فوق --blue و--seal في الوضعين */
  --field:#EEF2F8; --field-h:#E7ECF6; --field-edge:rgba(20,40,75,.07); --focus:rgba(30,60,114,.16);
  --on-blue:#FFFFFF; --on-seal:#FFFFFF;
  --btn-grad:linear-gradient(135deg,#2A5298,#1E3C72);
  --btn-glow:0 10px 22px -12px rgba(30,60,114,.75),inset 0 1px 0 rgba(255,255,255,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--page:#0E1524;--inset:#151E31;--card:#131B2C;--ink:#E8ECF5;--ink-2:#B3BDD1;--ink-3:#8590A8;--line:rgba(232,236,245,.08);--line-2:rgba(232,236,245,.15);--blue:#8FB0EC;--blue-2:#A9C2F2;--blue-tint:#1A2742;--gold:#E3BF4A;--gold-ink:#E9CB6A;--gold-tint:#2A2512;--seal:#F08A80;--seal-tint:#33191A;--green:#7CC2A4;--green-tint:#14271F;--ring:0 0 0 1px rgba(232,236,245,.08);--lift:0 0 0 1px rgba(232,236,245,.14);--field:#0D1424;--field-h:#111A2D;--field-edge:rgba(232,236,245,.07);--focus:rgba(143,176,236,.22);--on-blue:#0E1524;--on-seal:#2A0F0D;--btn-grad:linear-gradient(135deg,#A9C2F2,#8FB0EC);--btn-glow:0 10px 22px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.35)}
}
:root[data-theme="dark"]{--page:#0E1524;--inset:#151E31;--card:#131B2C;--ink:#E8ECF5;--ink-2:#B3BDD1;--ink-3:#8590A8;--line:rgba(232,236,245,.08);--line-2:rgba(232,236,245,.15);--blue:#8FB0EC;--blue-2:#A9C2F2;--blue-tint:#1A2742;--gold:#E3BF4A;--gold-ink:#E9CB6A;--gold-tint:#2A2512;--seal:#F08A80;--seal-tint:#33191A;--green:#7CC2A4;--green-tint:#14271F;--ring:0 0 0 1px rgba(232,236,245,.08);--lift:0 0 0 1px rgba(232,236,245,.14);--field:#0D1424;--field-h:#111A2D;--field-edge:rgba(232,236,245,.07);--focus:rgba(143,176,236,.22);--on-blue:#0E1524;--on-seal:#2A0F0D;--btn-grad:linear-gradient(135deg,#A9C2F2,#8FB0EC);--btn-glow:0 10px 22px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.35)}

/* الأساس */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
/* حجم الخط (زر «حجم الخط»): كل أحجام النص بـ rem، فتغيير حجم الجذر يكبّرها معاً دون تغيير التخطيط.
   --ts للقيم المحسوبة بـ vw. الصنف يُطبَّق من <head> قبل الرسم (rasd_text_size). */
html{font-size:100%;--ts:1}
html.ts-l{font-size:115%;--ts:1.15}
html.ts-xl{font-size:130%;--ts:1.3}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px 140px}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.credit{text-align:center;font-size:.8125rem;color:var(--ink-3);margin:30px 0 0}
.credit+.credit{margin-top:4px}

/* الأيقونات: ملف SVG واحد عبر <use>. طبقة التعبئة تُضبط بالمتغير --ic-d لأنها داخل شجرة <use> */
.ic{width:22px;height:22px;flex:none;overflow:visible;--ic-d:.16}

/* التنبيه المنبثق */
#toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px) scale(.96);opacity:0;z-index:60;background:var(--ink);color:var(--page);font-size:.875rem;padding:10px 18px;border-radius:12px;transition:opacity .25s var(--ease),transform .35s var(--ease);pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* الظهور عند التمرير */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .seal-star path,.seal-star circle{stroke-dashoffset:0}
}