/* موقعُ منظومةِ X-Bio Sentinel — ورقةٌ واحدةٌ على هويّةِ الشركةِ v5 «الأداة — داكنة» (‏2026-09-17).
   لا CDN ولا خطوطَ خارجيّة: خطوطُ IBM Plex محلّيّةٌ من assets/fonts، والعربيّةُ لا تُلبَسُ Mono. */
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSansArabic-400-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexSansArabic-500-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexSansArabic-600-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSansArabic-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexSansArabic-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexSansArabic-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexMono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexMono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ⟦tokens:v5⟧ مولَّدٌ من design-system/nexus-prime-xr/tokens.json بـ tools/gen_tokens.py — لا يُحرَّر يدويًّا */
:root {
  --bg: #0A0D12;
  --night: #0B1424;
  --deep: #07090D;
  --panel: #15181D;
  --raise: #1B2027;
  --line: #232830;
  --engrave: #2C323C;
  --edge: rgba(255, 255, 255, 0.06);
  --ink: #F2F4F7;
  --ink-2: #AEB5BF;
  --mute: #7C848F;
  --accent: #3D7BFF;
  --accent-ink: #8FB2FF;
  --accent-strong: #2F6BF0;
  --accent-press: #2A62E6;
  --accent-wash: rgba(61, 123, 255, 0.10);
  --accent-line: rgba(61, 123, 255, 0.45);
  --glow: rgba(61, 123, 255, 0.35);
  --live: #3DDC97;
  --wait: #FFB547;
  --down: #FF5A5F;
  --off: #7C8799;
  --live-wash: rgba(61, 220, 151, 0.12);
  --wait-wash: rgba(255, 181, 71, 0.12);
  --down-wash: rgba(255, 90, 95, 0.12);
  --live-line: rgba(61, 220, 151, 0.35);
  --wait-line: rgba(255, 181, 71, 0.35);
  --down-line: rgba(255, 90, 95, 0.38);
  --r-lg: 8px;
  --r-md: 6px;
  --r-sm: 4px;
  --ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lift: 0 18px 40px -22px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --grid: radial-gradient(rgba(174, 181, 191, 0.07) 1px, transparent 1.2px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 280ms;
  --dur-4: 460ms;
  --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1);
}
/* ⟦/tokens⟧ */

/* ── مقاييسُ الموقعِ وجسرُ الأسماء ── */
:root{ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:112px; --w:1120px;
  --font-body:var(--ar); --mono-ar:"IBM Plex Mono", var(--ar) }

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; min-height:100dvh }
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--grid); background-size:22px 22px; opacity:.5 }
body > *{ position:relative; z-index:1 }
[hidden]{ display:none!important }
img{ max-width:100%; height:auto; display:block }
a{ color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--ink) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm) }
h1,h2,h3{ line-height:1.3; text-wrap:balance; font-weight:600; margin:0 }
p{ margin:0 }
code,.n{ font-family:var(--mono); direction:ltr; unicode-bidi:isolate; font-size:.92em }
.small{ font-size:.85rem; color:var(--mute) }
.wrap{ max-width:var(--w); margin:0 auto; padding-inline:var(--s3) }
.skip{ position:absolute; top:-100px; inset-inline-start:16px; z-index:50; padding:8px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md) }
.skip:focus{ top:16px }

/* ── الجزيرة (شريطُ الملاحة) ── */
.island{ position:fixed; top:16px; inset-inline:0; margin-inline:auto; width:max-content; max-width:calc(100% - 32px); z-index:40;
  display:flex; align-items:center; gap:4px; padding:5px; border-radius:var(--r-lg); background:rgba(10,13,18,.82); border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); box-shadow:var(--lift) }
.island .brand{ display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 8px; border-radius:var(--r-md); color:var(--ink); text-decoration:none;
  font-family:var(--mono); font-weight:500; font-size:.95rem; letter-spacing:.01em; white-space:nowrap }
.island .brand img{ width:26px; height:26px; object-fit:contain }
.island nav{ display:flex; gap:2px }
.island nav a{ position:relative; padding:8px 12px; border-radius:var(--r-sm); color:var(--mute); text-decoration:none; font-size:.92rem; white-space:nowrap;
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease) }
.island nav a:hover{ color:var(--ink); background:var(--raise) }
.island nav a[aria-current=page]{ color:var(--ink) }
.island nav a[aria-current=page]::after{ content:""; position:absolute; inset-inline:12px; bottom:3px; height:2px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px var(--glow) }
.island nav a.lang{ font-family:var(--mono-ar); color:var(--accent-ink); border-inline-start:1px solid var(--line); border-radius:0; margin-inline-start:4px }
.island .menu{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:transparent; color:var(--ink-2); border-radius:var(--r-md); cursor:pointer }
.island .menu:hover{ background:var(--raise); color:var(--ink) }
@media (max-width:900px){
  .island{ width:calc(100% - 32px); justify-content:space-between; flex-wrap:wrap }
  .island .menu{ display:inline-flex }
  .island nav{ display:none; flex-basis:100%; flex-direction:column; gap:0; padding:6px 2px 2px; border-top:1px solid var(--line); margin-top:4px }
  .island nav.open{ display:flex }
  .island nav a{ padding:12px 14px }
  .island nav a[aria-current=page]::after{ inset-inline:auto; inset-inline-start:0; top:12px; bottom:12px; width:2px; height:auto }
  .island nav a.lang{ border-inline-start:0; border-top:1px solid var(--line); margin:4px 0 0 }
}

/* ── الأزرار والعناوينُ الصغيرة ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 18px; min-height:44px; border-radius:var(--r-md);
  border:1px solid var(--line); background:transparent; color:var(--ink-2); font:inherit; font-weight:500; font-size:.95rem; line-height:1.45; text-decoration:none;
  cursor:pointer; touch-action:manipulation; user-select:none; appearance:none; -webkit-appearance:none;
  transition:transform var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease) }
.btn:hover{ background:var(--raise); border-color:var(--engrave); color:var(--ink) }
.btn:active{ transform:scale(.97) }
.btn.primary{ background:var(--accent-strong); border-color:var(--accent-strong); color:#FFFFFF }
.btn.primary:hover{ background:var(--accent-press); border-color:var(--accent-press) }
.btn.sm{ min-height:36px; padding:6px 12px; font-size:.85rem }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none }
.actions{ display:flex; flex-wrap:wrap; gap:10px }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--mute) }
.eyebrow::before{ content:""; flex:none; width:14px; height:2px; background:var(--accent) }
.tag{ color:var(--accent-ink); font-size:.82rem; font-weight:500 }
.latin{ font-family:var(--mono); font-weight:500; letter-spacing:-.01em }

/* ── البطل ── */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--night) }
.hero .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5 }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,13,18,.35) 0%, rgba(10,13,18,.55) 45%, rgba(10,13,18,.96) 100%) }
.hero .in{ position:relative; z-index:1; padding-block:var(--s7) var(--s5); display:flex; flex-direction:column; gap:14px; min-height:min(72vh, 640px); justify-content:end }
.hero h1{ font-size:clamp(2.2rem, 1.4rem + 3vw, 3.8rem) }
.hero .lead{ font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); color:var(--ink-2); max-width:64ch }
.hero .lead b{ color:var(--ink); font-weight:600 }
.hero .actions{ margin-top:8px }
.hero.plain{ background:var(--bg) }
.hero.plain .in{ min-height:0; padding-top:calc(var(--s6) + 56px) }

/* ── الأقسام ── */
.sec{ padding-block:var(--s6) }
.sec + .sec{ border-top:1px solid var(--line) }
.sec h2{ font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom:8px }
.sec .sub{ color:var(--ink-2); max-width:70ch; margin-bottom:var(--s4); font-size:1.05rem }
.sec h3{ font-size:1.1rem }
.note{ color:var(--mute); font-size:.85rem; margin-top:var(--s2) }
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s3) }
.grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s2) }
.grid4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s2) }
.card{ display:flex; flex-direction:column; gap:8px; padding:var(--s3); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--lift) }
.card p{ color:var(--ink-2); font-size:.95rem }
.card.lite{ box-shadow:none; background:var(--deep) }
.card.lite > img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border:1px solid var(--line); border-radius:var(--r-md) }

/* بطاقةُ العضو */
.member{ padding:0; overflow:hidden; display:grid; grid-template-columns:2fr 3fr; gap:0 }
.member > img{ width:100%; height:100%; object-fit:cover; min-height:320px }
.member .body{ padding:var(--s4); display:flex; flex-direction:column; gap:12px }
.member .body h3{ font-size:1.9rem }
.facts{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; color:var(--ink-2); font-size:.92rem }
.facts li{ display:flex; gap:10px; align-items:baseline }
.facts li::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); transform:translateY(-3px) }
.member .actions{ margin-top:auto; padding-top:8px }

/* أرقامٌ مقيسة */
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:var(--s2) }
.stat{ display:flex; flex-direction:column; gap:2px; padding:var(--s2) var(--s3); background:var(--deep); border:1px solid var(--line); border-radius:var(--r-md) }
.stat .n{ font-size:2.1rem; line-height:1.1; color:var(--ink); font-weight:500 }
.stat .l{ color:var(--mute); font-size:.85rem; line-height:1.5 }

/* خطواتٌ مرقّمة (تسلسلٌ حقيقيّ) */
.steps{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:var(--s2) }
.steps li{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding:var(--s2) var(--s3); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md) }
.steps b{ font-family:var(--mono); color:var(--accent-ink); font-size:1.4rem; line-height:1; padding-top:4px }
.steps h3{ font-size:1rem; margin-bottom:4px }
.steps p{ color:var(--ink-2); font-size:.9rem }

/* معرضُ اللقطات */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:var(--s2) }
.gallery figure{ margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift) }
.gallery img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-bottom:1px solid var(--line) }
.gallery figcaption{ padding:10px 14px 12px; font-size:.88rem; color:var(--ink-2) }
.gallery figcaption b{ display:block; color:var(--ink); font-weight:600; margin-bottom:2px }
.gallery.wide{ grid-template-columns:repeat(auto-fill, minmax(360px,1fr)) }

/* بلاطاتُ القطاعاتِ بصورة */
.tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s2) }
.tile{ position:relative; min-height:200px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--panel); display:flex; align-items:end }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity var(--dur-3) var(--ease), transform var(--dur-4) var(--ease-out) }
.tile:hover img{ opacity:.7; transform:scale(1.03) }
.tile div{ position:relative; padding:14px 16px; width:100%; background:linear-gradient(180deg, transparent, rgba(7,9,13,.92)) }
.tile b{ display:block; color:var(--ink); font-weight:600 }
.tile span{ color:var(--ink-2); font-size:.85rem }

/* حالاتُ القرار (ألوانُ الحالِ محجوزةٌ بكلمة) */
.states{ display:flex; flex-wrap:wrap; gap:10px }
.state{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--deep); font-size:.92rem }
.state::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--off) }
.state.live::before{ background:var(--live); box-shadow:0 0 8px var(--live-line) }
.state.wait::before{ background:var(--wait) }
.state.down::before{ background:var(--down) }
.badges{ display:flex; flex-wrap:wrap; gap:8px }
.badge{ padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--engrave); color:var(--ink-2); font-size:.85rem; background:var(--panel) }

/* قوائمُ التنزيل */
.dl{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.dl li{ display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:center; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md) }
.dl .t{ font-weight:600 }
.dl .meta{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; color:var(--mute); font-size:.82rem; margin-top:4px }
.dl code{ color:var(--ink-2) }
.rel{ display:grid; gap:6px; font-size:.92rem }
.rel dt{ color:var(--mute); font-size:.8rem }
.rel dd{ margin:0 0 6px; overflow-wrap:anywhere }
.rel code{ font-size:.85rem }
pre{ margin:0; padding:12px 14px; background:var(--deep); border:1px solid var(--line); border-radius:var(--r-md); overflow-x:auto; font-family:var(--mono); font-size:.85rem; direction:ltr; text-align:left; color:var(--ink-2) }

/* النموذج */
.form{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2) var(--s3) }
.field{ display:grid; gap:6px }
.field.full{ grid-column:1 / -1 }
.field label{ font-size:.9rem; color:var(--ink-2) }
.field label b{ color:var(--down); font-weight:500 }
.field input,.field select,.field textarea{ width:100%; min-height:44px; padding:10px 12px; background:var(--deep); border:1px solid var(--engrave); border-radius:var(--r-md);
  color:var(--ink); font:inherit; line-height:1.5; transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease) }
.field textarea{ min-height:120px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash) }
.field .hint{ font-size:.8rem; color:var(--mute) }
.checks{ display:flex; flex-wrap:wrap; gap:10px 20px }
.checks label{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--ink-2); font-size:.95rem }
.checks input{ width:18px; height:18px; accent-color:var(--accent) }
.notice{ padding:14px 16px; border:1px solid var(--accent-line); background:var(--accent-wash); border-radius:var(--r-md); color:var(--ink-2); font-size:.92rem }
.notice b{ color:var(--ink) }
.result{ display:grid; gap:var(--s2); padding:var(--s3); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg) }
.result textarea{ width:100%; min-height:260px; padding:12px; background:var(--deep); border:1px solid var(--engrave); border-radius:var(--r-md); color:var(--ink); font:inherit; line-height:1.7 }
.limit{ color:var(--mute); font-size:.88rem; line-height:1.8; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep) }

/* التذييل */
.foot{ border-top:1px solid var(--line); padding-block:var(--s5); color:var(--mute); font-size:.86rem; line-height:1.9 }
.foot-grid{ display:grid; grid-template-columns:1.2fr .8fr 1.4fr; gap:var(--s3) }
.foot b{ color:var(--ink-2); font-weight:600 }
.foot a{ color:var(--ink-2); text-decoration:none }
.foot a:hover{ color:var(--ink) }

/* ── الاستجابة والحركة ── */
@media (max-width:900px){
  .grid2,.grid3,.grid4,.tiles,.foot-grid,.form{ grid-template-columns:1fr }
  .member{ grid-template-columns:1fr }
  .member > img{ max-height:280px; min-height:0 }
  .hero .in{ min-height:min(60vh, 520px) }
  .dl li{ grid-template-columns:1fr }
}
@media (min-width:901px) and (max-width:1100px){ .grid4{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition:none!important; animation:none!important }
  .tile:hover img{ transform:none }
}
@media print{ .island,.skip{ display:none } body::before{ display:none } }