@charset "utf-8";
/* ============================================================
   THEGOLDEN MAN — نظام التصميم
   ------------------------------------------------------------
   القرار الحاكم: المعدن يعيش في الشعار، لا في الصفحة.
   كل شاشة حقلٌ أسود دافئ، ثلاث درجات نص، خطوط شعرية بدل
   الظلال، والذهب علامة ترقيم: الشعار، فاصل، زر، رقم.

   البرنامج محرّك قواعد يمتنع عن التداول أكثر مما يتداول،
   والتصميم يجب أن يبدو كدفتر مؤسسة لا كواجهة قناة توصيات.
   الانضباط هو ما يبيع.
   ============================================================ */

@layer tokens, base, layout, components, utilities;

/* ============================================================
   ١ · الرموز
   ============================================================ */
@layer tokens {
:root{

  /* ── سُلّم الأسطح — أسود دافئ، ≤٧ نقاط إضاءة بين الدرجة والتي تليها.
        لا يوجد سطح سادس. إن احتجته فالمشكلة في التسلسل لا في اللوحة. */
  --ink-000:#000000;   /* أسود صافٍ — شريط الشعار وصورة المشاركة فقط */
  --ink-050:#0A0908;   /* أرضية الصفحة */
  --ink-100:#0F0E0C;   /* سطح ١ — البطاقات واللوحات */
  --ink-200:#141310;   /* سطح ٢ — رأس الجدول، الحقول، المتداخل */
  --ink-300:#1A1815;   /* سطح ٣ — التمرير */
  --ink-400:#211E19;   /* سطح ٤ — المضغوط، الأخاديد */

  /* ── الخطوط الشعرية — الأداة البنائية الوحيدة */
  --line-1:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.11);
  --line-3:rgba(255,255,255,.04);        /* فواصل صفوف الجدول */
  --line-gold:rgba(232,196,106,.18);
  --line-gold-2:rgba(232,196,106,.45);   /* أقل شفافية مقبولة لحدٍّ مرئي: 3.09:1 */

  /* ── النص — ثلاث درجات، أبيض مائل للدفء. ليس #fff أبداً. */
  --text-1:#F2EFE8;   /* 17.6:1 */
  --text-2:#A8A296;   /*  7.6:1 */
  --text-3:#7D786D;   /*  4.6:1 — الأرضية */

  /* ── سُلّم الذهب — الدرجة تدور والتشبّع ينهار نحو اللمعة.
        لا تُدرِّج أبداً بين أصفرين: النتيجة بلاستيك. */
  --au-white:#FFFDF2;  --au-hi:#FDF0C4;   --au-pale:#F6E3A8;
  --au-bounce:#F3DDA0; --au-lit:#E8C46A;  /* الذهب الأساس  12.08:1 */
  --au-glow:#E0B95E;   --au-mid:#D9AD48;  --au-2:#C9A03C;
  --au-deep:#B8862B;   --au-anti:#A8791F; /* أرضية AA للنص 5.22:1 */
  --au-shad:#8F6415;   --au-void:#6B4A12; /* 2.52:1 — لا يدخل نصاً أبداً */

  /* ── الدلالات — كلها دون الذهب في التشبّع والإضاءة.
        الذهب يعلو النتيجة دائماً: لحظة يلمس صفقةً رابحة تصير
        الصفحة شاشة أرباح. */
  --pos:#5FA37A;  --neg:#C2685F;  --warn:#C89B4A;
  --danger:#E0524A;                       /* أخطاء النماذج فقط، لا النتائج */
  --pos-bg:rgba(95,163,122,.10);
  --neg-bg:rgba(194,104,95,.10);
  --warn-bg:rgba(200,155,74,.09);
  --au-bg:rgba(232,196,106,.09);

  /* ── الخطوط */
  /* عائلة واحدة متغيّرة تغطّي العربية واللاتينية معاً: طلب واحد بدل
     اثنين، ولا يمكن أن يفترق نسيج العنوان عن نسيج المتن. */
  --f-display:'Cairo',-apple-system,'SF Arabic','Segoe UI',Tahoma,sans-serif;
  --f-body:'Cairo',-apple-system,'SF Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --f-num:'Cairo','Segoe UI',system-ui,sans-serif;

  /* الأوزان — التباين صار وزناً لا عائلة. كايرو ٥٠٠ أخفّ بـ١٢٪ حبراً
     من بلكس ٥٠٠ الذي حلّ محلّه، فالمتن يرتفع إلى ٦٠٠. */
  --w-display:800; --w-title:750; --w-sub:700;
  --w-body:600;    --w-micro:650; --w-num:600;

  /* القياسات — ارتفاع السين في كايرو ٠٫٥٠em مقابل ٠٫٣٤em في الكوفي،
     أي أنه يُقرأ أكبر بنحو ٥٠٪ عند القياس نفسه. السُلّم كله ينزل. */
  --t-xs:.75rem;      /* 12 */
  --t-sm:.875rem;     /* 14 */
  --t-base:1rem;      /* 16 */
  --t-md:1.1875rem;   /* 19 */
  --t-lg:1.4375rem;   /* 23 */
  --t-xl:1.75rem;     /* 28 */
  --t-2xl:2.125rem;   /* 34 */
  --t-3xl:2.625rem;   /* 42 */
  --t-hero:clamp(2rem,5.4vw,3.375rem);
  --t-stat:clamp(1.75rem,4.2vw,2.5rem);

  /* الأسطر — صندوق كايرو ١٫٨٧٤em وحبره ١٫٤٨em عند وزن ٨٠٠.
     العنوان الملتفّ دون ١٫٥٥ تصطدم ياءاته بالسطر التالي فعلياً. */
  --lh-display:1.28;  /* للعنوان المكسور يدوياً داخل .line وحده */
  --lh-title:1.60;    /* لكل عنوان يلتفّ التفافاً طبيعياً */
  --lh-body:1.95;
  --lh-ui:1.45;
  --lh-num:1.15;
  --measure:52ch;

  /* ── المسافات — الأساس ٤px. نسبة القسم إلى العنصر ٧–٨×. */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px;
  --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;
  /* عمودان هما عمودان: المسافة بينهما ليست قراراً يُتّخذ في كل قسم */
  --gutter:40px;
  --pad-section:clamp(72px,8vw,112px);
  --w-container:1120px;
  --w-narrow:720px;

  /* ── الأنصاف — التمويل المؤسسي ٨/١٢. ما فوق ٢٠ تطبيق استهلاكي. */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:14px; --r-pill:9999px;

  /* ── الارتفاع — الظلال لا وجود لها على الأسود.
        الارتفاع = درجة سطح + حافة علوية مضيئة بسمك ١px. */
  --lift-0:none;
  --lift-1:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.7);
  --lift-2:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.7),
           0 12px 32px -16px rgba(0,0,0,.9);
  --lift-gold:inset 0 1px 0 rgba(255,253,242,.9),
              inset 0 -1px 0 rgba(110,72,10,.55),
              0 10px 24px -12px rgba(232,196,106,.45);

  /* ── الحركة — عائلة منحنيات واحدة. لا تجاوز أبداً. */
  --t1:120ms; --t2:200ms; --t3:320ms; --t4:520ms; --t5:780ms;
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-hero:cubic-bezier(.16,1,.3,1);
  --step:70ms;
  --dir:1;

  --z-header:40; --z-drawer:60; --z-dialog:70; --z-toast:80;
}

[dir="rtl"]{ --dir:-1 }
}

/* ============================================================
   ٢ · الأساس
   ============================================================ */
@layer base {
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip;
  scroll-padding-block-start:88px }
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth }
}

body{
  margin:0;
  background:var(--ink-050);
  color:var(--text-1);
  font-family:var(--f-body);
  font-size:var(--t-base);
  font-weight:var(--w-body);          /* ٦٠٠ — كايرو ٥٠٠ أخفّ من بلكس ٥٠٠ */
  line-height:var(--lh-body);
  letter-spacing:normal;
  -webkit-font-smoothing:auto;        /* التنعيم الرمادي يُنحّف شعيرات العربية */
  text-rendering:optimizeLegibility;
  /* القصّ الأفقي يعيش على html: على body كان hidden يجعله حاوية
     التمرير (فتقفز الروابط تحت الرأس)، وclip كان يفكّ الرأس الملتصق */
}
:lang(ar){ font-synthesis:none; font-style:normal }
/* القاعدة الأعلى صوتاً في الطباعة العربية: لا تباعد حروف إطلاقاً —
   يقطع الوصلات ويحوّل الكلمة إلى شظايا. */
:lang(ar),[lang^="ar"],[dir="rtl"]{ letter-spacing:normal }

h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:var(--w-sub);
  line-height:var(--lh-title); letter-spacing:0;
  text-wrap:balance; margin:0;
  padding-block:.02em .08em;    /* نزلات كايرو ٠٫٤٥em مقابل ٠٫٢١em للكوفي */
}
h1{ font-size:var(--t-hero); font-weight:var(--w-display) }
h2{ font-size:var(--t-xl);   font-weight:var(--w-title) }
h3{ font-size:var(--t-md) }
h4{ font-size:var(--t-base) }
p{ margin:0; max-width:var(--measure); text-wrap:pretty }

a{ color:inherit; text-decoration:none }
a.link{ color:var(--au-lit); text-decoration:underline;
        text-underline-offset:.24em; text-decoration-thickness:1px }
a.link:hover{ color:var(--au-hi) }

button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer; background:none; border:0 }
img,svg{ display:block; max-width:100% }
::selection{ background:rgba(232,196,106,.26); color:var(--text-1) }

:focus-visible{
  outline:2px solid var(--au-lit); outline-offset:2px; border-radius:var(--r-xs);
}
:focus:not(:focus-visible){ outline:none }

/* شريط التمرير */
*{ scrollbar-width:thin; scrollbar-color:var(--ink-400) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{ background:var(--ink-400); border-radius:var(--r-pill);
  border:3px solid transparent; background-clip:content-box }
*::-webkit-scrollbar-thumb:hover{ background:#2C2823; background-clip:content-box }
*::-webkit-scrollbar-track{ background:transparent }
}

/* ============================================================
   ٣ · التخطيط
   ============================================================ */
@layer layout {
.container{ max-width:var(--w-container); margin-inline:auto;
            padding-inline:clamp(20px,5vw,40px) }
/* حشوة واحدة لكل قسم. الإيقاع هو ما كان ناقصاً، لا المسافة. */
.measure{ max-inline-size:var(--w-narrow) }   /* على المحتوى لا على .container */
.section,.section--tight{ padding-block:var(--pad-section) }

.stack{ display:grid; gap:var(--s-6) }
.stack-sm{ display:grid; gap:var(--s-3) }
.stack-lg{ display:grid; gap:var(--s-10) }
.row{ display:flex; align-items:center; gap:var(--s-3) }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4) }
.wrap{ flex-wrap:wrap }
.grow{ flex:1 1 auto; min-width:0 }

/* الفاصل الذهبي المتلاشي — أحد المواضع الثمانية المسموح بها للذهب */
.rule{ border:0; block-size:1px; margin:0;
  background:linear-gradient(90deg,transparent,var(--line-gold) 18%,
             rgba(253,240,196,.42) 50%,var(--line-gold) 82%,transparent) }
.rule-plain{ border:0; border-block-start:1px solid var(--line-1); margin:0 }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
}

/* ============================================================
   ٤ · المكوّنات
   ============================================================ */
@layer components {

/* ── ٤٫١ الطباعة الخاصة ─────────────────────────────────── */

/* الحاجب: العربية لا تُكبَّر ولا تُباعَد، وتباعد الكلمات آمن لأنه
   يوسّع المسافة وحدها. والذهب هنا صار ورق حائط — عشرة حواجب ذهبية
   في تمريرة واحدة — فبقي منه حاجب المقدّمة وحده. */
.eyebrow{ font-size:var(--t-sm); font-weight:var(--w-micro); color:var(--text-3);
  word-spacing:.18em; margin:0 }
.hero .eyebrow{ color:var(--au-lit) }

.lead{ font-size:var(--t-md); line-height:1.7; color:var(--text-2) }
.muted{ color:var(--text-2) } .dim{ color:var(--text-3) }
.tiny{ font-size:var(--t-xs); color:var(--text-3); line-height:var(--lh-ui) }

/* ── ٤٫٢ الأرقام — لاتينية، جدولية، معزولة اتجاهياً ────── */
.num,td.num,th.num,.stat-v,time.num{
  font-family:var(--f-num);
  font-weight:var(--w-num);
  /* لا tnum ولا lnum: كايرو لا يملك الميزتين ولا يحتاجهما — أرقامه
     اللاتينية متساوية العرض عند كل وزن، وعرض «−» و«$» يساوي عرض
     الرقم بالضبط، فتصطفّ حافة الإشارة في عمود المبالغ. */
  direction:ltr; unicode-bidi:isolate;
  letter-spacing:0;
}

/* تعويض القياس البصري بالوزن: كايرو بلا محور opsz (fvar = wght وحده)،
   فكلّما صغر القياس زاد الوزن خمسين وحدة. */
.tiny,.eyebrow,.stat-l,.pill,.lv,.tbl thead th,.hdr nav a{
  font-weight:var(--w-micro);
}
.field>label{ font-weight:600 }

/* ── ٤٫٣ الذهب ────────────────────────────────────────────
   الزاوية ١٧٨° لا ١٨٠°: الميل درجتان يكسر استواء CSS ويوحي
   بضوءٍ علويّ. قريبة من العمودي فلا تحتاج نسخة RTL. */

/* السُلّم الكامل — ≥٢٦px فقط */
.au-metal{
  color:var(--au-lit);                       /* البديل يُعلَن أولاً */
  font-weight:var(--w-display);              /* ٩٠٠ يطبق شريط اللمعة */
  background:linear-gradient(178deg,
    #6B4A12 0%, #A8791F 8%, #E0B95E 22%, #FDF0C4 38%,
    #FFFDF2 45%, #F6E3A8 47%,                /* شريط اللمعة — عرضه ٢٪ */
    #D9AD48 52%, #8F6415 68%,                /* أخدود الأفق */
    #C9A03C 82%, #F3DDA0 92%, #A8791F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* السُلّم المضغوط — ١٤–٢٦px، أغمق درجة 8.26:1 */
.au-safe{
  color:var(--au-lit);
  background:linear-gradient(178deg,#C9A03C 0%,#E8C46A 14%,#F6E3A8 30%,#FFFDF2 44%,
    #F0D795 50%,#DCB055 62%,#C9A03C 78%,#E8C46A 92%,#D4AA48 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.au-solid{ color:var(--au-lit) }              /* دون ١٤px — بلا استثناء */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .au-metal,.au-safe{ background:none; color:var(--au-lit) }
}

/* ── ٤٫٤ الأزرار ──────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-block-size:44px; padding-inline:var(--s-5);
  border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:700;
  line-height:1.2; white-space:nowrap;
  transition:background var(--t1) var(--e-out), border-color var(--t1) var(--e-out),
             color var(--t1) var(--e-out), opacity var(--t1) var(--e-out);
}
.btn[disabled],.btn[aria-busy="true"]{ opacity:.5; pointer-events:none }

/* زر ذهبي واحد لكل شاشة. الحافة تفعل أكثر مما تفعله التعبئة. */
.btn-gold{
  color:#150E00; border:0;
  background:linear-gradient(178deg,#FDF0C4 0%,#F0D795 18%,#E8C46A 42%,
             #D9AD48 55%,#C9A03C 78%,#B8862B 100%);
  box-shadow:var(--lift-gold); font-weight:700;
}
.btn-gold:hover{ background:linear-gradient(178deg,#FFFDF2 0%,#F6E3A8 18%,#EFCE7C 42%,
                 #E0B95E 55%,#D4AA48 78%,#C4922F 100%) }
.btn-gold:active{ box-shadow:inset 0 1px 0 rgba(255,253,242,.5),
                  inset 0 2px 6px rgba(90,60,10,.4) }

.btn-ghost{ color:var(--text-1); background:var(--ink-100);
  border:1px solid var(--line-1); box-shadow:var(--lift-1) }
.btn-ghost:hover{ background:var(--ink-200); border-color:var(--line-2) }

.btn-quiet{ color:var(--text-2); border:1px solid transparent }
.btn-quiet:hover{ color:var(--text-1); background:var(--ink-200) }

.btn-danger{ color:var(--danger); background:transparent;
  border:1px solid rgba(224,82,74,.4) }
.btn-danger:hover{ background:rgba(224,82,74,.12); border-color:rgba(224,82,74,.6) }

.btn-sm{ min-block-size:34px; padding-inline:var(--s-3); font-size:var(--t-xs) }
.btn-block{ inline-size:100% }

/* ── ٤٫٥ البطاقات ─────────────────────────────────────── */
.card{
  background:var(--ink-100); border:1px solid var(--line-1);
  border-radius:var(--r-md); box-shadow:var(--lift-1); padding:var(--s-6);
}
.card-pad-sm{ padding:var(--s-4) }
/* الحافة الذهبية الموجَّهة — بطاقة واحدة في الصفحة، لا أكثر */
.card--feature{
  border:1px solid transparent; border-radius:var(--r-lg);
  background:linear-gradient(var(--ink-100),var(--ink-100)) padding-box,
    linear-gradient(155deg,rgba(232,196,106,.30) 0%,rgba(232,196,106,.06) 38%,
    transparent 68%) border-box;
}
[dir="rtl"] .card--feature{
  background:linear-gradient(var(--ink-100),var(--ink-100)) padding-box,
    linear-gradient(205deg,rgba(232,196,106,.30) 0%,rgba(232,196,106,.06) 38%,
    transparent 68%) border-box;
}

/* ── ٤٫٦ شريط الإحصاءات ───────────────────────────────
   فجوات الشبكة ١px فوق خلفية خطية = فواصل شعرية مجاناً */
.strip{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:1px;
  background:var(--line-1); border:1px solid var(--line-1);
  border-radius:var(--r-md); overflow:hidden }
.cell{ background:var(--ink-100); padding:var(--s-5) }
.cell.lead-cell .stat-v{ font-size:var(--t-stat) }
.stat-v{ font-size:var(--t-md); font-weight:500; line-height:var(--lh-num);
  color:var(--text-1); display:block }
.stat-l{ font-size:var(--t-sm); color:var(--text-3); margin-block-start:var(--s-2);
  line-height:var(--lh-ui) }
@media (max-width:920px){
  .strip{ grid-template-columns:1fr 1fr }
  .cell.lead-cell{ grid-column:1/-1 }
}

/* ── ٤٫٧ شارات الحالة — الحالة محسوبة واحدة، لا أربع قيم ── */
.pill{ display:inline-flex; align-items:center; gap:6px; block-size:22px;
  border-radius:var(--r-pill); border:1px solid; padding-inline:9px;
  font-size:var(--t-xs); font-weight:600; line-height:1.2; white-space:nowrap }
.pill i{ inline-size:6px; block-size:6px; border-radius:var(--r-pill);
  background:currentColor; flex:none }   /* النقطة تُبقي الحالة قائمة بلا لون */
.pill[data-s=active]  { color:var(--au-lit); border-color:var(--line-gold-2); background:var(--au-bg) }
.pill[data-s=expiring]{ color:var(--warn); border-color:rgba(200,155,74,.45); background:var(--warn-bg) }
.pill[data-s=demo]    { color:var(--text-3); border-color:var(--line-2); background:var(--ink-200) }
.pill[data-s=unlinked]{ color:var(--text-3); border-color:var(--line-2); border-style:dashed }
.pill[data-s=blocked] { color:var(--neg); border-color:rgba(194,104,95,.45); background:var(--neg-bg) }
.pill[data-s=win]     { color:var(--pos); border-color:rgba(95,163,122,.4); background:var(--pos-bg) }
.pill[data-s=loss]    { color:var(--neg); border-color:rgba(194,104,95,.4); background:var(--neg-bg) }

/* ── ٤٫٨ مؤشر الحياة — ثلاث حالات ───────────────────── */
.lv{ display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--t-xs); color:var(--text-3) }
.lv i{ inline-size:7px; block-size:7px; border-radius:var(--r-pill);
  background:var(--pos); position:relative; flex:none }
.lv[data-s="live"] i::after{ content:""; position:absolute; inset:0;
  border-radius:var(--r-pill); box-shadow:0 0 0 0 rgba(95,163,122,.55);
  animation:png 2.2s var(--e-out) infinite; animation-play-state:paused }
.lv[data-s="live"].is-in i::after{ animation-play-state:running }
@keyframes png{ to{ box-shadow:0 0 0 9px transparent } }
.lv[data-s="delayed"] i{ background:var(--warn) }
.lv[data-s="delayed"] i::after{ animation:none }
.lv[data-s="off"] i{ background:var(--text-3) }
.lv[data-s="off"] i::after{ animation:none }

/* ── ٤٫٩ النتائج — شكل + كلمة، لا لون وحده ───────────
   المثلثات مرسومة بالحدود لا بمحرف: ▲ و▼ غير موجودَين في كايرو،
   وكانا ينزلان إلى خط النظام بحجم ووزن مختلفين وسط الكلمة. */
.win{ color:var(--pos) }  .loss{ color:var(--neg) }  .flat{ color:var(--text-3) }
.win::before,.loss::before,.flat::before{
  content:""; display:inline-block; vertical-align:.08em;
  margin-inline-end:.35em; inline-size:0; block-size:0;
  border-inline:.32em solid transparent }
.win::before { border-block-end:.42em solid currentColor }
/* td يحمل win/loss كخطّاف لون فقط — مثلثه يعيش في .pnl-v داخله */
.tbl td.win::before,.tbl td.loss::before,.tbl td.flat::before{ content:none }
.loss::before{ border-block-start:.42em solid currentColor }
.flat::before{ border:0; inline-size:.62em; block-size:2px;
  background:currentColor; vertical-align:.28em }

/* ── ٤٫١٠ المقياس وعتبته ─────────────────────────────
   علامة عتبة مرئية تجاوزها الرقم أقوى مصداقيةً من كلمة «قوية» */
.mtr{ display:block; block-size:3px; background:var(--ink-400); border-radius:var(--r-xs);
  margin-block-start:var(--s-2); position:relative; direction:ltr; overflow:visible }
.mtr>i{ display:block; block-size:100%; inline-size:calc(var(--v,0) * 100%);
  border-radius:var(--r-xs);
  background:linear-gradient(90deg,var(--au-anti),var(--au-lit));
  transition:inline-size var(--t4) var(--e-out) }
.mtr::after{ content:""; position:absolute; inset-block:-3px;
  left:calc(var(--thr,.5) * 100%); inline-size:1px; background:var(--text-3) }

/* ── ٤٫١١ الجداول ────────────────────────────────────
   جدول حقيقي: التخطيط الثابت يمنع قياس كل خلية قبل الرسم */
.tbl-wrap{ overflow-x:auto; overscroll-behavior:contain;
  border:1px solid var(--line-1); border-radius:var(--r-md); background:var(--ink-100) }
.tbl{ inline-size:100%; table-layout:fixed; border-collapse:separate; border-spacing:0 }
.tbl thead th{ position:sticky; inset-block-start:0; z-index:3; block-size:40px;
  background:var(--ink-200);                 /* معتم — لا مرشّح خلفية هنا أبداً */
  border-block-end:1px solid var(--line-2);
  font-size:var(--t-xs); font-weight:500; color:var(--text-3);
  text-align:start; padding-inline:var(--s-3) }
.tbl tbody td{ block-size:56px; padding-inline:var(--s-3);
  border-block-end:1px solid var(--line-3); color:var(--text-2);
  vertical-align:middle; line-height:1.35 }
.tbl tbody tr{ transition:background var(--t1) var(--e-out) }
.tbl tbody tr:hover{ background:rgba(255,255,255,.022) }
.tbl tbody tr:last-child td{ border-block-end:0 }
.tbl td.num,.tbl th.num{ text-align:end }
.tbl .strong{ color:var(--text-1); font-weight:600 }
.term td{ block-size:44px; line-height:1.28 }   /* منطقة كثافة — لا يتسرّب إليها تباعد المتن */

/* يوم امتنع فيه النظام له صفٌّ حقيقي، مُظلَّل، ولا يُحذف أبداً */
.quiet td{ color:var(--text-3);
  background:repeating-linear-gradient(135deg,transparent 0 6px,
             rgba(255,255,255,.02) 6px 12px) }

/* ── ٤٫١٢ الحقول ─────────────────────────────────────── */
.field{ display:grid; gap:var(--s-2) }
.field>label{ font-size:var(--t-sm); color:var(--text-2); font-weight:500 }
.input{
  inline-size:100%; min-block-size:46px; padding:0 var(--s-4);
  background:var(--ink-200); color:var(--text-1);
  border:1px solid var(--line-1); border-radius:var(--r-sm);
  transition:border-color var(--t1) var(--e-out), background var(--t1) var(--e-out);
}
.input::placeholder{ color:var(--text-3) }
.input:hover{ border-color:var(--line-2) }
.input:focus{ outline:none; border-color:var(--line-gold-2); background:var(--ink-300) }
.input[aria-invalid="true"]{ border-color:rgba(224,82,74,.55) }
textarea.input{ padding-block:var(--s-3); min-block-size:96px; resize:vertical }
.err{ color:var(--danger); font-size:var(--t-sm); min-block-size:1.2em }

/* المُقسَّم — اختيار الحساب، وهو ضابط أمان لا خيار تنسيق */
.seg{ display:inline-flex; padding:3px; gap:3px; background:var(--ink-200);
  border:1px solid var(--line-1); border-radius:var(--r-sm) }
.seg button{ min-block-size:36px; padding-inline:var(--s-4); border-radius:6px;
  font-size:var(--t-sm); font-weight:600; line-height:1.2; color:var(--text-3);
  transition:background var(--t1) var(--e-out), color var(--t1) var(--e-out) }
.seg button[aria-pressed="true"]{ background:var(--ink-400); color:var(--text-1) }
.seg button[aria-pressed="true"][data-v="real"]{ color:var(--au-lit) }

/* ── ٤٫١٣ النافذة — <dialog> مع @starting-style ──────
   نمط تبديل الصنف يستطيع الدخول لا الخروج: display:none فوري */
dialog.sheet{
  border:0; padding:0; background:transparent; color:inherit;
  inline-size:min(460px,calc(100vw - 32px)); max-block-size:calc(100dvh - 48px);
  opacity:0; transform:translate3d(0,16px,0) scale(.97);
  transition:opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out),
             overlay var(--t3) allow-discrete, display var(--t3) allow-discrete;
}
dialog.sheet[open]{ opacity:1; transform:none }
@starting-style{ dialog.sheet[open]{ opacity:0; transform:translate3d(0,16px,0) scale(.97) } }
dialog.sheet::backdrop{ background:rgba(5,5,4,0);
  transition:background var(--t3) linear, overlay var(--t3) allow-discrete,
             display var(--t3) allow-discrete }
dialog.sheet[open]::backdrop{ background:rgba(5,5,4,.82) }
@starting-style{ dialog.sheet[open]::backdrop{ background:rgba(5,5,4,0) } }
.sheet-body{ background:var(--ink-100); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--lift-2); padding:var(--s-8);
  max-block-size:calc(100dvh - 48px); overflow-y:auto }
@media (max-width:640px){
  dialog.sheet{ margin:auto auto 0; inline-size:100%; max-inline-size:none;
    transform:translate3d(0,100%,0) }
  dialog.sheet[open]{ transform:none }
  @starting-style{ dialog.sheet[open]{ transform:translate3d(0,100%,0) } }
  .sheet-body{ border-start-start-radius:20px; border-start-end-radius:20px;
    border-end-start-radius:0; border-end-end-radius:0; padding:var(--s-6) }
}

/* ── ٤٫١٤ الحالات الفارغة ─────────────────────────────
   حالة «لا إشارة» أقنع سطح في الموقع: صفحة لا تُظهر إلا الأخضر
   لا يمكن تصديقها. */
.empty{ display:grid; gap:var(--s-3); justify-items:center; text-align:center;
  padding:var(--s-12) var(--s-6); color:var(--text-2) }
.empty h3{ color:var(--text-1) }
.empty .figure{ font-size:var(--t-stat); color:var(--text-3); font-family:var(--f-num) }

/* هياكل التحميل تحفظ البنية */
.sk{ display:block; block-size:10px; border-radius:5px;
  background:linear-gradient(90deg,var(--ink-200),var(--ink-300),var(--ink-200));
  background-size:200% 100%; animation:sh 1.4s linear infinite }
@keyframes sh{ to{ background-position:-200% 0 } }

/* ── ٤٫١٥ التنبيهات ─────────────────────────────────── */
.toast-wrap{ position:fixed; inset-block-end:var(--s-6); inset-inline:var(--s-6) auto;
  display:grid; gap:var(--s-2); z-index:var(--z-toast); pointer-events:none }
.toast{ background:var(--ink-200); border:1px solid var(--line-2);
  border-radius:var(--r-sm); box-shadow:var(--lift-2);
  padding:var(--s-3) var(--s-4); font-size:var(--t-sm); color:var(--text-1);
  display:flex; align-items:center; gap:var(--s-3); pointer-events:auto;
  animation:toast-in var(--t3) var(--e-out) }
.toast[data-k="err"]{ border-color:rgba(224,82,74,.45) }
.toast[data-k="ok"]{ border-color:var(--line-gold-2) }
@keyframes toast-in{ from{ opacity:0; transform:translate3d(0,8px,0) } }

/* ── ٤٫١٦ الشعار ────────────────────────────────────── */
.brand{ display:inline-flex; align-items:center; gap:var(--s-3) }
.brand img{ inline-size:32px; block-size:32px; flex:none }
.brand .wm{ font-family:var(--f-display); font-weight:var(--w-display);
  font-size:1rem; line-height:1.2; white-space:nowrap }

/* ── ٤٫١٧ الرأس ─────────────────────────────────────── */
/* معتم افتراضياً: دون ٩٠٠px لا ضبابية خلفية، والشفافية وحدها
   تُظهر شبح النص المارّ تحته. */
.hdr{ position:sticky; inset-block-start:0; z-index:var(--z-header);
  background:var(--ink-050); border-block-end:1px solid var(--line-1) }
.hdr-in{ display:flex; align-items:center; gap:var(--s-6);
  block-size:64px; transition:block-size var(--t2) var(--e-out) }
.is-stuck .hdr-in{ block-size:56px }
.hdr nav{ display:flex; gap:var(--s-5); margin-inline-start:var(--s-4) }
.hdr nav a{ font-size:var(--t-sm); font-weight:500; color:var(--text-2);
  transition:color var(--t1) var(--e-out) }
.hdr nav a:hover{ color:var(--text-1) }
.hdr .spacer{ flex:1 }
@supports (backdrop-filter:blur(18px)){
  @media (min-width:900px){
    .hdr{ background:rgba(10,9,8,.82); backdrop-filter:blur(18px) }
  }
}
@media (max-width:820px){ .hdr nav{ display:none } }
/* دون ٦٢٠px لا تتّسع الصفّة للاسم الكامل مع شارة الحساب وزر الخروج،
   فيفيض الرأس ويزيح الصفحة كلّها أفقياً. تبقى العلامة وحدها. */
@media (max-width:620px){ .hdr .brand .wm{ font-size:.82rem } }
.hdr-in > *{ min-inline-size:0 }
}

/* ============================================================
   ٥ · الحركة
   ============================================================ */
@layer components {

/* العنوان لا يخفت أبداً: كروميوم يستبعد opacity:0 من مرشّحي LCP،
   فالتلاشي يضيف مدّته إلى زمن أكبر عنصر مرئي في كل زيارة. */
/* الحشو غير متماثل عمداً: صندوق كايرو ينزل ٠٫٤٦em تحت خطّ الأساس،
   فالحشو المتماثل يقصّ ذيل كل ياء وجيم في العنوان. و١٣٥٪ لا ١٠٥٪:
   المدى يُقاس بارتفاع العنصر (١٫٢٨em) بينما القصّ يقع عند الصندوق
   المحشوّ (١٫٦٤em)، فـ١٠٥٪ تترك شبح رؤوس الألفات ظاهراً قبل الحركة. */
.line{ display:block; overflow:hidden; padding-block:.08em .28em }
.line>span{ display:block; transform:translate3d(0,135%,0);
  transition:transform var(--t5) var(--e-hero) }
.ready .line>span{ transform:none }
.ready .line:nth-child(2)>span{ transition-delay:90ms }
.ready .line:nth-child(3)>span{ transition-delay:170ms }

.hero-sub,.hero-cta{ opacity:0; transform:translate3d(0,14px,0);
  transition:opacity var(--t4) var(--e-out) 280ms, transform var(--t4) var(--e-out) 280ms }
.ready .hero-sub,.ready .hero-cta{ opacity:1; transform:none }

.js [data-reveal]{ opacity:0; transform:translate3d(0,20px,0) }
.js [data-reveal].is-in{ opacity:1; transform:none;
  transition:opacity var(--t4) var(--e-out) var(--d,0ms),
             transform var(--t4) var(--e-out) var(--d,0ms) }
.js [data-stagger]>*{ --d:calc(min(var(--i,0),6) * var(--step));
  opacity:0; transform:translate3d(0,16px,0) }
.js [data-stagger].is-in>*{ opacity:1; transform:none;
  transition:opacity var(--t4) var(--e-out) var(--d),
             transform var(--t4) var(--e-out) var(--d) }

/* الكنس المعدني — الشعار في المقدّمة فقط، مرتين، ثم أبداً.
   اللمعة الدائرية أقوى إشارة قمار ممكنة. ١٠٥° عمودية على شريط
   اللمعة: الضوء يتحرك عبر معدنٍ ثابت. */
.au-foil{ position:relative }
.au-foil::after{ content:attr(data-t); position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:280% 100%; background-position:180% 0;
  animation:au-sweep 3s linear 2; pointer-events:none }
@keyframes au-sweep{ to{ background-position:-80% 0 } }
[dir=rtl] .au-foil::after{ background-image:linear-gradient(-105deg,transparent 38%,
  rgba(255,255,255,.85) 48%,transparent 58%) }


/* حلقة الجلسة */
.ring{ display:block }
.ring circle{ fill:none; stroke-width:3.5; transform:rotate(-90deg); transform-origin:50% 50% }
.ring .trk{ stroke:var(--line-1) }
.ring .prg{ stroke:var(--au-lit); stroke-linecap:round; stroke-dasharray:339.292;
  stroke-dashoffset:calc(339.292 * (1 - var(--p,0)));
  transition:stroke-dashoffset .95s linear }
}

/* ============================================================
   ٦ · تقليل الحركة — نؤكّد الحالات النهائية، لا نُصفّر المدد فقط.
   إعادة الضبط المنسوخة وحدها غير كافية: لو لم يصل الصنف يبقى
   العنصر شفافاً للأبد، فيرى الحسّاس صفحةً فارغة بدل أهدأ.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal],.js [data-stagger]>*,.hero-sub,.hero-cta{
    opacity:1 !important; transform:none !important }
  .line>span{ transform:none !important }
  .au-foil::after{ display:none !important }
  .lv i::after,.sk{ animation:none !important }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important }
}
@media (prefers-reduced-transparency:reduce){
  .hdr{ backdrop-filter:none !important; background:rgba(10,9,8,.98) }
}

/* ============================================================
   ٧ · الأدوات
   ============================================================ */
@layer utilities {
.hidden,[hidden]{ display:none !important }
.nowrap{ white-space:nowrap }
.center{ text-align:center }
.gap-0{ gap:0 }
.mt-2{ margin-block-start:var(--s-2) } .mt-4{ margin-block-start:var(--s-4) }
.mt-6{ margin-block-start:var(--s-6) } .mt-8{ margin-block-start:var(--s-8) }
.mt-12{ margin-block-start:var(--s-12) }
}


/* ════ ٩ · أهداف اللمس ═══════════════════════════════════════
   ٤٤px هو الحدّ الذي تنشره آبل وجوجل معاً. كانت روابط التذييل
   ٢٧px ورقائق المبالغ ٣٢px — وعلى شاشة تتعامل مع مال، هذا هو
   الفرق بين ضغطة صحيحة وضغطة على جارتها. */
@media (pointer:coarse), (max-width:760px){
  .btn-sm{ min-block-size:44px; padding-inline:var(--s-4) }
  .seg button{ min-block-size:44px }
  .rowact{ inline-size:44px; block-size:44px }
  .chips button{ min-block-size:44px; min-inline-size:52px }
  .hdr .brand{ min-block-size:44px; display:inline-flex; align-items:center }
  .ftr-links a{ min-block-size:44px; display:inline-flex; align-items:center }
  .ftr .brand{ min-block-size:44px }
  details.q summary{ min-block-size:52px }
  /* الروابط النصّية داخل الفقرات تبقى كما هي: توسيعها يكسر تدفّق السطر */
}