:root{
  --navy:#0D1F3C; --navy2:#1B2B4D; --crimson:#C41E3A; --maroon:#8B0000;
  --bg:#F7F8FA; --card:#fff; --border:#E2E5EA; --text:#111827; --muted:#6B7280;
  --green:#16A34A; --amber:#D97706; --red:#DC2626;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:'Plus Jakarta Sans',system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);
  -webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom)}
.appbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  background:var(--navy);color:#fff;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top))}
.brand{font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;letter-spacing:.2px} .brand b{color:var(--crimson)}
.net{font-size:12px;color:var(--green)} .net.off{color:var(--red)}
#main{padding:18px;max-width:560px;margin:0 auto}
.screen{display:none;animation:fade .2s ease} .screen.active{display:block}
@keyframes fade{from{opacity:.4}to{opacity:1}}
h1{font-family:'Space Grotesk',system-ui,sans-serif;font-size:22px;margin:6px 0 14px}
.sub{color:var(--muted);margin:-8px 0 14px;font-size:14px}
label{display:block;margin:0 0 14px;font-size:13px;font-weight:600;color:#374151}
input,select{display:block;width:100%;margin-top:6px;padding:13px 14px;font-size:16px;border:1px solid var(--border);
  border-radius:11px;background:#fff;color:var(--text);font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--navy2);box-shadow:0 0 0 3px rgba(27,43,77,.12)}
button{width:100%;padding:15px;font-size:16px;font-weight:700;border:0;border-radius:12px;cursor:pointer;margin-top:6px;font-family:inherit}
button.primary{background:var(--crimson);color:#fff} button.primary:active{background:var(--maroon)}
button.ghost{background:#fff;color:var(--navy);border:1px solid var(--border)}
button.back{width:auto;background:none;color:var(--muted);padding:6px 0;font-weight:600;margin-bottom:8px;font-size:14px}
.msg{min-height:20px;font-size:14px;margin-top:10px} .msg.err{color:var(--red)} .msg.ok{color:var(--green)}
.cfg{margin-bottom:14px} .cfg summary{color:var(--muted);font-size:13px;cursor:pointer}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.card .row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;border-bottom:1px solid #F1F3F5}
.card .row:last-child{border-bottom:0} .card .row .k{color:var(--muted)} .card .row .v{font-weight:600}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.b-created{background:#EEF2FF;color:#3730A3}.b-in_transit{background:#FEF3C7;color:#92400E}
.b-alert{background:#FEE2E2;color:#991B1B}.b-delivered{background:#DCFCE7;color:#166534}.b-loading{background:#E0F2FE;color:#075985}
.actions button{margin-top:10px}
.list .item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-top:10px;display:flex;justify-content:space-between;align-items:center}
.list .item b{font-family:'Space Grotesk',sans-serif}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 14px} .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--border)}
.photo input{padding:10px} .gps{font-size:13px;color:var(--muted);margin-bottom:8px} .gps span{font-weight:600;color:var(--text)}
.variance{font-size:14px;font-weight:700;margin:-6px 0 14px}
.variance.NORMAL{color:var(--green)}.variance.ELEVATED{color:var(--amber)}.variance.HIGH{color:#B45309}.variance.CRITICAL{color:var(--red)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(40px);background:#111827;color:#fff;
  padding:12px 18px;border-radius:12px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;max-width:90%;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.queued{font-size:12px;color:var(--amber);margin-top:8px}