:root {
  --bg: #0e141b;
  --ink: #f4f7fb;
  --muted: #b7c3d1;
  --yellow: #ffd34d;
  --yellow-ink: #1b1604;
  --card: #17202b;
  --line: #3c8dff;
  --ok: #1f8f4e;
  --danger: #c4473a;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; }

body.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(420px, 100%);
  background: var(--card);
  border-radius: 20px;
  padding: 28px 22px;
}
.eyebrow { margin: 0 0 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); font-size: 12px; }
.login-card h1 { margin: 0 0 8px; font-size: 32px; }
.lead { margin: 0 0 18px; color: var(--muted); }
.login-card label { display: block; margin: 12px 0 6px; color: var(--muted); }
.login-card input {
  width: 100%;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px solid #314155;
  background: #0e141b;
  color: var(--ink);
}
.primary, .menu-foot button, #reachedBtn, #offerBtn, #menuBtn, #menuClose, .menu-tabs button {
  border: 0;
  border-radius: 12px;
}
.primary {
  width: 100%;
  margin-top: 18px;
  background: var(--yellow);
  color: var(--yellow-ink);
  font-weight: 700;
  padding: 14px;
}
.alert {
  background: #3a241c;
  color: #ffd0c4;
  border-radius: 12px;
  padding: 12px;
}

#app {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
}
.top, #offer, #sheet {
  position: relative;
  z-index: 500;
}
.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #101820;
}
#menuBtn, #menuClose, .menu-foot button, #autoChip {
  background: #243140;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
}
.top-text { min-width: 0; }
.top-text strong, .top-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-text span, #clock { color: var(--muted); font-size: 13px; }
#clock { font-variant-numeric: tabular-nums; }

#offer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #21405f;
}
#offer[hidden] { display: none; }
#offerBtn, #reachedBtn {
  background: var(--yellow);
  color: var(--yellow-ink);
  font-weight: 700;
  padding: 10px 12px;
  white-space: nowrap;
}

#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
#map { position: absolute; inset: 0; background: #1b242e; }
#banner {
  position: absolute;
  z-index: 900;
  top: 8px;
  left: 8px;
  right: 8px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 84px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--yellow);
  color: var(--yellow-ink);
  box-shadow: 0 10px 28px #0006;
}
#bannerDist { font-size: 28px; font-weight: 800; line-height: 1.1; }
#bannerText { font-size: 18px; font-weight: 650; line-height: 1.25; }
#bannerNext { font-size: 15px; font-weight: 750; line-height: 1.25; margin-top: 2px; }
.arrow {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #1b1604;
  position: relative;
}
.arrow.straight, .arrow.start { transform: rotate(-90deg); }
.arrow.right { transform: rotate(-50deg); }
.arrow.left { transform: rotate(-130deg); }
.arrow.uturn { transform: rotate(90deg); }
.arrow::before {
  content: "";
  position: absolute;
  inset: 16px 22px 16px 18px;
  background: var(--yellow);
  clip-path: polygon(0 35%, 55% 35%, 55% 8%, 100% 50%, 55% 92%, 55% 65%, 0 65%);
}
.arrow.roundabout::before {
  inset: 14px;
  clip-path: none;
  border-radius: 50%;
  background: conic-gradient(from 40deg, var(--yellow) 0 78%, transparent 78% 100%);
  -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px);
  mask: radial-gradient(circle, transparent 11px, #000 12px);
}
.arrow.finish::before { clip-path: circle(28% at 50% 50%); inset: 10px; }
.arrow.start::before { transform: none; }

.leaflet-control-attribution { font-size: 10px; }
#followBtn {
  position: absolute;
  right: 12px;
  bottom: calc(148px + var(--safe-bottom));
  z-index: 450;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #142033;
  font-size: 30px;
  box-shadow: 0 6px 18px #0006;
}
#followBtn.off { background: #d7dee8; }
#speed {
  position: absolute;
  left: 12px;
  bottom: calc(148px + var(--safe-bottom));
  z-index: 450;
  background: #101820ee;
  color: white;
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 700;
}
#speed[hidden] { display: none; }

#sheet {
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background: #101820;
}
.sheet-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.sheet-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
#stopName { display: block; font-size: 22px; }
#stopMeta { color: var(--muted); }
#autoChip { margin-top: 8px; width: 100%; background: #5a3b16; color: #ffd9a0; }

#menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000a;
  display: grid;
  align-items: end;
  padding: 12px;
  padding-bottom: calc(12px + var(--safe-bottom));
}
#menu[hidden] { display: none; }
.menu-card {
  background: var(--card);
  border-radius: 20px;
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.menu-head, .menu-foot, .menu-tabs { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 12px; }
.menu-tabs button { flex: 1; background: #243140; color: var(--ink); }
.menu-tabs button.on { background: var(--yellow); color: var(--yellow-ink); font-weight: 700; }
#menuBody { overflow: auto; padding: 0 12px 12px; }
.row {
  width: 100%;
  text-align: left;
  background: #101820;
  color: var(--ink);
  border: 0;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 8px;
}
.row.on { outline: 2px solid var(--yellow); }
.row small, .group-label { display: block; color: var(--muted); }
.group-label { margin: 8px 0; }
.row.done { opacity: .55; }
.menu-foot button { flex: 1; }
.menu-foot form { flex: 1; }
.menu-foot form button { width: 100%; background: #3a2424; color: #ffd0c4; }

#toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(150px + var(--safe-bottom));
  z-index: 1600;
  background: #243140;
  color: white;
  border-radius: 14px;
  padding: 12px 14px;
}
#toast[hidden] { display: none; }

.nav-arrow-wrap { background: transparent; border: 0; }
.nav-arrow {
  width: 46px;
  height: 46px;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.nav-arrow svg { display: block; }
.stop-label {
  background: #101820ee;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}
.stop-label.now { background: #ffd34d; color: #1b1604; }
.stop-label.done { opacity: .7; }
.leaflet-tooltip.stop-label::before { display: none; }