:root { --bg:#f6f7f4; --card:#fff; --ink:#1d2a22; --muted:#667569; --brand:#1f7a4d; --brand-ink:#fff; --line:#dfe5df; --warn:#b3261e; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111815; --card:#1a2420; --ink:#e8efe9; --muted:#9bac9f; --brand:#3fae76; --brand-ink:#0b1410; --line:#2b3a33; --warn:#f2877f; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--ink); }
header { background:var(--brand); color:var(--brand-ink); padding:14px 16px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:5; }
header h1 { margin:0; font-size:20px; }
main { max-width:520px; margin:0 auto; padding:16px; }
.hidden { display:none !important; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.card.flat { margin-top:0; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input, select { width:100%; padding:11px; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); }
button { padding:11px 14px; font-size:15px; border:0; border-radius:8px; background:var(--brand); color:var(--brand-ink); cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
button.ghost { background:transparent; color:var(--brand); border:1px solid var(--brand); }
button.ghost.light { color:var(--brand-ink); border-color:var(--brand-ink); padding:7px 12px; }
button.danger { background:transparent; color:var(--warn); border:1px solid var(--warn); }
button.full { width:100%; margin-top:14px; }
.tabs { display:flex; gap:6px; margin-bottom:6px; }
.tabs button { flex:1; background:transparent; color:var(--muted); border:1px solid var(--line); }
.tabs button.on { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.row { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.badge { font-size:12px; padding:3px 8px; border-radius:20px; background:rgba(31,122,77,.14); color:var(--brand); text-transform:capitalize; white-space:nowrap; }
.badge.cancelled { background:rgba(179,38,30,.14); color:var(--warn); }
.badge.delivered { background:var(--line); color:var(--muted); }
.muted { color:var(--muted); font-size:13px; margin-top:3px; }
.err { color:var(--warn); font-size:14px; min-height:20px; margin-top:8px; }
h2 { font-size:16px; margin:18px 0 8px; }
h2.first { margin-top:0; }
.item { font-weight:600; }
.actions { margin-top:10px; display:flex; gap:8px; }
.stats { display:flex; gap:8px; margin-bottom:6px; }
.stat { flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; }
.stat b { display:block; font-size:20px; }
.conn { background:var(--warn); color:#fff; text-align:center; padding:6px; font-size:14px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 16px; border-radius:10px; font-size:15px; max-width:90%; z-index:10; }
a { color:var(--brand); }

/* logo in the header */
header h1 { display:flex; align-items:center; gap:10px; }
.logo { height:34px; width:34px; border-radius:9px; object-fit:contain; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
header .back { color:var(--brand-ink); font-size:14px; }

/* QR poster page */
.poster { text-align:center; }
.poster-logo { height:72px; width:72px; border-radius:16px; object-fit:contain; margin:6px auto 0; display:block; }
.poster-title { font-size:28px; margin:8px 0 0; }
.poster-sub { color:var(--muted); font-size:18px; margin:4px 0 14px; }
.qrbox { width:min(80vw,380px); margin:0 auto; background:#fff; padding:8px; border-radius:14px; border:1px solid var(--line); }
.qrbox svg { display:block; width:100%; height:auto; }
.poster-url { font-size:16px; word-break:break-all; margin:12px 0 18px; }
.poster .card { text-align:left; }
@media print {
  body { background:#fff; color:#000; }
  .noprint { display:none !important; }
  .poster-sub, .poster-url { color:#000; }
  .qrbox { border:0; width:70vw; max-width:none; }
  .poster-title { font-size:44px; }
  .poster-sub { font-size:26px; }
  .poster-url { font-size:22px; }
}

/* navigation */
.nav { display:flex; gap:6px; max-width:520px; margin:0 auto; padding:10px 16px 0; }
.nav button { flex:1; background:transparent; color:var(--muted); border:1px solid var(--line); padding:9px 6px; }
.nav button.on { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.nav.hidden { display:none; }

/* small controls, menus, admin lists */
button.sm { padding:7px 11px; font-size:14px; }
.row.top { align-items:flex-start; }
.menu-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.menu-row.off .item { color:var(--muted); text-decoration:line-through; }
.qty { display:flex; align-items:center; gap:10px; }
.qty b { min-width:18px; text-align:center; }
.total { font-weight:600; margin:12px 0 2px; min-height:20px; }
.grid2 { display:grid; grid-template-columns:1fr 110px; gap:8px; margin:10px 0 8px; }
.stats.wrap { flex-wrap:wrap; }
.stats.wrap .stat { flex:1 1 30%; min-width:96px; font-size:13px; color:var(--muted); }
.stats.wrap .stat b { color:var(--ink); }
.gap > .card { margin-bottom:8px; }
input[type="search"] { margin-bottom:10px; }
form.add-item { margin-top:10px; border-top:1px solid var(--line); padding-top:6px; }
.actions button.sm { flex:0 0 auto; }

/* help line */
.help { display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:520px; margin:0 auto; padding:6px 16px 28px; font-size:14px; }
.help.hidden { display:none; }
.helptitle { font-weight:600; }
.helpbtn { display:inline-block; padding:8px 14px; border-radius:8px; background:var(--brand); color:var(--brand-ink); text-decoration:none; }
.helpbtn.alt { background:transparent; color:var(--brand); border:1px solid var(--brand); }
.helphours { color:var(--muted); width:100%; }

/* sketch map and map places */
.sketch { width:100%; height:auto; display:block; margin:8px 0; }
.sk-bg { fill:var(--bg); stroke:var(--line); }
.sk-line { stroke:var(--brand); stroke-width:3; stroke-dasharray:6 5; stroke-linecap:round; }
.sk-a { fill:var(--brand); }
.sk-b { fill:#ff9a1f; }
.sk-dot { fill:var(--muted); }
.sk-l { fill:#fff; font-size:11px; font-weight:700; }
.sk-t { fill:var(--ink); font-size:10px; }
.sk-n { fill:var(--muted); font-size:10px; }
.actions.wrapx { flex-wrap:wrap; }
.helpbtn.sm { padding:7px 11px; font-size:14px; }
.coords { margin-top:0; }
button.ghost.full { width:100%; margin-top:10px; }

/* home: hero, tiles, progress, stat colours */
.hero { background:linear-gradient(135deg,#2fbf7a,#0c4f31); color:#fff; border-radius:16px; padding:18px 16px; margin-bottom:12px; position:relative; overflow:hidden; box-shadow:0 6px 18px rgba(12,79,49,.25); }
.hero::after { content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.12); }
.hero-hi { font-size:20px; font-weight:700; position:relative; }
.hero-sub { margin-top:4px; font-size:15px; opacity:.92; position:relative; }
.hero-btn { position:absolute; right:12px; bottom:12px; z-index:1; color:#fff; border-color:rgba(255,255,255,.8); }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.tile { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:14px; padding:12px; }
.tile b { font-size:15px; }
.tile small { color:var(--muted); font-size:12px; }
.tile-ico { font-size:28px; line-height:1.1; }
.tile.on { border-color:var(--brand); background:rgba(47,191,122,.12); }
.stat .ico { display:block; font-size:20px; margin-bottom:2px; }
.stat.s1 { border-top:3px solid #2fbf7a; }
.stat.s2 { border-top:3px solid #3b82f6; }
.stat.s3 { border-top:3px solid #ff9a1f; }
.stat.s4 { border-top:3px solid #a855f7; }
.track { display:flex; margin:10px 0 4px; }
.track .step { flex:1; text-align:center; position:relative; font-size:11px; color:var(--muted); }
.track .step i { display:block; width:12px; height:12px; border-radius:50%; background:var(--line); margin:0 auto 4px; position:relative; z-index:1; }
.track .step::before { content:""; position:absolute; top:5px; left:-50%; width:100%; height:2px; background:var(--line); }
.track .step:first-child::before { display:none; }
.track .step.done i, .track .step.now i { background:var(--brand); }
.track .step.done::before, .track .step.now::before { background:var(--brand); }
.track .step.now { color:var(--ink); font-weight:600; }
.track .step.now i { box-shadow:0 0 0 4px rgba(47,191,122,.25); }

/* chat */
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#ff9a1f; margin-left:6px; vertical-align:middle; }
.center { text-align:center; }
.chat-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.chat-who b { font-size:17px; }
.chat-box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; height:min(52vh,420px); overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.bub { max-width:82%; padding:8px 11px; border-radius:14px; white-space:pre-wrap; word-break:break-word; font-size:15px; }
.bub small { display:block; font-size:11px; opacity:.7; margin-top:2px; }
.bub.me { align-self:flex-end; background:var(--brand); color:var(--brand-ink); border-bottom-right-radius:4px; }
.bub.them { align-self:flex-start; background:var(--bg); border:1px solid var(--line); border-bottom-left-radius:4px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 8px; }
.chip { padding:7px 11px; font-size:13px; border-radius:20px; background:transparent; color:var(--brand); border:1px solid var(--brand); }
#chatForm { display:flex; gap:8px; }
#chatForm input { flex:1; }

.credit { text-align:center; color:var(--muted); font-size:12px; padding:4px 16px 24px; }
.poster-credit { color:var(--muted); font-size:13px; margin:-8px 0 18px; }
@media print { .poster-credit { color:#000; font-size:18px; } .credit { color:#000; } }

/* money, payments, ratings */
.feebox { margin:10px 0 2px; padding:10px 12px; border-radius:10px; background:rgba(47,191,122,.10); font-size:15px; }
.ok { color:var(--brand); }
.warnc { color:var(--warn); }
.paybox { margin-top:10px; padding:10px 12px; border:1px dashed var(--brand); border-radius:10px; background:rgba(47,191,122,.08); font-size:14px; }
.paybox .row input { flex:1; }
.paynote { margin-top:8px; padding:8px 10px; border-radius:8px; font-size:14px; background:var(--bg); border:1px solid var(--line); }
.paynote.ok { border-color:var(--brand); color:var(--brand); }
.paynote.warn { border-color:var(--warn); color:var(--warn); }
.rate { display:flex; align-items:center; gap:4px; margin-top:8px; font-size:14px; }
.rate span { margin-right:6px; }
button.star { padding:2px 6px; font-size:24px; background:transparent; color:#ff9a1f; border:0; line-height:1; }
.starline { color:#ff9a1f; }
.earn .row { align-items:baseline; }
.bal { font-size:22px; font-weight:700; color:var(--brand); }
.earn.neg .bal { color:var(--warn); }
.howto ol { margin:8px 0 12px; padding-left:20px; font-size:15px; }
.howto li { margin-bottom:4px; }
h3 { font-size:14px; margin:14px 0 6px; color:var(--muted); }
.hero.hasbtn .hero-hi, .hero.hasbtn .hero-sub { padding-right:96px; }
.hero.hasbtn .hero-btn { top:12px; bottom:auto; }

/* "Share my exact location" on the order form */
.pinrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 4px; }
.pinrow span { flex:1 1 180px; font-size:13px; }

/* "Share wee-deliver" QR code */
.sharebar { text-align:center; padding:0 16px 8px; }
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:20; }
.sheet-card { background:var(--card); color:var(--ink); border-radius:14px; padding:18px; width:100%; max-width:380px; max-height:100%; overflow:auto; text-align:center; }
.sheet-card .qrbox { width:min(70vw,280px); }
@media print { .sharebar, .sheet { display:none !important; } }

/* Privacy & Terms page and sign-up note */
.legal { max-width:680px; margin:0 auto; padding:16px; line-height:1.55; }
.legal h2 { margin-top:22px; }
.legal ul { padding-left:20px; }
.legal li { margin-bottom:6px; }
.small-note { font-size:13px; margin:10px 0 0; }
.credit a { color:inherit; }

/* Loading screen with the animated logo */
.splash { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--bg); transition:opacity .4s ease, visibility .4s; animation:sp-failsafe 0s linear 8s forwards; }
.splash.gone { opacity:0; visibility:hidden; }
.splash-logo { width:min(34vw,150px); height:auto; filter:drop-shadow(0 10px 22px rgba(12,79,49,.28)); animation:sp-float 2.4s ease-in-out infinite; }
.splash-name { font-size:22px; font-weight:700; letter-spacing:.3px; color:var(--brand); opacity:0; animation:sp-fade .6s ease .5s forwards; }
.sp-route { stroke-dasharray:100; stroke-dashoffset:100; animation:sp-draw 2.4s ease-in-out infinite; }
.sp-pin { transform-box:fill-box; transform-origin:50% 100%; opacity:0; animation:sp-pin 2.4s ease-in-out infinite; }
@keyframes sp-draw { 0% { stroke-dashoffset:100; opacity:1; } 45% { stroke-dashoffset:0; opacity:1; } 85% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes sp-pin {
  0%, 38% { opacity:0; transform:translateY(-60px) scale(.6); }
  50% { opacity:1; transform:translateY(0) scale(1.08, .92); }
  58% { transform:translateY(-14px) scale(.97, 1.04); }
  66%, 85% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(0) scale(1); }
}
@keyframes sp-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes sp-fade { to { opacity:1; } }
@keyframes sp-failsafe { to { opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .sp-route, .sp-pin, .splash-name { animation:none; opacity:1; stroke-dashoffset:0; transform:none; }
}

/* "Forgot password?" */
.linkbtn { background:none; border:0; padding:6px 0 0; color:var(--brand); text-decoration:underline; font-size:14px; cursor:pointer; }
.helpbtn.full-link { display:block; text-align:center; margin-top:12px; }