:root{
  --navy:#1C2B4A;
  --navy-2:#243a63;
  --blue:#5B9BD5;
  --blue-ink:#2f6ea8;
  --bg:#eef1f7;
  --panel:#ffffff;
  --ink:#101a30;
  --muted:#6b7893;
  --line:#dde3ef;
  --ok:#1f9d6b;
  --warn:#c9772b;
  --data: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, monospace;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--ui);color:var(--ink);background:var(--bg)}

.app{display:grid;grid-template-columns:360px 1fr;height:100vh}
@media (max-width:820px){.app{grid-template-columns:1fr;height:auto}}

/* ---- panel ---- */
.panel{
  background:var(--navy);
  color:#e7ecf6;
  padding:22px 20px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.brand-mark{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),#3f78b0);
  display:grid;place-items:center;font-weight:800;letter-spacing:.5px;color:#fff;
  font-family:var(--data);
}
.brand h1{font-size:19px;margin:0;letter-spacing:.2px}
.brand-sub{margin:2px 0 0;font-size:12px;color:#9fb2d4;font-family:var(--data)}

.field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.field>span{color:#c3d0e8}
.field em{color:#8ea4cc;font-style:normal;font-size:11px}
.field code{font-family:var(--data);color:var(--blue);font-size:11px}
.field.small>span{font-size:12px;color:#a9b8d6}

input,textarea{
  font:inherit;color:var(--ink);background:#f7f9fd;
  border:1px solid #33456b;border-radius:9px;padding:9px 11px;width:100%;
}
textarea{resize:vertical;font-size:13px;line-height:1.5}
input:focus,textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toggles{display:flex;flex-direction:column;gap:8px}
.chk{display:flex;align-items:center;gap:9px;font-size:13px;color:#cdd8ec;cursor:pointer}
.chk input{width:auto}

.go{
  margin-top:2px;padding:12px;border:0;border-radius:10px;cursor:pointer;
  background:var(--blue);color:#08182b;font-weight:700;font-size:14.5px;letter-spacing:.2px;
  transition:transform .05s ease, background .15s ease;
}
.go:hover{background:#6fabe0}
.go:active{transform:translateY(1px)}
.go[disabled]{opacity:.6;cursor:progress}

.engine{font-size:11px;color:#8ea4cc;font-family:var(--data);margin:0}
.engine b{color:var(--blue)}
.msg{font-size:12.5px;border-radius:8px;padding:9px 11px;line-height:1.4}
.msg.err{background:#3a2233;color:#ffc7d6;border:1px solid #6b2a44}
.msg.warn{background:#3a3320;color:#ffe0a8;border:1px solid #6b5626}

/* ---- content ---- */
.content{display:flex;flex-direction:column;min-width:0}
#map{flex:1;min-height:340px;background:#dfe5ef}
@media (max-width:820px){#map{height:52vh}}

.results{
  background:var(--panel);border-top:1px solid var(--line);
  padding:16px 20px;max-height:44vh;overflow-y:auto;
}
.summary{
  display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.summary .n{font-family:var(--data);font-size:22px;font-weight:700;color:var(--navy)}
.summary .l{font-size:12px;color:var(--muted);margin-left:6px}

.tech{margin-bottom:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tech-head{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:#f5f7fc;border-bottom:1px solid var(--line);
}
.dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.tech-head h3{margin:0;font-size:14px}
.tech-head .meta{margin-left:auto;font-family:var(--data);font-size:12px;color:var(--muted)}

.day{padding:10px 14px;border-top:1px dashed var(--line)}
.day:first-of-type{border-top:0}
.day-title{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.day-title b{font-size:13px}
.day-title .dm{font-family:var(--data);font-size:11.5px;color:var(--muted)}
.day-start{font-size:11.5px;color:var(--blue-ink);margin-bottom:6px}
.stop{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:2px 0}
.stop .idx{font-family:var(--data);font-size:11px;color:#fff;background:var(--navy);
  width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none}
.stop .leg{font-family:var(--data);font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.ret{font-size:12px;color:var(--muted);padding:4px 0 0 30px}
.ret.stay{color:var(--warn)}

/* leaflet marker labels */
.pin{border:2px solid #fff;border-radius:50%;width:26px;height:26px;
  display:grid;place-items:center;color:#fff;font:700 12px/1 var(--data);
  box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pin.depot{border-radius:8px;background:var(--navy);width:30px;height:30px;font-size:11px}