/* Фирменный стиль ГК «Арктур» (по arktur.css сайта):
   тёмно-синий #18174b, светло-голубая подложка #e8f1f9,
   красный акцент #e30521, ссылки #39f, приглушённый #a6a9be, Roboto. */

:root {
  --navy: #18174b;
  --navy-2: #232258;
  --panel: #e8f1f9;
  --accent: #e30521;
  --link: #3399ff;
  --muted: #a6a9be;
  --muted-2: #8c8ba5;
  --line: #bfbfcb;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--navy);
  color: #fff;
  font: 300 15px/1.45 'Roboto', -apple-system, sans-serif;
  display: flex; flex-direction: column;
}

#brand {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--navy);
}
#brand img { display: block; height: 32px; width: auto; }
#brand .tagline {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 4px;
}

#map { height: 38vh; min-height: 200px; flex: none; background: var(--navy-2); }

#panel { flex: 1; overflow-y: auto; padding: 12px 12px 24px; }

#chips { display: flex; gap: 8px; margin-bottom: 10px; }
.chip {
  border: none; border-radius: 16px; padding: 7px 15px;
  background: var(--navy-2); color: #fff;
  font: 300 14px 'Roboto', sans-serif;
  cursor: pointer;
}
.chip.active { background: var(--accent); font-weight: 500; }

#meta { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }

.card {
  background: var(--panel); color: var(--navy);
  border-radius: 14px;
  padding: 12px 14px; margin-bottom: 10px;
}
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card .name { font-weight: 500; font-size: 16px; }
.card .addr { color: var(--muted-2); font-size: 13px; }
.card .route {
  color: var(--link); font-size: 13px; text-decoration: none;
  border-bottom: 1px solid rgba(51, 153, 255, .4);
  white-space: nowrap;
}
.card .route:active { color: var(--accent); border-bottom-color: rgba(227, 5, 33, .4); }

.fuel-line {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0 0;
}
.fuel-line + .fuel-line { border-top: none; }
.dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px rgba(24, 23, 75, .12);
}
.fuel-name { font-weight: 500; min-width: 52px; }
.fuel-text { color: var(--navy); }
.fuel-text.muted { color: var(--muted-2); }
.note { color: var(--muted-2); font-size: 12px; margin-top: 8px; }

.leaflet-popup-content { margin: 10px 12px; font: 300 13px/1.45 'Roboto', sans-serif; color: var(--navy); }
.leaflet-popup-content .name { font-weight: 500; margin-bottom: 4px; }
.leaflet-popup-content a.route { color: var(--link); text-decoration: none; }