/* ===== GND — طبقة الواجهة الموحدة (تجي بعد portal.css) ===== */
:root{
  --music:#a78bfa;--system:#60a5fa;--games:#fbbf24;
  --bot:#ffffff;--botx:rgba(255,255,255,.14);--bott:#0a0a0b;
  --r:14px;--rl:18px;--ez:cubic-bezier(.22,1,.36,1);
  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 28px -12px rgba(0,0,0,.7);
}
[data-bot=music]{--bot:var(--music);--botx:rgba(167,139,250,.16);--bott:#0a0a0b}
[data-bot=system]{--bot:var(--system);--botx:rgba(96,165,250,.16)}
[data-bot=games]{--bot:var(--games);--botx:rgba(251,191,36,.16)}

/* ——— أساسيات ——— */
html{scrollbar-color:#2a2a31 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26262c;border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#34343d}
::selection{background:var(--bot);color:#000}
:focus-visible{outline:2px solid var(--bot);outline-offset:2px;border-radius:8px}

/* ——— أزرار ——— */
.btn{border-radius:12px;transition:transform .18s var(--ez),background .18s,border-color .18s,box-shadow .18s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:not(.gh){box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 20px -10px rgba(255,255,255,.5)}
.btn.gh:hover{border-color:var(--bot);color:#fff}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ——— بطاقات ——— */
.card,.mod,.gtile,.panel,.tcard,.srv{transition:transform .25s var(--ez),border-color .2s,box-shadow .25s}
.card:hover,.mod:hover,.gtile:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.card:after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--botx),transparent 62%)}
.card .ic,.mod .h span,.gtile .e{transition:background .2s,color .2s,border-color .2s}
.card:hover .ic,.mod:hover .h span{border-color:var(--bot);color:var(--bot)}

/* ——— الهيدر ——— */
.nav{background:rgba(8,8,10,.72);backdrop-filter:blur(14px) saturate(140%)}
.nav nav a{transition:color .15s,background .15s}
.nav nav a.on{background:var(--s2);box-shadow:inset 0 -2px 0 var(--bot)}
.logo img{transition:transform .35s var(--ez)}
.logo:hover img{transform:rotate(-8deg) scale(1.06)}

/* ——— الهيرو ——— */
.hero:before{background:radial-gradient(closest-side,var(--botx),transparent);animation:aura 9s ease-in-out infinite}
@keyframes aura{50%{opacity:.6;transform:translateY(18px)}}
.hero h1{line-height:1.32}
.hero h1 span{display:inline-block;padding-block:.02em .16em}
.stats b{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stats>div{transition:transform .25s var(--ez)}
.stats>div:hover{transform:translateY(-3px)}

/* ——— تبويبات المميزات ——— */
.tabs button{transition:.2s var(--ez)}
.tabs button:hover{color:var(--tx);border-color:var(--line2)}
.tabs button.on{background:var(--bot);color:#0a0a0b;border-color:var(--bot);box-shadow:0 8px 24px -12px var(--bot)}

/* ——— لوحة التحكم: القائمة ——— */
.side a{position:relative;transition:background .18s,color .18s}
.side a:before{content:"";position:absolute;inset-inline-start:0;top:50%;height:0;width:3px;border-radius:99px;background:var(--bot);transform:translateY(-50%);transition:height .22s var(--ez)}
.side a.on{background:var(--botx);color:#fff}
.side a.on:before{height:60%}
.side a.on svg.i{color:var(--bot);opacity:1}
.bsw{grid-template-columns:repeat(3,1fr)!important}
.bsw button{transition:.18s var(--ez);white-space:nowrap}
.bsw button.on{background:var(--bot);color:#0a0a0b;box-shadow:0 6px 18px -10px var(--bot)}
.gsel{transition:border-color .2s}.gsel:hover{border-color:var(--line2)}

/* ——— مفاتيح وحقول ——— */
.sw{transition:background .2s}
.sw:after{transition:inset-inline-start .22s var(--ez),background .2s}
.sw.on{background:var(--bot)}
.sw.on:after{background:#0a0a0b}
.sw:active:after{width:22px}
select,input,textarea{transition:border-color .16s,box-shadow .16s,background .16s}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--bot);box-shadow:0 0 0 3px var(--botx)}
.seg button.on{background:var(--bot);color:#0a0a0b}
input[type=range]{accent-color:var(--bot)}
input[type=checkbox],input[type=radio]{accent-color:var(--bot)}
.opt{transition:.2s var(--ez)}.opt:hover{border-color:var(--line2);transform:translateY(-2px)}
.opt.on{border-color:var(--bot);box-shadow:0 0 0 1px var(--bot)}
.ev.on{border-color:var(--bot)}.ev.on:before{background:var(--bot)}
.upl:hover{border-color:var(--bot);color:var(--tx)}

/* ——— صفوف الإعدادات ——— */
.row{transition:background .15s;border-radius:10px}
.row:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent)}

/* ——— شريط الحفظ والتنبيهات ——— */
.save{border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.75);backdrop-filter:blur(10px);background:rgba(22,22,26,.92)}
.save.show{animation:pop .4s var(--ez)}
@keyframes pop{0%{transform:translateX(-50%) translateY(90px) scale(.96)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
.toast{box-shadow:0 18px 50px rgba(0,0,0,.5)}

/* ——— هيكل التحميل (skeleton) ——— */
.sk{position:relative;overflow:hidden;background:var(--s2);border-radius:10px;color:transparent!important;pointer-events:none}
.sk:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:sh 1.3s infinite}
@keyframes sh{100%{transform:translateX(100%)}}
.sk-row{height:14px;margin:10px 0}

/* ——— ظهور محتوى لوحة التحكم ——— */
.view.on{animation:vin .32s var(--ez)}
@keyframes vin{from{opacity:0;transform:translateY(8px)}}

/* ——— شارات حالة ——— */
.dot{animation:pl 2.4s ease-in-out infinite}
@keyframes pl{50%{box-shadow:0 0 0 7px rgba(34,197,94,.06)}}

/* ——— الجداول ——— */
.tbl{width:100%}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}

/* ——— الجوال ——— */
@media(max-width:860px){
  body{font-size:15px}
  .main{padding:18px 14px 120px!important}
  .mh h1{font-size:1.25rem}
  .btn{padding:.7em 1.1em}
  .btn.sm{padding:.55em .9em}
  .sw{width:48px;height:28px}
  .sw:after{width:22px;height:22px}
  .sw.on:after{inset-inline-start:23px}
  .row{flex-wrap:wrap;gap:8px;padding:14px 0}
  .row .rc,.row>div:last-child{max-width:100%}
  select,input,textarea{min-width:0;width:100%;min-height:44px}
  input[type=color]{width:52px;min-height:40px}
  .grid3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .stats{gap:26px 34px}
  .save{inset-inline:12px;left:auto!important;right:auto;transform:translateY(140px);width:auto;justify-content:space-between}
  .save.show{transform:none;animation:pop2 .4s var(--ez)}
  @keyframes pop2{from{transform:translateY(90px)}}
  .toast{inset-inline:14px;left:auto;transform:translateY(140px);justify-content:center}
  .toast.show{transform:none}
  .side a{padding:.7em .8em}
  .side{box-shadow:0 0 60px rgba(0,0,0,.6)}
  .tbl{font-size:.82rem;display:block;overflow-x:auto;white-space:nowrap}
  .tbl td,.tbl th{padding:9px 6px;white-space:nowrap}
  .hero{padding:64px 0 56px}
  .fcols{gap:20px}
  .obar{flex-wrap:wrap}.obar .btn{margin-inline-start:0;width:100%}
  .mods,.gt{grid-template-columns:1fr}
}
@media(max-width:520px){
  .bsw button{font-size:.74rem;padding:.5em .1em}
  .opts{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .cmds{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
}

/* معاينة البطاقة الشفافة — مربعات شطرنج تبين الشفاف */
.wc.wc-clear{background:
  linear-gradient(45deg,#202027 25%,transparent 25%,transparent 75%,#202027 75%),
  linear-gradient(45deg,#202027 25%,#17171c 25%,#17171c 75%,#202027 75%);
  background-size:18px 18px;background-position:0 0,9px 9px}
.wc.wc-clear .wc-bg{background-color:transparent!important}

/* عبارة الفوتر — إنجليزية دايماً، فتبقى بترتيب لاتيني حتى في الواجهة العربية */
.tagline{
  direction:ltr; unicode-bidi:isolate; text-align:start;
  margin-top:10px; max-width:300px;
  font-size:.92rem; font-weight:500; letter-spacing:.2px;
  color:var(--mu); opacity:.85;
}
[dir=rtl] .tagline{text-align:right}

/* قوالب التذاكر الجاهزة */
.tpresets{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.tpreset{
  background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:14px 12px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;cursor:pointer;
  text-align:start;font:inherit;color:var(--tx);transition:transform .2s var(--ez),border-color .2s,background .2s;
}
.tpreset:hover{border-color:var(--bot);transform:translateY(-2px);background:var(--s2)}
.tpreset .e{font-size:1.5rem;line-height:1}
.tpreset b{font-size:.92rem}
.tpreset small{color:var(--mu);font-size:.78rem;line-height:1.5}
.tpreset i{font-style:normal;margin-top:6px;font-size:.76rem;font-weight:700;color:var(--bot)}
.tpreset.on{border-color:var(--line2);opacity:.6}
.tpreset.on i{color:var(--mu2)}
@media(max-width:860px){.tpresets{grid-template-columns:1fr 1fr}}

/* ===== لوحة المالك ===== */
.side.owner .gsel{margin-bottom:6px}
.side.owner a.on{background:rgba(245,197,66,.12);color:#fbbf24}
.side.owner a.on svg{opacity:1}

/* الرأس: الرقم المهم كبير والباقي أصغر */
.ohero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:14px;margin-bottom:18px}
.ohero-main{background:linear-gradient(140deg,rgba(96,165,250,.16),rgba(96,165,250,.03) 60%),var(--s1);
  border:1px solid var(--line);border-radius:var(--rl);padding:20px 22px;display:flex;flex-direction:column;justify-content:center}
.ohero-k{font-size:.85rem;color:var(--mu)}
.ohero-v{font-size:2.9rem;line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0}
.ohero-s{font-size:.82rem;color:var(--mu)}
.ohero-s.up{color:var(--ok)} .ohero-s.down{color:var(--red)}
.ohero-side{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.omini{background:var(--s1);border:1px solid var(--line);border-radius:var(--rl);padding:16px 14px;display:flex;flex-direction:column;justify-content:center}
.omini span{font-size:.78rem;color:var(--mu);line-height:1.3}
.omini b{font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}

/* شريط الصحة — الحالة لازم تبين من بعيد */
.hrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hitem{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--s2)}
.hitem b{display:block;font-size:.88rem;font-weight:600;line-height:1.3}
.hitem small{font-size:.76rem;display:block}
.hdot{width:11px;height:11px;border-radius:99px;flex:none}
.hitem.up{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.hitem.up .hdot{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.hitem.up small{color:#4ade80}
.hitem.down{border-color:rgba(255,92,92,.4);background:rgba(255,92,92,.09)}
.hitem.down .hdot{background:#ff5c5c;box-shadow:0 0 0 4px rgba(255,92,92,.2)}
.hitem.down small{color:#ff8b8b}
/* لسه ما وصلت الحالة — رمادي نابض، مو أحمر */
.hitem.wait .hdot{background:var(--mu2);animation:hpulse 1.1s ease-in-out infinite}
.hitem.wait small{color:var(--mu)}
@keyframes hpulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hitem.wait .hdot{animation:none}}
.hrow2{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.warnline{margin-top:12px;font-size:.84rem;color:var(--gold)}
.sdot{width:8px;height:8px;border-radius:99px;background:var(--mu2);flex:none}
.sdot.ok{background:var(--ok)} .sdot.bad{background:var(--red)}

/* اختصارات */
.oqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.oq{background:var(--s2);border:1px solid var(--line);border-radius:var(--rl);padding:14px;text-align:start;
  display:flex;flex-direction:column;gap:3px;cursor:pointer;color:var(--tx);transition:.2s var(--ez)}
.oq:hover{border-color:var(--line2);transform:translateY(-2px);background:var(--s1)}
.oq svg{width:19px;height:19px;color:#60a5fa;margin-bottom:4px}
.oq b{font-size:.9rem;font-weight:600}
.oq small{color:var(--mu);font-size:.76rem;line-height:1.45}

/* الرسوم */
.ctip{position:absolute;transform:translate(-50%,-140%);pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--s2);border:1px solid var(--line2);border-radius:10px;padding:5px 9px;white-space:nowrap;box-shadow:var(--sh);z-index:3}
[dir=rtl] .ctip{transform:translate(50%,-140%)}
.ctip.on{opacity:1}
.ctip b{display:block;font-size:.95rem;line-height:1.2}
.ctip small{color:var(--mu);font-size:.72rem}
.chartbox{color:var(--mu2)}
.cbar{display:grid;grid-template-columns:minmax(72px,auto) 1fr auto;gap:10px;align-items:center;padding:5px 0}
.cbn{font-size:.85rem;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.cbt{height:9px;background:var(--s2);border-radius:99px;overflow:hidden}
.cbt i{display:block;height:100%;border-radius:99px}
.cbv{font-size:.8rem;color:var(--mu);font-variant-numeric:tabular-nums}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.statc{background:var(--s2);border:1px solid var(--line);border-radius:var(--rl);padding:14px}
.statc h4{margin:0 0 2px;font-size:.85rem;font-weight:600;color:var(--mu)}
.statc .big{font-size:1.6rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.statc .delta{font-size:.78rem;color:var(--mu)}
.delta.up{color:var(--ok)} .delta.down{color:var(--red)}

/* صفوف القوائم */
.rowline{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.rowline:last-child{border-bottom:0}
.rowline small{color:var(--mu);font-size:.78rem;display:block}
.bdg.warn{background:rgba(245,197,66,.14);color:var(--gold);border-color:rgba(245,197,66,.3)}
.bdg.bad{background:rgba(255,92,92,.14);color:var(--red);border-color:rgba(255,92,92,.3)}
.frow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.logbox{margin-top:12px;max-height:280px;overflow:auto;background:var(--s2);border:1px solid var(--line);
  border-radius:10px;padding:10px;font-size:.78rem;white-space:pre-wrap;direction:ltr;text-align:left}
.tcard + .tcard{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

@media(max-width:860px){
  .ohero{grid-template-columns:1fr}
  .ohero-v{font-size:2.3rem}
}
@media(max-width:560px){
  .ohero-side{grid-template-columns:1fr 1fr}
  .ohero-side .omini:last-child{grid-column:1/-1}
  .cbar{grid-template-columns:minmax(58px,auto) 1fr auto;gap:8px}
  .statgrid{grid-template-columns:1fr}
  .frow > div{flex:1 1 100%}
  .rowline{flex-wrap:wrap}
}
.panel > .pt select{flex:none;width:auto;min-width:110px}
.panel > .pt{gap:10px}
.st-ok{color:#4ade80;font-size:.8rem}
.st-bad{color:#ff8b8b;font-size:.8rem}
.sdot.ok{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}
.sdot.bad{background:#ff5c5c;box-shadow:0 0 0 3px rgba(255,92,92,.24)}
.permwarn{margin-top:12px;font-size:.84rem;line-height:1.6;color:var(--gold);
  background:rgba(245,197,66,.08);border:1px solid rgba(245,197,66,.28);border-radius:12px;padding:10px 12px}
.permwarn b{color:var(--tx);font-weight:600}

/* ===== القائمة الجانبية في لوحة التحكم ===== */
.sfind{position:relative;margin:8px 0 4px}
.sfind input{width:100%;padding:.5em 2.1em .5em .75em;font-size:.85rem;border-radius:10px;
  background:var(--s2);border:1px solid var(--line);color:var(--tx)}
[dir=rtl] .sfind input{padding:.5em .75em .5em 2.1em}
.sfind input::placeholder{color:var(--mu2)}
.sfind input:focus{outline:0;border-color:var(--line2);background:var(--s1)}
.sfind input::-webkit-search-cancel-button{filter:invert(.6)}
.sfind kbd{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:inherit;font-size:.7rem;color:var(--mu2);border:1px solid var(--line2);border-radius:5px;padding:0 5px;line-height:1.5}
.sfind input:focus + kbd,.sfind input:not(:placeholder-shown) + kbd{opacity:0}

.side h5{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  margin:16px 10px 6px;font-size:.72rem;color:var(--mu2);letter-spacing:.02em;transition:color .15s}
.side h5:hover{color:var(--mu)}
.side h5 i{margin-inline-start:auto;font-style:normal;font-size:.7rem;opacity:.7}
.side h5:first-child{margin-top:8px}

.side a{position:relative}
.side a > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ndot{width:6px;height:6px;border-radius:99px;flex:none;margin-inline-start:auto;
  background:var(--line2);transition:background .15s,box-shadow .15s}
.ndot.on{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.14)}
.side a.on .ndot:not(.on){background:var(--mu2)}

/* ===== صفحة سيرفراتي ===== */
.sfilter{background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:.55em .9em;
  font-size:.88rem;color:var(--tx);min-width:200px;flex:0 1 260px}
.sfilter:focus{outline:0;border-color:var(--line2)}
.sfilter::placeholder{color:var(--mu2)}
.shead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:30px 0 12px}
.shead h2{font-size:1.05rem;font-weight:600}
.shead .muted{font-size:.82rem}
.sgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}

.srv2{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--rl);overflow:hidden;color:var(--tx);transition:transform .2s var(--ez),border-color .2s,box-shadow .2s}
.srv2:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--sh)}
.srv2[hidden]{display:none}
.srv2 .bn{height:64px;background:linear-gradient(135deg,#2a2a31,#151518) center/cover;
  position:relative;filter:saturate(.75)}
.srv2 .bn:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),var(--s1))}
.srv2 .hd{display:flex;align-items:flex-end;gap:10px;padding:0 14px;margin-top:-24px;position:relative;z-index:1}
.srv2 .gi{width:48px;height:48px;border-radius:14px;border:3px solid var(--s1);background:#27272a;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none;object-fit:cover}
.srv2 .nm{min-width:0;padding-bottom:2px}
.srv2 .nm b{display:block;font-size:.95rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srv2 .nm small{color:var(--mu);font-size:.74rem}
.srv2 .bots{display:flex;gap:5px;flex-wrap:wrap;padding:12px 14px 0}
.sbot{font-size:.7rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line);
  background:var(--s2);color:var(--mu2)}
.sbot.on{color:var(--tx);border-color:var(--line2);background:rgba(255,255,255,.06)}
.srv2 .cta{margin-top:auto;padding:14px;font-size:.82rem;color:var(--mu);
  display:flex;align-items:center;gap:6px;transition:color .2s}
.srv2:hover .cta{color:var(--bot)}
.srv2.empty{opacity:.75}
.srv2.empty:hover{opacity:1}
@media(max-width:560px){
  .sgrid2{grid-template-columns:1fr}
  .sfilter{flex:1 1 100%}
}

/* ===== رأس القسم وحالته ===== */
.phero{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--rl);background:var(--s1);transition:border-color .2s,background .2s}
.phero .pi{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.phero b{display:block;font-size:1rem;font-weight:600}
.phero small{color:var(--mu);font-size:.82rem;display:block;margin-top:2px;line-height:1.5}
.phero .sw{flex:none}
.pdot{width:10px;height:10px;border-radius:99px;flex:none;background:var(--mu2)}
.phero.on{border-color:rgba(74,222,128,.32);background:linear-gradient(90deg,rgba(74,222,128,.07),transparent 60%),var(--s1)}
.phero.on .pdot{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.16)}
.phero.off small{color:var(--mu2)}

/* رأس قسم بلا مفتاح تشغيل — لأدوات ما فيها تشغيل/إطفاء واحد (نسخ احتياطي، رسائل،
   أوامر مخصصة، قيف اواي، الإشراف). نفس لغة .phero البصرية، بدون مفتاح ونقطة حالة. */
.shero{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--rl);background:var(--s1)}
.shero .si{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  flex:none;font-size:1.15rem;background:var(--botx)}
.shero .pi{flex:1;min-width:0}
.shero b{display:block;font-size:1rem;font-weight:600}
.shero small{color:var(--mu);font-size:.82rem;display:block;margin-top:2px;line-height:1.5}
.shero .sstat{flex:none;text-align:center;padding:6px 16px;border-radius:10px;background:var(--s2);border:1px solid var(--line)}
.shero .sstat b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.shero .sstat span{font-size:.72rem;color:var(--mu2);display:block;margin-top:1px}
@media(max-width:560px){.shero .sstat{display:none}}

/* المحتوى المقفل */
.gated{position:relative}
.gated .ginner{opacity:.38;filter:grayscale(.5);pointer-events:none;user-select:none}
.gated .gnote{margin-bottom:14px;font-size:.86rem;color:var(--mu);background:var(--s2);
  border:1px dashed var(--line2);border-radius:12px;padding:12px 14px;text-align:center}

/* تنبيه إعداد ناقص */
.needwarn{margin-top:12px;font-size:.84rem;line-height:1.6;color:var(--gold);
  background:rgba(245,197,66,.08);border:1px solid rgba(245,197,66,.28);border-radius:12px;padding:10px 12px}

/* شرائح المتغيرات */
.vchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.vchips .vl{font-size:.78rem;color:var(--mu2);margin-inline-end:2px}
.vchip{font-family:ui-monospace,Consolas,monospace;font-size:.76rem;direction:ltr;
  background:var(--s2);border:1px solid var(--line);color:var(--mu);border-radius:8px;
  padding:3px 8px;cursor:pointer;transition:.15s}
.vchip:hover{border-color:var(--bot);color:var(--tx);transform:translateY(-1px)}
.vchip:active{transform:none}

/* عنصر الشبكة ما ينكمش تلقائياً — بدون هذا أي محتوى عريض يمدّ الصفحة كلها */
.dash > .main,.dash > .side{min-width:0}
.main .panel,.main .wc-ctl,.main .row{min-width:0}
.row .rc{min-width:0}

/* القائمة الجانبية على الجوال تنزاح برّا الشاشة، وانزياحها كان يمدّ عرض الصفحة.
   clip يقص بدون ما ينشئ شريط تمرير ولا يكسر sticky. */
@media(max-width:860px){
  html{overflow-x:clip}
  body{overflow-x:clip}
}