:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#08080F; --bg-2:#0D0D18; --panel:#12121F; --panel-2:#191929;
  --line:#23233A; --line-soft:#1B1B2C;
  --ink:#F0F0FA; --ink-2:#BFC0D8; --muted:#7D7F9C;
  --acc:#9B5CFF; --acc-2:#C38BFF; --acc-ink:#0A0512; --acc-glow:rgba(155,92,255,.35);
  --wa:#25D366; --tg:#2AABEE; --ok:#46D6A6; --bad:#FF8090;
  --ps:#6BA6FF; --pc:#F0A95B; --xb:#5BD08C;
  --lat:"Chakra Petch",system-ui,sans-serif;
  --ar:"Noto Kufi Arabic",system-ui,sans-serif;
  --cut:14px;
}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ar);font-size:15px;line-height:1.75;-webkit-text-size-adjust:100%}
a{text-decoration:none;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.cut{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.cut-s{--cut:9px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}

/* ===== الواجهة ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:38px 0 34px;margin-bottom:26px;text-align:center;
  background:radial-gradient(900px 300px at 50% -40px,var(--acc-glow),transparent 70%),linear-gradient(180deg,var(--bg-2),var(--bg))}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
.hero > *{position:relative}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:20px;margin-bottom:14px}
.glyph{width:42px;height:42px;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-size:19px;font-weight:700;box-shadow:0 0 22px var(--acc-glow);--cut:11px}
.hero h1{font-size:clamp(17px,3.4vw,23px);font-weight:500;margin:0 auto 18px;max-width:640px;line-height:1.7;color:var(--ink-2)}
.badges{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.badges span{font-size:12.5px;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);padding:7px 15px;--cut:8px}

/* ===== التصفية ===== */
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.chips{display:flex;gap:9px;flex-wrap:wrap;flex-grow:1}
.chip{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);padding:10px 18px;cursor:pointer;display:inline-block}
.chip:hover{color:var(--ink);border-color:var(--acc)}
.chip.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);box-shadow:0 0 18px var(--acc-glow)}
.chip i{font-style:normal;opacity:.7;font-size:12px;margin-right:6px;font-family:var(--lat)}
.filters input[type=search],.filters input[type=text]{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:11px 16px;min-width:215px}
.filters input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 16px var(--acc-glow)}

/* ===== البطاقات ===== */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(242px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;--cut:16px;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--acc);transform:translateY(-3px)}
.card.hot{border-color:var(--acc);box-shadow:0 0 30px -12px var(--acc-glow)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);background:var(--panel-2);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{color:var(--muted);font-size:14px}
.plat{position:absolute;top:10px;inset-inline-start:10px;font-size:11px;font-weight:700;padding:4px 12px;background:#07070Fe0;--cut:7px}
.plat.ps{color:var(--ps)} .plat.pc{color:var(--pc)} .plat.xb{color:var(--xb)}
.hotTag{position:absolute;top:10px;inset-inline-end:10px;font-size:11px;font-weight:700;padding:4px 12px;background:var(--acc);color:var(--acc-ink);--cut:7px}
.body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:11px;flex-grow:1}
.body h2{font-family:var(--lat);font-size:16px;font-weight:600;margin:0;line-height:1.4;direction:ltr;text-align:right}
.note{margin:0;font-size:12.5px;color:var(--muted)}
.prices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.prices li{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line-soft);padding-bottom:7px}
.prices li:last-child{border-bottom:0}
.prices b{font-family:var(--lat);font-weight:600;font-size:15px;color:var(--acc-2)}
.prices .official{color:var(--muted);font-size:12.5px}
.prices .official b{color:var(--muted);text-decoration:line-through;font-size:13px;font-weight:500}
.cur{font-size:11px;opacity:.75}
.actions{display:flex;gap:8px;margin-top:auto}
.actions a{flex:1;text-align:center;font-weight:700;font-size:13.5px;padding:11px 10px;--cut:9px}
.actions.center{justify-content:center;margin:16px auto;max-width:360px}
.wa{background:var(--wa);color:#042813}
.tg{background:var(--tg);color:#04202E}
.empty{background:var(--panel);border:1px solid var(--line);padding:44px 20px;text-align:center;color:var(--muted);--cut:16px}
.foot{text-align:center;color:var(--muted);font-size:13.5px;padding:40px 0 30px;margin-top:32px;border-top:1px solid var(--line)}
.tiny{font-size:12px;margin-top:16px;font-family:var(--lat)}

/* ===== الإدارة ===== */
.admin{max-width:1040px;margin:0 auto;padding:26px 16px 70px}
.admin h1{font-size:20px;margin:0 0 4px}
.muted{color:var(--muted);font-size:13px}
.panel{background:var(--panel);border:1px solid var(--line);padding:20px 22px;margin-bottom:18px;--cut:16px}
.panel h2{font-size:16px;margin:0 0 4px}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:14px 0 6px}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=search],select,textarea,input[type=file]{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);padding:11px 14px}
input[type=number],input[type=email]{font-family:var(--lat)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 16px var(--acc-glow)}
select option{background:var(--panel-2);color:var(--ink)}
.btn{margin-top:18px;border:0;background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:700;padding:12px 28px;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.btn:hover{box-shadow:0 0 20px var(--acc-glow)}
.btn.small{margin:0;padding:7px 14px;font-size:12.5px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);display:inline-block;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.btn.small:hover{color:var(--ink);box-shadow:none}
.btn.danger{color:var(--bad)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:12px;color:var(--muted);text-align:start;padding:0 10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
td.lat{font-family:var(--lat)}
td img{width:58px;height:34px;object-fit:cover;display:block}
.ok{background:#12352B;color:var(--ok);padding:11px 16px;font-size:14px;font-weight:600;--cut:10px}
.alert{background:#33161C;color:var(--bad);padding:11px 16px;font-size:14px;font-weight:600;--cut:10px}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.topbar a{color:var(--acc-2);font-size:13.5px}
body.auth{display:grid;place-items:center;min-height:100vh;padding:20px;
  background:radial-gradient(700px 260px at 50% 0,var(--acc-glow),transparent 70%),var(--bg)}
.authcard{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);padding:30px;--cut:18px}
.authcard h1{font-size:19px;margin:0 0 6px}
@media (max-width:620px){
  .row,.row4{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
  .body{padding:13px 14px 15px}.body h2{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}