body{background:#E9ECF2;min-height:100vh}
.cur{font-size:.8em;font-weight:600}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media (min-width:700px){body:not(.embedded){background:var(--navy);background-image:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(255,255,255,.03) 22px 44px)}body:not(.embedded) .app{box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}}
.logo-mark{width:38px;height:38px;border-radius:11px;background:var(--accent);position:relative;overflow:hidden;flex:none;display:block}
.logo-mark b{position:absolute;inset:10px 9px 8px;border:3px solid #fff;border-top:0;border-radius:0 0 9px 9px}
.logo-mark b::before{content:"";position:absolute;inset:-9px 4px auto;height:9px;border:3px solid #fff;border-bottom:0;border-radius:8px 8px 0 0}

/* الهيدر */
.ah{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;padding-top:env(safe-area-inset-top)}
.ah-in{display:flex;align-items:center;gap:12px;padding:12px 16px}
.ah-t{margin:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.ah-t small{font-size:12px;color:#9FB0CC}
.ah-t b{font:800 22px CA,GE,sans-serif}
.ah-btn{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);border:0;color:#fff;display:grid;place-items:center}
.ah-btn svg{width:22px;height:22px}
.av{padding:14px 14px 10px;display:block}

/* المبيعات */
.sales{position:relative;background:var(--navy2);color:#fff;border-radius:22px;padding:18px 18px 12px;overflow:hidden}
.sales::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(255,255,255,.035) 22px 44px)}
.sales>*{position:relative}
.sl-h{display:flex;justify-content:space-between;align-items:flex-start}
.sl-h p{margin:0;display:flex;flex-direction:column;line-height:1.2}
.sl-h small{color:#9FB0CC;font-size:13px}
.sl-h b{font-size:36px;margin-top:4px}
.sl-h b bdi{font-weight:800}
.up{display:flex;align-items:center;gap:4px;background:rgba(18,168,119,.22);color:#5EEAB0;font-weight:700;font-size:12.5px;padding:4px 10px;border-radius:99px;white-space:nowrap}
.up svg{width:16px;height:16px}
.chart{display:flex;align-items:flex-end;gap:5px;height:92px;margin-top:14px;direction:ltr}
.chart i{flex:1;height:var(--h);background:rgba(255,255,255,.22);border-radius:5px 5px 2px 2px;position:relative;transition:height .5s}
.chart i.cur{background:var(--accent)}
.chart span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font:600 10px FU,sans-serif;color:#7F90AE}
.sales{padding-bottom:26px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kpis>div{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px;border:1px solid var(--line)}
.kpis .hot{border-color:var(--accent);background:#FFF6F3}
.k-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);flex:none}
.k-i svg{width:22px;height:22px}
.kpis p{margin:0;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.kpis small{font-size:12px;color:var(--mute)}
.kpis b{font-size:19px;white-space:nowrap}
.kpis b bdi{font-weight:800}

.blk{margin-top:18px}
.blk-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.blk-h h2{margin:0;font:700 17px GE,sans-serif}
.blk-h a{font-size:13px;font-weight:700;color:var(--accent-d)}
.calm{display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border-radius:16px;padding:18px;color:var(--mute);margin:0;border:1px dashed var(--line)}
.calm svg{width:20px;height:20px;color:var(--ok)}

/* صفوف الطلبات */
.ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.or{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 12px;border:1px solid var(--line);cursor:pointer;transition:transform .15s}
.or:active{transform:scale(.98)}
.or.st-new{border-inline-start:4px solid var(--accent)}
.or.fresh{animation:fresh 1.4s ease 3}
@keyframes fresh{30%{box-shadow:0 0 0 5px rgba(255,90,60,.3)}}
.or-imgs{display:flex;flex:none}
.or-imgs img{width:44px;height:44px;border-radius:11px;background:var(--soft);object-fit:contain;padding:3px;border:2px solid #fff}
.or-imgs img+img{margin-inline-start:-18px}
.or-b{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;line-height:1.35}
.or-b b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.or-b small{color:var(--mute);font-weight:500;font-size:12px}
.or-b>span{font-size:12px;color:var(--mute)}
.or-e{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.or-e b{font-size:15px;white-space:nowrap}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap;background:#FFF1EE;color:var(--accent-d)}
.p-prep{background:#FFF6DD;color:#A86B00}.p-ship{background:#E8EEFF;color:var(--blue)}.p-done{background:#E9F8F2;color:#0B7A55}.p-cancel{background:#F1F2F4;color:#8A93A3}
.or.st-cancel{opacity:.6}

.low,.best{list-style:none;margin:0;padding:0;background:#fff;border-radius:16px;border:1px solid var(--line)}
.low li,.best li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.low li:last-child,.best li:last-child{border:0}
.th{width:44px;height:44px;border-radius:11px;background:var(--t,var(--soft));display:grid;place-items:center;flex:none;overflow:hidden;border:0;padding:0}
.th img{width:82%;height:82%;object-fit:contain}
.th img[src^="data:"]{width:100%;height:100%;object-fit:cover}
.low p{flex:1;margin:0;display:flex;flex-direction:column;line-height:1.35;min-width:0}
.low p b{font-size:14px}
.low small{color:var(--accent-d);font-weight:700;font-size:12px}.low small.z{color:var(--bad)}
.chip-btn{display:flex;align-items:center;gap:3px;border:0;background:#E9F8F2;color:#0B7A55;font-weight:700;border-radius:10px;padding:6px 10px}
.chip-btn svg{width:15px;height:15px;stroke-width:2.6}
.best i{font:800 15px FU,sans-serif;font-style:normal;color:var(--mute);width:16px}
.best b{flex:1;font-size:14px}
.best small{color:var(--mute);white-space:nowrap}

/* فلاتر */
.fchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px 12px;padding:0 14px}
.fchips::-webkit-scrollbar{display:none}
.fchips button{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:6px 14px;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.fchips bdi{font-size:12px;background:var(--soft);border-radius:99px;padding:0 7px;line-height:20px}
.fchips .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.fchips .on bdi{background:rgba(255,255,255,.16)}

/* المنتجات */
.psearch{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;height:46px;padding:0 14px;margin-bottom:10px}
.psearch svg{width:19px;height:19px;color:var(--mute)}
.psearch input{flex:1;border:0;outline:0;background:none;font-size:16px;min-width:0}
.pl-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pl-list li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px;border:1px solid var(--line)}
.pl-list li.hid{opacity:.55}
.pl-list li.fresh{border-color:var(--accent);animation:fresh 1.4s ease 2}
.pl-list .th{width:54px;height:54px;border-radius:13px;cursor:pointer}
.pl-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:start;background:none;border:0;padding:0;line-height:1.35}
.pl-b b{font-size:14px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-b span{font-size:12px;color:var(--mute)}
.pl-b s{color:#9AA2B1}
.pl-e{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.mstep{display:flex;align-items:center;background:var(--soft);border-radius:10px;padding:2px}
.mstep button{width:28px;height:28px;border:0;background:#fff;border-radius:8px;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mstep button svg{width:14px;height:14px;stroke-width:2.6}
.mstep bdi{min-width:30px;text-align:center;font-size:14px}
.mstep.low bdi{color:var(--accent-d)}
.sw{width:44px;height:26px;border-radius:99px;background:#C9CED8;border:0;position:relative;flex:none;transition:background .2s;padding:0}
.sw::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:right .2s}
.sw.on{background:var(--ok)}.sw.on::after{right:21px}

/* الكوبونات */
.new-cpn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed #FFC4B7;background:#FFF6F3;color:var(--accent-d);border-radius:16px;min-height:54px;font-weight:700;font-size:15px;margin-bottom:12px}
.new-cpn svg{width:20px;height:20px;stroke-width:2.4}
.cpns{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cpns li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px;border:1px solid var(--line)}
.cpns li.off{opacity:.55}
.cpns li.fresh{border-color:var(--accent);animation:fresh 1.4s ease 2}
.ct{background:var(--accent);color:#fff;border-radius:12px;padding:8px 12px;text-align:center;display:flex;flex-direction:column;line-height:1.3;-webkit-mask:radial-gradient(circle at 0 50%,transparent 7px,#000 8px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 8px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 50%,transparent 7px,#000 8px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 8px) right/51% 100% no-repeat;min-width:104px}
.ct b{font:800 16px FU,sans-serif;letter-spacing:1px;direction:ltr}
.ct span{font-size:11.5px;font-weight:600}
.cb p{margin:0;font-size:13px}
.cb .u{color:var(--mute);font-size:12px}
.cs{display:flex;flex-direction:column;align-items:center;gap:6px}
.del{border:0;background:none;color:var(--bad);font-size:12px;font-weight:600;padding:0}

/* التاب بار */
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);z-index:35;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs>a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:66px;font-size:11.5px;font-weight:600;color:#7A8394}
.tabs svg{width:25px;height:25px}
.tabs .on{color:var(--accent)}
.tabs i{position:absolute;top:6px;left:calc(50% + 2px);min-width:20px;height:20px;border-radius:99px;background:var(--accent);color:#fff;font:600 11px/20px FU,sans-serif;font-style:normal;text-align:center;padding:0 5px;border:2px solid #fff;box-sizing:content-box}
body.ring .tabs i{animation:ringb .6s ease 3}
@keyframes ringb{30%{transform:scale(1.35)}}
.fab{justify-self:center;width:60px;height:60px;border-radius:20px;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;margin-bottom:14px;box-shadow:0 10px 22px -8px rgba(255,90,60,.8),0 4px 0 var(--accent-d);transform:rotate(0);transition:transform .2s}
.fab:active{transform:translateY(3px)}
.fab svg{width:30px;height:30px;stroke-width:2.6}

/* الشيت */
.sh{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.sh-bg{position:absolute;inset:0;background:rgba(6,12,24,.55);opacity:0;transition:opacity .25s}
.sh-p{position:relative;width:min(480px,100%);max-height:92%;overflow:auto;background:#fff;border-radius:24px 24px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .32s cubic-bezier(.2,1,.3,1)}
.sh-p.tall{height:92%}
.sh.open .sh-bg{opacity:1}.sh.open .sh-p{transform:none}
.grab{display:block;width:44px;height:5px;border-radius:9px;background:#D5D9E0;margin:0 auto 10px}
.sh-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.sh-h>div{flex:1}
.sh-h h3{margin:0;font:700 21px/1.3 GE,sans-serif}
.sh-h p{margin:0;font-size:13px;color:var(--mute)}
.sh-h .pill{margin-top:5px}
.sx{width:38px;height:38px;border-radius:11px;border:0;background:var(--soft);display:grid;place-items:center;flex:none}
.sx svg{width:18px;height:18px}
.mini-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.mini-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--mute)}
.mini-steps li::before{content:"";position:absolute;top:6px;left:50%;width:100%;height:3px;background:var(--line)}
.mini-steps li:first-child::before{display:none}
.mini-steps i{position:relative;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--line)}
.mini-steps .ok::before,.mini-steps .now::before{background:var(--ok)}
.mini-steps .ok i{background:var(--ok);border-color:var(--ok)}
.mini-steps .now i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,90,60,.2)}
.mini-steps .ok span,.mini-steps .now span{color:var(--ink);font-weight:700}
.cust{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:16px;padding:12px;margin-bottom:12px}
.cust .av{width:44px;height:44px;border-radius:50%;background:var(--navy2);color:#fff;display:grid;place-items:center;font:800 18px CA,sans-serif;flex:none;padding:0}
.cust p{flex:1;margin:0;display:flex;flex-direction:column;line-height:1.35;min-width:0;font-size:12.5px;color:var(--mute)}
.cust p b{font-size:15px;color:var(--ink)}
.cust bdi{text-align:right;font-size:12.5px}
.cbtn{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--navy);flex:none;border:1px solid var(--line)}
.cbtn svg{width:20px;height:20px}
.cbtn.wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.oi{list-style:none;margin:0 0 6px;padding:0}
.oi li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.oi p{flex:1;margin:0;display:flex;flex-direction:column;line-height:1.35}
.oi p span{font-size:12.5px;color:var(--mute)}
.ot{margin:4px 0 14px}
.ot div{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:14px}
.ot dt{color:var(--mute)}.ot dd{margin:0;display:flex;align-items:center;gap:6px}
.ot .g dt,.ot .g dd{color:var(--ok);font-weight:700}
.ot .t{border-top:1px dashed var(--line);padding-top:8px;margin-top:4px}.ot .t dt{color:var(--ink);font-weight:700}.ot .t dd{font-size:20px;font-weight:700}
.paid{font-style:normal;font-size:11.5px;font-weight:700;background:#E9F8F2;color:#0B7A55;padding:1px 8px;border-radius:99px}
.cancel{display:block;margin:10px auto 0;border:0;background:none;color:var(--bad);font-weight:700;font-size:14px;padding:8px}

/* نموذج المنتج */
.pf .field>span{font-size:13px}
.photo{position:relative;display:grid;place-items:center;aspect-ratio:1.6;border:2px dashed #C9CED8;border-radius:18px;background:var(--soft);cursor:pointer;overflow:hidden;margin-bottom:10px;transition:border-color .2s}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo.has{border-style:solid;border-color:transparent;background:var(--t)}
.photo img{position:absolute;inset:8% 19%;width:62%;height:84%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.2));animation:pop .4s cubic-bezier(.2,1.5,.4,1)}
.photo img.raw,.photo img[src^="data:"]{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.ph-e{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mute)}
.ph-e svg{width:40px;height:40px;color:var(--accent);margin-bottom:4px}
.ph-e b{color:var(--ink);font-size:16px}
.ph-e small{font-size:12.5px}
.photo.has .ph-e{display:none}
.ph-c{display:none;position:absolute;bottom:10px;left:10px;background:rgba(11,27,51,.8);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:99px;align-items:center;gap:5px}
.ph-c svg{width:15px;height:15px}
.photo.has .ph-c{display:flex}
.smp-t{margin:0 0 6px;font-size:13px;color:var(--mute);font-weight:600}
.smp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.smp button{position:relative;min-width:0;aspect-ratio:1;border-radius:14px;background:var(--t);border:2px solid transparent;padding:0;overflow:hidden}
.smp button img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain}
.smp button.on{border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inp.num,.bstep input{font-family:FU,GE,sans-serif;font-weight:600}
.bstep{display:flex;align-items:center;gap:8px}
.bstep button{width:48px;height:48px;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center}
.bstep button svg{width:18px;height:18px;stroke-width:2.6}
.bstep input{width:80px;height:48px;text-align:center;border:1.5px solid var(--line);border-radius:12px;font-size:18px;outline:0}
.cchips,.seg{display:flex;gap:6px;flex-wrap:wrap}
.cchips button,.seg button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-weight:700;font-size:13.5px}
.cchips .on,.seg .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.seg{flex-wrap:nowrap;background:var(--soft);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:11px;padding:9px 6px}
.seg .on{background:#fff;color:var(--ink);box-shadow:0 2px 6px -2px rgba(0,0,0,.18)}
.pf-err{margin:0 0 10px;color:var(--bad);font-weight:700;font-size:13.5px;text-align:center}
.pub{min-height:54px;font-size:16.5px}
.tk-prev{display:grid;place-items:center;background:var(--navy2);border-radius:18px;padding:22px;margin-bottom:14px;background-image:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(255,255,255,.035) 22px 44px)}
.tkt{background:var(--accent);color:#fff;border-radius:14px;padding:12px 26px;text-align:center;display:flex;flex-direction:column;transform:rotate(-3deg);box-shadow:0 14px 26px -12px rgba(0,0,0,.5);-webkit-mask:radial-gradient(circle at 0 50%,transparent 10px,#000 11px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 10px,#000 11px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 50%,transparent 10px,#000 11px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 10px,#000 11px) right/51% 100% no-repeat}
.tkt b{font:800 28px FU,sans-serif;letter-spacing:3px;border:2px dashed rgba(255,255,255,.75);border-radius:8px;margin:4px 0;padding:0 12px;direction:ltr;min-width:150px}
.tkt small{opacity:.85;font-weight:700}
.tkt span{font-weight:700}
.codein{display:flex;gap:8px}
.codein .inp{font:700 18px FU,sans-serif;letter-spacing:2px;text-transform:uppercase}
.codein button{width:48px;flex:none;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center}
.codein button svg{width:22px;height:22px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.set-row p{margin:0;display:flex;flex-direction:column;line-height:1.35}
.set-row small{color:var(--mute);font-size:12.5px}
.set-links{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.toast-pop .ti.ok{background:var(--ok)}
.shop-pill{position:fixed;z-index:34;left:max(12px,calc(50% - 228px));bottom:calc(84px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px;background:var(--navy);color:#fff;font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:99px;box-shadow:0 12px 26px -10px rgba(11,27,51,.6)}
.shop-pill svg{width:17px;height:17px}
body.embedded .shop-pill,body.embedded [data-shop-link]{display:none}