:root{
  --bg:#080b10; --bg2:#0d1219; --card:#131a24; --card2:#1a2431; --card3:#212d3c;
  --line:#1f2b3a; --line2:#2b3b4f;
  --txt:#e9eff7; --dim:#93a5bb; --dim2:#61748c;
  --acc:#25d9a4; --acc2:#12a3e8; --warn:#f5a623; --bad:#f2555a; --gold:#fbbf24;
  --r:16px; --sh:0 6px 26px rgba(0,0,0,.45);
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--bg);color:var(--txt);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  overscroll-behavior-y:contain;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input{font:inherit;color:inherit}
svg{display:block}
.hide{display:none!important}

/* ---------- shell ---------- */
#app{min-height:100vh;padding-bottom:calc(66px + var(--sab))}
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:11px;
  padding:calc(9px + var(--sat)) 14px 9px;
  background:rgba(8,11,16,.92);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.logo{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--acc),var(--acc2));color:#04120e;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(37,217,164,.25);
}
.logo svg{width:19px;height:19px}
.brand{font-weight:700;font-size:16.5px;letter-spacing:-.35px;line-height:1.15}
.brand small{display:block;font-weight:500;font-size:10.5px;color:var(--dim2);margin-top:2px}
.spacer{flex:1}
.iconbtn{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--dim);flex:0 0 auto;
}
.iconbtn svg{width:18px;height:18px}
.iconbtn:active{transform:scale(.93);background:var(--card2)}
.iconbtn.on{color:#7dd3fc;border-color:rgba(18,163,232,.45);background:rgba(18,163,232,.12)}
.iconbtn.busy{color:#7dd3fc;animation:locspin 1.1s linear infinite}
@keyframes locspin{50%{opacity:.35}}
.live{
  display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  background:rgba(37,217,164,.12);border:1px solid rgba(37,217,164,.3);
  font-size:11px;font-weight:700;color:var(--acc);
}
.live i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.view{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- search ---------- */
.searchwrap{position:relative;padding:12px 14px 6px}
.searchbox{display:flex;align-items:center;gap:8px;position:relative}
.sic{width:18px;height:18px;color:var(--dim2);position:absolute;left:14px;pointer-events:none;z-index:2}
#q{
  flex:1;min-width:0;height:48px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:0 42px 0 42px;font-size:15px;outline:0;
  transition:border-color .16s,background .16s;
}
#q::placeholder{color:var(--dim2)}
#q:focus{border-color:rgba(37,217,164,.55);background:var(--bg2)}
#q::-webkit-search-cancel-button{display:none}
.qclear{
  position:absolute;right:62px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--card3);color:var(--dim);z-index:2;
}
.qclear svg{width:12px;height:12px}
.gobtn{
  width:48px;height:48px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acc),var(--acc2));color:#04120e;
  box-shadow:0 4px 16px rgba(37,217,164,.28);
}
.gobtn svg{width:20px;height:20px}
.gobtn:active{transform:scale(.93)}
.gobtn:disabled{opacity:.5;box-shadow:none}

.sugg{
  position:absolute;left:14px;right:14px;top:64px;z-index:70;
  background:var(--card2);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--sh);overflow:hidden;max-height:55vh;overflow-y:auto;
}
.sugg button{
  display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;text-align:left;
  font-size:14px;border-bottom:1px solid rgba(255,255,255,.045);
}
.sugg button:last-child{border:0}
.sugg button:active{background:rgba(37,217,164,.09)}
.sugg svg{width:15px;height:15px;color:var(--dim2);flex:0 0 auto}
.sugg b{color:var(--acc);font-weight:600}

.lochint{
  display:flex;align-items:center;gap:8px;margin:8px 14px 0;padding:9px 12px;
  background:rgba(18,163,232,.09);border:1px solid rgba(18,163,232,.28);
  border-radius:11px;font-size:12.5px;color:#a8dcf7;line-height:1.35;
}
.lochint svg{width:14px;height:14px;flex:0 0 auto;color:#5fc4f0}
.lochint b{color:#e2f6ff;font-weight:650}
.lochint .x{margin-left:auto;color:#5fc4f0;font-size:16px;line-height:1;padding:0 2px}

.opts{display:flex;gap:8px;margin:11px 14px 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.opts::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:11px;
  background:var(--card);border:1px solid var(--line);font-size:12.5px;font-weight:550;
  color:var(--dim);white-space:nowrap;flex:0 0 auto;transition:.15s;
}
.chip svg{width:14px;height:14px}
.chip.on{background:rgba(37,217,164,.13);border-color:rgba(37,217,164,.42);color:var(--acc)}
.chip:active{transform:scale(.96)}
.chip.sel{color:var(--txt);border-color:var(--line2)}.chip.sel svg{width:13px;height:13px;color:var(--dim2)}
.chip.gps.on{background:rgba(18,163,232,.14);border-color:rgba(18,163,232,.45);color:#7dd3fc}
#chipnear.on{background:rgba(18,163,232,.14);border-color:rgba(18,163,232,.45);color:#7dd3fc}

/* baris radius (muncul kalau lokasi GPS aktif) */
.radrow{display:flex;gap:7px;margin:9px 14px 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.radrow::-webkit-scrollbar{display:none}
.rchip{flex:0 0 auto;padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:650;
  background:var(--card);border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.rchip.on{background:rgba(18,163,232,.16);border-color:rgba(18,163,232,.45);color:#7dd3fc}
.rlbl{display:flex;align-items:center;font-size:11px;font-weight:700;color:var(--dim2);
  text-transform:uppercase;letter-spacing:.5px;padding-right:2px}

/* ---------- progress ---------- */
.prog{margin:12px 14px 0;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.proghead{display:flex;align-items:center;gap:11px}
.spinner{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  border:2.4px solid rgba(37,217,164,.22);border-top-color:var(--acc);animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.progtxt{flex:1;min-width:0}
.progtxt b{display:block;font-size:13.5px;font-weight:650}
.progtxt span{display:block;font-size:11.5px;color:var(--dim2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .45s ease}
.progfoot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.progfoot span{font-size:12px;color:var(--dim);font-weight:550}
.stopbtn{font-size:12px;font-weight:650;color:#ff9b9e;padding:6px 12px;border-radius:9px;
  background:rgba(242,85,90,.12);border:1px solid rgba(242,85,90,.3)}
.stopbtn:active{transform:scale(.95)}

/* ---------- empty ---------- */
.empty{text-align:center;padding:42px 26px 26px;color:var(--dim2)}
.empty .big{width:64px;height:64px;margin:0 auto 16px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);display:grid;place-items:center}
.empty .big svg{width:30px;height:30px}
.empty h3{margin:0 0 7px;font-size:15px;color:var(--dim);font-weight:650}
.empty p{margin:0;font-size:12.5px;line-height:1.6}
.empty p b{color:var(--dim);font-weight:600}
.examples{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:18px}
.examples button{padding:8px 13px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:12px;color:var(--dim)}
.examples button:active{transform:scale(.95);border-color:rgba(37,217,164,.4);color:var(--acc)}

/* ---------- results ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 14px 10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 6px;text-align:center}
.stat b{display:block;font-size:19px;letter-spacing:-.6px;line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:9.5px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.6px;margin-top:3px;font-weight:600}
.stat.g b{color:var(--acc)} .stat.y b{color:var(--gold)} .stat.b b{color:#7dd3fc}
.stats.four{grid-template-columns:repeat(4,1fr)}

.resultbar{position:sticky;top:calc(53px + var(--sat));z-index:40;
  background:rgba(8,11,16,.95);backdrop-filter:blur(14px);padding:6px 14px 10px;
  border-bottom:1px solid var(--line)}
.filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
.filters::-webkit-scrollbar{display:none}
.fchip{padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  font-size:12px;font-weight:550;color:var(--dim);white-space:nowrap;flex:0 0 auto}
.fchip.on{background:rgba(37,217,164,.14);border-color:rgba(37,217,164,.42);color:var(--acc)}
.exportrow{display:flex;gap:7px}
.xbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;
  background:var(--card2);border:1px solid var(--line2);font-size:11.5px;font-weight:600;
  color:var(--dim);text-decoration:none}
.xbtn svg{width:13px;height:13px}
.xbtn:active{transform:scale(.96)}
.xbtn:first-child{color:#7ee9c4;border-color:rgba(37,217,164,.3);background:rgba(37,217,164,.09)}

#groups{padding:10px 14px 16px}
.grp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;transition:border-color .18s}
.grp.open{border-color:var(--line2)}
.ghead{display:flex;align-items:center;gap:11px;padding:13px 14px;width:100%;text-align:left}
.ghead:active{background:rgba(255,255,255,.025)}
.gico{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--card2);color:var(--dim)}
.gico svg{width:16px;height:16px}
.grp.open .gico{background:rgba(37,217,164,.12);color:var(--acc)}
.gmeta{flex:1;min-width:0}
.gname{font-size:14px;font-weight:650;letter-spacing:-.15px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsub{font-size:11px;color:var(--dim2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcnt{flex:0 0 auto;font-size:11px;font-weight:750;color:var(--acc);
  background:rgba(37,217,164,.12);padding:4px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.garrow{flex:0 0 auto;color:var(--dim2);transition:transform .22s}
.garrow svg{width:13px;height:13px}
.grp.open .garrow{transform:rotate(90deg);color:var(--acc)}
.gbody{display:none;border-top:1px solid var(--line)}
.grp.open .gbody{display:block}
.gact{display:flex;gap:7px;padding:10px 12px;background:rgba(255,255,255,.018);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.gact::-webkit-scrollbar{display:none}
.gact button{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:600;padding:6px 11px;border-radius:9px;
  background:rgba(18,163,232,.11);border:1px solid rgba(18,163,232,.28);color:#7dd3fc}
.gact button svg{width:12px;height:12px}
.gact button:active{transform:scale(.95)}

.pl{display:flex;gap:11px;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.pl:last-child{border:0}
.pl:active{background:rgba(255,255,255,.025)}
.rank{width:25px;height:25px;flex:0 0 auto;border-radius:8px;background:var(--card2);
  display:grid;place-items:center;font-size:11px;font-weight:750;color:var(--dim2);
  margin-top:1px;font-variant-numeric:tabular-nums}
.plmain{flex:1;min-width:0}
.plname{font-size:14px;font-weight:650;line-height:1.32;letter-spacing:-.1px;word-break:break-word}
.plmeta{display:flex;align-items:center;gap:7px;margin-top:5px;flex-wrap:wrap}
.rt{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums}
.rt svg{width:11px;height:11px}
.rt.hi{color:var(--acc)} .rt.mid{color:var(--gold)} .rt.lo{color:var(--warn)} .rt.none{color:var(--dim2);font-weight:600}
.rt .n{color:var(--dim2);font-weight:500;font-size:11px}
.cat{font-size:10.5px;color:var(--dim);background:var(--card2);padding:2.5px 8px;border-radius:6px;font-weight:550}
.openst{font-size:10.5px;font-weight:650;padding:2.5px 8px;border-radius:6px}
.openst.o{color:#6ee7b7;background:rgba(37,217,164,.1)}
.openst.c{color:#fca5a5;background:rgba(242,85,90,.1)}
.pladdr{font-size:11.5px;color:var(--dim2);margin-top:6px;line-height:1.45;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.placts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:6px 10px;border-radius:8px;text-decoration:none;
  background:var(--card2);border:1px solid var(--line);color:var(--dim)}
.pill svg{width:11px;height:11px}
.pill:active{transform:scale(.95)}
.pill.tel{color:#7ee9c4;border-color:rgba(37,217,164,.3);background:rgba(37,217,164,.09)}
.pill.web{color:#7dd3fc;border-color:rgba(18,163,232,.3);background:rgba(18,163,232,.09)}
.pill.map{color:#c4b5fd;border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.09)}

/* ---------- tabbar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:flex;
  padding:5px 8px calc(5px + var(--sab));
  background:rgba(11,15,21,.96);backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid var(--line)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;
  color:var(--dim2);font-size:10px;font-weight:650;letter-spacing:.2px;border-radius:12px}
.tab svg{width:20px;height:20px}
.tab.on{color:var(--acc)}
.tab:active{background:rgba(255,255,255,.035)}

/* ---------- map ---------- */
#map{position:fixed;top:calc(53px + var(--sat));left:0;right:0;
  bottom:calc(60px + var(--sab));z-index:10;background:#0a1119}
/* tile OSM dipetakan gelap supaya nyambung sama tema */
#map .maptiles{filter:invert(1) hue-rotate(180deg) brightness(.86) contrast(.94) saturate(.55)}
#map.light .maptiles{filter:none}
.mapctl{position:absolute;right:12px;top:calc(68px + var(--sat));z-index:500;
  display:flex;flex-direction:column;gap:8px}
.mapctl button{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(19,26,36,.95);border:1px solid var(--line2);color:var(--dim);
  box-shadow:0 4px 14px rgba(0,0,0,.4);backdrop-filter:blur(10px)}
.mapctl button svg{width:18px;height:18px}
.mapctl button:active{transform:scale(.93)}
.mapctl button.on{color:var(--acc);border-color:rgba(37,217,164,.5);background:rgba(37,217,164,.1)}
.maplegend{position:absolute;left:12px;bottom:calc(72px + var(--sab));z-index:500;
  display:flex;gap:11px;padding:8px 13px;border-radius:11px;
  background:rgba(13,18,25,.92);border:1px solid var(--line);backdrop-filter:blur(10px);
  font-size:10.5px;color:var(--dim);font-weight:600}
.maplegend span{display:flex;align-items:center;gap:5px}
.lg{width:8px;height:8px;border-radius:50%;display:block}
.lg.hi{background:var(--acc)} .lg.mid{background:var(--gold)} .lg.lo{background:#fb923c}
.mapempty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:500;
  padding:14px 20px;border-radius:13px;background:rgba(13,18,25,.94);
  border:1px solid var(--line);font-size:12.5px;color:var(--dim2);text-align:center}

.leaflet-container{background:#0a1119;font-family:inherit;outline:0}
.leaflet-popup-content-wrapper{background:var(--card2);color:var(--txt);border-radius:13px;
  border:1px solid var(--line2);box-shadow:0 8px 28px rgba(0,0,0,.5)}
.leaflet-popup-tip{background:var(--card2);border:1px solid var(--line2)}
.leaflet-popup-content{margin:11px 13px;font-size:12.5px;line-height:1.45;min-width:160px}
.leaflet-popup-content b{font-size:13px;display:block;margin-bottom:3px}
.leaflet-popup-content .pmeta{color:var(--dim2);font-size:11px;margin-top:2px}
.leaflet-popup-content a{color:var(--acc);font-size:11.5px;font-weight:600;text-decoration:none;
  display:inline-block;margin-top:7px}
.leaflet-popup-close-button{color:var(--dim2)!important;font-size:19px!important;padding:5px 7px 0 0!important}
.leaflet-control-attribution{background:rgba(8,11,16,.75)!important;color:var(--dim2)!important;font-size:9px!important}
.leaflet-control-attribution a{color:var(--dim)!important}
.leaflet-bar a{background:var(--card2)!important;color:var(--txt)!important;
  border-color:var(--line)!important;width:32px!important;height:32px!important;
  line-height:32px!important;font-size:18px!important}
.leaflet-bar a:hover{background:var(--card3)!important}

.mk{width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(45deg);
  display:grid;place-items:center;border:2px solid rgba(6,10,14,.55);
  box-shadow:0 3px 9px rgba(0,0,0,.55)}
.mk span{transform:rotate(-45deg);font-size:9px;font-weight:800;color:#04120e;font-variant-numeric:tabular-nums}
.mk.hi{background:var(--acc)} .mk.mid{background:var(--gold)}
.mk.lo{background:#fb923c} .mk.none{background:#64748b}

/* titik lokasi user */
.mepin{position:relative;width:20px;height:20px;border-radius:50%;background:#12a3e8;
  border:3px solid #fff;box-sizing:border-box;
  box-shadow:0 0 0 3px rgba(18,163,232,.35),0 2px 10px rgba(0,0,0,.5)}
.mepin i{position:absolute;inset:-6px;border-radius:50%;background:rgba(18,163,232,.25);
  animation:mepulse 2.2s ease-out infinite}
@keyframes mepulse{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.9);opacity:0}}

.dist{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;
  color:#7dd3fc;background:rgba(18,163,232,.1);border:1px solid rgba(18,163,232,.28);
  padding:2px 7px;border-radius:999px;margin-left:5px;vertical-align:middle}
.cluster{background:rgba(37,217,164,.92);color:#04120e;font-weight:800;border-radius:50%;
  display:grid;place-items:center;box-shadow:0 0 0 6px rgba(37,217,164,.16),0 4px 14px rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums}
.cluster span{font-size:11.5px}

/* ---------- history ---------- */
.vhead{display:flex;align-items:center;padding:16px 14px 10px}
.vhead h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.3px;flex:1}
.ghost{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--dim)}
.ghost svg{width:16px;height:16px}
.ghost:active{transform:scale(.93)}
#histlist{padding:0 14px 14px}
.hitem{display:flex;align-items:center;gap:11px;padding:13px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;margin-bottom:9px}
.hitem:active{background:var(--card2)}
.hitem .hi{width:36px;height:36px;border-radius:11px;background:var(--card2);
  display:grid;place-items:center;color:var(--dim2);flex:0 0 auto}
.hitem .hi svg{width:16px;height:16px}
.hmain{flex:1;min-width:0}
.hq{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm{font-size:10.5px;color:var(--dim2);margin-top:3px}
.badge{flex:0 0 auto;font-size:9.5px;font-weight:750;padding:4px 8px;border-radius:7px;
  text-transform:uppercase;letter-spacing:.4px}
.badge.done{background:rgba(37,217,164,.14);color:var(--acc)}
.badge.error{background:rgba(242,85,90,.14);color:#fca5a5}
.badge.running{background:rgba(18,163,232,.14);color:#7dd3fc}
.badge.queued{background:rgba(148,163,184,.13);color:#cbd5e1}
.badge.cancelled{background:rgba(148,163,184,.13);color:#94a3b8}

/* ---------- sheet ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);opacity:0;
  pointer-events:none;transition:opacity .22s;backdrop-filter:blur(3px)}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--bg2);
  border-radius:22px 22px 0 0;border-top:1px solid var(--line2);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);
  transform:translateY(102%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:88vh;display:flex;flex-direction:column}
.sheet.show{transform:translateY(0)}
.grab{width:38px;height:4px;border-radius:3px;background:var(--line2);margin:9px auto 0;flex:0 0 auto}
#sheetbody{overflow-y:auto;padding:6px 18px calc(20px + var(--sab));-webkit-overflow-scrolling:touch}
.shead{display:flex;align-items:flex-start;gap:11px;padding:10px 0 14px;border-bottom:1px solid var(--line)}
.shead h3{margin:0;font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.25px;flex:1;word-break:break-word}
.sclose{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--card2);color:var(--dim);flex:0 0 auto}
.sclose svg{width:14px;height:14px}
.kv{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.045);font-size:13px}
.kv:last-of-type{border:0}
.kv .k{color:var(--dim2);min-width:76px;font-size:11.5px;padding-top:2px;flex:0 0 auto;font-weight:550}
.kv .v{flex:1;word-break:break-word;line-height:1.45}
.kv .v a{color:#7dd3fc;text-decoration:none}
.sbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;
  border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:12.5px;
  font-weight:650;color:var(--txt);text-decoration:none;text-align:center}
.btn svg{width:14px;height:14px}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(140deg,var(--acc),var(--acc2));color:#04120e;border:0;
  box-shadow:0 4px 14px rgba(37,217,164,.22)}
.btn.wide{grid-column:1/-1}
.sheet h4{margin:16px 0 8px;font-size:12px;font-weight:700;color:var(--dim2);
  text-transform:uppercase;letter-spacing:.6px}
.optline{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.optline:last-child{border:0}
.optline .ol{flex:1;font-size:13px;font-weight:550}
.optline .od{font-size:11px;color:var(--dim2);margin-top:2px}
.optline button.pick{font-size:12px;font-weight:700;padding:7px 14px;border-radius:9px;
  background:var(--card2);border:1px solid var(--line2);color:var(--dim)}
.optline button.pick.on{background:rgba(37,217,164,.14);border-color:rgba(37,217,164,.42);color:var(--acc)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(96px + var(--sab));z-index:95;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:#1e293b;border:1px solid var(--line2);color:var(--txt);
  padding:11px 17px;border-radius:12px;font-size:12.5px;font-weight:550;
  box-shadow:var(--sh);max-width:88vw;text-align:center;transition:.24s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#3b1418;border-color:rgba(242,85,90,.4);color:#fecaca}

@media(min-width:760px){
  .searchwrap,.opts,.lochint,.stats,#groups,#histlist,.vhead{max-width:940px;margin-left:auto;margin-right:auto}
  .opts,.lochint{margin-top:11px}
  .resultbar{max-width:940px;margin:0 auto;border-radius:0 0 14px 14px}
  .tabbar{max-width:940px;margin:0 auto;border-radius:18px 18px 0 0;
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
  #groups{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .grp{margin-bottom:0}
  .sugg{max-width:940px;left:50%;transform:translateX(-50%);width:calc(100% - 28px)}
}