/* ═══════════════ SiteCheck — الأساس المشترك ═══════════════
   لوحة رمادية منضبطة، ولون واحد فقط (التيل) محجوز للبيانات والإجراء.
   الألوان الأخرى تعني شيئًا: أخضر ناجح، كهرماني تحذير، مرجاني خطر. */

:root{
  --ink-0:#04060a; --ink-1:#080b11; --ink-2:#0c1119; --ink-3:#121926; --ink-4:#1a2332;
  --line:#161e2b;  --line-2:#202b3d; --line-3:#2b3a52;
  --fg:#eef2f7;    --fg-1:#a8b4c6;   --fg-2:#8794a9;  --fg-3:#74839a;

  --acc:#2dd4bf; --acc-d:#14b8a6; --acc-l:#5eead4; --sky:#38bdf8;
  --pos:#4ade80; --warn:#fbbf24; --or:#fb923c; --neg:#f87171; --vi:#a78bfa;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r1:8px; --r2:12px; --r3:16px; --r4:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --fast:.18s; --mid:.32s; --slow:.6s;

  --sans:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* JetBrains Mono بلا أرقام هندية (٠–٩): تسقط إلى IBM Plex Sans Arabic المحمّل، لا إلى خط النظام */
  --mono:"JetBrains Mono","IBM Plex Sans Arabic",ui-monospace,"SF Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* بدون هذا يغلب أي display في CSS سمة hidden، فتظهر عناصر يُفترض إخفاؤها. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink-0); color:var(--fg); font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:plaintext;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc);text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
::selection{background:#2dd4bf2e;color:var(--fg)}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:var(--r1)}
:where(a,button):focus:not(:focus-visible){outline:none}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--ink-0)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}
::-webkit-scrollbar-track{background:transparent}

/* ═══════════ الخلفية الحيّة ═══════════
   ثلاث طبقات، كلها transform/opacity فقط — تُركّب على بطاقة الرسوميات بلا إعادة رسم:
   أضواء شفقية تنجرف، شبكة شعرية تنساب، وخط مسح يعبر الشاشة: توقيع المنتج نفسه.
   z-index:-1 = تحت كل المحتوى وفوق خلفية body. */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.bgfx .au{position:absolute;border-radius:50%;will-change:transform}
.bgfx .a1{width:78vmax;height:78vmax;top:-38vmax;inset-inline-end:-26vmax;
          background:radial-gradient(circle,#2dd4bf30,#2dd4bf0a 42%,transparent 66%);
          animation:au1 28s ease-in-out infinite alternate}
.bgfx .a2{width:64vmax;height:64vmax;bottom:-34vmax;inset-inline-start:-20vmax;
          background:radial-gradient(circle,#38bdf826,#38bdf808 42%,transparent 66%);
          animation:au2 34s ease-in-out infinite alternate}
.bgfx .a3{width:46vmax;height:46vmax;top:28%;inset-inline-start:30%;
          background:radial-gradient(circle,#a78bfa1c,transparent 64%);
          animation:au3 40s ease-in-out infinite alternate}
@keyframes au1{50%{transform:translate(-9vmax,6vmax) scale(1.08)}to{transform:translate(-16vmax,12vmax) scale(1.16)}}
@keyframes au2{50%{transform:translate(8vmax,-5vmax) scale(1.1)}to{transform:translate(14vmax,-13vmax) scale(1.22)}}
@keyframes au3{50%{transform:translate(-6vmax,-10vmax) scale(.9)}to{transform:translate(-12vmax,-4vmax) scale(1.05)}}

.bgfx .grid{position:absolute;inset:0;
            -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 8%,#000,transparent 78%);
                    mask-image:radial-gradient(ellipse 85% 65% at 50% 8%,#000,transparent 78%)}
.bgfx .grid i{position:absolute;inset:-72px;opacity:.34;will-change:transform;
              background-image:linear-gradient(var(--line) 1px,transparent 1px),
                               linear-gradient(90deg,var(--line) 1px,transparent 1px);
              background-size:72px 72px;animation:pan 26s linear infinite}
@keyframes pan{to{transform:translate(72px,72px)}}

.bgfx .scan{position:absolute;inset-inline:0;top:0;height:90px;will-change:transform;
            background:linear-gradient(180deg,transparent,#2dd4bf06 55%,#2dd4bf14 94%,#5eead42e 99%,transparent);
            transform:translateY(-200px);animation:sweep 11s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sweep{0%{transform:translateY(-200px)}62%,100%{transform:translateY(105vh)}}

/* نقاط تومض على الشبكة: "مواقع" تُفحص */
.bgfx .blip{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--acc);
            box-shadow:0 0 12px 2px #2dd4bf88;opacity:0;animation:blip 7s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:0;transform:scale(.4)}12%{opacity:.9;transform:scale(1)}30%{opacity:0;transform:scale(1.8)}}

@media (prefers-reduced-motion:reduce){
  .bgfx .au,.bgfx .grid i,.bgfx .blip{animation:none!important}
  .bgfx .scan{display:none}
}

/* ─────────── أزرار ─────────── */
.btn{
  --bg:var(--ink-2); --bd:var(--line-2); --c:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--bg);color:var(--c);border:1px solid var(--bd);
  font-weight:600;font-size:14.5px;line-height:1;padding:12px 20px;border-radius:var(--r2);
  cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;
  transition:background var(--fast),border-color var(--fast),transform var(--fast) var(--spring),
             box-shadow var(--mid);
}
.btn:hover:not(:disabled){--bg:var(--ink-3);--bd:var(--line-3);transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none;
         stroke-linecap:round;stroke-linejoin:round;flex:none}

.btn-p{--bg:var(--acc);--bd:transparent;--c:#04100e;font-weight:700}
.btn-p:hover:not(:disabled){--bg:var(--acc-l);box-shadow:0 10px 30px -12px var(--acc)}
.btn-g{--bg:transparent;--bd:transparent;--c:var(--fg-1)}
.btn-g:hover:not(:disabled){--bg:var(--ink-2);--c:var(--fg)}
.btn-sm{padding:8px 14px;font-size:13.5px;border-radius:var(--r1)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-ic{padding:11px;--c:var(--fg-2)}
.btn-ic:hover:not(:disabled){--c:var(--neg);--bd:#4a2530}

/* موجة النقر */
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.22;
     transform:translate(-50%,-50%) scale(0);pointer-events:none;
     animation:rip .62s var(--ease) forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ─────────── حقول ─────────── */
input,select,textarea{
  background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r2);
  padding:12px 15px;width:100%;transition:border-color var(--fast),box-shadow var(--fast),background var(--fast);
}
input:hover,select:hover{border-color:var(--line-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px #2dd4bf1f;background:var(--ink-0)}
input::placeholder{color:var(--fg-3)}
select{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),
                   linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-position:14px 50%,19px 50%;background-size:5px 5px;background-repeat:no-repeat}

/* ─────────── تخطيط ─────────── */
.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.row>input,.row>select{flex:1 1 180px;width:auto;min-width:0}   /* أساس ١٨٠px: الحقل الضيق ينزل بزرّه سطرًا لا يُعصر */

/* ─────────── شارات ─────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
      padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);color:var(--fg-2);
      white-space:nowrap;line-height:1.5}
.chip-ok{color:var(--pos);border-color:#1e4032;background:#0b1d16}
.chip-warn{color:var(--warn);border-color:#453611;background:#1a1408}
.chip-bad{color:var(--neg);border-color:#4a2530;background:#1c0e11}
.chip-acc{color:var(--acc);border-color:#12453f;background:#07201d}

.dot{width:6px;height:6px;border-radius:50%;flex:none}
.dotc{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.dot-live{background:var(--pos);box-shadow:0 0 0 0 #4ade8066;animation:ping 2.4s infinite}
@keyframes ping{60%{box-shadow:0 0 0 8px #4ade8000}100%{box-shadow:0 0 0 0 #4ade8000}}

.sev{width:7px;height:7px;border-radius:50%;flex:none}
.sev-critical{background:var(--neg);box-shadow:0 0 7px var(--neg)}
.sev-high{background:var(--or)}
.sev-medium{background:var(--warn)}
.sev-low{background:var(--pos)}
.sev-info{background:var(--fg-3)}

/* ─────────── بطاقات ─────────── */
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r3);
      position:relative;overflow:hidden}
.card-h{transition:border-color var(--mid),transform var(--mid) var(--ease),box-shadow var(--mid)}
.card-h:hover{border-color:var(--line-2);transform:translateY(-3px);
              box-shadow:0 20px 44px -26px #000c}
/* خط ضوء علوي يظهر عند التحويم */
.card-h::after{content:"";position:absolute;inset:0 0 auto;height:1px;opacity:0;
   background:linear-gradient(90deg,transparent,var(--acc),transparent);
   transition:opacity var(--mid)}
.card-h:hover::after{opacity:.75}

/* ─────────── حركة ─────────── */
.js .rise{opacity:0;transform:translateY(22px)}
.js .rise.in{opacity:1;transform:none;
             transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.js .fade{opacity:0}
.js .fade.in{opacity:1;transition:opacity var(--slow) var(--ease)}
.js .zoom{opacity:0;transform:scale(.95)}
.js .zoom.in{opacity:1;transform:none;
             transition:opacity var(--mid) var(--ease),transform var(--slow) var(--spring)}

.spin{width:13px;height:13px;border:2px solid var(--line-2);border-top-color:var(--acc);
      border-radius:50%;animation:sp .7s linear infinite;flex:none;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

.sk{background:linear-gradient(90deg,var(--ink-2) 25%,var(--ink-4) 50%,var(--ink-2) 75%);
    background-size:200% 100%;animation:shim 1.5s infinite;border-radius:var(--r2)}
@keyframes shim{to{background-position:-200% 0}}

/* ─────────── إشعارات ─────────── */
#toast{position:fixed;inset:auto;inset-block-end:24px;inset-inline-start:24px;z-index:200;margin:0;padding:0;
       border:0;background:none;color:inherit;overflow:visible;
       display:flex;flex-direction:column;gap:10px;max-width:min(92vw,400px)}
#toast[popover]:not(:popover-open){display:none}
.tst{background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r2);
     padding:13px 18px;font-size:14px;display:flex;align-items:center;gap:11px;
     box-shadow:0 22px 50px -22px #000;animation:tin .42s var(--spring)}
.tst.ok{border-color:#1e4032}.tst.bad{border-color:#4a2530}
@keyframes tin{from{opacity:0;transform:translateY(22px) scale(.93)}}
.tst.out{animation:tout .28s var(--ease) forwards}
@keyframes tout{to{opacity:0;transform:translateX(26px)}}

/* ─────────── نسخ ─────────── */
.cp{display:flex;align-items:center;gap:var(--s2);background:var(--ink-0);
    border:1px solid var(--line);border-radius:var(--r1);padding:9px 12px;
    font-size:12.5px;transition:border-color var(--fast)}
.cp:hover{border-color:var(--line-2)}
.cp span{flex:1;overflow:auto;white-space:nowrap;scrollbar-width:none}
.cp span::-webkit-scrollbar{display:none}
.cp button{background:none;border:0;cursor:pointer;color:var(--fg-2);padding:4px;flex:none;
           border-radius:6px;display:grid;place-items:center;
           transition:color var(--fast),background var(--fast),transform var(--fast) var(--spring)}
.cp button:hover{color:var(--acc);background:var(--ink-3);transform:scale(1.14)}
.cp svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;
        stroke-linecap:round;stroke-linejoin:round}

/* كود داخل نص عربي: LTR معزول (dir="ltr" في الوسم) */
code{font:500 .9em var(--mono);background:var(--ink-3);border:1px solid var(--line-2);border-radius:6px;
     padding:0 6px;color:var(--fg-1);overflow-wrap:anywhere}
.muted{color:var(--fg-2)}
.small{font-size:13.5px}
.err{color:var(--neg);font-size:13px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rise,.js .fade,.js .zoom{opacity:1;transform:none}
  .spin{animation-duration:1.4s!important;animation-iteration-count:infinite!important}
}