/* =====================================================================
   EMPIRE UI — نظام التصميم الموحّد لموقع ضرغام (sa1.top)
   الهوية: "غرفة الحرب الإمبراطورية" — حديد وجمر، ذهب نحاسي، رقّ قديم.
   الخطوط: Reem Kufi / Almarai (عربي) — Cinzel / Spectral (إنجليزي) — Chakra Petch (أرقام)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400..700&family=Almarai:wght@300;400;700;800&family=Cinzel:wght@500;700;900&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Chakra+Petch:wght@500;600;700&display=swap');

/* ---------------------------------------------------------------------
   1) الرموز الأساسية (Tokens) — الثيم الافتراضي: الجمر (ember)
--------------------------------------------------------------------- */
:root {
  /* خلفيات */
  --bg-0: #080706;
  --bg-1: #100e0b;
  --bg-2: #171410;
  --bg-3: #211c15;
  --bg-4: #2b251c;
  --bg-glass: rgba(16, 14, 11, 0.72);

  /* الحدود */
  --line: rgba(212, 162, 76, 0.22);
  --line-strong: rgba(212, 162, 76, 0.55);
  --line-soft: rgba(255, 255, 255, 0.06);

  /* الذهب (التمييز الأساسي) */
  --gold: #d4a24c;
  --gold-2: #f1cf7a;
  --gold-3: #8a6523;
  --gold-rgb: 212, 162, 76;

  /* الجمر (التمييز الثانوي) */
  --ember: #e2572b;
  --ember-2: #ff8a50;
  --ember-rgb: 226, 87, 43;
  --blood: #8f1d1d;

  /* الفولاذ (محايد) */
  --steel: #8b96a3;
  --steel-2: #c5ccd4;

  /* النصوص */
  --text: #efe6d3;
  --text-2: #c2b7a2;
  --text-3: #857b6c;
  --text-on-accent: #1a1208;

  /* الحالات */
  --ok: #5fb36a;
  --warn: #e3b341;
  --danger: #d9534f;
  --info: #5aa9e6;

  /* الميداليات */
  --medal-gold: #f3c969;
  --medal-silver: #c9ced6;
  --medal-bronze: #c48a5a;

  /* الظلال والتوهج */
  --shadow-1: 0 2px 6px rgba(0, 0, 0, .45);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .55);
  --shadow-3: 0 24px 70px rgba(0, 0, 0, .65);
  --glow-gold: 0 0 24px rgba(var(--gold-rgb), .35);
  --glow-ember: 0 0 28px rgba(var(--ember-rgb), .45);

  /* الخطوط */
  --font-display-ar: 'Reem Kufi', 'Almarai', sans-serif;
  --font-body-ar: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
  --font-display-en: 'Cinzel', 'Times New Roman', serif;
  --font-body-en: 'Spectral', Georgia, serif;
  --font-num: 'Chakra Petch', 'Almarai', monospace;

  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);

  /* أبعاد */
  --radius-s: 6px;
  --radius: 12px;
  --radius-l: 20px;
  --container: 1240px;
  --topbar-h: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* ملمس الخلفية */
  --bg-image: none;
  --grid-color: rgba(var(--gold-rgb), .06);
  --noise-opacity: .07;
  --vignette: rgba(0, 0, 0, .7);

  color-scheme: dark;
}

/* اللغة الإنجليزية تستخدم الخطوط اللاتينية */
html[lang="en"], html[lang="pl"], html[lang^="en"] {
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);
}

/* ---------------------------------------------------------------------
   2) الثيمات — تُختار من مبدّل الثيم وتُحفظ في localStorage (site_theme)
--------------------------------------------------------------------- */
html[data-theme="crimson"] {
  --bg-0: #0b0506; --bg-1: #140809; --bg-2: #1c0c0e; --bg-3: #261114; --bg-4: #32171b;
  --bg-glass: rgba(20, 8, 9, .74);
  --gold: #e6b15c; --gold-2: #f6d389; --gold-3: #946a24; --gold-rgb: 230, 177, 92;
  --ember: #e0343c; --ember-2: #ff6b70; --ember-rgb: 224, 52, 60; --blood: #7a0f14;
  --line: rgba(224, 52, 60, .26); --line-strong: rgba(224, 52, 60, .6);
  --grid-color: rgba(224, 52, 60, .07);
  --glow-gold: 0 0 24px rgba(224, 52, 60, .35);
}
html[data-theme="royal"] {
  --bg-0: #05070d; --bg-1: #090d17; --bg-2: #0e1420; --bg-3: #141c2c; --bg-4: #1b2538;
  --bg-glass: rgba(9, 13, 23, .74);
  --gold: #9fc4ea; --gold-2: #d6e8fa; --gold-3: #3f6b96; --gold-rgb: 159, 196, 234;
  --ember: #4f9ddf; --ember-2: #86c3f5; --ember-rgb: 79, 157, 223; --blood: #1f3f66;
  --steel: #a7b4c4; --text: #e8eef6; --text-2: #b5c0cf; --text-3: #7a8798; --text-on-accent: #061120;
  --line: rgba(159, 196, 234, .22); --line-strong: rgba(159, 196, 234, .55);
  --grid-color: rgba(159, 196, 234, .06);
  --medal-gold: #ffd56b;
}
html[data-theme="emerald"] {
  --bg-0: #040906; --bg-1: #08120c; --bg-2: #0c1911; --bg-3: #112217; --bg-4: #172d1e;
  --bg-glass: rgba(8, 18, 12, .74);
  --gold: #c9a85a; --gold-2: #ead98f; --gold-3: #7b6428; --gold-rgb: 201, 168, 90;
  --ember: #3fbf7f; --ember-2: #7fe3ad; --ember-rgb: 63, 191, 127; --blood: #1c5a3a;
  --text: #e9f0e6; --text-2: #b7c4b3; --text-3: #77857a;
  --line: rgba(201, 168, 90, .22); --line-strong: rgba(63, 191, 127, .5);
  --grid-color: rgba(63, 191, 127, .06);
}
html[data-theme="desert"] {
  --bg-0: #0f0a05; --bg-1: #1a120a; --bg-2: #23190f; --bg-3: #2e2214; --bg-4: #3a2b1a;
  --bg-glass: rgba(26, 18, 10, .76);
  --gold: #e0a050; --gold-2: #f6cd8a; --gold-3: #9a6a2a; --gold-rgb: 224, 160, 80;
  --ember: #d9742f; --ember-2: #f5a263; --ember-rgb: 217, 116, 47; --blood: #7c3a16;
  --text: #f6ead6; --text-2: #cdbba0; --text-3: #8f7f68;
  --line: rgba(224, 160, 80, .28); --line-strong: rgba(224, 160, 80, .6);
  --grid-color: rgba(224, 160, 80, .07);
}
html[data-theme="obsidian"] {
  --bg-0: #07080a; --bg-1: #0c0e11; --bg-2: #121519; --bg-3: #191d23; --bg-4: #22272e;
  --bg-glass: rgba(12, 14, 17, .76);
  --gold: #c7ccd3; --gold-2: #eef1f4; --gold-3: #6b737d; --gold-rgb: 199, 204, 211;
  --ember: #9aa4b0; --ember-2: #cfd6de; --ember-rgb: 154, 164, 176; --blood: #3a414a;
  --text: #eceff2; --text-2: #b7bec7; --text-3: #7a828c; --text-on-accent: #0b0d10;
  --line: rgba(199, 204, 211, .18); --line-strong: rgba(199, 204, 211, .45);
  --grid-color: rgba(199, 204, 211, .05);
  --medal-gold: #f3c969;
}
html[data-theme="parchment"] {
  color-scheme: light;
  --bg-0: #e9dcc3; --bg-1: #f1e6d0; --bg-2: #f7eedc; --bg-3: #fbf5e8; --bg-4: #ffffff;
  --bg-glass: rgba(247, 238, 220, .82);
  --gold: #8a5a16; --gold-2: #b07a2a; --gold-3: #5a3a0c; --gold-rgb: 138, 90, 22;
  --ember: #9c1f1f; --ember-2: #c23b3b; --ember-rgb: 156, 31, 31; --blood: #7a1515;
  --steel: #5b6470; --steel-2: #39414b;
  --text: #2a2016; --text-2: #574a39; --text-3: #8a7b66; --text-on-accent: #fff7e6;
  --line: rgba(138, 90, 22, .28); --line-strong: rgba(138, 90, 22, .6); --line-soft: rgba(0, 0, 0, .06);
  --grid-color: rgba(138, 90, 22, .08);
  --noise-opacity: .12; --vignette: rgba(90, 58, 12, .25);
  --shadow-1: 0 2px 6px rgba(60, 40, 10, .18);
  --shadow-2: 0 10px 30px rgba(60, 40, 10, .22);
  --shadow-3: 0 24px 70px rgba(60, 40, 10, .28);
  --glow-gold: 0 0 24px rgba(138, 90, 22, .18);
  --glow-ember: 0 0 28px rgba(156, 31, 31, .22);
  --medal-gold: #c99a2e; --medal-silver: #8e959e; --medal-bronze: #9b6b3f;
}

/* ---------------------------------------------------------------------
   3) الأساسيات
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.eu-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
body.eu-body h1, body.eu-body h2, body.eu-body h3, body.eu-body h4,
.eu-display { font-family: var(--font-display); font-weight: 700; line-height: 1.25; letter-spacing: .01em; margin: 0; }
html[lang="en"] .eu-display, html[lang="en"] body.eu-body h1, html[lang="en"] body.eu-body h2 { letter-spacing: .04em; }
:where(body.eu-body) p { margin: 0 0 1em; }
:where(body.eu-body) a { color: var(--gold); text-decoration: none; transition: color .25s var(--ease); }
:where(body.eu-body) a:hover { color: var(--gold-2); }
:where(body.eu-body) img { max-width: 100%; height: auto; }
.eu-num, body.eu-body .eu-num { font-family: var(--font-num) !important; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
::selection { background: rgba(var(--gold-rgb), .35); color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.eu-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* شريط التمرير */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-3), var(--bg-4)); border-radius: 8px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------------------------------------------------------------------
   4) طبقات الخلفية (ملمس خرائط الحرب + تظليل + ضباب متحرك)
--------------------------------------------------------------------- */
.eu-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(var(--gold-rgb), .14), transparent 60%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(var(--ember-rgb), .10), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%, var(--bg-1));
}
.eu-bg::before { /* شبكة خريطة المعركة */
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
}
.eu-bg::after { /* تظليل سينمائي */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, var(--vignette) 100%);
}
.eu-bg .eu-smoke { position: absolute; inset: -20%; opacity: .55; filter: blur(60px);
  background:
    radial-gradient(circle at 20% 30%, rgba(var(--ember-rgb), .18), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(var(--gold-rgb), .14), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(var(--gold-rgb), .08), transparent 40%);
  animation: euSmoke 28s ease-in-out infinite alternate; }
@keyframes euSmoke { from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.08); } }
.eu-noise { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: var(--noise-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#eu-embers { position: fixed; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
.eu-shell { position: relative; z-index: 3; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------
   5) ستارة الدخول (Loader)
--------------------------------------------------------------------- */
.eu-loader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; pointer-events: none; }
.eu-loader::before, .eu-loader::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--bg-0); transition: transform 1s var(--ease) .25s; }
.eu-loader::before { left: 0; box-shadow: inset -1px 0 0 var(--line); }
.eu-loader::after { right: 0; box-shadow: inset 1px 0 0 var(--line); }
.eu-loader__mark { position: relative; z-index: 1; display: grid; place-items: center; gap: 12px; transition: opacity .4s ease, transform .6s var(--ease); }
.eu-loader__mark img { width: 120px; height: 120px; object-fit: contain; border-radius: 50%; border: 2px solid var(--gold); padding: 6px; background: var(--bg-2); box-shadow: var(--glow-gold); animation: euPulse 1.2s ease-in-out infinite; }
.eu-loader__bar { width: 160px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.eu-loader__bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--ember)); animation: euLoad 1s var(--ease) infinite; }
@keyframes euLoad { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes euPulse { 0%, 100% { box-shadow: 0 0 18px rgba(var(--gold-rgb), .3); } 50% { box-shadow: 0 0 44px rgba(var(--gold-rgb), .6); } }
.eu-loader.is-done::before { transform: translateX(-101%); }
.eu-loader.is-done::after { transform: translateX(101%); }
.eu-loader.is-done .eu-loader__mark { opacity: 0; transform: scale(.85); }
.eu-loader.is-removed { display: none; }

/* ---------------------------------------------------------------------
   6) الشريط العلوي (Topbar)
--------------------------------------------------------------------- */
.eu-topbar { position: sticky; top: 0; z-index: 900; height: var(--topbar-h);
  background: var(--bg-glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line); transition: box-shadow .3s ease, height .3s ease; }
.eu-topbar.is-scrolled { box-shadow: var(--shadow-2); }
.eu-topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--ember), var(--gold), transparent); opacity: .7; }
.eu-topbar__in { max-width: 1440px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 22px; }
.eu-brand { display: flex; align-items: center; gap: 12px; color: var(--text); flex-shrink: 0; }
.eu-brand > span { display: flex; flex-direction: column; line-height: 1.1; }
.eu-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; border: 1.5px solid var(--gold-3); background: var(--bg-2); padding: 3px; box-shadow: 0 0 0 3px var(--bg-1), 0 0 16px rgba(var(--gold-rgb), .25); transition: transform .4s var(--ease-bounce); }
.eu-brand:hover img { transform: rotate(-8deg) scale(1.06); }
.eu-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; color: var(--gold-2); white-space: nowrap; }
.eu-brand__tag { display: block; font-family: var(--font-num); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.eu-nav { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.eu-nav > a, .eu-nav__gbtn { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 12px; border: 1px solid transparent;
  color: var(--text-2); font-family: var(--font-body); font-weight: 700; font-size: .95rem; line-height: 1; white-space: nowrap; background: transparent; cursor: pointer;
  transition: color .25s, background .25s, border-color .25s; }
.eu-nav > a img, .eu-nav__gbtn img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); transition: transform .35s var(--ease-bounce); }
.eu-nav > a:hover, .eu-nav__gbtn:hover, .eu-nav__group.is-open > .eu-nav__gbtn { color: var(--text); background: rgba(var(--gold-rgb), .08); border-color: var(--line); }
.eu-nav > a:hover img, .eu-nav__gbtn:hover img { transform: translateY(-2px) scale(1.12); }
.eu-nav > a::after, .eu-nav__gbtn::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--ember)); transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease); }
.eu-nav > a:hover::after, .eu-nav > a.is-active::after, .eu-nav__group.is-active > .eu-nav__gbtn::after { transform: scaleX(1); }
.eu-nav > a.is-active, .eu-nav__group.is-active > .eu-nav__gbtn { color: var(--gold-2); }
.eu-nav__gbtn svg { width: 14px; height: 14px; opacity: .7; transition: transform .3s var(--ease); margin-inline-start: -2px; }
.eu-nav__group:hover > .eu-nav__gbtn svg, .eu-nav__group.is-open > .eu-nav__gbtn svg { transform: rotate(180deg); opacity: 1; }
.eu-nav a.eu-nav__cta { margin-inline-start: 10px; background: linear-gradient(135deg, var(--ember), var(--blood)); color: #fff; border-color: rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(var(--ember-rgb), .35); }
.eu-nav a.eu-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--ember-rgb), .5); color: #fff; }
.eu-nav a.eu-nav__cta::after { display: none; }
/* القوائم المنسدلة */
.eu-nav__group { position: relative; }
.eu-nav__group::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.eu-nav__menu { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 950; min-width: 300px; padding: 8px; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3), 0 0 0 1px rgba(0,0,0,.3); display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; }
.eu-nav__menu::before { content: ''; position: absolute; top: -7px; inset-inline-start: 28px; width: 12px; height: 12px; background: var(--bg-2); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg); }
html[dir="rtl"] .eu-nav__menu::before { transform: rotate(45deg); }
.eu-nav__menu::after { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--ember), transparent); opacity: .8; }
.eu-nav__group--calc .eu-nav__menu { min-width: 620px; grid-template-columns: 1fr 1fr; }
.eu-nav__group:hover > .eu-nav__menu, .eu-nav__group.is-open > .eu-nav__menu, .eu-nav__group:focus-within > .eu-nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.eu-nav__menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--text-2); border: 1px solid transparent; transition: all .2s var(--ease); }
.eu-nav__menu a img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; padding: 4px; border-radius: 10px; background: rgba(var(--gold-rgb), .08); border: 1px solid var(--line); transition: transform .3s var(--ease-bounce); }
.eu-nav__menu a span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eu-nav__menu a b { color: var(--text); font-size: .92rem; font-weight: 800; line-height: 1.25; }
.eu-nav__menu a small { color: var(--text-3); font-size: .74rem; line-height: 1.35; white-space: normal; }
.eu-nav__menu a:hover, .eu-nav__menu a:focus-visible { background: rgba(var(--gold-rgb), .1); border-color: var(--line); }
.eu-nav__menu a:hover b { color: var(--gold-2); }
.eu-nav__menu a:hover img { transform: scale(1.1) rotate(-4deg); }
.eu-nav__menu a.is-active { background: rgba(var(--gold-rgb), .12); border-color: var(--line-strong); }
.eu-nav__menu a.is-active b { color: var(--gold-2); }
.eu-nav__ext { margin-inline-start: auto; font-style: normal; color: var(--text-3); font-size: .85rem; }
@media (max-width: 1400px) { .eu-nav > a, .eu-nav__gbtn { font-size: .88rem; padding: 10px 12px; } .eu-nav > a img, .eu-nav__gbtn img { width: 21px; height: 21px; } .eu-brand__tag { display: none; } }
.eu-controls { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.eu-nav + .eu-controls { margin-inline-start: 0; }

/* زر أيقوني عام */
.eu-iconbtn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--gold-rgb), .06); color: var(--gold); cursor: pointer; transition: all .25s var(--ease); padding: 0; }
.eu-iconbtn svg { width: 20px; height: 20px; }
.eu-iconbtn:hover { background: rgba(var(--gold-rgb), .14); border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--glow-gold); }

/* مبدّل اللغة */
.eu-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .25); }
html[data-theme="parchment"] .eu-lang { background: rgba(255,255,255,.4); }
.eu-lang button { border: 0; background: transparent; color: var(--text-2); font-family: var(--font-num); font-weight: 700; font-size: .8rem; letter-spacing: .08em; padding: 0 12px; height: 40px; cursor: pointer; transition: all .25s; }
.eu-lang button + button { border-inline-start: 1px solid var(--line); }
.eu-lang button.is-active { background: linear-gradient(180deg, var(--gold), var(--gold-3)); color: var(--text-on-accent); }
.eu-lang button:not(.is-active):hover { color: var(--gold-2); background: rgba(var(--gold-rgb), .08); }

.eu-lang:has(button:only-child) { display: none; }

/* مبدّل الثيم */
.eu-theme { position: relative; }
.eu-theme__pop { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 290px; padding: 14px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-3); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transition: all .25s var(--ease); z-index: 20; }
.eu-theme.is-open .eu-theme__pop { opacity: 1; visibility: visible; transform: none; }
.eu-theme__title { font-family: var(--font-num); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.eu-theme__title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.eu-theme__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.eu-swatch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); cursor: pointer; color: var(--text-2); font-size: .82rem; font-weight: 700; text-align: start; transition: all .2s; }
.eu-swatch i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); background: linear-gradient(135deg, var(--sw-a), var(--sw-b) 55%, var(--sw-c)); box-shadow: 0 0 10px var(--sw-a); flex-shrink: 0; }
.eu-swatch:hover { border-color: var(--line-strong); color: var(--text); background: rgba(var(--gold-rgb), .07); }
.eu-swatch.is-active { border-color: var(--gold); color: var(--gold-2); background: rgba(var(--gold-rgb), .1); }

/* زر القائمة (للجوال) */
.eu-burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.eu-burger span + span { margin-top: 5px; }
.eu-burger { display: none; flex-direction: column; justify-content: center; }
body.eu-drawer-open .eu-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.eu-drawer-open .eu-burger span:nth-child(2) { opacity: 0; }
body.eu-drawer-open .eu-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   7) القائمة الجانبية (Drawer)
--------------------------------------------------------------------- */
.eu-drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(360px, 88vw); z-index: 1000; background: var(--bg-1); border-inline-end: 1px solid var(--line-strong); transform: translateX(-104%); transition: transform .45s var(--ease); display: flex; flex-direction: column; box-shadow: var(--shadow-3); overflow-y: auto; }
html[dir="rtl"] .eu-drawer { transform: translateX(104%); }
body.eu-drawer-open .eu-drawer { transform: none !important; }
.eu-drawer__head { padding: 22px 20px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(var(--gold-rgb), .08), transparent); }
.eu-drawer__head img { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gold); padding: 3px; background: var(--bg-2); }
.eu-drawer__head b { display: block; font-family: var(--font-display); color: var(--gold-2); font-size: 1.1rem; }
.eu-drawer__head small { color: var(--text-3); font-family: var(--font-num); letter-spacing: .15em; font-size: .62rem; text-transform: uppercase; }
.eu-drawer__list { list-style: none; margin: 0; padding: 12px; display: grid; gap: 4px; }
.eu-drawer__list a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; color: var(--text-2); border: 1px solid transparent; transition: all .25s var(--ease); }
.eu-drawer__list a img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.eu-drawer__list a b { display: block; color: var(--text); font-weight: 800; font-size: .95rem; }
.eu-drawer__list a small { display: block; color: var(--text-3); font-size: .74rem; line-height: 1.4; }
.eu-drawer__list a:hover, .eu-drawer__list a.is-active { background: rgba(var(--gold-rgb), .08); border-color: var(--line); transform: translateX(var(--eu-dx, -4px)); }
html[dir="rtl"] .eu-drawer__list a:hover, html[dir="rtl"] .eu-drawer__list a.is-active { --eu-dx: 4px; }
.eu-drawer__list a.is-active b { color: var(--gold-2); }
.eu-drawer__foot { margin-top: auto; padding: 16px 20px 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .78rem; }
.eu-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: all .35s; }
body.eu-drawer-open .eu-overlay { opacity: 1; visibility: visible; }
body.eu-drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   8) الحاويات والهيرو
--------------------------------------------------------------------- */
.eu-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.eu-main { flex: 1; padding-bottom: 60px; }
.eu-section { padding: 40px 0; }

/* هيرو الصفحات الداخلية */
.eu-hero { position: relative; padding: 56px 0 44px; overflow: hidden; isolation: isolate; }
.eu-hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(var(--gold-rgb), .12), transparent 70%); }
.eu-hero__in { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.eu-hero__icon { position: relative; width: 112px; height: 112px; display: grid; place-items: center; flex-shrink: 0; }
.eu-hero__icon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--line-strong); animation: euSpin 40s linear infinite; }
.eu-hero__icon::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .22), transparent 70%); }
.eu-hero__icon img { position: relative; z-index: 1; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); animation: euFloat 5s ease-in-out infinite; }
@keyframes euSpin { to { transform: rotate(360deg); } }
@keyframes euFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.eu-hero__text { flex: 1; min-width: 260px; }
.eu-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-num); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.eu-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
.eu-hero__title { font-size: clamp(1.7rem, 4vw, 2.8rem); color: var(--text); margin: 0 0 10px;
  background: linear-gradient(110deg, var(--text) 0%, var(--gold-2) 40%, var(--text) 60%, var(--gold-2) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: euShimmer 7s ease-in-out infinite; }
@keyframes euShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.eu-hero__sub { color: var(--text-2); font-size: 1.05rem; max-width: 720px; margin: 0; }
.eu-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.eu-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--text-3); margin-bottom: 14px; }
.eu-breadcrumb a { color: var(--text-3); }
.eu-breadcrumb a:hover { color: var(--gold); }
.eu-breadcrumb i { opacity: .5; font-style: normal; }
.eu-breadcrumb span[aria-current] { color: var(--gold); }

/* ---------------------------------------------------------------------
   9) البطاقات والمكوّنات
--------------------------------------------------------------------- */
.eu-card { position: relative; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-2); overflow: hidden; }
.eu-card::before { /* إطار ذهبي داخلي رفيع */
  content: ''; position: absolute; inset: 6px; border-radius: calc(var(--radius-l) - 6px); border: 1px solid rgba(var(--gold-rgb), .1); pointer-events: none; }
.eu-card--glow::after { /* توهج يتبع الماوس */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), .14), transparent 45%); }
.eu-card--glow:hover::after { opacity: 1; }
.eu-card__body { position: relative; padding: 26px; }
.eu-card__head { position: relative; padding: 18px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .08), transparent); }
.eu-card__head img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.eu-card__head h2, .eu-card__head h3 { font-size: 1.15rem; color: var(--gold-2); margin: 0; }
.eu-card__head p { margin: 0; color: var(--text-3); font-size: .8rem; }
.eu-card__head .eu-spacer { flex: 1; }

/* زوايا معدنية مزخرفة */
.eu-corners { position: relative; }
.eu-corners > .eu-corner { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.eu-corners::before, .eu-corners::after, .eu-corners > .eu-corner::before, .eu-corners > .eu-corner::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--gold); border-style: solid; z-index: 2; pointer-events: none; }
.eu-corners::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-l) 0 0 0; }
.eu-corners::after { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-l) 0 0; }
.eu-corners > .eu-corner::before { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-l); }
.eu-corners > .eu-corner::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-l) 0; }

/* بلاطة أداة (Tool tile) */
.eu-tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 22px; border-radius: var(--radius-l); background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); color: var(--text); overflow: hidden; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; box-shadow: var(--shadow-1); }
.eu-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--gold-rgb), .16), transparent 50%); opacity: 0; transition: opacity .4s; }
.eu-tile::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--ember)); transform: scaleX(0); transform-origin: var(--eu-origin, left); transition: transform .45s var(--ease); }
html[dir="rtl"] .eu-tile::after { --eu-origin: right; }
.eu-tile:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-2), var(--glow-gold); color: var(--text); }
.eu-tile:hover::before, .eu-tile:hover::after { opacity: 1; transform: scaleX(1); }
.eu-tile__icon { position: relative; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 30% 30%, rgba(var(--gold-rgb), .25), rgba(0,0,0,.3)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.eu-tile__icon img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition: transform .45s var(--ease-bounce); }
.eu-tile:hover .eu-tile__icon img { transform: scale(1.15) rotate(-6deg); }
.eu-tile h3 { font-size: 1.15rem; color: var(--gold-2); margin: 0; }
.eu-tile p { color: var(--text-2); font-size: .9rem; margin: 0; flex: 1; }
.eu-tile__go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.eu-tile__go svg { width: 16px; height: 16px; transition: transform .3s; }
html[dir="rtl"] .eu-tile__go svg { transform: scaleX(-1); }
.eu-tile:hover .eu-tile__go svg { transform: translateX(4px); }
html[dir="rtl"] .eu-tile:hover .eu-tile__go svg { transform: scaleX(-1) translateX(4px); }
.eu-tile__badge { position: absolute; top: 14px; inset-inline-end: 14px; font-family: var(--font-num); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(var(--ember-rgb), .15); color: var(--ember-2); border: 1px solid rgba(var(--ember-rgb), .35); }

/* إحصائية/نتيجة */
.eu-stat { position: relative; padding: 18px 16px; border-radius: var(--radius); background: rgba(0,0,0,.25); border: 1px solid var(--line); text-align: center; overflow: hidden; }
html[data-theme="parchment"] .eu-stat { background: rgba(255,255,255,.45); }
.eu-stat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(var(--gold-rgb), .18), transparent 60%); }
.eu-stat img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); position: relative; }
.eu-stat__value, .eu-stat .result-value { position: relative; font-family: var(--font-num); font-size: 1.9rem; font-weight: 700; color: var(--gold-2); line-height: 1.1; text-shadow: 0 0 18px rgba(var(--gold-rgb), .35); }
.eu-stat__label, .eu-stat .result-label { position: relative; color: var(--text-3); font-size: .78rem; margin-top: 6px; letter-spacing: .02em; }
.eu-stat.is-bump .eu-stat__value, .eu-stat.is-bump .result-value, .eu-bump { animation: euBump .55s var(--ease-bounce); }
@keyframes euBump { 0% { transform: scale(1); } 35% { transform: scale(1.14); color: var(--ember-2); } 100% { transform: scale(1); } }

/* شارات */
.eu-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-family: var(--font-num); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); background: rgba(var(--gold-rgb), .08); color: var(--gold); }
.eu-badge--ember { border-color: rgba(var(--ember-rgb), .4); background: rgba(var(--ember-rgb), .12); color: var(--ember-2); }
.eu-badge--live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(95,179,106,.6); animation: euPing 1.6s ease-out infinite; }
@keyframes euPing { to { box-shadow: 0 0 0 9px rgba(95,179,106,0); } }

/* فاصل زخرفي بسيوف */
.eu-divider { display: flex; align-items: center; gap: 16px; margin: 36px auto; max-width: 720px; color: var(--gold); }
.eu-divider::before, .eu-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); }
.eu-divider svg { width: 28px; height: 28px; filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .5)); }

/* عنوان قسم */
.eu-sec-title { text-align: center; margin: 0 auto 28px; max-width: 760px; }
.eu-sec-title h2 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--text); }
.eu-sec-title p { color: var(--text-2); margin: 10px 0 0; }

/* ---------------------------------------------------------------------
   10) الأزرار
--------------------------------------------------------------------- */
.eu-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(var(--gold-rgb), .08); color: var(--gold-2); font-family: var(--font-body); font-weight: 800; font-size: .95rem; cursor: pointer; overflow: hidden; transition: all .3s var(--ease); text-decoration: none; }
.eu-btn::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); transition: left .6s var(--ease); }
.eu-btn:hover::before { left: 160%; }
.eu-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-gold); color: var(--gold-2); }
.eu-btn:active { transform: translateY(0); }
.eu-btn--primary { background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3)); color: var(--text-on-accent); border-color: var(--gold-3); text-shadow: 0 1px 0 rgba(255,255,255,.25); box-shadow: 0 8px 22px rgba(var(--gold-rgb), .3), inset 0 1px 0 rgba(255,255,255,.4); }
.eu-btn--primary:hover { color: var(--text-on-accent); box-shadow: 0 12px 30px rgba(var(--gold-rgb), .45), inset 0 1px 0 rgba(255,255,255,.4); }
.eu-btn--ember { background: linear-gradient(180deg, var(--ember-2), var(--ember) 50%, var(--blood)); color: #fff; border-color: var(--blood); box-shadow: 0 8px 22px rgba(var(--ember-rgb), .35); }
.eu-btn--ember:hover { color: #fff; box-shadow: 0 12px 30px rgba(var(--ember-rgb), .5); }
.eu-btn--ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.eu-btn--ghost:hover { color: var(--gold-2); border-color: var(--line-strong); }
.eu-btn--sm { padding: 8px 16px; font-size: .82rem; border-radius: 8px; }
.eu-btn--block { width: 100%; }
.eu-btn img, .eu-btn svg { width: 20px; height: 20px; object-fit: contain; }

/* ---------------------------------------------------------------------
   11) النماذج (مدخلات، قوائم)
--------------------------------------------------------------------- */
.eu-field { display: flex; flex-direction: column; gap: 8px; }
.eu-field > label, .eu-label { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 800; color: var(--text-2); letter-spacing: .01em; }
.eu-field > label img, .eu-label img { width: 26px; height: 26px; object-fit: contain; }
.eu-input, .eu-select, .eu-form input:not([type="checkbox"]):not([type="radio"]), .eu-form select, .eu-form textarea {
  width: 100%; appearance: none; -webkit-appearance: none; font-family: var(--font-num); font-weight: 600; font-size: 1rem;
  color: var(--text); background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-height: 48px;
  transition: border-color .25s, box-shadow .25s, background .25s; outline: none; }
html[data-theme="parchment"] .eu-input, html[data-theme="parchment"] .eu-select, html[data-theme="parchment"] .eu-form input:not([type="checkbox"]):not([type="radio"]), html[data-theme="parchment"] .eu-form select, html[data-theme="parchment"] .eu-form textarea { background: rgba(255,255,255,.6); }
.eu-input:focus, .eu-select:focus, .eu-form input:focus, .eu-form select:focus, .eu-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .15), var(--glow-gold); background: rgba(0,0,0,.4); }
html[data-theme="parchment"] .eu-form input:focus, html[data-theme="parchment"] .eu-form select:focus { background: #fff; }
.eu-select, .eu-form select { cursor: pointer; padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4a24c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
html[dir="rtl"] .eu-select, html[dir="rtl"] .eu-form select { background-position: left 14px center; }
.eu-form select option, .eu-select option { background: var(--bg-3); color: var(--text); }
.eu-form input::placeholder, .eu-form textarea::placeholder { color: var(--text-3); font-family: var(--font-body); font-weight: 400; }
.eu-form input[type="number"]::-webkit-inner-spin-button { opacity: .6; }
.eu-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
.eu-form textarea { font-family: var(--font-body); font-weight: 400; resize: vertical; min-height: 110px; }

/* ---------------------------------------------------------------------
   12) الجداول
--------------------------------------------------------------------- */
.eu-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.eu-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.eu-table th { font-family: var(--font-num); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); background: rgba(var(--gold-rgb), .08); padding: 12px 14px; border-bottom: 1px solid var(--line-strong); text-align: center; }
.eu-table td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--line-soft); color: var(--text-2); font-family: var(--font-num); }
.eu-table tbody tr { transition: background .2s; }
.eu-table tbody tr:hover { background: rgba(var(--gold-rgb), .07); }
.eu-table tbody tr:hover td { color: var(--text); }

/* ---------------------------------------------------------------------
   13) الفوتر
--------------------------------------------------------------------- */
.eu-footer { position: relative; margin-top: auto; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); }
html[data-theme="parchment"] .eu-footer { background: linear-gradient(180deg, transparent, rgba(138,90,22,.08)); }
.eu-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--ember), var(--gold), transparent); }
.eu-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 34px; padding: 50px 0 34px; }
.eu-footer__grid--3 { grid-template-columns: 1.6fr 1fr 1fr; }
.eu-footer h4 { font-size: .78rem; font-family: var(--font-num); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.eu-footer h4::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.eu-footer__brand img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold-3); padding: 4px; background: var(--bg-2); margin-bottom: 12px; }
.eu-footer__brand p { color: var(--text-2); font-size: .9rem; }
.eu-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eu-footer ul a { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: .9rem; transition: all .25s; }
.eu-footer ul a img { width: 20px; height: 20px; object-fit: contain; opacity: .85; }
.eu-footer ul a:hover { color: var(--gold-2); transform: translateX(var(--eu-dx, 4px)); }
html[dir="rtl"] .eu-footer ul a:hover { --eu-dx: -4px; }
.eu-share { display: flex; gap: 10px; flex-wrap: wrap; }
.eu-share a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--gold-rgb), .06); transition: all .3s var(--ease-bounce); }
.eu-share a img { width: 22px; height: 22px; filter: invert(.85) sepia(.6) saturate(2) hue-rotate(-10deg); }
html[data-theme="parchment"] .eu-share a img { filter: invert(.3) sepia(.8) saturate(2); }
.eu-share a:hover { transform: translateY(-4px) rotate(-6deg); border-color: var(--gold); box-shadow: var(--glow-gold); }
.eu-alliances { display: flex; flex-direction: column; gap: 6px; }
.eu-alliances span { font-family: var(--font-num); font-size: .9rem; color: var(--gold-2); padding: 6px 10px; border-radius: 8px; background: rgba(var(--gold-rgb), .06); border: 1px solid var(--line-soft); transition: all .3s; }
.eu-alliances span:hover { border-color: var(--gold); transform: translateX(var(--eu-dx, 4px)); }
html[dir="rtl"] .eu-alliances span:hover { --eu-dx: -4px; }
.eu-footer__backlinks { padding: 22px 0 6px; border-top: 1px dashed var(--line); }
.eu-footer__backlinks h4 { margin-bottom: 14px; }
.eu-backlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.eu-backlink { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(var(--gold-rgb), .05); color: var(--text-2); font-weight: 700; font-size: .88rem; transition: all .25s var(--ease); }
.eu-backlink__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--gold-rgb), .1); color: var(--gold); flex-shrink: 0; }
.eu-backlink__ic svg { width: 16px; height: 16px; }
.eu-backlink:hover { color: var(--gold-2); border-color: var(--line-strong); background: rgba(var(--gold-rgb), .1); transform: translateY(-2px); box-shadow: var(--shadow-1); }
html[data-theme="parchment"] .eu-backlink { background: rgba(255,255,255,.45); }
@media (max-width: 900px) { .eu-backlinks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .eu-backlinks { grid-template-columns: 1fr; } }
.eu-footer__bottom { border-top: 1px solid var(--line); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--text-3); font-size: .82rem; }
.eu-footer__bottom b { color: var(--gold); }
.eu-footer__keywords { padding: 0 0 22px; color: var(--text-3); font-size: .74rem; line-height: 1.9; text-align: center; }
.eu-footer__keywords a { color: var(--text-3); border-bottom: 1px dotted var(--line-strong); }
.eu-footer__keywords a:hover { color: var(--gold); }

/* شريط التحالفات المتحرك (Marquee) */
.eu-marquee { overflow: hidden; direction: ltr; border-block: 1px solid var(--line); background: rgba(var(--gold-rgb), .05); padding: 10px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.eu-marquee__track { display: flex; gap: 48px; width: max-content; animation: euMarquee 30s linear infinite; }
.eu-marquee:hover .eu-marquee__track { animation-play-state: paused; }
.eu-marquee__track span { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-num); font-weight: 700; color: var(--gold-2); font-size: 1rem; white-space: nowrap; }
.eu-marquee__track span img { width: 24px; height: 24px; object-fit: contain; }
@keyframes euMarquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   14) قائمة الزر الأيمن + زر الصعود + تنبيهات
--------------------------------------------------------------------- */
.eu-ctx { position: fixed; z-index: 9000; min-width: 220px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-3); display: none; transform-origin: top; animation: euCtx .18s var(--ease); }
.eu-ctx.is-open { display: block; }
@keyframes euCtx { from { opacity: 0; transform: scale(.95) translateY(-4px); } }
.eu-ctx__title { font-family: var(--font-num); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.eu-ctx a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-size: .88rem; font-weight: 700; transition: all .15s; }
.eu-ctx a img { width: 20px; height: 20px; object-fit: contain; }
.eu-ctx a:hover { background: rgba(var(--gold-rgb), .1); color: var(--gold-2); }
.eu-totop { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 800; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--gold); display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .35s var(--ease); box-shadow: var(--shadow-2); }
.eu-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.eu-totop:hover { background: var(--gold); color: var(--text-on-accent); box-shadow: var(--glow-gold); }
.eu-totop svg { width: 20px; height: 20px; }
.eu-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); z-index: 9500; padding: 12px 18px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--text); font-weight: 700; box-shadow: var(--shadow-3); opacity: 0; transition: all .35s var(--ease); display: flex; align-items: center; gap: 10px; }
.eu-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   15) نافذة التواصل (مشتركة)
--------------------------------------------------------------------- */
#popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); z-index: 10000; display: none; animation: euFade .3s ease; }
@keyframes euFade { from { opacity: 0; } }
#contact-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); z-index: 10001; width: 92%; max-width: 480px; padding: 34px 28px 28px; border-radius: var(--radius-l); background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3), var(--glow-gold); opacity: 0; transition: all .45s var(--ease-bounce); color: var(--text); }
#contact-popup.show { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
#contact-popup::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--ember)); border-radius: var(--radius-l) var(--radius-l) 0 0; }
#contact-popup h2 { font-size: 1.5rem; color: var(--gold-2); text-align: center; margin: 0 0 8px; }
#contact-popup p { text-align: center; color: var(--text-2); font-size: .92rem; margin-bottom: 18px; }
#contact-popup input, #contact-popup textarea { width: 100%; margin: 7px 0; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text); font-family: var(--font-body); font-size: .95rem; outline: none; transition: all .25s; }
#contact-popup input:focus, #contact-popup textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .15); }
#contact-popup button[type="submit"] { width: 100%; margin-top: 12px; padding: 14px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: 1rem; color: var(--text-on-accent); background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3)); box-shadow: 0 8px 22px rgba(var(--gold-rgb), .3); transition: all .3s; }
#contact-popup button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--gold-rgb), .45); }
#close-contact { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text-2); cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: all .3s; }
#close-contact:hover { background: var(--ember); color: #fff; transform: rotate(90deg); }

/* ---------------------------------------------------------------------
   16) حركات الظهور (Scroll reveal)
--------------------------------------------------------------------- */
.eu-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.eu-reveal.is-in { opacity: 1; transform: none; }
.eu-reveal--left { transform: translateX(-30px); }
.eu-reveal--right { transform: translateX(30px); }
.eu-reveal--zoom { transform: scale(.92); }
.eu-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.eu-stagger.is-in > * { opacity: 1; transform: none; }
.eu-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; } .eu-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
.eu-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; } .eu-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
.eu-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; } .eu-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; }
.eu-stagger.is-in > *:nth-child(7) { transition-delay: 480ms; } .eu-stagger.is-in > *:nth-child(8) { transition-delay: 560ms; }
.eu-stagger.is-in > *:nth-child(n+9) { transition-delay: 640ms; }

/* ---------------------------------------------------------------------
   17) شبكات مساعدة
--------------------------------------------------------------------- */
.eu-grid { display: grid; gap: 20px; }
.eu-grid--2 { grid-template-columns: repeat(2, 1fr); }
.eu-grid--3 { grid-template-columns: repeat(3, 1fr); }
.eu-grid--4 { grid-template-columns: repeat(4, 1fr); }
.eu-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.eu-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.eu-center { text-align: center; }
.eu-mt { margin-top: 24px; } .eu-mb { margin-bottom: 24px; }
.eu-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: rgba(var(--gold-rgb), .07); border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); color: var(--text-2); font-size: .9rem; }
.eu-note img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.eu-note--ember { background: rgba(var(--ember-rgb), .08); border-color: rgba(var(--ember-rgb), .3); border-inline-start-color: var(--ember); }
.eu-note--ok { background: rgba(95,179,106,.08); border-color: rgba(95,179,106,.3); border-inline-start-color: var(--ok); }

/* ---------------------------------------------------------------------
   18) الاستجابة
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .eu-nav { display: none; }
  .eu-burger { display: flex; }
}
@media (max-width: 1180px) {
  .eu-footer__grid { grid-template-columns: 1fr 1fr; }
  .eu-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .eu-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --topbar-h: 64px; }
  .eu-topbar__in { padding: 0 14px; gap: 10px; }
  .eu-brand__name { font-size: 1rem; }
  .eu-brand__tag { display: none; }
  .eu-lang button { padding: 0 9px; height: 36px; font-size: .72rem; }
  .eu-iconbtn { width: 38px; height: 38px; }
  .eu-theme__pop { position: fixed; top: calc(var(--topbar-h) + 8px); left: 12px; right: 12px; width: auto; }
  .eu-hero { padding: 36px 0 28px; }
  .eu-hero__icon { width: 84px; height: 84px; }
  .eu-hero__icon img { width: 54px; height: 54px; }
  .eu-footer__grid { grid-template-columns: 1fr; gap: 26px; padding: 36px 0 24px; }
  .eu-grid--2, .eu-grid--3, .eu-grid--4 { grid-template-columns: 1fr; }
  .eu-card__body { padding: 18px; }
  .eu-card__head { padding: 14px 18px; }
  .eu-container { padding: 0 16px; }
  .eu-footer__bottom { justify-content: center; text-align: center; }
  .eu-totop { bottom: 16px; inset-inline-end: 16px; width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------------
   19) تقليل الحركة
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .eu-reveal, .eu-stagger > * { opacity: 1 !important; transform: none !important; }
  #eu-embers { display: none; }
}