:root {
  --bg: #ffffff; --fg: #111; --muted: #666; --accent: #175ed6; --line: #e3e3e3;
  --shadow: 0 2px 12px rgba(0,0,0,.18);
  --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1d1f23; --fg: #f2f2f2; --muted: #a0a0a0; --line: #33363b; --accent: #4c8dff; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#map { position: absolute; inset: 0; }
button { font: inherit; border: 0; border-radius: 12px; padding: 12px 16px; background: var(--line); color: var(--fg); }
button.primary { background: var(--accent); color: #fff; font-weight: 600; flex: 1; }

#search { position: absolute; top: calc(var(--top) + 10px); left: 12px; right: 12px; z-index: 3; }
#q { width: 100%; padding: 13px 16px; border-radius: 14px; border: 0; font-size: 17px;
  background: var(--bg); color: var(--fg); box-shadow: var(--shadow); -webkit-appearance: none; }
#results { list-style: none; margin: 6px 0 0; padding: 0; background: var(--bg); border-radius: 14px;
  box-shadow: var(--shadow); max-height: 50vh; overflow: auto; }
#results li { padding: 12px 16px; border-bottom: 1px solid var(--line); }
#results li small { display: block; color: var(--muted); }

#banner { position: absolute; top: calc(var(--top) + 10px); left: 12px; right: 12px; z-index: 4;
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px;
  background: #0f6b3a; color: #fff; box-shadow: var(--shadow); }
#banner[hidden], #panel[hidden], #results[hidden], #steps[hidden], #toast[hidden] { display: none; }
#arrow { font-size: 40px; width: 48px; text-align: center; line-height: 1; }
#dist-next { font-size: 26px; font-weight: 700; }
#instr { font-size: 17px; }

.fabs { position: absolute; right: 12px; bottom: calc(var(--bottom) + 150px); z-index: 2;
  display: flex; flex-direction: column; gap: 10px; }
.fabs button { width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--bg);
  box-shadow: var(--shadow); font-size: 20px; }
.fabs button.on { background: var(--accent); color: #fff; }

#panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--bg);
  border-radius: 18px 18px 0 0; box-shadow: var(--shadow); padding: 14px 16px calc(var(--bottom) + 14px); }
#summary { font-size: 18px; margin-bottom: 10px; }
#summary b { font-size: 22px; }
#summary small { color: var(--muted); display: block; }
.row { display: flex; gap: 10px; }
#steps { max-height: 40vh; overflow: auto; margin: 12px 0 0; padding-left: 22px; }
#steps li { padding: 6px 0; border-bottom: 1px solid var(--line); }
#steps li small { color: var(--muted); }

#toast { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom) + 170px);
  z-index: 5; background: rgba(0,0,0,.8); color: #fff; padding: 10px 16px; border-radius: 12px; max-width: 90%; }

.me { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(23,94,214,.25); position: relative; }
.me::after { content: ""; position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom: 9px solid var(--accent); display: var(--cone, none); }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { margin-bottom: calc(var(--bottom)); }
body.nav .maplibregl-ctrl-attrib { display: none; }