@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --blue: #2F5FEE;
  --blue-dark: #1E3FAE;
  --blue-bg: #2C4FE0;
  --ink: #1B1F27;
  --slate: #6B7280;
  --line: #E5E7EB;
  --paper: #FFFFFF;
  --soft: #F5F6FA;
  --amber-bg: #FDF1DC;
  --amber-text: #B4801F;
  --blue-pill-bg: #E8EEFE;
  --green-bg: #E7F6EC;
  --green-text: #1E8A45;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--blue-bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin: 0; }
.mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.01em; }

.panel {
  background: var(--soft);
  border-radius: 20px;
  padding: 16px;
  max-width: 1240px;
  margin: 24px auto;
}
.card {
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.pill { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-transit { background: var(--blue-pill-bg); color: var(--blue); }
.pill-delivery { background: var(--amber-bg); color: var(--amber-text); }
.pill-done { background: var(--green-bg); color: var(--green-text); }

.btn-blue { background: var(--blue); color: #fff; border: none; font-weight: 600; font-size: 13px; padding: 11px 18px; border-radius: 8px; cursor: pointer; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--slate); }

#map { width: 100%; }
.leaflet-popup-content { font-family: 'Inter', sans-serif; font-size: 12px; }
.pin-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; background: var(--ink); color: #fff; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.pin-label.current { background: var(--blue); }
.pin-label.done { background: var(--green-text); }

/* Public site chrome */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; }
.site-logo .logo-dot { width: 32px; height: 32px; border-radius: 9px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.site-nav { display: flex; gap: 28px; font-size: 14px; color: var(--slate); }
.site-nav a { color: var(--slate); text-decoration: none; }
.site-nav a.active, .site-nav a:hover { color: var(--ink); font-weight: 500; }

.site-footer { background: var(--ink); color: #9CA3AF; padding: 28px 48px; font-size: 13px; display: flex; justify-content: space-between; }
.site-footer .site-logo { color: #fff; margin-bottom: 4px; }

.btn-outline { background: transparent; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; padding: 10px 18px; border-radius: 8px; }