:root{
  --green:#16a34a;--green-l:#22c55e;--green-d:#14532d;--green-bg:#f0fdf4;--green-50:#dcfce7;
  --orange:#f97316;--blue:#3b82f6;--red:#ef4444;
  --gray:#6b7280;--gray-l:#f3f4f6;--gray-b:#e5e7eb;
  --white:#ffffff;--text:#111827;--text2:#374151;--text3:#6b7280;
  --shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.06);
  --r:12px;--rs:8px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:var(--gray-l);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;line-height:1.5;}
.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;}

/* AUTH */
#authScreen{background:var(--white);justify-content:center;align-items:center;padding:24px;}
.auth-box{width:100%;max-width:400px;}
.brand{text-align:center;margin-bottom:28px;}
.brand-icon{width:64px;height:64px;background:var(--green);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:28px;}
.brand-name{font-size:1.6rem;font-weight:800;color::var(--green-d);letter-spacing:-0.5px;}
.brand-tag{font-size:0.83rem;color:var(--textvar(--green-d);letter-spacing:-0.5px;}
.brand-tag{font-size:0.83rem;color:var(--text3);margin-top:2px;}
.auth-card{background:var(--white);border:1px solid var(--gray-b);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-md);}
.auth-tabs{display:flex;background:var(--gray-l);border-radius:var(--rs);padding:4px;margin-bottom:20px;gap:4px;}
.auth-tab{flex:1;padding:9px;border:none;background:transparent;border-radius:6px;font-size:0.85rem;font-weight:600;color:var(--text3);cursor:pointer;transition:all 0.2s;}
.auth-tab.active{background:var(--white);color:var(--green);box-shadow:var(--shadow);}
.fg{margin-bottom:13px;}
.fl{display:block;font-size:0.75rem;font-weight:600;color:var(--text2);margin-bottom:5px;letter-spacing:0.02em;text-transform:uppercase;}
.fi{width:100%;padding:11px 13px;border:1.5px solid var(--gray-b);border-radius:var(--rs);font-size:0.93rem;color:var(--text);background:var(--white);outline:none;transition:border-color 0.2s;}
.fi:focus{border-color:var(--green);}
.fs{width:100%;padding:11px 32px 11px 13px;border:1.5px solid var(--gray-b);border-radius:var(--rs);font-size:0.93rem;color:var(--text);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 10px center;outline:none;appearance:none;}
.btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:13px;border:none;border-radius:var(--rs);font-size:0.93rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover:not(:disabled){background:var(--green-d);}
.btn-outline{background:transparent;color:var(--green);border:1.5px solid var(--green);}
.btn-outline:hover{background:var(--green-bg);}
.btn-red{background:var(--red);color:#fff;}
.btn-orange{background:var(--orange);color:#fff;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-gray{background:var(--gray-l);color:var(--text2);border:1px solid var(--gray-b);}
.btn-sm{padding:7px 13px;font-size:0.8rem;width:auto;}
.amsg{text-align:center;font-size:0.8rem;margin-top:10px;min-height:16px;}
.amsg.err{color:var(--red);}
.amsg.ok{color:var(--green);}

/* APP */
.app-header{background:var(--white);padding:13px 15px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);position:sticky;top:0;z-index:50;}
.app-logo{font-size:1.05rem;font-weight:800;color:var(--green-d);}
.rbadge{font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px;border-radius:20px;margin-left:6px;}
.rbadge.customer{background:var(--green-50);color:var(--green-d);}
.rbadge.rider{background:#dbeafe;color:#1e40af;}
.rbadge.admin{background:#fef3c7;color:#92400e;}
.huser{font-size:0.75rem;color:var(--text3);font-weight:500;}
.lbtn{background:none;border:none;font-size:0.75rem;color:var(--text3);cursor:pointer;padding:6px 10px;border-radius:6px;}
.lbtn:hover{background:var(--gray-l);}

.bnav{background:var(--white);border-top:1px solid var(--gray-b);display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;}
.nbtn{flex:1;display:flex;flex-direction:column;align-items:center;padding:9px 4px 7px;border:none;background:transparent;cursor:pointer;color:var(--text3);font-size:0.56rem;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;transition:color 0.2s;}
.nbtn .ni{font-size:1.25rem;margin-bottom:2px;line-height:1;}
.nbtn.active{color:var(--green);}

.pcontent{flex:1;overflow-y:auto;padding:14px;padding-bottom:78px;}
.view{display:none;}
.view.active{display:block;}

/* CARDS */
.card{background:var(--white);border-radius:var(--r);padding:15px;box-shadow:var(--shadow);margin-bottom:11px;}
.sec{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text3);margin-bottom:9px;margin-top:4px;}
.hero{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;border-radius:var(--r);padding:18px;margin-bottom:12px;}
.hero-title{font-size:1.05rem;font-weight:700;margin-bottom:3px;}
.hero-sub{font-size:0.82rem;opacity:0.9;}

/* STATS */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px;}
.scard{background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);text-align:center;}
.snum{font-size:1.7rem;font-weight:800;color:var(--green);line-height:1;}
.slbl{font-size:0.68rem;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-top:3px;}

/* STATUS */
.sbadge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:0.68rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;}
.s-pending{background:#fef3c7;color:#92400e;}
.s-assigned{background:#dbeafe;color:#1e40af;}
.s-accepted{background:#ede9fe;color:#5b21b6;}
.s-in_progress{background:#fff7ed;color:#c2410c;}
.s-delivered{background:var(--green-50);color:var(--green-d);}
.s-cancelled{background:#fee2e2;color:#991b1b;}

/* ORDER CARDS */
.ocard{background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);margin-bottom:9px;border-left:4px solid var(--gray-b);cursor:pointer;}
.ocard.s-pending{border-left-color:#f59e0b;}
.ocard.s-assigned{border-left-color:var(--blue);}
.ocard.s-accepted{border-left-color:#8b5cf6;}
.ocard.s-in_progress{border-left-color:var(--orange);}
.ocard.s-delivered{border-left-color:var(--green);}
.ocard.s-cancelled{border-left-color:var(--red);}
.oheader{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.oid{font-size:0.68rem;color:var(--text3);font-family:monospace;}
.oaddr{font-size:0.82rem;color:var(--text2);margin-bottom:7px;display:flex;align-items:flex-start;gap:5px;}
.oitems{font-size:0.8rem;color:var(--text2);margin-bottom:8px;}
.oirow{display:flex;gap:5px;padding:2px 0;}
.oidot{color:var(--green);flex-shrink:0;}
.ometa{display:flex;justify-content:space-between;align-items:center;}
.otime{font-size:0.68rem;color:var(--text3);}
.onote{font-size:0.75rem;color:var(--text3);font-style:italic;padding:6px 9px;background:var(--gray-l);border-radius:6px;margin-top:7px;}

/* ITEM ROWS */
.irow{display:flex;gap:7px;align-items:center;margin-bottom:8px;}
.iinput{flex:1;padding:10px 11px;border:1.5px solid var(--gray-b);border-radius:var(--rs);font-size:0.87rem;outline:none;}
.iinput:focus{border-color:var(--green);}
.qinput{width:68px;padding:10px 7px;border:1.5px solid var(--gray-b);border-radius:var(--rs);font-size:0.87rem;outline:none;text-align:center;}
.rmbtn{background:var(--red);color:#fff;border:none;border-radius:6px;width:34px;height:34px;font-size:1.1rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;}

/* PROGRESS */
.pwrap{margin:11px 0;}
.psteps{display:flex;justify-content:space-between;margin-bottom:7px;}
.pstep{text-align:center;flex:1;font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}
.pstep.done{color:var(--green);}
.pstep.act{color:var(--orange);}
.pstep.inact{color:var(--gray-b);}
.pbar{height:6px;background:var(--gray-l);border-radius:3px;overflow:hidden;}
.pfill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-l));border-radius:3px;transition:width 0.4s ease;}

/* INFO ROW */
.ir{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--gray-b);font-size:0.83rem;}
.ir:last-child{border-bottom:none;}
.irl{color:var(--text3);font-weight:500;}
.irv{color:var(--text);font-weight:600;text-align:right;}

/* MODAL */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:none;align-items:flex-end;justify-content:center;}
.moverlay.open{display:flex;}
.modal{background:var(--white);border-radius:var(--r) var(--r) 0 0;width:100%;max-width:500px;padding:20px;max-height:85vh;overflow-y:auto;}
.mtitle{font-size:1rem;font-weight:700;margin-bottom:14px;}
.mactions{display:flex;gap:8px;margin-top:14px;}
.sopt{padding:11px 13px;border:1.5px solid var(--gray-b);border-radius:var(--rs);margin-bottom:8px;cursor:pointer;font-size:0.88rem;transition:all 0.2s;display:flex;justify-content:space-between;align-items:center;}
.sopt:hover,.sopt.selected{border-color:var(--green);background:var(--green-bg);}

/* TOAST */
.toast{position:fixed;top:78px;left:50%;transform:translateX(-50%) translateY(-10px);background:var(--text);color:#fff;padding:10px 18px;border-radius:20px;font-size:0.83rem;font-weight:500;z-index:1000;opacity:0;transition:all 0.3s;pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.ok{background:var(--green);}
.toast.err{background:var(--red);}

/* MISC */
.chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:0.72rem;font-weight:600;}
.chip-g{background:var(--green-50);color:var(--green-d);}
.chip-gy{background:var(--gray-l);color:var(--text2);}
.chip-r{background:#fee2e2;color:#991b1b;}
.empty{text-align:center;padding:38px 20px;color:var(--text3);}
.empty-ic{font-size:2.4rem;margin-bottom:10px;}
.empty-tx{font-size:0.88rem;}
.div{height:1px;background:var(--gray-b);margin:12px 0;}
.fw7{font-weight:700;}
.fw6{font-weight:600;}
.fb{display:flex;justify-content:space-between;align-items:center;}
.txt3{color:var(--text3);}
.txsm{font-size:0.8rem;}
.mt12{margin-top:12px;}
.mt8{margin-top:8px;}
.sbox{width:100%;padding:10px 13px 10px 36px;border:1.5px solid var(--gray-b);border-radius:var(--rs);font-size:0.88rem;outline:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 11px center;margin-bottom:11px;}

/* Loading/Error fallback */
.js-error{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;padding:20px;color:var(--red);display:none;}