/*
  Сайт пассажира 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;
  --font: -apple-system, BlinkMacSystemFont, "Inter UGUR", system-ui, "Segoe UI", Roboto, "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); }
.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; }
/* Карточка рейса — без рамки: белое на сером уже группа. Внутренние
   линии сняты, кроме одной — между «когда и почём» и «кто и на чём». */
.tcard { display: block; background: var(--block); border-radius: var(--r-card); padding: 16px; color: var(--text); }
.tcard:hover { box-shadow: 0 0 0 1.5px var(--tonal); }
.tcard:active { opacity: .7; }
.tc-route { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.tc-route .status { vertical-align: 3px; margin-left: 4px; }
.tc-line { display: none; }
.tc-when { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tc-time { font-size: 15px; font-weight: 600; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-price { font-size: 19px; font-weight: 700; color: var(--price); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-car { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: .5px solid var(--line); }
.tc-car > .grow { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.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.empty { width: 76px; height: 58px; }
.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; }
.tc-title { font-size: 16px; font-weight: 600; line-height: 1.2; }
/* Госномер — табличкой: белая, чёрный текст, тонкая рамка. Машину
   у подъезда находят по фото и номеру — пусть номер и выглядит номером. */
.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; }
.tc-driver { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; min-width: 0; max-width: 100%; margin-top: 4px; }
.tc-driver .verified { color: var(--primary); display: inline-flex; }
.tc-driver .rating { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; white-space: nowrap; font-weight: 600; }
.tc-driver .rating svg { color: #FFB400; }
.tc-driver .tag { color: var(--hint); font-size: 13px; }

.sbadge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 600; 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); }
.tc-price.muted { color: var(--hint); font-size: 15px; }
.parcel-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.parcel-price b { font-size: 20px; }

/* Опции рейса — нейтральным цветом: это не кнопки. Нет опции —
   перечёркнутый значок, то есть различие формой, а не одним цветом. */
.perks { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; color: var(--text); }
.perk { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }
.perk.off { color: var(--hint-2); }
.perk small { font-size: 14px; font-weight: 500; color: var(--hint); margin-left: 3px; }

.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 { 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; }
.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; }
.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); }
.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); }
.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; }
.chip:hover { filter: none; }

.req-row { display: flex; align-items: center; gap: 12px; }
.req-row > svg { color: var(--hint-2); }
.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; }
}