/* ============================================================================
   نظام الأرشيف الإلكتروني
   نظام التصميم v3 — العمارة الزجاجية (Glassmorphism Architecture)
   ---------------------------------------------------------------------------
   الطبقات:  1) الرموز  2) الخلفية الحيّة  3) الزجاج  4) التخطيط (بنتو)
             5) المكوّنات  6) الحركة المنسّقة  7) الاستجابة  8) الطباعة
   المنهج :  داكن أولًا · تباين AA مُقاس · يحترم prefers-reduced-motion
   ========================================================================== */

/* ==========================================================================
   1) الرموز التصميمية
   ========================================================================== */
:root{
  /* --- الطيف: أزرق حِبري أرشيفي + نحاسي --- */
  --g-900:#0A1B2E; --g-800:#102A45; --g-700:#1E3A5F; --g-600:#26497A;
  --g-500:#2E5C90; --g-400:#3E77B4; --g-300:#9CC0E0; --g-100:#DCE8F4; --g-50:#EFF4FA;
  --gd-800:#6B3D16; --gd-700:#8A5222; --gd-600:#B06C36; --gd-400:#C98A4B; --gd-50:#FBF2EA;

  /* --- الحبر والأسطح --- */
  --ink:#0C1722;   --ink-2:#26313D;  --muted:#4C5764;  --faint:#5E6A78;
  --green:var(--g-700); --green-d:var(--g-800); --green-l:var(--g-500);
  --green-soft:rgba(30,58,95,.08); --green-soft-2:rgba(30,58,95,.15);
  --gold:var(--gd-600); --gold-l:var(--gd-400); --gold-d:var(--gd-800);
  --gold-soft:rgba(176,108,54,.10);
  --red:#A8201A;   --red-soft:rgba(168,32,26,.09); --amber:#7A4A1E;
  --on-green:#FFFFFF;
  --bg:#EEF1F6;

  /* --- الزجاج: ثلاث طبقات حسب كثافة النص --- */
  --glass-chrome:rgba(255,255,255,.64);   /* الترويسة */
  --glass-depth :rgba(255,255,255,.52);   /* البطاقات البارزة — مُعايرة على AA فوق الشبكة */
  --glass-data  :rgba(255,255,255,.88);   /* الجداول والنماذج — تباين AA */
  --glass-inset :rgba(255,255,255,.55);   /* الحقول داخل الزجاج */
  --glass-blur:blur(20px) saturate(160%);
  --glass-line:rgba(255,255,255,.55);
  --glass-line-2:rgba(14,30,50,.10);
  --glass-hi:inset 0 1px 1px rgba(255,255,255,.75);
  --shadow-xs:0 2px 8px rgba(14,30,50,.06), var(--glass-hi);
  --shadow   :0 8px 32px 0 rgba(14,30,50,.10), var(--glass-hi);
  --shadow-md:0 14px 44px 0 rgba(14,30,50,.14), var(--glass-hi);
  --shadow-lg:0 24px 70px 0 rgba(14,30,50,.20), var(--glass-hi);
  --ring:0 0 0 3px rgba(30,58,95,.22);

  /* --- شبكة الخلفية الحيّة --- */
  --mesh-1:rgba(62,119,180,.58); --mesh-2:rgba(201,138,75,.52);
  --mesh-3:rgba(30,58,95,.55);   --mesh-4:rgba(20,150,116,.50);
  --mesh-opacity:.75; --mesh-blur:88px;

  /* --- الخطوط --- */
  --font-display:'Amiri','Noto Naskh Arabic',Georgia,serif;             /* نسخ كلاسيكي */
  --font-ui:'IBM Plex Sans Arabic','Noto Sans Arabic',Tahoma,sans-serif; /* هندسي نظيف */
  --font-num:'Readex Pro','IBM Plex Sans Arabic',sans-serif;            /* أرقام جدولية */

  /* --- المقياس الطباعي السائل --- */
  --fs-hero:clamp(2rem, 4.6vw, 3.9rem);
  --fs-h1  :clamp(1.6rem, 2.9vw, 2.6rem);
  --fs-h2  :clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-kpi :clamp(1.7rem, 2.6vw, 2.4rem);
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px; --fs-lg:18px;
  --lh-tight:1.3; --lh-body:1.75; --lh-loose:2;

  /* --- المسافات --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* --- الحواف --- */
  --r-sm:10px; --r:16px; --radius:20px; --r-lg:26px; --r-xl:32px; --r-full:999px;

  /* --- الحركة --- */
  --ease-glass:cubic-bezier(.16, 1, .3, 1);   /* الانسياب العضوي المعتمد */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.4,.64,1);
  --t-fast:180ms; --t:320ms; --t-lift:420ms; --t-slow:520ms;

  --nav-h:76px;
  --heat-max:70%;
  color-scheme:light;
}

[data-theme="dark"]{
  --ink:#F1F7FB;   --ink-2:#CFDEEA;  --muted:#9DB2C6;  --faint:#8296AB;
  --green:#6FA8DC; --green-d:#3E77B4; --green-l:#9CC6F2;
  --green-soft:rgba(123,176,232,.10); --green-soft-2:rgba(123,176,232,.18);
  --gold:#E0A86A;  --gold-l:#EFBE86;  --gold-d:#E0A86A; --gold-soft:rgba(224,168,106,.12);
  --red:#FB9A93;   --red-soft:rgba(251,154,147,.12); --amber:#E0A86A;
  --on-green:#08182A;
  --bg:#050C16;

  /* الزجاج الداكن — قيم المواصفة حرفيًا حيث تصمد للتباين */
  --glass-chrome:rgba(15,23,42,.55);
  --glass-depth :rgba(15,23,42,.40);
  --glass-data  :rgba(15,23,42,.82);
  --glass-inset :rgba(255,255,255,.06);
  --glass-line:rgba(255,255,255,.15);
  --glass-line-2:rgba(255,255,255,.08);
  --glass-hi:inset 0 1px 1px rgba(255,255,255,.10);
  --shadow-xs:0 2px 10px rgba(0,0,0,.28), var(--glass-hi);
  --shadow   :0 8px 32px 0 rgba(0,0,0,.42), var(--glass-hi);
  --shadow-md:0 14px 48px 0 rgba(0,0,0,.52), var(--glass-hi);
  --shadow-lg:0 26px 80px 0 rgba(0,0,0,.62), var(--glass-hi);
  --ring:0 0 0 3px rgba(123,176,232,.30);

  --mesh-1:rgba(16,185,129,.50); --mesh-2:rgba(217,168,45,.34);
  --mesh-3:rgba(30,64,120,.60);  --mesh-4:rgba(13,148,136,.44);
  --mesh-opacity:.80; --mesh-blur:96px;
  --heat-max:46%;
  color-scheme:dark;
}

/* ==========================================================================
   2) الأساس + الخلفية الحيّة
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  font-family:var(--font-ui); font-size:var(--fs-base); line-height:var(--lh-body);
  color:var(--ink); min-height:100vh; background-color:var(--bg);
  overflow-x:hidden; position:relative;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}

/* النقش النجدي — نسيج يظهر عبر الزجاج */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%230B5D3B' stroke-opacity='0.07' stroke-width='1.3'%3E%3Cpath d='M30 2 L58 18 L58 50 L30 66 L2 50 L2 18 Z'/%3E%3Cpath d='M90 2 L118 18 L118 50 L90 66 L62 50 L62 18 Z'/%3E%3Cpath d='M60 54 L88 70 L88 102 L60 118 L32 102 L32 70 Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%236BEDD2' stroke-opacity='0.06' stroke-width='1.3'%3E%3Cpath d='M30 2 L58 18 L58 50 L30 66 L2 50 L2 18 Z'/%3E%3Cpath d='M90 2 L118 18 L118 50 L90 66 L62 50 L62 18 Z'/%3E%3Cpath d='M60 54 L88 70 L88 102 L60 118 L32 102 L32 70 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* شبكة التدرّج المتحركة — أربع كتل تنجرف على الـGPU فقط */
.mesh{position:fixed; inset:-12%; z-index:-2; pointer-events:none; overflow:hidden;
      opacity:var(--mesh-opacity); contain:strict}
.mesh i{
  position:absolute; display:block; border-radius:50%; filter:blur(var(--mesh-blur));
  will-change:transform; transform:translate3d(0,0,0);
  animation:drift var(--dur,44s) var(--ease-glass) infinite alternate;
  animation-delay:var(--dly,0s);
}
.mesh i:nth-child(1){inset-block-start:-6%;  inset-inline-end:-4%; width:46vw; height:46vw;
                     background:var(--mesh-1); --dur:44s}
.mesh i:nth-child(2){inset-block-start:22%;  inset-inline-start:-8%; width:40vw; height:40vw;
                     background:var(--mesh-2); --dur:52s; --dly:-9s}
.mesh i:nth-child(3){inset-block-end:-12%;   inset-inline-end:14%; width:52vw; height:52vw;
                     background:var(--mesh-3); --dur:38s; --dly:-17s}
.mesh i:nth-child(4){inset-block-end:8%;     inset-inline-start:18%; width:34vw; height:34vw;
                     background:var(--mesh-4); --dur:34s; --dly:-24s}
@keyframes drift{                 /* تكبير معتدل: رسترة الطبقات المموّهة مكلفة عند التوسّع الكبير */
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(7vw,-6vh,0) scale(1.12)}
}

a{color:var(--green); text-decoration:none; transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--green-l)}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--green-l); outline-offset:3px; border-radius:8px}
::selection{background:var(--green-soft-2); color:var(--ink)}

.skip{
  position:absolute; inset-inline-start:50%; top:-90px; transform:translateX(50%); z-index:200;
  background:var(--green); color:#fff; font-weight:600; font-size:var(--fs-sm);
  padding:13px 24px; border-radius:0 0 var(--r) var(--r); box-shadow:var(--shadow-md);
  transition:top var(--t) var(--ease-glass);
}
.skip:focus{top:0; color:#fff}

.progress{
  position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:60;
  background:linear-gradient(90deg,var(--gold-l),var(--green-l),var(--green));
  transform:scaleX(0); transform-origin:right center; will-change:transform;
}

/* ==========================================================================
   3) البدائية الزجاجية — تُورَّث لكل سطح
   ========================================================================== */
.glass,.card,.stat,.nav,.login-card,.filters,.tablewrap,.empty{
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
}
/* حين لا يُدعم الترشيح الخلفي: أسطح معتمة تحفظ القراءة */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  :root{--glass-chrome:#F6F8FB; --glass-depth:#FAFBFD; --glass-data:#FFFFFF; --glass-inset:#FFFFFF}
  [data-theme="dark"]{--glass-chrome:#0C1726; --glass-depth:#0E1B2C; --glass-data:#0B1725; --glass-inset:#16273D}
  .mesh{opacity:.30}
}

/* --- منشور الحافة: حافة متدرّجة حقيقية (تُطبَّق فقط حين يدعمها المحرّك) --- */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  .card,.pal,.login-card,.dock-i{position:relative}
  .card::before,.pal::before,.login-card::before,.dock-i::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    pointer-events:none; z-index:1;
    background:linear-gradient(140deg,
      rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 26%,
      transparent 48%, transparent 62%,
      rgba(201,138,75,.42) 84%, rgba(255,255,255,.55) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.75; transition:opacity var(--t-lift) var(--ease-glass);
  }
  [data-theme="dark"] .card::before,[data-theme="dark"] .pal::before,
  [data-theme="dark"] .login-card::before,[data-theme="dark"] .dock-i::before{
    background:linear-gradient(140deg,
      rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 26%,
      transparent 48%, transparent 62%,
      rgba(224,168,106,.34) 84%, rgba(156,198,242,.40) 100%);
    opacity:.9;
  }
  .card:hover::before,.dock-i:hover::before{opacity:1}
}

/* --- الانعكاس المتتبِّع للمؤشّر (يتحرّك مع الفأرة لا يومض فقط) --- */
@media (hover:hover) and (pointer:fine){
  .card::after,.stat::after,.dock-i::after{
    background:radial-gradient(420px circle at var(--mx,70%) var(--my,0%),
               rgba(255,255,255,.30), rgba(255,255,255,.07) 34%, transparent 62%);
    transition:opacity var(--t-lift) var(--ease-glass);
  }
  [data-theme="dark"] .card::after,[data-theme="dark"] .stat::after,
  [data-theme="dark"] .dock-i::after{
    background:radial-gradient(420px circle at var(--mx,70%) var(--my,0%),
               rgba(255,255,255,.16), rgba(156,198,242,.07) 34%, transparent 62%);
  }
  .dock-i::after{content:""; position:absolute; inset:0; border-radius:inherit;
                 pointer-events:none; opacity:0}
  .dock-i:hover::after{opacity:1}
}

/* --- شبكة بنتو عامة: تُستخدم لتجميع البطاقات في الصفحات الداخلية --- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-5); align-items:start}
.bento > *{grid-column:span 12}
.bento > .b6{grid-column:span 6}
.bento > .b7{grid-column:span 7}
.bento > .b5{grid-column:span 5}
.bento > .b8{grid-column:span 8}
.bento > .b4{grid-column:span 4}
/* إزاحة متدرّجة تكسر رتابة الشبكة */
.bento > .b5:nth-of-type(even),.bento > .b4:nth-of-type(even){margin-block-start:var(--sp-6)}
@media (max-width:1024px){ .bento > *{grid-column:span 12 !important; margin-block-start:0 !important} }

/* ==========================================================================
   4) التخطيط
   ========================================================================== */
.topbar{
  background:linear-gradient(90deg,var(--g-900),#0C2036 55%,var(--g-900));
  color:#fff; font-size:var(--fs-xs); padding:8px 34px; letter-spacing:.2px;
  border-bottom:1px solid rgba(255,255,255,.08); position:relative; z-index:51;
}
[data-theme="dark"] .topbar{background:linear-gradient(90deg,#040A12,#0A1524 55%,#040A12)}
.topbar .in{max-width:1320px; margin:0 auto; display:flex; justify-content:space-between;
            align-items:center; gap:var(--sp-3); flex-wrap:wrap; opacity:.95}
.topbar .dot{display:inline-flex; align-items:center; gap:7px; font-size:11px; opacity:.88}
.topbar .dot::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#7BB0E8;
  box-shadow:0 0 0 0 rgba(123,176,232,.65); animation:pulse 2.8s var(--ease) infinite;
}

.nav{
  position:sticky; top:0; z-index:50; background:var(--glass-chrome);
  border:0; border-bottom:1px solid var(--glass-line-2); box-shadow:none;
  transition:box-shadow var(--t) var(--ease-glass), background var(--t) var(--ease);
}
.nav.stuck{box-shadow:var(--shadow-md); border-bottom-color:transparent}
.nav .in{max-width:1320px; margin:0 auto; padding-inline:34px}
.nav-top .in{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
             min-height:var(--nav-h); transition:min-height var(--t-slow) var(--ease-glass)}
.nav.stuck .nav-top .in{min-height:58px}
.nav.stuck .mark-img{height:34px}
.nav.stuck .brand .txt span{opacity:0; max-height:0}

.brand{display:flex; align-items:center; gap:var(--sp-3); min-width:0; color:var(--ink);
       border-radius:var(--r-sm); transition:opacity var(--t-fast) var(--ease)}
.brand:hover{color:var(--ink); opacity:.8}
.brand .txt{min-width:0}
.brand .txt b{display:block; font-family:var(--font-display); font-size:var(--fs-lg);
              font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden;
              text-overflow:ellipsis}
.brand .txt span{display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.5;
                 white-space:nowrap; overflow:hidden;
                 transition:opacity var(--t) var(--ease), max-height var(--t) var(--ease)}
.mark-img{height:46px; width:auto; max-width:210px; object-fit:contain; flex:none;
          transition:height var(--t-slow) var(--ease-glass)}
.mark-img.wide{height:46px; max-width:210px}
.mark-img.on-dark{background:var(--g-800); padding:5px 8px; border-radius:var(--r-sm)}
.mark-img.lg{height:66px; max-width:100%}
.mark-img.lg.wide{height:62px; max-width:100%}
.logo-dark{display:none !important}
.logo-light{display:block !important}
[data-theme="dark"] .logo-light{display:none !important}
[data-theme="dark"] .logo-dark{display:block !important}

.nav-bar{border-top:1px solid var(--glass-line-2)}
.nav-bar .in{display:flex}
.links{display:flex; gap:2px; align-items:stretch; flex:1; min-width:0;
       overflow-x:auto; scrollbar-width:none}
.links::-webkit-scrollbar{display:none}
.links a{
  position:relative; color:var(--muted); font-size:var(--fs-sm); font-weight:500;
  padding:13px 15px; white-space:nowrap; display:flex; align-items:center;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.links a::after{
  content:""; position:absolute; inset-inline:10px; bottom:0; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--gold-l),var(--green));
  transform:scaleX(0); transition:transform var(--t) var(--ease-glass);
}
.links a:hover{color:var(--green); background:var(--green-soft)}
.links a:hover::after,.links a.on::after{transform:scaleX(1)}
.links a.on{color:var(--green); background:var(--green-soft); font-weight:600}

.nav-tools{display:flex; align-items:center; gap:var(--sp-2); flex:none}
.nav-tools .who{
  font-size:var(--fs-xs); color:var(--muted); background:var(--glass-inset);
  border:1px solid var(--glass-line); border-radius:var(--r-full); padding:7px 15px;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#themeBtn,.navtoggle{
  cursor:pointer; background:var(--glass-inset); border:1px solid var(--glass-line);
  color:var(--muted); border-radius:var(--r-sm); min-width:44px; height:44px;
  display:grid; place-items:center; font-size:16px;
  transition:transform var(--t-fast) var(--ease-back), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
#themeBtn:hover,.navtoggle:hover{border-color:var(--green); color:var(--green);
                                 background:var(--green-soft); transform:translateY(-2px)}
#themeBtn:active,.navtoggle:active{transform:scale(.94)}
#themeBtn .ico{display:block; transition:transform var(--t-slow) var(--ease-back)}
#themeBtn:hover .ico{transform:rotate(40deg)}
.navtoggle{display:none}
.navtoggle span{display:block; width:18px; height:2px; border-radius:2px; background:currentColor;
                transition:transform var(--t) var(--ease-glass), opacity var(--t-fast) linear}
.navtoggle span+span{margin-top:4px}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.wrap{max-width:1320px; margin:0 auto; padding:var(--sp-8) var(--sp-6) var(--sp-16);
      display:flex; flex-direction:column; gap:var(--sp-5)}

/* ==========================================================================
   5) المكوّنات الزجاجية
   ========================================================================== */
.card{
  position:relative; background:var(--glass-depth); border-radius:var(--radius);
  padding:var(--sp-6) var(--sp-8);
  transition:transform var(--t-lift) var(--ease-glass), box-shadow var(--t-lift) var(--ease-glass),
             border-color var(--t-lift) var(--ease-glass);
}
/* انعكاس ضوئي داخلي ينزلق عند التحويم — «الرفع المغناطيسي» */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.22), transparent 42%, transparent 62%, rgba(255,255,255,.10));
  opacity:0; transition:opacity var(--t-lift) var(--ease-glass); mix-blend-mode:overlay;
}
.card:hover::after{opacity:1}

/* الأسطح كثيفة النص ترتفع إلى طبقة البيانات لضمان AA */
.card.data,.card:has(table),.card:has(.textview),.card:has(.promptbox),.card:has(.answer){
  background:var(--glass-data);
}

.card h1{font-family:var(--font-display); font-size:var(--fs-h1); font-weight:700;
         letter-spacing:-.5px; line-height:var(--lh-tight)}
.card h1 .g{
  background:linear-gradient(105deg,var(--green),var(--green-l) 55%,var(--gold) 125%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.card .sub{color:var(--muted); font-size:var(--fs-sm); margin-top:var(--sp-3); max-width:74ch}
.card > h1:first-child{padding-inline-start:var(--sp-5); position:relative}
.card > h1:first-child::before{
  content:""; position:absolute; inset-inline-start:0; top:4px; bottom:4px; width:4px;
  border-radius:var(--r-full); background:linear-gradient(180deg,var(--gold-l),var(--green));
}
.card > h1:first-child + .sub{padding-inline-start:var(--sp-5)}

h2.sec{font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700;
       display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5)}
h2.sec::before{content:""; width:4px; height:22px; border-radius:var(--r-full); flex:none;
               background:linear-gradient(180deg,var(--gold-l),var(--gold))}

/* --- اللوحة البطلة (Hero) --- */
.hero{
  position:relative; overflow:hidden; padding:var(--sp-12) var(--sp-10) calc(var(--sp-16) + 18px);
  border-radius:var(--r-xl);
}
.hero h1{font-size:var(--fs-hero); letter-spacing:-1.4px; line-height:1.18; max-width:19ch}
.hero .sub{font-size:var(--fs-md); margin-top:var(--sp-4); max-width:60ch}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:600;
  color:var(--gold-d); background:var(--gold-soft); border:1px solid rgba(176,108,54,.30);
  border-radius:var(--r-full); padding:6px 14px; margin-bottom:var(--sp-4);
}
[data-theme="dark"] .hero .eyebrow{color:var(--gold); border-color:rgba(224,168,106,.28)}

/* --- شبكة بنتو غير متماثلة + مؤشرات متداخلة --- */
.stats{
  display:grid; grid-template-columns:1.35fr 1fr 1fr 1.15fr; gap:var(--sp-4);
  position:relative; z-index:2; margin-top:calc(var(--sp-10) * -1);
}
.stats > *:nth-child(even){margin-block-start:var(--sp-6)}   /* إزاحة متدرّجة */
.stat{
  position:relative; overflow:hidden; background:var(--glass-depth);
  border-radius:var(--radius); padding:var(--sp-6) var(--sp-5) var(--sp-5);
  transition:transform var(--t-lift) var(--ease-glass), box-shadow var(--t-lift) var(--ease-glass);
}
.stat::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
              background:linear-gradient(90deg,var(--green-l),var(--green))}
.stat::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 90% at 88% 0%, rgba(255,255,255,.26), transparent 62%);
  opacity:0; transition:opacity var(--t-lift) var(--ease-glass);
}
.stat:hover::after{opacity:1}
.stat.c::before{background:linear-gradient(90deg,var(--gold-l),var(--gold))}
.stat.t::before{background:linear-gradient(90deg,var(--g-300),var(--green-l))}
.stat .v{font-family:var(--font-num); font-size:var(--fs-kpi); font-weight:600; color:var(--green);
         line-height:1.15; letter-spacing:-1px; font-variant-numeric:tabular-nums}
.stat.c .v{color:var(--gold-d)} .stat.t .v{color:var(--green-l)}
[data-theme="dark"] .stat.c .v{color:var(--gold)}
.stat .l{color:var(--muted); font-size:var(--fs-xs); margin-top:var(--sp-2); line-height:1.5}

/* الرفع المغناطيسي — المواصفة: scale 1.02 + translateY(-4px) */
.card:hover,.stat:hover,.meta .m:hover{
  transform:translate3d(0,-4px,0) scale(1.02); box-shadow:var(--shadow-lg);
  border-color:var(--glass-line);
}
.card.hero:hover{transform:translate3d(0,-4px,0) scale(1.008)}  /* الأسطح الكبيرة ترفع أقل */

/* --- النماذج --- */
.grid{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-4)}
.f{display:flex; flex-direction:column; gap:7px; min-width:0}
.f label{font-size:var(--fs-xs); color:var(--muted); font-weight:600}
.f input,.f select,.f textarea{
  font-family:inherit; font-size:var(--fs-sm); color:var(--ink); background:var(--glass-inset);
  border:1px solid var(--glass-line-2); border-radius:var(--r-sm); padding:12px 14px;
  min-height:46px; outline:none; width:100%;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.f input::placeholder,.f textarea::placeholder{color:var(--faint)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--g-300)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--green); box-shadow:var(--ring)}
.f textarea{resize:vertical; min-height:118px; line-height:var(--lh-loose)}
.f select{appearance:none; cursor:pointer; padding-inline-end:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%234C5C53' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center}
[data-theme="dark"] .f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%239DB2C6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}.span6{grid-column:span 6}

/* --- الأزرار --- */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2); cursor:pointer; user-select:none; font-family:inherit; font-size:var(--fs-sm);
  font-weight:600; border-radius:var(--r-sm); padding:12px 24px; min-height:46px;
  border:1px solid var(--glass-line); color:var(--ink); background:var(--glass-inset);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow-xs);
  transition:transform var(--t-lift) var(--ease-glass), box-shadow var(--t-lift) var(--ease-glass),
             border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.btn:hover{border-color:var(--green); color:var(--green); background:var(--green-soft);
           transform:translate3d(0,-3px,0) scale(1.02); box-shadow:var(--shadow-md)}
.btn:active{transform:translate3d(0,0,0) scale(.98)}
.btn.gold{
  background:linear-gradient(135deg,var(--green-l),var(--green)); color:#fff; border-color:transparent;
  box-shadow:0 8px 26px rgba(30,58,95,.34), var(--glass-hi);
}
.btn.gold:hover{background:linear-gradient(135deg,var(--green),var(--green-l)); color:#fff;
                box-shadow:0 14px 38px rgba(30,58,95,.44), var(--glass-hi)}
[data-theme="dark"] .btn.gold{color:var(--on-green); box-shadow:0 8px 30px rgba(123,176,232,.26), var(--glass-hi)}
[data-theme="dark"] .btn.gold:hover{color:var(--on-green)}
.btn.gold:disabled{opacity:.6; cursor:progress; transform:none}
.btn.small{padding:9px 15px; min-height:38px; font-size:var(--fs-xs); border-radius:9px}
.btn.danger{color:var(--red); border-color:rgba(168,32,26,.32)}
.btn.danger:hover{background:var(--red-soft); color:var(--red); border-color:var(--red)}
.btn .ripple{position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
             background:currentColor; opacity:.22; animation:ripple 620ms var(--ease-glass) forwards}
.actions{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-top:var(--sp-6)}

/* --- الجداول --- */
.count{color:var(--muted); font-size:var(--fs-sm); margin:0 2px var(--sp-4)}
.tablewrap{overflow-x:auto; border-radius:var(--r); background:var(--glass-data);
           box-shadow:var(--shadow-xs)}
table{width:100%; border-collapse:separate; border-spacing:0}
th{position:sticky; top:0; z-index:1; text-align:right; font-size:var(--fs-xs);
   color:var(--green-d); font-weight:700; background:var(--glass-data); padding:14px;
   white-space:nowrap; border-bottom:1px solid var(--glass-line-2);
   -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
[data-theme="dark"] th{color:var(--green)}
td{padding:14px; border-bottom:1px solid var(--glass-line-2); font-size:var(--fs-sm);
   vertical-align:middle}
tbody tr{transition:background var(--t-fast) linear}
tbody tr:hover td{background:var(--green-soft)}
tbody tr:last-child td{border-bottom:none}
td a.t{color:var(--ink); font-weight:500; line-height:1.65}
td a.t:hover{color:var(--green); text-decoration:underline; text-underline-offset:3px}
.num{font-family:var(--font-num); color:var(--green); font-weight:600; white-space:nowrap;
     font-variant-numeric:tabular-nums}
.dt{color:var(--muted); white-space:nowrap; font-size:var(--fs-xs); font-variant-numeric:tabular-nums}

/* --- الوسوم --- */
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:600;
  border-radius:var(--r-full); padding:6px 13px; border:1px solid var(--glass-line-2);
  color:var(--muted); white-space:nowrap; background:var(--glass-inset); line-height:1.6;
  transition:transform var(--t-fast) var(--ease-glass), border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a.chip:hover{transform:translate3d(0,-2px,0) scale(1.03); border-color:var(--green);
             color:var(--green); background:var(--green-soft)}
.chip.secret{color:var(--red); border-color:rgba(168,32,26,.30); background:var(--red-soft)}
.chip.normal{color:var(--green); border-color:rgba(30,58,95,.24); background:var(--green-soft)}
.chip.demo,.chip.cls{color:var(--gold-d); border-color:rgba(176,108,54,.34); background:var(--gold-soft)}
[data-theme="dark"] .chip.demo,[data-theme="dark"] .chip.cls{color:var(--gold)}
.i{width:1.05em; height:1.05em; flex:none; display:inline-block; vertical-align:-.16em}
.chip .i{width:13px; height:13px}

/* --- نصوص وإجابات --- */
.answer{border:1px solid var(--glass-line-2); border-inline-start:4px solid var(--green);
        border-radius:var(--r); padding:var(--sp-5) var(--sp-6); background:var(--glass-inset);
        white-space:pre-wrap; line-height:var(--lh-loose); font-size:var(--fs-base)}
.promptbox{width:100%; direction:rtl; font-family:inherit; font-size:var(--fs-sm); line-height:1.95;
           color:var(--ink); background:var(--glass-inset); border:1px solid var(--glass-line-2);
           border-radius:var(--r); padding:var(--sp-5); min-height:260px; resize:vertical}
.hint{color:var(--muted); font-size:var(--fs-sm); line-height:1.9}
.hint b{color:var(--green); font-weight:600}
.src{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); align-items:center}
.textview{border:1px solid var(--glass-line-2); border-radius:var(--r); background:var(--glass-inset);
          padding:var(--sp-5); max-height:380px; overflow:auto; white-space:pre-wrap;
          font-size:var(--fs-sm); line-height:var(--lh-loose)}
.textview::-webkit-scrollbar,.tablewrap::-webkit-scrollbar{width:8px; height:8px}
.textview::-webkit-scrollbar-thumb,.tablewrap::-webkit-scrollbar-thumb{
  background:var(--glass-line-2); border-radius:var(--r-full)}

/* --- تفاصيل المعاملة: بنتو --- */
.meta{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin:var(--sp-6) 0}
/* الموضوع سطر كامل — أطول من أن يُحشر في ثلث الشبكة */
.meta .m.wide{grid-column:1 / -1}
.meta .m{border:1px solid var(--glass-line-2); border-radius:var(--r); padding:var(--sp-4);
         background:var(--glass-inset);
         transition:transform var(--t-lift) var(--ease-glass), border-color var(--t-fast) var(--ease)}
.meta .m .k{font-size:var(--fs-xs); color:var(--muted); font-weight:500}
.meta .m .v{font-size:var(--fs-md); font-weight:600; margin-top:3px; line-height:1.5}

/* --- بحث متقدّم --- */
.filters{border-radius:var(--r); background:var(--glass-inset); overflow:hidden;
         box-shadow:var(--shadow-xs)}
.filters > summary{cursor:pointer; list-style:none; padding:14px var(--sp-5); font-size:var(--fs-sm);
                   font-weight:600; color:var(--green); display:flex; align-items:center;
                   gap:var(--sp-2); min-height:48px; transition:background var(--t-fast) var(--ease)}
.filters > summary:hover{background:var(--green-soft)}
.filters > summary::-webkit-details-marker{display:none}
.filters > summary::before{content:""; width:8px; height:8px; flex:none; border:2px solid currentColor;
  border-inline-start:0; border-block-start:0; transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t) var(--ease-glass)}
.filters[open] > summary::before{transform:rotate(225deg) translateY(2px)}
.filters[open] > summary{border-bottom:1px solid var(--glass-line-2)}
.filters > .grid{padding:var(--sp-6) var(--sp-5); animation:slideDown var(--t-slow) var(--ease-glass) both}

/* --- حالة الفراغ --- */
.empty{text-align:center; padding:var(--sp-12) var(--sp-5); color:var(--muted);
       border-radius:var(--r); background:var(--glass-inset)}
.empty .ico{width:62px; height:62px; margin:0 auto var(--sp-4); border-radius:var(--r-lg);
            display:grid; place-items:center; color:var(--green); background:var(--green-soft);
            border:1px solid var(--green-soft-2)}
.empty b{display:block; color:var(--ink); font-family:var(--font-display); font-size:var(--fs-lg);
         margin-bottom:var(--sp-2)}

/* --- الرسوم البيانية --- */
.chart-bars{display:flex; align-items:flex-end; gap:4px; height:206px; overflow-x:auto;
            padding:var(--sp-2) 2px 0}
.cb{flex:1 0 16px; min-width:16px; display:flex; flex-direction:column; align-items:center; gap:6px}
.cb-track{display:flex; align-items:flex-end; height:150px; width:100%}
.cb-bar{width:100%; border-radius:6px 6px 0 0; min-height:3px;
        background:linear-gradient(180deg,var(--g-300),var(--green));
        box-shadow:0 0 18px rgba(62,119,180,.28);
        transition:filter var(--t-fast) var(--ease), transform 760ms var(--ease-glass)}
[data-theme="dark"] .cb-bar{background:linear-gradient(180deg,var(--green-l),var(--green-d))}
.cb:hover .cb-bar{filter:brightness(1.16) saturate(1.18)}
.cb-lbl{font-size:9.5px; color:var(--muted); writing-mode:vertical-rl; font-variant-numeric:tabular-nums}
.hbars{display:flex; flex-direction:column; gap:var(--sp-3)}
.hb{display:grid; grid-template-columns:120px 1fr 76px; align-items:center; gap:var(--sp-3)}
.hb-lbl{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.4}
.hb-track{background:var(--glass-inset); border:1px solid var(--glass-line-2);
          border-radius:var(--r-full); height:20px; overflow:hidden}
.hb-bar{height:100%; border-radius:var(--r-full); min-width:4px;
        background:linear-gradient(90deg,var(--gold-l),var(--gold))}
.hb-val{font-size:var(--fs-xs); text-align:left}

/* --- شريط المرشّحات داخل اللوحة البطلة --- */
.filterbar{margin-top:var(--sp-6)}
.f-submit{justify-content:flex-end}
.chart-svg{width:100%; height:240px; display:block; overflow:visible}
.hb-bar.green{background:linear-gradient(90deg,var(--g-300),var(--green))}
[data-theme="dark"] .hb-bar.green{background:linear-gradient(90deg,var(--green-l),var(--green-d))}

/* --- مقياس الإنجاز في التقرير التنفيذي --- */
.gauge-row{display:flex; gap:var(--sp-8); align-items:center; flex-wrap:wrap}
.gauge{width:168px; height:168px; flex:none}
.gauge-body{flex:1; min-width:min(280px,100%)}
.headline-note{margin-bottom:var(--sp-4); font-size:var(--fs-base)}
.headline-note b{color:var(--gold-d)}
[data-theme="dark"] .headline-note b{color:var(--gold)}
.assumption{margin-top:var(--sp-4); padding:var(--sp-4); border-radius:var(--r);
            background:var(--glass-inset); border:1px solid var(--glass-line-2)}
.assumption code{font-family:var(--font-num); font-size:.85em; background:var(--green-soft);
                 padding:1px 6px; border-radius:5px; color:var(--green)}
@media (max-width:560px){ .gauge{width:132px; height:132px} .gauge-row{gap:var(--sp-5)} }

/* --- خريطة الكثافة: الشدة تُمرَّر عبر --v فقط، وبقية التنسيق من الرموز --- */
.heat{border-collapse:separate; border-spacing:2px; min-width:520px}
.heat th{text-align:center; background:transparent; border:0; color:var(--muted); font-weight:600}
.heat th:first-child{text-align:start}
/* سقف الصبغة محسوب: عنده يبقى --ink فوق 4.5:1 في النمطين، فلا حاجة لتبديل لون النص.
   فاتح: 70% (نسبة 4.60) · داكن: 46% (نسبة 4.69). تبديل النص كان يهبط إلى 2.02:1. */
.heat td{
  text-align:center; font-size:var(--fs-xs); font-variant-numeric:tabular-nums;
  border:0; border-radius:6px; padding:9px 6px; color:var(--ink);
  background:color-mix(in srgb, var(--green) calc(var(--v,0) * var(--heat-max,70%)), transparent);
  transition:transform var(--t-fast) var(--ease-glass);
}
.heat td.hot{font-weight:700}
.heat td:hover{transform:scale(1.08)}
.heat td:first-child{background:transparent; color:var(--green); font-family:var(--font-num); font-weight:600}

/* أشرطة أفقية بعمود تسمية أعرض (أسماء الجهات) */
.hbars.wide .hb{grid-template-columns:minmax(140px,230px) 1fr 72px}
@media (max-width:560px){ .hbars.wide .hb{grid-template-columns:110px 1fr 58px} }

/* حلقة نسبة السرية */
.donut{width:150px; height:150px; display:block; margin:0 auto var(--sp-3)}

/* --- التنبيهات والتذييل --- */
.flash{display:flex; align-items:flex-start; gap:var(--sp-3); border-radius:var(--r);
       padding:15px 20px; font-size:var(--fs-sm); font-weight:500; border:1px solid;
       border-inline-start-width:4px; -webkit-backdrop-filter:var(--glass-blur);
       backdrop-filter:var(--glass-blur); box-shadow:var(--shadow-xs);
       animation:slideDown var(--t-slow) var(--ease-glass) both}
.flash.ok{border-color:rgba(30,58,95,.30); background:var(--green-soft); color:var(--green-d)}
[data-theme="dark"] .flash.ok{color:var(--green)}
.flash.warn{border-color:rgba(176,108,54,.42); background:var(--gold-soft); color:var(--amber)}
.foot{border-top:1px solid var(--glass-line-2); background:var(--glass-chrome);
      -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); margin-top:var(--sp-6)}
.foot .in{max-width:1320px; margin:0 auto; padding:var(--sp-6) 34px; color:var(--muted);
          font-size:var(--fs-xs); display:flex; justify-content:space-between; gap:var(--sp-3);
          flex-wrap:wrap; align-items:center}

details.card summary{cursor:pointer; font-weight:600}
details.card[open] summary{margin-bottom:var(--sp-2)}

/* ==========================================================================
   5b) التنقل السريع: لوحة الأوامر · الرصيف · مفاتيح الاختصار
   ========================================================================== */
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
                 overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* --- غطاء المفاتيح --- */
.kbd{
  display:inline-flex; align-items:center; gap:3px; font-family:var(--font-ui);
  font-size:10.5px; font-weight:600; line-height:1; color:var(--muted);
  background:var(--glass-inset); border:1px solid var(--glass-line-2);
  border-block-end-width:2px; border-radius:6px; padding:4px 7px; min-width:22px;
  justify-content:center; white-space:nowrap;
}
.kbd .mod{opacity:.75; font-size:9.5px}

/* --- زر لوحة الأوامر في الترويسة --- */
.cmdbtn{
  display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; min-height:44px;
  padding:0 12px 0 10px; border-radius:var(--r-sm); color:var(--muted);
  background:var(--glass-inset); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform var(--t-lift) var(--ease-glass), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cmdbtn:hover{border-color:var(--green); color:var(--green); background:var(--green-soft);
              transform:translate3d(0,-2px,0)}
.cmdbtn .lbl{font-size:var(--fs-xs); font-weight:500}
@media (max-width:1180px){ .cmdbtn .lbl{display:none} .cmdbtn .kbd{display:none} .cmdbtn{padding:0; width:44px; justify-content:center} }

/* --- رصيف الإجراءات السريعة --- */
.dock{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-8)}
.dock-i{
  display:flex; align-items:center; gap:var(--sp-3); cursor:pointer; text-align:start;
  padding:12px 16px; border-radius:var(--r); color:var(--ink); font-size:var(--fs-sm);
  font-weight:600; font-family:inherit;
  background:var(--glass-inset); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:var(--shadow-xs);
  transition:transform var(--t-lift) var(--ease-glass), box-shadow var(--t-lift) var(--ease-glass),
             border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dock-i:hover{transform:translate3d(0,-4px,0) scale(1.02); box-shadow:var(--shadow-md);
              border-color:var(--green); color:var(--green)}
.dock-i:active{transform:translate3d(0,0,0) scale(.99)}
.dock-ic{width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:11px;
         color:var(--green); background:var(--green-soft); border:1px solid var(--green-soft-2)}
.dock-ic svg{width:18px; height:18px}
.dock-i .kbd{margin-inline-start:var(--sp-2)}
@media (max-width:900px){ .dock-i .kbd{display:none} .dock-i{flex:1 1 auto} }

/* --- الغطاء المعتم --- */
.overlay{
  position:fixed; inset:0; z-index:120; display:grid; place-items:start center;
  padding:12vh var(--sp-4) var(--sp-4); background:rgba(8,18,30,.42);
  -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%);
  animation:fadeIn 220ms var(--ease-glass) both;
}
[data-theme="dark"] .overlay{background:rgba(2,7,14,.62)}
.overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes palIn{from{opacity:0; transform:translate3d(0,-14px,0) scale(.97)} to{opacity:1; transform:none}}

/* --- اللوحة --- */
.pal{
  width:min(660px,100%); border-radius:var(--r-lg); overflow:hidden;
  background:var(--glass-data); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-lg); animation:palIn 300ms var(--ease-glass) both;
}
.pal-in{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5);
        border-bottom:1px solid var(--glass-line-2)}
.pal-in > .i{width:19px; height:19px; color:var(--muted); flex:none}
.pal-in input{flex:1; min-width:0; border:0; outline:0; background:transparent;
              font-size:var(--fs-md); color:var(--ink); padding:6px 0}
.pal-in input::placeholder{color:var(--faint)}
.pal-list{max-height:min(52vh,460px); overflow-y:auto; padding:var(--sp-2)}
.pal-group{font-size:10.5px; font-weight:700; color:var(--faint); letter-spacing:.4px;
           padding:10px var(--sp-3) 6px}
.pal-i{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:start;
  padding:11px var(--sp-3); border-radius:var(--r-sm); cursor:pointer; border:0;
  background:transparent; color:var(--ink); font-family:inherit; font-size:var(--fs-sm);
  transition:background var(--t-fast) linear;
}
.pal-i:hover,.pal-i.sel{background:var(--green-soft)}
.pal-i.sel{box-shadow:inset 3px 0 0 var(--green)}
.pal-ic{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px;
        color:var(--green); background:var(--green-soft); border:1px solid var(--green-soft-2)}
.pal-ic svg{width:15px; height:15px}
.pal-txt{flex:1; min-width:0}
.pal-t{display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pal-s{display:block; font-size:var(--fs-xs); color:var(--muted); overflow:hidden;
       text-overflow:ellipsis; white-space:nowrap; margin-top:1px}
.pal-empty{padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--muted); font-size:var(--fs-sm)}
.pal-foot{display:flex; gap:var(--sp-4); flex-wrap:wrap; padding:11px var(--sp-5);
          border-top:1px solid var(--glass-line-2); font-size:11px; color:var(--muted);
          background:var(--glass-inset)}
.pal-foot span{display:inline-flex; align-items:center; gap:5px}

/* --- ورقة الاختصارات --- */
.pal.keys{padding:var(--sp-6) var(--sp-6) var(--sp-5)}
.keys-head{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
           margin-bottom:var(--sp-5)}
.keys-head h2{font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700}
.keys-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-5)}
.kg{display:flex; align-items:center; gap:7px; padding:8px 0; font-size:var(--fs-sm);
    color:var(--ink-2); border-bottom:1px solid var(--glass-line-2)}
.kg span:last-child{margin-inline-start:auto; text-align:end; color:var(--muted); font-size:var(--fs-xs)}
.keys-note{margin-top:var(--sp-4); text-align:center}
@media (max-width:700px){ .keys-grid{grid-template-columns:1fr} .overlay{padding-top:6vh} }

/* --- أداء: الأسطح كثيفة النص معتمة ٨٢–٨٨٪، فالترشيح الخلفي فيها كلفة بلا أثر مرئي --- */
.card.data,.card:has(table),.card:has(.textview),.card:has(.promptbox),.card:has(.answer),
.tablewrap{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* ==========================================================================
   6) الحركة المنسّقة
   ========================================================================== */
@keyframes rise{from{opacity:0; transform:translate3d(0,26px,0) scale(.985)} to{opacity:1; transform:none}}
@keyframes slideDown{from{opacity:0; transform:translate3d(0,-12px,0)} to{opacity:1; transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,176,232,.55)}
                 70%{box-shadow:0 0 0 8px rgba(123,176,232,0)}
                 100%{box-shadow:0 0 0 0 rgba(123,176,232,0)}}
@keyframes ripple{to{transform:scale(2.6); opacity:0}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes bl{50%{opacity:0}}

/* كوريغرافيا التحميل: تتابع منسّق واحد بالانسياب المعتمد */
.reveal{opacity:0; transform:translate3d(0,26px,0) scale(.985);
        will-change:transform,opacity}
.reveal.in{opacity:1; transform:none;
           transition:opacity var(--t-slow) var(--ease-glass), transform var(--t-slow) var(--ease-glass);
           transition-delay:var(--d,0ms)}
.no-js .reveal{opacity:1; transform:none}
tbody tr.rowin{animation:rise 420ms var(--ease-glass) both; animation-delay:var(--d,0ms)}
.bar-grow{transform:scaleY(0); transform-origin:bottom;
          transition:transform 760ms var(--ease-glass); transition-delay:var(--d,0ms)}
.bar-grow.in{transform:scaleY(1)}
.bar-fill{width:0 !important; transition:width 900ms var(--ease-glass); transition-delay:var(--d,0ms)}
.bar-fill.in{width:var(--w) !important}
.ch-line{stroke-dasharray:var(--len,3000); stroke-dashoffset:var(--len,3000)}
.ch-line.drawn{transition:stroke-dashoffset 1500ms var(--ease-glass); stroke-dashoffset:0}
.ch-area{opacity:0}
.ch-area.drawn{opacity:1; transition:opacity 760ms var(--ease) 520ms}
.spin{display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.35);
      border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite;
      margin-inline-end:var(--sp-2); vertical-align:-2px}
.spin[hidden]{display:none}
.caret{display:inline-block; width:8px; height:16px; background:var(--green);
       animation:bl .9s steps(2) infinite; vertical-align:-3px; margin-inline-start:3px; border-radius:1px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
                       transition-duration:.01ms !important}
  .reveal{opacity:1 !important; transform:none !important}
  .bar-grow{transform:scaleY(1) !important}
  .bar-fill{width:var(--w) !important}
  .ch-line{stroke-dashoffset:0 !important}
  .ch-area{opacity:1 !important}
  .mesh i{animation:none}
  .overlay,.pal{animation:none !important}
  .card::after,.stat::after{--mx:70% !important; --my:0% !important}
  .dock-i:hover,.cmdbtn:hover{transform:none}
  .card:hover,.stat:hover,.btn:hover,.meta .m:hover,a.chip:hover{transform:none}
  .progress{display:none}
}

/* ==========================================================================
   7) الاستجابة
   ========================================================================== */
@media (max-width:1180px){
  .nav .in{padding-inline:var(--sp-5)}
  .links a{padding:12px 12px; font-size:var(--fs-xs)}
  .stats{grid-template-columns:1fr 1fr; gap:var(--sp-4)}
  .stats > *:nth-child(even){margin-block-start:0}
  .stats > *:nth-child(3),.stats > *:nth-child(4){margin-block-start:0}
}
@media (max-width:900px){
  .navtoggle{display:grid}
  .nav-bar{border-top:none}
  .nav-bar .in{padding-inline:0}
  .links{flex-direction:column; align-items:stretch; gap:2px; overflow:hidden;
         padding:0 var(--sp-4); max-height:0; opacity:0; pointer-events:none;
         border-top:1px solid var(--glass-line-2);
         transition:max-height var(--t-slow) var(--ease-glass), opacity var(--t) var(--ease),
                    padding var(--t) var(--ease)}
  .links.open{max-height:70vh; overflow-y:auto; opacity:1; pointer-events:auto;
              padding-block:var(--sp-3) var(--sp-4)}
  .links a{padding:14px var(--sp-4); font-size:var(--fs-base); border-radius:var(--r-sm)}
  .links a::after{display:none}
  .links a.on{box-shadow:inset 3px 0 0 var(--green)}
  .nav-top .in{min-height:64px}
  .nav.stuck .brand .txt span{opacity:1; max-height:none}
  .topbar,.nav .in,.foot .in{padding-inline:var(--sp-4)}
  .wrap{padding:var(--sp-5) var(--sp-4) var(--sp-12); gap:var(--sp-4)}
  .card{padding:var(--sp-5); border-radius:var(--r)}
  .hero{padding:var(--sp-8) var(--sp-5) calc(var(--sp-12) + 12px); border-radius:var(--r-lg)}
  .grid{grid-template-columns:1fr 1fr}
  .span2,.span3,.span4,.span6{grid-column:span 2}
  .meta{grid-template-columns:1fr 1fr}
  table{min-width:640px}
  th{position:static}
  .foot .in{flex-direction:column; align-items:flex-start; gap:var(--sp-2)}
  .mesh{--mesh-blur:70px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .span2,.span3,.span4,.span6{grid-column:span 1}
  .meta{grid-template-columns:1fr}
  .stats{margin-top:calc(var(--sp-6) * -1)}
  .stat{padding:var(--sp-5) var(--sp-4) var(--sp-4)}
  .brand .txt span{display:none}
  .mark-img{height:36px; max-width:150px}
  .actions .btn{flex:1 1 auto}
  .topbar .in{flex-direction:column; align-items:flex-start; gap:2px}
  .hb{grid-template-columns:92px 1fr 60px; gap:var(--sp-2)}
}
@media (max-width:380px){
  .stats{grid-template-columns:1fr}
  .brand .txt{display:none}
}

/* ==========================================================================
   صفحة الدخول
   ========================================================================== */
.login-page{display:grid; place-items:center; min-height:100vh; padding:var(--sp-6); position:relative}
.login-wrap{width:100%; max-width:490px; position:relative; z-index:1;
            animation:rise 640ms var(--ease-glass) both}
.login-card{background:var(--glass-depth); border-radius:var(--r-xl);
            padding:var(--sp-10) var(--sp-8) var(--sp-6); box-shadow:var(--shadow-lg);
            position:relative; overflow:hidden}
.login-card::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px;
                    background:linear-gradient(90deg,var(--gold-l),var(--green-l),var(--green))}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
             margin-bottom:var(--sp-8); text-align:center}
.login-brand b{display:block; font-family:var(--font-display); font-size:var(--fs-h2);
               font-weight:700; line-height:1.45}
.login-brand span{display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:4px}
.login-card .btn.gold{width:100%; min-height:50px; font-size:var(--fs-md)}
@media (max-width:560px){.login-card{padding:var(--sp-6) var(--sp-5)}}

/* ==========================================================================
   8) الطباعة — يسقط الزجاج ويبقى المحتوى
   ========================================================================== */
@media print{
  .topbar,.nav,.foot,.progress,.skip,.mesh,.no-print{display:none !important}
  body{background:#fff !important; color:#000}
  body::before{display:none}
  .wrap{padding:0; max-width:none}
  .card,.stat,.tablewrap,.filters{background:#fff !important; box-shadow:none !important;
        border-color:#ccc !important; backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important; break-inside:avoid; transform:none !important}
  .stats{margin-top:0}
  .stats > *:nth-child(even){margin-block-start:0}
  .reveal{opacity:1 !important; transform:none !important}
  .bar-grow{transform:scaleY(1) !important}
  a{color:#000}
}