:root{
  --green:#0f7a3d; --green-dark:#0a5c2d; --bg:#f4f6f4; --card:#fff;
  --ink:#16201a; --muted:#68766d; --line:#e2e7e3; --warn:#b35309; --red:#c0392b;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
  padding-bottom:90px;
}
a{color:var(--green)}
header{
  background:var(--green); color:#fff; padding:12px 16px;
  display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20;
}
header h1{font-size:17px; margin:0; font-weight:650; flex:1}
header .sub{font-size:12px; opacity:.85; font-weight:400; display:block}
.roleswitch{display:flex; gap:6px; flex-wrap:wrap}
.roleswitch a{
  color:#fff; background:rgba(255,255,255,.16); text-decoration:none;
  padding:5px 10px; border-radius:999px; font-size:12px;
}
.roleswitch a.on{background:#fff; color:var(--green); font-weight:600}
main{max-width:860px; margin:0 auto; padding:14px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px;
}
.card h2{margin:0 0 10px; font-size:15px}
.card h3{margin:14px 0 6px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.row{display:flex; gap:10px; align-items:center}
.row.between{justify-content:space-between}
.grow{flex:1}
.muted{color:var(--muted); font-size:13px}
.small{font-size:12px}
button, .btn{
  background:var(--green); color:#fff; border:0; border-radius:10px;
  padding:10px 14px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
button:disabled{background:#b9c4bd; cursor:not-allowed}
button.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
button.danger{background:var(--red)}
button.warn{background:var(--warn)}
button.sm{padding:6px 10px; font-size:13px; border-radius:8px}
input, select, textarea{
  font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line);
  border-radius:10px; width:100%; background:#fff; color:var(--ink);
}
label{display:block; font-size:12px; color:var(--muted); margin:8px 0 3px}
.storecard{
  display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; margin-bottom:10px; cursor:pointer;
}
.storecard:hover{border-color:var(--green)}
.storecard.on{border-color:var(--green); box-shadow:0 0 0 2px rgba(15,122,61,.13)}
.logo{
  width:44px; height:44px; border-radius:11px; background:var(--green); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:16px; flex:none;
}
.chips{display:flex; gap:6px; overflow-x:auto; padding:8px 0; -webkit-overflow-scrolling:touch}
.chip{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 12px;
  font-size:13px; white-space:nowrap; cursor:pointer; color:var(--ink);
}
.chip.on{background:var(--green); color:#fff; border-color:var(--green)}
.prod{
  display:flex; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line);
}
.prod:last-child{border-bottom:0}
.prod .emoji{font-size:26px; width:38px; text-align:center; flex:none}
.prod .nm{font-weight:600; font-size:14px}
.price{font-weight:700; white-space:nowrap}
.was{text-decoration:line-through; color:var(--muted); font-weight:400; font-size:12px; margin-right:5px}
.qty{display:flex; align-items:center; gap:8px}
.qty button{width:32px; height:32px; padding:0; border-radius:8px; font-size:17px; line-height:1}
.tag{
  display:inline-block; font-size:11px; padding:2px 7px; border-radius:999px;
  background:#eef3ef; color:var(--muted); margin-left:6px;
}
.tag.risk{background:#fdf0e3; color:var(--warn)}
.tag.bad{background:#fbeae8; color:var(--red)}
.tag.good{background:#e8f4ec; color:var(--green-dark)}
.tag.age{background:#fbeae8; color:var(--red)}
.cartbar{
  position:fixed; left:0; right:0; bottom:0; background:var(--green); color:#fff;
  padding:12px 16px; display:flex; align-items:center; gap:12px; z-index:30;
}
.cartbar .grow b{display:block; font-size:16px}
.cartbar button{background:#fff; color:var(--green)}
.slot{
  border:1px solid var(--line); border-radius:11px; padding:10px 12px; margin-bottom:8px;
  cursor:pointer; background:#fff;
}
.slot.on{border-color:var(--green); box-shadow:0 0 0 2px rgba(15,122,61,.13)}
.slot.full{opacity:.45; cursor:not-allowed}
.slot .when{font-weight:600}
.pay{display:flex; gap:10px; margin:6px 0}
.pay div{
  flex:1; border:1px solid var(--line); border-radius:11px; padding:12px; text-align:center;
  cursor:pointer; background:#fff; font-weight:600;
}
.pay div.on{border-color:var(--green); background:#eef7f1}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:7px 6px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:12px}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
.banner{
  border-radius:11px; padding:11px 13px; margin-bottom:12px; font-size:13px;
  background:#fdf0e3; color:#7a3c06; border:1px solid #f3dcc1;
}
.banner.bad{background:#fbeae8; color:#8c241a; border-color:#f0cfca}
.banner.ok{background:#e8f4ec; color:var(--green-dark); border-color:#c9e4d3}
.bar{height:7px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:5px}
.bar i{display:block; height:100%; background:var(--green)}
.bar i.hot{background:var(--warn)}
.bar i.full{background:var(--red)}
.pill{font-size:11px; padding:3px 9px; border-radius:999px; background:#eef3ef; color:var(--muted)}
.pill.placed{background:#e7eef8; color:#1e4b8f}
.pill.picking{background:#fdf0e3; color:var(--warn)}
.pill.picked{background:#f0ecfa; color:#5a3fa8}
.pill.out_for_delivery{background:#e3f1f7; color:#0d6280}
.pill.delivered{background:#e8f4ec; color:var(--green-dark)}
.pill.refused{background:#fbeae8; color:var(--red)}
.empty{text-align:center; color:var(--muted); padding:28px 12px; font-size:14px}
dialog{border:0; border-radius:var(--radius); padding:0; max-width:420px; width:92%}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog .inner{padding:16px}
.mapbox{
  position:relative; height:170px; border-radius:11px; overflow:hidden; cursor:crosshair;
  background:linear-gradient(#dfe9e0,#cfe0d3); border:1px solid var(--line);
}
.mapbox .grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(#b9cdbe 1px,transparent 1px),linear-gradient(90deg,#b9cdbe 1px,transparent 1px);
  background-size:34px 34px}
.mapbox .pin{position:absolute; transform:translate(-50%,-100%); font-size:26px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.mapbox .hint{position:absolute; left:8px; bottom:8px; background:rgba(255,255,255,.9);
  border-radius:8px; padding:4px 8px; font-size:11px; color:var(--muted)}