:root {
  --bg: #f4f6f8; --card: #ffffff; --ink: #1f2933; --muted: #6b7782; --line: #e3e8ec;
  --accent: #1a6fb5; --accent-ink: #ffffff; --ok: #1f8a4c; --warn: #b7791f; --bad: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12171c; --card: #1b232b; --ink: #e8edf1; --muted: #8b97a1; --line: #2a343d;
    --accent: #4aa3e8; --accent-ink: #0b1218; --ok: #4cc27d; --warn: #e0a643; --bad: #ef6b5c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
header { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px 6px; }
.title { font-size: 18px; font-weight: 700; }
.sub, .updated { color: var(--muted); font-size: 13px; }
nav { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
nav button {
  border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px;
  padding: 8px 14px; font-size: 14px; white-space: nowrap; cursor: pointer;
}
nav button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
main { padding: 4px 12px 24px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 8px 0; }
.card h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pos { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.pos.first { background: var(--ok); }
.list .item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.list .item:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 13px; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line); }
.chip.admin { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.chip.offered { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.chip.accepted { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.chip.scheduled { background: var(--line); color: var(--muted); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.tile b { display: block; font-size: 22px; margin-top: 2px; }
.seg { display: flex; gap: 6px; margin: 8px 0; }
.seg button { flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; padding: 8px; cursor: pointer; }
.seg button.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.big { width: 100%; border: 0; border-radius: 14px; padding: 16px; font-size: 17px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.big.start { background: var(--ok); color: #fff; }
.big.stop { background: var(--bad); color: #fff; }
.status { font-size: 22px; font-weight: 700; margin: 2px 0; }
.empty { text-align: center; color: var(--muted); padding: 28px 8px; }

/* карта */
#map { height: 52vh; min-height: 280px; border-radius: 14px; border: 1px solid var(--line); margin: 8px 0; z-index: 1; }
.pin { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); display: flex;
  align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pin.free { border-color: #1f8a4c; } .pin.busy { border-color: #b7791f; } .pin.stale { border-color: #9aa5ae; filter: grayscale(1); opacity: .8; }
.pin.order { border-color: #c0392b; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--muted); }
.dot.free { background: var(--ok); } .dot.busy { background: var(--warn); }
.eta { font-size: 18px; font-weight: 700; margin: 6px 0 2px; color: var(--accent); }
.err { color: var(--bad); font-size: 13px; margin: 6px 0; }
.demo { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.pin.dest { border-color: #7a3ea1; }
.eta2 { font-size: 16px; font-weight: 700; margin: 4px 0; color: #c97b00; }
/* пока решаем, что показать (синяя кнопка MAX для сотрудников сразу ведёт в чат), страница пустая — без мигания */
.boot header, .boot nav, .boot main { visibility: hidden; }

.locate { position: fixed; right: 14px; bottom: calc(var(--sheet-h, 330px) + 16px); z-index: 1000; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); font-size: 22px; cursor: pointer; display: none; }
body.trk .locate { display: block; }
/* слежение за машиной: как в такси-приложениях — карта на весь экран и белая карточка снизу */
body.trk { background: #e9e6df; overflow: hidden; }
body.trk header, body.trk nav { display: none; }
body.trk main { padding: 0; }
body.trk #map { position: fixed; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; margin: 0; z-index: 1; }
body.trk .leaflet-tile-pane { filter: saturate(.55) brightness(1.04) contrast(.96); }
body.trk .leaflet-control-zoom { display: none; }
body.trk .leaflet-control-attribution { font-size: 9px; opacity: .6; margin-bottom: 0; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--card); color: var(--ink);
  border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.18); padding: 18px 20px calc(16px + env(safe-area-inset-bottom)); }
.sheet .big-title { font-size: 21px; font-weight: 600; }
.sheet .sub-title { color: var(--muted); font-size: 14px; margin-top: 2px; }
.sheet hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.drv { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drv .nm { font-size: 17px; font-weight: 700; }
.drv .nm span { font-weight: 600; }
.drv .md { color: var(--muted); font-size: 14px; margin-top: 2px; }
.plate { display: inline-block; margin-top: 10px; border: 2px solid var(--ink); border-radius: 6px; padding: 2px 10px; font-size: 22px; font-weight: 500; letter-spacing: .03em; }
.trip { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); margin-top: 12px; }
.trip b { color: var(--ink); }
.acts { display: flex; gap: 10px; margin-top: 14px; }
.acts button { flex: 1; border: 0; border-radius: 12px; padding: 14px 8px; font-size: 16px; font-weight: 600; background: var(--line); color: var(--ink); cursor: pointer; }
.demo-tag { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1001; background: rgba(0,0,0,.65); color: #fff;
  font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.pin-me { width: 34px; height: 34px; border-radius: 9px; background: #2b4ff0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 2px solid #fff; }
.pin-flag { width: 28px; height: 28px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.car-ic { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); transition: transform .4s linear; }
.pulse { width: 120px; height: 120px; border-radius: 50%; background: rgba(43,79,240,.14); border: 1px solid rgba(43,79,240,.25);
  animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }