/* ═══════════════ اللوحة — يمتد base.css ═══════════════ */

/* حشوة البطاقة الافتراضية — بدونها التصق المحتوى بالحدود في عشر بطاقات (بطاقة الدخول منها).
   البطاقات الخاصة (.ovc، .hero، .chero، .ctab…) تضبط حشوتها أدناه فتغلب هذه. */
.card{padding:var(--s5)}

.shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh}

/* الحجاب مثبّت دائمًا: لو عاد يومًا داخل .shell فلن يصير عنصر شبكة يزيح التخطيط. */
.scrim{position:fixed;inset:0;background:#02040899;z-index:55;opacity:0;pointer-events:none;
       transition:opacity var(--mid);backdrop-filter:blur(3px)}
.scrim.on{opacity:1;pointer-events:auto}
aside{border-inline-end:1px solid var(--line);background:#080b11d0;backdrop-filter:blur(14px);
      position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
      padding:var(--s4) var(--s3);gap:3px;z-index:60}
main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s3);
        padding:0 var(--s6);height:62px;border-bottom:1px solid var(--line);
        background:#080b11d9;backdrop-filter:blur(18px) saturate(140%)}
.topbar .who{display:flex;align-items:center;gap:10px;min-width:0}
.topbar .who i{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
               background:var(--ink-3);border:1px solid var(--line-2);font:700 12px var(--mono);
               color:var(--acc)}
.topbar .who b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sp{margin-inline-start:auto}
.topbar .btn{flex:none}
@media(max-width:480px){.qbadge span:last-child{display:none}}
.qbadge{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-2);white-space:nowrap;
        border:1px solid var(--line-2);border-radius:99px;padding:5px 12px;background:var(--ink-2)}
.page{padding:var(--s5) var(--s6) var(--s9);flex:1}
@media(max-width:900px){.topbar{padding:0 var(--s4)}.page{padding:var(--s4) var(--s4) var(--s9)}}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  aside{position:fixed;inset-block:0;inset-inline-start:0;width:246px;height:100dvh;
        overflow-y:auto;overscroll-behavior:contain;
        transform:translateX(100%);visibility:hidden;
        transition:transform var(--mid) var(--ease),visibility 0s linear var(--mid);
        box-shadow:-24px 0 60px -24px #000}
  aside.open{transform:none;visibility:visible;transition:transform var(--mid) var(--ease)}
  .burger{display:grid!important}
}

.brand img{flex:none;filter:drop-shadow(0 0 12px #2dd4bf4d);animation:pop .6s var(--spring)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);font-weight:700;font-size:18px;
       padding:10px 11px var(--s5);letter-spacing:-.3px}

@keyframes pop{from{transform:scale(0) rotate(-35deg)}}


.navsec{font-size:11.5px;color:var(--fg-3);letter-spacing:1.6px;font-weight:700;
        padding:var(--s5) 11px var(--s2)}
.nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r2);
     color:var(--fg-2);font-size:14.5px;font-weight:500;position:relative;
     transition:color var(--fast),background var(--fast)}
.nav:hover{color:var(--fg);background:var(--ink-2)}
.nav.on{color:var(--fg);background:var(--ink-3)}
.nav.on::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:2.5px;
                border-radius:3px;background:var(--acc);animation:barIn .35s var(--spring)}
@keyframes barIn{from{transform:scaleY(0)}}
.nav svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.85;fill:none;flex:none;
         stroke-linecap:round;stroke-linejoin:round;transition:transform var(--mid) var(--spring)}
.nav:hover svg{transform:scale(1.14)}
.nav .n{margin-inline-start:auto;font:500 11px var(--mono);background:var(--ink-4);color:var(--fg-2);
        padding:1px 8px;border-radius:99px}
.nav.on .n{background:#0d3833;color:var(--acc)}

.burger{display:none;place-items:center;width:38px;height:38px;border-radius:var(--r2);
        border:1px solid var(--line-2);background:var(--ink-2);cursor:pointer;flex:none}
.burger svg{width:18px;height:18px;stroke:var(--fg);stroke-width:2;fill:none}

/* ─── رأس الصفحة ─── */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
    margin-bottom:var(--s5);animation:down .45s var(--ease)}
@keyframes down{from{opacity:0;transform:translateY(-10px)}}
.ph h1{font-size:25px;font-weight:700;letter-spacing:-.9px}
.ph p{color:var(--fg-2);font-size:14px;margin-top:2px}

#view{animation:vin .4s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(12px)}}

/* ─── بطاقات الأرقام ─── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:var(--s3);
      margin-bottom:var(--s5)}
.kpi{padding:21px 22px;position:relative;overflow:hidden;
     transition:border-color var(--mid),transform var(--mid) var(--ease)}
.kpi:hover{border-color:var(--line-2);transform:translateY(-3px)}
.kpi::after{content:"";position:absolute;inset-block-start:-46px;inset-inline-end:-46px;
            width:104px;height:104px;border-radius:50%;background:var(--c,var(--acc));
            opacity:.1;filter:blur(24px);transition:opacity var(--mid),transform var(--mid)}
.kpi:hover::after{opacity:.22;transform:scale(1.25)}
.kpi b{display:block;font:700 34px/1.12 var(--mono);letter-spacing:-1.6px;color:var(--c,var(--fg));
       margin-bottom:2px}
.kpi span{color:var(--fg-2);font-size:13px}
.kpi .delta{display:inline-flex;align-items:center;gap:4px;font:600 11.5px var(--mono);
            margin-inline-start:8px;vertical-align:3px}
.kpi .delta.up{color:var(--pos)}.kpi .delta.dn{color:var(--neg)}
.kpi .ico{position:absolute;inset-block-start:17px;inset-inline-end:18px;opacity:.3}
.kpi .ico svg{width:19px;height:19px;stroke:var(--c,var(--acc));stroke-width:1.85;fill:none;
              stroke-linecap:round;stroke-linejoin:round}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.g3{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s4)}
@media(max-width:980px){.g2,.g3{grid-template-columns:1fr}}

.ttl{font-size:12.5px;color:var(--fg-2);font-weight:600;letter-spacing:.3px;margin-bottom:var(--s4);
     display:flex;align-items:center;gap:8px}
.ttl svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
         stroke-linecap:round;stroke-linejoin:round}

/* ─── حلقة الدرجة ─── */
.ring{position:relative;flex:none}
.ring svg{transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-linecap:round}
.ring .bgc{stroke:var(--ink-4)}
.ring .fg2{transition:stroke-dashoffset 1.1s var(--ease);filter:drop-shadow(0 0 5px currentColor)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;
        font-family:var(--mono);line-height:1}

/* ─── قوائم ─── */
.list>*{animation:iin .42s var(--ease) backwards}
@keyframes iin{from{opacity:0;transform:translateY(10px)}}
.li{display:flex;align-items:center;gap:var(--s3);padding:12px 14px;border-radius:var(--r2);
    border:1px solid transparent;color:inherit;transition:background var(--fast),border-color var(--fast)}
a.li:hover,.li.act:hover{background:var(--ink-3);border-color:var(--line)}
.li+.li{margin-top:2px}
.li .gap{margin-inline-start:auto}
.li small{color:var(--fg-2);font-size:12.5px}

.bar{height:6px;border-radius:99px;background:var(--ink-4);overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:99px;width:0;background:var(--c,var(--acc));
       transition:width 1s var(--ease)}

/* ─── رسوم ─── */
.chart{width:100%;display:block;overflow:visible}
.chart .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
           stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .ar{opacity:0;animation:fin .8s .45s forwards}
@keyframes fin{to{opacity:1}}
.chart .pt{opacity:0;animation:ptin .38s var(--spring) forwards;transform-box:fill-box;transform-origin:center}
@keyframes ptin{from{transform:scale(0)}to{opacity:1;transform:scale(1)}}
.chart text{fill:var(--fg-3);font-size:11px;font-family:var(--mono)}
.donut circle{fill:none;stroke-width:14;transition:stroke-width var(--fast);
              animation:dn 1.1s var(--ease) backwards}
@keyframes dn{from{stroke-dasharray:0 999}}
.donut circle:hover{stroke-width:18}
.legend{display:flex;flex-direction:column;gap:var(--s2);font-size:13px}
.legend div{display:flex;align-items:center;gap:9px;transition:transform var(--fast) var(--ease)}
.legend div:hover{transform:translateX(-3px)}
.legend b{margin-inline-start:auto;font-family:var(--mono)}

/* ─── أكورديون ─── */
details.acc{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
            background:var(--ink-2);transition:border-color var(--mid)}
details.acc+details.acc{margin-top:9px}
details.acc[open]{border-color:var(--line-2)}
details.acc summary{cursor:pointer;list-style:none;padding:14px 17px;display:flex;
                    align-items:center;gap:11px;transition:background var(--fast)}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary:hover{background:var(--ink-3)}
details.acc .chev{margin-inline-start:auto;transition:transform var(--mid) var(--ease)}
details.acc .chev svg{width:15px;height:15px;stroke:var(--fg-2);stroke-width:2;fill:none}
details.acc[open] .chev{transform:rotate(-90deg)}
details.acc .inner{padding:0 17px 16px;animation:accIn .32s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-7px)}}

.empty{text-align:center;padding:var(--s8) var(--s5);color:var(--fg-2)}
.empty svg{width:42px;height:42px;stroke:var(--line-3);stroke-width:1.4;fill:none;
           margin:0 auto var(--s4);animation:float 3.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.lbl{color:var(--fg-2);font-size:11.5px;margin-top:9px}

/* ─── صفحة التنبيهات ─── */
.rulecard{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);
          border-radius:var(--r2);background:var(--ink-1);font-size:14px;
          transition:border-color var(--fast),transform var(--fast) var(--ease)}
.rulecard+.rulecard{margin-top:8px}
.rulecard:hover{border-color:var(--line-2);transform:translateX(-3px)}
.rulecard small{margin-inline-start:auto;color:var(--fg-3);font-size:12px;text-align:end}
.switch{position:relative;width:42px;height:24px;flex:none;cursor:pointer}
/* مساحة لمس أكبر من المفتاح المرسوم */
.switch input{position:absolute;opacity:0;inset:-10px;width:auto;height:auto;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--ink-4);
          border:1px solid var(--line-2);transition:background var(--mid),border-color var(--mid)}
.switch i::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;
                 width:16px;height:16px;border-radius:50%;background:var(--fg-2);
                 transition:transform var(--mid) var(--spring),background var(--mid)}
.switch input:checked+i{background:#0d3833;border-color:var(--acc)}
.switch input:checked+i::after{transform:translateX(-18px);background:var(--acc)}
.switch input:focus-visible+i{outline:2px solid var(--acc);outline-offset:3px}

/* ═══════════════ الشهادات ═══════════════ */

/* شارة التقدير: اللون يحمل المعنى، والحرف يحمله أيضًا لمن لا يميّز الألوان */
.grade{display:inline-grid;place-items:center;min-width:40px;height:30px;padding:0 9px;border-radius:9px;
       font:700 14px/1 var(--mono);letter-spacing:-.4px;border:1px solid;flex:none;
       direction:ltr;unicode-bidi:isolate}
.grade.lg{min-width:88px;height:88px;font-size:36px;border-radius:24px;letter-spacing:-1.5px;
          box-shadow:0 0 42px -14px currentColor;animation:gpop .7s var(--spring)}
@keyframes gpop{from{transform:scale(.6) rotate(-8deg);opacity:0}}
.g-A\+,.g-A{color:var(--pos);border-color:#1e4032;background:#0b1d16}
.g-A-{color:var(--acc);border-color:#12453f;background:#07201d}
.g-B{color:var(--warn);border-color:#453611;background:#1a1408}
.g-C{color:var(--or);border-color:#4a3016;background:#1d130a}
.g-F{color:var(--neg);border-color:#4a2530;background:#1c0e11}
.g-none{color:var(--fg-3);border-color:var(--line-2);background:var(--ink-2)}

/* ─── لوحة شهادة الموقع ─── */
.cert-top{display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap}
.reasons{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.reasons div{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--fg-1);overflow-wrap:anywhere}
.reasons div::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c,var(--fg-3));flex:none}

/* auto-fit: حقائق أقل من الأعمدة تتمدد بدل أعمدة فارغة؛ والأخيرة تملأ بقية صفّها — لا خلايا داكنة يتيمة */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
       background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
       margin-top:var(--s5)}
/* الخطوط من ظل كل خلية لا من خلفية الشبكة: الخانات الفارغة في آخر صف تبقى بلون الخلايا لا كتلة داكنة */
.facts>div{background:var(--ink-1);padding:12px 15px;min-width:0;box-shadow:0 0 0 1px var(--line);
           transition:background var(--fast)}
.facts>div:hover{background:var(--ink-2)}
.facts span{display:block;font-size:11.5px;color:var(--fg-2);margin-bottom:2px}
.facts b{font-size:14px;font-weight:600;overflow-wrap:anywhere}

/* ─── السلسلة ─── */
.chain{position:relative;padding-inline-start:30px;margin-top:var(--s2)}
.chain::before{content:"";position:absolute;inset-block:22px;inset-inline-start:9px;width:2px;
               background:linear-gradient(var(--acc),var(--line-2) 70%,transparent);border-radius:2px}
.link{position:relative;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r2);
      background:var(--ink-1);animation:iin .5s var(--ease) backwards;
      transition:border-color var(--fast),transform var(--fast) var(--ease)}
.link:hover{border-color:var(--line-2);transform:translateX(-3px)}
.link+.link{margin-top:12px}
.link::before{content:"";position:absolute;inset-inline-start:-27px;top:19px;width:12px;height:12px;
              border-radius:50%;background:var(--ink-0);border:2.5px solid var(--acc);
              box-shadow:0 0 12px -2px var(--acc)}
.link.root::before{border-color:var(--fg-3);box-shadow:none;border-style:dashed}
.link.bad::before{border-color:var(--neg);box-shadow:0 0 12px -2px var(--neg)}
.link .role{font:700 11.5px var(--sans);letter-spacing:1.4px;color:var(--fg-3)}
.link .nm{font:600 15px var(--mono);direction:ltr;text-align:right;margin:3px 0 7px;overflow-wrap:anywhere}
.link .kv{display:flex;flex-wrap:wrap;gap:6px}
.link .kv .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere;border-radius:10px}

.sans{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.sans span{font:500 12px var(--mono);direction:ltr;padding:4px 10px;border-radius:8px;
           background:var(--ink-3);border:1px solid var(--line-2);color:var(--fg-1)}

.hrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;
      padding:11px 0;border-top:1px solid var(--ink-3);font-size:13.5px}
.hrow:first-child{border-top:0}
.hrow .fp{font:500 12px var(--mono);color:var(--fg-2);direction:ltr}
.hrow>span{min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){.hrow{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.hrow .fp{grid-column:1/-1}}

/* ═══════════════ المواقع ═══════════════ */

.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s5)}
.fchip{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:99px;cursor:pointer;
       border:1px solid var(--line-2);background:var(--ink-2);color:var(--fg-2);font-size:13.5px;font-weight:500;
       transition:color var(--fast),border-color var(--fast),background var(--fast),transform var(--fast) var(--spring)}
.fchip b{font:600 11.5px/1.6 var(--mono);padding:0 7px;border-radius:99px;background:var(--ink-4);color:var(--fg-1);
         transition:background var(--fast),color var(--fast)}
.fchip:hover{color:var(--fg);border-color:var(--line-3)}
.fchip:active{transform:scale(.96)}
.fchip.on{color:var(--fg);background:var(--ink-3);border-color:var(--acc)}
.fchip.on b{background:#0d3833;color:var(--acc)}
.fchip.warn.on{border-color:var(--warn)}
.fchip.warn.on b{background:#2b220b;color:var(--warn)}

.search{margin-inline-start:auto;display:flex;align-items:center;gap:8px;padding:0 14px;min-width:230px;
        border:1px solid var(--line-2);border-radius:99px;background:var(--ink-1);
        transition:border-color var(--fast),box-shadow var(--fast)}
.search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px #2dd4bf1f}
.search svg{width:15px;height:15px;stroke:var(--fg-3);stroke-width:2;fill:none;flex:none}
.search input{border:0;background:none;padding:9px 0;box-shadow:none!important;font-size:13.5px}
@media(max-width:700px){.search{margin-inline-start:0;flex:1 1 100%}}

.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(318px,100%),1fr));gap:var(--s4)}

.scard{position:relative;display:flex;flex-direction:column;gap:15px;padding:18px 18px 14px;overflow:hidden;
       background:linear-gradient(180deg,var(--ink-2),#0a0f17);border:1px solid var(--line);border-radius:var(--r3);
       animation:iin .5s var(--ease) backwards;
       transition:border-color var(--mid),transform var(--mid) var(--ease),box-shadow var(--mid)}
/* خط الصحة العلوي + توهّج خافت بلون الحالة */
.scard::before{content:"";position:absolute;inset:0 0 auto;height:2px;
               background:linear-gradient(90deg,transparent,var(--a) 30%,var(--a) 70%,transparent)}
.scard::after{content:"";position:absolute;inset-block-start:-70px;inset-inline-end:-50px;width:160px;height:160px;
              border-radius:50%;background:var(--a);opacity:.06;filter:blur(30px);pointer-events:none;
              transition:opacity var(--mid)}
.scard:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 26px 54px -30px #000}
.scard:hover::after{opacity:.13}
.quiet .scard,.quiet .sp-ln,.quiet .ring .fg2{animation:none!important;transition:none!important}
.quiet .sp-ln{stroke-dashoffset:0}

.scard header{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
    font:700 16px var(--mono);color:var(--a);
    background:color-mix(in srgb,var(--a) 13%,var(--ink-3));
    border:1px solid color-mix(in srgb,var(--a) 32%,transparent)}
.av svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none}
.scard .nm{min-width:0;flex:1}
.scard .nm a{display:block;font:600 15.5px var(--mono);color:var(--fg);direction:ltr;text-align:right;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--fast)}
.scard .nm a:hover{color:var(--acc)}
.scard .nm small{display:flex;align-items:center;gap:6px;color:var(--fg-2);font-size:12.5px;margin-top:3px}
.scard header .btn-ic{opacity:0;transition:opacity var(--fast)}
.scard:hover header .btn-ic,.scard header .btn-ic:focus-visible{opacity:1}
@media(pointer:coarse){.scard header .btn-ic{opacity:1}}

.sbody{display:flex;align-items:center;gap:18px;position:relative;z-index:1}
.sside{flex:1;min-width:0}
.sc{display:flex;align-items:baseline;gap:5px}
.sc b{font:700 32px/1 var(--mono);letter-spacing:-1.4px}
.sc span{color:var(--fg-3);font:500 13px var(--mono)}
.sc small{margin-inline-start:auto;font:600 12px var(--mono)}
.spark{display:block;width:100%;height:36px;margin-top:9px;overflow:visible}
.sp-ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease) .25s forwards}
.noscore{width:76px;height:76px;border-radius:50%;border:2px dashed var(--line-3);display:grid;place-items:center;
         color:var(--fg-3);font:600 12px var(--sans);flex:none}

.sfacts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
        border-radius:var(--r2);overflow:hidden;position:relative;z-index:1}
.sfacts>div{background:var(--ink-1);padding:10px 12px;min-width:0}
.sfacts span{display:block;font-size:11px;color:var(--fg-3);margin-bottom:4px}
.sfacts b{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;white-space:nowrap}
.sfacts b>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sfacts .grade{min-width:32px;height:22px;font-size:12px;border-radius:7px;padding:0 6px}
.sd{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--mono);color:var(--fg-1)}
.sd.z{color:var(--fg-3)}

.scard footer{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--ink-3);
              margin-top:auto;position:relative;z-index:1;flex-wrap:wrap;row-gap:10px}
.scard footer .when{flex:1;min-width:0;display:flex;align-items:center;gap:6px;color:var(--fg-2);font-size:12.5px;
                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* أضيق الجوالات: الحالة («قيد الفحص») تأخذ سطرها والزرّان معًا تحتها — لا نص مقصوص */
@media(max-width:359px){.scard footer .when{flex-basis:100%}}

.spend{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px dashed var(--line-3);
       border-radius:var(--r2);background:var(--ink-1);position:relative;z-index:1}
.spend svg{width:22px;height:22px;stroke:var(--warn);stroke-width:1.8;fill:none;flex:none;margin-top:2px}
.spend b{display:block;font-size:14.5px;margin-bottom:3px}
.spend p{color:var(--fg-2);font-size:13px;overflow-wrap:anywhere}
.spend>div{min-width:0}               /* رسالة خطأ طويلة بلا مسافات كانت تخرج من الإطار المتقطع */

.hero-empty{text-align:center;padding:var(--s8) var(--s5);border:1px dashed var(--line-2);border-radius:var(--r4);
            background:radial-gradient(ellipse 60% 80% at 50% 0%,#0a2b2833,transparent)}
.hero-empty img{width:54px;height:54px;margin:0 auto var(--s4);animation:float 3.6s ease-in-out infinite}
.hero-empty h3{font-size:20px;margin-bottom:6px}
.hero-empty p{color:var(--fg-2);max-width:42ch;margin:0 auto var(--s5)}

/* ═══════════════ النافذة ═══════════════ */

dialog.dlg{margin:auto;width:min(640px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;
           background:var(--ink-2);color:var(--fg);border:1px solid var(--line-2);border-radius:var(--r4);
           padding:28px;box-shadow:0 44px 110px -30px #000}
dialog.dlg::backdrop{background:#02040899;backdrop-filter:blur(6px)}
dialog.dlg[open]{animation:dlgIn .4s var(--spring)}
dialog.dlg[open]::backdrop{animation:bdIn .3s ease}
@keyframes dlgIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes bdIn{from{opacity:0}}
.dlg-x{position:absolute;inset-block-start:18px;inset-inline-end:18px}
.dlg h2{font-size:22px;font-weight:700;letter-spacing:-.6px;margin-bottom:6px}
.dlg .lead{color:var(--fg-2);font-size:14px;margin-bottom:var(--s5)}
.dlg-actions{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s5);padding-top:var(--s4);
             border-top:1px solid var(--line)}
.dlg-body>*{animation:vin .35s var(--ease)}

.stepper{display:flex;align-items:center;gap:10px;margin-bottom:var(--s5);font-size:12.5px;color:var(--fg-3);
         padding-inline-end:48px}            /* مكان زر الإغلاق — على ٣٢٠ كان يركب الخطوة الثانية */
.stepper span{display:flex;align-items:center;gap:8px;transition:color var(--mid)}
.stepper span b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
                font:700 11.5px var(--mono);background:var(--ink-4);color:var(--fg-2);
                transition:background var(--mid),color var(--mid),transform var(--mid) var(--spring)}
.stepper span.on{color:var(--fg)}
.stepper span.on b{background:var(--acc);color:#04100e;transform:scale(1.08)}
.stepper span.done b{background:#0d3833;color:var(--acc)}
.stepper i{flex:0 0 44px;height:1px;background:var(--line-3);position:relative;overflow:hidden}
.stepper i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);
                  transform-origin:right;transition:transform .5s var(--ease)}
.stepper.s2 i::after{transform:scaleX(1)}

/* ═══════════════ نظرة عامة ═══════════════ */

#view.quiet *,#view.quiet *::before,#view.quiet *::after{animation:none!important;transition:none!important}
#view>section+section,#view>div+section,#view>section+div,#view>div.ov-2{margin-top:var(--s4)}
.ov-2{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s4)}
@media(max-width:1120px){.ov-2{grid-template-columns:1fr}}
.ovc{padding:20px 22px;animation:iin .55s var(--ease) backwards}
.ov-2>.ovc:nth-child(2){animation-delay:80ms}

.cardh{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4);min-height:26px;flex-wrap:wrap;row-gap:2px}
.cardh h3{font-size:15.5px;font-weight:600;letter-spacing:-.2px}
.cardh .cnt{font:600 11.5px/1.7 var(--mono);padding:0 8px;border-radius:99px;background:#2a1116;color:var(--neg)}
.cardh>a,.cardh>.muted{margin-inline-start:auto}
.cardh>a{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--fg-2);transition:color var(--fast)}
.cardh>a svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.cardh>a:hover{color:var(--acc)}

/* ─── البطل ─── */
.hero{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s6);align-items:center;padding:24px 28px;
      background:radial-gradient(ellipse 55% 140% at 100% 0%,color-mix(in srgb,var(--p) 13%,transparent),transparent 62%),
                 linear-gradient(180deg,var(--ink-2),#0a0f17);
      animation:iin .6s var(--ease) backwards}
.hero::after{content:"";position:absolute;inset:0 0 auto;height:2px;
             background:linear-gradient(90deg,transparent,var(--p) 30%,var(--p) 70%,transparent);opacity:.8}
@media(max-width:1300px){.hero{grid-template-columns:auto 1fr}.hero .hstats{grid-column:1/-1}}
@media(max-width:640px){.hero{grid-template-columns:1fr;text-align:center}.hero .gauge{margin-inline:auto}
                        .hero .row{justify-content:center}}

.gauge{position:relative;width:210px;flex:none}
.gauge svg{display:block;width:100%;height:auto;overflow:visible}
.gauge .trk{fill:none;stroke:var(--ink-4);stroke-width:13;stroke-linecap:round}
.gauge .val{fill:none;stroke:var(--p);stroke-width:13;stroke-linecap:round;
            filter:drop-shadow(0 0 9px color-mix(in srgb,var(--p) 55%,transparent));
            transition:stroke-dashoffset 1.7s var(--ease)}
.gauge .tick{stroke:var(--ink-0);stroke-width:2.5}
.gauge .zl{fill:var(--fg-3);font:700 11px var(--mono);text-anchor:middle;dominant-baseline:middle;opacity:.75}
/* الرقم تحت تسمية D (أعلى القوس) لا فوقها: ٢٦px تنزله إلى فتحة القوس السفلية */
.gauge .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
            padding-top:26px}
.gauge .ctr b{font:700 50px/1 var(--mono);letter-spacing:-2px;color:var(--p)}
.gauge .ctr span{font:500 11.5px var(--sans);color:var(--fg-3);margin-top:4px}
.gauge .ctr em{font:700 12.5px var(--mono);font-style:normal;margin-top:9px;padding:2px 13px;border-radius:99px;
               color:var(--p);background:color-mix(in srgb,var(--p) 13%,transparent);
               border:1px solid color-mix(in srgb,var(--p) 34%,transparent)}

.hmain{min-width:0}
.hmain .hello{display:flex;align-items:center;gap:9px;color:var(--fg-2);font-size:13.5px;margin-bottom:8px}
.hmain h2{font-size:clamp(23px,2.5vw,32px);font-weight:700;letter-spacing:-1.1px;line-height:1.22}
.hmain h2 em{font-style:normal;color:var(--p)}
.hmain p{color:var(--fg-1);margin-top:9px;font-size:15px;max-width:52ch}
.delta{font:700 12.5px var(--mono)}

.hstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
        border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;align-self:stretch}
.hstats>div{background:#080c13d9;padding:15px 18px;min-width:0;display:flex;flex-direction:column;justify-content:center;
            transition:background var(--fast)}
.hstats>div:hover{background:var(--ink-2)}
.hstats b{font:700 27px/1.15 var(--mono);letter-spacing:-1.2px}
.hstats span{font-size:12.5px;color:var(--fg-2);margin-top:2px}

/* ─── يحتاج انتباهك ─── */
.ai{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:11px 14px;
    border-radius:var(--r2);color:inherit;position:relative;border:1px solid transparent;
    transition:background var(--fast),border-color var(--fast),transform var(--fast) var(--ease)}
.ai::before{content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--c)}
.ai:hover{background:var(--ink-3);border-color:var(--line);transform:translateX(-3px)}
.ai+.ai{margin-top:3px}
.ai-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--c);flex:none;
       background:color-mix(in srgb,var(--c) 11%,transparent);border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.ai-ic svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ai-t{min-width:0}
.ai-t b{display:block;font-size:14.5px;font-weight:600}
.ai-t small{display:block;font:500 12px var(--mono);color:var(--fg-2);direction:ltr;text-align:right;margin-top:1px}
.ai-t p{color:var(--fg-2);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-go svg{width:16px;height:16px;stroke:var(--fg-3);stroke-width:2;fill:none;
           transition:transform var(--fast) var(--ease),stroke var(--fast)}
.ai:hover .ai-go svg{stroke:var(--acc);transform:translateX(-4px)}
.more{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:8px;padding:9px;border-radius:var(--r2);
      font-size:13px;color:var(--fg-2);border:1px dashed var(--line-2);transition:color var(--fast),border-color var(--fast)}
.more svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.more:hover{color:var(--acc);border-color:var(--acc)}
.allgood{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 12px;gap:8px}
.allgood i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;
           background:#0b1d16;border:1px solid #1e4032;box-shadow:0 0 30px -8px var(--pos);animation:pop .7s var(--spring)}
.allgood svg{width:26px;height:26px;stroke:var(--pos);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ─── الشهادات القادمة ─── */
.uc{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 4px;color:inherit;
    border-top:1px solid var(--ink-3)}
.uc:first-child{border-top:0}
.uc .d{display:block;font:500 13px var(--mono);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;
       white-space:nowrap;transition:color var(--fast)}
.uc:hover .d{color:var(--acc)}
.uc .bar{height:5px}
.uc .bar i{background:var(--c)}
.uc .n{font:700 12.5px var(--sans);color:var(--c);white-space:nowrap}

/* ─── الاتجاه ─── */
.trend{position:relative;min-height:230px}   /* ارتفاع محجوز: الرسم الأول لا يغيّر حجم الحاوية المراقَبة ولا يزيح ما تحتها */
.trend svg{display:block;width:100%;height:auto;overflow:visible}
.trend .band{opacity:.055}
.trend .bl{font:700 11px var(--mono);text-anchor:end;dominant-baseline:middle;opacity:.8}
.trend .gl{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 5}
.trend .ln{fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
           stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s var(--ease) .1s forwards;
           filter:drop-shadow(0 0 6px #2dd4bf66)}
.trend .ar{opacity:0;animation:fin .9s .7s forwards}
.trend .xl{fill:var(--fg-3);font:500 11px var(--mono);text-anchor:middle}
.trend .xh{stroke:var(--fg-3);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s}
.trend .xd{opacity:0;stroke:var(--ink-0);stroke-width:2.5;transition:opacity .15s}
.trend .hit{cursor:crosshair}
.trend.hov .xh,.trend.hov .xd{opacity:1}
.tip{position:absolute;left:0;top:0;pointer-events:none;z-index:3;white-space:nowrap;
     background:var(--ink-3);border:1px solid var(--line-2);border-radius:10px;padding:7px 12px;
     box-shadow:0 16px 36px -14px #000;opacity:0;transform:translate(-50%,calc(-100% - 14px));
     transition:opacity .15s}
.trend.hov .tip{opacity:1}
.tip b{display:block;font:700 16px var(--mono);direction:ltr;text-align:center}
.tip span{font-size:11.5px;color:var(--fg-2)}

/* ─── خريطة الصحة ─── */
.hm-row{display:grid;grid-template-columns:minmax(110px,170px) 22px 1fr;gap:12px;align-items:center;
        padding:5px 6px;border-radius:8px;color:inherit;transition:background var(--fast)}
a.hm-row:hover{background:var(--ink-3)}
.hm-row .d{font:500 12.5px var(--mono);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;
           white-space:nowrap;transition:color var(--fast)}
a.hm-row:hover .d{color:var(--acc)}
.hm-row>b{font-size:13px;text-align:center}
.cells{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;direction:ltr}
.cells i{aspect-ratio:1;border-radius:4px;background:var(--c,var(--ink-4));opacity:var(--o,1);
         animation:cellin .45s var(--spring) backwards;transition:transform var(--fast) var(--spring)}
.cells i:hover{transform:scale(1.3);position:relative;z-index:1}
@keyframes cellin{from{transform:scale(0);opacity:0}}
.hm-axis{margin-top:2px}
.hm-axis .cells span{font:500 11px var(--mono);color:var(--fg-3);text-align:center}
.hm-legend{display:flex;align-items:center;gap:5px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px;
           font-size:11.5px;color:var(--fg-3)}
.hm-legend i{width:11px;height:11px;border-radius:3px;flex:none}

/* ─── النشاط ─── */
.stream{position:relative}
.stream::before{content:"";position:absolute;inset-block:22px;inset-inline-start:17px;width:1px;
                background:linear-gradient(var(--line-2),transparent)}
.ev{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:7px 0;color:inherit}
.ev-ic{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:var(--c);position:relative;z-index:1;
       background:var(--ink-1);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.ev-ic svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ev b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      transition:color var(--fast)}
.ev small{display:block;font:500 12px var(--mono);color:var(--fg-2);direction:ltr;text-align:right}
.ev time{font-size:12px;color:var(--fg-3);white-space:nowrap}
.ev:hover b{color:var(--acc)}
@media(min-width:1121px){.stream{column-count:2;column-gap:var(--s6)}.stream::before{display:none}
                         .ev{break-inside:avoid}}

.hm{overflow-x:auto;scrollbar-width:thin}

/* ═══════════════ إصلاحات المقاسات (تدقيق ٣٩٠ / ٧٦٨ / ١٣٦٦ بكسل) ═══════════════ */

/* التلميح لا يشغل مساحة وهو مخفي — كان يضيف تمريرًا أفقيًا ١٣px */
.tip{display:none;transition:none}
.trend.hov .tip{display:block;opacity:1}

/* أهداف لمس لا تقل عن ٣٠px */
.cardh>a{min-height:32px;padding:4px 8px;margin-inline-end:-8px;border-radius:8px}
.cardh>a:hover{background:var(--ink-3)}
.cp button{padding:8px}
.scard .nm a{padding-block:4px}

/* نص طويل بلا فواصل (رموز أخطاء، روابط) يلتف ولا يخرج من صفّه */
.li>div{min-width:0}
.li .muted,.ai-t p{overflow-wrap:anywhere}
.cp.wrap span{white-space:normal;word-break:break-all;overflow:visible;line-height:1.6}

/* تذييل بطاقة الموقع بسطرين */
.scard footer .when.two{flex-direction:column;align-items:flex-start;gap:0;line-height:1.4}
.scard footer .when.two small{color:var(--fg-3);font-size:11.5px}
.scard footer .when.two>*{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* الأكثر تكرارًا: العنوان في سطره الكامل فوق الشريط — لا قصّ في البطاقات الضيقة */
[data-b] .li{flex-wrap:wrap;gap:6px 12px;padding:10px 4px}
[data-b] .li>span:first-child{flex:1 1 100%!important;white-space:normal!important;overflow:visible!important;line-height:1.5}

/* الجوال: العنوان الطويل يلتف على سطرين بدل أن يُقصّ منه الرقم المهم ("تنتهي خلال …") */
@media(max-width:640px){
  .ev b,.ai-t p{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}

/* توثيق الـ API في الإعدادات: الوصف ينزل سطرًا حين يضيق الصف */
.api .li{flex-wrap:wrap;row-gap:4px}
.api .li .mono{min-width:0;overflow-wrap:anywhere}

/* خريطة الصحة على الجوال: الاسم فوق، والخلايا بعرض البطاقة */
@media(max-width:620px){
  .hm-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .hm-row .cells{grid-column:1/-1}
  .hm-row.hm-axis>span,.hm-row.hm-axis>b{display:none}
  .cells{gap:3px}
}

/* نصوص تحمل نطاقات طويلة: تلتف أو تُختصر داخل صفّها، لا تخرج منه */
.site-dom{font-size:22px;font-weight:600;text-align:right;overflow-wrap:anywhere}
@media(max-width:560px){.site-dom{font-size:17px}}
.ai-t small,.ev small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .nt{overflow-wrap:anywhere}
/* سجل التنبيهات على الشاشة الضيقة: الحالة والوقت ينزلان سطرًا بدل أن يعصرا النص في عمود ١٣٠px */
.alog .li{flex-wrap:wrap;row-gap:6px}
.alog .li>div{flex:1 1 220px}
.li small{white-space:nowrap}
.achart{min-height:150px}
.achart svg{display:block;width:100%;height:auto}

/* أهداف لمس على الشاشات اللمسية: ٣٢px على الأقل */
@media(pointer:coarse){.cp button{padding:9px}.rw-pin{min-height:32px}.scard .nm a,.cd-dom{line-height:1.6}}

/* نافذة مفتوحة: الصفحة خلفها لا تتمرّر مع العجلة */
html:has(dialog[open]){overflow:hidden}

/* لافتة: فشل آخر فحص للشهادة والمعروض نتيجة سابقة */
.stale{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;margin-bottom:var(--s4);border-radius:var(--r2);
       border:1px solid #4a2530;background:#1c0e11;color:var(--fg-1);font-size:13.5px}
.stale svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--neg);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stale b{display:block;color:var(--neg);font-weight:600}
.stale span{color:var(--fg-2);overflow-wrap:anywhere}

/* ═══════════════ صفحة الشهادات ═══════════════ */

.chero{display:grid;grid-template-columns:minmax(270px,360px) minmax(0,1fr);gap:var(--s6);align-items:center;
       padding:24px 26px;animation:iin .6s var(--ease) backwards;
       background:radial-gradient(ellipse 50% 140% at 100% 0%,color-mix(in srgb,var(--h) 12%,transparent),transparent 62%),
                  linear-gradient(180deg,var(--ink-2),#0a0f17)}
.chero::after{content:"";position:absolute;inset:0 0 auto;height:2px;opacity:.8;
              background:linear-gradient(90deg,transparent,var(--h) 30%,var(--h) 70%,transparent)}
@media(max-width:1150px){.chero{grid-template-columns:minmax(0,1fr)}}

/* عدّاد أقرب انتهاء */
.cd{display:flex;align-items:center;gap:18px;min-width:0}
.cd-ring{position:relative;width:134px;flex:none}
.cd-ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.cd-trk{fill:none;stroke:var(--ink-4);stroke-width:10}
.cd-val{fill:none;stroke:var(--h);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.5s var(--ease);
        filter:drop-shadow(0 0 8px color-mix(in srgb,var(--h) 60%,transparent))}
.cd-n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cd-n b{font:700 40px/1 var(--mono);color:var(--h);letter-spacing:-2px}
.cd-n span{font-size:12px;color:var(--fg-2);margin-top:4px}
.cd-t{min-width:0;flex:1;max-width:100%}
.cd-dom{display:block;font-size:17px;font-weight:600;color:var(--fg);direction:ltr;text-align:right;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:6px 0 3px;transition:color var(--fast)}
.cd-dom:hover{color:var(--acc)}
@media(max-width:420px){.cd{flex-direction:column;text-align:center}.cd-dom{text-align:center}.cd .row{justify-content:center}}

/* المدرج */
.rw-wrap{min-width:0}
.rw-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
          border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-bottom:26px}
.rw-stats>div{background:#080c13d9;padding:11px 14px;min-width:0}
.rw-stats b{display:block;font:700 23px/1.2 var(--mono);letter-spacing:-1px}
.rw-stats span{font-size:12px;color:var(--fg-2)}
@media(max-width:560px){.rw-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rw{direction:ltr;padding-inline:4px}
.rw-track{position:relative;height:calc(22px + var(--lanes,1) * 36px)}
.rw-z{position:absolute;bottom:0;height:8px;background:var(--c);opacity:.28}
.rw-z:first-child{border-radius:99px 0 0 99px;opacity:.5;
                  background:repeating-linear-gradient(135deg,var(--neg) 0 4px,transparent 4px 8px)}
i.rw-z:last-of-type{border-radius:0 99px 99px 0;opacity:.14}   /* nth-last-child كان يطابق لا شيء بعد إضافة الدبابيس */
.rw-now{position:absolute;bottom:-5px;width:2px;height:18px;background:var(--fg);border-radius:2px;
        transform:translateX(-50%);box-shadow:0 0 10px var(--fg)}
.rw-pin{position:absolute;bottom:calc(18px + var(--lane) * 36px);transform:translateX(-50%);
        display:flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:99px;cursor:pointer;
        border:1px solid color-mix(in srgb,var(--c) 50%,transparent);
        background:color-mix(in srgb,var(--c) 15%,var(--ink-2));color:var(--fg);
        font:600 12px var(--mono);white-space:nowrap;min-height:28px;
        animation:pinIn .6s var(--spring) backwards;transition:transform var(--fast) var(--spring),box-shadow var(--fast)}
.rw-pin::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:calc(10px + var(--lane) * 36px);
               background:color-mix(in srgb,var(--c) 55%,transparent);transform:translateX(-50%)}
.rw-pin b{display:grid;place-items:center;min-width:24px;height:22px;border-radius:99px;padding:0 6px;
          background:var(--c);color:#04100e;font:700 11.5px var(--mono)}
.rw-pin:hover,.rw-pin:focus-visible{transform:translateX(-50%) translateY(-3px);box-shadow:0 10px 22px -8px var(--c);z-index:2}
@keyframes pinIn{from{opacity:0;transform:translateX(-50%) translateY(-16px)}}
.rw-axis{position:relative;height:18px;margin-top:10px;font:500 11.5px var(--sans);color:var(--fg-3)}
.rw-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}

/* ─── ثلاث بطاقات ─── */
.ci3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
@media(max-width:1240px){.ci3{grid-template-columns:repeat(2,minmax(0,1fr))}.ci3>:last-child{grid-column:1/-1}}
@media(max-width:720px){.ci3{grid-template-columns:minmax(0,1fr)}}

.gbar{display:flex;gap:3px;height:14px;border-radius:99px;overflow:hidden;background:var(--ink-4)}
.gbar i{width:0;background:var(--c);transition:width 1.1s var(--ease)}
.glegend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.glegend div{display:flex;align-items:center;gap:9px;transition:opacity var(--fast)}
.glegend .grade{min-width:36px;height:26px;font-size:12.5px}
.glegend b{font:700 16px var(--mono)}
.glegend .z{opacity:.32}

.iss+.iss{margin-top:14px}
.iss-t{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13.5px;min-width:0}
.iss-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;direction:ltr;text-align:right}
.iss-t .mono{margin-inline-start:auto;font-weight:700}
.iss .bar{height:5px}

.hrow2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;font-size:13.5px}
.hrow2+.hrow2{margin-top:13px}
.hrow2 b{font-size:13px}
.hrow2 .bar{grid-column:1/-1;height:5px}

/* ─── الجدول ─── */
.ctab{margin-top:var(--s4);padding:18px 16px 12px}
.ct-bar{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s4);padding-inline:4px}
.ct-bar .search{margin-inline-start:auto;min-width:210px}
.ct-sort{width:auto;flex:none;padding:9px 16px;padding-inline-end:36px;border-radius:99px;font-size:13.5px;min-height:40px}

.ct-head,.ct-row{display:grid;gap:14px;align-items:center;
  grid-template-columns:minmax(170px,1.5fr) 56px minmax(140px,1.15fr) minmax(170px,1.4fr) minmax(176px,1fr) auto}
.ct-head{padding:0 16px 10px;font-size:11.5px;color:var(--fg-3);font-weight:600;border-bottom:1px solid var(--line);
         margin-bottom:6px}
.ct-row{position:relative;padding:13px 16px;border-radius:var(--r2);cursor:pointer;border:1px solid transparent;
        animation:iin .45s var(--ease) backwards;transition:background var(--fast),border-color var(--fast)}
.ct-row+.ct-row{margin-top:2px}
.ct-row::before{content:"";position:absolute;inset-block:14px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--c)}
.ct-row:hover{background:var(--ink-3);border-color:var(--line)}
.ct-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ct-site{min-width:0}
.ct-site b{display:block;font-size:14px;font-weight:600;direction:ltr;text-align:right;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-site small{color:var(--fg-2);font-size:12px}
.ct-iss{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;font-size:13.5px}
.ct-in{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
.ct-tags{display:flex;gap:5px;flex-wrap:wrap}
.ct-tags .chip{padding:1px 8px;font-size:11.5px}
.ct-life{min-width:0}
.ct-lt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.ct-lt b{font-size:13px;white-space:nowrap}
.ct-life .bar{height:5px}
.ct-cfg{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.ct-act{display:flex;gap:6px;justify-content:flex-end}
/* على الشاشات العريضة: أيقونات مربعة (الصف كله يفتح الدرج). على الجوال: أزرار بنصوص */
.ct-act .btn{width:36px;height:36px;padding:0;justify-content:center}
.ct-act .btn span{display:none}
.ctab{container:ctab/inline-size}
@container ctab (max-width:900px){
  .ct-head,.ct-row{grid-template-columns:minmax(160px,1.5fr) 56px minmax(120px,1fr) minmax(150px,1.3fr) auto}
  .ct-cfg{display:none}
}
@container ctab (max-width:680px){
  .ct-head{display:none}
  .ct-bar .search{min-width:0;flex:1 1 100%;margin:0}
  .ct-row{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:15px 16px;background:var(--ink-1);border-color:var(--line);
          grid-template-areas:"g site" "g iss" "life life" "act act"}
  .ct-row+.ct-row{margin-top:10px}
  .ct-grade{grid-area:g;align-self:start}
  .ct-site{grid-area:site}.ct-iss{grid-area:iss}.ct-life{grid-area:life}
  .ct-act{grid-area:act;justify-content:stretch}.ct-act .btn{flex:1;width:auto;height:auto;min-height:40px;padding:8px 14px}
  .ct-act .btn span{display:inline}
}

/* ─── الدرج الجانبي ─── */
dialog.drawer{position:fixed;inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;padding:0;border:0;
              width:min(600px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;
              background:var(--ink-1);color:var(--fg);border-inline-start:1px solid var(--line-2);
              box-shadow:30px 0 90px -30px #000;flex-direction:column;overflow:hidden}
dialog.drawer[open]{display:flex;animation:drIn .42s var(--ease)}
dialog.drawer::backdrop{background:#02040899;backdrop-filter:blur(4px)}
dialog.drawer[open]::backdrop{animation:bdIn .3s ease}
@keyframes drIn{from{transform:translateX(-100%)}}
.dr-h{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--ink-1)}
.dr-dom{font-size:16px;font-weight:600;direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-b{flex:1;overflow:auto;padding:20px}
.dr-b>.card{margin:0!important;padding:0!important;background:none;border:0;overflow:visible}
.dr-b>.card>.ttl{display:none}
.dr-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}

.about{display:flex;gap:14px;align-items:center}
.about img{flex:none;filter:drop-shadow(0 0 14px #2dd4bf4d)}

/* ═══════════════ الدخول ═══════════════ */
.auth{max-width:420px;margin:7vh auto;padding:28px 28px 22px}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--fg)}
.auth-brand b{display:block;font-size:19px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;
           background:var(--ink-1);border:1px solid var(--line);margin-bottom:18px}
.auth-tabs button{padding:10px;border-radius:9px;border:0;background:none;color:var(--fg-2);cursor:pointer;
                  font-weight:600;transition:background var(--fast),color var(--fast)}
.auth-tabs button.on{background:var(--ink-3);color:var(--fg)}
.auth-form{display:grid;gap:14px}
.auth-form label{display:grid;gap:6px;font-size:13px;color:var(--fg-2)}
.auth-form .btn-p{justify-content:center;margin-top:2px}
.legal-note{line-height:26px}
.legal-note a{color:var(--acc);display:inline-block}
.legal-note a:hover{text-decoration:underline}
.auth-key{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.auth-key summary{cursor:pointer;color:var(--fg-2);font-size:13px;min-height:28px;display:flex;align-items:center}
@media(max-width:480px){.auth{margin:3vh 0;padding:22px 18px}}

/* ═══════════════ الاشتراك ═══════════════ */
.pay-msg{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r2);
         margin-bottom:var(--s4);border:1px solid;flex-wrap:wrap}
.pay-msg>svg{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pay-msg b{display:block}
.pay-msg span{color:var(--fg-1);font-size:13.5px}
.pay-msg.paid{color:var(--pos);border-color:#1e4032;background:#0b1d16}
.pay-msg.failed{color:var(--neg);border-color:#4a2530;background:#1c0e11}
.pay-msg.pending{color:var(--warn);border-color:#453611;background:#1a1408}
.bill-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s4)}
.bill-hero h2{font-size:26px;font-weight:700;margin:2px 0 4px}
.bill-usage{flex:0 1 260px;min-width:200px}
.bill-usage span{display:block;font-size:12.5px;color:var(--fg-2)}
.bill-usage b{display:block;font:700 28px/1.3 var(--mono);margin-bottom:8px}
.bill-usage small{font:500 14px var(--sans);color:var(--fg-2)}
.plans-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--s4);margin-bottom:var(--s4)}
.plan-c{display:flex;flex-direction:column;gap:16px}
.plan-c.cur{border-color:var(--acc)}
.plan-c.hot{background:linear-gradient(180deg,#071d1a,var(--ink-2))}
.plan-c h3{font-size:17px;font-weight:700}
.plan-c .price{font:700 30px/1.3 var(--mono)}
.plan-c .price small{font:500 13px var(--sans);color:var(--fg-2)}
.plan-c .price .custom{font:700 19px var(--sans);color:var(--fg)}
.plan-c ul{list-style:none;display:grid;gap:9px;font-size:14px}
.plan-c li{display:flex;align-items:center;gap:9px}
.plan-c li svg{width:15px;height:15px;stroke:var(--pos);stroke-width:2.4;fill:none;flex:none;stroke-linecap:round;stroke-linejoin:round}
.plan-c li.off{color:var(--fg-3)}
.plan-c li.off svg{stroke:var(--fg-3)}
.plan-act{margin-top:auto}
.plan-act .btn,.plan-act .chip{width:100%;justify-content:center}
.inv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto auto;gap:12px;align-items:center;
     padding:12px 4px;border-top:1px solid var(--ink-3);font-size:13.5px}
.inv:first-child{border-top:0}
@media(max-width:700px){.inv{grid-template-columns:minmax(0,1fr) auto}.inv [data-p]{grid-column:1/-1;grid-row:2}.inv .chip{justify-self:start}}
.renew{white-space:nowrap}
.renew .s{display:none}
@media(max-width:560px){.renew>span:first-child{display:none}.renew .s{display:inline}}