:root {
  --navy: #094D82; --navy-deep: #134570; --sky: #13A5DF; --magenta: #DF4F8A; --purple: #B4519F;
  --orange: #ED6825; --gold: #F7B718;
  --ink: #0f2a40; --muted: #5b7186; --line: #dbe4ec; --bg: #f4f7fa; --card: #fff;
  --green: #1f9d55; --yellow: #f2b600; --red: #d93025; --gray: #8a9aa8;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; font-family: Montserrat, system-ui, sans-serif; color: var(--ink); background: var(--navy-deep); overflow: hidden; }
button { font: inherit; cursor: pointer; }
#map { position: fixed; inset: 0; z-index: 1; background: #cfd8df; }
.hidden { display: none !important; }

/* top */
.topbar { position: fixed; z-index: 500; top: calc(8px + var(--safe-t)); left: 8px; right: 8px; display: flex; align-items: center; gap: 8px;
  background: rgba(9, 77, 130, .94); border-radius: 16px; padding: 6px; box-shadow: 0 4px 16px rgba(9, 37, 66, .35); }
.badge { width: 34px; height: 34px; border-radius: 50%; }
.mode { flex: 1; display: flex; background: rgba(255,255,255,.14); border-radius: 12px; padding: 3px; }
.mode button { flex: 1; border: 0; background: transparent; color: #fff; font-weight: 700; padding: 9px 4px; border-radius: 9px; font-size: 14px; }
.mode button.on { background: #fff; color: var(--navy); }
.iconbtn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; }
.iconbtn svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.subbar { position: fixed; z-index: 500; top: calc(64px + var(--safe-t)); left: 8px; right: 8px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.subbar > * { pointer-events: auto; }
.chip { border: 0; background: #fff; color: var(--navy); font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(9,37,66,.25); max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { display: flex; gap: 4px; background: #fff; padding: 5px 6px; border-radius: 999px; box-shadow: 0 2px 8px rgba(9,37,66,.25); }
.stats .s { min-width: 26px; text-align: center; font-weight: 800; font-size: 13px; color: #fff; border-radius: 999px; padding: 3px 6px; }
.s.g { background: var(--green); } .s.y { background: var(--yellow); color: #3a2c00 !important; } .s.r { background: var(--red); }
.queue { background: var(--orange); color: #fff; font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: 999px; }

/* fabs */
.fabs { position: fixed; z-index: 500; right: 12px; bottom: calc(92px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fab { width: 54px; height: 54px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 14px rgba(9,37,66,.3); display: grid; place-items: center; color: var(--navy); font-weight: 800; font-size: 18px; }
.fab.small { width: 44px; height: 44px; font-size: 16px; }
.fab svg { width: 24px; height: 24px; stroke: var(--navy); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fab.following { background: var(--sky); } .fab.following svg { stroke: #fff; }

/* bottom */
.bottombar { position: fixed; z-index: 500; left: 8px; right: 8px; bottom: calc(10px + var(--safe-b)); display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(9,37,66,.3); }
.quick { display: flex; align-items: center; gap: 10px; flex: 1; }
.quick input { display: none; }
.track { width: 48px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: background .18s; flex: none; }
.knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .18s; }
.quick input:checked + .track { background: var(--orange); }
.quick input:checked + .track .knob { left: 23px; }
.qlabel { font-weight: 700; font-size: 14px; line-height: 1.1; }
.qlabel small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.gps { font-size: 12px; color: var(--muted); text-align: right; font-weight: 600; }
.gps.good { color: var(--green); } .gps.weak { color: var(--orange); } .gps.bad { color: var(--red); }
.hint { position: fixed; z-index: 400; left: 50%; transform: translateX(-50%); bottom: calc(80px + var(--safe-b)); background: rgba(15,42,64,.82); color: #fff;
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; pointer-events: none; transition: opacity .4s; white-space: nowrap; }

/* sheets */
.scrim { position: fixed; inset: 0; z-index: 900; background: rgba(9, 37, 66, .25); }
.sheet { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + var(--safe-b));
  box-shadow: 0 -8px 24px rgba(9,37,66,.25); max-height: 82vh; overflow-y: auto; animation: up .2s ease; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.grab { width: 44px; height: 5px; background: var(--line); border-radius: 3px; margin: 2px auto 10px; }
.sheet h3 { margin: 4px 0 10px; font-size: 18px; color: var(--navy); }
.addr { font-size: 18px; font-weight: 800; color: var(--navy); margin: 0; }
.addr-sub { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.tag { font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.tag.customer { background: #e3efff; color: #1d4ed8; border-color: #bcd3fb; }
.tag.postcard { background: #f6e8f4; color: var(--purple); border-color: #e8c8e3; }
.tag.visited { background: #eef1f4; color: #44566a; }
.tag.dnk { background: #222; color: #fff; border-color: #222; }
.tag.crm { background: #fff1e8; color: #b5480f; border-color: #fbd3bb; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.act { border: 0; border-radius: 14px; padding: 16px 10px; font-weight: 800; font-size: 15px; background: var(--navy); color: #fff; min-height: 58px; }
.act.default { background: var(--orange); }
.act:active { transform: scale(.98); }
.row { display: flex; gap: 8px; align-items: center; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 700; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.danger { color: var(--red); }
.section-t { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.hist { list-style: none; padding: 0; margin: 0; }
.hist li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.hist li small { color: var(--muted); display: block; font-size: 12px; }
.muted { color: var(--muted); font-size: 13px; }
textarea, input[type=text], select { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.prox { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 3px; }
.prox.green { background: var(--green); } .prox.yellow { background: var(--yellow); } .prox.red { background: var(--red); } .prox.nogps { background: var(--gray); }
.menu-head { padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head small { display: block; color: var(--muted); }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 14px 4px; font-weight: 700; color: var(--navy); font-size: 16px; border-bottom: 1px solid var(--line); }
.legend-grid { display: grid; gap: 10px; font-size: 14px; }
.legend-grid div { display: flex; align-items: center; gap: 10px; }
.dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.pin-green { background: var(--green); } .pin-yellow { background: var(--yellow); } .pin-red { background: var(--red); }
.h-customer { background: #1d4ed8; } .h-visited { background: var(--gray); } .h-postcard { background: var(--purple); } .h-contact { background: var(--orange); } .h-dnk { background: #111; }

/* toast */
.toast { position: fixed; z-index: 1100; left: 10px; right: 10px; bottom: calc(80px + var(--safe-b)); background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.3); font-size: 14px; font-weight: 600; }
.toast .grow { flex: 1; }
.toast button { border: 0; background: rgba(255,255,255,.16); color: #fff; font-weight: 800; padding: 8px 12px; border-radius: 10px; }

/* boot */
.boot { position: fixed; inset: 0; z-index: 2000; background: linear-gradient(135deg, #134570, #13A5DF); display: grid; place-content: center; text-align: center; color: #fff; }
.boot img { width: min(260px, 70vw); }
.boot p { font-weight: 600; opacity: .9; }

/* map markers */
.pm { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4); }
.pm.today { border-width: 3px; }
.pm .n { color: #fff; font: 800 10px/1 Montserrat, sans-serif; display: grid; place-items: center; height: 100%; }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sky); border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(19,165,223,.4), 0 1px 4px rgba(0,0,0,.4); }
.leaflet-control-attribution { font-size: 9px; }

.subbar.sub2 { top: calc(104px + var(--safe-t)); }
.chip.terr { display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 16px); }
.chip.terr .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.tbar { width: 70px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; flex: none; }
.tbar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .3s; }
.tnum { font-weight: 800; color: var(--ink); white-space: nowrap; }
.terr-label { background: rgba(255,255,255,.9); border: 0; border-radius: 6px; font: 700 11px Montserrat, sans-serif; color: var(--navy); padding: 2px 6px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.terr-label:before { display: none; }

.walkbtn { border: 2px solid var(--navy); background: #fff; color: var(--navy); font-weight: 800; border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.walkbtn.on { background: var(--navy); color: #fff; }
.walkpanel { position: fixed; z-index: 600; left: 8px; right: 8px; bottom: calc(76px + var(--safe-b)); display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 6px 20px rgba(9,37,66,.35); border: 2px solid var(--orange); }
.walkpanel .wtxt { flex: 1; min-width: 0; }
.walkpanel .wtxt b { display: block; font-size: 16px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walkpanel .wtxt small { color: var(--muted); font-size: 12px; }
.walkpanel .act { min-height: 52px; padding: 12px 16px; flex: none; }
.walkpanel .act:disabled { opacity: .45; }
body.walking .fabs { bottom: calc(160px + var(--safe-b)); }
body.walking .hint { display: none; }
.bm { width: 14px; height: 14px; border-radius: 3px; background: var(--navy); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.bm.done { background: var(--gray); }
.biz-label { background: rgba(9,77,130,.9); color: #fff; border: 0; border-radius: 6px; font: 700 10px Montserrat, sans-serif; padding: 2px 5px; box-shadow: none; }
.biz-label:before { display: none; }
.h-biz { background: var(--navy); border-radius: 3px; }
.zone-swatch { width: 22px; height: 14px; border-radius: 3px; display: inline-block; background: repeating-linear-gradient(45deg, rgba(217,48,37,.35) 0 4px, rgba(217,48,37,.1) 4px 8px); border: 2px solid var(--red); }
.target-ring { border-radius: 50%; border: 3px solid var(--orange); animation: pulse 1.2s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.formgrid { display: grid; gap: 8px; }
.formgrid label { font-size: 12px; font-weight: 700; color: var(--muted); display: grid; gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 12px; font-weight: 700; color: var(--navy); }
.chips button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.photo-prev { max-width: 100%; max-height: 160px; border-radius: 10px; margin-top: 6px; }
body.walking .toast { bottom: calc(166px + var(--safe-b)); }