:root{color-scheme:dark;--bg:#0c1116;--surface:#181e25;--field:#1f262e;--header:#1d86ad;--notice:#d9a81c;--card1:#1a4fa3;--card2:#0f2f6b;--accent:#1a8db3;--accent2:#0a5a86;--gold:#c9a45c;--green:#1faa55;--red:#e0484b;--amber:#e0b21c;--fg:#eef2f6;--muted:#9aa6b2;--line:#2a323c;--ar:"Tajawal",system-ui,sans-serif;--lat:"Oswald","Tajawal",system-ui,sans-serif;--serif:"Playfair Display",Georgia,serif}
*{box-sizing:border-box}html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--ar)}
a{color:#6cc4e6}button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--notice);outline-offset:2px}
img{max-width:100%}[hidden]{display:none!important}
.muted{color:var(--muted)}.tc{text-align:center}.hint{font-size:13px;color:var(--muted);margin:0}.mono{font-family:ui-monospace,monospace;letter-spacing:1px}
.warn{color:var(--amber)!important}
.app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:110px}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 60px;display:flex;flex-direction:column;gap:20px}
.center{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.card{background:var(--surface);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card h2{margin:0;font-size:19px}.card h3{margin:0;font-size:17px;display:flex;align-items:center;gap:10px}
.narrow{width:100%;max-width:420px;align-items:stretch}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;align-items:start}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
/* header */
.top{position:sticky;top:0;z-index:20;background:var(--header);min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;direction:ltr}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand-name{font-size:20px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.top-actions form{display:contents}
.ghost{color:#fff;text-decoration:none;font-size:14px;border:1px solid rgba(255,255,255,.4);border-radius:18px;padding:5px 12px;white-space:nowrap}
.back{display:grid;place-items:center;width:36px;height:36px}.back svg,.menu-btn svg{width:28px;height:28px;fill:#fff}
.avatar{width:38px;height:38px;border-radius:8px;object-fit:cover}
.cm{font-family:var(--serif);font-size:38px;line-height:1;letter-spacing:-6px;background:linear-gradient(180deg,#f3dfb0,#9a7440 60%,#5b4020);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;padding-bottom:10px;flex-shrink:0}
.cm small{position:absolute;bottom:0;left:0;font:italic 700 8px var(--serif);letter-spacing:0;white-space:nowrap;-webkit-text-fill-color:#1466b8}
.cm small b{-webkit-text-fill-color:#e49a23}
.cm.big{font-size:56px;letter-spacing:-8px;padding-bottom:14px;align-self:center}.cm.big small{font-size:11px;left:4px}
.logo-img{height:52px;width:auto;border-radius:6px;flex-shrink:0}.logo-img.big{height:90px;align-self:center}
.notice{background:var(--notice);min-height:48px;display:flex;align-items:center;justify-content:center;padding:6px 16px;font-size:13px;color:#fff;text-align:center}
.flash{margin:12px 16px 0;padding:12px 16px;border-radius:10px;background:#123d2a;border:1px solid #1f7a4a;transition:opacity .4s}
.flash.err{background:#3d1417;border-color:#8a2a2e}.flash.hide{opacity:0;pointer-events:none}
.wrap>.flash,.card>.flash{margin:0}
/* banner */
.banner{margin:18px 11px 0;border-radius:10px;border:1px solid #6e87a8;aspect-ratio:1036/382;position:relative;overflow:hidden;background:radial-gradient(circle at 18% 10%,rgba(255,255,255,.5) 0 6%,transparent 13%),radial-gradient(circle at 80% 8%,rgba(255,255,255,.35) 0 5%,transparent 11%),linear-gradient(170deg,#3c6a9c,#223f6a 55%,#2f4f78)}
.banner.img{background:none}.banner.img img{width:100%;height:100%;object-fit:cover;display:block}
.banner-text{position:absolute;inset:0;padding:5% 6%;display:flex;flex-direction:column;gap:4px;text-align:right}
.banner-text h2{margin:0;font-size:clamp(15px,4.6vw,24px);font-weight:800;color:#fff}
.banner-text p{margin:0;font-size:clamp(10px,2.6vw,13px);color:#dbe6f2}
.banner-text .ph{font:600 clamp(15px,4.5vw,24px) var(--lat);color:#fff;direction:ltr;margin-top:auto;text-align:right}
.banner-mark{position:absolute;bottom:6%;left:5%;font:italic 800 clamp(14px,4.3vw,24px) var(--serif);color:#e49a23}
.hello{padding:24px 16px 0;font-size:18px;color:var(--muted)}
.search{margin:20px 16px 0}.search input{width:100%;height:64px;border-radius:32px;background:var(--field);border:0;padding:0 28px;color:var(--fg);font:500 17px var(--ar)}
/* products */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;padding:36px 26px 0}
.prod{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.card-btn,.prod .card{width:100%;aspect-ratio:222/215;position:relative;border-radius:0 0 18px 18px;padding:0;background:linear-gradient(180deg,transparent 0 28%,var(--card2) 28%,var(--card1));display:block}
.prod .card .ico{position:absolute;top:0;left:50%;transform:translateX(-50%);width:62%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:800 clamp(20px,7vw,40px) var(--lat);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:1;overflow:hidden}
.prod .card .ico img{width:100%;height:100%;object-fit:cover}
.prod .card .tag{position:absolute;top:34%;left:50%;transform:translateX(-50%) rotate(45deg);width:40%;aspect-ratio:1;background:#d6dbe3;opacity:.9;border-radius:8px}
.prod .card .seal{position:absolute;left:8%;bottom:26%;width:20%;aspect-ratio:1;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font:600 11px var(--serif);color:var(--gold);background:#0e2450;z-index:2}
.prod .card .ar{position:absolute;right:12%;left:34%;bottom:26%;font-weight:800;font-size:clamp(15px,4.5vw,20px);color:#fff;z-index:2;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod .card .en{position:absolute;left:12%;right:12%;bottom:6%;border-top:1px solid rgba(255,255,255,.45);padding-top:4px;text-align:left;font:600 clamp(14px,4.2vw,19px) var(--lat);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod .label{font:500 15px var(--lat);letter-spacing:.5px;color:var(--muted)}
/* nav */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:20;background:var(--bg);display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:12px 8px calc(12px + env(safe-area-inset-bottom,0px))}
.nav a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.nav svg{width:28px;height:28px;fill:#e8ecf0}
.nav .on{background:linear-gradient(135deg,var(--accent),var(--accent2));transform:translateY(-12px)}
.nav .on.green{background:var(--green)}.nav .on.red{background:#d9474b}.nav .on.blue{background:#3a6fe0}
.nav .srch{background:linear-gradient(135deg,#5b3db8,#128f6e)}
.fab{position:fixed;z-index:21;bottom:108px;right:max(12px,calc(50% - 248px));width:66px;height:66px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.fab svg{width:32px;height:32px;fill:#e2f7ea}
/* buy sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;display:grid;place-items:center;padding:16px}
.sheet{width:100%;max-width:470px;background:#0b1015;border-radius:12px;padding:32px 26px 36px;box-shadow:0 0 0 1px #16303d,0 10px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:24px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-head .nm{font:500 17px var(--lat);letter-spacing:.5px}
.pill{background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:24px;padding:9px 18px;font:500 17px var(--lat);display:flex;gap:6px}
.usd{color:var(--green);font-weight:700}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.box{background:var(--field);border-radius:34px;padding:10px 24px;display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.box label{font-size:13px;color:var(--muted)}
.box input,.box output{width:100%;background:none;border:0;color:var(--fg);font:500 20px var(--lat);text-align:right;padding:0}
.idf{height:70px;border-radius:35px;background:var(--field);border:0;width:100%;padding:0 30px;color:var(--fg);font:500 18px var(--lat);text-align:right}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.buy-btn{height:62px;border-radius:31px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:18px;font-weight:700}
.cancel{height:62px;border-radius:31px;border:1.5px solid var(--red);color:var(--red);font-size:18px;font-weight:700}
/* drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50}
.drawer{position:fixed;top:0;bottom:0;right:0;width:min(78%,380px);background:var(--bg);z-index:51;overflow-y:auto;border-left:2px solid #3a2a6a;padding:20px 0;transform:translateX(100%);transition:transform .25s}
.drawer.open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer,.flash{transition:none}}
.d-head{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 14px 18px;border-bottom:1px solid var(--line)}
.who{display:flex;align-items:baseline;gap:8px}.who strong{font:600 21px var(--lat)}.who em{font:normal 12px var(--lat);color:var(--muted)}
.bal{font:600 21px var(--lat);color:var(--accent)}
.d-menu{display:flex;flex-direction:column;padding:12px 0 0 10px;gap:2px}
.d-menu a,.d-menu button{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-radius:8px 0 0 8px;font-size:17px;color:var(--fg);text-decoration:none;width:100%}
.d-menu form{display:block}
.d-menu .on{background:#2b3036}.d-menu i svg{width:24px;height:24px;fill:currentColor;display:block}
/* pages */
.page{padding:26px 16px 0;display:flex;flex-direction:column;gap:22px}
.page h1{margin:0;font-size:27px;font-weight:800}
.ccard{border-radius:14px;padding:28px 30px;min-height:160px;background:linear-gradient(110deg,#4b25a8,#1d5f9a 55%,#0fb98a);display:flex;flex-direction:column;justify-content:center;gap:22px;font-size:20px;font-weight:700;color:#fff;text-decoration:none}
.ccard span:last-child{font-size:17px;font-weight:500;color:#d8e8f3}
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.method{aspect-ratio:268/185;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--m1) 0 56%,#101a4a 56%);text-decoration:none}
.method::after{content:"";position:absolute;left:-5%;right:-5%;top:51%;height:6%;background:var(--gold);transform:rotate(-3deg)}
.method .lg{position:absolute;right:6%;top:6%;width:42%;aspect-ratio:1;border-radius:50%;background:#0b1020;border:3px solid var(--gold);display:grid;place-items:center;font:700 clamp(11px,3.4vw,20px) var(--lat);color:#fff;z-index:1;overflow:hidden}
.method .lg img{width:100%;height:100%;object-fit:cover}
.method .sl{position:absolute;left:5%;bottom:6%;width:22%;aspect-ratio:1;border-radius:50%;border:2px solid var(--gold);background:#0e2450;display:grid;place-items:center;font:600 9px var(--serif);color:var(--gold);z-index:1}
.method .nm{position:absolute;right:6%;bottom:8%;left:32%;border:1.5px solid #d64fe0;border-radius:14px;padding:1px 4px;font:600 clamp(10px,3vw,15px) var(--lat);color:#f4c35a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.info{line-height:1.8}
.stats{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.stat{flex:0 0 min(62%,240px);border-radius:12px;padding:20px 14px;text-align:center;display:flex;flex-direction:column;gap:10px}
.stat b{font:600 23px var(--lat)}.stat b sup{color:#0a5b2c;font-size:14px}.stat span{font-size:16px;font-weight:700}
.dates-form{display:flex;flex-direction:column;gap:18px}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dfield{position:relative;border:1px solid #3a434e;border-radius:32px;height:60px;background:var(--surface)}
.dfield label{position:absolute;top:-10px;right:26px;background:var(--bg);padding:0 6px;font-size:13px;color:var(--muted)}
.dfield input{width:100%;height:100%;background:none;border:0;color:var(--fg);font:500 16px var(--lat);text-align:center;padding:0 10px}
.round{width:58px;height:58px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.round svg{width:28px;height:28px;fill:#fff}
.srow{display:flex;gap:14px;align-items:center}
.srow input{flex:1;min-width:0;height:58px;border-radius:29px;background:var(--surface);border:0;padding:0 24px;color:var(--fg);font:500 16px var(--ar)}
.chips,.tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tabs{padding:14px 16px;background:#0f151b;border-bottom:1px solid var(--line)}
.chip{flex-shrink:0;background:#000;border-radius:22px;padding:8px 16px;font-size:15px;display:flex;gap:8px;align-items:center;white-space:nowrap;color:var(--fg);text-decoration:none}
.chip i{font:normal 12px var(--lat);background:#343a41;border-radius:12px;padding:1px 12px}
.chip i.hot{background:var(--red)}
.chip.on{background:#2f6e67}.chip .up{color:var(--red)}.chip .dn{color:var(--green)}
.sumrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sum{border:1px solid var(--notice);border-radius:26px;padding:9px 20px;color:var(--notice);display:flex;gap:8px;align-items:center}
.xl{background:var(--accent);border-radius:28px;padding:12px 26px;font-size:16px;font-weight:700;color:#fff;text-decoration:none}
.list{display:flex;flex-direction:column;gap:12px}
.tx{background:var(--surface);border-radius:12px;padding:12px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.tx.code{grid-template-columns:1fr auto auto}
.tx .arr{width:48px;height:48px;border-radius:50%;background:#f0a9a1;display:grid;place-items:center;color:#c0392b;font-size:24px;font-weight:700}
.tx .arr.in{background:#9fe0b5;color:#157a3c}.tx .arr.pend{background:#f3dc8a;color:#8a6a05}
.tx .mid{display:flex;flex-direction:column;gap:3px;min-width:0}
.tx .mid strong{font:600 16px var(--lat);overflow-wrap:anywhere}.tx .mid small{font:13px var(--lat);color:var(--muted)}
.tx .amt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font:500 16px var(--lat);direction:ltr}
.tx .amt small{font-size:12px;color:var(--green)}.tx .amt s{color:var(--red)}
.ord{background:var(--surface);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;font-family:var(--lat)}
.ord .a{text-align:center;font-size:14px;min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column}
.ord .a b{font-size:12px;font-weight:600}.ord .a small{color:var(--muted);font-family:var(--ar)}
.ord .b{text-align:center;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:3px;align-items:center}
.ord .c{direction:ltr;display:flex;flex-direction:column;gap:3px;font-size:16px}.ord .c small{color:var(--muted);font-size:14px}
.ord .act{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;font-family:var(--ar)}
.badge{display:inline-block;border-radius:12px;padding:1px 10px;font:600 13px var(--ar)}
.st-pending{background:#4a3c0c;color:#f3d26b}.st-accepted,.st-approved{background:#123d2a;color:#6fdc9d}.st-rejected{background:#44161a;color:#f39a9c}
/* forms */
.form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-size:13px;color:var(--muted)}
.in{width:100%;background:var(--field);border:1px solid #2c3540;border-radius:12px;padding:12px 14px;color:var(--fg);font-size:15px}
.in[type=color]{height:46px;padding:4px}
.in.sm{padding:8px 12px;width:auto;flex:1;min-width:90px}
textarea.in{resize:vertical}
.check{display:flex;gap:8px;align-items:center;font-size:14px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:24px;padding:12px 22px;font-size:16px;font-weight:700;text-decoration:none;text-align:center}
.btn.sm{padding:7px 14px;font-size:14px}.btn.sec{background:#2b3036}.btn.danger{background:#9b2c30}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
details summary{cursor:pointer;color:#6cc4e6;padding:4px 0}
details[open]>summary{margin-bottom:12px}
.danger-zone{margin-top:18px;padding-top:14px;border-top:1px dashed #5a2a2e}
.empty{color:var(--muted);text-align:center;padding:24px 0;margin:0}
/* owner + admin */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.tile{border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;background:var(--surface);border-top:4px solid var(--c)}
.tile span{color:var(--muted);font-size:14px}.tile b{font:600 26px var(--lat);text-align:right}.tile small{color:var(--muted);font-size:12px}
.t-teal{--c:#2f9e93}.t-blue{--c:#3a8ee6}.t-green{--c:var(--green)}.t-amber{--c:var(--amber)}
.store-row{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.sr-head{display:flex;flex-direction:column;gap:6px}
.sr-link{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:10px;padding:6px 10px;min-width:0}
.sr-link a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;font-family:ui-monospace,monospace;font-size:13px}
.copy{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#2b3036;flex-shrink:0}
.copy svg{width:18px;height:18px;fill:#cfd6dd}.copy.done{background:var(--green)}
.sr-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted)}.sr-meta b{color:var(--fg)}
.sr-actions{display:flex;gap:8px;flex-wrap:wrap}
.linkcard{flex-direction:row;align-items:center;flex-wrap:wrap}.linkcard .sr-link{flex:1}
.user .u-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tok{font:500 13px ui-monospace,monospace;overflow-wrap:anywhere;flex:1;min-width:0;color:var(--fg)}
.steps{margin:0;padding-inline-start:20px;line-height:1.9;color:var(--muted)}.steps b{color:var(--fg)}
.mrow{display:flex;flex-direction:column;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--muted)}.mrow b{color:var(--fg)}
.mainbox{border:1px solid #2f6e67}
.sr-dom{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.sr-dom b{color:var(--fg)}
.dhelp{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--muted);line-height:1.8}
.dhelp ol{margin:6px 0 0;padding-inline-start:20px}.dhelp b{color:var(--fg)}
.thumb{width:40px;height:40px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;font:700 14px var(--lat);color:#fff;flex-shrink:0}
.reply{grid-column:1/-1;background:#0f2a1c;border:1px dashed #1f7a4a;border-radius:8px;padding:6px 10px;font:500 14px ui-monospace,monospace;color:#8ff0b6;overflow-wrap:anywhere;user-select:all}
.onote{grid-column:1/-1;font:13px var(--ar);color:var(--amber)}.onote.api{color:#7fb8ff}
.ok{color:var(--green)}
.sp{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.sp .mid{display:flex;flex-direction:column;gap:4px;min-width:0}.sp .mid strong{overflow-wrap:anywhere}.sp .mid small{color:var(--muted)}
.sp .act{display:flex;gap:8px;flex-wrap:wrap}
.qsel{width:100%;background:none;border:0;color:var(--fg);font:500 20px var(--lat);text-align:right;direction:ltr}
.qsel option{background:var(--field)}
.pill small{font-size:12px;color:#cfe6f0;align-self:center}
.prod.off{opacity:.45}
.prod.cat .card .en.cat-name{text-align:center;font:800 clamp(14px,4.2vw,18px) var(--ar);border-top:1px solid rgba(255,255,255,.45)}
a.card{text-decoration:none}
.cat-title{margin:22px 16px 0;font-size:26px;font-weight:800}
.big-sum{font-size:17px;font-weight:700}
.gprices{display:flex;flex-wrap:wrap;gap:6px}.gprices span{background:var(--bg);border-radius:8px;padding:3px 10px;font-size:13px;color:var(--muted)}.gprices b{color:var(--fg)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;max-height:320px;overflow:auto;padding:4px}
.lvl{background:#2b3036;border-radius:14px;padding:2px 10px;font:500 12px var(--ar);color:var(--amber)}
/* ---------- الكمبيوتر والتابلت ---------- */
.dnav{display:none}
@media (min-width:700px){
  .app{max-width:1180px;padding-inline:24px}
  .notice{margin-top:16px;border-radius:10px}
  .flash{margin:16px 0 0}
  .banner{margin:24px 0 0;aspect-ratio:1036/300;max-width:100%}
  .banner.img img{object-position:center}
  .hello{padding:28px 0 0}
  .search{margin:20px auto 0;max-width:720px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));padding:40px 0 0;gap:40px 28px}
  .cat-title{margin:28px 0 0}
  .page{padding:32px 0 0;max-width:920px;margin:0 auto}
  .page>form.form{max-width:520px;width:100%;margin-inline:auto}
  .methods{gap:20px}
  .nav{max-width:none}
  .banner-text{padding:4% 5%;gap:8px}
  .banner-text h2{font-size:clamp(22px,3vw,36px)}
  .banner-text p{font-size:clamp(13px,1.5vw,18px)}
  .banner-text .ph{font-size:clamp(20px,2.6vw,34px)}
  .banner-mark{font-size:clamp(20px,2.6vw,34px)}
  .ccard{min-height:180px}
  .stats{overflow:visible}.stat{flex:1 1 0}
  .dates{max-width:620px}
  .sheet{max-width:500px}
  .fab{right:24px}
}
@media (min-width:980px){
  .top{min-height:76px;padding:8px max(24px,calc(50% - 566px))}
  .dnav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;min-width:0}
  .dnav a{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:16px;font-weight:500;padding:9px 16px;border-radius:22px;white-space:nowrap}
  .dnav a svg{width:20px;height:20px;fill:currentColor}
  .dnav a:hover{background:rgba(255,255,255,.12)}
  .dnav a.on{background:rgba(0,0,0,.25)}
  .dnav .dbal{background:rgba(0,0,0,.3);font:600 17px var(--lat);margin-inline-start:10px}
  .dnav .dbal .usd{color:#7ff0a8}
  .dnav .dbtn{border:1px solid rgba(255,255,255,.6);font-weight:700}
  .dnav .dbtn.sec{border:0;background:rgba(0,0,0,.25)}
  .nav{display:none}
  .app{padding-bottom:60px}
  .fab{bottom:28px;right:28px;width:60px;height:60px}
  .prod .card{transition:transform .15s}
  .prod .card:hover{transform:translateY(-4px)}
  .method:hover{filter:brightness(1.12)}
  .tx,.ord{padding:14px 20px}
}
@media (min-width:980px) and (prefers-reduced-motion:reduce){.prod .card{transition:none}.prod .card:hover{transform:none}}
@media (max-width:400px){.methods{gap:10px}.grid{padding:30px 18px 0;gap:26px 18px}.actions{gap:14px}.brand-name{font-size:17px}}
/* ================= ثيم واجهة المتجر (أسود + أحمر) ================= */
body.shop{--bg:#050505;--surface:#121212;--field:#1b1b1b;--line:#2a1a1b;--accent:#d8222c;--accent2:#7a0d14;--gold:#f2b705;--muted:#a59a9b;background:var(--bg)}
body.shop .top{background:linear-gradient(90deg,#1c0204 0%,var(--header) 100%);min-height:62px;box-shadow:0 2px 18px rgba(179,18,28,.35)}
body.shop .brand-name{font-size:18px}
body.shop .notice{background:linear-gradient(90deg,#7a0d14,#c81e28);color:#fff}
body.shop .flash{background:#13240f;border-color:#2f6b23}body.shop .flash.err{background:#2a0a0c;border-color:#8a1a20}
body.shop .banner{border:0;border-radius:18px;background:radial-gradient(circle at 18% 30%,rgba(255,70,200,.35),transparent 45%),radial-gradient(circle at 85% 20%,rgba(255,180,0,.25),transparent 40%),linear-gradient(135deg,#2b0a4a,#5b0f6e 45%,#a0122a);box-shadow:0 10px 30px rgba(120,10,60,.35)}
body.shop .banner-text h2{font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.4)}
body.shop .banner-text p:first-of-type{display:inline-block;align-self:flex-start;background:#ffe14d;color:#1a0a00;font-weight:800;border-radius:6px;padding:2px 10px;transform:rotate(-2deg)}
body.shop .banner-mark{color:#ffe14d}
body.shop .hello{color:var(--muted);font-size:15px}
body.shop .search input{background:#151515;border:1px solid #241415;height:56px}
body.shop .cat-title{font-size:24px}
/* الأقسام: دوائر متوهجة */
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;padding:28px 16px 0}
.prod.catc{gap:8px}
.cat-circle{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;text-decoration:none;
  background:radial-gradient(circle at 50% 38%,var(--cc) 0%,color-mix(in srgb,var(--cc) 45%,#000) 45%,#120102 78%);
  box-shadow:0 0 0 2px rgba(255,90,60,.18),0 0 26px rgba(216,34,44,.35);transition:transform .18s,box-shadow .18s}
.cat-circle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-circle::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
.cat-circle.has-img::after{inset:72% 0 0}
.cini{position:absolute;inset:0 0 42%;display:grid;place-items:center;font:800 clamp(34px,11vw,72px) var(--ar);color:rgba(255,255,255,.92);text-shadow:0 4px 18px rgba(0,0,0,.5)}
.ctitle{position:absolute;left:10%;right:10%;bottom:31%;z-index:2;text-align:center;color:#fff;font:800 clamp(14px,4.2vw,28px)/1.2 var(--ar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px #000}
.cbtn{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:2;border:2px solid var(--gold);border-radius:999px;padding:2px 14px;
  font:800 clamp(11px,3vw,16px)/1.6 var(--ar);color:#fff;background:rgba(10,0,0,.6);white-space:nowrap;box-shadow:0 0 14px rgba(242,183,5,.35)}
.ccap{font-size:12px;color:var(--muted);text-align:center}
/* المنتجات */
.pgrid>.prod,.cgrid>.prod{min-width:0}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:26px 16px 0}
.pcard{display:flex;flex-direction:column;width:100%;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid #2a1416;padding:0;text-align:right;color:var(--fg);transition:transform .18s,border-color .18s}
.pimg{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--c),color-mix(in srgb,var(--c) 35%,#000) 55%,#0d0102 85%)}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pini{font:800 clamp(30px,10vw,58px) var(--lat);color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.pflag{position:absolute;top:10px;right:-34px;transform:rotate(35deg);background:#444;color:#fff;font:700 11px var(--ar);padding:3px 40px}
.pinfo{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pname{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psub{font:500 12px var(--lat);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.prow{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.pprice{font:600 15px var(--lat);white-space:nowrap}.pprice small{font-size:11px;color:var(--muted)}
.pbuy{background:linear-gradient(135deg,#e0262f,#7a0d14);border-radius:999px;padding:3px 14px;font:700 13px var(--ar);color:#fff;flex-shrink:0}
.prod.off{opacity:.55}.prod.off .pbuy{background:#333}
/* القائمة الجانبية والشريط السفلي */
body.shop .drawer{background:#070707;border-left:1px solid #3a0b10}
body.shop .d-head{border-bottom-color:#221213}
body.shop .d-menu .on{background:linear-gradient(270deg,rgba(216,34,44,.35),rgba(216,34,44,.08))}
body.shop .nav{background:rgba(8,8,8,.96);border-top:1px solid #2a1214;backdrop-filter:blur(8px)}
body.shop .nav .on,body.shop .nav .on.green,body.shop .nav .on.red,body.shop .nav .on.blue{background:linear-gradient(135deg,#e0262f,#7a0d14);box-shadow:0 6px 18px rgba(216,34,44,.45)}
body.shop .nav .srch{background:linear-gradient(135deg,#7a0d14,#2a0306)}
body.shop .sheet{background:#0b0b0b;box-shadow:0 0 0 1px #3a0b10,0 0 40px rgba(216,34,44,.25)}
body.shop .chip.on{background:#7a0d14}
body.shop .stat{box-shadow:0 6px 20px rgba(0,0,0,.4)}
body.shop .ccard{background:linear-gradient(110deg,#2b0a4a,#7a0d14 60%,#d8222c)}
body.shop .method{background:linear-gradient(180deg,var(--m1) 0 56%,#140405 56%)}
/* الفوتر */
.sfoot{margin-top:56px;border-top:2px solid #b3121c;border-radius:24px 24px 0 0;background:#080808;box-shadow:0 -12px 34px rgba(179,18,28,.18);padding:28px 16px 24px}
.sfoot-in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.fcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.fcol h4{margin:0 0 4px;font-size:14px;color:#fff}
.fcol a{color:var(--muted);text-decoration:none;font-size:13px}.fcol a:hover{color:#fff}
.fbrand strong{font-size:16px}.fbrand p{margin:0;color:var(--muted);font-size:13px}.fbrand .cm{font-size:30px;letter-spacing:-5px}.fbrand .logo-img{height:44px;align-self:flex-start}
.fph{color:var(--muted);font-size:13px}
.paylogos{max-width:760px;margin:22px auto 0;padding-top:16px;border-top:1px solid #1d1d1d;text-align:center}
.pl-t{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
.paylogos div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.paylogos div span,.paylogos img{background:#fff;color:#111;border-radius:6px;padding:3px 10px;font:700 11px var(--lat);height:26px;display:inline-grid;place-items:center}
.paylogos img{padding:2px;width:auto;object-fit:contain}
.brand-credit{text-align:center;font-size:12px;color:var(--muted);margin:8px 0 0}.brand-credit a{color:var(--gold,#f2b705);font-weight:700;text-decoration:none;letter-spacing:.3px}.brand-credit a:hover{text-decoration:underline}
.copy-r{text-align:center;color:var(--muted);font-size:12px;margin:16px 0 0}
/* ---- الهاتف ---- */
@media (max-width:979px){
  body.shop{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.shop .app{padding-bottom:0}
}
/* ---- التابلت فما فوق: عمود وسط مثل المرجع ---- */
@media (min-width:700px){
  body.shop .app{max-width:780px}
  .cgrid{padding:32px 0 0;gap:30px 26px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));padding:30px 0 0;gap:20px}
  body.shop .search{max-width:none}
}
/* ---- الكمبيوتر: قائمة جانبية ثابتة على اليمين ---- */
@media (min-width:1100px){
  body.shop{padding-right:270px}
  body.shop .drawer{transform:none;width:270px;z-index:30;padding-top:18px}
  body.shop .drawer-scrim{display:none!important}
  body.shop .menu-btn{display:none}
  body.shop .dnav a:not(.dbal):not(.dbtn){display:none}
  body.shop .top{padding:8px 28px}
  body.shop .fab{right:298px}
  .cat-circle:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 0 0 2px rgba(242,183,5,.35),0 0 38px rgba(216,34,44,.55)}
  .pcard:hover{transform:translateY(-4px);border-color:#7a0d14}
}
@media (prefers-reduced-motion:reduce){.cat-circle,.pcard{transition:none}.cat-circle:hover,.pcard:hover{transform:none}}

/* ===== لوحة المتجر: القائمة الجانبية ===== */
body.adm .menu-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:rgba(0,0,0,.18)}
.aside{position:fixed;top:0;bottom:0;right:0;z-index:60;width:min(290px,86vw);background:#10161c;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px;padding:16px 12px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;transform:translateX(105%);transition:transform .25s ease;box-shadow:-8px 0 30px rgba(0,0,0,.45)}
.aside.open{transform:none}
.aside-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55)}
.as-head{display:flex;align-items:center;gap:10px;padding:2px 4px 6px}
.as-head>div{display:flex;flex-direction:column;min-width:0;flex:1}
.as-head b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.as-head small{color:var(--muted);font-size:12px}
.as-head .avatar{width:42px;height:42px}.as-head .cm{font-size:30px;letter-spacing:-5px}
.as-x{width:36px;height:36px;border-radius:8px;background:#222a33;font-size:16px;flex-shrink:0}
.as-link{padding:4px 4px 4px 10px}.as-link a{font-size:12px}
.as-bal{display:flex;justify-content:space-between;align-items:center;gap:8px;background:linear-gradient(90deg,#123a2a,#173026);border:1px solid #1f5a3d;border-radius:10px;padding:10px 12px;color:var(--fg);text-decoration:none;font-size:13px}
.as-bal b{font:600 18px var(--lat);color:#7ff0a8}
.as-nav{display:flex;flex-direction:column;gap:2px}
.as-nav a,.as-foot a,.as-foot button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:#d6dde4;text-decoration:none;font-size:15px;width:100%;text-align:right}
.as-nav a svg,.as-foot svg{width:20px;height:20px;fill:currentColor;flex-shrink:0;opacity:.85}
.as-nav a span{flex:1}
.as-nav a:hover,.as-foot a:hover,.as-foot button:hover{background:#1b232c}
.as-nav a.on{background:var(--header);color:#fff;font-weight:700}
.as-nav a.on svg{opacity:1}
.as-nav .hot{font-style:normal;background:var(--red);color:#fff;border-radius:11px;min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;font:600 12px var(--lat)}
.as-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.as-foot form{display:block;margin:0}.as-foot button{color:#ff9a9c}
.adm-title{margin:0;font-size:22px}
body.adm .wrap{gap:18px}
body.adm.aside-on{overflow:hidden}
@media (max-width:979px){.hide-m{display:none}}
@media (min-width:980px){
  body.adm{padding-right:260px}
  body.adm .aside{width:260px;transform:none;box-shadow:none;top:0;z-index:30}
  body.adm .aside-btn,body.adm .as-x,body.adm .aside-scrim{display:none!important}
  body.adm .top{padding:8px 28px}
  body.adm .wrap{padding:24px 28px 60px;max-width:1240px}
  body.adm.aside-on{overflow:auto}
}
.tgrow{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.tgrow form{margin:0}
.dlive{font-size:12px;padding:2px 8px;border-radius:10px;background:#2b3036;color:var(--muted)}.dlive.on{background:#123a2a;color:#7ff0a8}.dlive.off{background:#3a1416;color:#ff9a9c}
.extoffer .price-tag{font:600 34px var(--lat);color:#7ff0a8}
.card h2 .hot{font-style:normal;background:var(--red);color:#fff;border-radius:11px;padding:1px 9px;font:600 13px var(--lat);vertical-align:middle}
/* بطاقة المنتج: الصورة والاسم فقط */
.pcard{background:linear-gradient(180deg,#1b0709,#2a0b0e);border:1px solid #3a1014;border-radius:18px;padding:8px 8px 0;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pcard .pimg{border-radius:14px}
.pcard .pinfo{padding:12px 6px 14px;align-items:center;text-align:center}
.pcard .pname{font-size:16px;font-weight:800;white-space:normal;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center}
@media (min-width:700px){.pcard .pname{font-size:18px}}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.cat-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;text-align:center;cursor:pointer}
.cat-it img{width:100%;aspect-ratio:1;border-radius:12px;border:2px solid transparent;object-fit:cover}
.cat-it input{position:absolute;top:6px;right:6px;width:18px;height:18px}
.cat-it input:checked+img{border-color:var(--gold)}
.cat-it input:not(:checked)+img{opacity:.45}