:root{--c:#0f766e;--bg:#f6f7f9;--card:#fff;--ink:#0f172a;--mut:#64748b;--line:#e5e7eb;--wa:#16a34a;--r:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;overflow-x:hidden}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid #2563eb;outline-offset:2px;border-radius:8px}
.wrap{max-width:720px;margin:0 auto;padding:0 14px}
.hdr{background:var(--c);color:#fff;padding:18px 0 22px;border-radius:0 0 24px 24px}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:58px;height:58px;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);flex:none}
.brand h1{margin:0;font-size:1.35rem;line-height:1.25}
.brand p{margin:2px 0 0;opacity:.9;font-size:.9rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:.8rem}
.chip{background:rgba(255,255,255,.16);padding:4px 10px;border-radius:999px}
.tabs{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:.9rem;cursor:pointer;white-space:nowrap}
.tab.on{background:var(--c);border-color:var(--c);color:#fff}
.cat h2{font-size:1.05rem;margin:14px 2px 8px}
.item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
.ico{width:46px;height:46px;border-radius:12px;background:#f1f5f9;display:grid;place-items:center;font-size:1.6rem;flex:none}
.info{flex:1;min-width:0}
.info b{display:block;font-weight:600;font-size:.97rem}
.price{color:var(--c);font-weight:700;font-size:.92rem}
.qty{display:flex;align-items:center;gap:6px;flex:none}
.qb{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.qb.add{background:var(--c);border-color:var(--c);color:#fff}
.qn{min-width:20px;text-align:center;font-weight:700}
.bar{position:fixed;inset-inline:0;bottom:0;z-index:20;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(246,247,249,.96) 30%)}
.bar button{width:100%;max-width:692px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;border-radius:16px;background:var(--c);color:#fff;padding:14px 18px;font-weight:700;font-size:1.02rem;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.bar[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:30;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.panel{background:#fff;width:100%;max-width:720px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom))}
.panel h2{margin:0 0 10px;font-size:1.15rem;display:flex;justify-content:space-between;align-items:center}
.x{border:0;background:#f1f5f9;border-radius:10px;width:36px;height:36px;font-size:1.2rem;cursor:pointer}
.line{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.tot{display:flex;justify-content:space-between;font-weight:700;padding:8px 0;font-size:1.02rem}
.mut{color:var(--mut);font-size:.85rem}
label{display:block;font-size:.88rem;margin:10px 0 4px;font-weight:600}
input,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;font-size:16px}
textarea{min-height:64px;resize:vertical}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;cursor:pointer;font-weight:600}
.seg button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--c)}
.go{width:100%;margin-top:14px;border:0;border-radius:14px;background:var(--wa);color:#fff;padding:14px;font-size:1.08rem;font-weight:700;cursor:pointer}
.go:disabled{opacity:.6}
.err{color:#b91c1c;font-size:.85rem;min-height:1.2em;margin-top:6px}
.ok{text-align:center;padding:18px 6px}
.ok .big{font-size:3rem}
.cur{border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;border-radius:999px;padding:3px 10px;font-size:.8rem;cursor:pointer}
footer{text-align:center;color:var(--mut);font-size:.82rem;padding:26px 0 110px}
footer a{color:var(--c);font-weight:600;text-decoration:none}
.empty{text-align:center;color:var(--mut);padding:30px 0}
/* owner */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 6px;text-align:center;cursor:pointer}
.stat.on{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 25%,transparent)}
.stat b{display:block;font-size:1.25rem}
.stat span{font-size:.75rem;color:var(--mut)}
.ord{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.ord.new{border-color:#f59e0b;box-shadow:0 0 0 2px #fde68a}
.oh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.oh b{font-size:1.05rem}
.badge{font-size:.75rem;padding:3px 10px;border-radius:999px;font-weight:700}
.s-new{background:#fef3c7;color:#92400e}.s-preparing{background:#dbeafe;color:#1e40af}.s-ready{background:#dcfce7;color:#166534}.s-delivered{background:#e5e7eb;color:#374151}.s-cancelled{background:#fee2e2;color:#991b1b}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.acts button,.acts a{flex:1 1 auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;font-size:.85rem;cursor:pointer;text-align:center;text-decoration:none;font-weight:600}
.acts .wa{background:var(--wa);border-color:var(--wa);color:#fff}
.acts button.cur-s{background:var(--c);border-color:var(--c);color:#fff}
.login{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:18px}
/* landing */
.hero{background:#0f172a;color:#fff;padding:28px 0 34px;border-radius:0 0 28px 28px}
.hero h1{font-size:1.6rem;margin:10px 0 6px;line-height:1.35}
.hero p{opacity:.88;margin:0}
.steps{display:grid;gap:8px;margin:16px 0}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.step i{font-style:normal;font-size:1.4rem}
.shopc{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:10px}
.shopc img{width:56px;height:56px;border-radius:14px}
.shopc .lk{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.btn{display:inline-block;border-radius:10px;padding:7px 12px;font-size:.85rem;font-weight:700;text-decoration:none;border:1px solid var(--line);background:#fff}
.btn.p{background:#0f766e;border-color:#0f766e;color:#fff}
.cta{display:block;text-align:center;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;border-radius:14px;padding:14px;margin:16px 0}
@media (min-width:600px){.brand img{width:68px;height:68px}.brand h1{font-size:1.6rem}}
.line>span:last-child,.price,.tot span:last-child,#barTot{white-space:nowrap}
.line>span:first-child{min-width:0}
.hero .wrap,.hdr .wrap{padding-inline:18px}