:root {
  --ink: #202124;
  --teal: #1a73e8;
  --teal-dark: #1765cc;
  --paper: #ffffff;
  --mist: #f8f9fa;
  --line: #dadce0;
  --amber: #C9762A;
  --text-muted: #5f6368;
  --map-control-accent: #0b4a42;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 6px rgba(0, 0, 0, 0.15);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.18);
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-16);
  font-weight: 400;
  color: var(--ink);
  background: var(--mist);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, button, input { font: inherit; color: inherit; }
h1, h2, h3, button { font-weight: 600; margin: 0; }
p { margin: 0; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; opacity: 0.55; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--teal); color: var(--paper); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-secondary { background: var(--paper); color: var(--teal-dark); border-color: var(--line); }
.btn-secondary:hover { background: var(--mist); }
.btn-block { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--text-muted); }
.icon-btn:hover { background: var(--mist); color: var(--ink); }
.muted { color: var(--text-muted); }
.fs-12 { font-size: var(--fs-12); }
.fs-14 { font-size: var(--fs-14); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.pill-teal { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: transparent;
  border: 0;
  box-shadow: none;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.tab.is-active { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.tab:hover { background: var(--mist); }
.tab.is-active:hover { background: var(--teal-dark); }
body[data-sheet-open="true"] .bottom-nav { transform: translateY(110%); }
.bottom-nav { transition: transform 260ms ease; }
@media (min-width: 900px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 20px;
    padding: 0;
    box-shadow: none;
  }
  body[data-sheet-open="true"] .bottom-nav { transform: translateX(-50%) translateY(140%); }
}