/* لوحة وقف ميراث — مخطّطٌ ليزريّ متّجهيّ لأرض الوقف بهويّة ميراث وتأصيل.
   كحليّ الغسق، ذهب القطع المكتملة، خطوطٌ ليزريّة بيضاء، وأرقامٌ بلونٍ واحدٍ مصمت متوهّجة:
   أبيض #FFFFFF على الداكن، وكحليٌّ عميق على الشاشة البيضاء — بلا حدٍّ ولا شطفٍ ولا ظلٍّ ساقطٍ ولا تدرّجٍ ولا بُعدٍ ثالث.
   كلّ ما يُرى متّجهات (SVG ونصٌّ حيّ) أو صورٌ بدقّةٍ أصليّةٍ تكفي ٣٨٤٠×٢١٦٠. */
@font-face { font-family: Fatimah; src: url(../assets/fonts/itfFatimahArabic-Light.otf) format('opentype'); font-weight: 300; font-display: block; }
@font-face { font-family: Fatimah; src: url(../assets/fonts/itfFatimahArabic-Regular.otf) format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: Fatimah; src: url(../assets/fonts/itfFatimahArabic-Medium.otf) format('opentype'); font-weight: 500; font-display: block; }
@font-face { font-family: Fatimah; src: url(../assets/fonts/itfFatimahArabic-Bold.otf) format('opentype'); font-weight: 700; font-display: block; }
@font-face { font-family: Fatimah; src: url(../assets/fonts/itfFatimahArabic-Black.otf) format('opentype'); font-weight: 900; font-display: block; }

:root {
  /* هويّة ميراث (من الملفّ التعريفيّ) وتأصيل (من الشعار والورق الرسميّ) */
  --m-ink-top: #18233B; --m-ink-bot: #203053;
  --m-navy: #314465; --m-navy-band: #283445; --m-navy-soft: #667BA6; --navy-deep: #1E2D4D;
  --m-brown: #54432F; --m-tan: #C09661; --m-sand: #E0D2C8; --m-taupe: #AC9F8C;
  --t-navy: #21496B; --t-sand: #C29365;
  /* ألوان تأصيل للسمة الفاتحة (قرار المالك): كحليّان ورمليّ */
  --tl-navy: #1B3347; --tl-navy2: #30506E; --tl-sand: #D2AE85;
  --paper: #FFFFFF; --ink: #040404; --ink2: #5D6168; --ink2-light: #B9BCC1; --rule: #E6E6E6;
  /* الأدوار */
  --bg: #121A2C; --fg: #FFFFFF; --fg2: rgba(255, 255, 255, 0.72); --accent: var(--m-tan);
  --t: 350ms;
  /* سلّم الخطوط الوحيد (بكسل اللوحة ١٩٢٠×١٠٨٠): كلّ نصٍّ في اللوحة من هذه المقاسات */
  --fs-xs: 18px; --fs-s: 22px; --fs-m: 28px; --fs-l: 36px; --fs-xl: 48px; --fs-2xl: 64px; --fs-hero: 112px; --fs-big: 200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
body.light { --bg: #FFFFFF; --fg: var(--tl-navy); --fg2: var(--tl-navy2); }
body.slow { --t: 1000ms; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); transition: background var(--t); }
body {
  font-family: Fatimah, 'Segoe UI', Tahoma, sans-serif; color: var(--fg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; font-synthesis: none;
  cursor: none; user-select: none;
}
body.staff-open { cursor: default; }

/* ── الأرقام المتوهّجة: لونٌ واحدٌ مصمت، وتوهّجٌ ناعم بلونه نفسه كاللافتات المضيئة ──
   التوهّج ظلٌّ نصّيّ (text-shadow) يُرسم خلف الحرف، فيبقى الحرف نفسه حادًّا تمامًا — لا مرشّحات (filter) على النصّ.
   --g1 نصف قطر التوهّج القريب، و--g2 البعيد؛ يُضبطان لكلّ حجم. التوهّج ثابتٌ تمامًا في السكون. */
/* --flare (٠←١←٠) نبضة الإضاءة لحظة التبرّع: نبضةٌ واحدةٌ ناعمة ١٫٢ ث (دخولٌ وخروجٌ متدرّجان) ثمّ سكون.
   مسجَّلةٌ رقمًا موروثًا فتتحرّك، ويرثها كلّ رقمٍ متوهّجٍ داخل العنصر المضاء (.flare). */
@property --flare { syntax: '<number>'; inherits: true; initial-value: 0; }
.glow { color: #FFFFFF;
  text-shadow: 0 0 calc(var(--g1, 2.5px) * (1 + var(--flare) * 1.4)) rgba(255, 255, 255, calc(0.50 + var(--flare) * 0.40)),
    0 0 calc(var(--g2, 11px) * (1 + var(--flare) * 1.1)) rgba(255, 255, 255, calc(0.30 + var(--flare) * 0.40)),
    0 0 calc(var(--g2, 11px) * (2.4 + var(--flare) * 1.8)) rgba(255, 255, 255, calc(0.13 + var(--flare) * 0.30)); }
/* على الأبيض: توهّجٌ كحليٌّ قريبٌ خفيف (هالةٌ لا ظلٌّ متّسخ)، ويتّسع قليلًا مع نبضة التبرّع */
.glow-n { color: var(--tl-navy);
  text-shadow: 0 0 calc(var(--g1, 2.5px) * (1 + var(--flare) * 1.2)) rgba(48, 80, 110, calc(0.16 + var(--flare) * 0.16)),
    0 0 calc(var(--g2, 12px) * (0.8 + var(--flare) * 0.8)) rgba(48, 80, 110, calc(0.07 + var(--flare) * 0.10)); }
/* العناوين تُضاء معها بظلٍّ ضوئيٍّ ناعم (لا شيء حين --flare = ٠) */
.flt { text-shadow: 0 0 calc(var(--flare) * 3px) rgba(255, 255, 255, calc(var(--flare) * 0.7)), 0 0 calc(var(--flare) * 14px) rgba(255, 255, 255, calc(var(--flare) * 0.45)); }
.flare { animation: flare 1.2s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes flare { 0% { --flare: 0; } 42% { --flare: 1; } 100% { --flare: 0; } }
@media (prefers-reduced-motion: reduce) { .flare { animation-duration: 0.8s; } }
.glow .rs, .glow-n .rs { color: inherit; }
/* الفاصلة العشريّة «٫»: في فاطمة تتطابق مع فاصل الآلاف «٬» (كلاهما فاصلة)، فتُرسم شرطةً مائلةً على السطر كالشكل المعياريّ للفاصلة العشريّة.
   الحرف يبقى في النصّ (لا يتغيّر ترتيب الأرقام ولا المعنى) ويُخفى، والشرطة قناعٌ متّجهيّ بلون الرقم نفسه.
   لا عناصر زائفة (::after) ولا inline-block هنا: كلاهما يقطع الرقم في خوارزميّة الاتّجاه فتنقلب منازله. */
.dp { display: inline !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font: inherit !important;
  -webkit-text-fill-color: transparent; text-shadow: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30'%3E%3Cpath d='M7.8 0H12L4.2 30H0z'/%3E%3C/svg%3E") no-repeat 50% 0.66em / 0.26em 0.34em;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30'%3E%3Cpath d='M7.8 0H12L4.2 30H0z'/%3E%3C/svg%3E") no-repeat 50% 0.66em / 0.26em 0.34em; }
/* رمز الريال قناعٌ لا نصّ: توهّجه الثابت ظلٌّ ناعم على الرمز وحده (لا يُحرَّك) */
.glow .rs { filter: drop-shadow(0 0 var(--g1, 2.5px) rgba(255, 255, 255, 0.5)) drop-shadow(0 0 var(--g2, 11px) rgba(255, 255, 255, 0.28)); }
.glow-n .rs { filter: drop-shadow(0 0 var(--g1, 2.5px) rgba(27, 51, 71, 0.2)); }

/* رمز الريال (قناعٌ يأخذ لون النصّ، ٣٢٤×٣٦٠ يكفي حتى ٢٠٠ بكسل على ٤K) — يقع يسار الرقم */
.rs { display: inline-block; width: 0.54em; height: 0.6em; background: currentColor; vertical-align: baseline; flex: none;
  -webkit-mask: url(../assets/mirath/glyph-riyal-mask.png) center / contain no-repeat; mask: url(../assets/mirath/glyph-riyal-mask.png) center / contain no-repeat; }
/* علامة ◂ من الملفّ التعريفيّ: مثلّثٌ متّجهيّ */
.mk { display: inline-block; width: 0.46em; height: 0.53em; background: currentColor; flex: none; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.mk.flip { transform: scaleX(-1); }

/* ── المقدّمة ── */
#intro { position: fixed; inset: 0; z-index: 5; background: var(--m-ink-top); transition: opacity 600ms linear; }
#intro img, #intro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#introLast { opacity: 0; }
#intro.ended #introLast { opacity: 1; }
#intro.ended video { opacity: 0; }
#intro.gone { opacity: 0; pointer-events: none; }
body.intro-mirath #intro { background: linear-gradient(180deg, #121A2C, var(--m-ink-bot)); }
body.intro-mirath #intro img, body.intro-mirath #intro video { display: none; }
body.intro-mirath #lockup { left: 660px; top: 330px; width: 600px; }
#cut { position: fixed; inset: 0; z-index: 4; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
#cut.on { opacity: 1; }

/* ── اللوحة ١٩٢٠×١٠٨٠ تُحجَّم لتناسب الشاشة (تحويلٌ واحد؛ النصّ والمتّجهات تُرسم بدقّة الجهاز) ── */
#stage { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; z-index: 6; pointer-events: none; }
#stage * { pointer-events: none; }
#staff, #staff * { pointer-events: auto; }

#lockup { position: absolute; left: 532px; top: 146px; width: 855px; height: auto; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; }
#diamonds { position: absolute; left: 0; top: 621px; width: 1920px; height: 50px; opacity: 0; transition: opacity 400ms ease; }
#diamonds .pair { position: absolute; top: 0; width: 101px; height: 50px; margin-left: -50px; transition: transform 900ms cubic-bezier(.65,0,.35,1), opacity 900ms ease; }
#diamonds .pair:nth-child(1) { left: 551px; } #diamonds .pair:nth-child(2) { left: 755px; } #diamonds .pair:nth-child(3) { left: 959px; }
#diamonds .pair:nth-child(4) { left: 1163px; } #diamonds .pair:nth-child(5) { left: 1366px; }
#diamonds i { position: absolute; top: 7px; width: 35px; height: 35px; transform: rotate(45deg); border-radius: 3px; background: #3A4762; transition: background 500ms ease, box-shadow 500ms ease; }
#diamonds i:first-child { left: 8px; } #diamonds i:last-child { left: 58px; }
#diamonds .pair.on i { background: var(--m-tan); }
#diamonds.show { opacity: 1; }
#diamonds .pair.wait i { opacity: 0.6; }   /* ثابتٌ بلا نبض */

/* ═════════ أرض الوقف الحيّة (js/land3d.js: WebGL بتنعيمٍ متعدّد العيّنات وبدقّة الجهاز) ═════════ */
#land { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: block; transition: opacity 900ms ease; }
/* ستائر ثابتة (خارج المشهد المتحرّك) تُقرأ عليها النصوص */
#scrim { position: absolute; inset: 0; transition: opacity 900ms ease; }
#scrim i { position: absolute; display: block; }
#scrim .s-top { left: 0; right: 0; top: 0; height: 270px; background: linear-gradient(180deg, rgba(14, 21, 36, 0.92), rgba(14, 21, 36, 0.6) 48%, rgba(14, 21, 36, 0));
  /* وسط الترويسة (النقش الباهت وحده) أخفّ ستارةً فيُرى الطريق الخلفيّ والمستودعات خلف الأرض */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 610px, rgba(0, 0, 0, 0.42) 760px, rgba(0, 0, 0, 0.42) 1120px, #000 1250px);
  mask-image: linear-gradient(90deg, #000 0, #000 610px, rgba(0, 0, 0, 0.42) 760px, rgba(0, 0, 0, 0.42) 1120px, #000 1250px); }
/* العمود الأيمن: حافّةٌ طويلةٌ متدرّجة (لا حدود حادّة)، وكثافةٌ ≥٠٫٨٢ حيث يبدأ النصّ (x≈1468) */
#scrim .s-right { top: 0; bottom: 0; left: 1160px; right: 0; background: linear-gradient(90deg, rgba(14, 21, 36, 0) 0, rgba(14, 21, 36, 0.14) 90px, rgba(14, 21, 36, 0.38) 170px,
  rgba(14, 21, 36, 0.64) 230px, rgba(14, 21, 36, 0.88) 285px, rgba(14, 21, 36, 0.94) 360px, rgba(14, 21, 36, 0.95) 100%); }
/* حين تدخل الأرض تحت العمود الأيمن (دفع الكاميرا أو لقطةٌ جانبيّة) تشتدّ ستارته بالشفافيّة وحدها */
#scrim .s-push { top: 0; bottom: 0; left: 1100px; right: 0; opacity: 0; transition: opacity 900ms ease;
  background: linear-gradient(90deg, rgba(14, 21, 36, 0) 0, rgba(14, 21, 36, 0.5) 200px, rgba(14, 21, 36, 0.9) 330px, rgba(14, 21, 36, 0.97) 100%); }
body.push #scrim .s-push { opacity: 1; }
#scrim .s-left { top: 0; bottom: 0; left: 0; width: 600px; background: linear-gradient(90deg, rgba(14, 21, 36, 0.5), rgba(14, 21, 36, 0.2) 72%, rgba(14, 21, 36, 0)); }
#scrim .s-bot { left: 0; right: 0; bottom: 0; height: 240px; background: linear-gradient(0deg, rgba(14, 21, 36, 0.94), rgba(14, 21, 36, 0.55) 52%, rgba(14, 21, 36, 0)); }
#scrim .s-vig { inset: 0; background: radial-gradient(ellipse 72% 78% at 51% 47%, rgba(10, 16, 28, 0) 58%, rgba(10, 16, 28, 0.34)); }
.phase-intro #scrim { opacity: 0; }

/* ═════════ المخطّط الليزريّ المتّجهيّ (js/plan.js) — بديلٌ إن تعذّر WebGL ═════════ */
#plan { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: block; overflow: hidden; transition: opacity 900ms ease;
  /* ألوان المحيط المرسوم: غسقٌ كحليّ بهويّة ميراث (تتجاوز ألوان site-base.svg الاحتياطيّة) */
  --site-ground-far: #182033; --site-ground-dirt: #1F2430; --site-ground-pad: #1D2536; --site-ground-alley: #121826;
  --site-roof: #26344F; --site-ridge: #34466A; --site-facade: #19223A; --site-side: #212D47;
  --site-road-back: #1A2131; --site-road-front: #111725; --site-curb: #34415F; --site-lane: #2A3653;
  --site-roof-main: #2C3D5E; --site-corr: #34486D; --site-ridge-main: #4A5F88; --site-parapet: #374A6E;
  --site-side-main: #33456A; --site-side-lit: #3F5379; --site-skylight: #46608C; --site-eave-hi: #5E739C;
  --site-wall-face: #33445F; --site-wall-cap: #6D80A6; --site-wall-post: #44567A; --site-fence: #34415F;
  --site-plot-curb: #3B3328; --site-lamp: #F1E9E2;
  --plan-gold-back: #A47C4B; --plan-gold-front: #CAA16A; --plan-soil-back: #2B2620; --plan-soil-front: #3D352C; --plan-scrim: #0F1626;
}
body.light #plan { opacity: 0; transition-duration: var(--t); }
#plan .plot-curb { fill: #3B3328; }
#plan .soil-tex .tex-a { fill: none; stroke: #5A4E40; stroke-width: 1.6; opacity: 0.35; stroke-linecap: round; }
#plan .soil-tex .tex-b { fill: none; stroke: #0E0C0A; stroke-width: 2.4; opacity: 0.35; stroke-linecap: round; }
#plan .soil-tex .tex-dot { fill: #4C4236; opacity: 0.32; }
/* المتاح داكن، والمكتمل ذهبيّ (الذهب طبقةٌ فوق الخليّة)، والباقي (ليس من الـ١٬٠٤٨) ترابٌ بلا صبغة */
#plan .cell { fill: #0B0D14; fill-opacity: 0.30; stroke: none; }
#plan .cell.done, #plan .cell.part { fill-opacity: 0.34; }
#plan .goldf { fill-opacity: 0.93; }
#plan .gold-hi { fill: #F7E7C8; opacity: 0; mix-blend-mode: screen; }
#plan .pulse-fill { fill: #FFFFFF; opacity: 0; }
/* الليزر: أبيض رفيعٌ بسماكةٍ ثابتةٍ على الشاشة (تضبطها الكاميرا عبر --lw-*) وتوهّجٍ من المرشّح */
#plan .lz { fill: none; stroke: #FFFFFF; stroke-linejoin: round; stroke-linecap: round; }
#plan .lz-outer { stroke-width: var(--lw-o, 3); }
#plan .lz-grid { stroke-width: var(--lw-g, 1.8); stroke-opacity: 0.92; }
#plan .lz-dash { stroke-width: var(--lw-g, 1.8); stroke-dasharray: var(--lw-d, 12 7); stroke-linecap: butt; stroke-opacity: 0.85; }
#plan .lz-sweep { stroke-width: var(--lw-s, 4.6); }
#plan .lz-flash { stroke-width: var(--lw-s, 4.6); opacity: 0; }
#plan .lz-pulse { stroke-width: var(--lw-o, 3); opacity: 0; }
#plan .level { stroke: #FFF4E0; stroke-width: var(--lw-g, 1.8); stroke-linecap: round; }
#plan #laser.lite .lz-outer { stroke-width: calc(var(--lw-o, 3) * 1.25); }
/* الأمتار الحقيقيّة: شبكةٌ أرفع من خطوط القطع (١٬٠٤٨ مربّعًا، كلٌّ منها مترٌ مربّع) */
#plan .mz { fill: none; stroke: #FFFFFF; stroke-width: var(--lw-m, 0.9); stroke-opacity: 0.30; stroke-linecap: butt; }
#plan .m-void { fill: #07090E; fill-opacity: 0.5; }
/* المتر الجاري: إطارٌ ليزريّ ذهبيّ فاتح يتنفّس */
#plan .lz-cur { stroke: #FFEFD2; stroke-width: var(--lw-g, 1.8); }
/* ضوء ما أضافه التبرّع بعينه، ثمّ يستقرّ ذهبًا */
#plan .don-hi { fill: #FFEDCB; }
/* أرقام القطع ومساحاتها: أبيضان متوهّجان (مرشّح numGlow) */
#plan .pn { fill: #FFFFFF; font-family: Fatimah, 'Segoe UI', sans-serif; font-weight: 900; text-anchor: middle; }
#plan .pa { fill: #FFFFFF; font-family: Fatimah, 'Segoe UI', sans-serif; font-weight: 500; text-anchor: middle; }

/* ── الواجهة ── */
#ui { position: absolute; inset: 0; }
.phase-intro #ui > * { opacity: 0; }
/* لا تحريك لمواضع النصوص: الظهور والاختفاء بالشفافيّة وحدها، والمواضع بالبكسل الصحيح */
#ui > * { transition: opacity 900ms ease; }

/* ── الترويسة: ميراث يمينًا (الشعار والحديث والشعار النصّيّ)، ونقش تأصيل باهتًا في الوسط، والساعة والإشراف يسارًا ── */
#hdr { position: absolute; top: 34px; right: 48px; left: 48px; height: 96px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 22px; position: relative; transition: opacity var(--t) ease; }
.brand .lk { height: 96px; width: auto; display: block; transition: opacity var(--t) ease; }
.brand .lk-c { position: absolute; right: 0; top: 50%; margin-top: -48px; opacity: 0; }
body.light .brand { opacity: 0; }
body.light .brand .lk-w { opacity: 0; }
body.light .brand .lk-c { opacity: 1; }
.bcol { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
/* شريط الحديث الممزّق (من غلاف الملفّ التعريفيّ) — الحوافّ قصٌّ متّجهيّ */
.ribbon { height: 42px; display: flex; align-items: center; padding: 0 20px;
  background: var(--m-tan) url(../assets/mirath/paper-white-tile-1024.jpg) center / 320px auto; background-blend-mode: multiply;
  clip-path: polygon(0% 10%, 4% 0%, 22% 7%, 41% 1%, 63% 8%, 82% 0%, 97% 5%, 100% 14%, 98.6% 38%, 100% 63%, 98.8% 86%, 100% 100%, 78% 93%, 54% 100%, 31% 92%, 9% 100%, 1% 92%, 1.6% 66%, 0% 41%, 1.4% 24%); }
.ribbon span { font-size: var(--fs-s); font-weight: 500; color: #1F1810; white-space: nowrap; line-height: 1; padding-top: 2px; }
.tagline { font-size: var(--fs-s); font-weight: 500; line-height: 1.4; color: var(--m-tan); white-space: nowrap; padding-right: 4px; }
.patband { position: absolute; left: 640px; right: 700px; top: 22px; height: 52px; display: flex; justify-content: center; color: #FFFFFF; opacity: 0.13; transition: opacity var(--t); }
.patband svg { width: 150px; height: 52px; flex: none; margin-left: -18px; }
body.light .patband { opacity: 0; }
.meta { display: flex; align-items: center; gap: 26px; transition: opacity var(--t) ease; }
body.light .meta { opacity: 0; }
.when { text-align: left; direction: rtl; }
#clock { font-size: var(--fs-l); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; --g1: 2px; --g2: 10px; }
#hijri { font-size: var(--fs-s); color: var(--fg2); margin-top: 2px; font-weight: 400; line-height: 1.4; }
.chip { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 22px; border-radius: 23px; background: rgba(33, 73, 107, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--fs-s); font-weight: 700; line-height: 1; color: #FFFFFF; white-space: nowrap; }
.chip .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--m-tan); flex: none; }
.chip.live .dot { box-shadow: 0 0 8px rgba(192, 150, 97, 0.7); }   /* ثابتٌ بلا نبض */
.chip.off, .chip.wait, .chip.manual { color: var(--fg2); }
.chip.off .dot { background: var(--ink2-light); }
.chip.demo { background: var(--m-tan); color: var(--m-ink-top); }
.chip.demo .dot { background: var(--m-ink-top); }
.endorse { display: flex; align-items: center; gap: 10px; }
.endorse span { font-size: var(--fs-xs); color: var(--ink2-light); font-weight: 400; }
.endorse img { height: 40px; width: auto; opacity: 0.85; display: block; }

/* ── العمود الأيمن: عنوان المرجع، فالمجموع، فالمساحة ومفتاح الألوان ── */
#side { position: absolute; right: 48px; top: 158px; width: 404px; text-align: right; }
#side > * { transition: opacity 500ms ease; }
#side .ttl .t1 { font-size: var(--fs-l); font-weight: 900; line-height: 1.3; color: #FFFFFF; white-space: nowrap; }
#side .ttl .t2 { font-size: var(--fs-2xl); font-weight: 900; line-height: 1.15; color: var(--m-tan); }
#side .dv { display: flex; align-items: center; gap: 12px; margin: 20px 0 18px; color: var(--m-tan); }
#side .dv i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(192, 150, 97, 0), rgba(192, 150, 97, 0.75)); }
#side .dv i:last-child { background: linear-gradient(90deg, rgba(192, 150, 97, 0.75), rgba(192, 150, 97, 0)); }
#side .dv svg { width: 42px; height: 20px; flex: none; }
#hero .cap { font-size: var(--fs-s); color: var(--fg2); font-weight: 500; line-height: 1.5; }
#hero .hnum { display: inline-flex; align-items: baseline; gap: 14px; margin-top: 18px; white-space: nowrap; --g1: 4px; --g2: 20px; }
#heroNum { font-size: var(--fs-hero); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
#hero .hnum .rs { font-size: 66px; }
/* صفر فاطمة مصغّرًا في المجموع والرقم الكبير، ومركزه على مركز الأرقام */
#heroNum .z0, #bigNum .z0 { font-size: 0.6em; position: relative; top: -0.2em; margin: 0 0.03em; }
#hero .bar { height: 8px; margin-top: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; direction: rtl; }
#barFill { height: 100%; width: 0; background: var(--m-tan); border-radius: 4px; transition: width 1.2s var(--ease); }
#hero .barrow { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; font-size: var(--fs-s); line-height: 1.4; color: var(--fg2); white-space: nowrap; }
#hero .barrow b { font-weight: 900; font-size: var(--fs-m); --g1: 2px; --g2: 9px; }
#hero .barrow .rs { font-size: 22px; }
.areab .al { font-size: var(--fs-s); color: var(--fg2); font-weight: 500; line-height: 1.5; }
.abox { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 8px; padding: 6px 26px 4px; border-radius: 10px;
  background: linear-gradient(180deg, #C69C64, #A57B49); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.abox b { font-size: var(--fs-xl); font-weight: 900; line-height: 1.2; --g1: 2px; --g2: 10px; }
.abox span { font-size: var(--fs-m); font-weight: 700; color: #FFFFFF; }
.legend { list-style: none; margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.legend li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-s); line-height: 1.4; font-weight: 500; color: #FFFFFF; white-space: nowrap; }
/* كلّ مربّعٍ في المفتاح مترٌ واحد كما يُرسم على الأرض */
.legend .sw { width: 28px; height: 28px; border-radius: 3px; flex: none; border: 1px solid rgba(255, 255, 255, 0.42); }
.legend .sw-done { background: #C9A06A; }
.legend .sw-part { background: linear-gradient(90deg, #C9A06A 0 46%, #332C26 46%); }
.legend .sw-avail { background: #332C26; }
.legend .sw-m { background: transparent; border: 2px solid #FFFFFF; box-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 16px rgba(255, 255, 255, 0.25); }
body.focus #side, body.card-on #side { opacity: 0; }
/* بطاقة المقطع أسفل العمود: يتنحّى مربّع المساحة ومفتاح الألوان */
body.clip-on #side .areab, body.clip-on #side .legend, body.clip-on #side .dv:nth-of-type(2) { opacity: 0; }

/* ── آخر التبرّعات: لوحٌ كحليّ زجاجيّ بخطٍّ ذهبيّ وأرقامٍ بيضاء متوهّجة ── */
#feed { position: absolute; left: 48px; top: 158px; width: 440px; max-height: 724px; padding: 0 24px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 32, 55, 0.92), rgba(14, 21, 37, 0.92)); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 2px solid var(--m-tan);
  color: #FFFFFF; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.38); overflow: hidden;
  transition: opacity 900ms ease, max-height 700ms var(--ease) !important; }
body.qr-on #feed { max-height: 382px; }   /* qr-card.js يضبطه على صفوفٍ كاملة فلا يُقطع سطر */
#feed .fh { height: 66px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
#feed .fh span { font-size: var(--fs-m); font-weight: 900; line-height: 1; padding-top: 6px; color: #FFFFFF; }
#feed .fhd { width: 46px; height: 22px; color: var(--m-tan); }
#feedList { list-style: none; -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent); mask-image: linear-gradient(180deg, #000 84%, transparent); }
#feedList li { padding: 14px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); animation: feedIn 900ms var(--ease) both; }
#feedList li:last-child { border-bottom: 0; }
@keyframes feedIn { from { opacity: 0; } }
#feedList .l1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#feedList .amt { display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--fs-l); font-weight: 900; line-height: 1.1; white-space: nowrap; --g1: 2px; --g2: 10px; }
#feedList .amt .rs { font-size: 30px; }
#feedList .ar { font-size: var(--fs-s); font-weight: 700; border: 1.5px solid rgba(192, 150, 97, 0.85); border-radius: 9px; padding: 2px 12px 0; white-space: nowrap; line-height: 1.4; --g1: 1.5px; --g2: 7px; }
#feedList .l2 { font-size: var(--fs-s); color: var(--fg2); font-weight: 400; margin-top: 6px; line-height: 1.5; }
#feedList .l2 b { font-weight: 700; --g1: 1.5px; --g2: 7px; }
#feedList .l3 { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.58); margin-top: 2px; line-height: 1.5; }
#feedList li.demo .amt { opacity: 0.82; }
#feedEmpty { padding-top: 12px; }
#feedEmpty p { font-size: var(--fs-s); color: var(--fg2); line-height: 1.5; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#feedEmpty .fe-lb { font-size: var(--fs-s); color: var(--fg2); margin-top: 16px; display: flex; align-items: center; gap: 8px; }
#feedEmpty .fe-lb .mk { color: var(--m-tan); }
#feedEmpty .fe-v { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 6px; --g1: 3px; --g2: 14px; }
#feedEmpty .fe-v b { font-size: var(--fs-xl); font-weight: 900; line-height: 1.05; }
#feedEmpty .fe-v .rs { font-size: 40px; }
#feedEmpty .fe-l { font-size: var(--fs-xs); line-height: 1.5; color: var(--fg2); margin-top: 8px; }
#feedEmpty .fe-l:empty { display: none; }
body.focus #feed, body.card-on #feed { opacity: 0; }

/* ── المؤشّرات: شريطٌ كحليّ بخطٍّ ذهبيّ وركنَي الورق الرسميّ لتأصيل، وأرقامٍ بيضاء متوهّجة ── */
#kpis { position: absolute; left: 48px; right: 48px; bottom: 60px; height: 128px; display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 14px 64px 8px; border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, rgba(23, 34, 58, 0.95), rgba(14, 21, 38, 0.96)); border-top: 2px solid rgba(192, 150, 97, 0.8);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
#kpis .kc { position: absolute; width: 58px; height: 58px; }
#kpis .kc-r { top: -2px; right: 0; transform: scaleX(-1); border-top-left-radius: 6px; }
#kpis .kc-l { bottom: 0; left: 0; transform: scaleX(-1); }
.kpi { position: relative; padding: 4px 22px 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.kpi + .kpi::before { content: ''; position: absolute; right: 0; top: 14px; bottom: 10px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); }
.kpi .lb { display: flex; align-items: center; gap: 10px; font-size: var(--fs-s); line-height: 1.4; color: rgba(255, 255, 255, calc(0.78 + var(--flare) * 0.22)); font-weight: 400; white-space: nowrap; }
.kpi .lb img { height: 32px; width: auto; display: block; flex: none; opacity: 0.85; }
.kpi .lb span { display: inline-flex; align-items: center; gap: 7px; }
.kpi .lb .mk { color: var(--m-tan); font-size: 19px; }
.kpi .vl { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; --g1: 2.5px; --g2: 11px; }
.kpi .vl b { font-size: var(--fs-xl); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .vl .rs { font-size: 42px; }
.kpi .vl small { font-size: var(--fs-s); font-weight: 400; }
body.focus #kpis, body.card-on #kpis { opacity: 0; }

/* ── كلّ تبرّع: السمة الفاتحة بألوان تأصيل — ورقٌ أبيضُ نقيّ، ونصٌّ كحليّ (#1B3347 / #30506E)، ولمساتٌ رمليّة (#D2AE85)،
   ومثلّثا ركن الورق الرسميّ بمعيّنيه، ونقش النقطة والخطّاف باهتًا. دون ١٬٠٠٠ ريال مرحلةٌ قصيرة (lt-small)، وما فوقها الاحتفال الكامل ── */
#paper { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; }
#ui > #paper { transition: opacity 650ms var(--ease); }
body.light #paper { opacity: 1; }
body.slow #ui > #paper { transition-duration: 1000ms; }
#paper .ppat { position: absolute; left: 300px; right: 300px; bottom: 70px; height: 70px; display: flex; justify-content: center; gap: 40px; color: var(--tl-sand); opacity: 0.32; }
#paper .ppat svg { width: 201px; height: 70px; flex: none; }
#paper .ppat svg:nth-child(2) { transform: scaleX(-1); }
#big { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; text-align: center; opacity: 0; color: var(--tl-navy); }
#ui > #big { transition: opacity 700ms ease; }
#big.show { opacity: 1; }
#big .bc { position: absolute; width: 230px; height: 230px; }
#big .bc-tl { left: 0; top: 0; }       /* كالورق الرسميّ: الكحليّ بمعيّنيه أعلى اليسار، والرمليّ في الركن المقابل */
#big .bc-br { right: 0; bottom: 0; }
/* شعار ميراث النصّيّ قناعًا بلون تأصيل الكحليّ (٢٤٦٧×٦٠٤ تكفي ٤K) */
#big .bwm { position: absolute; left: 50%; top: 136px; width: 302px; height: 74px; margin-left: -151px; background: var(--tl-navy);
  -webkit-mask: url(../assets/mirath/mirath-wordmark-white.png) center / contain no-repeat; mask: url(../assets/mirath/mirath-wordmark-white.png) center / contain no-repeat; }
#big .bh { position: absolute; left: 0; right: 0; top: 228px; display: flex; justify-content: center; align-items: center; gap: 18px; font-size: var(--fs-xl); font-weight: 900; line-height: 72px; color: var(--tl-navy); }
#big .bh .mk { font-size: 40px; color: var(--tl-sand); }
#big .bsub { position: absolute; left: 0; right: 0; top: 304px; font-size: var(--fs-m); color: var(--tl-navy2); line-height: 40px; }
#big .bnum { position: absolute; left: 0; right: 0; top: 376px; display: flex; justify-content: center; align-items: baseline; gap: 28px; white-space: nowrap; --g1: 4px; --g2: 26px; }
#bigNum { font-size: var(--fs-big); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
#big .bnum .rs { font-size: 124px; }
#big .bdv { position: absolute; left: 50%; top: 620px; width: 620px; margin-left: -310px; display: flex; align-items: center; gap: 14px; color: var(--tl-sand); }
#big .bdv i { flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(210, 174, 133, 0), rgba(210, 174, 133, 0.9)); }
#big .bdv i:last-child { background: linear-gradient(90deg, rgba(210, 174, 133, 0.9), rgba(210, 174, 133, 0)); }
#big .bdv svg { width: 46px; height: 22px; flex: none; }
#big .chips { position: absolute; left: 0; right: 0; top: 672px; display: flex; justify-content: center; gap: 18px; }
.bchip { min-width: 260px; padding: 16px 26px 14px; border-radius: 12px; background: #FFFFFF; border: 1.5px solid var(--tl-sand);
  box-shadow: 0 14px 34px rgba(27, 51, 71, 0.08); opacity: 0; transition: opacity 600ms ease; text-align: right; }
.bchip > span { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); line-height: 1.4; color: var(--tl-navy2); font-weight: 400; }
.bchip > span em { font-style: normal; }
.bchip > span .mk { color: var(--tl-sand); font-size: 20px; }
.bchip b { display: block; font-size: var(--fs-l); font-weight: 900; line-height: 1.2; margin-top: 6px; white-space: nowrap; --g1: 1.5px; --g2: 8px; }
.bchip b small { font-size: var(--fs-s); font-weight: 400; margin-right: 6px; }
#big.chips-on .bchip { opacity: 1; }
#big.chips-on .bchip:nth-child(2) { transition-delay: 120ms; } #big.chips-on .bchip:nth-child(3) { transition-delay: 240ms; } #big.chips-on .bchip:nth-child(4) { transition-delay: 360ms; }
/* المرحلة القصيرة: المبلغ، والمساحة المضافة، والريع — بطاقتان أعرض */
body.lt-small #big .bchip:nth-child(n+3) { display: none; }
body.lt-small #big .bchip { min-width: 340px; }
body.lt-small #big .bchip b { font-size: var(--fs-xl); }

/* شريطٌ رفيعٌ أسفل الشاشة تحت المؤشّرات */
#demoBadge { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; line-height: 34px; text-align: center;
  background: var(--m-navy-band); color: var(--m-tan); font-size: var(--fs-s); font-weight: 900; display: none; }
body.demo #demoBadge { display: block; }

/* سطر المصدر وآخر مزامنة — تحت المؤشّرات */
#syncLine { position: absolute; right: 48px; left: 230px; bottom: 28px; font-size: var(--fs-xs); line-height: 1.3; color: #C9CCD1; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--t); }
body.demo #syncLine, body.focus #syncLine, body.card-on #syncLine { opacity: 0; }
#staff.locked .row:not(.btns) { opacity: 0.45; }

#flash { position: fixed; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; z-index: 9; }

/* لوحة التحكّم */
#staff { position: absolute; right: 48px; top: 168px; width: 640px; padding: 28px 30px; border-radius: 14px; background: #FFFFFF; color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); z-index: 20; font-size: 24px; }
#staff h4 { font-size: 32px; font-weight: 900; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: baseline; color: var(--m-navy); }
#staff h4 small { font-size: 20px; color: var(--ink2); font-weight: 500; }
#staff .row { display: grid; grid-template-columns: 1fr 200px 110px; gap: 12px; align-items: center; margin-bottom: 14px; }
#staff .row.btns { grid-template-columns: 1fr 1fr; margin-top: 8px; }
#staff label { font-size: 22px; color: var(--ink2); }
#staff input { font: inherit; font-size: 24px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #CFCFCF; color: var(--ink); text-align: center; outline: none; }
#staff input:focus { border-color: var(--m-tan); }
#staff button { font: inherit; font-size: 22px; font-weight: 700; padding: 11px 14px; border-radius: 10px; border: 0; background: var(--m-navy); color: #FFFFFF; cursor: pointer; }
#staff button.ghost { background: transparent; color: var(--m-navy); border: 1.5px solid var(--m-navy-soft); }
#staff button.armed { background: var(--m-tan); color: var(--m-ink-top); border-color: var(--m-tan); }
#staff .info { font-size: 20px; color: var(--ink2); margin-top: 10px; line-height: 1.6; }
#staff .msg { color: var(--m-brown); font-weight: 700; }

/* ═════════ البطاقات الدوريّة (المقطع، رمز التبرّع، المستهدفات، التقارير) — داخل إحداثيّات اللوحة ═════════ */
.mcard { position: absolute; opacity: 0; visibility: hidden; color: var(--ink); }
.mcard.on { visibility: visible; }
/* لسانٌ كحليّ يتراكب أعلى يمين البطاقة (حافّته قصٌّ متّجهيّ) */
.mtab { position: absolute; top: -12px; right: -10px; height: 44px; display: flex; align-items: center; padding: 4px 22px 0 30px;
  background: var(--m-navy); clip-path: polygon(0 8%, 6% 0, 40% 6%, 72% 0, 100% 4%, 100% 100%, 64% 94%, 30% 100%, 4% 94%, 1.5% 50%);
  color: #FFFFFF; font-size: 20px; font-weight: 900; white-space: nowrap; z-index: 2; }

/* بطاقة المقطع: أسفل العمود الأيمن (مكان مربّع المساحة ومفتاح الألوان)، إطارٌ ورقيّ أبيض ١٦ بكسل حول فيديو ٤٠٠×٢٢٥ */
#clipCard { right: 48px; top: 624px; width: calc(var(--clip-w, 400px) + 32px); height: calc(var(--clip-w, 400px) * 9 / 16 + 32px); padding: 16px; background: var(--paper); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: opacity 600ms var(--ease), visibility 0s linear 600ms; }
#clipCard.on { opacity: 1; transition: opacity 600ms var(--ease), visibility 0s; }
#clipCard.out { transition-duration: 400ms; }
/* المقطع ٦٤٠×٣٦٠: لا يُعرض فوق دقّته الأصليّة على أيّ شاشة (--clip-w يضبطه app.js) */
#clipCard video { display: block; width: var(--clip-w, 400px); height: calc(var(--clip-w, 400px) * 9 / 16); object-fit: cover; background: #2B3448; }
#clipCard .mtab { right: auto; left: -10px; padding: 4px 30px 0 22px; }
#clipCard .cap { position: absolute; left: 16px; bottom: 16px; padding: 4px 10px 2px; font-size: 16px; color: #FFFFFF; background: rgba(24, 35, 59, 0.72); border-radius: 0 6px 0 0; }

/* بطاقة رمز التبرّع (أسفل اليسار، تحت سجلّ التبرّعات الذي يقصر ما دامت ظاهرة) */
#qrCard { left: 48px; top: 566px; width: 440px; height: 304px; padding: 34px 20px 16px 18px; background: var(--paper); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30); display: flex; align-items: center; gap: 18px;
  transition: opacity 600ms var(--ease), visibility 0s linear 600ms; }
#qrCard.on { opacity: 1; transition: opacity 600ms var(--ease), visibility 0s; }
#qrCard > img { width: 236px; height: 236px; display: block; flex: none; }
#qrCard .qt { min-width: 0; flex: 1; }
#qrCard .qt .wm { height: 36px; width: auto; display: block; margin-bottom: 6px; }
#qrCard .qt .t1 { font-size: 26px; font-weight: 900; color: var(--m-navy); line-height: 1.2; }
#qrCard .qt .t2 { font-size: 18px; color: var(--ink2); margin-top: 2px; white-space: nowrap; }
#qrCard .qt .t3 { font-size: 15px; color: var(--m-brown); margin-top: 4px; direction: ltr; text-align: right; font-family: 'Segoe UI', Tahoma, sans-serif; }
body.focus .mcard, body.light .mcard, body.focus #tgt, body.light #tgt { opacity: 0 !important; transition: opacity 240ms linear !important; }
/* بطاقتا التقرير (تقرير اليوم · منذ ٣٠ سبتمبر): ورقةٌ بيضاء في موضع سجلّ التبرّعات (يتنحّى السجلّ)، نصٌّ ثابتٌ بلا حركة */
.rep { left: 48px; top: 158px; width: 440px; padding: 44px 28px 22px; background: var(--paper); border-radius: 12px; color: var(--tl-navy);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38); transition: opacity 600ms var(--ease), visibility 0s linear 600ms; }
.rep.on { opacity: 1; transition: opacity 600ms var(--ease), visibility 0s; }
.rep .mtab { top: -14px; height: 52px; font-size: 24px; }
.rep .rh { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.rep .rh .wm { height: 34px; width: auto; display: block; }
.rep .rh .rd { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink2); line-height: 1.4; }
.rep .rbig { padding: 16px 0 14px; }
.rep .rbig .rl { font-size: var(--fs-s); color: var(--tl-navy2); font-weight: 500; line-height: 1.4; }
.rep .rbig .rv { display: flex; align-items: baseline; gap: 12px; font-size: var(--fs-2xl); font-weight: 900; line-height: 1.15; color: var(--tl-navy); margin-top: 2px; white-space: nowrap; }
.rep .rbig .rv .rs { font-size: 48px; }
.rep .rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rep .rc { border: 1.5px solid var(--tl-sand); border-radius: 10px; padding: 12px 14px 10px; min-width: 0; }
.rep .rc > span { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--tl-navy2); line-height: 1.4; white-space: nowrap; }
.rep .rc > span .mk { color: var(--tl-sand); }
.rep .rc > b { display: block; font-size: var(--fs-l); font-weight: 900; color: var(--tl-navy); line-height: 1.2; margin-top: 4px; white-space: nowrap; }
.rep .rc > b .rs { font-size: 28px; margin-right: 6px; }
.rep .rc > b small { margin-right: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--tl-navy2); }
.rep .rf { margin-top: 14px; font-size: var(--fs-xs); color: var(--ink2); line-height: 1.5; }
.rep .rf b { color: var(--tl-navy); font-weight: 700; }
body.rep-on #feed { opacity: 0; }

/* ═════════ مستهدفات وقف ميراث — مقطعٌ حركيّ سريع ١٦ ثانية ═════════ */
#tgt { position: absolute; inset: 0; background: rgba(18, 27, 47, 0.93); color: #FFFFFF; overflow: hidden; z-index: 5; }
#tgt .th { position: absolute; top: 56px; right: 0; height: 104px; display: flex; align-items: center; }
#tgt .th .wmb { height: 112px; padding: 18px 40px 14px 46px; display: flex; align-items: center;
  background: #FFFFFF url(../assets/mirath/paper-white-tile-1024.jpg) center / 420px auto;
  clip-path: polygon(0% 9%, 5% 2%, 14% 6%, 27% 0%, 41% 5%, 56% 1%, 71% 6%, 86% 0%, 100% 5%, 98.4% 30%, 100% 52%, 98.6% 76%, 100% 96%, 86% 100%, 70% 94%, 55% 100%, 38% 95%, 22% 100%, 8% 94%, 0% 98%, 1.6% 72%, 0% 48%, 1.8% 26%);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)); }
#tgt .th .wmb img { height: 70px; width: auto; display: block; }
#tgt .th .ttl { height: 96px; display: flex; align-items: center; padding: 10px 40px 0 90px; font-size: 48px; font-weight: 900; color: #FFFFFF;
  background: #3B5078; clip-path: polygon(0 10%, 4% 0, 30% 7%, 58% 0, 86% 6%, 100% 0, 100% 100%, 80% 93%, 52% 100%, 24% 94%, 3% 100%, 1.4% 55%);
  margin-right: -6px; white-space: nowrap; }
#tgt .beat { position: absolute; left: 130px; right: 130px; top: 196px; bottom: 50px; display: flex; flex-direction: column; justify-content: center; }
#tgt .bt { display: flex; align-items: center; gap: 14px; font-size: 40px; font-weight: 900; color: #FFFFFF; margin-bottom: 28px; }
#tgt .bt .mk { color: var(--m-tan); font-size: 34px; }
#tgt .bt small { font-size: 26px; font-weight: 400; color: rgba(255, 255, 255, 0.72); margin-right: 8px; }
#tgt .row { margin-bottom: 46px; }
#tgt .row .rl { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
#tgt .row .lbl { font-size: 30px; font-weight: 500; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
#tgt .row .val { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; color: #FFFFFF;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 16px rgba(255, 255, 255, 0.26); }
#tgt .row .val b { font-size: 72px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
#tgt .row .val .rs { font-size: 54px; }
#tgt .row .val .of { font-size: 28px; color: rgba(255, 255, 255, 0.72); font-weight: 400; }
#tgt .row .pc { font-size: 44px; font-weight: 900; color: #FFFFFF; min-width: 170px; text-align: left; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.24); }
#tgt .row .trk { margin-top: 14px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); overflow: hidden; direction: rtl; }
#tgt .row .fil { height: 100%; width: 0; background: var(--m-tan); border-radius: 8px; }
#tgt .row .sub { margin-top: 10px; font-size: 24px; color: rgba(255, 255, 255, 0.72); }
#tgt .row .sub b { color: #FFFFFF; font-weight: 900; }
#tgt .cards3 { display: flex; gap: 36px; justify-content: center; perspective: 1400px; margin-top: 20px; }
#tgt .tcard { width: 480px; height: 280px; padding: 46px 40px 24px; color: #1F1810; position: relative;
  background: #FFFFFF url(../assets/mirath/paper-white-tile-1024.jpg) center / 360px auto; box-shadow: inset 0 14px 0 var(--m-tan);
  clip-path: polygon(0 6%, 9% 0, 27% 4%, 52% 0, 76% 5%, 93% 1%, 100% 7%, 98.5% 40%, 100% 72%, 99% 100%, 70% 96%, 44% 100%, 18% 95%, 0 100%, 1.2% 66%, 0 30%); }
#tgt .tcard .ic { height: 54px; width: auto; display: block; margin-bottom: 14px; opacity: 0.85; }
#tgt .tcard .lbl { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 500; color: var(--m-brown); }
#tgt .tcard .lbl .mk { color: var(--m-tan); font-size: 24px; }
#tgt .tcard .val { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; color: var(--navy-deep);
  text-shadow: 0 0 2px rgba(30, 45, 77, 0.22), 0 0 12px rgba(30, 45, 77, 0.13); }
#tgt .tcard .val b { font-size: 70px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
#tgt .tcard .val .rs { font-size: 56px; }
#tgt .sum { margin-top: 54px; text-align: center; font-size: 34px; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
#tgt .sum b { color: #FFFFFF; font-weight: 900; font-size: 42px; text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 14px rgba(255, 255, 255, 0.25); }
#tgt .sum .dotsep { color: var(--m-tan); margin: 0 18px; }
#tgt .grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; margin-top: 6px; }
#tgt .tile { position: relative; height: 252px; padding: 28px 34px 22px; background: rgba(33, 73, 107, 0.32); border-top: 4px solid var(--m-tan); }
#tgt .tile .n { font-size: 74px; font-weight: 900; color: #FFFFFF; line-height: 1.05; margin-top: 12px; padding-top: 6px; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 16px rgba(255, 255, 255, 0.26); }
#tgt .z0 { font-size: 0.6em; position: relative; top: -0.3em; margin: 0 0.04em; }
#tgt .tile .d { font-size: 30px; color: rgba(255, 255, 255, 0.88); margin-top: 14px; line-height: 1.35; }
#tgt .tile .d.pre { margin-top: 0; min-height: 40px; }
#tgt .tile .pill { position: absolute; top: 24px; left: 26px; font-size: 20px; font-weight: 700; color: var(--m-tan); border: 1.5px solid var(--m-tan); border-radius: 16px; padding: 2px 14px 0; }
#tgt .foot { margin-top: 34px; text-align: center; font-size: 28px; color: rgba(255, 255, 255, 0.78); will-change: opacity; }

/* المستهدفات تملأ المسرح: تتلاشى الطبقة النصّيّة خلال ٤٠٠ م ث */
body.card-on #hdr { opacity: 0; }
body.card-on #hdr, body.card-on #side, body.card-on #kpis { transition-duration: 400ms; }

/* ═════════ مقطع طلاب العلم عند خمول التبرّعات (promo-card.js): بطاقةٌ رأسيّة في موضع سجلّ التبرّعات ═════════ */
#promoCard { left: 48px; top: 158px; width: calc(var(--promo-w, 360px) + 28px); padding: 14px 14px 0; background: var(--paper); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38); transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
#promoCard.on { opacity: 1; transition: opacity 700ms var(--ease), visibility 0s; }
#promoCard .mtab { top: -14px; height: 52px; font-size: 24px; }
/* المقطع ٧٢٠×١٢٨٠: لا يُعرض فوق دقّته الأصليّة (--promo-w يضبطه promo-card.js) */
#promoCard .pv { position: relative; width: var(--promo-w, 360px); height: calc(var(--promo-w, 360px) * 16 / 9); overflow: hidden; border-radius: 4px; background: var(--tl-navy); }
#promoCard video { display: block; width: 100%; height: 100%; object-fit: cover; }
#promoCard .pcap { height: 58px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 26px; font-weight: 900; color: var(--tl-navy); white-space: nowrap; padding-top: 4px; }
#promoCard .pcap .mk { color: var(--tl-sand); font-size: 20px; }
#promoCard .pc { position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; border-bottom-right-radius: 12px; }
body.promo-on #feed { opacity: 0; }

/* ═════════ جولة القياس (measure.js): خطوطٌ بيضاء رفيعة بتوهّجٍ ناعم تُسقَط على المشهد كلّ إطار، ونصوصٌ أفقيّة ثابتة
   بمواضع بكسلٍ صحيحة — فوق الستائر وتحت الطبقة النصّيّة، ومحصورةٌ في المساحة الحرّة بين سجلّ التبرّعات والعمود الأيمن ═════════ */
#meas { position: absolute; inset: 0; clip-path: inset(140px 474px 196px 496px); transition: opacity 500ms linear; }
#meas svg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
#meas .gl { fill: none; stroke: #FFFFFF; stroke-opacity: 0.16; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
#meas .ln { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#meas .ln.th { stroke-width: 2.6; }
#meas .hl { fill: #FFFFFF; stroke: none; }
#meas .ml { position: absolute; left: 0; top: 0; white-space: nowrap; color: #FFFFFF; line-height: 1.2; opacity: 0;
  text-shadow: 0 0 2.5px rgba(255, 255, 255, 0.5), 0 0 11px rgba(255, 255, 255, 0.28), 0 1px 3px rgba(8, 12, 22, 0.55); }
#meas .ml .rs { filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.5)); }
#meas .t-site { font-size: 44px; font-weight: 900; }
#meas .t-dim { font-size: 26px; font-weight: 900; }
#meas .t-st { font-size: 24px; font-weight: 700; text-align: center; padding: 6px 14px 7px; border-radius: 12px; background: rgba(14, 21, 36, 0.62); }
#meas .t-st b { display: block; font-size: 30px; font-weight: 900; }
#meas .t-pin { font-size: 24px; font-weight: 700; }
#meas .t-call { font-size: 26px; font-weight: 900; }
#meas .t-city { font-size: 58px; font-weight: 900; line-height: 1.05; text-align: center; }
/* صناديق القيمة: حافّةٌ بيضاء مستديرة كما في المقطع المرجعيّ، وخلفيّةٌ كحليّةٌ شفيفة تُقرأ عليها الأرقام */
#meas .bx { border: 2px solid #FFFFFF; border-radius: 16px; background: rgba(14, 21, 36, 0.64);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.22), inset 0 0 10px rgba(255, 255, 255, 0.08); text-align: center; }
#meas .t-area { padding: 10px 26px 8px; }
#meas .t-area span { display: block; font-size: 22px; font-weight: 700; }
#meas .t-area b { display: block; font-size: 44px; font-weight: 900; }
#meas .t-area b small { font-size: 26px; font-weight: 700; margin-right: 6px; }
#meas .t-val { width: 470px; }
#meas .t-val .vh { padding: 12px 20px 10px; }
#meas .t-val .vh span { display: block; font-size: 24px; font-weight: 700; }
#meas .t-val .vh b { display: inline-flex; align-items: baseline; gap: 10px; font-size: 52px; font-weight: 900; line-height: 1.1; }
#meas .t-val .vh b .rs { font-size: 38px; }
#meas .t-val .vc { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid #FFFFFF; }
#meas .t-val .vc > div { padding: 8px 6px 9px; }
#meas .t-val .vc > div + div { border-right: 2px solid #FFFFFF; }
#meas .t-val .vc span { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; color: rgba(255, 255, 255, 0.9); }
#meas .t-val .vc b { display: inline-flex; align-items: baseline; gap: 6px; font-size: 25px; font-weight: 900; }
#meas .t-val .vc b .rs { font-size: 19px; }
#meas .t-yld { padding: 14px 34px 12px; }
#meas .t-yld span { display: block; font-size: 26px; font-weight: 700; }
#meas .t-yld b { display: inline-flex; align-items: baseline; gap: 10px; font-size: 60px; font-weight: 900; line-height: 1.1; }
#meas .t-yld b .rs { font-size: 44px; }
.phase-intro #meas, body.focus #meas, body.light #meas, body.card-on #meas { opacity: 0 !important; transition: opacity 240ms linear; }