:root{
  --bg:#fff; --fg:#111;
  --muted:#6b7280; --card:#f3f4f6;
  --accent:#e8501f; --accent-fg:#fff;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --line:rgba(127,127,127,.25);
}
@media (prefers-color-scheme:dark){ :root{ --bg:#111418; --fg:#f3f4f6; --muted:#9ca3af; --card:#1b2027; } }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button,input,textarea,select{font:inherit;color:inherit}
.screen{max-width:640px;margin:0 auto;padding:12px 16px 96px}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.top h1{font-size:18px;margin:0}
.muted{color:var(--muted);font-size:13px}
.progress{height:8px;background:var(--card);border-radius:99px;overflow:hidden;margin:6px 0 12px}
.progress i{display:block;height:100%;background:var(--ok)}
.row{display:flex;gap:8px}
.btn{min-height:48px;border:0;border-radius:12px;padding:0 16px;background:var(--accent);color:var(--accent-fg);font-weight:600;cursor:pointer}
.btn.sec{background:var(--card);color:var(--fg)}
.btn.bad{background:var(--bad);color:#fff}
.btn.block{width:100%}
.btn:disabled{opacity:.5}
.field{width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
textarea.field{min-height:72px;resize:vertical}
label.l{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:6px 12px;font-size:14px;cursor:pointer}
.chip.on{background:var(--accent);color:var(--accent-fg);border-color:transparent}
.card{background:var(--card);border-radius:14px;padding:12px;margin:8px 0;cursor:pointer}
.card .h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.card b{font-size:15px}.card .addr{font-size:13px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{font-size:12px;border-radius:99px;padding:2px 8px;white-space:nowrap;font-weight:600}
.b-Pending{background:rgba(217,119,6,.15);color:var(--warn)}.b-Delivered{background:rgba(22,163,74,.15);color:var(--ok)}
.b-Failed{background:rgba(220,38,38,.15);color:var(--bad)}.b-Queued{background:rgba(59,130,246,.15);color:#3b82f6}
.banner{border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px}
.banner.warn{background:rgba(217,119,6,.15)}.banner.bad{background:rgba(220,38,38,.15)}.banner.info{background:rgba(59,130,246,.15)}
.kv{display:grid;grid-template-columns:96px 1fr;gap:4px 10px;font-size:14px;margin:8px 0}.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-word}
a{color:var(--accent)}
.photo{width:100%;border-radius:12px;display:block;margin-top:8px}
.overlay{position:fixed;inset:0;background:#000;color:#fff;z-index:50;display:flex;flex-direction:column}
.overlay video{flex:1;min-height:0;width:100%;object-fit:cover}
.overlay .bar{padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.75);display:flex;gap:8px;align-items:center}
.overlay .bar .field{background:#fff;color:#111;flex:1}
.shutter{width:68px;height:68px;border-radius:50%;border:5px solid #fff;background:rgba(255,255,255,.25);margin:0 auto}
.reticle{position:absolute;left:10%;right:10%;top:30%;height:22%;border:2px solid rgba(255,255,255,.85);border-radius:12px;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.hud{position:absolute;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;font-size:13px;text-shadow:0 1px 2px #000}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#111;color:#fff;border-radius:12px;padding:10px 16px;opacity:0;pointer-events:none;transition:.2s;z-index:99;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.dock{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.dock .in{max-width:640px;margin:0 auto;display:flex;gap:8px}
.card.sel{outline:2px solid var(--accent)}
.area-h{margin:14px 2px 2px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.checks{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:10px;background:var(--card);cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.check .muted{margin-left:auto}