/*
  Сайт пассажира UGUR.

  Проход по принципам Apple HIG (сентябрь 2026). Раскладка осталась
  прежней — цветная шапка, белые блоки на сером, крупные кнопки: её
  знают все, и функции на ней не менялись. Поменялось то, как она
  нарисована:

  - Зелёный — только там, где действие или статус. Значки опций,
    госномер, заголовки списков стали нейтральными: цвет, которым
    красят «сюда можно нажать», на неинтерактивном тексте путает
    (HIG, Branding / Color). Громкое место одно — шапка с поиском.
  - Контраст считан, а не на глаз: вспомогательный текст #6C6C70
    (5.2:1 на белом), текст статусов — тёмные оттенки тех же цветов.
  - Группировка одним способом: карточка без рамки на сером фоне.
    Рамка + линия внутри + линия между блоками говорили одно и то же
    три раза.
  - У каждой кнопки есть нажатие и фокус с клавиатуры.
  - САЙТ ДОЛЖЕН БЫТЬ МАКСИМАЛЬНО ЛЁГКИМ (владелец). Ни размытия, ни
    стекла, ни анимаций появления, ни чужих шрифтов с CDN: у пассажира дешёвый
    телефон и мобильный интернет, а размытие пересчитывается на каждом
    кадре прокрутки. Жидкое стекло и эффекты — в приложении, не здесь.

  ЦВЕТ НА СХЕМЕ САЛОНА ОЗНАЧАЕТ ПОЛ И БОЛЬШЕ НИЧЕГО: синий мужчина,
  розовая женщина, серое «места нет», зелёное залитое — «выбрано мной».
  Подсказка места — зелёной РАМКОЙ: пол всегда заливка, никогда не рамка.
  Синий в интерфейсе отдан схеме (seat-male) — кнопки зелёные.
  Исключение — статус «в пути» (как `StatusColors.active` в приложении).

  Фирменный цвет — зелёный #4CAF50 (владелец выбрал вариант 3 из листа
  десяти зелёных; до него были #1E5D42, #24704F, #25D366, #008069, #89BF2B,
  шартрез #DFFF00 и лайм #CCFF00 — у последних двух не понравились
  чёрный текст и чёрный знак).
  Шапка, кнопки и знак залиты им, текст и U-дорога на нём белые.
  Шапка того же цвета и в тёмной теме: на ней знак без плитки (плитка
  того же цвета), и U в шапке — тот же рисунок, что в логотипе.
  Знак и надпись «Ugur» — ugurMark / ugurWordmark в ui.js.
*/

/* Шрифт. На iPhone и Mac — системный San Francisco (-apple-system):
   он уже на устройстве, ноль байт. Сам SF положить на сайт нельзя —
   лицензия Apple разрешает его только на их устройствах. Остальным —
   Inter (OFL, vendor/inter/LICENSE.txt): свободный шрифт по образу SF.

   Лёгкость: файлы свои (не Google Fonts), порезаны по алфавитам,
   браузер качает только тот кусок, буквы которого есть на экране.
   Туркменские Ňň Şş Žž вырезаны из расширенной латиницы отдельно —
   3 КБ вместо 83. До загрузки виден системный шрифт (swap), пустого
   текста не бывает. Одна ось насыщенности на все веса. */
@font-face {
  font-family: "Inter UGUR"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("vendor/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter UGUR"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("vendor/inter/inter-tk.woff2") format("woff2");
  unicode-range: U+0147-0148, U+015E-015F, U+017D-017E;
}
@font-face {
  font-family: "Inter UGUR"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("vendor/inter/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --brand: #4CAF50;
  --mint: #4CAF50;           /* кнопка во всплывашке: цвет знака на тёмной плашке */
  --cream: #F8F2E4;

  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --block: #FFFFFF;
  --text: #000000;
  --hint: #6C6C70;          /* 5.2:1 на белом, 4.7:1 на фоне */
  --hint-2: #8E8E93;        /* только значки и заполнитель поля */
  --line: #E3E3E8;
  --field: #EEEEF0;
  --fill: rgba(118, 118, 128, .12);
  /* #4CAF50 — заливка (кнопки, шапка, знак), текст на нём белый.
     ВНИМАНИЕ: белое на нём — 2.8:1 при норме 4.5:1; выбор владельца
     («чёрный текст не нравится»), принят с этой оговоркой. Текст
     этого цвета на белом тоже бледный (2.8:1), поэтому акцентный текст,
     рамки и фокус на светлом — тёмный оттенок (--primary #3A863D, 4.5:1). */
  --accent: #4CAF50;
  --on-accent: #FFFFFF;
  --primary: #3A863D;
  --tonal-text: #357A38;
  --on-primary: #FFFFFF;
  --header: #4CAF50;
  --on-header: #FFFFFF;
  --on-header-2: rgba(255, 255, 255, .85);
  --on-header-fill: rgba(255, 255, 255, .18);
  --wm: #4CAF50;             /* буквы «gur» на карточке — цвета знака */
  --hover: rgba(76, 175, 80, .18);
  --tonal: rgba(76, 175, 80, .34);
  --shade: rgba(0, 0, 0, .045);
  --focus: rgba(58, 134, 61, .5);

  --green: #31B545;
  --red: #E53935;
  --orange: #EF6C00;
  --waiting: #EF8B2C;
  --active: #3390EC;
  --done: #8E8E93;

  /* Текст на светлой подложке статуса. Тот же цвет, темнее — иначе
     «Подтверждена» зелёным по бледно-зелёному 2.4:1. */
  --ok-text: #1D7A33;
  --wait-text: #B45A00;
  --act-text: #1F6FD1;
  --bad-text: #D32F2F;
  --done-text: #6C6C70;
  --price: #DB5F00;          /* оранжевый ценника, 3.7:1 — цена всегда жирная и крупная */

  --seat-male: #3390EC;
  --seat-female: #E0619A;
  --seat-blocked: #B0B4BA;
  --seat-selected: #31B545;

  --r-btn: 14px;
  --r-card: 16px;
  --r-sheet: 22px;
  --tap: 50px;
  --col: 680px;
  /* Roboto — ДО Inter (владелец, 28.09: «на сайте крупнее, должно быть
     1 в 1»). Приложение на Android рисует системным Roboto, а сайт до этого
     шёл мимо него к Inter: те же пиксели, но Inter шире и выше на ~6 %,
     и карточки выглядели крупнее. На Android Roboto уже в телефоне — ноль
     байт; на iPhone первым встаёт SF, как у приложения; где нет ни того,
     ни другого (Windows) — Inter, как раньше. */
  --font: -apple-system, BlinkMacSystemFont, Roboto, "Inter UGUR", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

/* Тёмная тема — нейтральная, как у системы: чёрный фон, графитовые
   карточки; шапка остаётся цвета знака — это знак, а не поверхность.
   #4CAF50 на графите читается и как текст (6:1), поэтому акцентный
   текст здесь — он сам, а не тёмный оттенок. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1C1C1E;
    --block: #1C1C1E;
    --text: #FFFFFF;
    --hint: #98989F;
    --hint-2: #8E8E93;
    --line: #38383A;
    --field: #2C2C2E;
    --fill: rgba(118, 118, 128, .24);
    --accent: #4CAF50;
    --on-accent: #FFFFFF;
    --primary: #4CAF50;
    --tonal-text: #4CAF50;
    --on-primary: #FFFFFF;
    --header: #4CAF50;
    --on-header: #FFFFFF;
    --on-header-2: rgba(255, 255, 255, .85);
    --on-header-fill: rgba(255, 255, 255, .18);
    --wm: #4CAF50;
    --hover: rgba(76, 175, 80, .08);
    --tonal: rgba(76, 175, 80, .16);
    --shade: rgba(255, 255, 255, .06);
    --focus: rgba(76, 175, 80, .5);
    --ok-text: #4CD964;
    --wait-text: #FF9F43;
    --act-text: #5AA9F5;
    --bad-text: #FF6B61;
    --done-text: #98989F;
    --price: #FF8A3D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1C1C1E;
  --block: #1C1C1E;
  --text: #FFFFFF;
  --hint: #98989F;
  --hint-2: #8E8E93;
  --line: #38383A;
  --field: #2C2C2E;
  --fill: rgba(118, 118, 128, .24);
  --accent: #4CAF50;
  --on-accent: #FFFFFF;
  --primary: #4CAF50;
  --tonal-text: #4CAF50;
  --on-primary: #FFFFFF;
  --header: #4CAF50;
  --on-header: #FFFFFF;
  --on-header-2: rgba(255, 255, 255, .85);
  --on-header-fill: rgba(255, 255, 255, .18);
  --wm: #4CAF50;
  --hover: rgba(76, 175, 80, .08);
  --tonal: rgba(76, 175, 80, .16);
  --shade: rgba(255, 255, 255, .06);
  --focus: rgba(76, 175, 80, .5);
  --ok-text: #4CD964;
  --wait-text: #FF9F43;
  --act-text: #5AA9F5;
  --bad-text: #FF6B61;
  --done-text: #98989F;
  --price: #FF8A3D;
  color-scheme: dark;
}

/* «Увеличить контраст» в системе — серое темнее, линии заметнее. */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) { --hint: #48484D; --line: #C6C6C8; --field: #E3E3E8; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 var(--font);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 19px; line-height: 1.25; }
p { margin: 0; }
.boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.boot svg { width: 72px; height: 72px; }

.muted { color: var(--hint); }
.small { font-size: 14px; }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.center { text-align: center; align-items: center; }
.right { text-align: right; }
.strong { font-weight: 600; }
.orange { color: var(--price); }
.brand { color: var(--primary); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.price { color: var(--price); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.big-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

svg.i { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 20px; height: 20px; }
svg.i.xs { width: 15px; height: 15px; }
svg.i.xl { width: 56px; height: 56px; stroke-width: 1.4; }
svg.i.blue { color: var(--seat-male); }
svg.i.red { color: var(--red); }
svg.i.muted { color: var(--hint-2); }

/* ─── Кнопки ────────────────────────────────────────────── */
/* Нажатие — затемнение, как у системных кнопок: без него кнопка кажется
   неживой (HIG, Buttons › Best practices). Фокус — кольцом только
   с клавиатуры, мышь и палец его не видят. */
button, .btn {
  font: inherit; cursor: pointer; border: 0; border-radius: var(--r-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; font-size: 16px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .12s ease;
}
button:hover, .btn:hover { filter: brightness(1.05); }
button:active, .btn:active { opacity: .7; filter: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: default; filter: none; }
/* Главная кнопка, которой пока нельзя: серая, а не бледно-зелёная —
   бледный зелёный читается как «нажмите посильнее». */
button.big:disabled:not(.ghost):not(.danger):not(.tonal) { opacity: 1; background: var(--fill); color: var(--hint); }
button.big, .btn.big { min-height: var(--tap); width: 100%; font-size: 17px; }
button.ghost, .btn.ghost { background: var(--fill); color: var(--primary); }
button.tonal, .btn.tonal { background: var(--tonal); color: var(--tonal-text); }
button.text { background: transparent; color: var(--primary); padding: 0 10px; min-height: 44px; font-weight: 600; }
button.danger { background: var(--red); color: #fff; }
/* Второстепенные «опасные» кнопки («Выйти», «Отменить», крестик) —
   красный ТЕКСТ на своей подложке, а не красная заливка. Правило выше
   иначе перебивало заливку ghost и давало красное на красном: плашку
   без видимой надписи. */
button.text.danger, button.icon.danger { background: transparent; color: var(--red); }
button.ghost.danger { background: var(--fill); color: var(--red); }
button.icon { background: transparent; color: inherit; padding: 0; width: 44px; min-height: 44px; border-radius: 50%; }
button.icon:hover { background: var(--hover); filter: none; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .8s linear infinite; }
.spin.big { width: 30px; height: 30px; color: var(--hint-2); border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Поля ──────────────────────────────────────────────── */
/* Поле — серая заливка без рамки, рамка основным цветом в фокусе:
   так же, как поля в приложении. Рамка — тенью, чтобы фокус
   не сдвигал текст на полтора пикселя. */
input, select, textarea {
  font: inherit; font-size: 17px; color: var(--text);
  background: var(--field); border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px transparent;
  padding: 10px 14px; width: 100%; min-height: 48px;
  transition: box-shadow .15s ease, background-color .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--hint-2); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); background: var(--surface); }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--primary); box-shadow: none; }
input[type="checkbox"]:focus { box-shadow: none; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--hint); }
.err-text { color: var(--bad-text); font-size: 15px; }

.phone-field { display: flex; align-items: center; border-radius: 12px; background: var(--field); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s ease; }
.phone-field:focus-within { box-shadow: inset 0 0 0 2px var(--primary); background: var(--surface); }
.phone-field .prefix { padding: 0 4px 0 14px; font-size: 20px; color: var(--hint); }
.phone-field input { font-size: 20px; letter-spacing: 1px; background: transparent; box-shadow: none; }
.phone-field input:focus { box-shadow: none; background: transparent; }
.code-input { font-size: 28px; font-weight: 700; letter-spacing: 12px; text-align: center; font-variant-numeric: tabular-nums; }

.search-field { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--field); color: var(--hint-2); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s ease; }
.search-field:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }
.search-field input { padding: 8px 0; background: transparent; min-height: 44px; box-shadow: none; }
.search-field input:focus { box-shadow: none; background: transparent; }

.switch { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.switch small { display: block; color: var(--hint); font-size: 15px; }

/* ─── Шапка ─────────────────────────────────────────────── */
/* Шапка — числа из theme.dart / app_shell.dart: высота 48, заголовок
   20 px полужирный, знак 38 px, разделитель 1×28 белым на 40%. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: 50px; display: flex; align-items: center; gap: 4px;
  padding: 0 12px 0 4px; padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: var(--header); color: var(--on-header);
}
.topbar button.icon svg.i { width: 28px; height: 28px; }
/* На главной «Ugur» — по центру шапки, профиль — справа (макет владельца). */
.topbar .brand {
  position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top) / 2); transform: translate(-50%, -50%);
  display: flex; align-items: center; color: var(--on-header);
}
.topbar .brand svg { flex: none; display: block; }
.topbar button[data-action] { margin-left: auto; }
/* Профиль на главной — в кружке (макет владельца): светлая подложка
   и тонкое кольцо; нажимается вся кнопка 44 px. */
body.at-root .topbar button[data-action] {
  position: relative; width: 36px; min-height: 36px; height: 36px; margin-right: 4px;
  background: var(--on-header-fill); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}
/* Кружок 36 px, а нажимается 44: невидимое поле вокруг. */
body.at-root .topbar button[data-action]::after { content: ""; position: absolute; inset: -4px; }
body.at-root .topbar button[data-action] svg.i { width: 20px; height: 20px; }
.topbar .title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar button.icon { color: var(--on-header); }
.topbar button.icon:hover { background: var(--on-header-fill); }
.topbar :focus-visible { outline-color: var(--on-header-2); }

.main { max-width: var(--col); margin: 0 auto; padding-bottom: 104px; min-height: calc(100vh - 52px); }
.page { padding: 16px; }

/* ─── Меню ──────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.36); z-index: 50; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(320px, 86vw);
  background: var(--bg); transform: translateX(-102%); transition: transform .28s var(--ease);
  overflow-y: auto; padding-bottom: env(safe-area-inset-bottom);
}
.drawer.open { transform: none; }
/* Шапка меню — `_DrawerHeader`: одна строка, имя и номер слева, фото
   справа, тап — профиль. */
.drawer-head {
  display: flex; align-items: center; gap: 14px;
  background: var(--header); color: var(--on-header);
  padding: 16px 20px 20px; padding-top: calc(16px + env(safe-area-inset-top));
}
a.drawer-head:hover { text-decoration: none; filter: brightness(1.06); }
.drawer-name { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--on-header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-sub { display: block; font-size: 15px; color: var(--on-header-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.drawer-avatar { width: 52px; height: 52px; background: var(--on-header-fill); color: var(--on-header); }
.drawer-avatar svg.i { width: 30px; height: 30px; }
/* Пункты — сгруппированный список: белый блок на сером, линии
   с отступом под текст, а не от края. */
.drawer-list { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.drawer-group { background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
.drawer-item {
  position: relative;
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; min-height: 50px;
  color: var(--text); background: transparent; border-radius: 0; font-weight: 500; font-size: 16px; text-align: left;
}
.drawer-item + .drawer-item::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; border-top: .5px solid var(--line); }
.drawer-item > svg { color: var(--hint-2); }
.drawer-item small { display: block; color: var(--hint); font-size: 14px; font-weight: 400; line-height: 1.3; }
a.drawer-item:hover, button.drawer-item:hover { background: var(--hover); filter: none; }
a.drawer-item:active, button.drawer-item:active { opacity: 1; background: var(--fill); }
.drawer-item.static { cursor: default; }

/* Переключатель — сегментированный: серая дорожка, выбранное — белая
   плашка. Система так рисует «одно из нескольких» везде. */
.choice { display: inline-flex; gap: 2px; padding: 2px; border-radius: 11px; background: var(--fill); }
.choice button { min-height: 40px; min-width: 48px; padding: 0 12px; background: transparent; color: var(--hint); border: 0; border-radius: 9px; font-size: 15px; font-weight: 500; line-height: 19px; }
.choice button:has(svg) { padding: 0 10px; }
.choice button svg.i { width: 20px; height: 20px; }
.choice button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
:root[data-theme="dark"] .choice button.on { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .choice button.on { background: #636366; } }
.choice button:hover { filter: none; }

/* Плитку рисует сам знак (`ugurMark(…, { tile: true })`), здесь — только место под неё. */
.logo-tile { width: 64px; height: 64px; display: inline-flex; flex: none; }
.logo-tile svg { display: block; width: 100%; height: 100%; }
.logo-tile.sm { width: 44px; height: 44px; }
.wordmark { display: flex; justify-content: center; padding: 4px 0 6px; }
.wordmark svg { display: block; max-width: 100%; height: auto; }
.app-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-card); background: var(--surface); color: var(--text); }
.app-banner b { display: block; font-size: 16px; font-weight: 600; }
.app-banner small { display: block; color: var(--hint); font-size: 14px; line-height: 1.3; }
.small-btn { min-height: 44px; width: 44px; padding: 0; border-radius: 50%; flex: none; }

/* ─── Состояния ─────────────────────────────────────────── */
.loading { display: flex; justify-content: center; padding: 56px 16px; }
.notice { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 56px 28px 32px; color: var(--hint); }
.notice > svg { color: var(--hint-2); opacity: .6; }
.notice-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); max-width: 420px; }
.notice-sub { font-size: 15px; max-width: 420px; }
.notice .btn, .notice button { width: auto; min-width: 220px; }
.empty { text-align: center; padding: 32px 16px; color: var(--hint); }

/* ─── Всплывашки ────────────────────────────────────────── */
/* Плавающий слой — материал с размытием; содержимое страницы — никогда. */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100vw - 24px)); }
.toast { display: flex; align-items: center; gap: 8px; background: rgba(28,28,30,.9); color: #fff; padding: 12px 16px; border-radius: 16px; font-size: 15px; }
.toast.err { background: var(--red); }
.toast button.text { color: var(--mint); min-height: 36px; }
.toast.err button.text { color: #fff; text-decoration: underline; }

/* ─── Листы ─────────────────────────────────────────────── */
dialog {
  border: 0; padding: 0; border-radius: var(--r-sheet); background: var(--surface); color: var(--text);
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
}
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog .dlg { padding: 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
dialog h2 { font-size: 20px; }
dialog.tall .dlg { height: min(640px, calc(100dvh - 32px)); }
.sheet-head { display: flex; align-items: center; gap: 8px; margin-right: -10px; }
/* Крестик — серый кружок, как у системных листов; нажимается всей
   клеткой 44 px, кружок — только его вид. */
.sheet-head button.icon svg.i, .viewer-close svg.i { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--fill); color: var(--hint); stroke-width: 2.4; }
.sheet-head button.icon:hover { background: transparent; }
@media (max-width: 640px) {
  dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: 92vh; max-height: 92dvh; }
  dialog .dlg { max-height: 92vh; max-height: 92dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  dialog.tall .dlg { height: 88vh; height: 88dvh; }
}
dialog.fullscreen { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
dialog.fullscreen .dlg { padding: 0; height: 100%; max-height: none; gap: 0; }
dialog.dark { background: #000; color: #fff; }


.list { display: flex; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; margin: 0 -6px; }
/* Заголовок группы — серым мелким капсом, как у системных списков:
   зелёный на тексте, который не нажимается, обещал бы нажатие. */
.list-title { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--hint); padding: 16px 12px 6px; }
.list-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 12px; min-height: 46px; background: transparent; color: var(--text); border-radius: 12px; font-weight: 400; text-align: left; }
.list-row > svg { color: var(--hint-2); }
.list-row > svg:last-child:not(:first-child) { color: var(--primary); }
.list-row:hover { background: var(--hover); filter: none; }
.list-row:active { opacity: 1; background: var(--fill); }
.list-row.big { min-height: 50px; font-size: 17px; }

.seg { display: flex; gap: 2px; padding: 2px; border-radius: 12px; background: var(--fill); }
.seg button { flex: 1; min-height: 44px; background: transparent; color: var(--text); border: 0; border-radius: 10px; font-weight: 500; padding: 0 8px; }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
:root[data-theme="dark"] .seg button.on { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on { background: #636366; } }
.seg button:hover { filter: none; }

/* ─── Поиск ─────────────────────────────────────────────── */
/* Шапка с формой — единственное громкое место сайта. Всё остальное
   на экране тихое, чтобы громкость не тратилась дважды. */
/* Под шапкой — пожелание доброй дороги на фоне пейзажа: дорога с белой
   пунктирной разметкой уходит через холмы к горам — тот же образ, что
   в знаке U. Иллюстрация сгенерирована (OpenRouter, владелец), сжата
   в WebP 800 px — 17 КБ, грузится только на главной. Переходы в цвет
   шапки сверху и снизу запечены в саму картинку (#4CAF50): белый
   заголовок читается, а край уходит под форму без шва. Сменится
   фирменный цвет — картинку пересобрать (tools/icon/hero-webp.mjs). */
.hero {
  padding: 4px 12px 14px;
  background: url("img/hero.webp") center top / 100% auto no-repeat, var(--header);
}
@media (min-width: 600px) {
  /* На широком экране картинка выше — сдвигаем, чтобы горы и дорога
     оставались между заголовком и формой. */
  .hero { background-position: center -110px; }
}.hero-hello {
  margin: 0; padding: 20px 6px 110px; text-align: center;
  color: var(--on-header); font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .12);
}
.panel { background: var(--surface); border-radius: 20px; overflow: hidden; color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.panel.summary { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 48px; font-size: 16px; font-weight: 600; text-align: left; background: var(--surface); color: var(--text); border-radius: var(--r-card); }
.panel.summary > svg { color: var(--hint-2); }
.panel.summary:active { opacity: 1; background: var(--field); }
/* Строки формы — сгруппированным списком: линии тонкие и начинаются
   от текста, а не от края; кнопки полей нажимаются всей строкой. */
/* «Откуда» и «Куда» — друг под другом на всю ширину, «поменять» справа
   между ними. В одну строку каждому полю доставалось ~105 px, и
   «Türkmenabat» обрезался. Порядок в разметке прежний (откуда, кнопка,
   куда) — раскладывает сетка. */
/* «Ýolagçy / Poçta» — сегмент, как в iOS: серая дорожка, выбранное —
   белая плашка поверх. Два равноправных ответа на «что ищем», поэтому
   не тумблер и не отметка. Высота 44 — минимальная цель по HIG. */
.segmented { display: flex; gap: 0; margin: 12px 12px 4px; padding: 3px; height: 44px; border-radius: 12px; background: var(--fill); }
.segmented button { flex: 1 1 0; min-width: 0; min-height: 0; height: 100%; gap: 6px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--hint); font-size: 15px; font-weight: 500; }
.segmented button.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.segmented button.on > svg { color: var(--primary); }
/* Кармашек «Poçta» — продолжение той же дорожки ровно под третьей
   вкладкой, «Hödür et» (владелец, 28.09), как `_ModeSwitch` в приложении.
   Ширина — сегмент плюс поля дорожки, чтобы край совпал с её краем. */
.segmented.with-pocket { margin-bottom: 0; border-bottom-right-radius: 0; }
.seg-pocket { display: flex; justify-content: flex-end; margin: 0 12px 4px; }
.seg-pocket button { width: calc((100% - 6px) / 3 + 6px); min-height: 34px; padding: 0 8px 3px; gap: 6px; border: 0; border-radius: 0 0 12px 12px; background: var(--fill); color: var(--hint); font-size: 14px; font-weight: 500; }
.seg-pocket button.on { color: var(--text); font-weight: 700; }
.seg-pocket button:hover { filter: none; }
.cbox { width: 17px; height: 17px; border-radius: 4px; border: 2px solid var(--hint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.seg-pocket button.on .cbox { background: var(--primary); border-color: var(--primary); color: #fff; }
.cbox svg.i.xs { width: 13px; height: 13px; stroke-width: 3; }
.route { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 60px; }
.route [data-f=from] { grid-row: 1; grid-column: 1; }
.route [data-f=to] { grid-row: 2; grid-column: 1; }
.route [data-f=from]::after { content: ""; position: absolute; left: 46px; right: -60px; bottom: 0; border-bottom: .5px solid var(--line); }
.route [data-f=from] { position: relative; }
.route .cfield b { white-space: normal; overflow-wrap: anywhere; }
.route .swap { grid-row: 1 / span 2; grid-column: 2; align-self: center; justify-self: center; color: var(--primary); background: var(--fill); width: 44px; min-height: 44px; }
.route .swap svg.i { transform: rotate(90deg); }
.route .swap:hover { background: var(--tonal); }
.prow { position: relative; display: flex; }
.route::after, .prow::after { content: ""; position: absolute; left: 46px; right: 0; bottom: 0; border-bottom: .5px solid var(--line); }
.prow .cfield { flex: 1; }
.prow .cfield + .cfield { border-left: .5px solid var(--line); }
.cfield { display: flex; align-items: center; gap: 10px; padding: 6px 14px; min-height: 48px; min-width: 0; background: transparent; color: var(--text); border-radius: 0; text-align: left; font-weight: 400; }
.cfield > svg { color: var(--hint-2); }
.cfield:hover { background: var(--hover); filter: none; }
.cfield:active { opacity: 1; background: var(--fill); }
.cfield small { display: block; font-size: 12px; color: var(--hint); line-height: 1.2; }
.cfield b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.cfield.big { padding: 8px 14px; }
.cfield.big b { font-size: 17px; }
.filters { display: flex; gap: 8px; padding: 12px 14px 4px; }
/* Фильтр — капсула-переключатель. Включённый отличается не только
   цветом: заливкой и жирностью (HIG, Color › Inclusive color). */
.fchip { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 10px; gap: 5px; white-space: nowrap; background: var(--fill); color: var(--text); border: 0; border-radius: 999px; font-size: 14px; font-weight: 500; }
.fchip > svg { color: var(--hint); }
.fchip.on { background: var(--tonal); color: var(--tonal-text); box-shadow: inset 0 0 0 1.5px var(--primary); font-weight: 600; }
.fchip.on > svg { color: var(--primary); }
.fchip:hover { filter: none; }
.go-row { display: flex; gap: 8px; padding: 10px 14px 14px; }
.reset { width: var(--tap); min-height: var(--tap); padding: 0; background: rgba(229,57,53,.1); color: var(--red); flex: none; }

.results-head { display: flex; align-items: baseline; gap: 8px; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--hint); }
.results-head b { font-weight: 600; }
.cards { display: flex; flex-direction: column; gap: 12px; padding: 6px 12px 12px; }
/* ─── Карточка рейса — РОВНО ПО СНИМКУ ВЛАДЕЛЬЦА (26.09) ────────────
   Размеры сняты со снимка (карточка 1456×770): фото — 35 % ширины и 4:3,
   слева от него три строки его высоты — куда, когда, места и цена; ниже
   водитель, а под фото — машина; внизу две маленькие коробочки опций.
   Всё в `--u` = 1/316 ширины содержимого карточки (316 — телефон 360 px):
   на любом телефоне те же пропорции, что на снимке. На широком экране
   `--u` не больше 1.5 px — иначе на компьютере буквы в два раза крупнее.
   Каждая строка — одной строкой и целиком: не влезла — ужимается вся
   (`fitLines`), без многоточий и переносов.
   Цвета наши (владелец): зелёный — места и метки, серый — «Dolanda»
   и значки, цена — в оранжевой коробочке. Синего нет: он у мужчины
   на схеме салона. */
/* Межстрочный 1.2 — как `_t` карточки в приложении (`height: 1.2`); с общим
   1.45 строки выходили выше, и карточка — длиннее, чем в приложении. */
.tcard { --u: min(calc(100cqw / 316), 1.5px); container-type: inline-size; display: block; background: var(--block); border-radius: var(--r-card); padding: 10px; color: var(--text); line-height: 1.2; }
.tcard:hover { box-shadow: 0 0 0 1.5px var(--tonal); }
.tcard:active { opacity: .7; }
.tcard svg.i { width: 1.15em; height: 1.15em; flex: none; }

.fit { min-width: 0; overflow: hidden; }
.fit > * { display: inline-flex; align-items: center; white-space: nowrap; max-width: none; }

.tc-top { display: flex; gap: calc(10 * var(--u)); align-items: stretch; }
.tc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: calc(5 * var(--u)); }
.tcard:not(.nophoto) .tc-main { min-height: calc(78 * var(--u)); }
/* 33 %, а не 35 % снимка: строке мест и цены нужна ширина под крупную цену. */
.tc-top > .thumb { width: calc(104 * var(--u)); height: calc(78 * var(--u)); border-radius: calc(10 * var(--u)); flex: none; }

.tc-route { font-size: calc(16 * var(--u)); font-weight: 800; line-height: 1.2; }
/* Без меток у городов (владелец, 26.09): направление читается по стрелке.
   Стрелка — значком 15, по 5 с боков, как `Icons.arrow_forward` в приложении. */
.tc-arr { display: inline-flex; color: var(--hint); margin: 0 calc(5 * var(--u)); }
.tcard .tc-arr svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 2.2; }
.tc-route .status { margin-left: calc(4 * var(--u)); font-size: calc(11 * var(--u)); }

.tc-when { font-size: calc(12.5 * var(--u)); }
.tc-w { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); color: var(--text); }
.tc-w > svg { color: var(--hint); }
.tc-w.strong { font-size: calc(14 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; }
.tcard .tc-w > svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.tcard .tc-w.strong > svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.tcard .tc-fill > svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.tc-fill { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: var(--fill); color: var(--text); font-size: calc(11.5 * var(--u)); font-weight: 600; }
.tc-fill > svg { color: var(--hint); }
.tc-sep { display: inline-block; flex: none; width: 1px; height: calc(18 * var(--u)); background: var(--line); margin: 0 calc(7 * var(--u)); }

.tc-deal { gap: calc(6 * var(--u)); }
.tc-deal .sbadge, .tc-deal .pobadge { font-size: calc(12 * var(--u)); padding: calc(3.5 * var(--u)) calc(8 * var(--u)); }
.tc-deal .tc-sep { margin: 0 calc(2 * var(--u)); }
/* Цена — в оранжевой коробочке (владелец): оранжевый у нас — цвет цены. */
.tc-pricebox { display: inline-flex; align-items: baseline; gap: calc(3 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(9 * var(--u)); background: rgba(219, 95, 0, .12); color: var(--price); font-variant-numeric: tabular-nums; }
/* Цена крупнее всего в строке (владелец, 26.09): по ней выбирают. */
.tc-pricebox b { font-size: calc(20 * var(--u)); font-weight: 800; }
.tc-pricebox small { font-size: calc(12 * var(--u)); font-weight: 700; }
.tc-pricebox.muted { background: var(--fill); color: var(--hint); }
.tc-pricebox.muted b { font-size: calc(13 * var(--u)); font-weight: 600; }

/* Водитель слева, машина — ровно под фото: её колонка той же ширины,
   черта перед ней стоит в зазоре между текстом и фото. */
.tc-who { display: flex; align-items: center; margin-top: calc(9 * var(--u)); }
.tc-drv { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(8 * var(--u)); }
/* Без фото — буква на зелёном, как `CircleAvatar` приложения (primary и белый). */
.tcard .avatar.tc { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; background: var(--primary); color: #fff; }
.tc-vsep { flex: none; width: 1px; height: calc(30 * var(--u)); background: var(--line); margin: 0 calc(4.5 * var(--u)); }
.tc-car { flex: none; width: calc(104 * var(--u)); min-width: 0; display: flex; align-items: center; gap: calc(5 * var(--u)); }
.tcard.nophoto .tc-car { width: auto; flex: 0 1 45%; }
.tc-car > svg { color: var(--hint); width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.tc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tc-txt b { font-size: calc(12 * var(--u)); font-weight: 700; }
.tc-txt small { font-size: calc(10.5 * var(--u)); color: var(--hint); }
.tc-txt .verified { display: inline-flex; color: var(--primary); margin-left: calc(3 * var(--u)); }
.tcard .tc-txt .verified svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
/* Звёзды — `Colors.amber` приложения, вплотную друг к другу. */
.tc-stars { display: inline-flex; align-items: center; gap: 0; color: #FFC107; }
.tcard .tc-stars svg { width: calc(10.5 * var(--u)); height: calc(10.5 * var(--u)); }
.tc-stars b { color: var(--text); font-size: calc(11.5 * var(--u)); font-weight: 600; margin-left: calc(3 * var(--u)); }
.tc-tag { font-size: calc(11.5 * var(--u)); color: var(--primary); font-weight: 600; white-space: nowrap; overflow: hidden; }

/* Опции — две маленькие коробочки одной строкой, вместе с ценой. */
/* Нижняя строка: места слева, цена в правом нижнем углу (владелец, 26.09). */
.tc-bottom { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); margin-top: calc(9 * var(--u)); }
.tc-bottom > .fit { flex: 1; }
.tc-bottom .sbadge, .tc-bottom .pobadge { font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); }
/* Остаток мест — как `SeatsBadge` приложения: скругление 9, а не таблетка,
   бледная подложка primary 12 %; последнее место — deepOrange. */
.tc-bottom .sbadge { padding: calc(5.6 * var(--u)) calc(9.3 * var(--u)); border-radius: calc(9.3 * var(--u)); background: rgba(58, 134, 61, .12); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.tc-bottom .sbadge.urgent { background: rgba(255, 87, 34, .12); color: #FF5722; }
.tc-bottom > .tc-pricebox { flex: none; }
/* Две коробочки ОДНОЙ ширины — по самой длинной (владелец: «равными по
   размеру»), не уже 96. Как `TripPerksRow` в приложении: `IntrinsicWidth`
   и две `Expanded`. Не влезли рядом с фото — строка ужимается целиком. */
/* `max-content` обязателен: без него сетка сжимается до ширины строки,
   колонки режут содержимое (значок первой коробочки уезжал за край), и
   `fitLines` не видит переполнения — ужимать строку ему незачем. */
.fit > .perks { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(6 * var(--u)); width: max-content; }
.perk { min-width: calc(96 * var(--u)); justify-content: center; }
.perk { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(3.5 * var(--u)) calc(6 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--fill); font-size: calc(11 * var(--u)); }
.perk > svg { color: var(--text); }
.tcard .perk > svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.perk b { font-weight: 600; }
.perk small { font-size: calc(11 * var(--u)); color: var(--hint); font-weight: 600; margin-left: calc(1 * var(--u)); }

.tc-price { font-size: 19px; font-weight: 700; color: var(--price); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-price.muted { color: var(--hint); font-size: 15px; }

.thumb { width: 104px; height: 78px; border-radius: 12px; overflow: hidden; background: var(--shade); flex: none; position: relative; display: flex; align-items: center; justify-content: center; color: var(--hint-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb small { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 0 6px; border-radius: 8px; }

/* Госномер — табличкой: белая, чёрный текст, тонкая рамка. Машину
   у подъезда находят по фото и номеру — пусть номер и выглядит номером. */
.plate { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 1; padding: 4px 7px; border-radius: 6px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plate.big { font-size: 17px; padding: 5px 9px; margin-top: 6px; }

.sbadge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; background: var(--tonal); color: var(--tonal-text); }
.sbadge.urgent { background: rgba(239,108,0,.12); color: var(--wait-text); }
/* «Только почта» — серая: свойство рейса, а не предупреждение. */
.pobadge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap; background: var(--fill); color: var(--hint); }
.parcel-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.parcel-price b { font-size: 20px; }

.fabs { position: fixed; right: max(16px, calc(50vw - var(--col) / 2 + 16px)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
/* Оранжевый кружок непросмотренных предложений — как счётчик на иконке. */
.fab { position: relative; }
.fab-badge { position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--orange); color: #fff; font-style: normal; font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; }
/* Форма заявки — СЖАТА (владелец, 28.09): каждое поле одной строкой,
   как `_requestFormRows` в приложении. */
.req-fields { display: flex; flex-direction: column; gap: 8px; margin: 8px 14px 0; }
.rq-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rq-line-label { font-size: 14px; font-weight: 700; flex: none; }
.req-fields .gpicks { gap: 6px; }
.req-fields .gpick { min-height: 40px; font-size: 15px; gap: 6px; padding: 0 8px; }
.mini-counters > span { gap: 10px; justify-content: flex-end; }
.req-fields .counter { gap: 2px; }
.req-fields .counter > svg:first-child { width: 24px; height: 24px; }
.req-fields .counter button.icon { width: 36px; min-height: 36px; }
.req-fields .counter b { width: 22px; font-size: 16px; }
.rq-line .price-own { flex: none; gap: 6px; padding: 0 10px; min-height: 40px; border-radius: 12px; background: var(--fill); color: var(--hint); }
.rq-line .price-own input { width: 96px; min-height: 38px; padding: 0; border: 0; background: transparent; font-size: 16px; }
.rq-chips { display: flex; gap: 6px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.rq-chips .fchip { flex: none; min-height: 36px; padding: 0 12px; }
.filters.tight { padding: 0; }
.rq-comment { display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: 42px; border-radius: 12px; background: var(--fill); color: var(--hint); }
.rq-comment input { flex: 1; min-width: 0; min-height: 40px; padding: 0; border: 0; background: transparent; font-size: 15px; }
.rq-privacy { display: flex; gap: 6px; align-items: flex-start; padding: 0 16px 12px; margin-top: -4px; font-size: 12.5px; line-height: 1.35; color: var(--hint); }
.rq-privacy svg.i.xs { width: 14px; height: 14px; margin-top: 1px; }
/* Рейсы под заявкой внутри `.page` — от края экрана на 12, как карточка
   рейса в приложении, а не на 16 + 12. */
.page > .cards { margin: 0 -16px; }
.rq-none-trips { padding: 12px 4px 4px; }
/* Уведомления (`pages/notifications.js`): новые — жирным и с зелёным значком. */
.notif { align-items: flex-start; color: var(--text); }
.notif > svg { color: var(--hint); margin-top: 2px; }
.notif.unread > svg { color: var(--primary); }
.notif .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif b { font-weight: 500; }
.notif.unread b { font-weight: 800; }
.notif small { font-size: 14px; color: var(--hint); line-height: 1.35; }
/* «Saýlanan sürüjiler» — узкая карточка водителя (29.09), как FavoriteDriverCard. */
.fav-list { display: flex; flex-direction: column; gap: 8px; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.check-row svg { color: #E53935; flex: none; }
.fav-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font-size: 16px; font-weight: 600; }
.fav-btn.on svg { color: #E53935; }
.fav-card { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--surface); border-radius: 14px; color: var(--text); }
.fav-card > svg { color: var(--hint); flex: none; }
.fav-pic { position: relative; flex: none; width: 120px; height: 90px; }
.fav-car { display: block; width: 112px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--shade); }
.fav-car img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-face { position: absolute; right: 0; bottom: 0; padding: 2px; border-radius: 50%; background: var(--surface); display: flex; }
.avatar.fav-av { width: 38px; height: 38px; font-size: 15px; }
.fav-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fav-text b { font-size: 17px; font-weight: 700; }
.fav-text small { font-size: 14px; }
.fav-stars { display: inline-flex; align-items: center; gap: 1px; color: #F5A623; }
.fav-stars svg.i.xs { width: 17px; height: 17px; }
.fav-stars b { margin-left: 6px; font-size: 14px; color: var(--text); }
.fab { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12); }
.fab.small { width: 52px; min-height: 52px; padding: 0; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--primary); }

.req-route { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.privacy { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--fill); font-size: 15px; line-height: 1.4; }
.privacy > svg { color: var(--hint); }

.gpicks { display: flex; gap: 10px; }
.gpick { flex: 1; min-height: var(--tap); background: transparent; border: 1.5px solid; font-size: 16px; font-weight: 600; }
.gpick.male { color: var(--seat-male); border-color: rgba(51,144,236,.5); }
.gpick.female { color: var(--seat-female); border-color: rgba(224,97,154,.5); }
.gpick.male.on { background: var(--seat-male); color: #fff; border-color: var(--seat-male); }
.gpick.female.on { background: var(--seat-female); color: #fff; border-color: var(--seat-female); }
.counter { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.counter.male > svg:first-child { color: var(--seat-male); }
.counter.female > svg:first-child { color: var(--seat-female); }
.counter button.icon { background: var(--fill); color: var(--primary); }
.counter b { width: 28px; text-align: center; font-size: 19px; font-variant-numeric: tabular-nums; }

/* ─── Рейс ──────────────────────────────────────────────── */
.when-line { display: flex; align-items: center; gap: 8px; color: var(--hint); font-size: 15px; font-weight: 500; padding: 0 4px 12px; }
.when-line > svg { color: var(--hint-2); }
.box { background: var(--block); border-radius: var(--r-card); padding: 16px; }
.box-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
/* Между блоками — воздух, а не линия: блоки и так отделены формой. */
.blockline { height: 12px; }
/* Разделы экрана рейса без своей карточки («Кто поедет», «Что в рейсе»,
   примечание) получают её здесь — иначе половина экрана на плашках,
   половина висит прямо на сером. */
.trip-page > section:not(.box) { background: var(--block); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.trip-page > section > h2 { font-size: 18px; }
.block-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.block-title > svg { color: var(--hint-2); }
.notes { font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.seatmap {
  display: flex; flex-direction: column; gap: 8px; margin: 14px auto 0; padding: 14px;
  background: var(--shade);
  border-radius: 26px 26px 16px 16px; /* верх — капот */
}
/* Ряд — флекс, а не сетка: места делят ширину поровну, а проход
   занимает узкую щель (как `_SeatRow._aisle` в приложении). */
.srow { display: flex; gap: 8px; }
.srow .seat { flex: 1 1 0; min-width: 0; }
.srow .aisle { flex: 0 0 12px; }
/* Место-невидимка: колонка есть в других рядах, а в этом пусто. Держит
   ряды друг под другом (откидное микроавтобуса не растягивается). */
.srow .seat-gap { flex: 1 1 0; min-width: 0; }
/* Своя цена места — только когда водитель сделал места разными. */
.seat .sprice { font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--price); }
.seat.selected .sprice { color: #fff; }
.seat {
  height: 62px; min-height: 0; padding: 0; border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--line); font-weight: 700;
}
.seat .letter { font-size: 13px; line-height: 1.1; }
.seat:hover { filter: none; border-color: var(--hint-2); }
.seat:active { opacity: .7; }
.seat.suggested { border: 2px solid var(--seat-selected); }
.seat.selected { background: var(--seat-selected); border-color: var(--seat-selected); color: #fff; }
.seat.male { background: var(--seat-male); border-color: var(--seat-male); color: #fff; }
.seat.female { background: var(--seat-female); border-color: var(--seat-female); color: #fff; }
.seat.nogender { background: var(--seat-blocked); border-color: var(--seat-blocked); color: #fff; }
.seat.blocked { background: rgba(176,180,186,.15); border-color: transparent; color: var(--seat-blocked); }
.seat.driver { background: transparent; border-color: transparent; color: var(--hint-2); cursor: default; }
.legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.legend-note { display: flex; gap: 8px; font-size: 14px; color: var(--hint); line-height: 1.35; }
.legend-note > svg { color: var(--hint-2); }

.gender-row { display: flex; align-items: center; gap: 10px; }
.seat-letter { width: 28px; font-size: 19px; }

.person { display: flex; align-items: center; gap: 14px; }
.person-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.icon-slot { width: 56px; height: 56px; border-radius: 50%; background: var(--shade); display: flex; align-items: center; justify-content: center; color: var(--hint-2); flex: none; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--shade); flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--hint); font-weight: 600; font-size: 18px; }
.avatar.xs { width: 28px; height: 28px; font-size: 13px; }
.avatar.lg { width: 56px; height: 56px; font-size: 22px; }
.avatar.xl { width: 76px; height: 76px; font-size: 30px; }
/* Страница водителя (`driverpage.js`). Строка водителя в рейсе — ссылка. */
a.person.link-row { color: var(--text); text-decoration: none; }
a.person.link-row > svg:last-child { color: var(--hint-2); }
.dstats { display: flex; margin-top: 14px; }
.dstat { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dstat b { font-size: 20px; font-weight: 800; }
.dstat b.warn { color: var(--wait-text); }
.dstat small { font-size: 13px; color: var(--hint); }
.chip.static { display: inline-flex; align-items: center; min-height: 36px; background: var(--tonal); color: var(--tonal-text); font-weight: 600; }
.list-box { padding: 6px; }
.list-box .list-row small { display: block; color: var(--hint); font-size: 14px; }
.review { padding: 10px 10px 4px; }
.review + .review { border-top: .5px solid var(--line); }
.review p { margin: 6px 0; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-stars { color: #FFB400; letter-spacing: 1px; }
.warn-line, .ok-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 500; font-size: 15px; }
.warn-line { color: var(--wait-text); }
.ok-line { color: var(--primary); }
.photos { display: flex; gap: 8px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.photos::-webkit-scrollbar { display: none; }
.photo { flex: none; width: 200px; height: 140px; padding: 0; border-radius: 12px; overflow: hidden; background: var(--shade); scroll-snap-align: start; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.empty { display: flex; align-items: center; justify-content: center; color: var(--hint-2); }
img.broken { visibility: hidden; }
.perk-line { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 16px; }
.perk-line > svg { color: var(--text); }
.perk-line + .perk-line { border-top: .5px solid var(--line); }
.perk-line b { color: var(--hint); font-weight: 600; font-variant-numeric: tabular-nums; }
.perk-line.muted, .perk-line.muted > svg { color: var(--hint); }

/* Полоса брони — плавающий слой поверх содержимого: материал
   с размытием, чтобы схема под ней угадывалась, а не обрывалась. */
.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; align-items: center; gap: 16px;
  max-width: var(--col); margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: .5px solid var(--line);
 
}
.bookbar .big { width: auto; flex: 2; }
.bookbar > svg { color: var(--hint); }
.bookbar-total { font-size: 21px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 681px) { .bookbar { border-radius: var(--r-card) var(--r-card) 0 0; border: .5px solid var(--line); border-bottom: 0; } }

.door { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; min-height: 64px; background: var(--fill); color: var(--text); border: 0; box-shadow: inset 0 0 0 1.5px transparent; text-align: left; font-weight: 400; }
.door > svg { color: var(--hint); }
.door b { display: block; font-size: 16px; font-weight: 600; }
.door small { display: block; color: var(--hint); font-size: 14px; }
.door:hover { filter: none; }
.door.on { background: var(--tonal); box-shadow: inset 0 0 0 2px var(--primary); }
.door.on > svg, .door.on b { color: var(--tonal-text); }
.door-fee { color: var(--primary); white-space: nowrap; }

.viewer { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #000; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .icon { position: absolute; color: #fff; background: rgba(0,0,0,.4); }
.viewer .viewer-close { background: transparent; }
.viewer .viewer-close svg.i { background: rgba(255,255,255,.18); color: #fff; }
.viewer-close { top: calc(10px + env(safe-area-inset-top)); right: 10px; }
.viewer-prev { left: 10px; top: 50%; }
.viewer-next { right: 10px; top: 50%; }
.viewer-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ─── Поездка ───────────────────────────────────────────── */
.card { display: block; background: var(--block); border-radius: var(--r-card); padding: 16px; color: var(--text); }
.card + .card { margin-top: 12px; }
a.card:active { opacity: .7; }
.card.row { display: flex; }
.card.stack, .card.stack-sm { display: flex; }
.booking-card { display: flex; flex-direction: column; gap: 10px; }
.info-row { display: flex; gap: 10px; font-size: 15px; }
.info-row > svg { color: var(--hint-2); margin-top: 1px; }
.divider { height: 0; border-top: .5px solid var(--line); margin: 6px 0; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--fill); font-size: 15px; line-height: 1.4; }
.banner > svg { color: var(--hint); margin-top: 1px; }
.banner.ok { background: rgba(49,181,69,.11); }
.banner.ok > svg { color: var(--ok-text); }
.banner.wait { background: rgba(239,139,44,.13); }
.banner.wait > svg { color: var(--wait-text); }
.banner.act { background: rgba(51,144,236,.11); }
.banner.act > svg { color: var(--act-text); }
.banner.bad { background: rgba(229,57,53,.10); }
.banner.bad > svg { color: var(--bad-text); }
/* Плашка фазы поездки — верх страницы брони (как `_PhaseCard` в приложении). */
.phase { padding: 16px; border-radius: var(--r-card); display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.4; }
.phase b { font-size: 17px; }
.phase p { margin: 0; }
.phase.wait { background: rgba(239,139,44,.12); }
.phase.wait > .row > svg { color: var(--wait-text); }
.phase.ok { background: rgba(49,181,69,.11); }
.phase.ok > .row > svg { color: var(--ok-text); }
.phase.done { background: var(--fill); }
.countdown { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.progress.wait { margin-top: 6px; }
.progress.wait i { background: var(--wait-text); }
.presence { padding: 16px; border-radius: var(--r-card); background: rgba(239,139,44,.12); display: flex; flex-direction: column; gap: 10px; }
.presence .row > svg { color: var(--wait-text); }
.presence b { font-size: 17px; }
.subbox { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--fill); }
.subbox .row > svg { color: var(--hint); }
.eta { margin-top: 6px; }
.eta-big { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.progress { height: 6px; border-radius: 3px; background: var(--fill); margin-top: 12px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.mapbox { height: 260px; border-radius: 12px; overflow: hidden; background: var(--shade); }
/* Плашка «В пути» над картой поездки: без зазора она ложилась
   прямо на карту, а не стояла в середине своего поля. */
.box + .mapbox { margin-top: 12px; }

.pickup-row { display: flex; align-items: center; gap: 10px; padding: 12px; }
.pickup-row > svg { color: var(--hint-2); }

/* Статус — капсула с цветом и словом. Текст — тёмный оттенок того же
   цвета: светлый на своей же подложке не читался. */
.status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; letter-spacing: 0; }
.status.wait { background: rgba(239,139,44,.15); color: var(--wait-text); }
.status.ok { background: rgba(49,181,69,.14); color: var(--ok-text); }
.status.act { background: rgba(51,144,236,.13); color: var(--act-text); }
.status.done { background: var(--fill); color: var(--done-text); }
.status.bad { background: rgba(229,57,53,.12); color: var(--bad-text); }

.stars { display: flex; justify-content: center; gap: 4px; }
.star { width: 52px; min-height: 52px; color: var(--hint-2); background: transparent; }
.star svg.i { width: 40px; height: 40px; }
.star.on { color: #FFB400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--fill); color: var(--text); border: 0; font-size: 15px; font-weight: 500; }
.chip.on { background: var(--tonal); box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--tonal-text); font-weight: 600; }
/* Теги оценки: хорошие зелёным, плохие красным (владелец, 27.09). */
.chip.good { color: var(--ok-text); box-shadow: inset 0 0 0 1px rgba(49, 181, 69, .5); background: rgba(49, 181, 69, .08); }
.chip.bad { color: var(--bad-text); box-shadow: inset 0 0 0 1px rgba(229, 57, 53, .5); background: rgba(229, 57, 53, .08); }
.chip.good.on { background: var(--green); color: #fff; }
.chip.bad.on { background: var(--red); color: #fff; }

/* Страница поездки одной страницей: карта забирает остаток высоты. */
.trip-screen { display: flex; flex-direction: column; gap: 8px; min-height: calc(100dvh - 64px); padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); max-width: var(--col); margin: 0 auto; }
.trip-screen .live-grow { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.trip-screen .live-grow:empty { flex: 1; }
.trip-screen .live-grow .mapbox { flex: 1; min-height: 200px; height: auto; margin-top: 0; }
.booking-card.compact { gap: 6px; padding: 10px 12px; }
.booking-card.compact .person { display: flex; align-items: center; gap: 8px; }
.trip-actions { display: flex; gap: 8px; }
.trip-actions .btn { min-height: 56px; }
.btn.sos { background: var(--red); color: #fff; font-weight: 800; }
.chip.bad { background: rgba(229,57,53,.1); color: var(--red); font-weight: 600; }
.chip:hover { filter: none; }

.req-row { display: flex; align-items: center; gap: 12px; }
.req-row > svg { color: var(--hint-2); }
/* Заявка с предложениями водителей (`requests.js`). */
/* Карточка заявки — ЧИСЛА `RequestSummary` приложения (владелец, 28.09:
   «должно быть 1 в 1»). Поля 12/14, отступ от края экрана 12 — как у
   карточки рейса, а не 16 страницы. Прежнее `.req-card b:first-child
   { 17px }` раздувало любое первое жирное слово: время, имя в предложении. */
.req-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; line-height: 1.2; }
.page .req-card { margin-left: -4px; margin-right: -4px; }
.req-card [data-matching] { align-self: flex-start; justify-content: flex-start; text-align: left; }
/* Маршрут — две булавки 22, города 19, стрелка 18 по 8 с боков. */
.req-card .rq-route { align-items: center; margin-bottom: 2px; }
.rq-cities { gap: 4px; }
.rq-cities > svg { width: 22px; height: 22px; color: var(--primary); }
.rq-cities b { font-size: 19px; font-weight: 800; }
.rq-arr { display: inline-flex; margin: 0 4px; color: var(--hint); }
.rq-arr svg { width: 18px; height: 18px; stroke-width: 2.2; }
/* Сетка 2×2 — время | опции, люди | цена. */
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rq-cell { display: flex; gap: 6px; align-items: flex-start; min-width: 0; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); }
.rq-cell > svg { flex: none; color: var(--primary); }
.rq-cell > div { flex: 1; min-width: 0; }
.rq-label { font-size: 11.5px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.rq-value { font-size: 16px; font-weight: 800; }
.rq-none { font-size: 15px; color: var(--hint); }
.rq-none.small { font-size: 14px; }
.rq-cell.shaded { border-color: transparent; background: rgba(58, 134, 61, .08); }
.rq-cell.rq-price { background: rgba(219, 95, 0, .08); }
.rq-cell.rq-price > svg { color: var(--price); }
.rq-price .rq-value { font-size: 18px; color: var(--price); font-variant-numeric: tabular-nums; }
.rq-people b { font-size: 17px; font-weight: 800; }
.rq-people .tally { font-size: 14px; }
.rq-people .tally svg { width: 17px; height: 17px; }
.rq-opt { display: inline-flex; align-items: center; gap: 3px; margin: 0 4px 4px 0; padding: 3px 7px; border-radius: 999px; background: rgba(49, 181, 69, .14); color: var(--primary); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rq-opt svg.i.xs { width: 13px; height: 13px; stroke-width: 2.4; }
.rq-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: var(--hint); }
.rq-wait { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--primary); margin-top: 2px; }
.rq-wait svg.i.xs { width: 16px; height: 16px; }
.rq-offers { font-size: 15px; font-weight: 700; margin-top: 2px; }
/* Предложение водителя — как `_OfferTile`: лицо 36, имя 15, остальное 13. */
.offer { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--fill); }
.offer .avatar { width: 36px; height: 36px; font-size: 15px; font-weight: 700; }
.offer .row b.ellipsis { font-size: 15px; font-weight: 600; }
.offer .small { font-size: 13px; }
.offer .price { color: var(--price); font-size: 17px; font-weight: 800; white-space: nowrap; }
.offer .row .btn { min-height: 44px; }
.offer-banner { padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: var(--tonal); font-weight: 500; }
/* Лист заявки: цены вокруг ориентира, переключатели, комментарий. */
.filters.wrap { flex-wrap: wrap; padding: 0; }
.filters.wrap .fchip { flex: 0 0 auto; }
.price-own { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.price-own input { width: 96px; min-height: 40px; }
.switch-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); }
.switch-row input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.switch-row small { display: block; }
/* Три режима над формой: на узком телефоне слово важнее значка. */
@media (max-width: 400px) {
  .segmented button > svg { display: none; }
}
.bk-row { display: flex; flex-direction: column; gap: 6px; }
.bk-row:hover { box-shadow: 0 0 0 1.5px var(--tonal); }
.bk-row b.grow { font-size: 17px; font-weight: 600; }
.flag { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.flag.wait { color: var(--wait-text); }
.flag.brand { color: var(--primary); }
.tally { display: inline-flex; gap: 8px; font-weight: 700; }
.tally span { display: inline-flex; align-items: center; }
.tally .m { color: var(--seat-male); }
.tally .f { color: var(--seat-female); }

.handover { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; margin: 12px 0 4px; border-radius: var(--r-card); background: var(--fill); }
.handover b { font-size: 34px; font-weight: 700; letter-spacing: 6px; font-variant-numeric: tabular-nums; }

/* ─── Профиль ───────────────────────────────────────────── */
.profile-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px 22px; background: var(--header); color: var(--on-header); }
.avatar-btn { position: relative; padding: 0; background: transparent; border-radius: 50%; min-height: 0; }
.avatar-btn .avatar { background: var(--on-header-fill); color: var(--on-header); }
.avatar-btn .cam { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; }
.profile-name { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.profile-sub { font-size: 15px; opacity: .85; font-variant-numeric: tabular-nums; }
.chip-btn { min-height: 36px; padding: 0 14px; margin-top: 8px; background: var(--on-header-fill); color: var(--on-header); font-size: 14px; border-radius: 999px; }
.section-title { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--hint); margin: 12px 16px -4px; }
.reply { border-left: 3px solid var(--primary); padding-left: 10px; }

/* ─── Выбор точки ───────────────────────────────────────── */
.picker { display: flex; flex-direction: column; height: 100%; }
.picker-head { display: flex; align-items: center; gap: 6px; padding: 6px; padding-top: calc(6px + env(safe-area-inset-top)); background: var(--header); color: var(--on-header); }
.picker-head h2 { font-size: 18px; }
.picker-head button.icon { color: var(--on-header); }
.picker-body { position: relative; flex: 1; min-height: 0; background: var(--shade); }
/* Двумя классами: MapLibre вешает на контейнер .maplibregl-map
   с position: relative, и без этого карта схлопывается в ноль. */
.picker-map, .picker-map.maplibregl-map { position: absolute; inset: 0; }
.picker-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--seat-male); pointer-events: none; z-index: 2; }
.picker-pin svg.i { width: 44px; height: 44px; stroke-width: 1.5; }
.picker-nomap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 90px 24px 24px; text-align: center; color: var(--hint); }
.picker-search { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 3; }
.picker-search .search-field { background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.picker-search .search-field:focus-within { box-shadow: inset 0 0 0 2px var(--primary), 0 2px 10px rgba(0,0,0,.14); }
.picker-results { margin-top: 6px; max-height: 320px; overflow-y: auto; background: var(--surface); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.result { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; min-height: 54px; background: transparent; color: var(--text); border-radius: 0; text-align: left; font-weight: 400; }
.result + .result::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; border-top: .5px solid var(--line); }
.result > svg { color: var(--hint-2); }
.result b { display: block; font-weight: 600; }
.result small { display: block; color: var(--hint); font-size: 13px; }
.result:hover { filter: none; background: var(--hover); }
.nothing { display: flex; gap: 10px; padding: 14px; }
.nothing > svg { color: var(--hint-2); }
.nothing p { color: var(--hint); font-size: 14px; margin-top: 4px; }
.round-btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 48px; min-height: 48px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.picker-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-top: .5px solid var(--line); }
.nearby { display: flex; align-items: center; gap: 6px; font-size: 15px; }

.mk-car { width: 38px; height: 38px; border-radius: 50%; background: var(--seat-male); color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.mk-car svg.i { width: 20px; height: 20px; }
.mk-car.stale { background: var(--seat-blocked); }
.mk-pickup { color: var(--seat-male); }
.mk-pickup svg.i { width: 34px; height: 34px; }
.mk-city { padding: 3px 8px; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: nowrap; }

@media (min-width: 700px) {
  .main { padding-top: 4px; }
  .hero { border-radius: 0 0 var(--r-card) var(--r-card); }
}

/* Меньше движения — меню появляется без выезда; вращение загрузки
   остаётся: это единственный знак, что работа идёт. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}