/* Vector v3 — city transport shell */
:root {
  --paper: #f4f4ef;
  --paper-2: #e9eadf;
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #ffffff;
  --ink: #14171f;
  --muted: #5c6052;
  --faint: #8a8d80;
  --line: #dfe1d4;
  --line-strong: #cfd2c4;
  --blue: #2456ff;
  --blue-2: #163bc5;
  --green: #1a8a54;
  --green-bg: #e7f6ee;
  --amber: #d28a20;
  --amber-bg: #fff1d2;
  --red: #d83d3d;
  --red-bg: #ffe2e0;
  --shadow: 0 14px 38px rgba(20, 23, 31, .14);
  --shadow-sm: 0 5px 16px rgba(20, 23, 31, .10);
  --radius: 8px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Единые кривые и длительности движения: мягкий выезд и лёгкий «пружинный»
     отклик вместо линейного ease — чтобы интерфейс не ощущался топорным. */
  --ease-soft: cubic-bezier(.2, .8, .3, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: .15s;
  --motion: .24s;
}

[data-theme="dark"] {
  --paper: #111318;
  --paper-2: #1a1d24;
  --panel: rgba(26, 29, 36, .9);
  --panel-solid: #1d2028;
  --ink: #f6f6ef;
  --muted: #c3c6b7;
  --faint: #8f9387;
  --line: #343943;
  --line-strong: #4a505b;
  --blue: #5f83ff;
  --blue-2: #8aa3ff;
  --green: #4cc986;
  --green-bg: rgba(76, 201, 134, .14);
  --amber: #ffc463;
  --amber-bg: rgba(255, 196, 99, .14);
  --red: #ff716a;
  --red-bg: rgba(255, 113, 106, .13);
  --shadow: 0 16px 42px rgba(0, 0, 0, .42);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--paper); color: var(--ink); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Golos Text", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
/* Ручная тема приложения может не совпадать с системной color-scheme.
   Не даём браузеру подставить светлый ButtonText в светлой теме. */
button { color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.brand-font { font-family: "Russo One", "Impact", sans-serif; letter-spacing: .045em; }

#yandex-map, #map, #map-art {
  position: fixed;
  inset: 0;
  background: var(--paper-2);
}
#yandex-map {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
body.yandex-map-active #yandex-map { opacity: 1; }
#map { z-index: 1; }
body.yandex-map-active #map,
body.yandex-map-active #map .maplibregl-canvas { background: transparent !important; }
/* API 3.0 — единственный интерактивный картографический движок. MapLibre выше
   только как прозрачный слой маршрутов; его canvas не перехватывает жесты. */
body.yandex-v3-active #yandex-map { z-index: 1; pointer-events: auto; }
body.yandex-v3-active #map { z-index: 2; pointer-events: none; }
body.yandex-v3-active #map .maplibregl-canvas { pointer-events: none; }
body.yandex-v3-active #map .maplibregl-marker { pointer-events: auto; }
#map.dragging { cursor: grabbing; }
#map-art {
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .35s ease;
}
#map-art.map-live { opacity: 0; }
.map-grid {
  position: absolute;
  inset: -4%;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(circle at 74% 26%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 22%),
    radial-gradient(circle at 21% 70%, color-mix(in srgb, var(--green) 12%, transparent), transparent 24%);
}
.map-river {
  position: absolute;
  left: 52%;
  top: -10%;
  width: 90px;
  height: 125%;
  transform: rotate(17deg);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
}
.map-road {
  position: absolute;
  height: 7px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 50%, transparent) inset;
}
.map-road-a { width: 86%; left: 5%; top: 42%; transform: rotate(-12deg); }
.map-road-b { width: 62%; right: -8%; top: 66%; transform: rotate(28deg); }
.map-road-c { width: 70%; left: -12%; top: 23%; transform: rotate(22deg); }

#map-pins {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.map-controls {
  position: fixed;
  z-index: 8; /* ниже панели (.app-shell z=10): кнопки карты не лезут поверх шторки */
  right: 10px;
  top: 178px;
  display: grid;
  gap: 2px;
  padding: 4px;
  background: color-mix(in srgb, var(--panel-solid) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(7, 13, 20, .2);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  pointer-events: auto;
}
.map-tool {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.map-tool:hover,
.map-tool:focus-visible {
  color: #fff;
  background: var(--blue);
  outline: none;
  transform: translateY(-1px);
}
.map-tool:active {
  transform: translateY(0) scale(.96);
}
[data-theme="dark"] .map-controls {
  background: rgba(20, 28, 38, .82);
  border-color: rgba(145, 163, 179, .2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}
@media (prefers-reduced-motion: reduce) {
  .map-tool { transition: none; }
}

.road-point-dock {
  position: fixed;
  z-index: 780;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  backdrop-filter: blur(18px) saturate(1.15);
  animation: roadDockIn .28s cubic-bezier(.22, 1, .36, 1);
}
.road-point-dock button { min-height: 54px; margin: 0; }
.road-draft-marker {
  position: relative;
  width: 48px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: #2456ff;
  color: #fff;
  box-shadow: 0 10px 24px rgba(36, 86, 255, .38);
  transform: rotate(-45deg);
  animation: roadMarkerDrop .32s cubic-bezier(.22, 1, .36, 1);
}
.road-draft-marker span { font-size: 21px; transform: rotate(45deg); }
.road-draft-marker i {
  position: absolute;
  inset: -9px;
  border: 2px solid rgba(36, 86, 255, .45);
  border-radius: 50%;
  animation: roadMarkerPulse 1.25s ease-out infinite;
}
@keyframes roadDockIn { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes roadMarkerDrop { from { opacity: 0; transform: translateY(-22px) rotate(-45deg) scale(.75); } }
@keyframes roadMarkerPulse { 0% { opacity: .72; transform: scale(.72); } 100% { opacity: 0; transform: scale(1.32); } }

@media (min-width: 900px) {
  .road-point-dock { left: 24px; right: auto; width: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .road-point-dock,
  .road-draft-marker,
  .road-draft-marker i { animation: none !important; }
}

.road-vote-counts {
  display: flex;
  gap: 10px;
  margin-top: 7px;
}
.road-vote-counts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
}
.road-vote-counts .like { color: #149456; }
.road-vote-counts .dislike { color: #e04455; }
.road-reaction-dock {
  position: fixed;
  z-index: 790;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .72fr) minmax(120px, .82fr) 44px;
  align-items: stretch;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
  backdrop-filter: blur(18px) saturate(1.15);
  animation: roadDockIn .28s cubic-bezier(.22, 1, .36, 1);
}
.road-reaction-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 7px;
  align-content: center;
  padding: 4px 7px;
}
.road-reaction-summary > span { grid-row: 1 / 3; align-self: center; font-size: 23px; }
.road-reaction-summary b,
.road-reaction-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.road-reaction-summary b { font-size: 14px; }
.road-reaction-summary small { color: var(--muted); font-size: 12px; }
.road-vote,
.road-reaction-close {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  font: inherit;
  font-weight: 800;
}
.road-vote {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.road-vote.agree { color: #138c52; background: color-mix(in srgb, #20ad68 10%, var(--surface)); }
.road-vote.disagree { color: #d93d50; background: color-mix(in srgb, #ed4f61 9%, var(--surface)); }
.road-vote.active { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.road-reaction-close { display: grid; place-items: center; color: var(--muted); }

@media (max-width: 640px) {
  .road-reaction-dock {
    grid-template-columns: 1fr 1fr 42px;
  }
  .road-reaction-summary { grid-column: 1 / -1; }
  .road-vote span { font-size: 12px; }
}

@media (min-width: 900px) {
  .road-reaction-dock { left: 24px; right: auto; width: min(680px, calc(100vw - 48px)); }
}

@media (prefers-reduced-motion: reduce) {
  .road-reaction-dock { animation: none !important; }
}
.map-credit {
  position: fixed;
  z-index: 7;
  right: 10px;
  bottom: calc(76px + var(--safe-bottom));
  padding: 3px 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-solid) 76%, transparent);
  border-radius: 4px;
  font-size: 9px;
  line-height: 1;
  opacity: .78;
}
.map-credit a { color: inherit; text-decoration: none; }
.map-load-status {
  position: fixed;
  z-index: 46;
  top: calc(env(safe-area-inset-top, 0px) + 126px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transform: translateX(-50%);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.map-load-status span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.map-load-status.loading svg { animation: map-loading-spin .8s linear infinite; }
.map-load-status button {
  padding: 6px 8px;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
@keyframes map-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .map-load-status.loading svg { animation: none; }
}
.pin,
.map-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff;
  background: var(--blue);
  border: 3px solid var(--panel-solid);
  box-shadow: 0 10px 24px rgba(20, 23, 31, .24);
}
.map-marker[data-map-pin-kind="request"] { z-index: 8 !important; }
.pin { pointer-events: auto; }
.map-marker {
  position: absolute;
  transform: none;
  pointer-events: auto;
  transition: opacity .16s ease-out;
}
.map-marker.map-marker-entering,
.map-marker.map-marker-leaving {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .map-marker { transition: none; }
}
.pin.round { border-radius: 50% 50% 50% 8px; transform: translate(-50%, -100%) rotate(-45deg); }
.pin.round i { transform: rotate(45deg); }
.pin.skew { transform: translate(-50%, -100%) skewX(-8deg); border-radius: 2px; }
.pin.skew i { transform: skewX(8deg); }
.map-marker.round { border-radius: 50% 50% 50% 8px; }
.map-marker.skew {
  border-radius: 2px;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.pin.request-person,
.map-marker.request-person {
  z-index: 12 !important;
  width: 52px;
  height: 52px;
  overflow: visible;
  color: #fff;
  background: linear-gradient(145deg, #7393ff 0%, #2456ff 68%, #1944dc 100%);
  border: 4px solid #fff;
  border-radius: 50%;
  clip-path: none;
  box-shadow:
    0 0 0 5px rgba(36, 86, 255, .30),
    0 12px 30px rgba(13, 35, 105, .48);
  isolation: isolate;
}
.pin.request-person {
  transform: translate(-50%, -100%);
}
.pin.request-person::before,
.map-marker.request-person::before {
  position: absolute;
  z-index: -1;
  inset: -12px;
  content: "";
  border: 2px solid rgba(92, 129, 255, .70);
  border-radius: 50%;
  background: rgba(36, 86, 255, .10);
  animation: request-person-pulse 2.2s ease-out infinite;
}
.pin.request-person:hover,
.pin.request-person:focus-visible,
.map-marker.request-person:hover,
.map-marker.request-person:focus-visible {
  box-shadow:
    0 0 0 7px rgba(36, 86, 255, .38),
    0 15px 34px rgba(13, 35, 105, .58);
  outline: none;
}
.pin.request-person.active,
.map-marker.request-person.active {
  background: linear-gradient(145deg, #61e09c 0%, #20ae6a 68%, #128851 100%);
  box-shadow:
    0 0 0 5px rgba(32, 174, 106, .30),
    0 12px 30px rgba(5, 82, 47, .48);
}
.request-person-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  display: block;
  padding: 4px 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  border: 2px solid color-mix(in srgb, var(--blue) 55%, var(--panel-solid));
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 23, 31, .30);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.request-person.active .request-person-label {
  border-color: color-mix(in srgb, var(--green) 68%, var(--panel-solid));
}
.request-person-live {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  background: #35d986;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(5, 82, 47, .42);
  pointer-events: none;
}
@keyframes request-person-pulse {
  0% { opacity: .72; transform: scale(.78); }
  72%, 100% { opacity: 0; transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .pin.request-person::before,
  .map-marker.request-person::before { animation: none; }
}
.pin.green { background: var(--green); }
.pin.blue { background: var(--blue); }
.pin.amber { background: var(--amber); }
.pin.red { background: var(--red); }
.pin.ink { background: var(--ink); }
.map-marker.green { background: var(--green); }
.map-marker.blue { background: var(--blue); }
.map-marker.amber { background: var(--amber); }
.map-marker.red { background: var(--red); }
.map-marker.ink { background: var(--ink); }
.map-marker-status {
  position: absolute;
  left: 31px;
  top: 50%;
  max-width: 132px;
  overflow: hidden;
  padding: 4px 7px;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
}
.transport-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(20, 23, 31, .28);
  font-size: 12px;
  font-weight: 900;
}
.transport-marker.bus { background: var(--green); }
.transport-marker.tram { background: var(--red); }
.transport-marker.trolley { background: var(--blue); }
.transport-marker:hover,
.transport-marker:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 34%, transparent);
  outline-offset: 3px;
}
.transport-marker.secondary {
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  opacity: .82;
  font-size: 10px;
}
.transport-marker.selected {
  z-index: 2;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent), 0 9px 20px rgba(20, 23, 31, .32);
}
.pin:hover,
.map-marker:hover,
.pin:focus-visible,
.map-marker:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 36%, transparent);
  outline-offset: 3px;
}

.app-shell {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.topbar,
.bottom-nav,
#overlay-root,
#toast-root { pointer-events: auto; }
.workspace { pointer-events: none; }
.workspace .panel { pointer-events: auto; }

.topbar {
  margin: calc(env(safe-area-inset-top, 0px) + 10px) auto 0;
  width: min(1120px, calc(100% - 20px));
  display: grid;
  gap: 10px;
}
.top-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: var(--radius);
}
.mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 42px;
  color: #fff;
  background: var(--blue);
  transform: skewX(-8deg);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 30%, transparent);
}
.mark span { transform: skewX(8deg); font-family: "Russo One", sans-serif; font-size: 21px; }
.title-wrap { min-width: 0; }
.app-name { font-family: "Russo One", sans-serif; font-size: 18px; letter-spacing: .06em; line-height: 1.05; }
.app-sub { color: var(--muted); font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--ink);
  border-radius: var(--radius);
}
.icon-btn.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.icon-btn.danger { color: #fff; background: var(--red); border-color: var(--red); }
.icon-btn:active { transform: translateY(1px); }
.sos-top-button { position: relative; }
.sos-top-button.active {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 20%, transparent), 0 8px 20px color-mix(in srgb, var(--red) 30%, transparent);
}
.sos-top-button.active > span {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 50%;
  animation: sos-top-pulse 1.4s ease-in-out infinite;
}
@keyframes sos-top-pulse { 50% { transform: scale(.68); opacity: .55; } }

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: var(--radius);
}
.mode-btn {
  border: 0;
  color: var(--muted);
  background: transparent;
  padding: 9px 10px;
  font-weight: 800;
  border-radius: 7px;
}
.mode-btn.active {
  color: #fff;
  background: var(--blue);
}
body.driver .mode-btn.active {
  transform: skewX(-8deg);
  border-radius: 2px;
}
body.driver .mode-btn.active span { display: inline-block; transform: skewX(8deg); }

.workspace {
  align-self: end;
  align-content: end; /* даже если строка грида растянется, панель прижата к низу без пустого хвоста */
  width: min(1120px, calc(100% - 20px));
  margin: 0 auto calc(74px + var(--safe-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  transition: opacity .22s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
}
.workspace .panel {
  max-height: calc(100vh - 210px);
  max-height: calc(100dvh - 210px);
  overflow: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
body.routes-screen.sheet-half .workspace .panel {
  max-height: min(56dvh, 520px);
}

@media (max-width: 899px) {
  /* Настоящая шторка: во всю ширину, скругления сверху, впритык к низу; нав плавает поверх */
  .workspace {
    width: 100%;
    margin: 0;
  }
  /* Ручка подросла до 44 px — возвращаем часть высоты, срезав верхний отступ
     шапки, чтобы шторка не потолстела на экране. */
  .panel-head { padding-top: 10px; }
  .workspace .panel {
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
  }
  /* полэкрана: не выше ~46% (контент меньше — панель по контенту) */
  body.sheet-half .workspace .panel {
    max-height: 46vh;
    max-height: 46dvh;
  }
  /* весь экран: панель растягивается до топбара, скролл внутри */
  body.sheet-full .workspace .panel {
    height: calc(100vh - 148px);
    height: calc(100dvh - 148px);
    max-height: calc(100vh - 148px);
    max-height: calc(100dvh - 148px);
  }
  .workspace .panel .panel-body {
    padding-bottom: calc(86px + var(--safe-bottom));
  }
  .map-hud {
    display: none;
  }
  .map-hud.selection {
    display: grid;
  }
  body.routes-screen.sheet-half .workspace .panel {
    max-height: 44dvh;
  }
  body.routes-screen .panel-head {
    padding: 12px 14px 9px;
  }
  body.routes-screen .panel-body {
    padding: 10px 14px 14px;
    gap: 9px;
  }
  body.routes-screen .search {
    min-height: 42px;
  }
  body.routes-screen .pill-row,
  body.routes-screen .route-source {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.routes-screen .pill-row::-webkit-scrollbar,
  body.routes-screen .route-source::-webkit-scrollbar {
    display: none;
  }
  body.routes-screen .pill,
  body.routes-screen .route-source span {
    flex: 0 0 auto;
  }
  body.routes-screen .wide-label {
    display: none;
  }
  body.routes-screen .short-label {
    display: inline;
  }
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-solid) 62%, transparent);
}
.kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--faint);
  text-transform: uppercase;
}
.screen-title {
  margin-top: 3px;
  font-family: "Russo One", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  line-height: 1.05;
  letter-spacing: .04em;
}
.screen-sub { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.panel-body { padding: 14px 16px 18px; display: grid; gap: 12px; }
.grid-2 { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 10px; }

.soft-card,
.sharp-card {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}
.soft-card { padding: 13px; }
.sharp-card { padding: 13px; border-radius: 2px; }
.sharp-card.accent { border-left: 4px solid var(--blue); }
.sharp-card.green { border-left: 4px solid var(--green); }
.sharp-card.amber { border-left: 4px solid var(--amber); }
.sharp-card.red { border-left: 4px solid var(--red); }

.pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pill,
.skew-pill {
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  white-space: nowrap;
}
.pill { border-radius: 999px; }
.pill.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.pill.green { color: var(--green); background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.pill.amber { color: var(--amber); background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.pill.red { color: var(--red); background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.pill.blue { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }
.pill svg { vertical-align: -2px; margin-right: 2px; }
.short-label { display: none; }
.skew-pill { transform: skewX(-8deg); border-radius: 2px; }
.skew-pill span { display: inline-block; transform: skewX(8deg); }
.skew-pill.active { color: #fff; background: var(--blue); border-color: var(--blue); }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
}
.search input::placeholder { color: var(--faint); }

.sto-entry-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px;
  color: #fff;
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  text-decoration: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #173fc7, #2456ff 62%, #4a77ff);
  box-shadow: 0 14px 34px rgba(36,86,255,.24);
  transition: transform .18s var(--ease-spring), box-shadow .18s ease;
}
.sto-entry-card:active { transform: scale(.985); box-shadow: 0 8px 20px rgba(36,86,255,.2); }
.sto-cabinet-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  color: var(--accent-strong, #2456ff);
  background: var(--accent-soft, rgba(36,86,255,.09));
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.sto-cabinet-link svg { flex: none; }
.sto-cabinet-link:active { transform: scale(.99); }
.sto-entry-card b { display: block; font-size: 16px; }
.sto-entry-card small { display: block; margin-top: 4px; color: rgba(255,255,255,.76); font-size: 12px; }
.sto-entry-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.service-attachment-field { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.service-attachment-field .field-label { color: var(--ink); font-size: 12px; font-weight: 800; }
.service-attachment-field .field-label small { color: var(--muted); font-size: 9px; font-weight: 600; }
.service-attachment-list { display: grid; gap: 7px; }
.service-attachments-empty { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 13px; font-size: 10px; }
.service-attachment-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 13px; }
.service-attachment-item img,
.service-attachment-item video { width: 48px; height: 48px; object-fit: cover; background: #111; border-radius: 9px; }
.service-attachment-item > span { min-width: 0; display: grid; gap: 2px; }
.service-attachment-item b { overflow: hidden; color: var(--ink); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.service-attachment-item small { color: var(--muted); font-size: 9px; }
.service-attachment-item button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); background: var(--paper-2); border: 0; border-radius: 9px; }
.service-attachment-add { min-height: 40px; cursor: pointer; }
.sto-application-lead { display: flex; align-items: flex-start; gap: 11px; padding: 13px; color: var(--blue); background: var(--accent-soft); border-radius: 16px; }
.sto-application-lead > span { display: grid; gap: 3px; color: var(--ink); }
.sto-application-lead b { font-size: 13px; }
.sto-application-lead small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.sto-application-status { display: flex; align-items: flex-start; gap: 9px; padding: 12px; color: var(--green); background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 15px; }
.sto-application-status > span { display: grid; gap: 2px; }
.sto-application-status b { color: var(--ink); font-size: 11.5px; }
.sto-application-status small { color: var(--muted); font-size: 9.5px; }

.route-card,
.trip-card,
.market-card,
.message-card,
.service-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  color: inherit;
  text-align: left;
}
.route-card { grid-template-columns: auto 1fr auto; align-items: center; }
.route-card.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 16%, transparent), var(--shadow-sm);
}
.route-card.suspended {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber-bg) 55%, var(--panel-solid));
}
.route-card.suspended .badge-count { background: var(--amber); }
.market-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.market-card-content { display: grid; gap: 8px; padding: 12px; }
.market-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.market-photo.detail {
  aspect-ratio: 16 / 9;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.market-photo.placeholder {
  display: grid;
  place-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.market-create-action { width: 100%; }
.message-card-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.message-card-copy { min-width: 0; flex: 1 1 auto; }
.message-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.message-card-title .item-title { min-width: 0; overflow-wrap: anywhere; }
.message-card-row > .badge-count,
.message-card-row > .message-card-count { flex: 0 0 auto; }
.route-state-note {
  grid-column: 2 / -1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-weight: 900;
}
.route-state-note.alarm { color: var(--green); }
.route-live-card {
  display: grid;
  gap: 12px;
  padding: 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.route-live-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.route-live-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.route-detail-actions,
.stop-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ghost-action.compact {
  min-height: 40px;
  padding: 0 12px;
  font-size: 12px;
}
.ghost-action.saved {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  background: var(--amber-bg);
}
.route-stop-heading,
.section-heading,
.journey-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.route-stop-list {
  display: grid;
  max-height: 260px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.route-stop-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 7px 4px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.route-stop-row:last-child { border-bottom: 0; }
.route-stop-row::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--blue) 35%, var(--line));
}
.route-stop-row:first-child::before { top: 50%; }
.route-stop-row:last-child::before { bottom: 50%; }
.route-stop-row:hover,
.route-stop-row.active { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.stop-sequence {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--blue);
  background: var(--panel-solid);
  border: 2px solid var(--blue);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
}
.route-stop-row > span:nth-child(2) { min-width: 0; }
.route-stop-row b,
.route-stop-row small { display: block; }
.route-stop-row b { font-size: 12px; line-height: 1.25; }
.route-stop-row small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.route-stop-row em { color: var(--blue); font-size: 11px; font-style: normal; font-weight: 900; white-space: nowrap; }
.route-planner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.place-stack {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--green) 55%, var(--line));
  background: var(--panel-solid);
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 13%, transparent);
}
.place-field:focus-within {
  background: color-mix(in srgb, var(--green) 9%, var(--panel-solid));
}
.place-field:focus-within span { color: var(--green); }
.place-field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  gap: 8px;
  padding: 0 12px;
  background: var(--panel-solid);
}
.place-field + .place-field { border-top: 1px solid var(--line); }
.place-field.origin { grid-template-columns: 92px minmax(0, 1fr) auto; }
.origin-locate {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.origin-locate:active { transform: translateY(1px); }
.place-field span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.place-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  text-overflow: ellipsis;
}
.place-field input::placeholder { color: var(--faint); }
.swap-btn {
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--ink);
  border-radius: var(--radius);
}
.quick-destinations {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.address-results {
  display: grid;
  max-height: 286px;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.address-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 8px 11px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.address-result:last-of-type { border-bottom: 0; }
.address-result:hover,
.address-result:focus-visible { background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid)); }
.address-result-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-solid));
  border-radius: 50%;
}
.address-result b,
.address-result small { display: block; }
.address-result b { font-size: 12px; }
.address-result small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address-search-state,
.address-search-note,
.route-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 800;
}
.address-search-state.selected { color: var(--green); }
.address-search-state.error,
.route-warning { color: var(--amber); }
.address-search-state svg,
.planner-empty.loading svg { animation: vector-spin 1s linear infinite; }
.address-search-state.error svg,
.address-search-state.selected svg { animation: none; }
.address-search-note { margin: 7px; min-height: 0; }
.planner-empty {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
  color: var(--blue);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.planner-empty b,
.planner-empty span { display: block; }
.planner-empty b { color: var(--ink); font-size: 13px; }
.planner-empty span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.planner-empty.error { color: var(--amber); }
@keyframes vector-spin { to { transform: rotate(360deg); } }
.transport-map-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
}
.transport-toggle,
.map-index-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  font-weight: 900;
}
.transport-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  padding-block: 7px;
}
.transport-toggle > svg,
.transport-toggle > i {
  grid-row: 1 / span 2;
}
.transport-toggle > span { min-width: 0; }
.transport-toggle b {
  grid-column: 2;
  line-height: 1.1;
}
.transport-toggle b { color: var(--muted); font-size: 10px; }
.transport-toggle.active {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.transport-toggle.active b { color: rgba(255, 255, 255, .82); }
.map-index-button { grid-template-columns: auto minmax(0, 1fr); }
.planner-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.quick-destinations::-webkit-scrollbar,
.planner-options::-webkit-scrollbar { display: none; }
.planner-option {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: space-between;
  justify-items: start;
  gap: 7px;
  min-height: 72px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--ink);
  text-align: left;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.planner-option.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent), var(--shadow-sm);
}
.option-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
}
.planner-option b { min-width: 0; font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; }
.planner-detail {
  display: grid;
  gap: 12px;
  padding: 13px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}
.journey-time-switch,
.stop-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border-radius: var(--radius);
}
.journey-time-switch button,
.stop-tabs button {
  min-height: 40px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
}
.journey-time-switch button.active,
.stop-tabs button.active {
  color: var(--ink);
  background: var(--panel-solid);
  box-shadow: var(--shadow-sm);
}
.journey-options,
.journey-legs,
.nearby-stop-list,
.stop-arrival-list,
.stop-schedule {
  display: grid;
  gap: 7px;
}
.journey-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  min-height: 56px;
  padding: 9px 10px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}
.journey-option.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent);
}
.journey-option span:first-child b,
.journey-option span:first-child small { display: block; }
.journey-option span:first-child b { font-size: 13px; }
.journey-option span:first-child small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.journey-route-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.journey-route-badge,
.route-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 30px;
  height: 25px;
  padding: 0 6px;
  color: #fff;
  background: var(--route-color, var(--blue));
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
}
.journey-option-tail { display: inline-flex; align-items: center; gap: 2px; color: var(--blue); }
.journey-option-tail strong { font-size: 11px; white-space: nowrap; }
.journey-leg {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 6px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.journey-leg:last-child { border-bottom: 0; }
.journey-leg-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--route-color, var(--blue));
  border-radius: 50%;
}
.journey-leg.transfer .journey-leg-icon { color: var(--blue); background: var(--paper-2); }
.journey-leg b,
.journey-leg small { display: block; }
.journey-leg b { font-size: 12px; }
.journey-leg small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.journey-leg em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }
.navigation-progress { display: grid; gap: 11px; }
.navigation-mode-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 12px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.navigation-mode-status.live { color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, var(--line)); background: color-mix(in srgb, var(--green) 7%, var(--panel-solid)); }
.navigation-mode-status.private { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 36%, var(--line)); background: color-mix(in srgb, var(--blue) 6%, var(--panel-solid)); }
.navigation-mode-picker { gap: 9px; }
.navigation-mode-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 84px;
  padding: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}
.navigation-mode-card:hover,
.navigation-mode-card:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); outline: 0; }
.navigation-mode-card > span { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--blue); border-radius: 50%; }
.navigation-mode-card.private > span { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--panel-solid)); }
.navigation-mode-card b,
.navigation-mode-card small { display: block; }
.navigation-mode-card b { font-size: 13px; }
.navigation-mode-card small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.navigation-privacy-note { display: flex; gap: 7px; align-items: flex-start; padding: 9px 11px; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.navigation-progress-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.navigation-turn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--blue);
  border-radius: var(--radius);
}
.navigation-progress-head small,
.navigation-progress-head b,
.navigation-progress-head em { display: block; }
.navigation-progress-head small { color: var(--blue); font-size: 10px; font-weight: 900; }
.navigation-progress-head b { margin-top: 2px; font-size: 14px; }
.navigation-progress-head em { margin-top: 3px; color: var(--muted); font-size: 11px; font-style: normal; }
.navigation-summary-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.navigation-summary-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.journey-detail-head > div { min-width: 0; flex: 1; }
.journey-detail-head > .icon-btn { flex: none; }
.driver-route-summary,
.driver-guidance {
  display: grid;
  gap: 11px;
  padding: 12px;
  background: color-mix(in srgb, var(--panel-solid) 94%, var(--blue) 6%);
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-left: 4px solid var(--blue);
  border-radius: 2px;
}
.driver-route-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
}
.driver-route-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}
.driver-route-option {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: left;
}
.driver-route-option b,
.driver-route-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-route-option b { font-size: 12px; }
.driver-route-option small { color: var(--muted); font-size: 9px; }
.driver-route-option.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.driver-route-option.active small { color: rgba(255, 255, 255, .82); }
.driver-route-metrics > span {
  min-width: 0;
  padding: 9px;
  background: var(--panel-solid);
}
.driver-route-metrics b,
.driver-route-metrics small { display: block; }
.driver-route-metrics b {
  overflow: hidden;
  color: var(--ink);
  font-family: "Russo One", sans-serif;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.driver-route-metrics small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.driver-step-preview { display: grid; }
.driver-step-preview > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.driver-step-preview > div:last-child { border-bottom: 0; }
.driver-step-preview > div > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-solid));
}
.driver-step-preview p { min-width: 0; margin: 0; }
.driver-step-preview b,
.driver-step-preview small { display: block; }
.driver-step-preview b { font-size: 11.5px; line-height: 1.3; }
.driver-step-preview small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.driver-route-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.driver-route-source > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}
.driver-guidance .navigation-turn { border-radius: 2px; }
.driver-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.driver-layer-toggle {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 49px;
  padding: 6px 8px;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-align: left;
}
.driver-layer-toggle > svg,
.driver-layer-toggle > i {
  justify-self: center;
  color: var(--muted);
}
.driver-layer-toggle span,
.driver-layer-toggle b,
.driver-layer-toggle small { display: block; min-width: 0; }
.driver-layer-toggle b {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.driver-layer-toggle small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.driver-layer-toggle em {
  min-width: 23px;
  padding: 3px 4px;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: 3px;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}
.demand-fog-legend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 2px;
}
.demand-fog-legend > span { display: flex; align-items: center; }
.demand-fog-legend i { display: block; width: 18px; height: 18px; margin-left: -4px; border-radius: 50%; filter: blur(3px); }
.demand-fog-legend i:first-child { margin-left: 0; background: rgba(62, 105, 255, .28); }
.demand-fog-legend i:nth-child(2) { background: rgba(103, 92, 255, .42); }
.demand-fog-legend i:last-child { background: rgba(255, 170, 55, .58); }
.demand-fog-legend b,
.demand-fog-legend small { display: block; }
.demand-fog-legend b { font-size: 10px; }
.demand-fog-legend small { margin-top: 2px; color: var(--muted); font-size: 8.5px; line-height: 1.3; }
.driver-layer-toggle.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.driver-layer-toggle.active > svg,
.driver-layer-toggle.active > i,
.driver-layer-toggle.active small { color: rgba(255, 255, 255, .84); }
.driver-layer-toggle.active em { color: var(--blue); background: #fff; }
.driver-status-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px 0;
  border-block: 1px solid var(--line);
}
.driver-status-bar > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  min-width: 0;
}
.driver-status-bar > span > svg,
.driver-status-bar > span > i { grid-row: 1 / span 2; color: var(--green); }
.driver-status-bar b { font-size: 12px; }
.driver-status-bar small { color: var(--muted); font-size: 9.5px; }
.driver-active-order,
.driver-empty-order,
.driver-request-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border-radius: 12px;
  transition: background .15s ease;
}
.driver-request-row.active {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 45%, transparent);
}
.driver-request-copy {
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 8px 6px;
  cursor: pointer;
}
.driver-request-copy:active { opacity: .7; }
.driver-active-order {
  padding: 10px;
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-left: 4px solid var(--green);
}
.driver-order-icon,
.driver-request-avatar,
.driver-empty-order > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--green);
  border-radius: 2px;
  font-weight: 900;
}
.driver-empty-order {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 0;
  color: var(--muted);
}
.driver-empty-order > span { color: var(--muted); background: var(--paper-2); }
.driver-empty-order b,
.driver-empty-order small { display: block; }
.driver-empty-order b { color: var(--ink); font-size: 12px; }
.driver-empty-order small { margin-top: 2px; font-size: 10px; }
.driver-requests { display: grid; gap: 3px; }
.driver-request-row {
  min-height: 56px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.driver-request-row:last-child { border-bottom: 0; }
.driver-request-row .item-title { font-size: 11.5px; }
.driver-request-row .item-meta { margin-top: 3px; font-size: 9.5px; }
.route-itinerary {
  display: grid;
  gap: 8px;
  position: relative;
}
.route-itinerary::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--line);
}
.planner-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.navigation-progress .planner-actions,
.driver-guidance .planner-actions { grid-template-columns: auto minmax(0, 1fr) auto; }
.planner-actions button:disabled { opacity: .38; pointer-events: none; }
/* Три кнопки (согласие/отказ/отмена): основная на всю строку, две вторичные рядом */
.planner-actions.triple { display: flex; flex-wrap: wrap; }
.planner-actions.triple > .primary-action { flex: 1 1 100%; }
.planner-actions.triple > .ghost-action { flex: 1 1 calc(50% - 4px); min-width: 0; }
.taxi-order-card {
  display: grid;
  gap: 11px;
}
.fare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.fare {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  text-align: left;
}
.fare.active { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--panel-solid)); }
.fare b { font-size: 12px; }
.fare span { color: var(--blue); font-weight: 900; }
.fare small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.ride-flow-card,
.driver-ride-console {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.driver-ride-console {
  border-top-color: var(--green);
  border-radius: 2px;
}
.ride-flow-head,
.driver-ride-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.ride-flow-head > span,
.driver-ride-head > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.ride-flow-head small,
.driver-ride-head small {
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.driver-ride-head small { color: var(--green); }
.ride-flow-head b,
.driver-ride-head b { font-size: 17px; line-height: 1.15; }
.ride-flow-head em,
.driver-ride-head em { color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.3; }
.ride-flow-head > strong,
.driver-ride-head > strong {
  max-width: 132px;
  padding: 6px 8px;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}
.driver-ride-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.ride-flow-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
}
.ride-flow-rail::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 11px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--line);
}
.ride-flow-rail span {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--faint);
  font-size: 8px;
}
.ride-flow-rail i {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  color: var(--muted);
  background: var(--paper-2);
  border: 2px solid var(--panel-solid);
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.ride-flow-rail .active,
.ride-flow-rail .done { color: var(--ink); }
.ride-flow-rail .active i { color: #fff; background: var(--blue); }
.ride-flow-rail .done i { color: #fff; background: var(--green); }
.ride-route-summary { display: grid; gap: 2px; }
.ride-route-summary > span {
  display: grid;
  grid-template-columns: auto 78px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  background: var(--paper);
  border-left: 3px solid var(--blue);
}
.ride-route-summary > span:first-child { border-left-color: var(--green); }
.ride-route-summary svg,
.ride-route-summary i { color: var(--blue); }
.ride-route-summary > span:first-child svg,
.ride-route-summary > span:first-child i { color: var(--green); }
.ride-route-summary small { color: var(--muted); font-size: 9px; font-weight: 800; }
.ride-route-summary b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ride-route-summary.compact > span { grid-template-columns: auto 50px minmax(0, 1fr); min-height: 32px; }
.ride-order-options { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.ride-order-options > div,
.ride-order-options label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.ride-order-options label small { color: var(--faint); font-weight: 600; }
.ride-order-options input,
.pickup-code-form input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
}
.ride-order-options input:focus,
.pickup-code-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.ride-seat-stepper { display: flex; gap: 4px; }
.ride-seat-stepper button {
  width: 33px;
  height: 40px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 900;
}
.ride-seat-stepper button.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.ride-safety-note,
.ride-searching,
.driver-next-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: var(--radius);
}
.ride-searching { color: var(--green); background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 25%, var(--line)); }
.ride-safety-note b,
.ride-safety-note small,
.ride-searching b,
.ride-searching small,
.driver-next-action b,
.driver-next-action small { display: block; }
.ride-safety-note b,
.ride-searching b,
.driver-next-action b { color: var(--ink); font-size: 11px; }
.ride-safety-note small,
.ride-searching small,
.driver-next-action small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.ride-person-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.ride-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
}
.avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.avatar-initial { display: grid; place-items: center; width: 100%; height: 100%; }
.profile-form {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.profile-form-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.profile-avatar,
.driver-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  font-weight: 900;
}
.profile-avatar { width: 64px; height: 64px; font-size: 22px; }
.driver-avatar { width: 38px; height: 38px; font-size: 15px; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-mode-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.camera-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.camera-field > span { min-width: 0; }
.camera-field b,
.camera-field small { display: block; }
.camera-field b { color: var(--ink); font-size: 12px; }
.camera-field small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.camera-field .ghost-action { flex: 0 0 auto; min-height: 38px; padding: 0 10px; font-size: 11px; }
.verification-camera-field { background: color-mix(in srgb, var(--amber-bg) 36%, var(--paper)); }
.driver-avatar-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.driver-avatar-row > span:nth-child(2) { min-width: 0; flex: 1; }
.driver-avatar-row b,
.driver-avatar-row small { display: block; }
.driver-avatar-row b { font-size: 12px; }
.driver-avatar-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.driver-avatar-row .ghost-action { min-height: 36px; padding: 0 9px; font-size: 10px; }
.ride-person-card b,
.ride-person-card small { display: block; }
.ride-person-card b { font-size: 12px; }
.ride-person-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.ride-person-card em { padding: 6px 8px; background: var(--paper-2); border-radius: 4px; font-size: 10px; font-style: normal; font-weight: 900; }
.ride-payment-offer,
.ride-pickup-code { display: grid; justify-items: center; gap: 4px; padding: 14px; background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: var(--radius); text-align: center; }
.ride-payment-offer small,
.ride-pickup-code small { color: var(--muted); font-size: 10px; font-weight: 800; }
.ride-payment-offer b { color: var(--green); font-family: "Russo One", sans-serif; font-size: 24px; }
.ride-payment-offer span,
.ride-pickup-code span { color: var(--muted); font-size: 9px; line-height: 1.35; }
.ride-pickup-code { background: color-mix(in srgb, var(--blue) 8%, var(--panel-solid)); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); }
.ride-pickup-code b { color: var(--blue); font-family: "Russo One", sans-serif; font-size: 36px; letter-spacing: .14em; }
.ride-live-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--paper);
  border-radius: var(--radius);
}
.ride-live-status b { font-size: 11px; }
.ride-live-status em { color: var(--blue); font-size: 11px; font-style: normal; font-weight: 900; }
.ride-map-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: var(--radius);
}
.ride-map-status b,
.ride-map-status small { display: block; }
.ride-map-status b { color: var(--ink); font-size: 10px; }
.ride-map-status small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.ride-map-status button { padding: 6px 8px; color: var(--green); background: var(--panel-solid); border: 1px solid color-mix(in srgb, var(--green) 26%, var(--line)); border-radius: 999px; font-size: 9px; font-weight: 900; }
.pulse-dot { width: 10px; height: 10px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); animation: ride-pulse 1.8s infinite; }
@keyframes ride-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ride-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ride-quick-actions button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 7px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 9px;
  font-weight: 900;
}
.ride-quick-actions button.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 32%, var(--line)); }
.ride-role-link {
  justify-self: center;
  padding: 3px;
  color: var(--blue);
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ride-receipt { display: grid; gap: 6px; padding: 11px; background: var(--paper); border-radius: var(--radius); }
.ride-receipt span { display: grid; gap: 2px; }
.ride-receipt small { color: var(--muted); font-size: 9px; }
.ride-receipt b { font-size: 12px; }
.ride-rating { display: grid; justify-items: center; gap: 5px; }
.ride-rating small { color: var(--muted); font-size: 10px; }
.ride-rating div { display: flex; gap: 3px; }
.ride-rating button { padding: 2px; color: var(--line-strong); background: transparent; border: 0; font-size: 26px; }
.ride-rating button.active { color: var(--amber); }
.payment-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.payment-presets button { padding: 7px 9px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 800; }
.driver-next-action { color: var(--green); background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 25%, var(--line)); }
.pickup-code-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.pickup-code-form input { min-height: 46px; text-align: center; font-family: "Russo One", sans-serif; font-size: 18px; letter-spacing: .12em; }
.driver-offer-form { min-width: min(440px, calc(100vw - 24px)); }
.driver-request-row .item-note { margin-top: 3px; color: var(--green); }
.pickup-row,
.map-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.pickup-row span,
.map-status-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.nearby-stop,
.stop-arrival-row,
.schedule-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 8px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.nearby-stop:last-child,
.stop-arrival-row:last-child,
.schedule-row:last-child { border-bottom: 0; }
.nearby-stop-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 50%;
}
.nearby-stop b,
.nearby-stop small,
.stop-arrival-row b,
.stop-arrival-row small,
.schedule-row b,
.schedule-row small { display: block; }
.nearby-stop b,
.stop-arrival-row b,
.schedule-row b { font-size: 12px; }
.nearby-stop small,
.stop-arrival-row small,
.schedule-row small { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.nearby-arrivals,
.arrival-times,
.schedule-row > span:last-child { display: flex; gap: 4px; align-items: center; }
.nearby-arrivals em {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 32px;
  padding: 3px 5px;
  color: #fff;
  background: var(--route-color, var(--blue));
  border-radius: 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.nearby-arrivals em b { font-size: 8px; }
.arrival-times { justify-content: flex-end; }
.arrival-times strong { color: var(--ink); font-size: 12px; }
.arrival-times em,
.schedule-row > span:last-child em {
  padding: 4px 5px;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: 4px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.stop-data-note { padding-top: 2px; }
.stop-popup { min-width: 220px; max-width: 280px; color: var(--ink); }
.stop-popup .stop-arrivals { margin-top: 9px; }
.stop-arrivals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stop-arrivals > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 8px;
  color: #fff;
  background: var(--route-color, var(--blue));
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
}
.stop-arrivals > span b { color: #fff; font-size: 10px; }
.vector-stop-popup .maplibregl-popup-content {
  padding: 12px;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.vector-stop-popup .maplibregl-popup-close-button {
  width: 28px;
  height: 28px;
  color: var(--muted);
  font-size: 20px;
}
.vector-stop-popup .maplibregl-popup-tip { border-top-color: var(--panel-solid); }
.route-source {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.route-source span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.route-num {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: #fff;
  background: var(--blue);
  font-family: "Russo One", sans-serif;
  font-size: 19px;
  border-radius: 8px;
}
.route-num span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.driver .route-num,
.skew-box {
  transform: skewX(-8deg);
  border-radius: 2px;
}
.driver .route-num span,
.skew-box span { display: inline-block; transform: skewX(8deg); }
.item-title { font-weight: 800; color: var(--ink); line-height: 1.2; min-width: 0; }
.item-meta { color: var(--muted); font-size: 12px; line-height: 1.35; }
.item-note { color: var(--muted); font-size: 11px; line-height: 1.35; }
.price { font-family: "Russo One", sans-serif; color: var(--blue); font-size: 18px; white-space: nowrap; }
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  color: #fff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
}

.primary-action,
.ghost-action,
.danger-action {
  min-height: 46px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 900;
  color: #fff;
  background: var(--blue);
  border-radius: var(--radius);
}
.driver .primary-action,
.driver .danger-action { transform: skewX(-8deg); border-radius: 2px; }
.driver .primary-action > *,
.driver .danger-action > * { transform: skewX(8deg); }
.primary-action {
  background: var(--green);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 26%, transparent);
}
.ghost-action {
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
}
.danger-action { background: var(--red); }
.primary-action:active,
.ghost-action:active,
.danger-action:active { transform: translateY(1px); }
.driver .primary-action:active,
.driver .danger-action:active { transform: skewX(-8deg) translateY(1px); }

/* Шторка: ручка + свёрнутое состояние (виден только «хвостик», остальное — карта) */
.sheet-handle {
  display: grid;
  place-items: center;
  width: 100%;
  /* 44 px — минимальная зона касания. Тап по ручке переключает полэкрана↔весь
     экран, поэтому это самостоятельная цель, а не только зона хвата. */
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  cursor: grab;
}
.sheet-handle span {
  width: 68px;
  height: 7px;
  border-radius: 999px;
  background: var(--line-strong, var(--line));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.sheet-handle:active { cursor: grabbing; }
.panel-head { touch-action: none; }
/* Три положения шторки */
body.sheet-hidden .workspace { transform: none; }
body.sheet-hidden .workspace .panel {
  height: 24px;
  max-height: 24px;
  overflow: hidden;
}
body.sheet-hidden .sheet-handle { height: 24px; }
body.sheet-hidden .sheet-handle span {
  width: 52px;
  height: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
body.sheet-hidden .workspace .panel > :not(.sheet-handle) { visibility: hidden; pointer-events: none; }
body.sheet-hidden.sheet-dragging .workspace .panel > :not(.sheet-handle) { visibility: visible; }
body.sheet-dragging .workspace {
  transition: none !important;
}
#sheet-peek {
  position: fixed;
  z-index: 31;
  left: 50%;
  bottom: calc(88px + var(--safe-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
#sheet-peek:active { transform: translateX(-50%) translateY(1px); }

.step-map-hint {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.35;
}
.step-map-hint.warn { border-left-color: var(--amber); }
.step-map-hint b { display: inline; }

.home-action.active {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 30%, transparent);
}

.home-actions {
  display: grid;
  gap: 12px;
}
.home-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 86px;
  padding: 14px 16px;
  text-align: left;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.home-action:active { transform: translateY(1px); }
.home-action-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #fff;
  background: var(--home-accent, var(--green));
  border-radius: 14px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--home-accent, var(--green)) 30%, transparent);
}
.home-action-text { min-width: 0; }
.home-action-text b {
  display: block;
  font-family: "Russo One", sans-serif;
  font-size: 19px;
  line-height: 1.15;
}
.home-action-text small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
}

.metric-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.metric {
  padding: 10px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.metric b { display: block; font-family: "Russo One", sans-serif; font-size: 18px; color: var(--ink); }
.metric span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.25; }

.bottom-nav {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(var(--nav-count), 1fr);
  gap: 5px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radius);
}
.nav-btn {
  min-width: 0;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 5px 2px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 800;
}
.nav-btn.active {
  color: #fff;
  background: var(--blue);
}
body.driver .nav-btn.active {
  background: var(--blue);
  transform: skewX(-8deg);
  border-radius: 2px;
}
body.driver .nav-btn.active > * { transform: skewX(8deg); }

.map-hud {
  position: fixed;
  z-index: 8;
  left: 10px;
  bottom: calc(86px + var(--safe-bottom));
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 20px));
  pointer-events: none;
}
.hud-card {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.hud-card .item-title { font-size: 13px; }
.hud-card.stop-card {
  max-height: min(58dvh, 520px);
  overflow-y: auto;
}
.stop-card-head { align-items: flex-start; }

.progress {
  height: 8px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  width: var(--value, 50%);
  background: var(--blue);
}
.timeline { display: grid; gap: 8px; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line);
}
.time-point {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px;
  align-items: center;
}
.time-dot {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--blue);
  border: 3px solid var(--panel-solid);
  border-radius: 50%;
  z-index: 1;
}

.chat-window {
  display: grid;
  gap: 10px;
  max-height: min(52dvh, 510px);
  overflow: auto;
  padding-right: 2px;
}
.bubble {
  max-width: 86%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--ink);
  line-height: 1.45;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}
.bubble.me {
  justify-self: end;
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.driver .bubble { border-radius: 2px; }
.composer {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.composer input#conversation-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
.composer .icon-btn { flex: 0 0 auto; }
.composer .icon-btn.primary { color: #fff; background: var(--blue); }
.composer .icon-btn.ghost { background: transparent; color: var(--muted); }
/* Своп «отправить» ↔ «запись» по наличию текста (как в тг): одна аудио-кнопка */
.composer:not(.has-text) .composer-send { display: none; }
.composer.has-text .composer-mode,
.composer.has-text .composer-record { display: none; }
.composer label.icon-btn { cursor: pointer; }

/* Медиа-пузыри в чате */
.chat-photo {
  display: block;
  max-width: 220px;
  max-height: 260px;
  border-radius: 12px;
  object-fit: cover;
}
.chat-audio { width: 220px; max-width: 60vw; }
.bubble-circle { background: transparent !important; border: 0 !important; padding: 0 !important; }
.chat-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

/* Полоса записи */
.avatar-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-photo-actions .ghost-action { flex: 1 1 auto; cursor: pointer; }

/* Рейтинги и отзывы */
.rating-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rating-summary-cell {
  padding: 9px 11px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px;
}
.rating-summary-cell small { display: block; color: var(--muted); font-size: 11px; }
.rating-summary-cell b { display: block; margin-top: 2px; font-size: 13px; color: var(--green); }
.review-form {
  display: grid; gap: 8px; margin: 6px 0 4px; padding: 12px;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius);
}
.review-stars { display: flex; gap: 4px; }
.review-stars button {
  border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--line-strong, #556);
  cursor: pointer; padding: 0 2px;
}
.review-stars button.active { color: #f0a020; }
.review-form textarea {
  width: 100%; min-height: 44px; resize: vertical; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); padding: 8px 10px; font: inherit;
}
.review-done { display: flex; gap: 8px; align-items: flex-start; }
.review-card { padding: 11px 13px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; }
.review-card-stars { color: #f0a020; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.review-card-dim { color: var(--line-strong, #556); }
.review-card-text { margin-top: 6px; font-size: 13px; line-height: 1.35; }

.composer.recording { gap: 10px; }
.rec-dot {
  width: 12px; height: 12px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.rec-preview {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; background: #000;
}
.rec-preview video { width: 100%; height: 100%; object-fit: cover; }
.rec-label { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.15; }
.rec-label b { font-size: 13px; }
.rec-label small { color: var(--muted); font-variant-numeric: tabular-nums; }

.vehicle-plate {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  background: #fff;
  color: #111;
  border: 2px solid #111;
  border-radius: 4px;
  font-weight: 900;
  letter-spacing: .08em;
}
[data-theme="dark"] .vehicle-plate { background: #f6f6ef; color: #111; }
.code-box {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 2px dashed var(--line-strong);
  color: var(--ink);
  font-family: "Russo One", sans-serif;
  font-size: 30px;
  letter-spacing: .14em;
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 16px 10px calc(16px + var(--safe-bottom));
  background: rgba(20, 23, 31, .42);
}
.modal {
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  background: var(--panel-solid);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.modal-body { padding: 16px; display: grid; gap: 12px; }
.camera-modal-body { gap: 10px; }
.camera-preview-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #090b0f;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.camera-preview-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; }
.camera-frame {
  position: absolute;
  inset: 12%;
  border: 2px solid color-mix(in srgb, #fff 78%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 0 999px color-mix(in srgb, #000 22%, transparent);
  pointer-events: none;
}
.camera-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 11px 12px;
  border-radius: var(--radius);
  outline: 0;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.field-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

/* ── Совместимость: чип-фильтр в маркете ─────────────────────────────── */
.fit-chip-row { display: flex; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.fit-chip-row::-webkit-scrollbar { display: none; }
.fit-chip {
  flex: none; min-height: 40px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  background: var(--panel-solid); color: var(--ink);
  border-radius: 999px; font-weight: 700; font-size: 13px;
  cursor: pointer; white-space: nowrap;
}
.fit-chip svg { flex: none; }
.fit-chip.trigger { max-width: 72vw; }
.fit-chip.trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-chip.active { border-color: var(--blue); color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.fit-chip.garage { border-color: color-mix(in srgb, var(--blue) 45%, var(--line-strong)); }
.fit-chip.garage svg { color: var(--blue); }
.fit-chip.garage.active { background: var(--blue); color: #fff; }
.fit-chip.garage.active svg { color: #fff; }
.fit-chip.clear { flex: none; padding: 9px 11px; color: var(--muted); }

/* приглушённый микролейбл «Универсально» на карточке */
.fit-note { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 11px; font-weight: 700; }
.fit-note svg { color: var(--green); }

/* ── Триггер совместимости в форме объявления ───────────────────────── */
.fit-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); cursor: pointer; font-weight: 700;
}
.fit-trigger.chosen { border-color: var(--blue); }
.fit-trigger-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fit-trigger-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-trigger > svg { color: var(--muted); flex: none; }
.fit-quickchip {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 9px 13px; border: 1px solid var(--blue); color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 999px; font-weight: 700; font-size: 12px; cursor: pointer;
}

/* ── FAB «Разместить» ───────────────────────────────────────────────── */
/* Рендерится на уровне body (вне .panel c backdrop-filter, который иначе делает
   containing block для fixed и роняет кнопку внутрь шторки). */
.market-fab {
  position: fixed; right: 16px; bottom: calc(84px + var(--safe-bottom)); z-index: 44;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 18px; border: 0; border-radius: 999px;
  background: var(--blue); color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--blue) 55%, transparent);
  cursor: pointer;
}
.market-fab:active { transform: translateY(1px); }
@media (min-width: 900px) {
  /* На десктопе левая панель-колонка; держим FAB в её нижнем углу, не над картой */
  .market-fab { right: auto; left: 24px; bottom: 24px; }
}

/* ── Пикер марка/модель (шторка поверх всего) ───────────────────────── */
#car-picker-root:empty,
#category-picker-root:empty { display: none; }
.picker-scrim { position: fixed; inset: 0; z-index: 120; background: rgba(12, 14, 20, .55); }
.picker-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 121;
  width: min(560px, 100%); height: 88dvh; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
  overflow: hidden; animation: pickerUp .22s ease;
}
@keyframes pickerUp { from { transform: translate(-50%, 12px); opacity: .4; } to { transform: translate(-50%, 0); opacity: 1; } }
.picker-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px; border-bottom: 1px solid var(--line); }
.picker-title { flex: 1; display: grid; }
.picker-title b { font-size: 17px; }
.picker-title small { color: var(--muted); font-size: 12px; font-weight: 600; }
.picker-lead { display: grid; place-items: center; width: 38px; height: 38px; color: var(--blue); }
.picker-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.picker-search svg { color: var(--muted); flex: none; }
.picker-search input { flex: 1; border: 0; background: transparent; color: var(--ink); padding: 12px 0; outline: 0; font-size: 15px; min-width: 0; }
.picker-list { flex: 1; overflow-y: auto; padding: 4px 8px calc(20px + var(--safe-bottom)); -webkit-overflow-scrolling: touch; }
.picker-group { padding: 12px 10px 6px; color: var(--faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.picker-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 12px; border: 0; background: transparent; color: var(--ink); text-align: left; border-radius: 12px; cursor: pointer; }
.picker-row:hover, .picker-row:active { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.picker-row-ico { display: grid; place-items: center; width: 22px; flex: none; color: var(--muted); }
.picker-row-main { flex: 1; display: grid; gap: 1px; font-weight: 700; font-size: 15px; min-width: 0; }
.picker-row-main small { color: var(--muted); font-weight: 600; font-size: 12px; }
.picker-row > svg:last-child { color: var(--faint); flex: none; }
.picker-row.muted .picker-row-main { color: var(--muted); }
.picker-row.garage { background: color-mix(in srgb, var(--blue) 12%, transparent); }
.picker-row.garage .picker-row-ico { color: var(--blue); }
.picker-row.active { background: color-mix(in srgb, var(--blue) 16%, transparent); }
.picker-empty { padding: 26px 16px; color: var(--muted); text-align: center; font-weight: 600; }
body.picker-open { overflow: hidden; }
.listing-photo-field { gap: 7px; }
.listing-photo-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 92px;
  padding: 12px;
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.listing-photo-picker:hover,
.listing-photo-picker:focus-within {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, var(--paper));
  border-color: var(--blue);
}
.listing-photo-picker > span { display: grid; gap: 2px; }
.listing-photo-picker b { color: var(--ink); font-size: 13px; }
.listing-photo-picker small { color: var(--muted); font-size: 10px; font-weight: 700; }
.listing-photo-picker.ready {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 8;
  padding: 0;
  overflow: hidden;
  border-style: solid;
}
.listing-photo-picker.ready > img { width: 100%; height: 100%; object-fit: cover; }
.listing-photo-change {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  color: #fff;
  background: rgba(20, 23, 31, .76);
  border-radius: 999px;
}
.listing-photo-change b { color: inherit; font-size: 10px; }
.listing-photo-clear { justify-self: start; }
.sos-code-readiness {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sos-code-readiness > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
}
.sos-code-readiness.warning > span { background: var(--amber); }
.sos-code-readiness b,
.sos-code-readiness small { display: block; }
.sos-code-readiness b { font-size: 11px; }
.sos-code-readiness small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.sos-code-readiness button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}
.sos-cancel-body { overflow-anchor: none; }
.sos-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sos-code-field input { text-align: center; font-family: "Russo One", sans-serif; letter-spacing: .12em; }
.sos-safety-note.neutral { color: var(--muted); background: var(--paper); border-color: var(--line); }
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.keypad button {
  height: 48px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--ink);
  font-weight: 900;
  border-radius: var(--radius);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sos-modal-head { border-left: 5px solid var(--line-strong); }
.sos-modal-head.ready { border-left-color: var(--red); }
.sos-modal-head.active { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--panel-solid)); }
.sos-modal-head.helper { border-left-color: var(--blue); }
.sos-modal-head.incoming { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--panel-solid)); }
.sos-modal-head.resolved { border-left-color: var(--green); }
.sos-modal-head.offline { border-left-color: var(--amber); }
.sos-intro,
.sos-helper-situation,
.sos-waiting,
.sos-live-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.sos-intro,
.sos-helper-situation {
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sos-intro > span,
.sos-helper-situation > span,
.sos-waiting > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
}
.sos-helper-situation > span { background: var(--blue); }
.sos-intro b,
.sos-intro small,
.sos-helper-situation b,
.sos-helper-situation small,
.sos-waiting b,
.sos-waiting small { display: block; }
.sos-intro small,
.sos-helper-situation small,
.sos-waiting small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.sos-orb {
  --sos-hold: 0deg;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-content: center;
  width: 170px;
  height: 170px;
  margin: 10px auto 4px;
  overflow: visible;
  color: #fff;
  background: radial-gradient(circle at 38% 30%, #ff7777 0%, #e03b40 38%, #a91922 100%);
  border: 7px solid var(--panel-solid);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--red), 0 0 0 12px color-mix(in srgb, var(--red) 14%, transparent), 0 20px 42px color-mix(in srgb, var(--red) 34%, transparent);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sos-orb::before {
  position: absolute;
  z-index: -1;
  inset: -16px;
  content: "";
  background: conic-gradient(var(--red) var(--sos-hold), color-mix(in srgb, var(--line) 62%, transparent) 0);
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
}
.sos-orb span {
  font-family: "Russo One", sans-serif;
  font-size: 34px;
  letter-spacing: .08em;
}
.sos-orb small { margin-top: 3px; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .76; }
.sos-orb.holding { transform: scale(.97); box-shadow: 0 0 0 2px var(--red), 0 0 0 15px color-mix(in srgb, var(--red) 19%, transparent), 0 14px 34px color-mix(in srgb, var(--red) 40%, transparent); }
.sos-orb.sent { background: var(--green); }
.sos-hold-help { display: grid; gap: 3px; text-align: center; }
.sos-hold-help b { font-size: 13px; }
.sos-hold-help span { color: var(--muted); font-size: 10px; }
.sos-ready-facts { display: grid; gap: 7px; padding: 11px 12px; background: color-mix(in srgb, var(--blue) 5%, var(--panel-solid)); border: 1px solid var(--line); border-radius: var(--radius); }
.sos-ready-facts span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 750; }
.sos-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--amber) 9%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line));
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 1.45;
}
.sos-safety-note.danger { color: var(--ink); background: color-mix(in srgb, var(--red) 10%, var(--panel-solid)); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.sos-safety-note span,
.sos-safety-note b,
.sos-safety-note small { display: block; }
.sos-safety-note small { margin-top: 2px; color: var(--muted); }
.sos-incoming-body { gap: 10px; }
.sos-incoming-signal,
.sos-incoming-location {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sos-incoming-signal { color: var(--ink); background: color-mix(in srgb, var(--red) 11%, var(--panel-solid)); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.sos-incoming-location { background: var(--paper); }
.sos-incoming-signal > span,
.sos-incoming-location > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; }
.sos-incoming-signal > span { background: var(--red); animation: sosIncomingPulse 1s ease-in-out infinite; }
.sos-incoming-location > span { background: var(--blue); }
.sos-incoming-signal b,
.sos-incoming-signal small,
.sos-incoming-location b,
.sos-incoming-location small { display: block; }
.sos-incoming-signal small,
.sos-incoming-location small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.sos-incoming-help { background: var(--red); border-color: var(--red); }
@keyframes sosIncomingPulse { 50% { transform: scale(1.09); box-shadow: 0 0 0 7px color-mix(in srgb, var(--red) 14%, transparent); } }
.sos-live-strip {
  grid-template-columns: 12px auto minmax(0, 1fr);
  padding: 9px 11px;
  background: color-mix(in srgb, var(--red) 8%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius: 999px;
}
.sos-live-strip > span { width: 10px; height: 10px; background: var(--red); border-radius: 50%; animation: sos-top-pulse 1.4s ease-in-out infinite; }
.sos-live-strip b { font-size: 11px; }
.sos-live-strip small { justify-self: end; color: var(--muted); font-size: 9px; }
.sos-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sos-status-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sos-status-item > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); background: var(--panel-solid); border-radius: 50%; }
.sos-status-item.green > span { color: #fff; background: var(--green); }
.sos-status-item.amber > span { color: #fff; background: var(--amber); }
.sos-status-item b,
.sos-status-item small { display: block; }
.sos-status-item b { font-size: 10px; }
.sos-status-item small { margin-top: 2px; color: var(--muted); font-size: 8.5px; line-height: 1.3; }
.sos-situation-block { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); }
.sos-situation-block > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sos-situation-block > div:first-child b { font-size: 12px; }
.sos-situation-block > div:first-child small { color: var(--muted); font-size: 9px; }
.sos-situation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sos-situation-grid button,
.sos-action-grid button,
.sos-helper-actions button {
  display: grid;
  place-items: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 6px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 9px;
  font-weight: 900;
}
.sos-situation-grid button.active { color: #fff; background: var(--red); border-color: var(--red); }
.sos-waiting { padding: 11px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.sos-waiting > span { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--panel-solid)); }
.sos-responder-list { display: grid; gap: 7px; }
.sos-responder-list > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; background: color-mix(in srgb, var(--green) 7%, var(--panel-solid)); border: 1px solid color-mix(in srgb, var(--green) 36%, var(--line)); border-radius: var(--radius); }
.sos-responder-list > div > span { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: var(--green); border-radius: 50%; font-weight: 900; }
.sos-responder-list p { margin: 0; }
.sos-responder-list b,
.sos-responder-list small { display: block; }
.sos-responder-list b { font-size: 10px; }
.sos-responder-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.sos-responder-list em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.sos-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sos-action-grid button { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
.sos-resolve-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 900; }
.sos-timeline { display: grid; gap: 6px; padding-top: 4px; }
.sos-timeline > b { font-size: 11px; }
.sos-timeline > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 9px; }
.sos-timeline time { color: var(--muted); font-weight: 900; }
.sos-helper-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sos-helper-actions button:first-child { color: #fff; background: var(--blue); border-color: var(--blue); }
.sos-helper-actions button:nth-child(2) { color: #fff; background: var(--green); border-color: var(--green); }
.sos-contact-list { display: grid; gap: 7px; }
.sos-contact-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.sos-contact-row > span { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--blue); border-radius: 50%; font-weight: 900; }
.sos-contact-row b,
.sos-contact-row small { display: block; }
.sos-contact-row b { font-size: 11px; }
.sos-contact-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.sos-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; }
.sos-contact-form .ghost-action { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
  .sos-top-button.active > span,
  .sos-live-strip > span { animation: none; }
}

#toast-root {
  position: fixed;
  z-index: 95;
  top: calc(env(safe-area-inset-top, 0px) + 86px);
  right: 12px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  body {
    --desktop-sidebar: 430px;
    --desktop-detail: min(380px, calc(100vw - 470px));
  }
  .app-shell { display: block; }
  .topbar {
    position: fixed;
    z-index: 45;
    inset: 12px 12px auto;
    width: auto;
    min-height: 62px;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: var(--radius);
  }
  .top-main {
    padding: 0 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mode-switch {
    align-self: stretch;
    padding: 4px;
    background: var(--paper-2);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .workspace {
    position: fixed;
    z-index: 20;
    top: 86px;
    bottom: auto;
    left: 12px;
    width: var(--desktop-sidebar);
    height: auto;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    margin: 0;
    display: block;
  }
  .workspace .panel,
  body.routes-screen .workspace .panel {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  }
  /* На десктопе панель — боковая колонка, а не шторка: ручка и сворачивание не нужны */
  .sheet-handle { display: none; }
  body.sheet-hidden .workspace,
  body.sheet-half .workspace,
  body.sheet-full .workspace { transform: none; }
  #sheet-peek { display: none; }
  .workspace .panel::-webkit-scrollbar,
  .hud-card.stop-card::-webkit-scrollbar { width: 8px; }
  .workspace .panel::-webkit-scrollbar-thumb,
  .hud-card.stop-card::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }
  .panel-head {
    position: sticky;
    z-index: 3;
    top: 0;
    background: color-mix(in srgb, var(--panel-solid) 96%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .bottom-nav {
    left: 12px;
    right: auto;
    bottom: 12px;
    width: var(--desktop-sidebar);
    padding: 5px;
    background: color-mix(in srgb, var(--panel-solid) 96%, transparent);
  }
  .map-hud {
    z-index: 24;
    left: auto;
    right: 68px;
    bottom: 12px;
    width: var(--desktop-detail);
    max-height: calc(100dvh - 98px);
  }
  .map-hud.selection {
    top: 86px;
    bottom: 12px;
    max-height: none;
    align-content: start;
    overflow: hidden;
  }
  .map-hud.selection .hud-card,
  .map-hud.selection .hud-card.stop-card {
    max-height: 100%;
    overflow-y: auto;
  }
  .map-controls {
    top: 86px;
    right: 12px;
  }
  body.map-selection .map-controls {
    right: 12px;
  }
  body.map-selection .map-credit {
    right: 68px;
  }
  #toast-root {
    right: auto;
    left: 50%;
    justify-items: center;
    transform: translateX(-50%);
  }
  .map-credit { bottom: 12px; }
  .vector-stop-popup { display: none; }
  .overlay { place-items: center; }
}

@media (max-width: 420px) {
  .top-main { grid-template-columns: auto minmax(0, 1fr) auto; }
  .top-actions { grid-column: auto; justify-content: flex-end; }
  .icon-btn { width: 38px; height: 38px; }
  .app-sub { white-space: normal; }
  .screen-title { font-size: 21px; }
  .grid-2, .grid-3, .profile-form-grid { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-card { grid-template-columns: auto minmax(0, 1fr); }
  .route-card .badge-count { grid-column: 2; width: max-content; }
  .route-live-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .route-live-head .pill {
    grid-column: 2;
    width: max-content;
  }
  .route-live-metrics {
    grid-template-columns: 1fr;
  }
  .bottom-nav { gap: 3px; }
  .nav-btn { font-size: 9.5px; }
  .ride-order-options { grid-template-columns: 1fr; }
  .ride-flow-head,
  .driver-ride-head { grid-template-columns: minmax(0, 1fr); }
  .driver-ride-head .driver-request-avatar { display: none; }
  .ride-flow-head > strong,
  .driver-ride-head > strong { max-width: 100%; justify-self: start; }
  .ride-flow-rail b { font-size: 7px; }
  .ride-route-summary > span,
  .ride-route-summary.compact > span { grid-template-columns: auto 52px minmax(0, 1fr); }
  .ride-person-card { grid-template-columns: auto minmax(0, 1fr); }
  .ride-person-card em { grid-column: 2; justify-self: start; }
  .pickup-code-form { grid-template-columns: 1fr; }
  .camera-field { align-items: flex-start; flex-direction: column; }
  .camera-field .ghost-action { width: 100%; }
}

@media (max-width: 899px) {
  #toast-root {
    top: calc(env(safe-area-inset-top, 0px) + 154px);
    left: 10px;
    right: 10px;
  }
  .toast { max-width: 100%; }
  .workspace .panel {
    max-height: min(50dvh, 460px);
  }
  body.routes-screen.sheet-half .workspace .panel {
    max-height: 44dvh;
  }
  .map-hud {
    display: none;
  }
  .map-hud.selection {
    display: grid;
    bottom: calc(86px + var(--safe-bottom));
  }
  body.stop-selection .workspace,
  body.point-selection .workspace {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
  body.stop-selection .workspace .panel,
  body.point-selection .workspace .panel { pointer-events: none; }
  body.stop-selection .map-hud.selection,
  body.point-selection .map-hud.selection {
    z-index: 35;
    display: grid;
    max-height: min(58dvh, 520px);
  }
  body.stop-selection .hud-card.stop-card,
  body.point-selection .hud-card {
    max-height: min(58dvh, 520px);
  }
  body.stop-selection .vector-stop-popup { display: none; }
  .planner-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .planner-option {
    min-width: 0;
    flex-basis: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 7px;
    padding: 8px;
  }
  .option-icon {
    width: 28px;
    height: 28px;
  }
  .place-field {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 0 10px;
  }
  .place-field span {
    font-size: 11px;
  }
  .journey-option {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .journey-option-tail { grid-column: 2; grid-row: 1 / span 2; }
  .journey-route-badges { grid-column: 1; }
  .nearby-stop {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .nearby-arrivals {
    grid-column: 2;
    justify-self: start;
  }
  .map-controls {
    top: 148px;
    bottom: auto;
    right: 10px;
    grid-template-columns: 40px; /* вертикальная колонка в правом верхнем углу — не зависит от высоты шторки */
  }
  .map-credit { bottom: calc(82px + var(--safe-bottom)); }
}

@media (max-width: 340px) {
  .map-controls { grid-template-columns: 40px; }
  .map-tool { width: 40px; height: 40px; }
  .place-field { grid-template-columns: 64px minmax(0, 1fr); gap: 6px; padding-inline: 8px; }
  .place-field.origin { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .place-field input { font-size: 13px; }
}

@media (max-width: 340px) and (max-height: 600px) {
  .map-controls .map-tool-zoom { display: none; }
}
#sheet-peek { display: none !important; }

@media (max-width: 420px) {
  .sos-status-grid { grid-template-columns: 1fr; }
  .sos-code-grid { grid-template-columns: 1fr; }
  .sos-situation-grid { grid-template-columns: 1fr 1fr; }
  .sos-action-grid { grid-template-columns: 1fr; }
  .sos-contact-form { grid-template-columns: 1fr; }
  .sos-live-strip { grid-template-columns: 10px minmax(0, 1fr); }
  .sos-live-strip small { grid-column: 2; justify-self: start; }
  .sos-orb { width: 154px; height: 154px; }
}

/* Кнопка «указать точку на карте» в полях Откуда/Куда */
.place-field.has-pick { grid-template-columns: 92px minmax(0, 1fr) auto; }
.place-field.origin.has-pick { grid-template-columns: 92px minmax(0, 1fr) auto auto; }
.origin-locate.map-pick-btn.active {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
@media (max-width: 899px) {
  .place-field.has-pick { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .place-field.origin.has-pick { grid-template-columns: 72px minmax(0, 1fr) auto auto; }
}
@media (max-width: 340px) {
  .place-field.has-pick { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px; }
  .place-field.origin.has-pick { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
}
@media (pointer: coarse) {
  .origin-locate { width: 40px; height: 40px; border-radius: 11px; }
}


/* ── Дорожные комментарии (вкладка «Связь» + метки на карте) ── */
.road-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.road-chip { border: 1px solid rgba(125, 135, 155, 0.35); background: transparent; color: inherit; border-radius: 999px; padding: 7px 12px; font-size: 13px; cursor: pointer; font: inherit; }
.road-chip.active { border-color: #2456ff; background: rgba(36, 86, 255, 0.16); }
.road-compose-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px; border-radius: 10px; border: 1px solid rgba(125, 135, 155, 0.35); background: transparent; color: inherit; padding: 9px 11px; font: inherit; margin-bottom: 10px; }
.road-compose-point { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.road-compose-open { width: 100%; justify-content: center; }
.road-card .item-note { margin-top: 8px; }
.road-list { margin-top: 10px; }
.road-emoji { font-size: 15px; margin-right: 2px; }
.road-item .item-meta { white-space: normal; }
.road-comment-popup .maplibregl-popup-content { border-radius: 12px; padding: 12px 14px; background: #141a24; color: #f2f5fa; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.road-comment-popup .maplibregl-popup-close-button { color: #f2f5fa; font-size: 18px; }
.road-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.road-popup-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12.5px; color: var(--road-color, #2456ff); }
.road-popup-head small { opacity: 0.65; font-size: 11.5px; }
.road-popup-text { font-size: 13.5px; line-height: 1.35; margin-bottom: 6px; }
.road-popup-meta { font-size: 11.5px; opacity: 0.6; margin-bottom: 8px; }
.road-popup-actions { display: flex; gap: 8px; }
.road-comment-cluster-popup .maplibregl-popup-content { width: min(310px, calc(100vw - 40px)); }
.road-popup-cluster-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 12px; margin-bottom: 8px; }
.road-popup-cluster-title small { font-size: 11px; opacity: 0.62; white-space: nowrap; }
.road-popup-cluster-list { max-height: min(52vh, 390px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.road-popup-cluster-item { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.11); }
.road-popup-cluster-item:first-child { border-top: 0; padding-top: 2px; }
.road-popup-cluster-more { padding-top: 9px; font-size: 11.5px; opacity: 0.68; }
@media (pointer: coarse) {
  .road-chip { padding: 10px 14px; font-size: 14px; }
  .road-popup-cluster-list { max-height: min(48vh, 360px); }
}

/* ==== Редизайн стартового экрана по эргономике Я.Карт (05.08.2026) ==== */

/* Нижние вкладки убраны — все разделы в меню за кнопкой-лого */
.bottom-nav { display: none !important; }

/* Топбар: только маленькое лого слева сверху (+SOS при активной поездке) */
.topbar { pointer-events: none; }
.top-float {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}
.top-float > * { pointer-events: auto; }
.brand-fab {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  background: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 60%, #fff 8%);
  border-radius: 14px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--blue) 36%, transparent);
  transform: skewX(-6deg);
  transition: transform .16s ease, box-shadow .16s ease;
}
.brand-fab span {
  transform: skewX(6deg);
  font-family: "Russo One", sans-serif;
  font-size: 21px;
  line-height: 1;
}
.brand-fab:active { transform: skewX(-6deg) scale(.94); }
.brand-fab.active { box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 55%, transparent); }
.top-sos { width: 46px; height: 46px; border-radius: 14px; }

/* Компактный док внизу: строка поиска + сохранённые, ниже — полка приложений */
body.sheet-dock .workspace { opacity: 0; pointer-events: none; }
body.sheet-dock .workspace .panel { pointer-events: none; }
#bottom-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + var(--safe-bottom));
  z-index: 30;
  width: min(560px, calc(100% - 20px));
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.dock-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.dock-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  background: color-mix(in srgb, var(--paper-2) 84%, transparent);
  border: 1px solid var(--line);
  border-radius: 15px;
}
.dock-search:active { transform: scale(.99); }
.dock-bookmark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-2) 84%, transparent);
  border: 1px solid var(--line);
  border-radius: 15px;
}
.dock-apps {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dock-app {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 74px;
  padding: 7px 10px 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 12px;
}
.dock-app:active { background: color-mix(in srgb, var(--paper-2) 80%, transparent); }
.dock-app-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(135deg, #1a8a54, #2ec27e);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(26, 138, 84, .32);
}

/* Меню-хаб: плитки разделов */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.menu-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px;
  text-align: left;
  background: color-mix(in srgb, var(--paper-2) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .14s ease, border-color .14s ease;
}
.menu-tile:active { transform: scale(.97); }
.menu-tile-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: var(--tile-accent, var(--blue));
  border-radius: 14px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tile-accent, var(--blue)) 30%, transparent);
}
.menu-tile-text { display: grid; gap: 2px; min-width: 0; }
.menu-tile-text b { font-size: 14.5px; overflow-wrap: anywhere; }
/* Подпись в плитке жила в одну строку и обрезалась многоточием: колонка текста
   в двухколоночной сетке — всего ~64 px, а «История и попутки» просит 109 px.
   Даём две строки — обрезки не остаётся ни в одном пункте меню. */
.menu-tile-text small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Шеврон в плиточной сетке — лишний: он не ведёт себя как отдельная цель и
   отъедал у подписи 29 px из тех самых 92-х. В списочных меню он остаётся. */
.menu-grid .menu-tile-chevron { display: none; }
.menu-grid .menu-tile { grid-template-columns: auto minmax(0, 1fr); }
.menu-row { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-row .ghost-action { flex: 1 1 auto; justify-content: center; }

/* Рейка слоёв справа сверху: кнопка «слои» + закреплённые слои под ней */
.map-rail {
  position: fixed;
  z-index: 8;
  right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  display: grid;
  gap: 2px;
  padding: 4px;
  background: color-mix(in srgb, var(--panel-solid) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(7, 13, 20, .2);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  pointer-events: auto;
}
[data-theme="dark"] .map-rail {
  background: rgba(20, 28, 38, .82);
  border-color: rgba(145, 163, 179, .2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}
.map-rail .rail-toggle.active,
.map-rail .rail-layer.active {
  color: #fff;
  background: var(--blue);
}
.map-rail .rail-layer { opacity: .82; }
.map-rail .rail-layer.active { opacity: 1; }
.layer-symbol { display: block; flex: 0 0 auto; }
[data-layer-key="places"] { --layer-accent: #0f9f78; }
[data-layer-key="layers"] { --layer-accent: #2864ff; }
[data-layer-key="demand"] { --layer-accent: #8b5cf6; }
[data-layer-key="parking"] { --layer-accent: #2f6bff; }
[data-layer-key="fuel"] { --layer-accent: #f4712e; }
[data-layer-key="service"] { --layer-accent: #7a5cff; }
[data-layer-key="events"], [data-layer-key="alerts"] { --layer-accent: #ff4d6d; }
/* Маркеры слоёв на карте используют тот же акцент и тот же SVG, что шторка. */
.map-marker[data-layer-key],
.pin[data-layer-key] { background: var(--layer-accent); }
.map-marker[data-layer-key="fuel"][data-availability-level]::after,
.pin[data-layer-key="fuel"][data-availability-level]::after {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  content: "";
  background: #4f8cff;
  border: 2px solid var(--panel-solid);
  border-radius: 50%;
}
.map-marker[data-layer-key="fuel"][data-availability-level="green"]::after,
.pin[data-layer-key="fuel"][data-availability-level="green"]::after { background: #16a66a; }
.map-marker[data-layer-key="fuel"][data-availability-level="amber"]::after,
.pin[data-layer-key="fuel"][data-availability-level="amber"]::after { background: #f0a12c; }
.map-rail .map-tool[data-layer-key] { color: var(--layer-accent); }
.map-rail .rail-toggle.active,
.map-rail .rail-layer.active {
  color: #fff;
  background: var(--layer-accent);
  border-color: color-mix(in srgb, var(--layer-accent) 78%, #fff);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--layer-accent) 34%, transparent);
}

/* Кнопки навигации карты сдвигаем под реальный низ рейки слоёв (JS пишет
   --rail-bottom после каждой перерисовки рейки), но не ниже безопасного потолка:
   на коротких экранах (390×600) колонка управления не должна утыкаться в док. */
.map-controls {
  top: min(
    calc(var(--rail-bottom, calc(env(safe-area-inset-top, 0px) + 258px)) + 10px),
    calc(100vh - 368px)
  );
  transition: top .22s cubic-bezier(.2, .8, .3, 1);
}
@supports (height: 100dvh) {
  .map-controls {
    top: min(
      calc(var(--rail-bottom, calc(env(safe-area-inset-top, 0px) + 258px)) + 10px),
      calc(100dvh - 368px)
    );
  }
}
/* Сама рейка тоже не растёт бесконечно: при куче слоёв — внутренняя прокрутка.
   На коротком экране оставляем место для четырёх controls (206px), двух
   зазоров и нижнего дока. Без третьего ограничения рейка 46vh доходила до
   Y≈288 на 390×600, а controls из-за своего потолка начинались с Y=232. */
.map-rail {
  max-height: min(46vh, 340px, max(96px, calc(100vh - 390px - env(safe-area-inset-top, 0px))));
  overflow-y: auto;
  scrollbar-width: none;
}
@supports (height: 100dvh) {
  .map-rail {
    max-height: min(46dvh, 340px, max(96px, calc(100dvh - 390px - env(safe-area-inset-top, 0px))));
  }
}
.map-rail::-webkit-scrollbar { display: none; }

/* Карточка точки не должна висеть поверх поиска/дока. Док уезжает вниз с
   анимацией (а не схлопывается мгновенно), полноэкранная шторка просто прячется. */
#bottom-dock { transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .22s ease; }
body.point-card-open #bottom-dock {
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
}
body.point-card-open #sheet-peek,
body.point-card-open .workspace { display: none; }

/* Плавность: кнопки карты и чипы дока отвечают на нажатие, слои появляются мягко */
.map-tool { transition: transform .16s cubic-bezier(.2, .8, .3, 1), background .2s ease, color .2s ease; }
.map-tool:active { transform: scale(.9); }
.map-rail .rail-layer { animation: railPop .2s cubic-bezier(.2, .8, .3, 1); }
@keyframes railPop { from { opacity: 0; transform: translateY(-6px) scale(.85); } to { opacity: 1; transform: none; } }
.dock-search, .dock-chip { transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease; }
.dock-search:active, .dock-chip:active { transform: scale(.97); }

/* Полушторка выбора слоёв: лёгкое затемнение карты + карточки-переключатели */
#layers-sheet { position: fixed; inset: 0; z-index: 40; }
.layers-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 22, .3);
  animation: layersFade .18s ease;
}
@keyframes layersFade { from { opacity: 0; } to { opacity: 1; } }
.layers-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(560px, 100%);
  max-height: 52dvh;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 14px 14px calc(14px + var(--safe-bottom));
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 44px rgba(7, 13, 20, .3);
  animation: layersRise .22s ease;
}
@keyframes layersRise { from { transform: translateX(-50%) translateY(24px); opacity: .4; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.layers-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.layers-head b { font-size: 16px; }
.layers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.layers-card {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 13px 10px 11px;
  text-align: center;
  background: color-mix(in srgb, var(--paper-2) 82%, transparent);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .16s cubic-bezier(.2, .8, .3, 1);
}
.layers-card:active { transform: scale(.96); }
.layers-card b { font-size: 13.5px; }
.layers-card small { color: var(--muted); font-size: 11px; }
.layers-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 40%, transparent);
  border-radius: 13px;
  color: var(--layer-accent, var(--muted));
  transition: color .2s ease, background .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
}
.layers-card.pinned {
  border-color: color-mix(in srgb, var(--layer-accent, var(--blue)) 72%, var(--line));
  background: color-mix(in srgb, var(--layer-accent, var(--blue)) 8%, var(--paper-2));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--layer-accent, var(--blue)) 12%, transparent);
}
.layers-card.pinned .layers-card-icon { color: #fff; background: var(--layer-accent, var(--blue)); box-shadow: 0 8px 18px color-mix(in srgb, var(--layer-accent, var(--blue)) 30%, transparent); transform: translateY(-1px); }

/* Мягкое «моргание» слоя карты при переключении (только подложка, не маркеры) */
@keyframes mapBlink { 0% { opacity: 1; } 45% { opacity: .5; } 100% { opacity: 1; } }
#yandex-map.map-blink { animation: mapBlink .38s ease; }
#map .maplibregl-canvas.map-blink { animation: mapBlink .38s ease; }

/* ==== Правки по ревью (05.08.2026, раунд 2) ==== */

/* D4: на широком экране старая шапка оставляла пустую полосу во всю ширину —
   топбар теперь только по размеру лого-кнопки, без фона и подложки */
@media (min-width: 900px) {
  .topbar {
    position: fixed;
    inset: 12px auto auto 12px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* D4: у Яндекса нет тёмной темы — в тёмном интерфейсе затемняем подложку инверсией.
   Фильтр только на контейнере подложки, интерфейс и маркеры не затрагивает. */
[data-theme="dark"] #yandex-map {
  filter: invert(1) hue-rotate(180deg) saturate(.8) brightness(.9) contrast(.95);
}

/* ==== Правки по замечаниям владельца (05.08.2026, ночь) ==== */

/* Лого-кнопка = аватар: фото профиля или силуэт; круглая, без скоса */
.brand-fab {
  transform: none;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
}
.brand-fab:active { transform: scale(.94); }
.brand-fab.active { transform: none; }
.brand-fab svg { display: block; }
.brand-fab-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Метка «я здесь»: синяя точка с пульсом, отдельный DOM-элемент поверх карты */
.user-loc { position: relative; width: 22px; height: 22px; pointer-events: none; }
.user-loc-dot {
  position: absolute;
  inset: 4px;
  background: #2456ff;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(36, 86, 255, .55);
}
.user-loc-pulse {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: rgba(36, 86, 255, .28);
  animation: userLocPulse 2.2s ease-out infinite;
}
@keyframes userLocPulse {
  0% { transform: scale(.55); opacity: .9; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Пин выбранной точки */
.point-card-pin {
  width: 26px;
  height: 26px;
  background: #e0483f;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: 0 6px 16px rgba(224, 72, 63, .5);
}

/* Карточка точки: адрес + «Маршрут», выезжает снизу вместо дока.
   Док скрывается правилом с transform/opacity выше: display:none здесь
   обрывал transition и делал переключение снова мгновенным. */
#point-card {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + var(--safe-bottom));
  z-index: 31;
  width: min(560px, calc(100% - 20px));
  max-height: min(70dvh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  animation: dockRise .24s cubic-bezier(.2, .8, .3, 1);
}
/* Фото места появляется только после реальной загрузки (класс .loaded из
   app.js): скрытый по умолчанию элемент не создаёт пустого белого блока,
   который мигал в карточке при недоступном снимке. */
.point-card-photo { display: none; }
.point-card-photo.loaded {
  display: block; width: calc(100% + 28px); height: clamp(120px, 22dvh, 190px);
  margin: -14px -14px 2px; object-fit: cover; background: var(--surface-2);
  border-radius: 20px 20px 12px 12px;
  animation: pointPhotoIn .28s ease;
}
@keyframes pointPhotoIn { from { opacity: 0; } to { opacity: 1; } }
/* Атрибуция снимка (автор · лицензия) — обязательна для CC BY/BY-SA Викисклада.
   Показывается только вместе с реально загруженным фото. */
.point-card-photo-credit { display: none; }
.point-card-photo.loaded + .point-card-photo-credit {
  display: inline-flex; position: absolute; right: 0; z-index: 1;
  top: calc(clamp(120px, 22dvh, 190px) - 40px);
  max-width: 80%; padding: 3px 9px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  color: rgba(255, 255, 255, .92); font-size: 10.5px; font-weight: 600;
  background: rgba(10, 14, 22, .55); border-radius: 9px 0 0 9px;
  text-decoration: none; animation: pointPhotoIn .28s ease;
}
.point-card-photo-credit > * { flex: 0 0 auto; color: inherit; }
.point-card-photo-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); }
.point-card-photo-credit .point-card-photo-source { max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
.point-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.point-card-text { display: grid; gap: 3px; min-width: 0; }
.point-card-text b { font-size: 15px; line-height: 1.3; }
.point-card-text small { color: var(--muted); font-size: 11.5px; }
.point-card-address { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.point-card-address svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.point-card-route-note {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px;
  color: var(--ink); font-size: 12.5px; font-weight: 650;
  background: color-mix(in srgb, var(--green) 12%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 12px;
}
.point-card-route-note svg { flex: 0 0 auto; color: var(--green); }
#point-card.closing { animation: pointCardFall .2s cubic-bezier(.4, 0, .8, .4) forwards; pointer-events: none; }
@keyframes pointCardFall {
  to { transform: translateX(-50%) translateY(24px); opacity: 0; }
}
.point-card-description {
  color: var(--text); font-size: 12.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.point-card-places { display: grid; gap: 7px; }
.point-card-places-title { font-size: 13px; }
.point-card-places-list {
  display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 13px;
  background: var(--paper-2);
}
.point-card-place {
  width: 100%; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; padding: 8px 10px; color: var(--text); text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
}
.point-card-place:last-child { border-bottom: 0; }
.point-card-place:active { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.point-card-place-icon {
  width: 30px; height: 30px; display: grid; place-items: center; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 11%, var(--panel-solid)); border-radius: 9px;
}
.point-card-place-copy { min-width: 0; display: grid; gap: 1px; }
.point-card-place-copy b,
.point-card-place-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.point-card-place-copy b { font-size: 12.5px; }
.point-card-place-copy small,
.point-card-place-distance,
.point-card-places-more { color: var(--muted); font-size: 11px; }
.point-card-place-distance { white-space: nowrap; }
.point-card-places-more { padding-left: 2px; }
.point-card-links { display: flex; flex-wrap: wrap; gap: 7px; }
.point-card-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
  color: var(--accent); font-size: 12px; font-weight: 750; text-decoration: none;
}
.point-card-actions { display: flex; gap: 8px; align-items: stretch; }
.point-card-actions-primary {
  position: sticky;
  top: -14px;
  z-index: 4;
  margin: 0 -4px;
  padding: 9px 4px 8px;
  background: linear-gradient(to bottom, var(--panel-solid) 76%, color-mix(in srgb, var(--panel-solid) 0%, transparent));
}
.point-card-actions .primary-action { flex: 1; justify-content: center; }
.point-card-actions .ghost-action { flex: 0 0 auto; justify-content: center; white-space: nowrap; }
.point-card-actions-primary {
  position: sticky;
  z-index: 2;
  top: -14px;
  margin: 0 -4px 2px;
  padding: 6px 4px 8px;
  background: linear-gradient(180deg, var(--panel-solid) 72%, transparent);
}

.point-card-actions-primary .primary-action,
.point-card-actions-primary .ghost-action { min-height: 48px; }
.saved-place-pin {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border-radius: 50% 50% 50% 3px; transform: rotate(45deg);
  background: #f5b301; color: #3a2c00; border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .32); cursor: pointer;
}
.saved-place-pin svg { transform: rotate(-45deg); }
.save-place-form { display: grid; gap: 12px; }
.save-place-form .primary-action { width: 100%; justify-content: center; }
.saved-place-list { align-content: start; }
.saved-place-row {
  width: 100%; min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface-2); color: var(--text); text-align: left;
}
.saved-place-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.saved-place-row b, .saved-place-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-place-row small { color: var(--muted); font-size: 12px; }
.saved-place-row-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(245, 179, 1, .15); color: #d79900; }
.saved-routes-link { width: 100%; justify-content: center; }

/* Плавность: меню и док въезжают снизу; меню — почти весь экран */
@keyframes dockRise {
  from { transform: translateX(-50%) translateY(26px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
#bottom-dock { animation: dockRise .26s cubic-bezier(.2, .8, .3, 1); }
@keyframes panelRise {
  from { transform: translateY(7%); opacity: .35; }
  to { transform: translateY(0); opacity: 1; }
}
body.menu-screen .workspace .panel { animation: panelRise .28s cubic-bezier(.2, .8, .3, 1); }
@media (max-width: 899px) {
  body.menu-screen.sheet-full .workspace .panel {
    height: calc(100dvh - 68px);
    max-height: calc(100dvh - 68px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #bottom-dock, body.menu-screen .workspace .panel, #point-card { animation: none; }
  .user-loc-pulse { animation: none; opacity: 0; }
}

/* Тёмная тема: карта больше не «абсолютно тёмная» — вместо полной инверсии
   слегка приглушённая светлая подложка под тёмным интерфейсом */
[data-theme="dark"] #yandex-map {
  filter: brightness(.78) saturate(.85) contrast(1.02);
}

/* D1 из ревью: выходная анимация меню — панель мягко уезжает вниз перед возвратом к доку */
@keyframes panelFall {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(9%); opacity: 0; }
}
body.menu-closing .workspace {
  animation: panelFall .3s cubic-bezier(.5, 0, .8, .4) forwards;
  pointer-events: none; /* во время закрытия плитки уже не кликабельны */
}
@media (prefers-reduced-motion: reduce) {
  body.menu-closing .workspace { animation: none; }
}

/* ============================================================
   Дизайн-система «Вариант A» (выбор владельца, 05.08.2026):
   холодная светлая палитра, белые карточки, синие line-иконки,
   круглые кнопки карты, крупные радиусы, мягкие тени.
   Тёмная тема — те же формы на тёмных токенах, карта остаётся
   приглушённо-светлой (не «абсолютно тёмной»).
   ============================================================ */

:root {
  --paper: #eef1f6;
  --paper-2: #e4e9f1;
  --panel: rgba(255, 255, 255, .95);
  --panel-solid: #ffffff;
  --ink: #171c26;
  --muted: #5f697b;  /* 4.54:1 на сером поле, 5.54:1 на белом — WCAG AA */
  --faint: #6d7788;  /* 4.52:1 на белом */
  --line: #e5e9f0;
  --line-strong: #d2d9e4;
  --blue: #1f6bff;
  --blue-2: #1450cf;
  --green: #23a05d;
  --green-bg: #e6f6ec;
  --shadow: 0 18px 44px rgba(23, 28, 38, .13);
  --shadow-sm: 0 6px 20px rgba(23, 28, 38, .08);
  --radius: 16px;
}
[data-theme="dark"] {
  --paper: #12151c;
  --paper-2: #1a1e28;
  --panel: rgba(27, 31, 41, .95);
  --panel-solid: #1c212c;
  --ink: #edf0f6;
  --muted: #9aa3b4;
  --faint: #878fa0;  /* 4.96:1 на тёмной карточке */
  --line: #2a303d;
  --line-strong: #3a4150;
  --blue: #4d84ff;
  --blue-2: #7ba2ff;
  --green: #3fbf7a;
  --green-bg: rgba(63, 191, 122, .15);
  --shadow: 0 18px 46px rgba(0, 0, 0, .45);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .3);
}

/* Аватар-кнопка: белое кольцо, синий силуэт (фото — как есть) */
.brand-fab {
  color: var(--blue);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.brand-fab.active { box-shadow: var(--shadow-sm); }

/* Кнопки карты: отдельные белые круги с синими иконками */
.map-rail, .map-controls {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  gap: 10px;
}
[data-theme="dark"] .map-rail, [data-theme="dark"] .map-controls {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.map-tool {
  width: 44px;
  height: 44px;
  color: var(--blue);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.map-tool:hover, .map-tool:focus-visible { color: #fff; background: var(--blue); }
.map-rail .rail-layer { opacity: 1; color: var(--muted); }
.map-rail .rail-toggle.active, .map-rail .rail-layer.active { color: #fff; background: var(--blue); }

/* Док: белая карта, серое поле поиска, два чипа с шевронами (макет A) */
#bottom-dock {
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  border-color: var(--line);
}
.dock-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 16px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--muted);
  background: var(--paper-2);
  border: 0;
  border-radius: 14px;
}
.dock-search svg { color: var(--muted); }
.dock-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dock-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 15px;
}
.dock-chip:active { transform: scale(.98); }
.dock-chip-icon { display: grid; place-items: center; color: var(--blue); }
.dock-chip-icon.green { color: var(--green); }
.dock-chip-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-chip > svg:last-child { color: var(--faint); }

/* Меню: шапка «Профиль» с аватаром и крестиком; плитки — line-иконки без плашек */
body.menu-screen .panel-head { display: none; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.menu-head-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 6px;
  font-size: 18px;
  background: transparent;
  border: 0;
  border-radius: 14px;
}
.menu-head-profile:active { background: var(--paper-2); }
.menu-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  font-weight: 700;
}
.menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.menu-close-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); border: 0; }
.menu-tile {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.menu-tile-icon {
  width: 40px;
  height: 40px;
  color: var(--blue);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.menu-tile-chevron { color: var(--faint); display: grid; place-items: center; }
.menu-tile-text b { font-size: 15px; }

/* Карточка точки: адрес, серое поле координат, широкая синяя кнопка (макет A, экран 3) */
#point-card { border-radius: 22px; border-color: var(--line); }
.point-card-text b { font-size: 17px; }
.point-card-coords {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13.5px;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: 12px;
}
.point-card-coords svg { color: var(--muted); }
.point-card-actions .primary-action {
  min-height: 52px;
  border-radius: 14px;
  font-size: 15.5px;
  background: var(--blue);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 26%, transparent);
}

/* Единый стиль основных кнопок и полей под палитру A */
.primary-action { border-radius: 14px; }
.layers-panel { border-radius: 22px 22px 0 0; }
.layers-card { border-radius: 16px; }
.layers-card.pinned .layers-card-icon { box-shadow: none; }

/* Тёмная тема: карта приглушённо-светлая (не инверсия) — требование владельца */
[data-theme="dark"] #yandex-map { filter: none; }

/* ==== Вариант A: внутренние экраны (маршруты, сервис, маркет, связь, гараж) ====
   Общие примитивы приводятся к утверждённой системе: один синий CTA,
   без скошенных элементов старого стиля, спокойные поля и заголовки. */

/* Единственный акцент действий — синий (зелёный остаётся семантикой «наличие/успех» в чипах) */
.primary-action {
  background: var(--blue);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 26%, transparent);
}

/* Срочный SOS — семантическое исключение: глобальный синий CTA не должен
   перекрашивать подтверждённое опасное состояние «Могу помочь». */
.primary-action.sos-incoming-help {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--red) 28%, transparent);
}

/* Скошенные элементы старого «спортивного» стиля выравниваются */
.driver .primary-action,
.driver .danger-action { transform: none; border-radius: 14px; }
.driver .primary-action > *,
.driver .danger-action > * { transform: none; }
.driver .primary-action:active,
.driver .danger-action:active { transform: translateY(1px); }
.skew-pill { transform: none; border-radius: 999px; }
.skew-pill span { display: inline; transform: none; }
.sharp-card { border-radius: var(--radius); }

/* Поле поиска: спокойное серое, фокус — синим, без зелёной рамки */
.search {
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 14px;
  box-shadow: none;
}
.search:focus-within {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}
.place-field:focus-within { background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid)); }
.place-field:focus-within span { color: var(--blue); }
.route-planner { border-color: var(--line) !important; box-shadow: none !important; }

/* Заголовки панелей — системный жирный Golos вместо брендового гротеска */
.screen-title {
  font-family: "Golos Text", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  font-size: clamp(19px, 4.8vw, 24px);
}

/* Вторичные кнопки и пилюли — форма как у чипов дока */
.ghost-action { border-radius: 12px; }
.pill { font-weight: 700; padding: 8px 12px; }
/* Блок «Откуда/Куда»: нейтральная рамка вместо зелёной */
.place-stack {
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 14px;
}

/* ==== Правки владельца 05.08 (вечер): back-навигация, кнопка режима, водительский стиль, плавная шторка ==== */

/* Тонкая навигационная строка панелей вместо крупных шапок */
.panel-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 12px 8px;
  border-bottom: 1px solid var(--line);
}
.panel-back {
  display: grid;
  place-items: center;
  width: 40px; /* было 38 — не дотягивало до минимальной зоны касания */
  height: 40px;
  color: var(--ink);
  background: var(--paper-2);
  border: 0;
  border-radius: 50%;
}
.panel-back:active { transform: scale(.92); }
.panel-nav-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кнопка режима рядом с аватаром: пешеход ↔ машинка с флипом */
.mode-fab {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--blue);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.mode-fab:active { transform: scale(.94); }
.mode-fab svg { display: block; }
@keyframes modeFlip {
  0% { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}
.mode-fab.switching svg { animation: modeFlip .35s ease; }
body.driver .mode-fab { color: #fff; background: var(--blue); border-color: var(--blue); }

/* Водительский режим без «форзы»: скошенные пины и номера выравниваются */
.pin.skew { transform: translate(-50%, -100%); border-radius: 10px; }
.pin.skew i { transform: none; }
.map-marker.skew { transform: none; border-radius: 10px; }
.map-marker.skew > * { transform: none; }
.driver .route-num, .skew-box { transform: none; border-radius: 10px; }
.driver .route-num span, .skew-box span { transform: none; }
.ride-payment-offer b, .ride-pickup-code b, .price, .pickup-code-form input {
  font-family: "Golos Text", "Segoe UI", system-ui, sans-serif;
  letter-spacing: .02em;
}

/* Шторка: снап между положениями анимирует app.js (playSheetFlip) через
   transform. Переход по max-height/height здесь стоял раньше и заставлял
   браузер пересчитывать раскладку панели каждый кадр — на слабом телефоне
   это давало 100 % просевших кадров. Высоту меняем мгновенно, движение
   рисует композитор. */
.sheet-handle, .panel-nav { touch-action: none; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .mode-fab.switching svg { animation: none; }
}

/* ==== Водительский поток: единые слои, статус линии и компактная поездка ==== */
.driver-online-fab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 112px;
  height: 46px;
  padding: 0 13px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 9px 24px color-mix(in srgb, currentColor 20%, transparent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  transition: transform .16s ease, background .22s ease;
}
.driver-online-fab.online { background: var(--green); }
.driver-online-fab.offline { background: var(--red); }
.driver-online-fab.locked { color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--stroke-soft); box-shadow: var(--shadow-1); }
.driver-online-fab:active { transform: scale(.96); }
.driver-online-fab span { white-space: nowrap; }

.driver-map-hint {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.driver-map-hint > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  border-radius: 50%;
}
.driver-map-hint.online > span { background: var(--green); }
.driver-map-hint.offline > span { background: var(--red); }
.driver-map-hint.locked { grid-template-columns: 42px minmax(0, 1fr) auto; border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); background: color-mix(in srgb, var(--amber) 7%, var(--panel-solid)); }
.driver-map-hint.locked > span { color: #9b671f; background: #f7ebd7; }
.driver-map-hint b,
.driver-map-hint small { display: block; }
.driver-map-hint b { font-size: 13.5px; }
.driver-map-hint small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }

.driver-ride-console,
.driver-route-summary,
.driver-guidance {
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 18px;
  background: var(--panel-solid);
}
.driver-trip-actions,
.hud-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.driver-trip-actions > :only-child { grid-column: 1 / -1; }
.driver-trip-actions .danger-action { min-height: 46px; }
.driver-cancel-confirm .driver-trip-actions { margin-top: 4px; }
.hud-card-actions { margin-top: 10px; }
.hud-card-actions .primary-action,
.hud-card-actions .ghost-action { width: 100%; }

/* GPS — стилизованная навигационная «птичка», поворачивается по курсу. */
.user-loc { width: 34px; height: 34px; }
.user-loc-bird {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2456ff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(36, 86, 255, .52);
  /* Глиф смотрит на северо-восток: базовый −45° разворачивает его на север,
     затем --heading поворачивает на реальный курс. */
  transform: rotate(calc(var(--heading, 0deg) - 45deg));
  transition: transform .3s ease;
}
.user-loc-bird svg { width: 19px; height: 19px; overflow: visible; }
.user-loc-bird path { fill: currentColor; stroke: #2456ff; stroke-width: .7; stroke-linejoin: round; }
.user-loc-pulse { inset: -7px; }
.user-loc-direction { display: none; }
.user-loc.navigation-walk,
.user-loc.navigation-driver { width: 42px; height: 42px; }
.user-loc.navigation-walk .user-loc-direction,
.user-loc.navigation-driver .user-loc-direction {
  position: absolute;
  top: -46px;
  left: -15px;
  display: block;
  width: 72px;
  height: 82px;
  background: linear-gradient(to top, rgba(55, 111, 255, .28), rgba(55, 111, 255, 0));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotate(var(--heading, 0deg));
  transform-origin: 50% 67px;
  transition: transform .22s linear;
}
.user-loc.navigation-walk .user-loc-bird {
  inset: 5px;
  color: #326cf5;
  background: rgba(255, 255, 255, .96);
  border-width: 3px;
  box-shadow: 0 5px 18px rgba(30, 72, 180, .34);
}
.user-loc.navigation-walk .user-loc-bird path { fill: currentColor; stroke: #fff; }
.user-loc.navigation-walk .user-loc-pulse { inset: -5px; background: rgba(50, 108, 245, .2); }
.user-loc.navigation-driver .user-loc-bird {
  inset: 2px;
  background: #2456ff;
  border-width: 4px;
  box-shadow: 0 6px 20px rgba(20, 61, 180, .5);
}
.user-loc.navigation-driver .user-loc-direction {
  background: linear-gradient(to top, rgba(36, 86, 255, .34), rgba(36, 86, 255, 0));
}

/* Птичка крупнее — читается как стрелка курса, а не «кружок» */
.user-loc-bird svg { width: 24px; height: 24px; }
.user-loc.navigation-driver .user-loc-bird svg { width: 27px; height: 27px; }

/* ===== Режим машины (карплей-HUD) ===== */
body.car-mode #app { display: none; }
body.car-mode #map-art { display: none; }
body.car-mode { overscroll-behavior: none; }
#car-hud {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  pointer-events: none;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#car-hud.active { display: flex; flex-direction: column; justify-content: flex-end; }
#car-hud .car-hud-exit {
  pointer-events: auto;
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 21, 28, .82);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
#car-hud .car-hud-main,
#car-hud .car-hud-foot {
  pointer-events: auto;
  background: rgba(13, 18, 26, .93);
  color: #f2f5f6;
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}
#car-hud .car-hud-main {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}
#car-hud .car-hud-arrow {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: #2456ff;
  color: #fff;
}
#car-hud .car-hud-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#car-hud .car-hud-text b { font-size: 34px; line-height: 1.05; font-weight: 800; white-space: nowrap; }
#car-hud .car-hud-text span { font-size: 17px; line-height: 1.25; color: #cfd8e3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#car-hud .car-hud-speed { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; padding-right: 6px; }
#car-hud .car-hud-speed b { font-size: 32px; font-weight: 800; line-height: 1; }
#car-hud .car-hud-speed small { font-size: 12px; color: #aab6bd; }
#car-hud .car-hud-speed i {
  font-style: normal;
  margin-top: 4px;
  min-width: 30px;
  padding: 2px 6px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  background: #e5484d;
  color: #fff;
}
#car-hud .car-hud-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  padding: 10px 18px;
  font-size: 16px;
}
#car-hud .car-hud-foot span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#car-hud .car-hud-signal.live { color: #7fd39a; }
@media (orientation: landscape) {
  #car-hud .car-hud-text b { font-size: 30px; }
  #car-hud .car-hud-main { padding: 10px 16px; }
  #car-hud .car-hud-arrow { width: 62px; height: 62px; }
}

/* Выбранная точка — настоящий пин с читаемым центром, а не повернутый квадрат. */
.point-card-pin {
  width: 34px;
  height: 42px;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
}
.point-card-pin::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 28px;
  height: 28px;
  background: var(--red);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 7px;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--red) 46%, transparent);
  transform: rotate(-45deg);
}
.point-card-pin::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 11px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}

@media (max-width: 420px) {
  .top-float { gap: 6px; }
  .brand-fab, .mode-fab { width: 44px; height: 44px; }
  .driver-online-fab { min-width: 104px; height: 44px; padding: 0 11px; font-size: 11.5px; }
  .driver-trip-actions { grid-template-columns: 1fr; }
}

/* Выходная анимация шторки слоёв (закрытие больше не мгновенное) */
#layers-sheet.closing .layers-backdrop { animation: layersFadeOut .18s ease forwards; }
#layers-sheet.closing .layers-panel { animation: layersPanelOut .2s cubic-bezier(.4, 0, .8, .4) forwards; }
@keyframes layersFadeOut { to { opacity: 0; } }
@keyframes layersPanelOut { to { transform: translateX(-50%) translateY(24px); opacity: 0; } }

/* Закреплённые слои повторяют геометрию пиктограмм в шторке: скруглённый
   квадрат вместо круга. Основная кнопка «Слои» остаётся круглой как элемент
   управления картой. */
.map-rail .rail-layer {
  border-radius: 13px;
  background-image: none;
  box-shadow: none;
}

/* Финальный приоритет собственной палитры слоёв поверх общих правил темы A. */
.map-rail .map-tool[data-layer-key].active {
  color: #fff;
  background: var(--layer-accent, #0f9f78);
  background-image: none;
  border-color: color-mix(in srgb, var(--layer-accent, #0f9f78) 78%, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

/* ==== Плавность интерфейса (07.08.2026) ============================
   Раньше многие интерактивные элементы меняли состояние мгновенно —
   нажатие, наведение, появление срабатывали рывком («топорно»). Ниже —
   единое мягкое сглаживание и лёгкий тактильный отклик на нажатие.
   Карты, канваса MapLibre и маркеров это НЕ касается. */
.icon-btn,
.map-tool,
.pill,
.menu-tile,
.dock-app,
.point-card-place,
.primary-action,
.ghost-action,
.layers-card,
.brand-fab,
.mode-fab,
.panel-back,
.saved-place-row,
.point-card-links a {
  transition:
    transform var(--motion-fast) var(--ease-spring),
    background-color var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    opacity var(--motion) var(--ease-soft);
}
/* Тактильный отклик: элемент слегка «проседает» под пальцем и плавно
   возвращается благодаря пружинной кривой выше. Главные кнопки действий
   (.primary-action/.ghost-action) имеют собственный translateY/skew при
   нажатии — им добавляем только плавность перехода выше, без scale. */
.icon-btn:active,
.pill:active,
.menu-tile:active,
.dock-app:active {
  transform: scale(.95);
}
.saved-place-row:active { transform: scale(.985); }
.point-card-links a:active { transform: scale(.97); }
/* Список «Что здесь»/окрестные места плавно проявляется, а не возникает
   рывком. Один раз при открытии карточки — короткий мягкий выезд. */
.point-card-place {
  animation: placeRowIn var(--motion) var(--ease-spring) both;
}
@keyframes placeRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.point-card-place:nth-child(2) { animation-delay: .03s; }
.point-card-place:nth-child(3) { animation-delay: .06s; }
.point-card-place:nth-child(4) { animation-delay: .09s; }
.point-card-place:nth-child(n+5) { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .icon-btn, .map-tool, .pill, .menu-tile, .dock-app,
  .point-card-place, .primary-action, .ghost-action, .layers-card,
  .brand-fab, .mode-fab, .panel-back, .saved-place-row,
  .point-card-links a {
    transition: none;
  }
  .icon-btn:active, .pill:active, .menu-tile:active, .dock-app:active {
    transform: none;
  }
  .point-card-place { animation: none; }
}


/* ==== Vector Harmony · цельный интерфейс всех разделов (11.08.2026) ====
   Один язык поверхностей, типографики, состояний и движения. Бизнес-логика
   экранов не меняется: этот слой приводит карту, поездки, сообщения, маркет,
   профиль, гараж, сервис и SOS к одной системе. */
:root {
  --surface-canvas: #f3f6fa;
  --surface-card: #ffffff;
  --surface-soft: #edf2f8;
  --surface-raised: rgba(255, 255, 255, .94);
  --text-primary: #172033;
  --text-secondary: #647087;
  --text-tertiary: #8e98aa;
  --stroke-soft: #dde4ee;
  --stroke-strong: #cbd5e2;
  --accent: #3167f6;
  --accent-strong: #204ed1;
  --accent-soft: #e9efff;
  --radius-control: 13px;
  --radius-card: 18px;
  --radius-sheet: 24px;
  --shadow-1: 0 2px 8px rgba(24, 36, 58, .07);
  --shadow-2: 0 12px 32px rgba(24, 36, 58, .13);
  --shadow-3: 0 24px 64px rgba(17, 29, 52, .18);
  --paper: var(--surface-canvas);
  --paper-2: var(--surface-soft);
  --panel-solid: var(--surface-card);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --faint: var(--text-tertiary);
  --line: var(--stroke-soft);
  --line-strong: var(--stroke-strong);
  --blue: var(--accent);
  --blue-2: var(--accent-strong);
  --panel: var(--surface-raised);
  --radius: var(--radius-control);
  --shadow-sm: var(--shadow-1);
  --shadow: var(--shadow-2);
  --motion-fast: .14s;
  --motion: .22s;
  --motion-sheet: .3s;
}
[data-theme="dark"] {
  --surface-canvas: #10141c;
  --surface-card: #191f2a;
  --surface-soft: #222a37;
  --surface-raised: rgba(25, 31, 42, .94);
  --text-primary: #f3f6fb;
  --text-secondary: #b0b9c8;
  --text-tertiary: #7f899a;
  --stroke-soft: #303a49;
  --stroke-strong: #435064;
  --accent: #6f93ff;
  --accent-strong: #93adff;
  --accent-soft: rgba(111, 147, 255, .14);
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .2);
  --shadow-2: 0 14px 36px rgba(0, 0, 0, .34);
  --shadow-3: 0 26px 70px rgba(0, 0, 0, .48);
}

/* Общий каркас и шапка раздела */
.panel {
  background: var(--surface-raised);
  border-color: color-mix(in srgb, var(--stroke-soft) 84%, transparent);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-2);
}
.panel-nav {
  min-height: 64px;
  padding: 10px 14px;
  gap: 11px;
  align-items: center;
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  border-bottom-color: var(--stroke-soft);
}
.panel-back {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: var(--surface-soft);
}
.panel-nav-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; }
.panel-nav-title { font-size: 15px; font-weight: 800; line-height: 1.2; }
.panel-nav-sub {
  display: block;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-nav-sub {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.panel-nav-step {
  flex: 0 0 auto;
  max-width: 38%;
  padding: 6px 9px;
  overflow: hidden;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-body { gap: 14px; padding: 16px; }
.section-heading, .route-stop-heading, .journey-detail-head {
  min-height: 30px;
  font-size: 14px;
  font-weight: 800;
}
.kicker { color: var(--text-tertiary); font-size: 9px; letter-spacing: .09em; }
.item-title { color: var(--text-primary); }
.item-meta, .item-note { color: var(--text-secondary); }

/* Поверхности и списки — одинаковая геометрия на всех экранах */
.soft-card, .sharp-card, .route-card, .trip-card, .market-card,
.message-card, .service-card, .profile-form, .route-live-card,
.driver-route-summary, .driver-guidance, .driver-ride-console,
.journey-option, .navigation-mode-card, .nearby-stop,
.stop-arrival, .garage-card, .conversation-card {
  background: var(--surface-card);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}
.route-card, .trip-card, .message-card, .service-card,
.journey-option, .nearby-stop, .stop-arrival {
  min-height: 64px;
  padding: 13px;
}
.route-card:hover, .trip-card:hover, .message-card:hover,
.market-card:hover, .service-card:hover, .menu-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--stroke-soft));
}
.route-card.selected, .journey-option.active, .driver-route-option.active {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--stroke-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent);
}
.driver-route-option.active small { color: var(--text-primary); }
.layers-card:disabled { cursor: progress; opacity: .68; }
.layers-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  color: var(--text-secondary);
  background: var(--surface-soft);
  border-radius: var(--radius-control);
  text-align: center;
}
.market-card { overflow: hidden; }
.market-photo { background: linear-gradient(135deg, var(--surface-soft), color-mix(in srgb, var(--accent-soft) 55%, var(--surface-card))); }
.market-photo.placeholder::after {
  content: "Фото готовится";
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
}

/* Все реальные цели пальца — не меньше 44px */
.icon-btn, .ghost-action, .primary-action, .danger-action,
.pill, .skew-pill, .map-index-button, .transport-toggle,
.journey-time-switch button, .stop-tabs button, .filter-chip {
  min-height: 44px;
}
.primary-action, .danger-action { border-radius: var(--radius-control); }
.primary-action { background: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 23%, transparent); }
.ghost-action { background: var(--surface-card); border-color: var(--stroke-soft); border-radius: var(--radius-control); }
.pill, .skew-pill { padding: 10px 13px; }
.field input, .field textarea, .field select, .search input,
.place-field input, .chat-compose textarea {
  min-height: 46px;
  color: var(--text-primary);
}
.field input, .field textarea, .field select, .fit-trigger,
.camera-field, .place-stack, .search {
  background: var(--surface-soft);
  border-color: var(--stroke-soft);
  border-radius: var(--radius-control);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  outline: 0;
}

/* Дорожный комментарий — цельный composer вместо нативного textarea со
   скроллбаром и ручкой изменения размера. */
.road-compose-field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 11px 12px 10px;
  color: var(--text-primary);
  background: var(--surface-soft);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-card);
  cursor: text;
  transition: border-color var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-soft),
    background var(--motion-fast) var(--ease-soft);
}
.road-compose-field:hover {
  border-color: var(--stroke-strong);
}
.road-compose-field:focus-within {
  background: var(--surface-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-1);
}
.road-compose-field-head,
.road-compose-field-label {
  display: flex;
  align-items: center;
}
.road-compose-field-head {
  justify-content: space-between;
  gap: 12px;
}
.road-compose-field-label {
  gap: 7px;
  color: var(--text-secondary);
  font-size: 12px;
}
.road-compose-field-label svg {
  color: var(--accent);
}
.road-compose-count {
  flex: none;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  transition: color var(--motion-fast) var(--ease-soft);
}
.road-compose-count.near-limit {
  color: var(--amber);
}
.road-compose-text {
  display: block;
  width: 100%;
  min-height: 72px;
  max-height: 144px;
  margin: 0;
  padding: 0 2px 0 0;
  overflow: hidden;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  resize: none;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  scrollbar-width: thin;
  scrollbar-color: var(--stroke-strong) transparent;
}
.road-compose-text::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}
.road-compose-text::-webkit-resizer {
  display: none;
}
.road-compose-text::-webkit-scrollbar {
  width: 4px;
}
.road-compose-text::-webkit-scrollbar-track {
  background: transparent;
}
.road-compose-text::-webkit-scrollbar-thumb {
  background: var(--stroke-strong);
  border-radius: 999px;
}

/* Меню — задачи сгруппированы, SOS отделён от обычных функций */
.menu-sections { display: grid; gap: 17px; }
.menu-group { display: grid; gap: 8px; }
.menu-group-title {
  padding: 0 4px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.menu-group .menu-grid { gap: 8px; }
.menu-tile {
  min-height: 72px;
  padding: 12px;
  background: var(--surface-card);
  border-color: var(--stroke-soft);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.menu-tile-icon {
  width: 42px;
  height: 42px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 12px;
}
.menu-tile-text b { font-size: 14px; }
.menu-tile-text small { color: var(--text-secondary); font-size: 10.5px; }
.menu-row { padding-top: 2px; border-top: 1px solid var(--stroke-soft); }
.menu-sos-action { color: var(--red); border-color: color-mix(in srgb, var(--red) 28%, var(--stroke-soft)); }
.menu-sos-action svg { color: var(--red); }

/* Карта: одна компактная группа, геолокация — главное действие */
.map-rail, .map-controls {
  gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--surface-raised) 91%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke-soft) 86%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.map-tool {
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  background: transparent;
}
.map-tool-primary { color: #fff; background: var(--accent); }
.map-tool-primary:hover, .map-tool-primary:focus-visible { background: var(--accent-strong); }
.map-rail .rail-layer { border-radius: 12px; }

/* Слои — немодальная шторка: карта остаётся видимой и принимает жесты */
#layers-sheet { pointer-events: none; }
.layers-backdrop { pointer-events: none; background: transparent; animation: none; }
.layers-panel {
  pointer-events: auto;
  max-height: min(54dvh, 540px);
  padding: 10px 14px calc(16px + var(--safe-bottom));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-3);
}
.layers-head { min-height: 48px; }
.layers-head > span { display: grid; gap: 2px; }
.layers-head b { font-size: 17px; }
.layers-head small { color: var(--text-secondary); font-size: 10.5px; font-weight: 600; }
.layers-card {
  min-height: 112px;
  background: var(--surface-soft);
  border-color: var(--stroke-soft);
  box-shadow: none;
}
.layers-card.pinned { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--layer-accent, var(--accent)) 32%, transparent); }

/* Чаты, сервис, профиль и гараж получают одинаковый ритм */
.message-card-row { min-height: 52px; }
.message-card-title { align-items: baseline; }
.chat-bubble { border-radius: 17px 17px 17px 5px; }
.chat-bubble.own { border-radius: 17px 17px 5px 17px; }
.profile-form-head { padding-bottom: 12px; border-bottom: 1px solid var(--stroke-soft); }
.camera-field { min-height: 62px; }
.verification-camera-field { background: color-mix(in srgb, var(--amber-bg) 28%, var(--surface-soft)); }

/* SOS остаётся отдельным по смыслу, но использует ту же сетку и типографику */
.sos-status-card, .sos-safety-note, .sos-live-strip,
.sos-contact-row, .ride-safety-note {
  border-radius: var(--radius-card);
  box-shadow: none;
}
.sos-orb { box-shadow: 0 18px 44px color-mix(in srgb, var(--red) 25%, transparent); }

@media (max-width: 899px) {
  .workspace .panel { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
  .panel-body { padding: 14px 14px calc(92px + var(--safe-bottom)); }
  .panel-nav-step { max-width: 34%; }
  .map-controls .map-tool-zoom { display: none; }
  .map-controls { grid-template-columns: 44px; }
  .menu-group .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-group:last-child .menu-tile { grid-column: 1 / -1; }
  .market-fab { right: 14px; bottom: calc(18px + var(--safe-bottom)); }
}
@media (max-width: 390px) {
  .menu-group .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-group:last-child .menu-tile { grid-column: auto; }
  .menu-tile { min-height: 72px; padding-inline: 10px; }
  .menu-tile small { font-size: 9px; }
  .panel-nav-sub { max-width: 190px; }
  .layers-grid { gap: 8px; }
  .layers-card { min-height: 104px; padding-inline: 8px; }
}
@media (min-width: 900px) {
  body { --desktop-sidebar: 408px; }
  .workspace { top: 74px; left: 12px; max-height: calc(100dvh - 90px); }
  .workspace .panel, body.routes-screen .workspace .panel {
    max-height: calc(100dvh - 90px);
    border-radius: var(--radius-sheet);
  }
  .panel-nav { position: sticky; z-index: 5; top: 0; }
  .layers-panel {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: 390px;
    transform: none;
    border: 1px solid var(--stroke-soft);
    border-radius: var(--radius-sheet);
    animation-name: layersRiseDesktop;
  }
  @keyframes layersRiseDesktop { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }
  #layers-sheet.closing .layers-panel { animation-name: layersPanelOutDesktop; }
  @keyframes layersPanelOutDesktop { to { transform: translateY(18px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .layers-panel, .menu-tile, .route-card, .trip-card, .market-card,
  .message-card, .service-card { animation: none; transition: none; }
}
/* ==== Vector Motion · единый отклик по всему пользовательскому пути ==== */
:root {
  --motion-press: .14s;
  --motion-control: .2s;
  --motion-view: .22s;
  --motion-overlay: .28s;
}

:where(
  button:not(.sheet-handle):not(.maplibregl-ctrl button),
  a[href],
  input,
  textarea,
  select,
  [role="button"]
) {
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--motion-control) var(--ease-soft),
    background-color var(--motion-control) var(--ease-soft),
    border-color var(--motion-control) var(--ease-soft),
    box-shadow var(--motion-control) var(--ease-soft),
    opacity var(--motion-control) var(--ease-soft),
    scale var(--motion-press) var(--ease-spring);
}

:where(
  button:not(.sheet-handle):not(.maplibregl-ctrl button):not(:disabled),
  a[href],
  [role="button"]
):active {
  scale: .96;
}

:where(button, input, textarea, select):disabled {
  scale: 1;
}

:where(input, textarea, select):focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  outline: 0;
}
@media (max-width: 320px) {
  .menu-group .menu-grid { grid-template-columns: 1fr; }
}

:where(button, a[href], [role="button"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 3px;
}

:where(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent);
}

.field-error {
  display: block;
  margin-top: 5px;
  color: var(--red);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

form[aria-busy="true"] :where(button[type="submit"], .primary-action) {
  cursor: wait;
  opacity: .72;
  pointer-events: none;
}

.address-search-state,
.address-results > *,
.planner-empty,
.route-warning {
  animation: vectorContentIn var(--motion-view) var(--ease-soft) both;
}

.address-results > :nth-child(2) { animation-delay: 25ms; }
.address-results > :nth-child(3) { animation-delay: 50ms; }
.address-results > :nth-child(4) { animation-delay: 75ms; }
.address-results > :nth-child(n+5) { animation-delay: 100ms; }

/* Поиск мест: результат читается как одно действие, а заголовок остаётся
   видимым при прокрутке длинного списка на телефоне. */
.address-results {
  max-height: min(42dvh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.address-results-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-card) 94%, transparent);
  border-bottom: 1px solid var(--stroke-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.address-results-head b { color: var(--text-primary); font-size: 12px; }
.address-results-head span {
  min-width: 24px;
  padding: 3px 7px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}
.address-result { min-height: 58px; }
.address-result-copy { min-width: 0; }
.address-result-tail {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}

/* Активное ведение: карта остаётся главным экраном, а в шторке виден один
   следующий манёвр и только необходимые кнопки управления. */
.active-navigation-card {
  gap: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 44%),
    var(--surface-card);
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--stroke-soft));
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(8, 20, 45, .13);
}
.navigation-guidance-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.navigation-guidance-top .navigation-mode-status {
  min-width: 0;
  overflow: hidden;
}
.navigation-guidance-top .navigation-mode-status span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation-step-pill {
  min-width: 46px;
  padding: 7px 9px;
  color: var(--text-secondary);
  background: var(--surface-soft);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}
.active-navigation-card .navigation-progress-head {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 13px;
}
.active-navigation-card .navigation-turn {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 25%, transparent);
}
.active-navigation-card .navigation-turn svg { width: 28px; height: 28px; }
.active-navigation-card .navigation-progress-head small {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .02em;
}
.active-navigation-card .navigation-progress-head b {
  margin-top: 3px;
  font-size: 17px;
  line-height: 1.22;
}
.active-navigation-card .navigation-progress-head em {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 11.5px;
}
.active-navigation-card .progress { height: 7px; overflow: hidden; border-radius: 999px; }
.active-navigation-card .progress span { border-radius: inherit; }
.navigation-actions {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 8px;
}
.navigation-actions > button { min-height: 48px; }
.navigation-actions > button:first-child,
.navigation-actions > button:last-child { padding-inline: 13px; }

/* Reference-aligned search controls. The full-height treatment is scoped to the
   active mobile search state; the rest of Vector keeps its existing theme. */
.place-search-form { gap: 9px; }
.place-search-submit {
  min-height: 44px;
  padding: 0 18px;
  color: #fff;
  background: #246bfd;
  border: 0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 850;
}
.place-field.destination { position: relative; }
.place-search-clear {
  position: absolute;
  z-index: 2;
  right: 48px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #fff;
  background: #74777b;
  border: 0;
  border-radius: 9px;
}
.place-field.destination input { padding-right: 35px; }

/* Driver destination is a calm, self-contained search surface. The actions are
   separated from the text instead of reading as one attached dark control. */
.driver-destination-field,
.driver-destination-field.has-pick {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-rows: 18px 26px;
  column-gap: 10px;
  row-gap: 0;
  min-height: 62px;
  padding: 8px 9px 8px 12px;
  color: #171a20;
  background: #f7f8fb;
  border-color: rgba(28, 39, 58, .09);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(11, 20, 36, .10);
}
.driver-destination-field:focus-within {
  background: #fff;
  border-color: rgba(36, 107, 253, .42);
  box-shadow: 0 0 0 4px rgba(36, 107, 253, .10), 0 10px 28px rgba(11, 20, 36, .12);
}
.driver-destination-field.has-pick:focus-within {
  background: #fff;
  border-color: rgba(36, 107, 253, .42);
  box-shadow: 0 0 0 4px rgba(36, 107, 253, .10), 0 10px 28px rgba(11, 20, 36, .12);
}
.driver-destination-search-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #246bfd !important;
  background: #eaf0ff;
  border-radius: 12px;
}
.driver-destination-field > .place-field-label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: #777e8c;
  font-size: 10px;
  font-weight: 800;
}
.driver-destination-field > input {
  grid-column: 2;
  grid-row: 2;
  min-height: 26px;
  padding: 0;
  color: #171a20;
  font-size: 15px;
  font-weight: 750;
}
.driver-destination-field > input::placeholder { color: #969ca8; }
.driver-destination-actions {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  gap: 7px;
}
.driver-destination-field .place-search-clear,
.driver-destination-field .origin-locate {
  position: static;
  transform: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.driver-destination-field .place-search-clear {
  color: #5f6672;
  background: #e9ebef;
}
.driver-destination-field .map-pick-btn {
  color: #246bfd;
  background: #edf2ff;
  border-color: transparent;
}

/* The prepared route belongs to the sheet; only its internal information keeps
   separators. */
.panel-body > .driver-route-summary {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.driver-route-selection-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}
.driver-route-selection-head > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: center;
}
.driver-route-selection-head small {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
}
.driver-route-selection-head b {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* During guidance the panel becomes a transparent interaction layer. Map,
   maneuver, vehicle marker and bottom metrics read as one navigation scene. */
body.navigation-active .topbar,
body.navigation-active .bottom-nav,
body.navigation-active #sheet-peek { display: none !important; }
body.navigation-active .workspace {
  position: fixed;
  z-index: 35;
  inset: 0;
  width: 100%;
  max-height: none;
  margin: 0;
  pointer-events: none;
}
body.navigation-active .workspace .panel {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
body.navigation-active .panel-nav,
body.navigation-active .sheet-handle,
body.navigation-active .panel-body > :not(.planner-detail):not(.driver-guidance),
body.navigation-active .planner-detail > :not(.active-navigation-card) { display: none !important; }
body.navigation-active .panel-body,
body.navigation-active .planner-detail,
body.navigation-active .active-navigation-card {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
.navigation-hud-shell { position: fixed; inset: 0; color: #25282c; pointer-events: none; }
.navigation-speed-cluster {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 24px);
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.navigation-speed,
.navigation-limit {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 7px 20px rgba(18, 27, 40, .24);
}
.navigation-speed b { font-size: 29px; line-height: 1; }
.navigation-speed small { margin-top: -15px; color: #777; font-size: 8px; font-weight: 750; }
.navigation-limit {
  box-sizing: border-box;
  border: 7px solid #ff3e31;
  font-size: 28px;
  font-weight: 900;
}
.navigation-maneuver-bubble {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  left: 50%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 14px;
  max-width: min(82vw, 440px);
  min-height: 86px;
  padding: 14px 22px;
  color: #fff;
  background: #246bfd;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(20, 79, 210, .3);
  transform: translateX(-50%);
  pointer-events: auto;
}
.navigation-hud-shell.has-speed-limit .navigation-maneuver-bubble {
  top: calc(env(safe-area-inset-top, 0px) + 106px);
}
.navigation-maneuver-bubble > span { grid-row: 1 / 3; display: grid; place-items: center; }
.navigation-maneuver-bubble strong { font-size: clamp(28px, 7vw, 42px); line-height: 1; white-space: nowrap; }
.navigation-maneuver-bubble small {
  display: -webkit-box;
  max-width: 280px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.navigation-road-label {
  position: absolute;
  bottom: calc(126px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  max-width: min(78vw, 460px);
  padding: 10px 18px;
  overflow: hidden;
  color: #41454a;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 5px 15px rgba(15, 23, 35, .18);
  font-size: 15px;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}
.navigation-bottom-hud {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  display: grid;
  grid-template-columns: 54px repeat(3, minmax(0, 1fr)) 54px;
  align-items: center;
  min-height: 88px;
  padding: 8px 10px 13px;
  color: #303337;
  background: rgba(255, 255, 255, .96);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(14, 22, 33, .26);
  pointer-events: auto;
}
.navigation-bottom-hud > span { display: grid; min-width: 0; overflow: hidden; place-items: center; }
.navigation-bottom-hud b { max-width: 100%; overflow: hidden; font-size: clamp(18px, 5vw, 29px); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.navigation-bottom-hud small { margin-top: 4px; color: #5f646b; font-size: 10px; font-weight: 750; }
.navigation-bottom-turn,
.navigation-bottom-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 58px;
  color: #41454a;
  background: #f1f2f4;
  border: 0;
  border-radius: 17px;
}
.navigation-bottom-turn:disabled { opacity: .55; }
.navigation-compact-control { width: 38px; height: 52px; border-radius: 14px; }
.navigation-route-progress {
  position: absolute;
  right: 70px;
  bottom: 8px;
  left: 70px;
  height: 5px;
  overflow: hidden;
  background: #dfe3e8;
  border-radius: 999px;
}
.navigation-route-progress::after {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  background: #56c934;
}
.navigation-signal {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 24px);
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 44vw;
  padding: 8px 11px;
  overflow: hidden;
  color: #444a50;
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(17, 26, 39, .18);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 899px) {
  body.place-search-active .topbar,
  body.place-search-active .bottom-nav,
  body.place-search-active #sheet-peek { display: none !important; }
  body.place-search-active .workspace {
    position: fixed;
    z-index: 34;
    top: 72px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100dvh - 72px);
    margin: 0;
  }
  body.place-search-active .workspace .panel {
    width: 100%;
    height: 100%;
    max-height: none;
    color: #15171a;
    background: #f6f7fa;
    border: 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -10px 35px rgba(25, 35, 50, .18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.place-search-active .sheet-handle { display: grid; height: 34px; }
  body.place-search-active .sheet-handle span { width: 44px; height: 5px; background: #c7c9cc; box-shadow: none; }
  body.place-search-active .panel-nav { display: none; }
  body.place-search-active .panel-body {
    align-content: start;
    height: calc(100% - 34px);
    padding: 6px 0 calc(18px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    overflow-y: auto;
  }
  body.place-search-active .place-search-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 0 14px 16px;
    border-bottom: 8px solid #f3f4f6;
  }
  body.place-search-active .place-stack { display: contents; }
  body.place-search-active .place-field.origin { display: none; }
  body.place-search-active .place-field.destination.has-pick {
    grid-column: 1;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 0 10px 0 2px;
    background: #f3f3f4;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
  }
  body.place-search-active .place-field.destination .place-field-label {
    display: grid;
    place-items: center;
    color: #25282c;
    font-size: 0;
  }
  body.place-search-active .place-field.destination .place-field-label svg { width: 25px; height: 25px; }
  body.place-search-active .place-field.destination input {
    padding: 0 35px 0 0;
    color: #111;
    font-size: 20px;
    font-weight: 800;
    box-shadow: none !important;
    outline: 0 !important;
  }
  body.place-search-active .place-field.destination .map-pick-btn { display: none; }
  body.place-search-active .place-search-clear { right: 9px; width: 29px; height: 29px; }
  body.place-search-active .place-search-submit {
    grid-column: 2;
    min-width: 88px;
    min-height: 58px;
    padding: 0 15px;
    border-radius: 18px;
    font-size: 17px;
  }
  body.place-search-active .address-results {
    display: grid;
    gap: 8px;
    max-height: none;
    padding: 12px;
    overflow: visible;
    background: #f6f7fa;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.place-search-active .address-result {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 11px;
    min-height: 72px;
    padding: 10px 13px;
    color: #15171a;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 18px;
    box-shadow: 0 3px 12px rgba(32, 46, 70, .055);
  }
  body.place-search-active .address-result-icon {
    width: 42px;
    height: 42px;
    color: #376ff2;
    background: #edf3ff;
    border-radius: 14px;
  }
  body.place-search-active .address-result[data-kind="Магазин"],
  body.place-search-active .address-result[data-kind="Магазин у дома"] { background: #fffdf8; border-color: #f1e9d8; }
  body.place-search-active .address-result[data-kind="Магазин"] .address-result-icon,
  body.place-search-active .address-result[data-kind="Магазин у дома"] .address-result-icon { color: #b36c13; background: #fff1d9; }
  body.place-search-active .address-result:focus-visible {
    background: #fff;
    border-color: #b8caf8;
    box-shadow: 0 0 0 3px rgba(55, 111, 242, .12);
    outline: 0;
  }
  body.place-search-active .address-result b { color: #111; font-size: 17px; line-height: 1.2; }
  body.place-search-active .address-result small { color: #8a8d91; font-size: 13px; }
  body.place-search-active .address-result-tail { color: #8a8d91; font-size: 14px; font-weight: 500; }
  body.place-search-active .address-search-state { margin: 16px; color: #555; background: #f3f4f6; border: 0; }
  body.place-search-active .panel-body > .planner-actions,
  body.place-search-active .step-map-hint { display: none; }
}

.point-route-origin-prompt {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-card));
  border-radius: 18px;
}
.point-route-origin-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 14px;
}
.point-route-origin-prompt > div:first-of-type { display: grid; min-width: 0; gap: 3px; }
.point-route-origin-prompt small { color: var(--text-secondary); font-size: 10px; font-weight: 750; }
.point-route-origin-prompt b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.point-route-origin-prompt p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.point-route-origin-actions {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.point-route-origin-actions > button { width: 100%; }
.point-route-origin-actions > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.point-route-origin-actions > button > svg:last-child { justify-self: end; opacity: .8; }
.point-route-origin-actions .ghost-action.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--stroke-soft));
}
.point-route-origin-actions [aria-busy="true"] > svg:first-child { animation: vector-spin .9s linear infinite; }

.panel-body > .driver-route-summary {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.navigation-manual-controls {
  position: absolute;
  right: 14px;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  pointer-events: auto;
}
.navigation-manual-controls > button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 54px;
  padding: 0 18px;
  color: #24282e;
  background: rgba(255, 255, 255, .97);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(14, 22, 33, .22);
  font-size: 14px;
  font-weight: 850;
}
.navigation-manual-controls > button:last-child {
  grid-template-columns: 1fr auto;
  color: #fff;
  background: #246bfd;
  text-align: right;
}
.navigation-manual-controls > button:disabled { opacity: .42; }
.navigation-hud-shell.is-manual .navigation-bottom-hud {
  grid-template-columns: repeat(3, minmax(0, 1fr)) 54px;
}
.navigation-hud-shell.is-manual .navigation-road-label { bottom: calc(184px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 340px) {
  .navigation-speed-cluster { right: 8px; gap: 5px; }
  .navigation-speed,
  .navigation-limit { width: 60px; height: 60px; }
  .navigation-speed b { font-size: 25px; }
  .navigation-limit { border-width: 6px; font-size: 24px; }
  .navigation-signal { left: 8px; max-width: calc(100vw - 150px); padding-inline: 8px; font-size: 9px; }
  .navigation-bottom-hud {
    right: 8px;
    left: 8px;
    grid-template-columns: 44px repeat(3, minmax(0, 1fr)) 44px;
    padding-inline: 6px;
  }
  .navigation-hud-shell.is-manual .navigation-bottom-hud { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; }
  .navigation-bottom-turn,
  .navigation-bottom-close { width: 44px; }
  .navigation-bottom-hud b { font-size: 16px; }
  .navigation-bottom-hud small { font-size: 10px; }
  .navigation-manual-controls { right: 8px; left: 8px; gap: 8px; }
  .navigation-manual-controls > button { min-width: 0; padding: 0 12px; column-gap: 6px; }
  .navigation-manual-controls > button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 390px) {
  .address-result-tail { font-size: 12px; }
  .active-navigation-card { padding: 12px; }
  .active-navigation-card .navigation-progress-head { grid-template-columns: 58px minmax(0, 1fr); }
  .active-navigation-card .navigation-turn { width: 58px; height: 58px; }
  .active-navigation-card .navigation-progress-head b { font-size: 15px; }
  .navigation-actions > button:first-child span,
  .navigation-actions > button:last-child span { display: none; }
}

.overlay {
  animation: vectorBackdropIn var(--motion-control) ease-out both;
}

.modal {
  animation: vectorModalIn var(--motion-overlay) var(--ease-spring) both;
}

#point-card {
  animation: vectorSheetIn var(--motion-overlay) var(--ease-spring) both;
}

.toast {
  animation: vectorToastIn var(--motion-view) var(--ease-spring) both;
  transition:
    opacity var(--motion-control) var(--ease-soft),
    transform var(--motion-control) var(--ease-soft);
}

@keyframes vectorContentIn {
  from { opacity: .35; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vectorBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vectorModalIn {
  from { opacity: .45; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vectorSheetIn {
  from { opacity: .5; transform: translateX(-50%) translateY(18px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes vectorToastIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 900px) {
  @keyframes vectorSheetIn {
    from { opacity: .5; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    button,
    a[href],
    input,
    textarea,
    select,
    [role="button"],
    .panel-body,
    .address-search-state,
    .address-results > *,
    .planner-empty,
    .route-warning,
    .overlay,
    .modal,
    #point-card,
    .toast
  ) {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  :where(button, a[href], [role="button"]):active {
    scale: 1 !important;
  }
}

/* ==== Route fields + first-run help ==== */
.place-stack {
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.place-field,
.place-field.has-pick,
.place-field.origin,
.place-field.origin.has-pick {
  grid-template-columns: 92px minmax(70px, 1fr) 42px;
  min-height: 60px;
  gap: 7px;
  padding: 7px 8px 7px 13px;
  background: var(--surface-soft);
  border: 1px solid var(--stroke-soft);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(13, 23, 45, .03);
  transition:
    border-color var(--motion-control) var(--ease-soft),
    background-color var(--motion-control) var(--ease-soft),
    box-shadow var(--motion-control) var(--ease-soft),
    transform var(--motion-press) var(--ease-spring);
}

.place-field.origin,
.place-field.origin.has-pick {
  grid-template-columns: 92px minmax(70px, 1fr) 42px 42px;
}

.place-field + .place-field { border-top: 1px solid var(--stroke-soft); }

.place-field:focus-within {
  background: var(--surface-card);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--stroke-soft));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent), 0 10px 24px rgba(14, 28, 58, .08);
  transform: translateY(-1px);
}

.place-field-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  cursor: text;
  transition: color var(--motion-control) var(--ease-soft);
}

.place-field-label svg { color: var(--accent); flex: 0 0 auto; }
.place-field:focus-within .place-field-label { color: var(--text-primary); }

.place-field > input {
  min-height: 44px;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.origin-locate {
  width: 42px;
  height: 42px;
  color: var(--text-secondary);
  background: var(--surface-card);
  border-color: var(--stroke-soft);
  border-radius: 13px;
}

.origin-locate:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, var(--stroke-soft)); }
.origin-locate:active { transform: none; scale: .93; }

.profile-help-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 12px;
  color: var(--text-primary);
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--stroke-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.profile-help-card > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.profile-help-card b { font-size: 14px; }
.profile-help-card small { color: var(--text-secondary); font-size: 12px; line-height: 1.3; }
.profile-help-card > svg { color: var(--text-tertiary); }
.profile-help-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 14px;
}

.help-banner { display: grid; gap: 16px; padding: 18px; }
.help-hero {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--stroke-soft));
  border-radius: 20px;
  overflow: hidden;
}
.help-close { position: absolute; top: 8px; right: 8px; }
.help-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: var(--accent);
  border-radius: 18px;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: helpMarkIn .42s var(--ease-spring) both;
}
.help-hero h2 { margin: 3px 34px 5px 0; font-size: 23px; line-height: 1.05; letter-spacing: -.025em; }
.help-hero p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.help-steps { display: grid; gap: 8px; }
.help-steps article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--stroke-soft);
  border-radius: 14px;
  animation: helpStepIn var(--motion-view) var(--ease-soft) both;
}
.help-steps article:nth-child(2) { animation-delay: 45ms; }
.help-steps article:nth-child(3) { animation-delay: 90ms; }
.help-steps article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}
.help-steps article div { display: grid; gap: 2px; }
.help-steps article b { font-size: 13px; }
.help-steps article small { color: var(--text-secondary); font-size: 11.5px; line-height: 1.35; }
.help-contact {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: var(--text-primary);
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--stroke-soft));
  border-radius: 14px;
}
.help-contact > span:first-child { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); background: var(--surface-card); border-radius: 12px; }
.help-contact > span:nth-child(2) { display: grid; gap: 2px; }
.help-contact small { color: var(--text-secondary); font-size: 11.5px; }
.help-contact > svg { color: var(--text-tertiary); }
.help-primary { width: 100%; }

@keyframes helpMarkIn {
  from { opacity: 0; transform: translateY(8px) scale(.72) rotate(-7deg); }
  to { opacity: 1; transform: none; }
}
@keyframes helpStepIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  .place-field,
  .place-field.has-pick,
  .place-field.origin,
  .place-field.origin.has-pick {
    grid-template-columns: 68px minmax(46px, 1fr) 42px;
    gap: 5px;
    padding-left: 10px;
  }
  .place-field.origin,
  .place-field.origin.has-pick { grid-template-columns: 68px minmax(46px, 1fr) 42px 42px; }
  .place-field-label { gap: 5px; font-size: 11px; }
  .place-field > input { font-size: 14px; }
  .help-banner { gap: 12px; padding: 12px; }
  .help-hero { grid-template-columns: 50px minmax(0, 1fr); gap: 11px; padding: 15px 12px; }
  .help-mark { width: 50px; height: 50px; border-radius: 15px; }
  .help-hero h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .help-mark,
  .help-steps article { animation: none !important; }
  .place-field:focus-within { transform: none; }
}

/* Поездка и чат: одна визуальная система для карточки пассажира и медиа */
.conversation-back { width: max-content; }
.request-preview-card {
  width: min(370px, calc(100vw - 24px));
  padding: 14px;
}
.ecar-garage button,
.ecar-garage input,
.ecar-garage textarea { font: inherit; }
.garage-onboarding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(49,95,244,.16);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(250,252,255,.98), rgba(230,238,255,.94));
  box-shadow: 0 16px 38px rgba(49,79,122,.11);
}
.garage-onboarding.review { border-color: rgba(178,118,40,.22); background: linear-gradient(145deg, rgba(255,253,249,.98), rgba(250,238,218,.92)); }
.garage-onboarding.rejected { border-color: rgba(196,62,62,.28); background: linear-gradient(145deg, rgba(255,253,253,.98), rgba(255,232,232,.9)); }
.garage-onboarding-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ecar-blue-deep), var(--ecar-blue));
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(49,95,244,.22);
}
.garage-onboarding.review .garage-onboarding-icon { background: linear-gradient(135deg, #9d681f, #d49b4a); box-shadow: 0 10px 22px rgba(178,118,40,.2); }
.garage-onboarding.rejected .garage-onboarding-icon { background: linear-gradient(135deg, #a52f3b, #e45b62); box-shadow: 0 10px 22px rgba(181,47,59,.2); }
.garage-onboarding-copy { min-width: 0; }
.garage-onboarding-copy h2 { margin: 0; color: var(--ecar-ink); font-size: clamp(21px, 6vw, 27px); line-height: 1.08; letter-spacing: -.035em; }
.garage-onboarding-copy p { margin: 7px 0 0; color: var(--ecar-muted); font-size: 12px; line-height: 1.45; }
.garage-stepper {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(60px, auto) minmax(18px, 1fr) minmax(60px, auto) minmax(18px, 1fr) minmax(60px, auto);
  align-items: start;
  gap: 6px;
  margin: 4px 0 0;
}
.garage-stepper > span { display: grid; justify-items: center; gap: 5px; color: var(--ecar-muted); }
.garage-stepper > span i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(72,94,120,.16); border-radius: 50%; background: rgba(255,255,255,.76); font-size: 11px; font-style: normal; font-weight: 800; }
.garage-stepper > span small { font-size: 9px; font-weight: 700; }
.garage-stepper > span.active i { color: #fff; background: var(--ecar-blue); border-color: var(--ecar-blue); box-shadow: 0 5px 12px rgba(49,95,244,.22); }
.garage-stepper > span.done i { color: #fff; background: #3c9a6b; border-color: #3c9a6b; }
.garage-stepper > b { height: 2px; margin-top: 13px; border-radius: 99px; background: rgba(72,94,120,.16); }
.garage-stepper > b.done { background: #3c9a6b; }
.garage-onboarding-progress { grid-column: 1 / -1; position: relative; height: 22px; display: flex; align-items: center; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.72); }
.garage-onboarding-progress > span { position: absolute; inset: 0 auto 0 0; width: var(--value); background: linear-gradient(90deg, rgba(49,95,244,.22), rgba(117,152,255,.34)); }
.garage-onboarding-progress > small { position: relative; z-index: 1; margin-left: 10px; color: var(--ecar-blue-deep); font-size: 9px; font-weight: 800; }
.garage-onboarding-action { grid-column: 1 / -1; min-height: 48px; margin-top: 1px; border-radius: 16px; }
.garage-access-note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 6px; color: var(--ecar-muted); font-size: 9.5px; line-height: 1.4; }
.garage-access-note svg { flex: none; color: #3c9a6b; }
.ecar-hero {
  position: relative;
  min-height: 310px;
  padding: 22px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--green) 25%, var(--line));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--green) 12%, transparent), transparent 42%),
    var(--panel-solid);
  animation: requestCardIn .28s var(--ease-soft) both;
}
.request-preview-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
}
.request-preview-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #30b875, #168653);
  box-shadow: 0 8px 20px rgba(23, 143, 86, .24);
  font-size: 17px;
  font-weight: 900;
}
.request-preview-person { display: grid; min-width: 0; gap: 2px; }
.request-preview-person small {
  color: var(--green);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.request-preview-person b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.request-preview-person b i { color: #e59b22; font-style: normal; font-size: 12px; }
.request-preview-person em { color: var(--muted); font-style: normal; font-size: 10px; }
.request-preview-route {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
}
.request-preview-route::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 27px;
  bottom: 27px;
  width: 2px;
  background: color-mix(in srgb, var(--green) 35%, var(--line));
}
.request-preview-route > span {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 24px 54px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}
.request-preview-route i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  background: var(--panel-solid);
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
}
.request-preview-route small { color: var(--muted); font-size: 9px; font-weight: 700; }
.request-preview-route b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.request-preview-offer {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 13px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid));
}
.request-preview-offer > svg, .request-preview-offer > i { margin: auto; }
.request-preview-offer span { display: grid; gap: 2px; min-width: 0; }
.request-preview-offer small { color: var(--muted); font-size: 9px; }
.request-preview-offer b { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.request-preview-card .hud-card-actions { margin-top: 10px; }

.chat-audio-source { display: none; }
.chat-voice-player {
  --voice-progress: 0%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(270px, 70vw);
  min-height: 58px;
  color: inherit;
}
.chat-voice-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, var(--panel-solid));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--blue) 16%, transparent);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) ease;
}
.bubble.me .chat-voice-toggle { color: var(--blue); background: #fff; }
.chat-voice-toggle:active { transform: scale(.9); }
.chat-voice-main { display: grid; min-width: 0; flex: 1; gap: 2px; }
.chat-voice-track { position: relative; display: block; height: 34px; overflow: hidden; }
.chat-voice-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  color: currentColor;
  opacity: .28;
}
.chat-voice-wave i {
  display: block;
  flex: 1 1 2px;
  min-width: 2px;
  height: var(--voice-bar);
  max-height: 30px;
  border-radius: 99px;
  background: currentColor;
  transform-origin: center;
}
.chat-voice-wave-progress {
  width: var(--voice-progress);
  color: var(--blue);
  opacity: 1;
  overflow: hidden;
}
.bubble.me .chat-voice-wave-progress { color: #fff; }
.chat-voice-track input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  margin: 0;
  opacity: .001;
  cursor: pointer;
}
.chat-voice-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; line-height: 1; }
.chat-voice-meta b { font-size: 9px; font-weight: 800; }
.chat-voice-meta time { opacity: .68; font-variant-numeric: tabular-nums; }
.media-pause-icon { display: none; }
.is-playing .media-play-icon { display: none; }
.is-playing .media-pause-icon { display: inline-grid; }
.chat-voice-player.is-playing .chat-voice-toggle {
  transform: scale(1.04);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--blue) 25%, transparent);
}
.chat-voice-player.is-playing .chat-voice-wave i { animation: voiceBarLive .72s ease-in-out infinite alternate; }
.chat-voice-player.is-playing .chat-voice-wave i:nth-child(3n) { animation-delay: -.2s; }
.chat-voice-player.is-playing .chat-voice-wave i:nth-child(4n) { animation-delay: -.42s; }

.bubble-circle { overflow: visible; }
.chat-circle-player {
  --media-progress: 0deg;
  position: relative;
  width: 190px;
  height: 190px;
  padding: 6px;
  border-radius: 50%;
  background: conic-gradient(var(--blue) var(--media-progress), rgba(255,255,255,.24) 0);
  box-shadow: 0 12px 30px rgba(14, 28, 55, .28);
  transition: transform .24s var(--ease-soft), box-shadow .24s ease;
}
.chat-circle-source {
  display: block;
  width: 178px;
  height: 178px;
  border: 3px solid var(--panel-solid);
  border-radius: 50%;
  object-fit: cover;
  background: #111827;
}
.chat-circle-toggle {
  position: absolute;
  inset: 6px;
  display: grid;
  place-items: center;
  width: 178px;
  height: 178px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(6, 12, 25, .2);
  cursor: pointer;
}
.chat-circle-toggle > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(6, 12, 25, .68);
  box-shadow: 0 7px 22px rgba(0,0,0,.28);
  backdrop-filter: blur(7px);
  transition: transform var(--motion-fast) var(--ease-soft), opacity var(--motion-fast) ease;
}
.chat-circle-toggle:active > span { transform: scale(.88); }
.chat-circle-time {
  position: absolute;
  right: 18px;
  bottom: 12px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 12, 25, .68);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  backdrop-filter: blur(7px);
}
.chat-circle-player.is-playing {
  transform: scale(1.025);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--blue) 34%, transparent);
  animation: circleBreath 2.4s ease-in-out infinite;
}
.chat-circle-player.is-playing .chat-circle-toggle { background: transparent; }
.chat-circle-player.is-playing .chat-circle-toggle > span { opacity: .86; }

.rec-voice-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 46px;
  height: 38px;
  border-radius: 14px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-solid));
}
.rec-voice-visual i {
  width: 3px;
  height: 18px;
  border-radius: 99px;
  background: currentColor;
  animation: recVoiceLive .62s ease-in-out infinite alternate;
}
.rec-voice-visual i:nth-child(2n) { animation-delay: -.3s; }
.rec-voice-visual i:nth-child(3n) { animation-delay: -.48s; }
.rec-preview {
  position: relative;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 55%, transparent);
  animation: recCircleLive 1.8s ease-in-out infinite;
}

@keyframes requestCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes voiceBarLive {
  from { transform: scaleY(.55); }
  to { transform: scaleY(1); }
}
@keyframes circleBreath {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.14); }
}
@keyframes recVoiceLive {
  from { transform: scaleY(.42); }
  to { transform: scaleY(1); }
}
@keyframes recCircleLive {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--blue) 10%, transparent); }
}

@media (max-width: 420px) {
  .request-preview-card { padding: 12px; }
  .chat-voice-player { width: min(250px, 68vw); }
  .chat-circle-player { width: 176px; height: 176px; }
  .chat-circle-source,
  .chat-circle-toggle { width: 164px; height: 164px; }
}

@media (prefers-reduced-motion: reduce) {
  .request-preview-card,
  .chat-voice-player.is-playing .chat-voice-wave i,
  .chat-circle-player.is-playing,
  .rec-voice-visual i,
  .rec-preview { animation: none !important; }
}

/* Vector Research: consent and privacy controls */
.research-settings-button {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue, #2456ff) 20%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue, #2456ff) 10%, var(--surface, #fff)), var(--surface, #fff));
  color: var(--text, #111827);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.research-settings-button > svg:first-child {
  width: 42px !important;
  height: 42px !important;
  padding: 10px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #2456ff, #6d7dff);
  box-shadow: 0 8px 22px rgba(36,86,255,.24);
}
.research-settings-button span { min-width: 0; display: grid; gap: 3px; }
.research-settings-button b { font-size: 15px; }
.research-settings-button small { color: var(--muted, #697386); line-height: 1.3; }
.research-settings-button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(36,86,255,.11); }
.research-settings-button:active { transform: scale(.985); }

.research-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: end center;
  padding: 18px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  background: rgba(10,18,38,.48);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: research-fade .22s ease both;
}
.research-consent-card {
  width: min(100%, 560px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0, rgba(78,120,255,.20), transparent 38%),
    color-mix(in srgb, var(--surface, #fff) 94%, transparent);
  color: var(--text, #101828);
  box-shadow: 0 30px 80px rgba(8,16,40,.28);
  animation: research-rise .3s cubic-bezier(.2,.8,.2,1) both;
}
.research-consent-orb {
  width: 50px;
  height: 50px;
  display: block;
  overflow: hidden;
  border-radius: 17px;
  background: #07162f;
  box-shadow: 0 12px 30px rgba(36,86,255,.28);
}
.research-consent-orb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.research-consent-kicker {
  color: #2456ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.research-consent-card h2 { margin: 5px 0 7px; font-size: clamp(21px, 5vw, 28px); line-height: 1.08; }
.research-consent-card p { margin: 0; color: var(--muted, #667085); font-size: 14px; line-height: 1.5; }
.research-consent-option {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--text, #111827) 10%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface, #fff) 82%, #eef3ff);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.research-consent-option:hover { border-color: rgba(36,86,255,.36); transform: translateY(-1px); }
.research-consent-option input { width: 21px; height: 21px; margin: 1px 0 0; accent-color: #2456ff; }
.research-consent-option span { display: grid; gap: 4px; }
.research-consent-option b { font-size: 15px; }
.research-consent-option small { color: var(--muted, #667085); line-height: 1.35; }
.research-consent-note {
  padding: 11px 13px;
  border-radius: 14px;
  color: var(--muted, #667085);
  background: rgba(36,86,255,.07);
  font-size: 12px;
  line-height: 1.45;
}
.research-consent-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; }
.research-consent-actions button {
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  padding: 0 14px;
  font: 700 14px/1 "Golos Text", sans-serif;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.research-consent-actions button:active { transform: scale(.98); }
.research-consent-actions button:disabled { opacity: .55; cursor: wait; }
.research-consent-skip,
.research-consent-decline,
.research-consent-withdraw { color: var(--text, #101828); background: color-mix(in srgb, var(--text, #111827) 8%, transparent); }
.research-consent-accept,
.research-consent-close { color: #fff; background: linear-gradient(135deg, #2456ff, #5f73ff); box-shadow: 0 10px 25px rgba(36,86,255,.24); }
.research-consent-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 13px 14px 13px 32px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface, #fff) 84%, #eef3ff);
  color: var(--muted, #667085);
  font-size: 12.5px;
  line-height: 1.42;
}
.research-consent-list b { color: var(--text, #101828); }
.research-document-links { display: flex; flex-wrap: wrap; gap: 8px; }
.research-document-links a {
  padding: 9px 11px;
  border: 1px solid rgba(36,86,255,.22);
  border-radius: 12px;
  color: #2456ff;
  background: rgba(36,86,255,.06);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.research-consent-status {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  padding: 13px;
  border-radius: 17px;
  color: #0a7a46;
  background: rgba(20,170,99,.10);
  border: 1px solid rgba(20,170,99,.20);
}
.research-consent-status > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: #13a362;
  font-weight: 900;
}
.research-consent-status div { display: grid; gap: 3px; }
.research-consent-status small { color: var(--muted, #667085); line-height: 1.35; }
@keyframes research-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes research-rise { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 700px) {
  .research-consent-backdrop { place-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .research-consent-backdrop, .research-consent-card { animation: none; }
  .research-settings-button, .research-consent-option, .research-consent-actions button, .research-document-links a { transition: none; }
}


/* ==== eCar Control UI Kit · Vector Garage ==== */
.ecar-garage {
  --ecar-ink: #172940;
  --ecar-muted: #718299;
  --ecar-blue: #315ff4;
  --ecar-blue-deep: #214bd3;
  --ecar-blue-soft: #dfe9ff;
  display: grid;
  gap: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ecar-ink);
}
.ecar-garage button,
.ecar-garage input,
.ecar-garage textarea { font: inherit; }
.ecar-hero {
  position: relative;
  min-height: 310px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 12%, rgba(49,95,244,.24), transparent 38%),
    linear-gradient(145deg, #fafdff 0%, #eef3ff 54%, #dbe6ff 100%);
  box-shadow: 0 22px 54px rgba(50,76,115,.15), inset 0 1px 0 rgba(255,255,255,.94);
  isolation: isolate;
}
.ecar-hero::after {
  content: "";
  position: absolute;
  inset: auto -18% -42% 30%;
  height: 72%;
  border-radius: 50%;
  background: rgba(255,255,255,.48);
  filter: blur(2px);
  z-index: -1;
}
.ecar-hero-copy { position: relative; z-index: 3; }
.ecar-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--ecar-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ecar-hero-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ecar-hero h2,
.ecar-section h3 {
  margin: 0;
  color: var(--ecar-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
}
.ecar-hero h2 { font-size: clamp(25px, 7vw, 34px); font-weight: 760; line-height: 1; }
.ecar-hero p {
  margin: 7px 0 0;
  color: var(--ecar-muted);
  font-size: 13px;
  font-weight: 550;
}
.ecar-hero .vehicle-plate,
.ecar-book-footer .vehicle-plate {
  flex: none;
  border: 1px solid rgba(23,41,64,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 8px 24px rgba(49,79,122,.1);
  color: var(--ecar-ink);
}
.ecar-car-stage {
  position: relative;
  height: 178px;
  margin: 4px -15px -6px;
  display: grid;
  place-items: center;
}
.ecar-car-stage::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 20px;
  bottom: 21px;
  border-radius: 50%;
  background: rgba(34,49,69,.22);
  filter: blur(12px);
}
.ecar-car-stage img {
  position: relative;
  z-index: 2;
  width: min(105%, 520px);
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(28,43,65,.22));
  transform: translateY(4px);
}
.ecar-orbit {
  position: absolute;
  border: 1px solid rgba(49,95,244,.16);
  border-radius: 50%;
  transform: rotate(-8deg);
}
.ecar-orbit-one { width: 88%; height: 114px; }
.ecar-orbit-two { width: 66%; height: 76px; border-color: rgba(255,255,255,.84); }
.ecar-hero-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 15px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ecar-hero-foot > span:last-child { display: grid; gap: 1px; }
.ecar-hero-foot b { font-size: 12px; }
.ecar-hero-foot small { color: var(--ecar-muted); font-size: 9.5px; line-height: 1.25; }
.ecar-ready-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border: 3px solid rgba(80,170,125,.18);
  border-radius: 50%;
  background: #50aa7d;
  box-sizing: content-box;
}
.ecar-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(72,94,120,.08);
  border-radius: 22px;
  background: rgba(105,127,153,.1);
  box-shadow: 0 14px 34px rgba(53,77,106,.08);
}
.ecar-metric {
  min-width: 0;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(250,252,254,.88);
}
.ecar-metric-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
  color: var(--ecar-blue);
  background: var(--ecar-blue-soft);
}
.ecar-metric > span:last-child { min-width: 0; display: grid; }
.ecar-metric b { font-size: 16px; line-height: 1; }
.ecar-metric small { margin-top: 3px; overflow: hidden; color: var(--ecar-muted); font-size: 9.5px; text-overflow: ellipsis; }
.ecar-section {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 26px;
  background: rgba(248,250,252,.84);
  box-shadow: 0 16px 40px rgba(57,80,103,.1), inset 0 1px 0 rgba(255,255,255,.86);
}
.ecar-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ecar-section h3 { font-size: 19px; font-weight: 720; line-height: 1.1; }
.ecar-count,
.ecar-status-chip {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--ecar-blue-deep);
  background: var(--ecar-blue-soft);
  font-size: 10px;
  font-weight: 750;
}
.ecar-progress {
  height: 7px;
  margin: 15px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebf2;
}
.ecar-progress span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ecar-blue), #7598ff);
  box-shadow: 0 3px 9px rgba(49,95,244,.32);
}
.ecar-driver-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 0 0 15px;
  border-bottom: 1px solid rgba(57,80,103,.09);
}
.ecar-driver-avatar { width: 46px; height: 46px; border: 3px solid #fff; box-shadow: 0 7px 20px rgba(45,68,98,.14); }
.ecar-driver-copy { min-width: 0; display: grid; gap: 2px; }
.ecar-driver-copy b { font-size: 13px; }
.ecar-driver-copy small { color: var(--ecar-muted); font-size: 10px; }
.ecar-icon-action {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: var(--ecar-blue);
  background: var(--ecar-blue-soft);
  cursor: pointer;
}
.ecar-verification-list { margin-top: 4px; }
.ecar-verification-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border-bottom: 1px solid rgba(57,80,103,.075);
}
.ecar-verification-row:last-child { border-bottom: 0; }
.ecar-verification-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ecar-muted);
  background: #edf1f5;
}
.ecar-verification-icon.ready { color: #2f8b5e; background: #dff2e8; }
.ecar-verification-icon.pending { color: #b27628; background: #f7ebd7; }
.ecar-verification-copy { min-width: 0; display: grid; gap: 1px; }
.ecar-verification-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ecar-verification-copy small { overflow: hidden; color: var(--ecar-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.ecar-verification-status { color: var(--ecar-muted); font-size: 9px; font-weight: 700; }
.ecar-verification-status.ready { color: #2f8b5e; }
.ecar-verification-status.pending { color: #b27628; }
.ecar-service-timeline { margin-top: 14px; }
.ecar-service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 0 0 17px;
}
.ecar-service-row:last-child { padding-bottom: 4px; }
.ecar-service-row:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 13px;
  width: 1px;
  background: rgba(49,95,244,.16);
}
.ecar-service-marker {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  z-index: 1;
  border-radius: 10px;
  color: var(--ecar-blue);
  background: var(--ecar-blue-soft);
}
.ecar-service-copy { min-width: 0; display: grid; gap: 3px; }
.ecar-service-title { color: var(--ecar-ink); font-size: 12.5px; font-weight: 720; }
.ecar-service-meta { color: var(--ecar-muted); font-size: 9.5px; line-height: 1.35; }
.ecar-service-price { color: var(--ecar-ink); font-size: 11px; white-space: nowrap; }
.ecar-book-footer {
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(57,80,103,.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ecar-muted);
  font-size: 9.5px;
}
.ecar-book-footer > span:first-child { display: flex; align-items: center; gap: 5px; }
.ecar-empty-state { display: flex; align-items: center; gap: 9px; color: var(--ecar-muted); font-size: 11px; }
.ecar-edit-action {
  min-height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ecar-blue-deep), var(--ecar-blue));
  box-shadow: 0 14px 28px rgba(49,95,244,.24);
}
[data-theme="dark"] .ecar-hero {
  border-color: rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 88% 12%, rgba(80,119,255,.28), transparent 40%),
    linear-gradient(145deg, #202d43, #172338 58%, #263c66);
}
[data-theme="dark"] .ecar-hero h2,
[data-theme="dark"] .ecar-hero p,
[data-theme="dark"] .ecar-hero-foot,
[data-theme="dark"] .ecar-hero .vehicle-plate { color: #f4f7fb; }
[data-theme="dark"] .ecar-hero p,
[data-theme="dark"] .ecar-hero-foot small { color: #b9c5d5; }
[data-theme="dark"] .ecar-hero-foot { border-color: rgba(255,255,255,.12); background: rgba(19,29,46,.56); }
[data-theme="dark"] .ecar-metrics { background: rgba(255,255,255,.05); }
[data-theme="dark"] .ecar-metric,
[data-theme="dark"] .ecar-section { background: rgba(29,40,56,.92); }
[data-theme="dark"] .ecar-section h3,
[data-theme="dark"] .ecar-service-title,
[data-theme="dark"] .ecar-service-price,
[data-theme="dark"] .ecar-metric b { color: #edf3fb; }
[data-theme="dark"] .ecar-section { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ecar-progress { background: #2f3c4f; }
@media (max-width: 390px) {
  .ecar-hero { min-height: 296px; padding: 18px; border-radius: 26px; }
  .ecar-car-stage { height: 164px; }
  .ecar-metric { padding: 13px 8px; gap: 6px; }
  .ecar-metric-icon { width: 28px; height: 28px; }
  .ecar-section { padding: 17px; border-radius: 23px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ecar-car-stage img { animation: ecar-float 6s ease-in-out infinite; }
}
@keyframes ecar-float {
  0%, 100% { transform: translateY(4px); }
  50% { transform: translateY(-3px); }
}

/* Final mobile search override: intentionally after all route-field rules. */
@media (max-width: 899px) {
  body.place-search-active .place-search-form {
    position: sticky;
    top: 0;
    z-index: 12;
    background: #f6f7fa;
  }
  body.place-search-active .place-field.destination.has-pick,
  body.place-search-active .place-field.destination.has-pick:focus-within {
    background: #f3f3f4;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  body.place-search-active .place-field.destination input,
  body.place-search-active .place-field.destination input:focus,
  body.place-search-active .place-field.destination input:focus-visible {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none !important;
  }
  body.place-search-active .place-search-clear {
    right: 2px;
    width: 44px;
    height: 44px;
  }
  body.place-search-active .panel-body { scrollbar-width: none; }
  body.place-search-active .panel-body::-webkit-scrollbar { display: none; }
  body.place-search-active .address-result small,
  body.place-search-active .address-result-tail { color: #676b72; }
}

@media (max-width: 899px) {
  body.place-search-active .place-field.destination.driver-destination-field.has-pick,
  body.place-search-active .place-field.destination.driver-destination-field.has-pick:focus-within {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: 18px 26px;
    min-height: 62px;
    padding: 8px 9px 8px 12px;
    background: #f7f8fb;
    border: 1px solid rgba(28, 39, 58, .09);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(11, 20, 36, .10);
  }
  body.place-search-active .place-field.destination.driver-destination-field.has-pick:focus-within {
    background: #fff;
    border-color: rgba(36, 107, 253, .42);
    box-shadow: 0 0 0 4px rgba(36, 107, 253, .10), 0 10px 28px rgba(11, 20, 36, .12);
  }
  body.place-search-active .place-field.destination.driver-destination-field > .place-field-label {
    display: inline-flex;
    place-items: initial;
    color: #777e8c;
    font-size: 10px;
  }
  body.place-search-active .place-field.destination.driver-destination-field > input,
  body.place-search-active .place-field.destination.driver-destination-field > input:focus,
  body.place-search-active .place-field.destination.driver-destination-field > input:focus-visible {
    min-height: 26px;
    padding: 0;
    color: #171a20;
    font-size: 15px;
    font-weight: 750;
  }
  body.place-search-active .place-field.destination.driver-destination-field .map-pick-btn { display: grid; }
  body.place-search-active .place-field.destination.driver-destination-field .place-search-clear {
    position: static;
    right: auto;
    width: 40px;
    height: 40px;
  }
}

/* Returning from the prepared route opens a dedicated destination editor,
   not the original two-address planner. It stays part of the sheet and never
   swaps to the browser's bright focus rectangle. */
#driver-destination-search-form.driver-destination-edit-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#driver-destination-search-form.driver-destination-edit-form .place-stack { display: block; }
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field.has-pick,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field:focus-within,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field.has-pick:focus-within {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: 18px 27px;
  min-height: 64px;
  padding: 9px 10px 9px 12px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--accent) 12%);
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  transform: none;
}
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field:focus-within,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field.has-pick:focus-within {
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--accent) 18%);
  border: 0;
  box-shadow: none;
}
.driver-destination-edit-form .driver-destination-search-icon {
  width: 40px;
  height: 40px;
  color: var(--accent) !important;
  background: var(--accent-soft);
  border-radius: 13px;
}
.driver-destination-edit-form .driver-destination-field > .place-field-label,
body.place-search-active .driver-destination-edit-form .driver-destination-field > .place-field-label {
  display: inline-flex;
  color: var(--text-secondary);
  font-size: 10px;
}
.driver-destination-edit-form .driver-destination-field > input,
.driver-destination-edit-form .driver-destination-field > input:focus,
.driver-destination-edit-form .driver-destination-field > input:focus-visible,
body.place-search-active .driver-destination-edit-form .driver-destination-field > input,
body.place-search-active .driver-destination-edit-form .driver-destination-field > input:focus,
body.place-search-active .driver-destination-edit-form .driver-destination-field > input:focus-visible {
  min-height: 27px;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  font-size: 16px;
  font-weight: 800;
}
.driver-destination-edit-form .driver-destination-field > input::placeholder { color: var(--text-tertiary); }
.driver-destination-edit-form .driver-destination-actions { gap: 8px; }
.driver-destination-edit-form .driver-destination-field .place-search-clear,
.driver-destination-edit-form .driver-destination-field .map-pick-btn {
  position: static;
  right: auto;
  display: grid;
  width: 40px;
  height: 40px;
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 0;
  border-radius: 13px;
}
.driver-destination-edit-form .driver-destination-field .map-pick-btn { color: var(--accent); }
#driver-destination-search-form.driver-destination-edit-form .place-search-submit {
  grid-column: 1;
  width: 100%;
  min-height: 48px;
  border-radius: 15px;
}

@media (max-width: 899px) {
  body.driver-destination-editing.place-search-active .workspace .panel,
  body.driver-destination-editing.place-search-active .panel-body,
  body.driver-destination-editing.place-search-active #driver-destination-search-form {
    background: var(--surface-card);
  }
  body.driver-destination-editing.place-search-active #driver-destination-search-form {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 12px 14px;
    border: 0;
  }
  body.driver-destination-editing.place-search-active .sheet-handle span {
    background: var(--stroke-strong);
  }
  body.driver-destination-editing.place-search-active #driver-destination-search-form .place-search-submit {
    grid-column: 1 !important;
  }
}

/* ============================================================
   eCar semantic theme · authoritative final cascade
   The source kit supplies the light palette and component proportions. Dark
   colors are semantic counterparts so every surface keeps the same hierarchy.
   This block intentionally comes last while legacy rules are migrated.
   ============================================================ */
:root {
  --surface-canvas: #f3f4f6;
  --surface-card: #ffffff;
  --surface-soft: #f5f7fa;
  --surface-raised: rgba(255, 255, 255, .96);
  --text-primary: #212121;
  --text-secondary: #5f697b;
  --text-tertiary: #6d7788;
  --stroke-soft: #e3e8ef;
  --stroke-strong: #cfd7e4;
  --accent: #326bfe;
  --accent-strong: #214bd3;
  --accent-soft: #e8efff;
  --success: #115b43;
  --success-soft: #f1fbf8;
  --warning: #955b00;
  --warning-soft: #fff8ec;
  --danger: #c33025;
  --danger-soft: #fff1f0;
  --radius-control: 16px;
  --radius-card: 16px;
  --radius-sheet: 24px;
  --shadow-1: 0 2px 8px rgba(24, 36, 58, .07);
  --shadow-2: 0 12px 32px rgba(24, 36, 58, .12);

  /* Legacy aliases remain explicit until their callers are removed. */
  --surface: var(--surface-card);
  --surface-2: var(--surface-soft);
  --text: var(--text-primary);
  --paper: var(--surface-canvas);
  --paper-2: var(--surface-soft);
  --panel: var(--surface-raised);
  --panel-solid: var(--surface-card);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --faint: var(--text-tertiary);
  --line: var(--stroke-soft);
  --line-strong: var(--stroke-strong);
  --blue: var(--accent);
  --blue-2: var(--accent-strong);
  --green: var(--success);
  --green-bg: var(--success-soft);
  --amber: var(--warning);
  --amber-bg: var(--warning-soft);
  --red: var(--danger);
  --red-bg: var(--danger-soft);
  --radius: var(--radius-control);
  --shadow-sm: var(--shadow-1);
  --shadow: var(--shadow-2);
}

[data-theme="dark"] {
  --surface-canvas: #10141c;
  --surface-card: #191f2a;
  --surface-soft: #222a37;
  --surface-raised: rgba(25, 31, 42, .96);
  --text-primary: #f3f6fb;
  --text-secondary: #b0b9c8;
  --text-tertiary: #8f9aac;
  --stroke-soft: #303a49;
  --stroke-strong: #435064;
  --accent: #749bff;
  --accent-strong: #8aabff;
  --accent-soft: rgba(116, 155, 255, .15);
  --success: #84dfc1;
  --success-soft: rgba(50, 201, 151, .14);
  --warning: #ffd596;
  --warning-soft: rgba(255, 168, 38, .14);
  --danger: #f0857d;
  --danger-soft: rgba(240, 133, 125, .14);
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .2);
  --shadow-2: 0 14px 36px rgba(0, 0, 0, .34);
}

/* Route fields are one surface. The input itself never draws a second box. */
.place-field,
.place-field.has-pick,
.place-field.origin,
.place-field.origin.has-pick,
.driver-destination-field,
.driver-destination-field.has-pick,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field.has-pick {
  min-height: 56px;
  color: var(--text-primary);
  background: var(--surface-soft);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-control);
  box-shadow: none;
  transform: none;
}

.place-field:focus-within,
.place-field.has-pick:focus-within,
.driver-destination-field:focus-within,
.driver-destination-field.has-pick:focus-within,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field:focus-within,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field.has-pick:focus-within {
  color: var(--text-primary);
  background: var(--surface-card);
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}

.place-field:has(> input:focus-visible),
.driver-destination-field:has(> input:focus-visible),
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field:has(> input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.place-field > input,
.place-field > input:focus,
.place-field > input:focus-visible,
.driver-destination-field > input,
.driver-destination-field > input:focus,
.driver-destination-field > input:focus-visible,
.driver-destination-edit-form .driver-destination-field > input,
.driver-destination-edit-form .driver-destination-field > input:focus,
.driver-destination-edit-form .driver-destination-field > input:focus-visible {
  min-width: 0;
  color: var(--text-primary);
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.place-field > input::placeholder,
.driver-destination-field > input::placeholder,
.driver-destination-edit-form .driver-destination-field > input::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.driver-destination-field,
.driver-destination-field.has-pick,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field,
#driver-destination-search-form.driver-destination-edit-form .driver-destination-field.has-pick {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: 16px 24px;
  column-gap: 8px;
  row-gap: 0;
  padding: 7px 8px 7px 10px;
}

.driver-destination-search-icon,
.driver-destination-edit-form .driver-destination-search-icon {
  width: 34px;
  height: 34px;
  color: var(--accent) !important;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.driver-destination-field > .place-field-label,
.driver-destination-edit-form .driver-destination-field > .place-field-label,
body.place-search-active .driver-destination-edit-form .driver-destination-field > .place-field-label {
  color: var(--text-secondary);
  font-size: 10px;
}

.driver-destination-field > input,
.driver-destination-edit-form .driver-destination-field > input {
  min-height: 24px;
  padding: 0;
  font-size: 15px;
  font-weight: 750;
}

.driver-destination-actions { gap: 4px; }
.driver-destination-field .place-search-clear,
.driver-destination-field .origin-locate,
.driver-destination-field .map-pick-btn,
.driver-destination-edit-form .driver-destination-field .place-search-clear,
.driver-destination-edit-form .driver-destination-field .map-pick-btn {
  position: static;
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 12px;
}
.driver-destination-field .map-pick-btn,
.driver-destination-edit-form .driver-destination-field .map-pick-btn { color: var(--accent); }
.driver-destination-field :is(.place-search-clear, .origin-locate, .map-pick-btn):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Search sheet and results use the same tokens in both themes. */
@media (max-width: 899px) {
  body.place-search-active .workspace .panel,
  body.place-search-active .panel-body,
  body.place-search-active .place-search-form,
  body.driver-destination-editing.place-search-active .workspace .panel,
  body.driver-destination-editing.place-search-active .panel-body,
  body.driver-destination-editing.place-search-active #driver-destination-search-form {
    color: var(--text-primary);
    background: var(--surface-card);
  }

  body.place-search-active .workspace .panel {
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--shadow-2);
  }

  body.place-search-active .sheet-handle span { background: var(--stroke-strong); }
  body.place-search-active .place-search-form {
    gap: 8px;
    padding: 0 14px 14px;
    border-bottom: 8px solid var(--surface-canvas);
  }

  body.place-search-active .place-field.destination,
  body.place-search-active .place-field.destination.has-pick,
  body.place-search-active .place-field.destination:focus-within,
  body.place-search-active .place-field.destination.has-pick:focus-within {
    grid-column: 1;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 58px;
    padding: 0 5px 0 3px;
    color: var(--text-primary);
    background: var(--surface-soft);
    border: 1px solid var(--stroke-soft);
    border-radius: 18px;
    box-shadow: none;
  }

  body.place-search-active .place-field.destination:focus-within,
  body.place-search-active .place-field.destination.has-pick:focus-within {
    background: var(--surface-card);
    border-color: var(--accent);
  }

  body.place-search-active .place-field.destination:has(> input:focus-visible),
  body.place-search-active .place-field.destination.has-pick:has(> input:focus-visible) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  body.place-search-active .place-field.destination .place-field-label { color: var(--text-primary); }
  body.place-search-active .place-field.destination input,
  body.place-search-active .place-field.destination input:focus,
  body.place-search-active .place-field.destination input:focus-visible {
    min-height: 44px;
    padding: 0;
    color: var(--text-primary);
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: clamp(17px, 5vw, 20px);
  }

  body.place-search-active .place-search-clear {
    position: static;
    width: 44px;
    height: 44px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: 12px;
  }

  body.place-search-active .place-search-submit {
    min-width: 84px;
    min-height: 58px;
    padding-inline: 14px;
    color: #fff;
    background: var(--accent);
    border-radius: 18px;
  }

  body.place-search-active .address-results {
    gap: 8px;
    padding: 12px;
    background: var(--surface-canvas);
  }

  body.place-search-active .address-results-head {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-card) 96%, transparent);
    border-bottom-color: var(--stroke-soft);
  }

  body.place-search-active .address-result,
  body.place-search-active .address-result:focus-visible {
    color: var(--text-primary);
    background: var(--surface-card);
    border-color: var(--stroke-soft);
    box-shadow: var(--shadow-1);
  }

  body.place-search-active .address-result:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    outline: 0;
  }

  body.place-search-active .address-result-icon {
    color: var(--accent);
    background: var(--accent-soft);
  }

  body.place-search-active .address-result[data-kind="Магазин"],
  body.place-search-active .address-result[data-kind="Магазин у дома"] {
    background: color-mix(in srgb, var(--warning-soft) 72%, var(--surface-card));
    border-color: color-mix(in srgb, var(--warning) 24%, var(--stroke-soft));
  }

  body.place-search-active .address-result[data-kind="Магазин"] .address-result-icon,
  body.place-search-active .address-result[data-kind="Магазин у дома"] .address-result-icon {
    color: var(--warning);
    background: var(--warning-soft);
  }

  body.place-search-active .address-result b { color: var(--text-primary); }
  body.place-search-active .address-result small,
  body.place-search-active .address-result-tail { color: var(--text-secondary); }
  body.place-search-active .address-search-state {
    color: var(--text-secondary);
    background: var(--surface-soft);
    border: 1px solid var(--stroke-soft);
  }

  /* Keep the dedicated driver editor a single compact surface as well. */
  body.place-search-active .place-field.destination.driver-destination-field,
  body.place-search-active .place-field.destination.driver-destination-field.has-pick,
  body.place-search-active .place-field.destination.driver-destination-field:focus-within,
  body.place-search-active .place-field.destination.driver-destination-field.has-pick:focus-within {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: 16px 24px;
    min-height: 58px;
    padding: 7px 8px 7px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--stroke-soft);
    box-shadow: none;
  }
  body.place-search-active .place-field.destination.driver-destination-field:focus-within,
  body.place-search-active .place-field.destination.driver-destination-field.has-pick:focus-within {
    background: var(--surface-card);
    border-color: var(--accent);
  }
}

@media (max-width: 360px) {
  body.place-search-active .place-search-form { padding-inline: 10px; }
  body.place-search-active .place-search-submit {
    min-width: 76px;
    padding-inline: 11px;
    font-size: 15px;
  }
  body.place-search-active .address-results { padding-inline: 10px; }
}

@media (max-width: 320px) {
  body.place-search-active .place-search-form { gap: 6px; padding-inline: 8px; }
  body.place-search-active .place-search-submit { min-width: 72px; padding-inline: 9px; }
  body.place-search-active .address-results { padding-inline: 8px; }
  .driver-destination-actions { gap: 2px; }
}

/* The older mobile driver editor used hard-coded light text with a more
   specific selector. Keep the field readable after switching theme. */
[data-theme="dark"] body.place-search-active .driver-destination-field > .place-field-label,
[data-theme="dark"] body.place-search-active .driver-destination-edit-form .driver-destination-field > .place-field-label {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] body.place-search-active .driver-destination-field > input,
[data-theme="dark"] body.place-search-active .driver-destination-field > input:focus,
[data-theme="dark"] body.place-search-active .driver-destination-field > input:focus-visible,
[data-theme="dark"] body.place-search-active .driver-destination-edit-form .driver-destination-field > input {
  color: var(--text-primary) !important;
  caret-color: var(--accent);
}

/* Garage adopts the kit's flat cards, proportions and accessible semantics. */
.ecar-garage {
  --ecar-ink: var(--text-primary);
  --ecar-muted: var(--text-secondary);
  --ecar-blue: var(--accent);
  --ecar-blue-deep: var(--accent-strong);
  --ecar-blue-soft: var(--accent-soft);
  gap: 12px;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ecar-garage button,
.ecar-garage input,
.ecar-garage textarea,
.ecar-garage h2,
.ecar-garage h3 { font-family: inherit; }

.ecar-hero,
.ecar-section,
.ecar-metric {
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--stroke-soft);
  box-shadow: none;
}
.ecar-hero {
  min-height: 292px;
  padding: 18px;
  border-radius: 20px;
  background: var(--surface-card);
}
.ecar-hero::after,
.ecar-orbit { display: none; }
.ecar-car-stage { height: 164px; margin: 2px -10px -4px; }
.ecar-car-stage img { animation: none !important; filter: drop-shadow(0 14px 16px rgba(28, 43, 65, .18)); }
.ecar-hero h2,
.ecar-section h3,
.ecar-service-title,
.ecar-service-price,
.ecar-metric b,
.ecar-driver-copy b,
.ecar-verification-copy b { color: var(--text-primary); }
.ecar-hero p,
.ecar-driver-copy small,
.ecar-verification-copy small,
.ecar-service-meta,
.ecar-book-footer,
.ecar-empty-state,
.ecar-metric small,
.ecar-verification-status { color: var(--text-secondary); }

.ecar-hero-foot {
  border-color: var(--stroke-soft);
  background: var(--surface-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ecar-hero-foot small,
.ecar-metric small,
.ecar-verification-copy small,
.ecar-service-meta,
.ecar-book-footer { font-size: 11px; }
.ecar-verification-status { font-size: 10px; }

.ecar-ready-dot.pending { border-color: rgba(178,118,40,.16); background: #c98a35; }
.ecar-metrics {
  gap: 8px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ecar-metric {
  min-height: 72px;
  padding: 12px 10px;
  border-radius: var(--radius-card);
}
.ecar-metric-icon {
  width: 34px;
  height: 34px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 11px;
}
.ecar-section {
  padding: 16px;
  border-radius: var(--radius-card);
}
.ecar-count,
.ecar-status-chip {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--ecar-blue-deep);
  background: var(--ecar-blue-soft);
  font-size: 10px;
  font-weight: 750;
}
.ecar-status-chip.ready { color: #287c54; background: #dff2e8; }
.ecar-status-chip.pending { color: #9b671f; background: #f7ebd7; }
.ecar-progress {
  height: 7px;
  margin: 15px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebf2;
}
.ecar-progress span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ecar-blue), #7598ff);
  box-shadow: 0 3px 9px rgba(49,95,244,.32);
}
.ecar-driver-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 0 0 15px;
  border-bottom: 1px solid rgba(57,80,103,.09);
}
.ecar-progress { background: var(--surface-soft); }
.ecar-progress span { background: var(--accent); box-shadow: none; }
.ecar-driver-row,
.ecar-verification-row,
.ecar-book-footer { border-color: var(--stroke-soft); }
.ecar-icon-action {
  width: 44px;
  height: 44px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: var(--ecar-blue);
  background: var(--ecar-blue-soft);
  cursor: pointer;
}
.ecar-verification-list { margin-top: 4px; }
.ecar-verification-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border-bottom: 1px solid rgba(57,80,103,.075);
}
.ecar-verification-row:last-child { border-bottom: 0; }
.ecar-verification-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ecar-muted);
  background: #edf1f5;
}
.ecar-verification-icon.ready { color: #2f8b5e; background: #dff2e8; }
.ecar-verification-icon.pending { color: #b27628; background: #f7ebd7; }
.ecar-verification-copy { min-width: 0; display: grid; gap: 1px; }
.ecar-verification-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ecar-verification-copy small { overflow: hidden; color: var(--ecar-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.ecar-verification-status { color: var(--ecar-muted); font-size: 9px; font-weight: 700; }
.ecar-verification-status.ready { color: #2f8b5e; }
.ecar-verification-status.pending { color: #b27628; }
.garage-driver-access { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 11px; padding: 12px; border-radius: 15px; }
.garage-driver-access > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.garage-driver-access div { display: grid; gap: 2px; }
.garage-driver-access b { font-size: 11.5px; }
.garage-driver-access small { color: var(--ecar-muted); font-size: 9.5px; line-height: 1.35; }
.garage-driver-access.ready { color: #287c54; background: #e5f5ec; }
.garage-driver-access.ready > span { background: #d1ecdd; }
.garage-driver-access.blocked { color: #94611d; background: #fbf1e1; }
.garage-driver-access.blocked > span { background: #f4e3c9; }
.ecar-service-timeline { margin-top: 14px; }
.ecar-service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 0 0 17px;
}
.ecar-service-row:last-child { padding-bottom: 4px; }
.ecar-service-row:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 13px;
  width: 1px;
  background: rgba(49,95,244,.16);
}
.ecar-service-marker {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  z-index: 1;
  border-radius: 10px;
  color: var(--ecar-blue);
  background: var(--ecar-blue-soft);
}
.ecar-service-copy { min-width: 0; display: grid; gap: 3px; }
.ecar-service-title { color: var(--ecar-ink); font-size: 12.5px; font-weight: 720; }
.ecar-service-meta { color: var(--ecar-muted); font-size: 9.5px; line-height: 1.35; }
.ecar-service-price { color: var(--ecar-ink); font-size: 11px; white-space: nowrap; }
.ecar-book-footer {
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(57,80,103,.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ecar-muted);
  font-size: 9.5px;
}
.ecar-verification-icon { color: var(--text-secondary); background: var(--surface-soft); }
.ecar-verification-icon.ready { color: var(--success); background: var(--success-soft); }
.ecar-verification-icon.pending { color: var(--warning); background: var(--warning-soft); }
.ecar-verification-status.ready { color: var(--success); }
.ecar-verification-status.pending { color: var(--warning); }
.ecar-service-marker { color: var(--accent); background: var(--accent-soft); }
.ecar-service-row:not(:last-child)::after { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.ecar-edit-action { min-height: 52px; border-radius: var(--radius-control); background: var(--accent); box-shadow: none; }
.ecar-hero .vehicle-plate,
.ecar-book-footer .vehicle-plate,
[data-theme="dark"] .ecar-hero .vehicle-plate,
[data-theme="dark"] .ecar-book-footer .vehicle-plate {
  color: #172033;
  background: #f5f7fa;
  border-color: #cfd7e4;
}

[data-theme="dark"] .ecar-hero,
[data-theme="dark"] .ecar-section,
[data-theme="dark"] .ecar-metric {
  color: var(--text-primary);
  background: var(--surface-card);
  border-color: var(--stroke-soft);
}
.garage-wizard-form { gap: 13px; }
.garage-wizard-progress { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: start; gap: 8px; padding: 3px 4px 7px; }
.garage-wizard-progress > span { display: grid; justify-items: center; gap: 4px; color: var(--muted); }
.garage-wizard-progress > span i { width: 29px; height: 29px; display: grid; place-items: center; color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 900; }
.garage-wizard-progress > span small { font-size: 9px; font-weight: 750; }
.garage-wizard-progress > span.done i,
.garage-wizard-progress > span.active i { color: #fff; background: var(--blue); border-color: var(--blue); }
.garage-wizard-progress > b { height: 2px; margin-top: 14px; background: var(--line); border-radius: 99px; }
.garage-wizard-progress > b.done { background: var(--blue); }
.garage-wizard-lead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 14px; background: var(--accent-soft); border-radius: 17px; }
.garage-wizard-lead > span { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 14px; }
.garage-wizard-lead > div { display: grid; gap: 3px; }
.garage-wizard-lead b { font-size: 13px; }
.garage-wizard-lead small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.garage-car-trigger { min-height: 58px; }
.garage-selected-car { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px; color: var(--green); background: var(--green-bg); border-radius: 15px; }
.garage-selected-car > span { display: grid; gap: 1px; color: var(--ink); }
.garage-selected-car small { color: var(--muted); font-size: 8.5px; }
.garage-selected-car b { font-size: 11.5px; }
.garage-selected-car button { padding: 7px 8px; color: var(--blue); background: transparent; border: 0; font-size: 9.5px; font-weight: 800; }
.garage-docs-next-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px; color: var(--blue); background: var(--accent-soft); border-radius: 14px; }
.garage-docs-next-note > span { display: grid; gap: 2px; color: var(--ink); }
.garage-docs-next-note b { font-size: 11px; }
.garage-docs-next-note small { color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.garage-documents-modal { gap: 12px; }
.garage-form-section-head { display: flex; align-items: center; gap: 10px; margin-top: 3px; padding-top: 3px; }
.garage-form-section-head > span { width: 32px; height: 32px; display: grid; place-items: center; flex: none; color: #fff; background: var(--accent); border-radius: 11px; font-size: 12px; font-weight: 900; }
.garage-form-section-head > div { display: grid; gap: 2px; }
.garage-form-section-head b { font-size: 14px; }
.garage-form-section-head small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.garage-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#garage-form .field > span em,
.verification-camera-field b em { margin-left: 4px; color: var(--red); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
#garage-form .field > span small { color: var(--muted); font-size: 9px; font-weight: 600; }
.garage-verification-form { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper-2); }
.garage-verification-intro { display: flex; align-items: flex-start; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--green); }
.garage-verification-intro > span { display: grid; gap: 2px; color: var(--ink); }
.garage-verification-intro b { font-size: 11.5px; }
.garage-verification-intro small { color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.verification-camera-field.ready { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.verification-camera-field.pending { border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); }
.verification-camera-field.rejected { border-color: color-mix(in srgb, var(--red) 48%, var(--line)); background: color-mix(in srgb, var(--red) 7%, var(--surface-soft)); }
.verification-camera-field .verification-reason { margin-top: 3px; color: var(--red); font-weight: 750; }
.verification-camera-field.optional b em { color: var(--muted); }
.garage-gate-modal { text-align: center; }
.garage-gate-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 2px auto 0; color: #9b671f; background: #f7ebd7; border-radius: 22px; }
.garage-gate-modal > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.garage-gate-checklist { display: grid; gap: 6px; text-align: left; }
.garage-gate-checklist > span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; color: var(--muted); background: var(--paper-2); border-radius: 12px; }
.garage-gate-checklist > span b { color: var(--ink); font-size: 11px; }
.garage-gate-checklist > span small { font-size: 9px; }
.garage-gate-checklist > span.ready svg { color: var(--green); }
.garage-gate-checklist > span.pending svg { color: var(--amber); }
[data-theme="dark"] .ecar-hero {
  border-color: rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 88% 12%, rgba(80,119,255,.28), transparent 40%),
    linear-gradient(145deg, #202d43, #172338 58%, #263c66);
}
[data-theme="dark"] .ecar-garage {
  --ecar-ink: #f3f6fb;
  --ecar-muted: #b4c0d2;
  --ecar-blue: #83a2ff;
  --ecar-blue-deep: #b7c7ff;
  --ecar-blue-soft: rgba(103, 139, 255, .18);
}
[data-theme="dark"] .ecar-hero h2,
[data-theme="dark"] .ecar-hero p,
[data-theme="dark"] .ecar-hero-foot,
[data-theme="dark"] .ecar-section h3,
[data-theme="dark"] .ecar-service-title,
[data-theme="dark"] .ecar-service-price,
[data-theme="dark"] .ecar-metric b { color: var(--text-primary); }
[data-theme="dark"] .ecar-hero p,
[data-theme="dark"] .ecar-hero-foot small { color: var(--text-secondary); }
[data-theme="dark"] .ecar-hero-foot { border-color: var(--stroke-soft); background: var(--surface-soft); }
[data-theme="dark"] .ecar-metrics { background: transparent; }
[data-theme="dark"] .ecar-progress { background: var(--surface-soft); }

@media (max-width: 390px) {
  .ecar-hero { min-height: 280px; padding: 16px; border-radius: 18px; }
  .ecar-car-stage { height: 154px; }
  .ecar-section { padding: 14px; border-radius: var(--radius-card); }
  .ecar-metric { min-height: 68px; padding: 10px 8px; }
}
[data-theme="dark"] .ecar-hero .vehicle-plate { color: #f4f7fb; }
[data-theme="dark"] .ecar-hero p,
[data-theme="dark"] .ecar-hero-foot small { color: #b9c5d5; }
[data-theme="dark"] .ecar-hero-foot { border-color: rgba(255,255,255,.12); background: rgba(19,29,46,.56); }
[data-theme="dark"] .ecar-metrics { background: rgba(255,255,255,.05); }
[data-theme="dark"] .ecar-metric,
[data-theme="dark"] .ecar-section,
[data-theme="dark"] .garage-onboarding { background: rgba(29,40,56,.92); }
[data-theme="dark"] .ecar-section h3,
[data-theme="dark"] .ecar-service-title,
[data-theme="dark"] .ecar-service-price,
[data-theme="dark"] .ecar-metric b { color: #edf3fb; }
[data-theme="dark"] .ecar-section { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .garage-onboarding { border-color: rgba(111,147,255,.2); }
[data-theme="dark"] .garage-onboarding-copy h2 { color: #edf3fb; }
[data-theme="dark"] .garage-onboarding-progress { background: rgba(255,255,255,.07); }
[data-theme="dark"] .ecar-progress { background: #2f3c4f; }
[data-theme="dark"] .ecar-verification-icon {
  color: #b4c0d2;
  background: #29394f;
}
[data-theme="dark"] .ecar-driver-row,
[data-theme="dark"] .ecar-verification-row,
[data-theme="dark"] .ecar-book-footer { border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .ecar-hero .vehicle-plate,
[data-theme="dark"] .ecar-book-footer .vehicle-plate {
  color: #f3f6fb;
  background: rgba(21, 31, 47, .86);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
[data-theme="dark"] .garage-driver-access.blocked small { color: #46586f; }
[data-theme="dark"] .garage-driver-access.ready small { color: #3f5e4e; }
[data-theme="dark"] .garage-stepper > span i {
  color: #b4c0d2;
  background: #29394f;
  border-color: rgba(255,255,255,.12);
}
@media (max-width: 390px) {
  .ecar-hero { min-height: 296px; padding: 18px; border-radius: 26px; }
  .ecar-car-stage { height: 164px; }
  .ecar-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecar-metric:last-child { grid-column: 1 / -1; }
  .ecar-metric { padding: 13px 8px; gap: 6px; }
  .ecar-metric-icon { width: 28px; height: 28px; }
  .ecar-section { padding: 17px; border-radius: 23px; }
  .garage-onboarding { padding: 17px; border-radius: 23px; }
  .garage-stepper > span small { font-size: 8px; }
  .garage-form-grid { grid-template-columns: 1fr; }
  .driver-map-hint.locked { grid-template-columns: 42px minmax(0, 1fr); }
  .driver-map-hint.locked .ghost-action { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .ecar-car-stage img { animation: ecar-float 6s ease-in-out infinite; }
}
@keyframes ecar-float {
  0%, 100% { transform: translateY(4px); }
  50% { transform: translateY(-3px); }
}

/* Arrows Pro используется только для навигационной семантики. Маска сохраняет
   единый currentColor в светлой, тёмной и disabled-темах. */
.arrows-pro-icon {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--arrow-icon) center / contain no-repeat;
  mask: var(--arrow-icon) center / contain no-repeat;
}

/* Модельные рендеры сняты в одном тёмном studio-set. Карточка продолжает фон
   кадра, а мягкая маска убирает прямоугольный край изображения. */
.ecar-hero,
[data-theme="dark"] .ecar-hero {
  border-color: rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 84% 14%, rgba(72,104,171,.22), transparent 38%),
    linear-gradient(145deg, #10151d 0%, #090c11 58%, #141c28 100%);
  box-shadow: 0 22px 54px rgba(2,7,15,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
.ecar-hero::after { background: rgba(68,91,132,.1); }
.ecar-hero h2,
.ecar-hero p,
.ecar-hero-foot { color: #f4f7fb; }
.ecar-hero p,
.ecar-hero-foot small { color: #b9c5d5; }
.ecar-hero-foot {
  border-color: rgba(255,255,255,.12);
  background: rgba(19,25,35,.68);
}
.ecar-car-stage img[src*="/vendor/ecar/vehicles/"] {
  -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 54%, #000 58%, rgba(0,0,0,.92) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 88% at 50% 54%, #000 58%, rgba(0,0,0,.92) 72%, transparent 100%);
}

/* 22.08.2026 — меньше «карточек в карточках»: одна основная поверхность
   шторки, внутри неё секции отделяются ритмом и тонкими линиями. */
.soft-card .soft-card,
.sharp-card .soft-card,
.profile-form .camera-field,
.service-question-section .service-attachment-field {
  box-shadow: none;
}

body[data-vector-screen="profile"] .panel-body,
body[data-vector-screen="service"] .panel-body { gap: 18px; }

.profile-form {
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.profile-form-head { padding: 0 0 16px; }
.profile-rating-badge {
  flex: none;
  padding: 7px 10px;
  color: #94620d;
  background: color-mix(in srgb, #f4b942 18%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}
.rating-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--stroke-soft);
}
.rating-summary-cell {
  padding: 0 12px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.rating-summary-cell + .rating-summary-cell {
  padding: 0 0 0 12px;
  border-left: 1px solid var(--stroke-soft);
}
.rating-summary-cell b { color: #ad7415; font-size: 12px; }
.profile-form-grid { gap: 16px; align-items: end; }
.profile-gender-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.profile-gender-field legend,
.profile-age-field > span {
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}
.profile-gender-field legend small,
.profile-age-field > span small { color: var(--text-tertiary); font-size: 9px; font-weight: 650; }
.profile-gender-options {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  min-height: 46px;
  padding: 3px;
  background: var(--surface-soft);
  border-radius: 14px;
}
.profile-gender-options button {
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.profile-gender-options button.active {
  color: var(--text-primary);
  background: var(--surface-card);
  box-shadow: 0 2px 9px rgba(31, 47, 70, .11);
}
.profile-gender-options button:active { transform: scale(.97); }
.profile-age-field { gap: 0; }
.profile-age-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 46px;
  padding-right: 13px;
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: 14px;
}
.profile-age-control:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.profile-age-control input {
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
.profile-age-control > span { color: var(--text-tertiary); font-size: 11px; font-weight: 700; }
.profile-age-field > small { margin-top: 5px; color: var(--text-tertiary); font-size: 9px; font-weight: 600; }
.profile-form > .camera-field {
  min-height: 0;
  padding: 16px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--stroke-soft);
  border-bottom: 1px solid var(--stroke-soft);
  border-radius: 0;
}
.profile-help-card,
body[data-vector-screen="profile"] .research-settings-button {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.service-question-section { display: grid; gap: 5px; }
.service-question-section > form { margin-top: 12px !important; }
.service-question-section .service-attachment-field {
  gap: 10px;
  padding: 15px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--stroke-soft);
  border-bottom: 1px solid var(--stroke-soft);
  border-radius: 0;
}
.service-question-section .service-attachments-empty {
  min-height: 48px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  border: 0;
  border-radius: 12px;
}
.service-response-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 14px 2px;
  border-top: 1px solid var(--stroke-soft);
  border-bottom: 1px solid var(--stroke-soft);
}
.service-response-note > svg { color: var(--accent); }
.service-response-note > span { display: grid; gap: 3px; }
.service-response-note b { font-size: 13px; }
.service-response-note small { color: var(--text-secondary); font-size: 10px; line-height: 1.4; }

@media (max-width: 390px) {
  .profile-form-grid { grid-template-columns: 1fr; }
  .profile-gender-options button { font-size: 10px; }
}


/* === Гараж: интерактивные поля (палитра цвета, ползунки, маска госномера) === */
.garage-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 360px) {
  .garage-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.garage-color-chip {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 9px 4px 7px;
  background: var(--paper-2, #f6f7f9);
  border: 1px solid var(--line, rgba(15, 23, 42, .12));
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.garage-color-chip i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, .18);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.garage-color-chip small {
  font-size: 10px;
  line-height: 1.1;
  color: var(--muted, #66708a);
  text-align: center;
}
.garage-color-chip:active { transform: scale(.96); }
.garage-color-chip.chosen {
  border-color: #2456ff;
  box-shadow: 0 0 0 2px rgba(36, 86, 255, .25);
}
.garage-color-chip.chosen small { color: #2456ff; font-weight: 800; }

.garage-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.garage-range input[type="range"] {
  width: 100%;
  height: 30px;
  accent-color: #2456ff;
  cursor: pointer;
  margin: 0;
}
.garage-range output {
  min-width: 64px;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, inherit);
  white-space: nowrap;
}

.garage-gear-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.garage-gear-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(15, 23, 42, .16));
  background: var(--paper-2, #f6f7f9);
  color: var(--text-primary, inherit);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.garage-gear-chip:active { transform: scale(.95); }
.garage-gear-chip.chosen {
  background: #2456ff;
  border-color: #2456ff;
  color: #fff;
}

.garage-plate-input {
  letter-spacing: .12em;
  font-weight: 800;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}