/* ===== GND — طبقة التلميع (تجي بعد portal.css و ui.css) =====
   تحسينات بصرية فقط فوق التصميم الحالي: ما تغيّر أي هيكل ولا مقاسات ولا ترتيب.
   القواعد:
   - الحركة على transform/opacity بس (رخيصة على كرت الشاشة) — ولا transition:all.
   - backdrop-filter للعناصر العائمة بس (الهيدر، القوائم، شريط الحفظ، التنبيهات)،
     مو على كل كرت — الخلفية داكنة أصلاً وتغبيش عشرات الكروت يثقّل التمرير.
   - تأثيرات التمرير (hover) داخل @media(hover:hover) عشان ما "تعلق" على الجوال.
   - لإلغاء كل شي: شيل سطر polish.css من portal.js. */

:root{
  /* كانت مستخدمة في ui.css بدون تعريف في صفحات البوابة → الألوان ما كانت تطلع */
  --ok:#4ade80;--red:#ff5c5c;--gold:#f5c542;
  --botg:rgba(255,255,255,.28);                 /* توهّج اللون الأساسي */
  --edge:rgba(255,255,255,.055);                /* خط الضوء العلوي للأسطح */
  --surf:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 46%);
  --glass:rgba(16,16,20,.72);
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-bot=music]{--botg:rgba(167,139,250,.42)}
[data-bot=system]{--botg:rgba(96,165,250,.42)}
[data-bot=games]{--botg:rgba(251,191,36,.38)}

/* ——— الأسطح: إضاءة علوية خفيفة + خط ضوء داخلي ——— */
.card,.panel,.mod,.gtile,.srv2,.kpi,.omini,.statc,.oq,.tpreset,details,.shero,.gsel,.idc{
  background-image:var(--surf);
  box-shadow:inset 0 1px 0 var(--edge);
}
/* نفس اللون الأساسي تحت الإضاءة — background-image ما يلمس background-color */
.kpi{background-color:var(--s2)}

/* ——— الأزرار ——— */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:not(.gh){background-image:linear-gradient(180deg,#fff,#e7e7eb)}
/* لمعة تعبر الزر عند التمرير */
.btn:not(.gh):after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn.gh{background-color:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 var(--edge)}
@media(hover:hover){
  .btn:not(.gh):hover{background-image:linear-gradient(180deg,#fff,#f1f1f4);transform:translateY(-1px);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -10px rgba(255,255,255,.55),0 0 0 1px rgba(255,255,255,.25)}
  .btn:not(.gh):hover:after{transform:translateX(120%)}
  .btn.gh:hover{background-color:var(--botx);transform:translateY(-1px);
    box-shadow:inset 0 1px 0 var(--edge),0 8px 24px -14px var(--botg)}
}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}

/* ——— الهيدر ——— */
.nav{background:rgba(8,8,10,.7);border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.02),0 12px 32px -24px rgba(0,0,0,.9)}
.nav nav a{transition:color .2s,background-color .2s}
@media(hover:hover){.nav nav a:hover{background:rgba(255,255,255,.05)}}
.logo img{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
@media(hover:hover){.logo:hover img{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 22px -4px var(--botg)}}
.lang a{transition:background-color .2s,color .2s}
@media(hover:hover){.lang a:not(.on):hover{color:var(--tx);background:rgba(255,255,255,.05)}}
.me img.av{box-shadow:0 0 0 2px var(--s2),0 0 0 3px var(--line2);transition:box-shadow .25s}
@media(hover:hover){.me:hover img.av{box-shadow:0 0 0 2px var(--s2),0 0 0 3px var(--bot)}}
/* قائمة المستخدم: زجاجية وتفتح بحركة */
.umenu{background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 var(--edge),0 24px 60px -12px rgba(0,0,0,.8)}
.um.open .umenu{animation:menuIn .22s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.umenu a{transition:background-color .15s,color .15s}

/* ——— الهيرو ——— */
.pill{border:1px solid transparent;
  background:linear-gradient(var(--s1),var(--s1)) padding-box,
    linear-gradient(90deg,rgba(255,255,255,.08),var(--bot),rgba(255,255,255,.08)) border-box;
  box-shadow:0 0 24px -10px var(--botg)}
.pill b{box-shadow:0 0 14px -2px rgba(255,255,255,.45)}
.hero h1 span{background-image:linear-gradient(180deg,#fff 5%,#b9b9c2 62%,var(--bot) 135%)}
.hero:before{opacity:1}
.stats b{background:linear-gradient(180deg,#fff 30%,#a1a1aa);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .cta .btn:not(.gh){box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 34px -12px rgba(255,255,255,.5)}

/* ——— عناوين الأقسام ——— */
section.s{border-image:linear-gradient(90deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent) 1}
/* النقطة inline-block (مو inline-flex للحاوية) عشان ارتفاع السطر يبقى نفسه بالضبط */
.sh small{background:rgba(255,255,255,.03)}
.sh small:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bot);
  box-shadow:0 0 10px var(--bot);margin-inline-end:7px;vertical-align:.12em}

/* ——— تبويبات المميزات ——— */
.tabs button{background-color:rgba(255,255,255,.025);transition:color .2s,background-color .2s,border-color .2s,box-shadow .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover){.tabs button:not(.on):hover{background-color:rgba(255,255,255,.05);transform:translateY(-1px)}}
.tabs button.on{box-shadow:0 10px 28px -12px var(--bot),0 0 0 1px var(--bot)}

/* ——— الكروت التفاعلية: رفعة + حد بلون البوت + توهّج ——— */
.card,.mod,.gtile,.srv2,.oq,.tpreset,.opt,.omini,.statc{
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s,background-color .25s,opacity .25s}
@media(hover:hover){
  .card:hover,.mod:hover,.gtile:hover,.srv2:hover,.oq:hover,.tpreset:hover{
    border-color:var(--botg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--botx),0 18px 44px -20px var(--botg),var(--sh)}
  .omini:hover,.statc:hover{transform:translateY(-2px);border-color:var(--line2)}
}
/* الأيقونات داخل الكروت */
.card .ic,.mod .h span,.gtile .e,.lcat .hd i,.shero .si{
  background-image:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:background-color .25s,color .25s,border-color .25s,box-shadow .3s var(--ease)}
.card .ic svg.i,.mod .h span svg{transition:transform .35s var(--ease)}
@media(hover:hover){
  .card:hover .ic,.mod:hover .h span,.gtile:hover .e{background-color:var(--botx);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 22px -6px var(--botg)}
  .card:hover .ic svg.i,.mod:hover .h span svg{transform:scale(1.1)}
}
.mod a svg{transition:transform .3s var(--ease)}
@media(hover:hover){[dir=ltr] .mod:hover a svg{transform:translateX(3px)}[dir=rtl] .mod:hover a svg{transform:scaleX(-1) translateX(3px)}}

/* ——— كروت البوتات الثلاثة: كل كرت بلون بوته (الترتيب ثابت: Music، System، Games) ——— */
#bots .card.bot:nth-child(1){--bot:var(--music);--botx:rgba(167,139,250,.16);--botg:rgba(167,139,250,.42)}
#bots .card.bot:nth-child(2){--bot:var(--system);--botx:rgba(96,165,250,.16);--botg:rgba(96,165,250,.42)}
#bots .card.bot:nth-child(3){--bot:var(--games);--botx:rgba(251,191,36,.16);--botg:rgba(251,191,36,.38)}
.bot .bav{background:linear-gradient(145deg,#fff,var(--bot) 180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 24px -10px var(--botg);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media(hover:hover){.bot:hover .bav{transform:rotate(-4deg) scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 30px -8px var(--botg)}}
.bot li:before{color:var(--bot)}
.free{background:var(--botx);border-color:var(--botg);color:#fff}

/* ——— قسم التخصيص (معاينة ديسكورد) ——— */
.split .panel{box-shadow:inset 0 1px 0 var(--edge),0 30px 80px -40px var(--botg)}
.split li:before{color:var(--bot)}

/* ——— الأسئلة الشائعة ——— */
details{transition:border-color .25s,background-color .25s}
@media(hover:hover){details:not([open]):hover{border-color:var(--line2)}}
details[open]{border-color:var(--line2);background-color:var(--s2)}
summary{align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after,details[open] summary:after{content:"+";flex:none;width:24px;height:24px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line2);font-weight:400;line-height:1;color:var(--mu);
  margin-block:-1px; /* بدونها الدائرة تكبّر السطر نص بكسل ويتراكم مع كل سؤال — مقاسة */
  transition:transform .3s var(--ease),background-color .25s,color .25s,border-color .25s}
details[open] summary:after{transform:rotate(45deg);background:var(--bot);border-color:var(--bot);color:#0a0a0b}
details[open] p{animation:faqIn .35s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}}

/* ——— شريط الدعوة الأخير ——— */
.band{background:
    radial-gradient(ellipse 60% 90% at 50% 0%,var(--botx),transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 110%,rgba(255,255,255,.05),transparent 70%),
    var(--s1);
  border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 100px -50px var(--botg)}

/* ——— الفوتر ——— */
footer{border-image:linear-gradient(90deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent) 1}
.fcols a{transition:color .2s}

/* ——— ظهور الكروت بالتمرير: أنيميشن بدل transition عشان ما يبطّئ حركة التمرير
   (fill backwards = يطبق حالة البداية بس، وبعدها الكرت يرجع يستجيب للـ hover طبيعي) ——— */
.rv.in{animation:rvIn .7s var(--ease) backwards}
@keyframes rvIn{from{opacity:0;transform:translateY(16px)}}
.grid>.rv:nth-child(2){animation-delay:.04s}.grid>.rv:nth-child(3){animation-delay:.08s}.grid>.rv:nth-child(4){animation-delay:.12s}
.grid>.rv:nth-child(5){animation-delay:.16s}.grid>.rv:nth-child(6){animation-delay:.2s}.grid>.rv:nth-child(7){animation-delay:.24s}
.grid>.rv:nth-child(8){animation-delay:.28s}.grid>.rv:nth-child(n+9){animation-delay:.32s}

/* ——— صفحة سيرفراتي ——— */
.srv2 .bn{transition:transform .6s var(--ease),filter .4s}
@media(hover:hover){.srv2:hover .bn{transform:scale(1.06);filter:saturate(1)}}
.srv2 .gi{box-shadow:0 6px 18px -8px rgba(0,0,0,.8)}
.sbot.on{background:var(--botx);border-color:var(--botg)}
.srv2 .cta{transition:color .25s,gap .3s var(--ease)}
@media(hover:hover){.srv2:hover .cta{gap:10px}}
.sfilter{transition:border-color .2s,box-shadow .2s}
.sfilter:focus{border-color:var(--bot);box-shadow:0 0 0 3px var(--botx)}

/* ——— لوحة التحكم ——— */
.side{background-image:linear-gradient(180deg,rgba(255,255,255,.015),transparent 30%)}
.side a.on{box-shadow:inset 0 0 0 1px var(--botx)}
.gsel{transition:border-color .25s,box-shadow .25s}
.bsw{box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
@media(hover:hover){.bsw button:not(.on):hover{color:var(--tx);background:rgba(255,255,255,.04)}}
.kpi b{font-variant-numeric:tabular-nums}
/* المفاتيح: توهّج لما تكون شغالة + ظل للمقبض */
.sw{box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.sw:after{box-shadow:0 1px 3px rgba(0,0,0,.45)}
.sw.on{box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 0 0 3px var(--botx),0 0 18px -4px var(--botg)}
/* الحقول */
@media(hover:hover){select:hover:not(:focus),input:hover:not(:focus):not([type=range]):not([type=color]),textarea:hover:not(:focus){border-color:#3d3d47}}
.opt.on{box-shadow:0 0 0 1px var(--bot),0 0 20px -8px var(--botg)}
.chip{transition:border-color .2s,background-color .2s}
@media(hover:hover){.chip:hover{border-color:#44444d}}
.vchip{transition:border-color .15s,color .15s,transform .2s var(--ease),box-shadow .2s}
@media(hover:hover){.vchip:hover{box-shadow:0 0 14px -6px var(--botg)}}
/* حالة القسم لما يكون شغال */
.phero.on{box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px rgba(74,222,128,.06),0 14px 40px -26px rgba(74,222,128,.45)}
.phero.on .pdot{animation:pl 2.4s ease-in-out infinite}
/* شريط الحفظ والتنبيه: زجاج + حد بلون البوت */
.save{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-color:var(--botg);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 60px -10px rgba(0,0,0,.8),0 0 40px -18px var(--botg)}
.toast{box-shadow:0 18px 50px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.4) inset}
.obar{background:linear-gradient(90deg,rgba(251,191,36,.14),rgba(251,191,36,.05));box-shadow:inset 0 1px 0 rgba(251,191,36,.12)}
/* لوحة الأوامر السريعة */
.pal .box{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 var(--edge),0 30px 90px rgba(0,0,0,.7)}
.pal.open .box{animation:menuIn .24s var(--ease)}
/* الجداول */
.tbl th{letter-spacing:.02em}

/* ——— لوحة المالك ——— */
.ohero-main{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 50px -30px rgba(96,165,250,.5)}
.ohero-v{background:linear-gradient(180deg,#fff 40%,#9fc5fb);-webkit-background-clip:text;background-clip:text;color:transparent}
.hitem{transition:border-color .25s,background-color .25s,box-shadow .3s}
.hitem.up{box-shadow:0 0 24px -14px rgba(74,222,128,.6)}
.oq svg{transition:transform .35s var(--ease)}
@media(hover:hover){.oq:hover svg{transform:scale(1.12)}}

/* ——— صفحة الأوامر ——— */
.cmd{transition:border-color .2s,background-color .2s,transform .25s var(--ease)}
@media(hover:hover){.cmd:hover{border-color:var(--line2);background-color:var(--s3);transform:translateY(-1px)}}
.cmd code{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.25)}

/* ——— صفحة الحالة ——— */
.dot{box-shadow:0 0 0 4px rgba(34,197,94,.15),0 0 14px rgba(34,197,94,.55)}
.dot.w{box-shadow:0 0 0 4px rgba(245,158,11,.15),0 0 14px rgba(245,158,11,.5)}
.dot.d{box-shadow:0 0 0 4px rgba(239,68,68,.15),0 0 14px rgba(239,68,68,.5);animation:none}

/* الجوال: كل تأثيرات التمرير داخل @media(hover:hover) فوق، فما تعلق مع اللمس.
   تقليل الحركة: ui.css يصفّر مدد الحركة، وهنا نلغي اللي يحتاج إلغاء صريح */
@media(prefers-reduced-motion:reduce){
  .rv.in{animation:none}
  .btn:not(.gh):after{display:none}
}

/* ---------- انتقالات الصفحات (View Transitions) ----------
   تلاشي ناعم بين الصفحات — opacity/transform بس. المتصفحات اللي ما تدعمها تتنقل عادي.
   الجذر تلاشي صافي (بدون إزاحة) عشان الهيدر الثابت ما "يرجف" بين الصفحتين. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
/* محتوى لوحة التحكم عند التنقل بين الأقسام (app.js يستدعي startViewTransition) */
#main{view-transition-name:dash-main}
::view-transition-group(dash-main){animation:none}
::view-transition-old(dash-main){animation:hx-vt-out .14s ease-in both}
::view-transition-new(dash-main){animation:hx-vt-in .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes hx-vt-out{to{opacity:0}}
@keyframes hx-vt-in{from{opacity:0;transform:translate3d(0,8px,0)}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Playback feedback stays beside the player, including on narrow screens. */
.mp-status { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; margin:8px 0 12px; background:#202023; color:#f4f4f5; font-size:14px; line-height:1.7; border-radius:8px; }
.mp-status-error { border-inline-start:3px solid #e57878; }
.mp-status .btn { flex-shrink:0; min-height:44px; }
#mp [disabled] { opacity:.5; cursor:wait; }
@media(max-width:640px) { .mp-status { align-items:flex-start; flex-direction:column; } }

#mp .mp-btn, #mp .rx button, #mp .sp-tab { min-width:44px; min-height:44px; }
#mp .mp-status { margin:12px 18px; }
#mp .mp-hint { opacity:1; color:#bcbcc4; font-size:13px; padding:0 18px; }
#mp .r-a { opacity:1; color:#bcbcc4; }
.mp-limits { font-size:13px; }

.mp-limits { padding-inline:6px; }
body:has(#mp) .obar { background:#252115; box-shadow:none; }
body:has(#mp) .btn { background-image:none; box-shadow:none; }
body:has(#mp) .side { box-shadow:none; }
@media(max-width:640px) {
  #mp .stage { height:130px; }
  #mp .r-art { width:72px; height:72px; border-radius:12px; }
  #mp .pp .av { width:32px; height:32px; font-size:14px; }
  #mp .pp { gap:2px; }
  #mp .pp .nm { font-size:11px; }
  #mp .r-t { font-size:20px; }
  #mp .room-top { gap:6px; padding:12px 12px 0; }
}

/* Readiness is a compact report beside the existing System controls. */
.readiness-summary { line-height:1.8; }
.readiness-summary .muted { display:block; font-size:13px; }
.readiness-list { display:grid; gap:0; margin-top:16px; }
.readiness-row { display:grid; grid-template-columns:108px 1fr; gap:16px; padding:14px 0; border-top:1px solid #2a2a2e; align-items:start; }
.readiness-row b { font-size:15px; }.readiness-row p { margin:4px 0; font-size:14px; color:#d4d4d8; line-height:1.7; }
.readiness-row small { color:#b9b9c2; font-size:13px; line-height:1.7; display:block; }
.readiness-state { font-size:13px; color:#c5c5ce; }.readiness-state.error,.readiness-error { color:#f5a4a4; }.readiness-state.warning { color:#e4ca8c; }.readiness-state.pass { color:#9bd6b0; }
#backupResult { line-height:1.8; } #backupResult:empty {display:none;} #backupResult li {margin:4px 0;}
@media(max-width:640px) { .readiness-row {grid-template-columns:1fr;gap:4px;} }