:root{--ink:#f2fff8;--paper:#001613;--card:#08271f;--mut:#a8c7b8;--g:#00A86B;--g2:#00A86B;--amb:#001F3F;--red:#ff8178;--ln:#1b4b3b;--shadow:0 12px 32px rgba(18,49,37,.07);--r:20px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;font-size:15px;line-height:1.65;padding-bottom:env(safe-area-inset-bottom);-webkit-font-smoothing:antialiased}
header{position:sticky;top:0;z-index:20;min-height:64px;padding:calc(10px + env(safe-area-inset-top)) clamp(16px,4vw,24px) 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(226,234,230,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
header b{font-size:19px;font-weight:850;letter-spacing:-.35px;color:var(--g);display:flex;align-items:center;gap:9px}
header b:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50% 50% 50% 2px;transform:rotate(-45deg);background:linear-gradient(145deg,#00A86B,var(--g2));box-shadow:0 0 0 5px rgba(0, 168, 107,.09)}
main{padding:14px 16px 34px;max-width:640px;margin:0 auto}
h1,h2,h3{color:var(--ink);line-height:1.3;letter-spacing:-.3px}h1{font-size:26px;font-weight:850}h2{font-size:21px;font-weight:800}h3{font-size:18px;font-weight:800}
p{margin-top:8px}
.card{position:relative;background:var(--card);border:1px solid rgba(220,231,225,.9);border-radius:var(--r);padding:17px;margin:12px 0;box-shadow:var(--shadow);overflow:hidden}
.card h2:first-child,.card h3:first-child{margin-top:0}
.hero{width:100%;padding:22px 18px;font-size:22px;font-weight:850;background:linear-gradient(135deg,#00A86B 0%,var(--g) 58%,#075a3f 100%);color:#fff;border:0;border-radius:22px;margin:14px 0;box-shadow:0 12px 24px rgba(0, 168, 107,.2)}
button,input,textarea,select{font:inherit;color:inherit}
button{min-height:44px;padding:10px 15px;border-radius:14px;border:1px solid #c8ded2;background:#fff;color:var(--g2);font-weight:750;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
button:active{transform:scale(.985)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(0,31,63,.62);outline-offset:2px}
button.p,.btn.p{background:linear-gradient(135deg,#00A86B,var(--g2));border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(0, 168, 107,.18)}button.d,.btn.d{background:#fff8f7;border-color:#f0d1cd;color:var(--red)}button.w{width:100%}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid #dce6e1;border-radius:14px;background:#fff;margin:5px 0 12px;min-height:48px;transition:border-color .16s ease,box-shadow .16s ease}
input:focus,textarea:focus,select:focus{border-color:#53a98a;box-shadow:0 0 0 4px rgba(0, 168, 107,.08);outline:0}textarea{min-height:96px;resize:vertical}input::placeholder,textarea::placeholder{color:#9aa8a1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:14px;border:1px solid #c8ded2;background:#fff;color:var(--g2);font-weight:750;text-decoration:none;cursor:pointer}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:1;min-width:0}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:#edf4f0;color:#466355;font-size:12px;font-weight:750}.chip.u,.u{background:#001F3F;color:#fff}.note{font-size:13px;color:var(--mut);line-height:1.7}.err{color:var(--red);font-size:13px;font-weight:650;min-height:22px}
.tl{list-style:none;padding:0;margin:12px 0}.tl li{padding:5px 24px 5px 0;position:relative;color:#89968f}.tl li:before{content:"";position:absolute;right:3px;top:13px;width:10px;height:10px;border-radius:50%;background:#dce6e1;box-shadow:0 0 0 4px #f3f7f4}.tl li.on{color:var(--g2);font-weight:800}.tl li.on:before{background:var(--g);box-shadow:0 0 0 4px #e4f2eb}
.seg{display:flex;gap:9px;margin:10px 0 14px}.seg label{flex:1;border:1px solid var(--ln);border-radius:16px;padding:12px 9px;text-align:center;background:#fff;font-weight:700;color:#5f7068;cursor:pointer;transition:.16s}.seg input{display:none}.seg label:has(input:checked){border-color:#67ae91;background:#eaf5ef;color:var(--g2);box-shadow:0 0 0 3px rgba(0, 168, 107,.06)}.seg label.ur:has(input:checked){border-color:#001F3F;background:#001F3F;color:#001F3F}
.seg label.ur:has(input:checked){color:#fff}
footer{position:fixed;z-index:24;bottom:0;inset-inline:0;display:flex;gap:4px;background:rgba(255,255,255,.94);border-top:1px solid #e4ebe7;padding:7px 7px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 -8px 24px rgba(28,55,43,.06)}
footer button{flex:1;border:0;border-radius:12px;color:#7b8982;padding:9px 2px;font-size:12px;font-weight:700;white-space:nowrap;min-height:42px;background:transparent}footer button.on{color:var(--g2);background:#eaf4ee}
nav{display:flex;gap:7px;overflow-x:auto;padding:3px 16px 13px;scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav button{white-space:nowrap;min-height:40px;padding:8px 13px;border-radius:999px;background:#fff;border-color:var(--ln);color:#68786f;font-size:13px}nav button.on{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 5px 12px rgba(0, 168, 107,.17)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:11px}.grid .card{margin:0;padding:15px}.grid .card b{font-size:25px;display:block;color:var(--g2);letter-spacing:-.5px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:#fff;border:1px solid var(--ln);border-radius:14px;overflow:hidden}td,th{padding:10px 9px;border-bottom:1px solid #edf1ef;text-align:right;vertical-align:middle}th{background:#f4f8f5;color:#53685d;font-weight:800}tr:last-child td{border-bottom:0}.sc{overflow-x:auto;border-radius:14px}
.warn{background:#fff6f3;border:1px solid #f2d4cf;border-radius:16px;padding:14px;margin:12px 0;color:#8d392f}.big{font-size:32px;font-weight:850;color:var(--g2);letter-spacing:-.6px}
.loyalty-box{border-color:#cfe5d9;background:linear-gradient(145deg,#fff 0%,#f2faf5 100%)}.ly-head{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--g2)}.ly-head span{font-size:12px;font-weight:750;color:#6d7c73}.loyalty-box small{color:var(--mut);font-size:12px}.loyalty-bar{height:8px;border-radius:999px;background:#e4eee8;overflow:hidden;margin:10px 0 5px}.loyalty-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00A86B,#00A86B);transition:width .45s ease}.ly-active{padding:8px 10px;border-radius:12px;background:#e6f5ec;color:var(--g2);font-size:13px;font-weight:750}.loyalty-opt{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #cfe5d9;border-radius:14px;background:#f4faf6;color:var(--g2);font-weight:750}.loyalty-opt input{width:20px;min-height:20px;margin:0;accent-color:var(--g)}
#off{position:sticky;top:64px;z-index:19;background:#001F3F;color:#fff;text-align:center;padding:8px 12px;font-size:13px;font-weight:700}
#map{border-radius:18px;overflow:hidden;border:1px solid var(--ln);box-shadow:var(--shadow)}
.demo-switch{position:fixed;z-index:35;bottom:calc(74px + env(safe-area-inset-bottom));inset-inline-end:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid #dce9e1;border-radius:999px;background:rgba(255,255,255,.94);color:#62776b;text-decoration:none;font-size:11px;font-weight:750;box-shadow:0 4px 14px rgba(25,55,40,.09);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.demo-switch:before{content:"↻";font-size:15px;line-height:1;color:var(--g)}
@media(min-width:700px){main{padding-top:22px}.card{padding:21px}header b{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important}}


/* Mobile launcher/app chrome: white canvas, Talbista green, and photo-free role cards. */
:root{color-scheme:light;--ink:#17372b;--paper:#f7fbf8;--card:#fff;--mut:#63776d;--g:#087d59;--g2:#056247;--ln:#d9e8df;--shadow:0 12px 32px rgba(18,79,49,.09)}
html{background:var(--paper);color-scheme:light}body{background:linear-gradient(180deg,#fff 0%,#f7fbf8 65%,#eef8f1 100%);color:var(--ink)}
.brandcopy strong{color:var(--g2)!important}.brandcopy span{color:var(--mut)!important}.role-link{background:#fff!important;border-color:#cce3d5!important;color:var(--ink)!important;box-shadow:0 10px 24px rgba(27,94,61,.09)!important}.role-link:before{background:#f4fbf6!important;opacity:1!important}.role-link.customer:before,.role-link.store:before,.role-link.driver:before,.role-link.admin:before{background-image:none!important}.role-icon{background:#e8f7ef!important;border-color:#c8e6d5!important;color:var(--g)!important;box-shadow:none!important}.role-title{color:var(--ink)!important;text-shadow:none!important}.role-desc{color:var(--mut)!important;text-shadow:none!important}.hero{background:linear-gradient(135deg,#087d59,#045e44)!important}.trust{color:var(--mut)!important;border-top-color:#dcece2!important}


/* Requested product canvas: native customer/driver/store/admin screens are pure white. */
:root{--paper:#fff}
html,body{background:#fff!important}


/* Luxury identity fallback for standalone mobile pages; full component treatment lives in branding/luxury.css. */
:root{color-scheme:dark;--paper:#0a1a14;--ink:#f6f3ed;--card:#10271e;--mut:#c9c8be;--g:#001F3F;--g2:#001F3F;--ln:rgba(0, 31, 63, .3)}
html,body{background:#0a1a14!important;color:#f6f3ed!important}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


/* Requested brand accents; retain all existing layout and spacing. */
:root{--g:#00A86B;--g2:#00A86B;--amb:#001F3F}
.chip.u,.u,#off,.seg label.ur:has(input:checked){background:#001F3F!important;color:#00A86B!important;border-color:#00A86B!important}