/* ==========================================================================
   Компоненты интерфейса

   Размеры по вертикали заданы через container-query-единицы (cqh/cqw) от
   экрана устройства, поэтому одинаково корректно ложатся и в макете 390×844,
   и на реальном телефоне любой высоты. Перед каждым clamp() стоит обычное
   значение — запасной вариант для браузеров без container queries.
   ========================================================================== */

.device__screen {
  container-type: size;
  container-name: app;
}

/* --------------------------------------------------------------------------
   Карта
   -------------------------------------------------------------------------- */

.map-holder { position: fixed; left: -9999px; top: -9999px; width: 390px; height: 700px; }

.map-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--black);
}

.mapwrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* Синтетическая «сетка улиц» — видна, если тайлы не догрузились */
.mapwrap__grid {
  position: absolute;
  inset: -20%;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .085) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 132px 132px, 132px 132px, 34px 34px, 34px 34px;
  transform: rotate(-13deg);
  pointer-events: none;
}
.mapwrap.is-light .mapwrap__grid {
  background-image:
    linear-gradient(rgba(10, 10, 11, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 11, .10) 1px, transparent 1px),
    linear-gradient(rgba(10, 10, 11, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 11, .05) 1px, transparent 1px);
}

.mapwrap__canvas { position: absolute; inset: 0; }

.mapwrap__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%);
  opacity: .9;
}
/* На схеме затемнение не нужно — карта должна читаться как у Яндекса */
.mapwrap.is-light .mapwrap__vignette {
  background: radial-gradient(130% 62% at 50% 44%, transparent 55%, rgba(12, 12, 16, .13) 100%);
  opacity: 1;
}
.mapwrap.is-sat .mapwrap__vignette {
  background: radial-gradient(130% 62% at 50% 44%, transparent 52%, rgba(0, 0, 0, .40) 100%);
}

.mapwrap__credit {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 8px;
  max-width: 62%;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .3);
  pointer-events: none;
  text-transform: uppercase;
}
.mapwrap.is-light .mapwrap__credit { color: rgba(10, 10, 11, .34); }
.mapwrap { background: #1C1C1E; }
.mapwrap.is-light { background: #F3F1EC; }
.mapwrap.is-sat { background: #1A1F27; }

/* Масштабная линейка */
.mapwrap__scale {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 24px;
  pointer-events: none;
}
.mapwrap__scale i {
  display: block;
  position: relative;
  height: 6px;
  min-width: 30px;
  border-bottom: 0;
  transition: width var(--t-base) var(--e-out);
}
/* «рожки» линейки */
.mapwrap__scale i::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background:
    linear-gradient(currentColor 0 0) left  bottom / 2px 6px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 2px 6px no-repeat,
    linear-gradient(currentColor 0 0) left  bottom / 100% 2px no-repeat;
}
/* подпись */
.mapwrap__scale i::after {
  content: attr(data-label);
  position: absolute;
  left: 0; bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: currentColor;
}
.mapwrap__scale { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.mapwrap.is-light .mapwrap__scale { color: rgba(22, 22, 26, .78); text-shadow: 0 1px 2px rgba(255, 255, 255, .8); }

/* Leaflet: убираем все родные рамки и хром */
.leaflet-container {
  background: transparent !important;
  font-family: var(--font);
  outline: 0 !important;
}
.leaflet-control-container,
.leaflet-control-attribution,
.leaflet-control-zoom { display: none !important; }
.leaflet-marker-icon, .leaflet-marker-shadow { border: 0 !important; }
.leaflet-pane { z-index: 1; }
.leaflet-overlay-pane { z-index: 2; }
.leaflet-marker-pane { z-index: 3; }

/* Тёмная тема карты — инверсия слоя тайлов (тот же приём, что в DriveOut).
   Класс ставится на сам тайл-слой, поэтому метки и маршруты не затрагиваются. */
.dark-map-tiles {
  filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.3);
}
/* страховка: ничего кроме тайлов не фильтруем */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-popup,
.leaflet-overlay-pane { filter: none !important; }

.mapwrap.is-light .leaflet-tile-pane { filter: saturate(.94) brightness(1.01); }

/* --------------------------------------------------------------------------
   Обвязка карты (зум, слои, пробки, геолокация) — как у Яндекс.Карт
   -------------------------------------------------------------------------- */

.mapctl {
  position: absolute;
  z-index: 12;
  right: 12px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
/* компактный режим и низкие экраны — без блока зума */
.mapctl.is-compact .mapctl__group + .mapctl__group { display: none; }
@container app (max-height: 700px) {
  .mapctl .mapctl__group + .mapctl__group { display: none; }
  .mapctl { gap: 8px; }
}

.mapctl__group {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.mapctl__btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #17171B;
  transition: background var(--t-fast);
}
.mapctl__btn + .mapctl__btn { box-shadow: 0 -1px 0 rgba(10, 10, 11, .07); }
.mapctl__btn:active { background: rgba(10, 10, 11, .07); }
.mapctl__btn svg { width: 19px; height: 19px; }
.mapctl__btn.is-on { background: #17171B; color: #fff; }

.mapctl__badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #E8503A;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.mapctl__layers {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
}
.mapctl__layers button {
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 550;
  color: #17171B;
  text-align: left;
  white-space: nowrap;
}
.mapctl__layers button + button { box-shadow: 0 -1px 0 rgba(10, 10, 11, .07); }
.mapctl__layers button.is-on { background: #17171B; color: #fff; }

/* Ночной режим: обвязка тоже тёмная */
.mapwrap.is-night .mapctl__group,
.mapwrap.is-night .mapctl__layers { background: rgba(26, 26, 30, .94); }
.mapwrap.is-night .mapctl__btn,
.mapwrap.is-night .mapctl__layers button { color: #fff; }
.mapwrap.is-night .mapctl__btn + .mapctl__btn,
.mapwrap.is-night .mapctl__layers button + button { box-shadow: 0 -1px 0 rgba(255, 255, 255, .10); }
.mapwrap.is-night .mapctl__btn:active { background: rgba(255, 255, 255, .12); }
.mapwrap.is-night .mapctl__btn.is-on,
.mapwrap.is-night .mapctl__layers button.is-on { background: #fff; color: #17171B; }
.mapwrap.is-night .leaflet-tile-pane { filter: saturate(.9) contrast(1.05) brightness(1.03); }

.mapwrap .mk-holder { background: none; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Маркеры карты
   -------------------------------------------------------------------------- */

.mk-wrap { background: none !important; }
.mk-anim { transition: transform 120ms linear; }

/* Палитра маркеров переключается вместе с подложкой карты */
.mapwrap            { --mk-chip: #FFFFFF; --mk-glyph: #0A0A0B; --mk-sh: rgba(0, 0, 0, .55); }
.mapwrap.is-light   { --mk-chip: #17171B; --mk-glyph: #FFFFFF; --mk-sh: rgba(10, 10, 16, .30); }

.mk { position: relative; display: grid; place-items: center; }

/* Точка «я» */
.mk-me { width: 22px; height: 22px; }
.mk-me i {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--mk-chip);
  box-shadow: 0 0 0 3.5px rgba(255, 255, 255, .95), 0 2px 10px var(--mk-sh);
  display: block;
}
.mapwrap.is-light .mk-me i { box-shadow: 0 0 0 3.5px #fff, 0 3px 10px rgba(10, 10, 16, .35); }
.mk-me::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  animation: pulse 2.6s var(--e-out) infinite;
}
.mapwrap.is-light .mk-me::after { background: rgba(23, 23, 27, .28); }
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Навигационная стрелка */
.mk-nav { width: 40px; height: 40px; }
.mk-nav i {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--mk-chip);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px var(--mk-sh), 0 0 0 3px rgba(255, 255, 255, .5);
}
.mk-nav svg { width: 17px; height: 17px; color: var(--mk-glyph); }

/* Кольцо назначения */
.mk-dest { width: 34px; height: 34px; }
.mk-dest i {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 4px var(--mk-chip), 0 4px 14px var(--mk-sh);
  display: block;
}

/* Точка-остановка */
.mk-stop { width: 14px; height: 14px; }
.mk-stop i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--mk-chip);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .9), 0 2px 8px var(--mk-sh);
  display: block;
}

/* Флажок точки (как в такси-приложениях) */
.mk-pin { width: 34px; height: 44px; }
.mk-pin i {
  position: absolute;
  left: 50%; top: 0;
  width: 32px; height: 32px;
  margin-left: -16px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--mk-chip);
  box-shadow: 0 6px 16px var(--mk-sh);
  display: grid;
  place-items: center;
}
.mk-pin i svg, .mk-pin i span {
  transform: rotate(45deg);
  width: 15px; height: 15px;
  color: var(--mk-glyph);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.mk-pin::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  width: 12px; height: 5px;
  margin-left: -6px;
  border-radius: 50%;
  background: rgba(10, 10, 16, .28);
  filter: blur(1px);
}

/* Машина попутчика */
.mk-car { width: 34px; height: 34px; }
.mk-car i {
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--mk-chip);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px var(--mk-sh), 0 0 0 2px rgba(255, 255, 255, .55);
  transition: transform 240ms linear;
}
.mapwrap:not(.is-light) .mk-car i { box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
.mk-car svg { width: 18px; height: 18px; color: var(--mk-glyph); }
.mk-car.is-dim i { opacity: .5; box-shadow: none; }

.mk-label {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--mk-chip);
  color: var(--mk-glyph);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--mk-sh);
}

/* Подпись-выноска у точки (в стиле балуна Яндекс.Карт) */
.mk-callout {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  padding: 7px 11px;
  border-radius: 10px;
  background: #fff;
  color: #17171B;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.mk-callout::after {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   Флажок выбора точки на карте (закреплён в центре экрана)
   -------------------------------------------------------------------------- */

.pickpin {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 56px;
  margin: -56px 0 0 -22px;
  pointer-events: none;
}
/* по умолчанию карта тёмная — флажок белый; на светлой схеме инвертируется */
.pickpin__body {
  position: absolute;
  left: 50%; top: 0;
  width: 40px; height: 40px;
  margin-left: -20px;
  border-radius: 50% 50% 50% 5px;
  transform: rotate(-45deg);
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
  display: grid;
  place-items: center;
  transition: transform var(--t-base) var(--e-out);
}
.pickpin__body svg { transform: rotate(45deg); width: 17px; height: 17px; color: #17171B; }
.pickpin__stem {
  position: absolute;
  left: 50%; top: 38px;
  width: 2px; height: 12px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .6);
  transition: height var(--t-base) var(--e-out);
}
.pickpin__shadow {
  position: absolute;
  left: 50%; top: 50px;
  width: 16px; height: 6px;
  margin-left: -8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  filter: blur(1.5px);
  transition: transform var(--t-base) var(--e-out), opacity var(--t-base);
}
:root.map-light .pickpin__body { background: #17171B; box-shadow: 0 10px 22px rgba(10, 10, 16, .38); }
:root.map-light .pickpin__body svg { color: #fff; }
:root.map-light .pickpin__stem { background: rgba(23, 23, 27, .55); }
:root.map-light .pickpin__shadow { background: rgba(10, 10, 16, .3); }
.pickpin.is-moving .pickpin__body { transform: rotate(-45deg) translate(6px, -6px); }
.pickpin.is-moving .pickpin__stem { height: 20px; }
.pickpin.is-moving .pickpin__shadow { transform: scale(.7); opacity: .55; }

/* Радар поиска */
.mk-radar { width: 10px; height: 10px; }
.mk-radar span {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
  animation: radar 3s var(--e-out) infinite;
}
.mk-radar span:nth-child(2) { animation-delay: 1s; }
.mk-radar span:nth-child(3) { animation-delay: 2s; }
@keyframes radar {
  0%   { transform: scale(.4); opacity: .8; }
  100% { transform: scale(9); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.sq {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--on-dark);
  transition: transform var(--t-fast) var(--e-out), background var(--t-fast);
  flex: none;
}
.sq:active { transform: scale(.92); }
.sq svg { width: 18px; height: 18px; }
.sq--light { background: var(--ink); color: #fff; }
.sq--paper { background: var(--paper); color: var(--ink); }
.sq--soft  { background: var(--fill-light-1); color: var(--ink); }

.btn {
  height: 54px;
  height: clamp(48px, 6.4cqh, 56px);
  padding: 0 22px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  background: var(--paper);
  color: var(--ink);
  transition: transform var(--t-fast) var(--e-out), opacity var(--t-fast), background var(--t-fast);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn:active { transform: scale(.975); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--dark  { background: var(--ink); color: #fff; }
.btn--soft  { background: var(--fill-dark-1); color: var(--on-dark); }
.btn--softlight { background: var(--fill-light-1); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--on-dark-2); }
.btn--sm { height: 46px; height: clamp(42px, 5.4cqh, 46px); font-size: 13.5px; padding: 0 14px; gap: 7px; }
.btn[disabled] { opacity: .34; pointer-events: none; }

.btn-row { display: flex; gap: 8px; }
.btn-row .btn { min-width: 0; }

/* --------------------------------------------------------------------------
   Чипы и метки
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--fill-dark-1);
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-out);
  flex: none;
  max-width: 100%;
}
.chip:active { transform: scale(.95); }
.chip svg { width: 14px; height: 14px; opacity: .7; flex: none; }
.chip--light { background: var(--fill-light-1); color: var(--ink); }
.chip--on { background: var(--paper); color: var(--ink); }
.chip--on svg { opacity: 1; }
.chip--onlight { background: var(--ink); color: #fff; }

.chips { display: flex; gap: 8px; overflow-x: auto; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--fill-light-1);
  color: var(--on-light-2);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}
.tag svg { width: 12px; height: 12px; }
.tag--dark { background: var(--fill-dark-1); color: var(--on-dark-2); }

/* Мелкая подпись со значком */
.meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--on-dark-2);
  white-space: nowrap;
}
.meta svg { width: 13px; height: 13px; opacity: .75; flex: none; }
.meta--light { color: var(--on-light-2); }
.metas { display: flex; flex-direction: column; gap: 5px; }

/* --------------------------------------------------------------------------
   Крупные цифры (главный приём референса)
   -------------------------------------------------------------------------- */

.stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--on-light-2);
  letter-spacing: -.005em;
}
.stat__label svg { width: 13px; height: 13px; flex: none; }
.stat__value {
  margin-top: 2px;
  font-size: 40px;
  font-size: clamp(30px, 4.9cqh, 42px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.14;
  color: var(--on-light);
}
.stat__value small { font-size: .45em; font-weight: 600; letter-spacing: -.02em; opacity: .55; margin-left: 3px; }
.stat--dark .stat__label { color: var(--on-dark-2); }
.stat--dark .stat__value { color: var(--on-dark); }
.stat--sm .stat__value { font-size: 27px; font-size: clamp(22px, 3.3cqh, 28px); letter-spacing: -.035em; }

/* --------------------------------------------------------------------------
   Панели и карточки
   -------------------------------------------------------------------------- */

.sheet {
  position: relative;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--panel);
  padding: 18px 16px calc(26px + var(--safe-b));
  box-shadow: var(--sh-dark);
  z-index: 20;
}
.sheet--paper { background: var(--paper); color: var(--ink); box-shadow: 0 -14px 44px rgba(0, 0, 0, .14); }
.sheet--float {
  margin: 0 10px 10px;
  border-radius: var(--r-2xl);
  padding: 16px;
}

.card {
  border-radius: var(--r-lg);
  background: var(--panel-2);
  padding: 15px;
  color: var(--on-dark);
}
.card--paper { background: var(--paper); color: var(--ink); }
.card--soft  { background: var(--fill-light-1); color: var(--ink); }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--fill-dark-1);
  transition: background var(--t-fast), transform var(--t-fast) var(--e-out);
  text-align: left;
  width: 100%;
}
.row:active { transform: scale(.985); }
.row--light { background: var(--fill-light-1); }
.row--flat { background: transparent; padding-left: 0; padding-right: 0; }
.row__ic {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--fill-dark-2);
  flex: none;
}
.row__ic svg { width: 17px; height: 17px; }
.row--light .row__ic { background: var(--fill-light-2); }
.row__body { min-width: 0; flex: 1 1 auto; display: block; }
.row__title { display: block; font-size: 14.5px; font-weight: 550; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--on-dark-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row--light .row__sub { color: var(--on-light-2); }
.row__end { margin-left: auto; font-size: 13px; font-weight: 600; opacity: .8; flex: none; display: flex; align-items: center; }
.row__end svg { width: 15px; height: 15px; opacity: .55; }

.divider { height: 1px; background: var(--fill-dark-1); margin: 12px 0; border-radius: 1px; }
.divider--light { background: var(--fill-light-2); }

/* Заголовки экранов */
.h-title {
  font-size: 28px;
  font-size: clamp(22px, 3.5cqh, 30px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.h-sub {
  margin-top: 6px;
  font-size: 13px;
  font-size: clamp(12px, 1.6cqh, 13.5px);
  line-height: 1.4;
  color: var(--on-dark-2);
  letter-spacing: -.01em;
}
.theme-light .h-sub { color: var(--on-light-2); }

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.theme-light .section-label { color: var(--on-light-3); }

/* --------------------------------------------------------------------------
   Поля ввода
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  height: clamp(48px, 6.4cqh, 56px);
  padding: 0 15px;
  border-radius: var(--r-md);
  background: var(--fill-dark-1);
  transition: background var(--t-fast);
}
.field--light { background: var(--fill-light-1); }
.field.is-focus { background: var(--fill-dark-2); }
.field--light.is-focus { background: var(--fill-light-2); }
.field > span:not(.field__dot) { flex: none; display: grid; place-items: center; }
.field > span:not(.field__dot) svg { width: 18px; height: 18px; }
.field__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; }
.field__dot--ring { background: transparent; box-shadow: inset 0 0 0 2.5px #fff; }
.field--light .field__dot { background: var(--ink); }
.field--light .field__dot--ring { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ink); }
.field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: inherit;
}
.field__hint { font-size: 12px; color: var(--on-dark-2); flex: none; }

.stepper { display: flex; align-items: center; gap: 2px; flex: none; }
.stepper button {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fill-dark-2);
  color: inherit;
  transition: transform var(--t-fast) var(--e-out);
  flex: none;
}
.stepper button:active { transform: scale(.88); }
.stepper button svg { width: 13px; height: 13px; }
.stepper span { min-width: 32px; text-align: center; font-size: 16px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Аватар / рейтинг
   -------------------------------------------------------------------------- */

.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #3A3A3F, #17171A);
  color: #fff;
  font-weight: 600;
  letter-spacing: -.02em;
  flex: none;
  overflow: hidden;
}
.avatar--light { background: linear-gradient(150deg, #E6E6E9, #CFCFD4); color: var(--ink); }
.avatar--40 { width: 40px; height: 40px; font-size: 13.5px; }
.avatar--48 { width: 46px; height: 46px; font-size: 15px; }
.avatar--64 { width: 62px; height: 62px; font-size: 20px; }
.avatar--84 { width: 80px; height: 80px; font-size: 27px; }

.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rating svg { width: 12px; height: 12px; flex: none; }

.stars { display: flex; gap: 8px; }
.stars button { transition: transform var(--t-fast) var(--e-out); flex: none; }
.stars button:active { transform: scale(.86); }
.stars svg { width: 32px; height: 32px; color: var(--on-dark-3); transition: color var(--t-fast); }
.stars button.is-on svg { color: #fff; }

/* --------------------------------------------------------------------------
   Карточка попутчика (горизонтальная лента, как в референсе)
   -------------------------------------------------------------------------- */

.rides {
  display: flex;
  gap: 10px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.ride {
  position: relative;
  flex: none;
  width: 174px;
  height: 174px;
  height: clamp(158px, 21cqh, 176px);
  border-radius: var(--r-xl);
  background: var(--panel);
  color: var(--on-dark);
  padding: 14px 14px 12px;
  overflow: hidden;
  scroll-snap-align: center;
  text-align: left;
  transition: background var(--t-base) var(--e-out), transform var(--t-base) var(--e-out), color var(--t-base);
}
.ride:active { transform: scale(.975); }
.ride.is-on { background: var(--paper); color: var(--ink); }

.ride__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.025em;
  padding-right: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride__sub {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--on-dark-2);
  padding-right: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride.is-on .ride__sub { color: var(--on-light-2); }

.ride__metas { position: absolute; left: 14px; right: 62px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.ride__price { margin-top: 4px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.ride .meta { color: var(--on-dark-2); }
.ride.is-on .meta { color: var(--on-light-2); }

.ride__car {
  position: absolute;
  right: -8px;
  bottom: -40px;
  width: 58px;
  pointer-events: none;
  filter: brightness(1.7) drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
  transform: rotate(-14deg);
  transition: transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out);
}
.ride.is-on .ride__car {
  transform: rotate(-14deg) translateY(-4px) scale(1.06);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .28));
}

.ride__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fill-dark-2);
}
.ride.is-on .ride__badge { background: var(--fill-light-2); }
.ride__badge svg { width: 12px; height: 12px; }

/* Скелетон загрузки */
.ride--skel { background: var(--panel); }
.skel {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* --------------------------------------------------------------------------
   Тосты
   -------------------------------------------------------------------------- */

.toaster {
  position: absolute;
  z-index: 80;
  top: 108px; left: 14px; right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
  backdrop-filter: blur(16px);
  animation: toast-in 420ms var(--e-out) both;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.toast.is-out { animation: toast-out 300ms var(--e-out) both; }
.toast__ic { width: 30px; height: 30px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.toast__ic svg { width: 15px; height: 15px; }
.toast__sub { font-size: 11.5px; color: var(--on-light-2); margin-top: 1px; font-weight: 500; }
.toast .grow > div { overflow: hidden; text-overflow: ellipsis; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.98); } }

/* --------------------------------------------------------------------------
   Утилиты
   -------------------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.gap-4  { gap: 4px; }  .gap-6 { gap: 6px; }  .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.center { display: flex; align-items: center; gap: 10px; min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.mt-auto { margin-top: auto; }
.muted { color: var(--on-dark-2); }
.theme-light .muted { color: var(--on-light-2); }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }

.fade-up { animation: fade-up 520ms var(--e-out) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.d1 { animation-delay: 60ms; } .d2 { animation-delay: 120ms; }
.d3 { animation-delay: 180ms; } .d4 { animation-delay: 240ms; }
.d5 { animation-delay: 300ms; } .d6 { animation-delay: 360ms; }

/* Подсветка нажатия в демо-сценарии */
.is-demo-tap { animation: demo-tap 280ms var(--e-out); }
@keyframes demo-tap {
  0%   { filter: brightness(1); transform: scale(1); }
  40%  { filter: brightness(1.35); transform: scale(.965); }
  100% { filter: brightness(1); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}