/* ===================== Neon 404 — Unified with Admin (UPDATED) ===================== */
:root{
  --bg:#05070b; --panel:#0b0f17; --ink:#eef3fb; --muted:#9fb0c7;
  --line:rgba(255,255,255,.12);
  --n1:#7df9ff; --n2:#9a7bff; --n3:#22d3ee; --np:#ff69e0; --nr:#ff4d4d;
  --ok:#22c55e; --err:#ef4444; --warn:#f59e0b;
  --blur:saturate(160%) blur(10px);
  --r-lg:18px; --r-xl:26px;
  --shadow-neon:0 0 0 1px rgba(255,0,0,.25),
                 0 10px 40px rgba(255,0,0,.18),
                 0 0 60px rgba(255,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; direction:rtl; color:var(--ink);
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,"Noto Kufi Arabic",Arial,sans-serif;
  background:
    radial-gradient(1000px 700px at 110% -10%, rgba(255,0,0,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 50%, rgba(255,0,0,.14), transparent 60%),
    var(--bg);
  min-height:100dvh; display:flex; flex-direction:column;
}
.container{width:min(1200px,92vw); margin:0 auto; padding:0 12px}

/* ===== Navbar ===== */
.navbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(5,7,11,.9), rgba(5,7,11,.55));
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);
}
.navbar .container{min-height:84px; display:flex; align-items:center; justify-content:space-between}
.logo{color:#ff0000a1; text-decoration:none; font-weight:900; letter-spacing:.3px}
.nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.nav a{
  color:var(--muted); text-decoration:none; padding:10px 14px; border-radius:12px; transition:.2s
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--line)}
.user-menu{display:flex; align-items:center; gap:10px}
.btn{
  appearance:none; border:none; cursor:pointer; font-weight:900;
  padding:12px 18px; border-radius:14px; color:#061018;
  background:linear-gradient(135deg,#fff,#ffdcdc 50%, #ffbaba);
  box-shadow:var(--shadow-neon); text-decoration:none; display:inline-block;
  transition:transform .08s, filter .2s, box-shadow .2s;
}
.btn:hover{filter:brightness(1.03); box-shadow:0 0 0 2px rgba(255,0,0,.35),0 18px 56px rgba(255,0,0,.28)}
.btn:active{transform:translateY(1px)}

/* ===== 404 Section ===== */
.error-404{
  position:relative; flex:1 1 auto; display:grid; place-items:center;
  padding:40px 0 60px; overflow:hidden;
}
.error-404 .container{
  position:relative; z-index:1; text-align:center;
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter:var(--blur);
  padding:28px 20px 30px;
  box-shadow:var(--shadow-neon);
}

/* 404 Glitch Effect */
.error-404 h1{
  margin:0 0 6px; font-size:clamp(84px, 14vw, 160px); line-height:1;
  letter-spacing:2px; position:relative; z-index:1; color:#fff;
  text-shadow:0 0 14px rgba(255,0,0,.45), 0 0 40px rgba(255,0,0,.35);
  animation:flicker 3.2s infinite steps(1,end);
}
.error-404 h1::before,
.error-404 h1::after{
  content:"404"; position:absolute; inset:0; z-index:-1; opacity:.75;
}
.error-404 h1::before{ transform:translate(2px,-2px); color:var(--n1); }
.error-404 h1::after { transform:translate(-2px,2px); color:var(--np); }
@keyframes flicker{
  0%, 97%, 100% { opacity:1 }
  10% { opacity:.92 }
  11% { opacity:.45 }
  12% { opacity:1 }
  60% { opacity:.96 }
  61% { opacity:.55 }
  62% { opacity:1 }
}
.error-404 h2{
  margin:0 0 10px; font-weight:900; letter-spacing:.3px;
  color:#ffdcdc; text-shadow:0 0 12px rgba(255,0,0,.25);
}
.error-404 p{margin:6px 0 18px; color:var(--muted); font-size:1.02rem}
.error-404 p a{color:#ff8c8c; text-decoration:none; border-bottom:1px dashed rgba(255,140,140,.5)}
.error-404 p a:hover{color:#fff; border-bottom-color:#fff}
.error-404 .btn{
  margin-top:6px;
  background:linear-gradient(135deg,#ff5f96,#ff0000);
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,0,0,.35), 0 20px 56px rgba(255,0,0,.28);
}

/* ===== Neon Robots ===== */
/* روبوت النيون (ميت ويبكي) */
.robot-cry{
  width:110px;
  margin:0 auto 18px;
}
.robot-cry svg{ width:100%; height:auto; }
.robot-cry svg .bot-body{
  fill: rgba(125,249,255,.07);
  stroke: var(--n1);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(125,249,255,.45))
          drop-shadow(0 0 18px rgba(154,123,255,.35));
}
.robot-cry svg .bot-stroke{
  stroke: var(--n1);
  stroke-width: 2;
  stroke-linecap: round;
}
.robot-cry svg .antenna{
  fill: var(--np);
  filter: drop-shadow(0 0 6px rgba(255,105,224,.6));
}
.robot-cry svg .eye-x line{
  stroke: var(--n1);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(125,249,255,.6));
}
/* دمعة نيون */
.robot-cry svg .tear{
  fill: var(--n1);
  filter: drop-shadow(0 0 8px rgba(125,249,255,.85));
  animation: tearFall 2.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes tearFall{
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(18px); opacity: .85; }
  100% { transform: translateY(28px); opacity: 0; }
}
/* ارتعاش بسيط */
.robot-cry svg{ animation: cryBlink 2.6s infinite; }
@keyframes cryBlink{
  0%,92%,100% { transform: translateY(0); }
  46%         { transform: translateY(3px); }
}

/* تأكد أن كارت 404 قابل للتموضع النسبي */
.error-404 .container{ position:relative; }

/* الروبوت الذي يمشي على الحافة */
.edge-walker{
  --size: 90px;             /* حجم الروبوت */
  --inset: 10px;            /* كم يبتعد عن الإطار ليبدو فوقه تمامًا */
  position:absolute;
  width:var(--size);
  height:160px;             /* ارتفاع SVG */
  z-index:5;
  pointer-events:none;      /* ما يعيق النقر على الأزرار داخل الكارت */
  /* مسار المشي: يلفّ على الحافة الداخلية للكارت */
  animation:edgeWalk 16s linear infinite, stepBob .9s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* تمايل بسيط كأنه يمشي */
@keyframes stepBob{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-3px) }
}

/* الروبوت يدور حسب الاتجاه */
.edge-walker.dir-top    { transform:rotate(0deg); }
.edge-walker.dir-right  { transform:rotate(90deg); }
.edge-walker.dir-bottom { transform:rotate(180deg); }
.edge-walker.dir-left   { transform:rotate(270deg); }

/* حركة العيون */
.edge-walker .eyes{ animation:eyesMove 3s ease-in-out infinite; transform-origin:60px 34px; }
@keyframes eyesMove{
  0%,20%{ transform:translateX(0) }
  40%{ transform:translateX(2px) }
  60%{ transform:translateX(-2px) }
  80%,100%{ transform:translateX(0) }
}

/* تارجح الأطراف (مشي) */
.edge-walker .arm.ul, .edge-walker .leg.ul{ animation:swingA .9s ease-in-out infinite alternate; transform-origin:42px 64px; }
.edge-walker .arm.ll{ animation:swingB .9s ease-in-out infinite alternate; transform-origin:26px 78px; }
.edge-walker .arm.ur, .edge-walker .leg.ur{ animation:swingB .9s ease-in-out infinite alternate; transform-origin:78px 64px; }
.edge-walker .arm.lr{ animation:swingA .9s ease-in-out infinite alternate; transform-origin:94px 78px; }

.edge-walker .leg.ll{ animation:swingB .9s ease-in-out infinite alternate; transform-origin:46px 120px; }
.edge-walker .leg.lr{ animation:swingA .9s ease-in-out infinite alternate; transform-origin:74px 120px; }
.edge-walker .foot.fl{ animation:footTap .9s ease-in-out infinite alternate; transform-origin:53px 147px; }
.edge-walker .foot.fr{ animation:footTap .9s ease-in-out infinite alternate-reverse; transform-origin:67px 147px; }

@keyframes swingA{ from{ transform:rotate(-18deg) } to{ transform:rotate(16deg) } }
@keyframes swingB{ from{ transform:rotate(16deg) }  to{ transform:rotate(-18deg) } }
@keyframes footTap{ from{ transform:translateY(0) scaleX(1) } to{ transform:translateY(1px) scaleX(1.06) } }

/* مسار على حافة الكارت من الداخل: أعلى -> يمين -> أسفل -> يسار */
@keyframes edgeWalk{
  /* أعلى الحافة (داخل الإطار) */
  0%   { top:calc(var(--inset) * -1); left:var(--inset); transform:rotate(0deg); }
  24%  { top:calc(var(--inset) * -1); left:calc(100% - var(--size) - var(--inset)); transform:rotate(0deg); }
  /* الزاوية العليا اليمنى ثم النزول */
  25%  { top:var(--inset); left:calc(100% - var(--size) + var(--inset)); transform:rotate(90deg); }
  49%  { top:calc(100% - 160px - var(--inset)); left:calc(100% - var(--size) + var(--inset)); transform:rotate(90deg); }
  /* الزاوية السفلى اليمنى ثم المشي يسار */
  50%  { top:calc(100% - 160px + var(--inset)); left:calc(100% - var(--size) - var(--inset)); transform:rotate(180deg); }
  74%  { top:calc(100% - 160px + var(--inset)); left:var(--inset); transform:rotate(180deg); }
  /* الزاوية السفلى اليسرى ثم الصعود */
  75%  { top:calc(100% - 160px - var(--inset)); left:calc(var(--inset) * -1); transform:rotate(270deg); }
  99%  { top:var(--inset); left:calc(var(--inset) * -1); transform:rotate(270deg); }
  100% { top:calc(var(--inset) * -1); left:var(--inset); transform:rotate(360deg); }
}




/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--line); background:rgba(255,255,255,.04);
  margin-top:24px; padding:14px 0; color:var(--muted);
}
.footer .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.footer a{color:#ff8c8c; text-decoration:none}
.footer a:hover{color:#fff; text-decoration:underline}