/* ===== GND — الهوية المشتركة لصفحات الموقع العامة =====
   ينحمّل بكل صفحة فيها فوتر (مو لوحة التحكم ولا لوحة المالك)، قبل ملف الصفحة الخاص (home.css / pages.css).
   كل الكلاسات تبدأ بـ hx- عشان ما تتصادم مع portal.css / ui.css / polish.css.
   الألوان: أي عنصر عليه data-c="music|system|games" ياخذ لون بوته عبر --c.
   الحركة: transform/opacity بس، وتوقف لما العنصر يطلع برّا الشاشة (.hx-off). */

.hx{
  --fd:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --m:#a78bfa;--s:#60a5fa;--g:#fbbf24;
  /* الافتراضي أزرق السستم (لوحة التحكم التجريبية) */
  --c:#60a5fa;--c2:#67e8f9;--cx:rgba(96,165,250,.14);--cg:rgba(96,165,250,.45);
  --glass:rgba(15,15,20,.72);--hair:rgba(255,255,255,.07);
  overflow-x:clip;
}
.hx [data-c=music],.hx[data-c=music]{--c:#a78bfa;--c2:#f0abfc;--cx:rgba(167,139,250,.14);--cg:rgba(167,139,250,.45)}
.hx [data-c=system]{--c:#60a5fa;--c2:#67e8f9;--cx:rgba(96,165,250,.14);--cg:rgba(96,165,250,.45)}
.hx [data-c=games]{--c:#fbbf24;--c2:#fb923c;--cx:rgba(251,191,36,.14);--cg:rgba(251,191,36,.42)}
.hx h1,.hx h2,.hx h3{font-family:var(--fd);font-weight:700}
[lang=en] .hx h1,[lang=en] .hx h2{letter-spacing:-.025em} /* بالعربي التباعد يكسر اتصال الحروف */

/* ——— أيقونة البوت ——— */
.hx-bi{width:28px;height:28px;border-radius:9px;display:inline-grid;place-items:center;flex:none;color:#0b0b0e;
  background:linear-gradient(145deg,var(--c),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px -8px var(--cg)}
.hx-bi svg{width:58%;height:58%}
.hx-bi.lg{width:52px;height:52px;border-radius:15px}
.hx-bi.av{width:40px;height:40px;border-radius:50%}

/* ——— الظهور بالتمرير (يخفي بس لو الجافاسكربت شغال) ——— */
.js .hx-rv:not(.in){opacity:0}
.hx-rv.in{animation:hxIn .8s var(--ease) backwards}
@keyframes hxIn{from{opacity:0;transform:translateY(22px)}}
.hx-off,.hx-off *{animation-play-state:paused!important}
.hx-aurora{position:absolute;z-index:-2;pointer-events:none;inset:-240px -10% auto;height:1000px;will-change:transform;
  background:
    radial-gradient(28% 34% at 28% 36%,rgba(167,139,250,.30),transparent 70%),
    radial-gradient(30% 32% at 72% 30%,rgba(96,165,250,.28),transparent 70%),
    radial-gradient(22% 24% at 52% 58%,rgba(251,191,36,.13),transparent 70%);
  animation:hxDrift 22s ease-in-out infinite alternate}
@keyframes hxDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.06)}100%{transform:translate3d(3%,-1%,0) scale(1.02)}}
.hx .btn.hx-go{padding:.95em 1.7em;font-size:1rem;border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 40px -12px rgba(255,255,255,.55),0 0 0 1px rgba(255,255,255,.2)}
.hx-sec{padding:104px 0;position:relative}
.hx-sec:before{content:"";position:absolute;top:0;left:50%;width:min(1100px,92%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.hx-head{text-align:center;max-width:720px;margin:0 auto 48px}
.hx-tag{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:#d4d4d8;padding:.28em .85em;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1)}
.hx-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--m),var(--s));box-shadow:0 0 10px var(--s)}
.hx-head h2{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.25;margin:16px 0 10px;text-wrap:balance}
.hx-head p{color:#a1a1aa;font-size:1.05rem}
.hx-tabs{display:flex;width:max-content;max-width:100%;margin:0 auto 30px;padding:5px;gap:4px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--hair);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.hx-tabs button{display:inline-flex;align-items:center;gap:9px;padding:.55em 1.05em;border-radius:12px;border:1px solid transparent;
  background:none;color:#8b8b94;font-weight:600;font-size:.92rem;cursor:pointer;transition:color .25s,background-color .25s,border-color .25s,box-shadow .35s var(--ease)}
.hx-tabs button .hx-bi{width:24px;height:24px;border-radius:7px;filter:saturate(.35) brightness(.75);transition:filter .3s}
@media(hover:hover){.hx-tabs button:not(.on):hover{color:#e4e4e7;background:rgba(255,255,255,.04)}}
.hx-tabs button.on{color:#fff;background:var(--cx);border-color:var(--cg);box-shadow:0 10px 30px -14px var(--cg)}
.hx-tabs button.on .hx-bi{filter:none}
.hx-feat{position:relative;overflow:hidden;padding:24px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 50%),#0e0e12;
  border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.hx-feat:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--cx),transparent 62%)}
@media(hover:hover){
  .hx-feat:hover{transform:translateY(-4px);border-color:var(--cg);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 50px -26px var(--cg)}
  .hx-feat:hover:after{opacity:1}
  .hx-feat:hover .hx-fi{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 26px -6px var(--cg)}
  .hx-feat:hover .hx-fi svg{transform:scale(1.1)}
}
.hx-fi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;color:var(--c);
  background:var(--cx);border:1px solid var(--cg);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:box-shadow .35s var(--ease)}
.hx-fi svg.i{width:21px;height:21px;transition:transform .35s var(--ease)}
.hx-feat h3{font-size:1.04rem;margin-bottom:6px;font-weight:600}
.hx-feat p{color:#8b8b94;font-size:.9rem;line-height:1.75}

@media(max-width:860px){
  .hx-sec{padding:72px 0}
  .hx-head{margin-bottom:34px}
}
@media(max-width:520px){
  .hx-tabs{width:100%}
  .hx-tabs button{flex:1;justify-content:center;padding:.6em .4em;font-size:.84rem}
  .hx-tabs button .hx-bi{display:none}
  .hx-feat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 16px 18px;border-radius:16px}
  .hx-fi{grid-row:span 2;margin:0;width:42px;height:42px;border-radius:12px}
  .hx-feat h3{margin:2px 0 4px}
  .hx-feat p{font-size:.86rem;line-height:1.65}
}
@media(prefers-reduced-motion:reduce){
  .hx-aurora,.hx-rv.in{animation:none!important}
  .js .hx-rv:not(.in){opacity:1}
}

/* ===================== الهيدر: قائمة الجوال (الصفحات العامة بس) ===================== */
.hx-mnav{display:none;width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.hx-mnav span{display:block;width:16px;height:1.8px;border-radius:2px;background:#e4e4e7;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s}
.hx-mnav[aria-expanded=true] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.hx-mnav[aria-expanded=true] span:nth-child(2){opacity:0}
.hx-mnav[aria-expanded=true] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
.hx-mpanel{border-top:1px solid rgba(255,255,255,.06);background:rgba(8,8,10,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:hxMenu .28s cubic-bezier(.22,1,.36,1)}
@keyframes hxMenu{from{opacity:0;transform:translateY(-8px)}}
.hx-mpanel .wrap{display:flex;flex-direction:column;gap:2px;padding-block:12px 16px}
.hx-mpanel a:not(.btn){padding:12px 10px;border-radius:10px;color:#a1a1aa;font-size:1rem}
.hx-mpanel a.on{color:#fff;background:rgba(255,255,255,.06)}
.hx-mpanel .btn{margin-top:8px}
@media(max-width:860px){.hx-mnav{display:inline-flex}}
@media(min-width:861px){.hx-mpanel{display:none!important}}

/* ===================== الفوتر ===================== */
footer{position:relative;background:linear-gradient(180deg,transparent,rgba(96,165,250,.035))}
footer .logo img{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 24px -8px rgba(167,139,250,.5)}
footer .fcols h4{font-family:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;font-weight:600;color:#e4e4e7}
footer .fcols a{transition:color .2s,transform .25s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){footer .fcols a:hover{color:#fff}}
footer .fbot{display:flex;align-items:center;gap:9px}
footer .fbot:before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
footer .fbot[data-c=music]:before{background:#a78bfa;box-shadow:0 0 8px #a78bfa}
footer .fbot[data-c=system]:before{background:#60a5fa;box-shadow:0 0 8px #60a5fa}
footer .fbot[data-c=games]:before{background:#fbbf24;box-shadow:0 0 8px #fbbf24}
@media(max-width:860px){footer .fcols{grid-template-columns:1fr 1fr}footer .fcols>div:first-child{grid-column:1/-1}}