:root{
  --t1:#C00000; --t2:#E8740C; --t3:#B8860B; --t4:#2E8B8B;
  --bg:#f4f5f7; --ink:#1c2330; --muted:#5b6472; --line:#e1e4ea;
  --red:#C0202A; --shadow:0 6px 24px rgba(0,0,0,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);}
#map{position:fixed;inset:0;top:var(--topH,128px);background:#e9e9e6;}

/* ---- top bar ---- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;box-shadow:0 2px 10px rgba(0,0,0,.06);}
.title-wrap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.title{font-weight:800;font-size:15px;color:var(--red);}
.progress{font-size:12px;color:var(--muted);font-weight:600;}
.controls{display:flex;gap:6px;align-items:center;margin-top:7px;flex-wrap:wrap;}
#search{flex:1;min-width:130px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:14px;}
.filters{display:flex;gap:4px;flex-wrap:wrap;}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 10px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.chip.t1{color:var(--t1);} .chip.t2{color:var(--t2);} .chip.t3{color:var(--t3);} .chip.t4{color:var(--t4);}
.chip.t1.on{background:var(--t1);color:#fff;border-color:var(--t1);}
.chip.t2.on{background:var(--t2);color:#fff;border-color:var(--t2);}
.chip.t3.on{background:var(--t3);color:#fff;border-color:var(--t3);}
.chip.t4.on{background:var(--t4);color:#fff;border-color:var(--t4);}
.chip.toggle[data-on="1"]{background:#444;color:#fff;border-color:#444;}
.me,.export{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px;font-size:13px;cursor:pointer;font-weight:600;}
.netstatus{font-size:11px;color:var(--muted);margin-top:4px;min-height:0;}
.netstatus.offline{color:#b8860b;font-weight:700;}
.netstatus.geo{margin-top:2px;}
.netstatus.geo.away{color:#1a73e8;font-weight:700;}
.me.on{background:#1a73e8;color:#fff;border-color:#1a73e8;}

/* live location dot */
.medot{width:16px;height:16px;border-radius:50%;background:#1a73e8;border:3px solid #fff;
  box-shadow:0 0 0 rgba(26,115,232,.5);animation:pulse 1.8s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(26,115,232,.45);}
  70%{box-shadow:0 0 0 16px rgba(26,115,232,0);}
  100%{box-shadow:0 0 0 0 rgba(26,115,232,0);}
}

/* ---- pins ---- */
.pin{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  color:#fff;font-weight:800;font-size:13px;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;}
.pin.t1{background:var(--t1);} .pin.t2{background:var(--t2);} .pin.t3{background:var(--t3);} .pin.t4{background:var(--t4);}
.pin.visited{background:#7a8896 !important;opacity:.92;}
.pin.visited::after{content:"✓";position:absolute;font-size:13px;}
.pin.visited span{display:none;}
.pin.dim{opacity:.18;}
.pin.sel{outline:4px solid rgba(20,68,204,.55);outline-offset:1px;}

/* ---- bottom sheet ---- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#fff;border-radius:18px 18px 0 0;
  box-shadow:var(--shadow);padding:8px 16px calc(env(safe-area-inset-bottom) + 16px);
  transform:translateY(0);transition:transform .25s ease;max-height:74vh;overflow-y:auto;}
.sheet.hidden{transform:translateY(105%);}
.sheet-handle{width:40px;height:5px;border-radius:3px;background:#d4d8df;margin:4px auto 8px;}
.sheet-close{position:absolute;top:10px;right:12px;border:none;background:#f0f1f4;width:30px;height:30px;border-radius:50%;font-size:15px;cursor:pointer;color:var(--muted);}
.sheet-head{display:flex;gap:12px;align-items:flex-start;padding-right:30px;}
.badge{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;background:#888;}
.badge.t1{background:var(--t1);} .badge.t2{background:var(--t2);} .badge.t3{background:var(--t3);} .badge.t4{background:var(--t4);}
.sheet h2{margin:0;font-size:18px;line-height:1.2;}
.smeta{font-size:12.5px;color:var(--muted);margin-top:3px;}
.site-link{display:inline-block;margin:10px 0 2px;font-size:13px;color:#1144CC;text-decoration:none;font-weight:600;}
.swhat{font-size:13.5px;line-height:1.4;margin:8px 0 4px;}
.sproducts{font-size:12.5px;line-height:1.4;color:var(--muted);margin:2px 0 8px;}
.visited-row{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;padding:10px;background:#f6f7f9;border-radius:10px;margin:6px 0;cursor:pointer;}
.visited-row input{width:20px;height:20px;}
.stamp{margin-left:auto;font-size:11px;color:var(--muted);font-weight:500;}
#sNotes{width:100%;min-height:120px;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:14px;font-family:inherit;resize:vertical;}
.savestate{font-size:11.5px;color:var(--muted);margin-top:5px;height:14px;}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:9px 16px;border-radius:20px;font-size:13px;z-index:1500;box-shadow:var(--shadow);}
.toast.hidden{display:none;}
.leaflet-container{background:#e9e9e6;}