:root {
  --bg:#1e1e24; --panel:#2a2a33; --panel2:#34343f; --fg:#e8e8ea;
  --accent:#4da3ff; --muted:#9a9aa5; --line:#44444f;
  --green:#2ecc71; --red:#e74c3c; --yellow:#f1c40f;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font-family:system-ui,Segoe UI,Roboto,sans-serif; }
#map { position:absolute; inset:0; }

#panel {
  position:absolute; top:12px; left:12px; z-index:1000; width:330px;
  max-height:calc(100% - 24px); overflow:auto;
  background:var(--panel); color:var(--fg); border-radius:12px; padding:14px 16px;
  box-shadow:0 6px 24px rgba(0,0,0,.45); font-size:14px;
}
#panel h1 { font-size:15px; margin:0 0 10px; letter-spacing:.3px; }
.row { display:flex; gap:8px; margin:8px 0; align-items:center; flex-wrap:wrap; }
.row.tight { margin:4px 0; }
label { color:var(--muted); font-size:12px; }
select, button, input[type=text], input[type=datetime-local] {
  background:var(--panel2); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; font-size:13px;
}
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
button.active { background:var(--accent); color:#0b0b0f; border-color:var(--accent); font-weight:600; }
button.icon { padding:6px 9px; }
.seg { display:flex; gap:0; }
.seg button { border-radius:0; border-right-width:0; }
.seg button:first-child { border-radius:8px 0 0 8px; }
.seg button:last-child { border-radius:0 8px 8px 0; border-right-width:1px; }

/* search fields */
.field { position:relative; margin:6px 0; }
.field input[type=text] { width:100%; }
.dot { position:absolute; left:9px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; }
.field.has-dot input { padding-left:26px; }
.ac {
  position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:1200;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; display:none;
}
.ac.open { display:block; }
.ac div { padding:7px 10px; cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--line); }
.ac div:last-child { border-bottom:0; }
.ac div:hover, .ac div.sel { background:var(--accent); color:#0b0b0f; }
.ac .sub { color:var(--muted); font-size:11px; }
.ac div:hover .sub, .ac div.sel .sub { color:#0b0b0f; }

#stops .stop { display:flex; align-items:center; gap:6px; margin:4px 0; font-size:12.5px; color:#cfcfd6; }
#stops .stop button { padding:2px 7px; font-size:11px; }

details { margin:8px 0; border-top:1px solid var(--line); padding-top:6px; }
summary { cursor:pointer; color:var(--muted); font-size:12.5px; }
.checks label { display:flex; gap:6px; align-items:center; color:var(--fg); font-size:12.5px; margin:4px 0; }

#routes { margin-top:8px; }
.route-opt { display:flex; justify-content:space-between; gap:8px; padding:7px 10px; margin:4px 0;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:12.5px; }
.route-opt.sel { border-color:var(--accent); }
.route-opt .km { color:var(--accent); font-weight:600; }

#summary { margin-top:8px; font-size:13px; line-height:1.5; }
#summary b { color:var(--accent); }
#status { color:var(--muted); font-size:12px; min-height:16px; margin-top:6px; }
ol#steps { margin:8px 0 0; padding-left:20px; max-height:240px; overflow:auto; font-size:12px; color:#cfcfd6; }
ol#steps li { margin:3px 0; cursor:default; padding:2px 4px; border-radius:5px; }
ol#steps li:hover { background:var(--panel2); }
ol#steps li .d { color:var(--muted); font-size:11px; }
.hint { color:var(--muted); font-size:11.5px; line-height:1.4; margin-top:10px; }
.note { color:var(--yellow); font-size:11px; }

/* waypoint pins (divIcon) */
.wp-pin { display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  color:#0b0b0f; font-weight:700; font-size:12px; box-shadow:0 2px 6px rgba(0,0,0,.4); border:2px solid #0b0b0f33; }
.wp-pin span { transform:rotate(45deg); }