*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{--p:#8b5cf6;--b:#3b82f6;--r:18px;
  --grad:linear-gradient(120deg,#7c3aed,#4f46e5,#2563eb,#7c3aed)}
[data-theme=dark]{--bg:#070718;--bg2:#10104a;--bg3:#1b0f4d;--card:rgba(255,255,255,.06);
  --bd:rgba(255,255,255,.12);--tx:#f0efff;--mu:#a9a7d8;--in:rgba(255,255,255,.07);
  --shadow:0 10px 40px rgba(0,0,0,.45)}
[data-theme=light]{--bg:#f4f1ff;--bg2:#e3e8ff;--bg3:#efe3ff;--card:rgba(255,255,255,.75);
  --bd:rgba(100,70,200,.18);--tx:#1c1747;--mu:#5d5a92;--in:rgba(255,255,255,.95);
  --shadow:0 10px 35px rgba(90,60,200,.16)}

html{scroll-behavior:smooth}
body{font-family:'Cairo',system-ui,sans-serif;color:var(--tx);min-height:100vh;
  background:linear-gradient(-45deg,var(--bg),var(--bg2),var(--bg3),var(--bg));
  background-size:400% 400%;animation:bg 20s ease infinite;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;z-index:-1;width:46vmax;height:46vmax;
  border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none}
body::before{background:radial-gradient(circle,#7c3aed,transparent 65%);top:-15vmax;left:-10vmax;
  animation:f1 16s ease-in-out infinite,hue 9s ease-in-out infinite alternate}
body::after{background:radial-gradient(circle,#2563eb,transparent 65%);bottom:-18vmax;right:-12vmax;
  animation:f2 19s ease-in-out infinite,hue 11s ease-in-out infinite alternate-reverse}
[data-theme=light] body::before,[data-theme=light] body::after{opacity:.22}
@keyframes bg{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes f1{50%{transform:translate(18vmax,12vmax) scale(1.15)}}
@keyframes f2{50%{transform:translate(-16vmax,-10vmax) scale(1.2)}}
@keyframes hue{from{filter:blur(90px) hue-rotate(-30deg)}to{filter:blur(90px) hue-rotate(35deg)}}

.wrap{max-width:1200px;margin:auto;padding:0 18px 40px}
a{color:inherit}

/* Header */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--bd)}
.nav{max-width:1200px;margin:auto;display:flex;align-items:center;gap:12px;padding:12px 18px}
.sp{flex:1}
.logo{font-weight:800;font-size:1.45rem;letter-spacing:1px;text-decoration:none;
  background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:shift 5s ease-in-out infinite alternate}
.logo small{font-size:.6rem;vertical-align:middle}
@keyframes shift{to{background-position:100% 0}}
.nl{text-decoration:none;color:var(--mu);font-weight:600;padding:8px 14px;border-radius:12px;transition:.3s}
.nl:hover,.nl.on{color:var(--tx);background:var(--card)}
.cnt{background:var(--grad);color:#fff;border-radius:20px;padding:0 8px;margin-inline-start:6px;font-size:.75rem}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--bd);background:var(--card);
  color:var(--tx);cursor:pointer;font:inherit;font-weight:700;transition:.3s}
.icon-btn:hover{transform:rotate(12deg) scale(1.1);border-color:var(--p)}

/* Buttons */
.btn{position:relative;overflow:hidden;border:0;cursor:pointer;font:inherit;font-weight:700;color:#fff;
  padding:10px 20px;border-radius:14px;background:var(--grad);background-size:250% 100%;
  transition:transform .2s,box-shadow .3s,background-position .6s;
  box-shadow:0 8px 24px rgba(99,60,230,.4);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 12px 30px rgba(99,60,230,.55)}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:140%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:var(--card);color:var(--tx);border:1px solid var(--bd);box-shadow:none}
.btn.big{width:100%;padding:14px;font-size:1.1rem}
.btn.danger{background:linear-gradient(120deg,#e11d48,#be185d);box-shadow:none}

/* Glass / cards */
.glass,.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.title{font-size:1.8rem;font-weight:800;margin:26px 0 16px}

/* Reveal animation */
.reveal{opacity:0}
.reveal.show{opacity:1;animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(28px) scale(.96)}}

/* Banner */
.banner{position:relative;overflow:hidden;border-radius:22px;margin:22px 0;
  box-shadow:var(--shadow);border:1px solid var(--bd);aspect-ratio:16/6}
.slides{display:flex;height:100%;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.slide{min-width:100%;height:100%}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.dots i{width:9px;height:9px;border-radius:9px;background:rgba(255,255,255,.55);cursor:pointer;transition:.3s}
.dots i.on{width:26px;background:#fff}

/* Toolbar */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}
.toolbar .input{flex:1;min-width:200px}
.chip{padding:9px 18px;border-radius:30px;border:1px solid var(--bd);background:var(--card);
  color:var(--tx);cursor:pointer;font:inherit;font-weight:600;transition:.3s}
.chip.active,.chip:hover{background:var(--grad);color:#fff;border-color:transparent}

/* Inputs */
.input,textarea.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);
  background:var(--in);color:var(--tx);font:inherit;outline:0;transition:.2s}
.input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(139,92,246,.25)}
label.lb{display:block;font-weight:600;margin:14px 0 6px;color:var(--mu)}

/* Games grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.card{overflow:hidden;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--p),0 18px 45px rgba(124,58,237,.35)}
.thumb{position:relative;aspect-ratio:4/3;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.card:hover .thumb img{transform:scale(1.1)}
.badge{position:absolute;top:10px;inset-inline-start:10px;background:linear-gradient(120deg,#f43f5e,#a855f7);
  color:#fff;font-weight:800;font-size:.8rem;padding:4px 12px;border-radius:20px;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.6)}100%{box-shadow:0 0 0 12px rgba(244,63,94,0)}}
.info{padding:14px}
.info h3{font-size:1.05rem;margin-bottom:8px}
.specs{list-style:none;color:var(--mu);font-size:.88rem;display:grid;gap:4px;margin-bottom:12px}
.specs b{color:var(--tx)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{display:flex;flex-direction:column;line-height:1.2}
.price s{color:var(--mu);font-size:.8rem}
.price b{font-size:1.1rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.empty{text-align:center;color:var(--mu);padding:50px 0;font-size:1.1rem}

/* Flash builder */
.builder{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
@media(max-width:860px){.builder{grid-template-columns:1fr}}
.stage{padding:18px}
.flash-wrap{display:flex;justify-content:center;padding:22px 0;direction:ltr}
.flash{display:flex;align-items:stretch;filter:drop-shadow(0 20px 40px rgba(124,58,237,.45));
  animation:bob 5s ease-in-out infinite;max-width:100%}
@keyframes bob{50%{transform:translateY(-8px)}}
.usb{width:64px;flex:none;background:linear-gradient(135deg,#e0e2ee,#8d90a8);border-radius:8px 0 0 8px;
  display:flex;align-items:center;justify-content:space-around;padding:0 10px;margin:28px 0}
.usb i{width:11px;height:16px;background:#3a3d57;border-radius:3px}
.fbody{position:relative;width:min(520px,70vw);min-height:190px;border-radius:0 34px 34px 0;
  background:linear-gradient(135deg,#6d28d9,#4338ca 50%,#1d4ed8);background-size:200% 200%;
  animation:bg 8s ease infinite;padding:18px 22px;border:2px solid rgba(255,255,255,.25);color:#fff}
.fbody::after{content:"";position:absolute;right:14px;top:50%;width:18px;height:18px;border-radius:50%;
  transform:translateY(-50%);background:var(--bg);border:3px solid rgba(255,255,255,.35)}
.flabel{display:flex;justify-content:space-between;font-weight:800;letter-spacing:1px;margin-bottom:12px;padding-right:34px}
.slots{display:flex;flex-wrap:wrap;gap:10px;padding-right:34px}
.slot{position:relative;width:54px;height:54px;border-radius:12px;overflow:hidden;cursor:pointer;
  border:2px solid rgba(255,255,255,.6);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);opacity:0;transition:.2s}
.slot:hover::after{opacity:1}
@keyframes pop{from{transform:scale(0) rotate(-20deg)}}
.hint{opacity:.8;font-size:.9rem}
.capbar{height:12px;border-radius:12px;background:var(--in);overflow:hidden;border:1px solid var(--bd);direction:ltr}
#fill{height:100%;width:0;background:var(--grad);background-size:200% 100%;
  transition:width .6s;animation:shift 3s linear infinite alternate}
.over #fill{background:linear-gradient(90deg,#f43f5e,#fb7185)}
#capText{margin:8px 0;color:var(--mu);font-weight:600}
.warn{color:#fb7185;font-weight:700;margin-bottom:10px}
.list{display:grid;gap:10px;margin:12px 0 18px}
.item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--in);border:1px solid var(--bd)}
.item img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.item .n{flex:1;font-weight:700}
.item small{color:var(--mu);display:block;font-weight:400}
.side{display:grid;gap:16px;position:sticky;top:80px}
@media(max-width:860px){.side{position:static}}
.sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.size{display:flex;flex-direction:column;align-items:center;padding:12px 6px;border-radius:14px;
  border:1px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer;font:inherit;transition:.3s}
.size b{font-size:1.5rem;line-height:1}
.size small{color:var(--mu)}
.size em{font-style:normal;font-size:.82rem;color:var(--mu);margin-top:4px}
.size:hover{transform:translateY(-3px);border-color:var(--p)}
.size.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(99,60,230,.45)}
.size.on small,.size.on em{color:#e9e7ff}
.summary{padding:18px}
.line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--bd)}
.line.total{font-size:1.2rem;font-weight:800;border:0;margin-bottom:6px}
.note{color:var(--mu);font-size:.82rem;margin:6px 0 14px}

/* Footer */
footer{text-align:center;padding:30px 18px 40px}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:14px}
.pill{text-decoration:none;padding:9px 18px;border-radius:30px;background:var(--card);
  border:1px solid var(--bd);font-weight:600;transition:.3s}
.pill:hover{background:var(--grad);color:#fff;transform:translateY(-3px)}
.copy{color:var(--mu);font-size:.85rem}

/* Admin */
body.adm{padding-bottom:110px}
.panel{padding:20px;margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}
.drop{display:grid;place-items:center;min-height:150px;border:2px dashed var(--bd);border-radius:16px;
  cursor:pointer;color:var(--mu);text-align:center;overflow:hidden;transition:.3s}
.drop:hover{border-color:var(--p);background:var(--in)}
.drop img{width:100%;max-height:260px;object-fit:cover}
.chk{display:flex;align-items:center;gap:10px;margin:16px 0 4px;font-weight:700;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--p)}
.alist{display:grid;gap:12px}
.arow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px}
.arow img{width:90px;height:60px;border-radius:10px;object-fit:cover}
.arow .n{flex:1;font-weight:700}
.arow small{display:block;color:var(--mu);font-weight:400}
.frow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.frow .input{max-width:130px}
.actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.bottom{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:8px;
  border-radius:26px;background:var(--card);backdrop-filter:blur(18px);border:1px solid var(--bd);
  box-shadow:var(--shadow);z-index:60}
.bottom button{border:0;background:none;color:var(--mu);font:inherit;font-size:.8rem;display:flex;
  flex-direction:column;align-items:center;gap:2px;padding:8px 22px;border-radius:20px;cursor:pointer;transition:.3s}
.bottom button i{font-style:normal;font-size:1.3rem}
.bottom button.on{background:var(--grad);color:#fff;transform:translateY(-4px);box-shadow:0 8px 20px rgba(99,60,230,.5)}
.tab{animation:rise .5s both}

/* Admin login */
.login{min-height:70vh;display:grid;place-items:center;padding:20px}
.login .panel{width:min(400px,100%);margin:0}

/* Toast */
#toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,30px);background:var(--grad);color:#fff;
  padding:12px 22px;border-radius:30px;font-weight:700;opacity:0;pointer-events:none;
  transition:.4s;z-index:100;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translate(-50%,0)}