:root{
  --ink:#14141F; --ink-2:#4A4A57; --ink-3:#5E6370; --ink-4:#8A8A96; --cream:#F7F4EE; --paper:#FFFFFF; --line:#E6E1D8;
  --cobalt:#2F55D4; --cobalt-2:#2444AC; --cobalt-soft:#E8EDFB; --cobalt-on-dark:#8FA6FF;
  --ok:#17693A; --ok-soft:#E3F4EA; --warn:#8A5A0B; --warn-soft:#FBF1DE; --bad:#A93226; --bad-soft:#FBE7E4;
  --st-wait-fg:#4A4A57; --st-wait-bg:#EFECE6;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-14:56px;
  --r:14px; --r-sm:10px; --r-lg:20px; --r-pill:999px;
  --tap:48px; --tap-lg:56px; --tap-xl:64px;
  --shadow-bar:0 -1px 0 var(--line),0 -8px 24px rgba(20,20,31,.06);
  --bg:var(--cream); --surface:var(--paper); --surface-2:#FDFCFA; --accent:var(--cobalt);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ar:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
[dir=rtl] body,[dir=rtl] input,[dir=rtl] select,[dir=rtl] textarea,[dir=rtl] button{font-family:var(--ar)}
a{color:var(--cobalt)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:640px}

/* Logo (E1 lockup) */
.logo{display:inline-flex;flex-direction:column;align-items:center;font-size:30px;line-height:1;color:var(--ink);text-decoration:none;direction:ltr}
.logo .wordmark{display:inline-flex;align-items:center}
.logo svg.wm{height:1em;min-height:18px;width:auto;flex:none;display:block}
.logo small{display:block;font:600 max(8px,.19em)/1 var(--sans);letter-spacing:.42em;text-indent:.42em;color:#6E737C;margin-top:.26em;white-space:nowrap}
.logo.lg{font-size:44px}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.lang{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 14px;font:500 14px var(--sans);color:var(--ink);cursor:pointer}
[dir=rtl] .lang{font-family:var(--sans)}

/* Type */
h1,h2,h3{margin:0 0 .4em;line-height:1.15}
.display{font:600 clamp(40px,7vw,72px)/1.02 var(--serif);letter-spacing:-.01em}
[dir=rtl] .display{font:600 clamp(34px,6vw,58px)/1.25 var(--ar)}
.h2{font:600 34px/1.1 var(--serif)}
[dir=rtl] .h2{font:600 28px/1.3 var(--ar)}
.lead{font-size:19px;color:var(--ink-2);max-width:560px}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt)}
[dir=rtl] .eyebrow{letter-spacing:0;font-family:var(--ar);font-size:14px}
.muted{color:var(--ink-3)}
.small{font-size:14px}

/* Layout bits */
.hero{padding:40px 0 56px}
.tagline{display:flex;gap:18px;margin-top:22px;font:600 15px var(--sans);letter-spacing:.08em;color:var(--ink)}
.tagline span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cobalt);margin-inline-end:8px;vertical-align:1px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card.tight{padding:16px}
.step b{display:block;font:600 22px var(--serif);margin:8px 0 4px}
[dir=rtl] .step b{font:600 18px var(--ar)}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cobalt-soft);color:var(--cobalt);font-weight:600;font-size:14px}
section{padding:28px 0}

/* Price list */
.prices{list-style:none;margin:0;padding:0}
.prices li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.prices li:last-child{border-bottom:0}
.prices .svc{font-size:13px;color:var(--ink-3)}
.prices .p{font-weight:600;white-space:nowrap}

/* Forms */
label{display:block;font-weight:500;font-size:14px;margin:14px 0 6px}
input,select,textarea{width:100%;font:16px var(--sans);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);min-height:48px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cobalt-soft);border-color:var(--cobalt)}
textarea{min-height:84px;resize:vertical}
.row{display:flex;gap:12px}.row>*{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;font-size:15px;user-select:none}
.chip input{display:none}
a.chip{text-decoration:none;color:inherit}
.chip.on,.chip:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;min-height:48px;font:600 16px var(--sans);cursor:pointer;background:var(--ink);color:#fff;text-decoration:none}
[dir=rtl] .btn{font-family:var(--ar)}
.btn.blue{background:var(--cobalt)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost.on{border-color:var(--cobalt);color:var(--cobalt-2);background:var(--cobalt-soft)}
.btn.ok{background:var(--ok)}
.btn.bad{background:var(--bad)}
.btn.sm{padding:8px 14px;font-size:14px;min-height:40px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.err{color:var(--bad);font-size:14px;margin-top:10px}
.note{background:var(--cobalt-soft);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;color:var(--cobalt-2)}

/* Status */
.st{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#EEE;color:var(--ink-2);white-space:nowrap}
.st.requested,.st.picked_up,.st.wait{background:var(--st-wait-bg);color:var(--st-wait-fg)}
.st.at_hub,.st.processing,.st.washing,.st.ironing,.st.alterations,.st.qc,.st.packed,.st.ready,.st.work{background:var(--cobalt-soft);color:var(--cobalt-2)}
.st.out_for_delivery,.st.go{background:var(--cobalt);color:#fff}
.st.delivered,.st.ok{background:var(--ok-soft);color:var(--ok)}
.st.cancelled,.st.issue,.st.bad{background:var(--bad-soft);color:var(--bad)}
.st.warn{background:var(--warn-soft);color:var(--warn)}

/* Tracking timeline */
.timeline{list-style:none;margin:16px 0 0;padding:0}
.timeline li{position:relative;padding:0 0 18px 30px;color:var(--ink-3)}
[dir=rtl] .timeline li{padding:0 30px 18px 0}
.timeline li::before{content:'';position:absolute;inset-inline-start:6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.timeline li::after{content:'';position:absolute;inset-inline-start:10px;top:20px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li.done{color:var(--ink)}
.timeline li.done::before{background:var(--cobalt)}
.timeline li.now{color:var(--ink);font-weight:600}
.timeline li.now::before{background:var(--cobalt);box-shadow:0 0 0 5px var(--cobalt-soft)}

.list{display:grid;gap:10px}
.item{display:flex;justify-content:space-between;align-items:center;gap:12px}
footer{padding:40px 0;color:var(--ink-3);font-size:14px}

/* ---------- Staff app ---------- */
html.staff,.staff body{background:#F4F2EE}
.staff body{font-size:17px;font-weight:500}
.staff .btn{min-height:var(--tap-lg);font-size:17px}
.staff .btn.sm,.staff .chip,.staff .piece .sts button{min-height:var(--tap)}
.staff .muted,.staff .small,.staff .l2,.staff .st{font-size:16px}
.staff .st{padding:4px 12px}
.nav{position:sticky;top:0;z-index:5;background:var(--ink);color:#fff;padding-top:env(safe-area-inset-top)}
.nav .wrap{display:flex;align-items:center;gap:6px;padding-top:10px;padding-bottom:10px;overflow-x:auto}
.nav .logo{color:#F7F4EE;font-size:20px;margin-inline-end:12px}
.nav .logo small{color:#9A9FB0}
.nav a.tab{color:#C9C9D2;text-decoration:none;padding:8px 12px;border-radius:999px;font-size:14px;white-space:nowrap}
.nav a.tab.on{background:#2A2A38;color:#fff}
.nav .sp{flex:1}
.nav button{background:none;border:1px solid #3A3A4A;color:#C9C9D2;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;white-space:nowrap}
.page{padding-top:20px;padding-bottom:80px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.ocard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:inherit}
.ocard .l1{display:flex;justify-content:space-between;gap:10px;align-items:center}
.ocard .code{font-weight:700;letter-spacing:.02em}
.ocard .l2{color:var(--ink-2);font-size:14px;margin-top:4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.big{font-size:18px;padding:16px 20px;border-radius:16px}
.pieces{display:grid;gap:10px}
.piece{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.piece .h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.piece .tag{font:700 15px ui-monospace,Menlo,monospace}
.piece .sts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.piece .sts button{border:1px solid var(--line);background:#FAFAF8;border-radius:10px;padding:8px 10px;font-size:14px;cursor:pointer}
.piece .sts button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.piece img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:760px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .v{font:600 26px/1.1 var(--sans);margin-top:4px}
.kpi.hl{background:var(--ink);color:#fff;border-color:var(--ink)}
.kpi.hl .muted{color:#B9B9C6}
table.t{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px}
table.t th,table.t td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
table.t th{background:#FAF8F4;font-weight:600;color:var(--ink-2)}
table.t td input,table.t td select{padding:7px 9px;font-size:14px}
.scroll{overflow-x:auto}
.pin{font-size:28px;letter-spacing:.4em;text-align:center}
.toast{position:fixed;bottom:20px;inset-inline-start:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:20}
.empty{padding:30px;text-align:center;color:var(--ink-3);background:var(--paper);border:1px dashed var(--line);border-radius:var(--r)}
.h3{font-weight:600;font-size:18px;margin:24px 0 10px}
.bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--cobalt)}

/* ---------- Customer pages: dark by default (Abdelrahman, 7 Nov), light on the sun toggle ---------- */
html.customer,html.dark{--bg:#14141F;--surface:#1D1D29;--surface-2:#22222F;--line:#2C2C3B;--ink:#F7F4EE;--ink-2:#C9C9D2;--ink-3:#9EA2AF;--ink-4:#6E7280;
  --cobalt-soft:#232B4D;--cobalt-2:#B9C6FF;--ok-soft:#163324;--ok:#7CD39A;--warn-soft:#3A2E12;--warn:#E6B45C;--bad-soft:#3D1F1C;--bad:#F08A7E;
  --st-wait-bg:#2A2A38;--st-wait-fg:#C9C9D2;--accent:#8FA6FF;color-scheme:dark}
html.customer[data-theme=light]{--bg:#F6F4EF;--surface:#FFFFFF;--surface-2:#F0EEE8;--line:#E6E1D8;--ink:#14141F;--ink-2:#4A4A57;--ink-3:#6B6F7B;--ink-4:#8A8A96;--mute:#D9D6CE;
  --cobalt-soft:#E8ECFB;--cobalt-2:#2444AC;--ok-soft:#E3F3E8;--ok:#17693A;--warn-soft:#FBF0D9;--warn:#8A5A0B;--bad-soft:#FBE7E4;--bad:#A93226;
  --st-wait-bg:#EFECE6;--st-wait-fg:#4A4A57;--accent:#2F55D4;color-scheme:light}
html.customer .logo{color:var(--ink)}
html.customer .logo small{color:var(--ink-3)}
html.customer a{color:var(--accent)}
html.customer .btn.ghost{color:var(--ink)}
html.customer .chip.on,html.customer .chip:has(input:checked){color:var(--ink);border-color:var(--accent);background:var(--cobalt-soft)}
html.customer .note{color:var(--ink)}
html.customer .btn:disabled{opacity:1;background:#2C2C3B;color:#9EA2AF} /* Button kind=disabled (Design QA 8 Nov) */
html.customer[data-theme=light] .btn:disabled{background:#E6E1D8;color:#8A8A96}
.cwrap{max-width:640px;margin:0 auto;padding:0 20px 140px}
/* Safe areas (Design 8 Nov): the header clears the notch, min 12 px; bottom bars already pad by the home indicator. */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 0 8px}
.hdr .logo{font-size:22px}
.hdr .tog{display:flex;gap:8px}
.tog button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;padding:0}
.tog svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.strip{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-top:8px}
.strip .ic{width:28px;height:28px;color:var(--accent);flex:none}
.strip .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.strip .l{font-size:13px;color:var(--ink-3)}
.strip .v{font-weight:600}
.strip .pill{margin-inline-start:auto;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.h1{font:600 34px/1.15 var(--serif);margin:22px 0 14px;letter-spacing:-.01em}
.h1 .n{font:600 30px/1 var(--sans)}
.h2s{font:600 28px/1.15 var(--serif);margin:0 0 8px}
.sub{color:var(--ink-2);margin:0 0 14px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;text-align:start;color:inherit;font:inherit;min-height:112px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.tile .ic{width:40px;height:40px;border-radius:12px;background:var(--cobalt-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:8px}
.tile .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:17px;font-weight:600}
.tile span{font-size:13px;color:var(--ink-3)}
.tile.on{border-color:var(--accent);background:var(--cobalt-soft)}
.tile .ck{position:absolute;top:12px;inset-inline-end:12px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:none;place-items:center;font-size:13px}
.tile.on .ck{display:grid}
.tile.wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0;gap:14px}
.tile.wide .ic{margin:0}
.tile.wide .tx{display:flex;flex-direction:column;gap:2px}
.tile.dark{background:var(--ink);color:var(--bg)}
html.customer .tile.dark{background:#232B4D}
.tile .tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:11px;color:var(--ink-2);margin-inline-start:6px;vertical-align:middle}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pills span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--ink-2)}
.plist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:4px 16px;margin-top:12px}
.plist .row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.plist .row:last-child{border-bottom:0}
.plist .row small{color:var(--ink-3);margin-inline-start:6px;font-size:13px}
.plist .row b{white-space:nowrap}
.plist .row b small{color:var(--ink-3);font-weight:400}
.plist .hd{padding:14px 0 6px;font-weight:600}
.plist .hd small{font-weight:400;color:var(--ink-3)}
.bar-bottom{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:12px 20px calc(16px + env(safe-area-inset-bottom));z-index:10}
.bar-bottom .in{max-width:640px;margin:0 auto}
.bar-bottom .line{font-size:13px;color:var(--ink-3);text-align:center;margin:0 0 10px}
.bar-bottom .line b{color:var(--ink)}
.bar-bottom .line .ok{color:var(--ok)}
.bar-bottom .row2{display:flex;gap:10px}
.bar-bottom .row2 .btn{flex:1}
.bar-bottom .row2 .back{flex:none;width:48px;padding:0}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--cobalt);color:#fff;width:100%;font-size:16px}
.estrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:12px 0 0;cursor:pointer;color:inherit;font:inherit;width:100%;text-align:start}
.estrow b{font-weight:600}
.estrow small{color:var(--ink-3);margin-inline-start:auto}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.days::-webkit-scrollbar{display:none}
.days .chip{flex:none;min-height:44px;padding:0 16px;font-weight:500}
.days .chip small{font-weight:400;color:var(--ink-3)}
.card .lbl{font-size:13px;color:var(--ink-3);margin-bottom:6px;display:flex;justify-content:space-between}
.card .lbl a{font-weight:600}
.card .lines{display:grid;gap:4px}
.card .lines .r{display:flex;justify-content:space-between;gap:10px}
.card .lines .r small{display:block;color:var(--ink-3);font-size:13px}
.tx-btn{background:none;border:0;color:var(--accent);font:600 15px var(--sans);padding:12px 0;cursor:pointer;min-height:44px;text-align:start}
.gate{background:var(--cobalt-soft);border-radius:var(--r-sm);padding:12px 14px;margin-top:12px;font-size:14px}
.gate b{display:block}
.gate .muted{font-size:13px}
.gate .btn{margin-top:10px;width:100%}
.gate.ok{background:var(--ok-soft);color:var(--ok)}
.gate svg,.okline svg,.livechip svg,.tx-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.eyebrow.s{color:var(--ink-3);letter-spacing:.2em;margin-top:14px}
.seg{display:flex;gap:6px;margin:14px 0 18px}
.seg i{flex:1;height:5px;border-radius:5px;background:var(--line)}
.seg i.on{background:var(--accent)}
.seg.done i{background:var(--ok)}
.livechip{display:inline-flex;align-items:center;gap:8px;background:var(--ok-soft);color:var(--ok);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:500;margin-bottom:12px}
.livechip::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.okline{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:500;margin:-6px 0 14px}
.steps{display:grid;gap:14px;margin-top:10px}
.steps .s{display:flex;gap:12px;align-items:flex-start}
.steps .s .ic{width:36px;height:36px;border-radius:50%;background:var(--cobalt-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.steps .s .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps .s b{display:block;font-weight:600}
.steps .s span{font-size:14px;color:var(--ink-3)}
.notecard{background:var(--warn-soft);border-radius:var(--r);padding:14px 16px;margin-top:12px}
.notecard .t{color:var(--warn);font-weight:600;font-size:14px;margin-bottom:8px}
.notecard .r{display:flex;align-items:center;gap:10px;padding:6px 0}
.notecard .r .ph{width:34px;height:34px;border-radius:8px;background:var(--surface);display:grid;place-items:center;flex:none;overflow:hidden}
.notecard .r img{width:100%;height:100%;object-fit:cover}
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.faces button{height:92px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:500 14px var(--sans);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.faces button svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.faces button.on{border-color:var(--accent);background:var(--cobalt-soft);color:var(--ink)}
.foot{color:var(--ink-3);font-size:13px;margin-top:16px}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;padding:14px 20px calc(24px + env(safe-area-inset-bottom));z-index:21;max-height:88vh;overflow:auto}
.sheet .in{max-width:640px;margin:0 auto}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 18px}
.sheet .ic{width:56px;height:56px;border-radius:50%;background:var(--cobalt-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 14px}
.sheet .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sheet .ic.ok{background:var(--ok-soft);color:var(--ok)}
.sheet .h2s{text-align:center}
.sheet .sub{text-align:center}
.sheet .btn{width:100%;margin-top:10px}
.radio{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-top:10px;cursor:pointer;background:var(--surface)}
.radio.on{border-color:var(--accent);background:var(--cobalt-soft)}
.radio b{display:block}
.radio span{font-size:13px;color:var(--ink-3)}
.radio .dot{margin-inline-start:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none}
.radio.on .dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--cobalt-soft)}
.prog{height:8px;border-radius:8px;background:var(--line);overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;background:var(--accent)}
.ocards{display:grid;gap:10px;margin-top:10px}
.ocard-c{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:inherit}
.ocard-c .ic{width:36px;height:36px;border-radius:10px;background:var(--cobalt-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.ocard-c .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.ocard-c b{display:block;font-size:15px}
.ocard-c span{font-size:13px;color:var(--ink-3)}
.ocard-c .go{margin-inline-start:auto;color:var(--accent);font-weight:600;white-space:nowrap}
.chk{display:flex;align-items:center;gap:10px;font-size:15px;margin-top:10px;cursor:pointer}
.chk input{width:20px;height:20px;min-height:0;margin:0}
.ipbox{background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px;margin-top:10px}
.ipbox .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0}
.ipbox .r b{font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.quote{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.quote:last-child{border-bottom:0}
.quote .ic{width:44px;height:44px;border-radius:12px;background:var(--cobalt-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.quote .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.quote b{display:block}
.quote span{font-size:13px;color:var(--ink-3)}
.quote .p{margin-inline-start:auto;font-weight:600;white-space:nowrap}

/* ---------- Driver flow (spec 01, R1 frames) ---------- */
.stephead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 4px}
.stephead h1{font:700 24px/1.3 var(--ar);margin:0}
.stephead .k{color:var(--ink-3);font-size:15px;white-space:nowrap}
.subline{color:var(--ink-2);font-size:16px;margin:0 0 8px}
.prog3{display:flex;gap:6px;margin:0 0 16px}
.prog3 i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.prog3 i.on{background:var(--cobalt)}
.counter{min-height:72px;border-radius:16px}
.counter.on{background:var(--cobalt-soft);border-color:var(--cobalt)}
.counter .nm{font:600 18px var(--ar)}
.cbtns{gap:8px}
.cbtns button{width:var(--tap-xl);height:var(--tap-xl);border-radius:50%;font-size:30px}
.cbtns button[data-inc]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cbtns button:disabled{opacity:.35}
.cbtns output{min-width:48px;font:700 32px var(--sans);font-variant-numeric:tabular-nums}
.actionbar{position:sticky;bottom:0;background:var(--paper);box-shadow:var(--shadow-bar);padding:12px 0 calc(12px + env(safe-area-inset-bottom));margin:16px -20px -80px;padding-inline:20px;z-index:5}
.actionbar .why{color:var(--bad);font-size:15px;text-align:center;margin:0 0 8px}
.actionbar .btn{width:100%}
.actionbar .btn+.btn{margin-top:8px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tgrid button{min-height:76px;border-radius:14px;border:1px solid var(--line);background:var(--paper);font:600 16px var(--ar);cursor:pointer;color:var(--ink);padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tgrid button small{font-weight:500;font-size:13px;color:var(--cobalt-2)}
.tgrid button.noted{background:var(--cobalt-soft);border-color:var(--cobalt)}
.tgrid button.need{background:var(--bad-soft);border-color:var(--bad)}
.tgrid button.need small{color:var(--bad)}
.waitbox{text-align:center;padding:24px 0 10px}
.waitbox .ic{width:88px;height:88px;border-radius:50%;background:var(--cobalt-soft);color:var(--cobalt);display:grid;place-items:center;margin:0 auto 18px;font-size:38px}
.waitbox .ic.ok{background:var(--ok-soft);color:var(--ok)}
.waitbox h1{font:700 26px/1.3 var(--ar);margin:0 0 10px}
.timer{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:14px;font-size:16px}
.timer b{font:700 30px var(--sans);font-variant-numeric:tabular-nums;color:var(--cobalt)}
.timer.out b{color:var(--bad)}
.kv2{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:4px 16px;margin-top:12px}
.kv2 .r{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.kv2 .r:last-child{border-bottom:0}
.runcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.runcard .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:19px;font-weight:700}
.runcard .hd .muted{font-size:15px;font-weight:500}
.runcard .task{border-top:1px solid var(--line);padding:12px 0 4px;margin-top:10px}
.runcard .task .tl{display:flex;align-items:center;gap:10px;font-weight:600}
.runcard .task .n{width:26px;height:26px;border-radius:50%;background:var(--cobalt-soft);color:var(--cobalt-2);display:grid;place-items:center;font-size:14px;flex:none}
.runcard .task .n.ok{background:var(--ok-soft);color:var(--ok)}
.alerts{display:grid;gap:8px;margin-bottom:16px}
.alert{display:flex;align-items:center;gap:10px;background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:10px 14px;font-size:15px}
.alert.bad{background:var(--bad-soft);color:var(--bad)}
.alert a{color:inherit;font-weight:600}
.slot{border:2px dashed var(--line);border-radius:var(--r);padding:18px;text-align:center;color:var(--ink-3);cursor:pointer;display:block}
.slot.need{border-color:var(--bad);color:var(--bad)}
.slot img{width:100%;max-height:220px;object-fit:cover;border-radius:10px}
.msgrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.msgrow .btn small{font-weight:400;opacity:.8}
.passimg{width:100%;border-radius:12px;background:#fff}

/* Spec 01: pickup receipt */
.counters{display:grid;gap:8px}
.counter{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.counter.on{border-color:var(--cobalt)}
.cbtns{display:flex;align-items:center;gap:4px;flex:none}
.cbtns button{width:56px;height:56px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);font:600 28px/1 var(--sans);cursor:pointer;color:var(--ink)}
.cbtns button:active{background:var(--cobalt-soft)}
.cbtns output{min-width:44px;text-align:center;font:700 26px var(--sans)}
button.chip{font:inherit;color:inherit;min-height:44px}
.piece.flag{border-color:var(--warn)}
.btn.big{min-height:56px;font-size:18px}
.banner{border:2px solid var(--cobalt);background:var(--cobalt-soft)}
.warnbox{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;margin-bottom:14px}

/* Spec 03: pay on delivery */
.amount{font:700 48px/1 var(--sans);margin:6px 0}
.ipgrid{display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;align-items:center;margin-top:12px;font-size:15px}
.ipgrid b{font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.ipgrid img{grid-column:1/-1;width:180px;height:180px;object-fit:contain;border-radius:10px;background:#fff;justify-self:center}

/* Spec 02: home QR booking */
.quick{border:2px solid var(--cobalt);margin-top:18px}
.quick details{border-top:1px solid var(--line)}
.quick summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.quick summary::after{content:'+';font-weight:400;color:var(--ink-3)}
.quick details[open] summary::after{content:'−'}
.quick textarea{margin-bottom:12px}
.homecard{background:#fff;border:1px dashed #999;border-radius:16px;padding:24px;text-align:center;max-width:380px;margin:0 auto}
.homecard .qr svg{width:220px;height:220px}
.homecard .who{font:600 20px var(--sans);margin-top:10px}

/* Printable tags */
.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tagcard{background:#fff;border:1px dashed #999;border-radius:8px;padding:10px;display:flex;gap:10px;align-items:center;break-inside:avoid}
.tagcard .qr{width:96px;height:96px;flex:none}
.tagcard .qr svg{width:100%;height:100%}
.tagcard b{font:700 16px ui-monospace,Menlo,monospace;display:block}
.tagcard span{display:block;font-size:12px;color:#444}
@media print{
  .nav,.noprint,.actionbar,.bar-bottom{display:none!important}
  body{background:#fff}
  .page{padding-top:0;padding-bottom:0}
  .tags{grid-template-columns:repeat(3,1fr)}
}
/* Spec 01: hang or fold (D3 toggle, shop label) */
.seg2{display:flex;gap:8px;margin-top:8px}
.seg2 button{flex:1;min-height:56px;border-radius:14px;border:1.5px solid var(--line,#D9D6CF);background:transparent;font:600 18px var(--sans);color:inherit;cursor:pointer}
.seg2 button.on{border-color:var(--cobalt,#2F55D4);background:rgba(47,85,212,.1);color:var(--cobalt,#2F55D4)}
.retas{display:inline-block;padding:4px 10px;border-radius:999px;font:700 15px var(--sans);background:rgba(47,85,212,.12);color:var(--cobalt,#2F55D4)}
.retas.fold{background:rgba(20,20,31,.08);color:var(--ink,#14141F)}
.retas.big{font-size:24px;padding:8px 16px;border-radius:14px}
.retline{display:flex;align-items:center;gap:8px;margin:6px 0 0;color:var(--ink-2);font:500 16px var(--sans)}
.retline svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- Flow v2 (Figma "Flow v2 · EN · Dark/Light", 8 Nov): schedule-first customer screens ---------- */
html.customer[lang=ar] body,html.customer[lang=ar] input,html.customer[lang=ar] button,html.customer[lang=ar] textarea{font-family:var(--ar)}
html.customer[lang=ar] .h1{font:600 28px/1.35 var(--ar)}
html.customer[lang=ar] .h2s{font:600 24px/1.35 var(--ar)}
html.customer[lang=ar] .eyebrow.s{letter-spacing:0}
.hdr{direction:ltr} /* Design 8 Nov: the header is never mirrored */
.hdr .tog .txt{font:600 15px var(--sans);width:40px;height:40px}
.hdr .tog .txt.ar{font:600 18px/1 var(--ar);padding-bottom:3px}
.hdr .back{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;margin-inline-end:12px;cursor:pointer;padding:0}
.hdr .back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdr .lead{display:flex;align-items:center}
.stepbar{display:grid;gap:6px;margin:8px 0 16px}
.stepbar .bars{display:flex;gap:8px}
.stepbar .bars i{flex:1;height:3px;border-radius:3px;background:var(--line)}
.stepbar .bars i.on{background:var(--accent)}
.stepbar .labels{display:flex;gap:6px;justify-content:space-between}
.stepbar .labels span{flex:none;font-size:12px;color:var(--ink-4);white-space:nowrap}
.stepbar .labels span.done{color:var(--accent)}
.stepbar .labels span.now{color:var(--ink);font-weight:600}
.hero{position:relative;border-radius:20px;overflow:hidden;background:var(--surface-2);margin-top:4px;aspect-ratio:350/160}
.hero.short{aspect-ratio:350/113}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .pill{position:absolute;top:12px;inset-inline-end:12px;background:rgba(247,244,238,.92);color:#14141F;border-radius:999px;padding:6px 10px;font:600 13px var(--sans);display:flex;align-items:center;gap:6px}
.hero .pill svg{width:14px;height:14px;stroke:#2F55D4;fill:none;stroke-width:2}
.hero .wm{position:absolute;inset-inline-end:14px;bottom:12px;height:20px;color:#F7F4EE;filter:drop-shadow(0 1px 6px rgba(0,0,0,.4))}
.hero .wm svg{height:100%;width:auto}
.h1.v2{margin:20px 0 10px}
.lead2{color:var(--ink-2);font-size:17px;margin:0 0 18px}
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bullets li{display:flex;gap:10px;color:var(--ink-2);font-size:16px;line-height:1.45}
.bullets li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
.bullets li b{color:var(--ink);font-weight:600}
.daycard{display:flex;align-items:center;gap:14px;width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:18px 20px;cursor:pointer;color:inherit;font:inherit;text-align:start;min-height:72px;margin-top:12px}
.daycard .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--ink-4);display:grid;place-items:center;flex:none;color:#fff}
.daycard .box svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;display:none}
.daycard b{display:block;font-size:19px;font-weight:600}
.daycard span{display:block;font-size:14px;color:var(--ink-3)}
.daycard.on{border-color:var(--cobalt);background:var(--cobalt-soft)}
.daycard.on .box{background:var(--cobalt);border-color:var(--cobalt)}
.daycard.on .box svg{display:block}
.hint{color:var(--ink-3);font-size:14px;margin:12px 4px 0}
.chipline{display:inline-flex;align-items:center;gap:8px;background:var(--cobalt-soft);color:var(--ink);border-radius:999px;padding:8px 14px;font:600 15px var(--sans);margin-bottom:16px}
.chipline svg,.schedcard .ic svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{margin:0;font-size:15px;color:var(--ink-2)}
.field input{min-height:52px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 16px;font-size:17px}
.field input::placeholder{color:var(--ink-4)}
.field .err-t{color:var(--bad);font-size:13px}
.schedcard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:4px}
.schedcard .ic{display:grid;place-items:center;flex:none}
.schedcard b{font-size:18px;font-weight:600;flex:1}
.schedcard a,.schedcard button.lnk{color:var(--accent);font:600 15px var(--sans);background:none;border:0;cursor:pointer;padding:6px 0;min-height:0}
.detailcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:4px 18px;margin-top:4px}
.detailcard .r{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.detailcard .r:last-child{border-bottom:0}
.detailcard .r span{color:var(--ink-3)}
.detailcard .r b{font-weight:600}
.lbl-caps{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px;display:flex;justify-content:space-between;align-items:center}
html.customer[lang=ar] .lbl-caps{letter-spacing:0;font-size:13px}
.lbl-caps a{font:600 15px var(--sans);letter-spacing:0;text-transform:none}
.btn.ghost.v2{width:100%;border:1.5px solid var(--ink-4);background:transparent;color:var(--ink);font-size:16px;min-height:48px}
.bar-bottom .row2 .circle{flex:none;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink-4);background:transparent;color:var(--ink);padding:0;display:grid;place-items:center}
.bar-bottom .line.plain{color:var(--ink-2);font-size:14px;text-align:start}
.bar-bottom .line.plain b{color:var(--ink)}
.ocard-c .st2{font-size:13px;color:var(--ink-3)}
.ocard-c .act{color:var(--accent);font-weight:600}
.retline{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--ink-2);font:500 15px var(--sans)}
.card.v2{border-radius:20px;padding:18px}
.card .lbl2{font-size:14px;color:var(--ink-3);margin-bottom:10px}
.lines.v2 .r{padding:8px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.lines.v2 .r:last-child{border-bottom:0}
.lines.v2 .r b{font-weight:600}
.lines.v2 .r .nm{font-size:16px}
.lines.v2 .tot{display:flex;justify-content:space-between;padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
.lines.v2 .tot b:last-child{font-size:20px}
.freeline{color:var(--ok);font-size:14px;margin-top:8px}
.waycard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 18px}
.waycard .ic{width:44px;height:44px;border-radius:50%;background:var(--cobalt-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.waycard .ic svg,.waycard .call svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.waycard b{flex:1;font-size:17px;font-weight:600}
.waycard .call{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);flex:none}
.nextcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-top:12px}
.nextcard .top{display:flex;justify-content:space-between;align-items:center}
.nextcard .top .cap{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.nextcard .top a{font-weight:600}
.nextcard .big{font-size:22px;font-weight:600;margin:8px 0 4px}
.nextcard .sm{font-size:14px;color:var(--ink-3)}
.okline.v2{margin:0 0 16px}
.paidline{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:500;margin:0 0 16px}
.paidline svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
bdi{unicode-bidi:isolate}

/* ---------- Driver flow · dark (Figma 259:552) ---------- */
html.dark{--paper:var(--surface);--cream:var(--bg)}
html.dark body{background:var(--bg);color:var(--ink)}
html.dark .nav{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
html.dark .nav .logo{color:var(--ink)}
html.dark .btn.ok{color:#14141F}
html.dark .btn.ghost{color:var(--ink);border-color:#4A4A5C}
html.dark .btn.blue{background:var(--cobalt);color:#fff}
html.dark input,html.dark select,html.dark textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}
html.dark .chip{color:var(--ink)}
html.dark .chip.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
html.dark .cbtns button{background:transparent;color:var(--ink);border-color:#4A4A5C}
html.dark .cbtns button[data-inc]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
html.dark .counter{background:var(--surface)}
html.dark .counter.on{background:var(--cobalt-soft);border-color:var(--cobalt)}
html.dark .tgrid button{background:var(--surface);color:var(--ink);border-color:var(--line)}
html.dark .tgrid button small{color:var(--ink-3)}
html.dark .tgrid button.noted{background:var(--cobalt-soft);border-color:var(--accent)}
html.dark .tgrid button.noted small{color:var(--ink)}
html.dark .tgrid button.need{background:var(--bad-soft);border-color:var(--bad)}
html.dark .actionbar{background:var(--bg);box-shadow:none;border-top:1px solid var(--line)}
html.dark .empty{background:var(--surface);color:var(--ink-3)}
html.dark .toolbar .chip{background:transparent}
html.dark .sheet{background:var(--surface)}
html.dark .err{color:var(--bad)}
.hpill{display:inline-flex;align-items:center;gap:8px;border:1px solid #3A3A4A;border-radius:999px;padding:0 14px;height:40px;font:600 13px var(--ar);color:#C9C9D2;white-space:nowrap;direction:rtl}
.dots{display:flex;gap:6px;margin:6px 0 6px}
.dots i{flex:1;height:3px;border-radius:3px;background:var(--line)}
.dots i.on{background:var(--cobalt)}
.dprog{font:500 13px var(--ar);color:var(--accent);margin:0 0 12px}
.dh1{font:700 30px/1.25 var(--ar);margin:6px 0 6px}
.dsub{color:var(--ink-2);font-size:15px;line-height:1.5;margin:0 0 14px}
.dsec{font:600 14px var(--ar);color:var(--ink-3);margin:18px 0 8px}
.stopcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 16px;margin-bottom:10px}
.stopcard.next{border:1.5px solid var(--cobalt);background:var(--cobalt-soft)}
.stopcard.done,.stopcard.skipped{opacity:.7}
.stopcard .hd{display:flex;align-items:center;gap:10px}
.stopcard .hd b{font:700 22px var(--sans)}
.stopcard .hd .nm{color:var(--ink-2);font-size:15px}
.stopcard .badge{background:var(--cobalt);color:#fff;border-radius:999px;padding:5px 10px;font:600 13px var(--ar)}
.stopcard .chk{width:26px;height:26px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:14px;flex:none}
.tasks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.tasks li{display:flex;align-items:center;gap:10px;font-size:15px}
.tasks .n{width:24px;height:24px;border-radius:12px;background:var(--cobalt);color:#fff;font:600 13px var(--sans);display:grid;place-items:center;flex:none}
.tasks .n.ok{background:var(--ok-soft);color:var(--ok)}
.contact{display:flex;gap:8px;margin:0 0 16px}
.contact a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border:1px solid #4A4A5C;border-radius:999px;color:var(--ink-2);font:600 14px var(--ar);text-decoration:none}
.contact a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.delcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:12px}
.delcard .cap{color:var(--ink-3);font:600 13px var(--ar);margin-bottom:8px}
.delcard .amt{display:flex;justify-content:space-between;align-items:baseline}
.delcard .amt b{font:700 34px var(--sans)}
.delcard .amt span{color:var(--ink-2);font-size:15px}
.delcard .meta{display:flex;gap:8px;align-items:center;color:var(--ink-2);font:600 14px var(--ar);margin-top:8px}
.nextcard2{border:1px solid var(--line);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:10px;color:var(--ink-3);margin-bottom:12px;font-size:15px}
.lnk{color:var(--accent);font:600 14px var(--ar);background:none;border:0;padding:8px 0;cursor:pointer;min-height:44px}
.retrows .r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:16px}
.retseg{display:flex;gap:8px}
.retseg button{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #4A4A5C;background:transparent;color:var(--ink);font:600 15px var(--ar);cursor:pointer}
.retseg button.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.retrows .lock{color:var(--ink-3);font-size:14px}
.photoslot{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:12px 14px;cursor:pointer;position:relative}
.photoslot .ic{width:56px;height:56px;border-radius:12px;background:var(--surface);display:grid;place-items:center;overflow:hidden;color:var(--ink-2);flex:none}
.photoslot .ic img{width:100%;height:100%;object-fit:cover}
.photoslot b{display:block;font-size:15px}
.photoslot small{color:var(--accent);font-weight:600}
.photoslot .ck{position:absolute;top:8px;inset-inline-end:10px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#14141F;display:grid;place-items:center;font-style:normal;font-size:13px}
.waitcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 18px;text-align:center}
.waitcard .pill{display:inline-flex;align-items:center;gap:8px;background:var(--warn-soft);color:var(--warn);border-radius:999px;padding:8px 14px;font:600 14px var(--ar)}
.waitcard .big{font:700 56px/1.1 var(--sans);font-variant-numeric:tabular-nums;margin:12px 0 4px}
.waitcard .prog{margin-top:14px}
.sumcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-top:12px;display:grid;gap:8px;font:600 15px var(--ar)}
.sumcard .muted{font-weight:500}
.okcard{background:var(--ok-soft);border-radius:20px;padding:16px 18px;display:grid;gap:12px;margin-bottom:14px}
.okcard .r{display:flex;align-items:center;gap:10px;color:var(--ok);font:600 15px var(--ar)}
.amberbox{background:var(--warn-soft);color:var(--warn);border-radius:16px;padding:14px 16px;font:600 15px var(--ar);margin-bottom:14px}
.row2b{display:flex;gap:10px;margin-top:12px}
.row2b .btn{flex:1}

/* Abdelrahman (8 Nov): the logo is always on the left, light or dark, EN or AR. Headers never mirror; only the content does. */
.nav .wrap{direction:ltr}
.nav .tab,.nav button{unicode-bidi:plaintext}
.nav .sp{flex:1}
.logo.lg{align-items:flex-start}
.login-head{text-align:left;direction:ltr}

/* ---------- Tailor call (spec 04, 8 Nov) ---------- */
.tbanner{background:var(--cobalt);color:#fff;border-radius:20px;padding:18px;margin-top:12px}
.tbanner .ey{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
html.customer[lang=ar] .tbanner .ey{letter-spacing:0;font-size:13px}
.tbanner .tt{font:600 22px/1.25 var(--serif);margin:8px 0 6px}
html.customer[lang=ar] .tbanner .tt{font:600 20px/1.4 var(--ar)}
.tbanner .tb{font-size:14px;line-height:1.5;opacity:.9}
.tbanner .tchip{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:#fff;color:var(--cobalt);border-radius:999px;padding:10px 16px;font:600 14px var(--sans);text-decoration:none;min-height:40px}
.tbanner .tchip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.tnote{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-top:12px}
.tnote .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tnote .hd b{font-size:16px}
.lnk2{background:none;border:0;color:var(--accent);font:600 14px var(--sans);cursor:pointer;padding:6px 0;min-height:36px}
.tnote .field{margin-bottom:10px}
.photos .lbl{display:block;font-size:14px;color:var(--ink-2);margin:6px 0 8px}
.photos .row{display:flex;gap:10px;flex-wrap:wrap}
.photos .th{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.photos .th img{width:100%;height:100%;object-fit:cover;display:block}
.photos .th button{position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(20,20,31,.75);color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0}
.photos .add{width:72px;height:72px;border-radius:12px;border:1.5px dashed var(--ink-4);display:grid;place-items:center;color:var(--ink-3);cursor:pointer}
.photos .add svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.tcard .ic{width:44px;height:44px;border-radius:12px;background:var(--cobalt-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.tcard .ic svg,.tcard .btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.tquotes{margin-top:12px;display:grid;gap:6px}
.tquotes .q{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:14px;color:var(--ink-2)}
.tblock{background:var(--cobalt-soft);border-radius:var(--r);padding:12px 14px;margin:8px 0}
.tblock .q{font-size:14px;color:var(--ink-2);margin:4px 0}
.tblock .thumbs{display:flex;gap:8px;margin-top:8px}
.tblock .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.tblock .ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.tblock select,.tblock input{min-height:40px;padding:6px 10px}
.tcard .lbl2 svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-inline-end:4px}

/* ---------- Shop (hub) · dark (Figma 262:603) ---------- */
.page.wide{max-width:1400px}
.hubweek{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.pillday{background:var(--cobalt-soft);color:var(--accent);border-radius:999px;padding:5px 10px;font:600 12px var(--ar)}
.qcard{background:var(--cobalt-soft);border:1.5px solid var(--cobalt);border-radius:20px;padding:16px;display:grid;gap:10px;margin-bottom:14px}
.qcard .cap{color:var(--accent);font:600 13px var(--ar)}
.qrow{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:14px}
.qrow b{font:700 17px var(--sans)}
.qrow .muted{flex:1}
.qrow .n{font:600 14px var(--ar)}
.stiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stile{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:2px}
.stile span{color:var(--ink-2);font:500 14px var(--ar)}
.stile b{font:700 32px var(--sans)}
.stile small{color:var(--ink-3);font-size:13px}
.hubalert{display:grid;gap:6px;background:var(--warn-soft);border-radius:20px;padding:16px;margin-bottom:12px;text-decoration:none;color:var(--ink)}
.hubalert b{color:var(--warn);font:600 15px var(--ar)}
.hubalert span{color:var(--ink-2);font-size:13px}
.cislot{display:grid;place-items:center;gap:6px;border:2px dashed var(--ink-4);border-radius:20px;padding:28px 16px;text-align:center;color:var(--ink);cursor:pointer;position:relative;overflow:hidden;min-height:160px}
.cislot svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.8}
.cislot b{font:600 17px var(--ar)}
.cislot small{color:var(--ink-3)}
.cislot.ok{border-style:solid;border-color:var(--line);padding:0}
.cislot.ok img{width:100%;height:200px;object-fit:cover;display:block}
.cislot.ok .ov{position:absolute;inset:auto 0 0 0;background:rgba(20,20,31,.78);display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;color:#fff}
.cislot.ok .ov svg{stroke:#fff;width:20px;height:20px}
.cislot.ok .ov small{color:#C9C9D2}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wgrid button{min-height:88px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.wgrid button b{font:700 20px var(--ar)}
.wgrid button small{font-size:13px;color:var(--ink-3)}
.wgrid button.done{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok)}
.wgrid button.done small{color:var(--ok)}
.wgrid button.cur{border-color:var(--cobalt);background:var(--cobalt-soft)}
.wgrid button.next{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.wgrid button.next small{color:#fff;opacity:.9}
.wgrid button:disabled{opacity:.45;cursor:default}
.packcard{background:var(--cobalt);color:#fff;border-radius:20px;padding:18px;display:grid;gap:6px}
.packcard .big{font:700 26px/1.3 var(--ar)}
.packcard .rest{font-size:14px;opacity:.9}
.packcard .prog{background:rgba(255,255,255,.25);margin-top:6px}
.packcard .prog i{background:#fff}
.packcard .small{font-size:13px;opacity:.9}
.ckrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;cursor:pointer;margin:0}
.ckrow:last-child{border-bottom:0}
.ckrow input{width:26px;height:26px;min-height:0;margin:0;accent-color:var(--cobalt)}
.boardhd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:8px 0 18px}
.board{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:12px;align-items:start;overflow-x:auto}
.bcol{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:12px;min-height:60vh;display:grid;gap:10px;align-content:start}
.bch{display:flex;flex-direction:column;gap:2px;padding:4px 4px 8px}
.bch b{font:600 15px var(--ar)}
.bcard{display:block;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;color:var(--ink)}
.bcard .l{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bcard .l b{font:700 15px var(--sans)}
.bcard .u{font:500 12px var(--sans);color:var(--ink-3)}

/* ---------- Super admin · dark (Figma 263:629) ---------- */
.adm{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:var(--surface);border-inline-end:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.side .logo{color:var(--ink);padding:4px 10px}
.side nav{display:grid;gap:4px}
.side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink-2);text-decoration:none;font:500 15px var(--sans)}
.side nav a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side nav a.on{background:var(--cobalt-soft);color:var(--ink)}
.side .me{margin-top:auto;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px}
.side .me b{display:block;font-size:14px}
.side .me span{font-size:12px;color:var(--ink-3)}
.main{padding:28px 32px 60px;max-width:1300px}
.nav .tabs{display:flex;gap:4px;overflow-x:auto;padding-top:0;padding-bottom:8px;scrollbar-width:none}
.ahead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 18px}
.ah1{font:600 32px/1.15 var(--serif);margin:0 0 4px}
html[lang=ar] .ah1{font:700 26px/1.3 var(--ar)}
.atiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.atiles.m3{grid-template-columns:repeat(3,1fr)}
.atile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.atile span{color:var(--ink-3);font-size:13px}
.atile b{font:700 26px var(--sans)}
.atile small{font-size:12px;color:var(--ink-3)}
.atile small.up{color:var(--ok)}
.atile small.down{color:var(--bad)}
.atile.hl{border-color:var(--cobalt)}
.agrid{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:16px}
.acard.tbl{padding:0;overflow:hidden}
.achd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.achd b{font:600 17px var(--sans);display:flex;align-items:center;gap:8px}
.achd b svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.8}
.badge{background:var(--cobalt-soft);color:var(--accent);border-radius:999px;padding:4px 10px;font:600 12px var(--sans)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.runstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.runstats div{background:var(--bg);border-radius:12px;padding:12px}
.runstats b{display:block;font:700 24px var(--sans)}
.runstats b.ok{color:var(--ok)}
.runstats span{font-size:12px;color:var(--ink-3)}
.nrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.nrow:first-of-type{border-top:0}
.nrow .ic{width:34px;height:34px;border-radius:10px;background:var(--bg);display:grid;place-items:center;color:var(--accent);flex:none}
.nrow .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.nrow div{flex:1}
.nrow b{display:block;font-size:14px}
.nrow span:not(.btn){font-size:12px;color:var(--ink-3)}
.at{width:100%;border-collapse:collapse;font-size:14px}
.at th{text-align:start;font:500 12px var(--sans);color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--line)}
.at td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.at tr:last-child td{border-bottom:0}
.at tr[data-href]{cursor:pointer}
.at tr[data-href]:hover td{background:var(--bg)}
.at tr.hold td{background:rgba(169,50,38,.08)}
.rc{display:inline-block;border-radius:999px;padding:3px 8px;font:600 12px var(--sans);background:var(--cobalt-soft);color:var(--accent)}
.rc.ok{background:var(--ok-soft);color:var(--ok)}
.rc.warn{background:var(--warn-soft);color:var(--warn)}
.rc.bad{background:var(--bad-soft);color:var(--bad)}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.frow label{display:grid;gap:4px;font-size:13px;color:var(--ink-3);margin:0}
.frow input,.frow select{min-height:40px}
.staffr.off{opacity:.6}
.holdcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:12px}
.holdcard .hh{font:600 26px/1.2 var(--serif)}
html[lang=ar] .holdcard .hh{font:700 22px/1.3 var(--ar)}
.hrows{background:var(--bg);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.hrows div{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.hrows span{color:var(--ink-3)}
.hrows b.ok{color:var(--ok)}
.hrows b.bad{color:var(--bad)}
.hphoto{display:flex;align-items:center;gap:12px;margin-top:12px;text-decoration:none;color:inherit}
.hphoto img{width:92px;height:72px;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.hphoto b{display:block;font-size:15px}
.hphoto span{font-size:13px;color:var(--ink-3)}
.rbars{display:flex;align-items:flex-end;gap:18px;height:150px;padding:10px 6px 0}
.rbars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.rbars i{display:block;width:100%;max-width:48px;background:var(--cobalt-soft);border-radius:8px 8px 0 0}
.rbars div:last-child i{background:var(--cobalt)}
.rbars small{color:var(--ink-3);font-size:12px}
.rbars b{font:600 12px var(--sans)}
html.dark .kpi,html.dark .ocard,html.dark table.t{background:var(--surface);color:var(--ink);border-color:var(--line)}
html.dark .kpi.hl{border-color:var(--cobalt)}
html.dark table.t th{color:var(--ink-3)}
html.dark .note{background:var(--cobalt-soft);color:var(--ink)}
html.dark .alert{background:var(--warn-soft);color:var(--ink)}
html.dark .alert.bad{background:var(--bad-soft)}
html.dark .tagcard{background:#fff;color:#14141F}
@media (max-width:899px){.atiles{grid-template-columns:repeat(2,1fr)}.agrid{grid-template-columns:1fr}.runstats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:899px){.acard table.at{display:block;overflow-x:auto;white-space:nowrap}}

.plist .row b{margin-inline-start:auto;display:inline-flex;align-items:baseline;gap:4px;text-align:end}

/* Tailor call cards (Figma C5t / C5a, 8 Nov) */
.tcall{border:1.5px solid var(--cobalt);background:var(--cobalt-soft);border-radius:20px;padding:18px;margin-bottom:12px}
.tcall .hd{display:flex;align-items:flex-start;gap:12px}
.tcall .ic{width:40px;height:40px;border-radius:12px;background:var(--surface);color:var(--accent);display:grid;place-items:center;flex:none}
.tcall .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.tcall b{font-size:17px;line-height:1.3}
.tcall p{margin:8px 0 12px;color:var(--ink-2);font-size:14px}
.tcall .callbtn{width:100%;background:#14141F;color:#F7F4EE;border:1px solid #4A4A5C}
.tagreed{display:flex;gap:12px;align-items:flex-start;background:var(--ok-soft);border-radius:20px;padding:18px;margin-bottom:12px}
.tagreed .ck{width:28px;height:28px;border-radius:50%;background:var(--ok);color:#14141F;display:grid;place-items:center;flex:none}
.tagreed .ck svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}
.tagreed b{display:block;color:var(--ok);font-size:17px;line-height:1.3}
.tagreed span{display:block;color:var(--ink-2);font-size:14px;margin-top:6px}
.wchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wchips button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #4A4A5C;background:transparent;color:var(--ink);font:600 15px var(--ar);cursor:pointer}
.wchips button.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}