: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;width:260px;max-width:100%;flex:0 0 auto}
.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(248px,290px));justify-content:center}
.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:1/1;max-height:230px;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 50% 45%,#1A1430,#0C0C16);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:contain;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:15px;font-weight:600;margin:0;line-height:1.4;direction:ltr;text-align:right}
.note{margin:0;font-size:12.5px;color:var(--muted)}
.feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.feat li{position:relative;padding-inline-start:15px;font-size:12.5px;color:var(--ink-2);line-height:1.6;list-style:none}
.feat li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:6px;height:6px;background:var(--acc);
  transform:rotate(45deg)}
.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}}

/* ===== زر الطلب في البطاقة ===== */
.card{cursor:pointer}
.actions .order{flex:1;border:1px solid var(--acc);background:transparent;color:var(--acc-2);font:inherit;
  font-weight:700;font-size:13.5px;padding:11px 10px;cursor:pointer;--cut:9px}
.card:hover .actions .order{background:var(--acc);color:var(--acc-ink)}

/* ===== نافذة المنتج ===== */
.overlay{position:fixed;inset:0;background:rgba(4,4,10,.82);backdrop-filter:blur(4px);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;overflow-y:auto}
.overlay[hidden]{display:none}
.modal{position:relative;background:var(--panel);border:1px solid var(--acc);width:100%;max-width:560px;
  padding:24px;--cut:20px;box-shadow:0 0 60px -20px var(--acc-glow);margin:auto}
.close{position:absolute;inset-inline-end:14px;top:12px;background:none;border:0;color:var(--muted);font-size:19px;cursor:pointer}
.close:hover{color:var(--ink)}
.mTop{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap}
.mImg{width:150px;flex:none;aspect-ratio:1/1;background:radial-gradient(circle at 50% 45%,#1A1430,#0C0C16);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.mImg img{width:100%;height:100%;object-fit:contain}
.mHead{flex:1;min-width:190px}
.mHead h2{font-family:var(--lat);font-size:19px;margin:8px 0 10px;direction:ltr;text-align:right}
.mBlock{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.mBlock h3{font-size:14px;margin:0 0 10px;color:var(--ink-2)}
.opts{display:flex;gap:9px;flex-wrap:wrap}
.opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--ink-2);font:inherit;font-size:13.5px;padding:11px 16px;cursor:pointer;--cut:9px}
.opt b{font-family:var(--lat);color:var(--acc-2);font-size:15px}
.opt.on{border-color:var(--acc);background:var(--acc);color:var(--acc-ink);box-shadow:0 0 18px var(--acc-glow)}
.opt.on b{color:var(--acc-ink)}
.payBox{margin-top:14px;background:var(--panel-2);border:1px solid var(--line);padding:14px 16px}
.payLine{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.payLine:last-of-type{border-bottom:0}
.payLine code{font-family:var(--lat);font-size:14.5px;color:var(--ink);direction:ltr;word-break:break-all}
.copy{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font:inherit;font-size:12px;
  padding:5px 12px;cursor:pointer;flex:none}
.copy:hover{color:var(--acc-2);border-color:var(--acc)}
.warn{margin:10px 0 0;font-size:12.5px;color:var(--acc-2);line-height:1.6}
.mFoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.total{flex:1;display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--muted)}
.total b{font-family:var(--lat);font-size:24px;color:var(--ink)}
#mSend{border:0;font:inherit;font-weight:700;font-size:14px;padding:13px 24px;cursor:pointer}
#mSend:disabled{opacity:.45;cursor:not-allowed}

/* ===== لوحة الطلبات ===== */
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);padding:16px 18px}
.kpi .k{font-size:12.5px;color:var(--muted)}
.kpi .v{font-family:var(--lat);font-size:26px;font-weight:600;color:var(--acc-2);margin-top:3px}
.pill{font-size:12px;font-weight:700;padding:4px 12px;background:var(--panel-2);color:var(--ink-2);display:inline-block}
.pill.new{background:#33260F;color:#F0B65B}
.pill.done{background:#12352B;color:var(--ok)}
.pill.cancel{background:#33161C;color:var(--bad)}
@media (max-width:560px){
  .mTop{flex-direction:column;align-items:center;text-align:center}
  .mImg{width:170px}
  .mHead h2{text-align:center}
  .modal{padding:20px 16px}
}