*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Точные токены из Figma (файл DSport) — привязка к макетам ТЗ */
  --navy:      #0A0B10;
  --navy-mid:  #0D1829;
  --blue:      #00419E;   /* глубокий синий */
  --blue-lt:   #0A6EFF;   /* основной акцент */
  --blue-mid:  #598CFF;
  --blue-soft: #B1C5FF;   /* светлый текст на синем */
  --pill-active: #DAE2FF; /* фон активной пилюли */
  --blue-bg:   rgba(0,65,158,0.25);
  --green:     #00E5A0;   /* рейтинг / PRO / успех */
  --green-lt:  rgba(0,229,160,0.15);
  --orange:    #F59E0B;
  --orange-lt: rgba(245,158,11,0.15);
  --red:       #FFB4AB;
  --red-lt:    rgba(255,180,171,0.14);
  --white:     #FFFFFF;

  /* Градиенты Figma */
  --grad-screen: radial-gradient(240% 75% at 118% 7%, #00419E 0%, #0A0B10 62%), #0A0B10;  /* Fill Figma: Radial #00419E→#0A0B10, центр в верхнем ПРАВОМ углу (замер краёв: справа #052A7E, слева #081739) */
  --grad-hero: linear-gradient(180deg, #00419E 0%, #0A0B10 100%);
  --grad-card: linear-gradient(160deg, #0A6EFF 0%, #00419E 100%);   /* акцент: кнопки, карточки-метрики */
  --tint:      rgba(177,197,255,0.10);   /* полупрозрачные строки/карточки (#B1C5FF @10%) */
  --nav-bg:    rgba(0,65,158,0.5);        /* нижняя навигация (#00419E @50%) */

  /* Легаси-переменные шаблона — весь CSS ниже опирается на них */
  --primary:   #0A6EFF;
  --accent:    #00419E;
  --bg:        #0A0B10;
  --bg2:       #0D1829;
  --text:      #FFFFFF;
  --text2:     #C2C6D8;
  --border:    rgba(255,255,255,0.08);
  --radius:    16px;
  --shadow:    0 4px 16px rgba(0,0,0,.5);
}

html, body {
  height: 100%;
  max-width: 100vw; overflow-x: clip;  /* ничто не должно раздувать layout шире экрана (iOS PWA запоминает масштаб!) */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

/* Нативные контролы не наследуют цвет — на тёмной теме UA-стиль даёт
   чёрный текст на тёмном фоне (системный баг ветки 6). Плюс сбрасываем
   appearance: иначе на iOS/Safari сквозь полупрозрачный фон кнопки
   пролезает системный светлый бевел (кнопка выглядит «на белом фоне»). */
button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
input, textarea, select { font: inherit; color: var(--text); }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.30); }

#app {
  height: 100vh;
  height: 100dvh; /* динамическая высота — учитывает панели браузера, чинит «пружинящий» скролл на мобилке */
  overflow-y: auto;
  /* -webkit-overflow-scrolling: touch НЕ ставим: на iOS этот слой композитинга
     прячет оверлеи Яндекс.Карты (метки/векторы). Инерция прокрутки на iOS 13+
     и так включена по умолчанию, свойство лишнее. */
  position: relative;
}

/* Экраны */
.screen { display: none; min-height: 100vh; min-height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* Кнопки */
.btn {
  display: block; width: 100%;
  padding: 14px 20px;
  border: none; border-radius: var(--radius);
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: opacity .2s;
}
.btn:disabled { opacity: .5; cursor: default; }
/* Канон primary — контурная кнопка (Вариант B: обводка + лёгкая заливка) */
.btn-primary { background: rgba(10,110,255,.10); color: #fff; border: 2px solid var(--blue-lt); font-weight: 800; }
.btn-primary:hover:not(:disabled) { background: rgba(10,110,255,.20); }
.btn-primary:active { opacity: .85; }
.btn-ghost { background: transparent; color: var(--text2); }
.btn-link { background: none; border: none; cursor: pointer; color: var(--primary); font-weight: 500; }

/* Кнопка входа/выхода в шапке профиля — читаемая «ghost»-таблетка на тёмном фоне */
.profile-auth-btn {
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.profile-auth-btn:hover  { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.26); }
.profile-auth-btn:active { background: rgba(255,255,255,.22); }
.btn-social {
  flex: 1; padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg2);
  font-size: 14px; cursor: pointer;
}

/* Поля */
.field-label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--text2); }
.field-input {
  display: block; width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 16px; background: var(--bg2);
  outline: none; transition: border-color .2s;
}
.field-input:focus { border-color: var(--primary); }

/* ── Auth: вход по SMS (дизайн Home.pdf) ─────────────── */
.screen-auth { justify-content: flex-start; align-items: stretch; padding: 0; background: var(--bg); }

/* Герой с логотипом на синем градиенте */
.auth-hero {
  flex: 0 0 auto; text-align: center;
  padding: calc(48px + env(safe-area-inset-top)) 14px 40px;
  background: linear-gradient(180deg, #123c7d 0%, #16408a 45%, #0c2350 100%);
}
.auth-wordmark { font-size: 42px; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.wm-ds { color: #38a1ff; }
.wm-sport { color: #eaf2ff; }
.auth-logo-img { display: block; width: min(92%, 440px); height: auto; margin: 0 auto; }
.auth-tagline { margin-top: 10px; font-size: 14px; color: #9dc0f2; letter-spacing: .01em; }

/* Тёмный лист поверх героя */
.auth-sheet {
  flex: 1 1 auto; background: var(--bg);
  border-top-left-radius: 28px; border-top-right-radius: 28px;
  margin-top: -22px; position: relative; z-index: 1;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .45);
}
.auth-wrap { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-h1 { font-size: 25px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; line-height: 1.1; }
.auth-sub { font-size: 14.5px; color: var(--text2); margin: 7px 0 22px; }

.auth-step { display: flex; flex-direction: column; }
.auth-step.hidden { display: none; }

.field-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .08em; }
.auth-input-wrap { position: relative; margin-bottom: 16px; }
.auth-input-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #8a98b8; pointer-events: none; }
.field-input.has-ic { padding-left: 46px; }

/* Кнопки действия входа — как в макете: тёмно-синяя заливка с контуром */
.auth-send { background: rgba(47, 107, 255, .16); border: 1.5px solid rgba(90, 160, 255, .42); color: #eaf2ff; margin-top: 4px; }
.auth-send:active { background: rgba(47, 107, 255, .26); }

.auth-social-sec { margin-top: 24px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text2); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-social { display: flex; gap: 18px; justify-content: center; margin-top: 18px; }
.btn-social {
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto; padding: 0;
  border: 1.5px solid rgba(90, 160, 255, .4); background: rgba(47, 107, 255, .1); color: #5aa0ff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-social svg { width: 24px; height: 24px; }
.btn-social:active { background: rgba(47, 107, 255, .2); }

.auth-newacc { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); text-align: center; }
.auth-create { background: transparent; border: 1.5px solid rgba(90, 160, 255, .5); color: #5aa0ff; margin-top: 14px; }
.auth-create:active { background: rgba(90, 160, 255, .1); }
.auth-newacc-hint { font-size: 12.5px; color: var(--text2); line-height: 1.5; margin-top: 12px; }

.otp-inputs { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.otp-digit {
  width: 56px; height: 64px; text-align: center; font-size: 24px; font-weight: 700;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg2); color: var(--text); outline: none; -moz-appearance: textfield;
}
.otp-digit:focus { border-color: var(--primary); }
.otp-digit::-webkit-inner-spin-button,
.otp-digit::-webkit-outer-spin-button { -webkit-appearance: none; }
.otp-timer { text-align: center; font-size: 14px; color: var(--text2); margin-bottom: 8px; }
.auth-step .btn-ghost { margin-top: 10px; }
.auth-error {
  padding: 10px 14px; border-radius: 8px; margin-top: 12px;
  background: var(--red-lt); color: var(--red); font-size: 14px;
}
.auth-error.hidden { display: none; }
.hidden { display: none !important; }

/* ── Сплэш-экран (S-00): заставка при запуске ── */
.ds-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #1c4ea3 0%, #123c7d 24%, #0a1f45 60%, #060a14 100%);
  transition: opacity .5s ease;
  overflow: hidden;
}
.ds-splash-logo {
  width: min(80%, 380px); max-width: 92vw; height: auto; margin-top: -6vh;
  animation: ds-splash-in .7s ease both;
}
.ds-splash.hide { opacity: 0; pointer-events: none; }
@keyframes ds-splash-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ds-splash-logo { animation: none; } }

/* ── Map screen ─────────────────────────────────────── */
.screen-map { position: relative; height: 100vh; height: 100dvh; background: var(--bg2); overflow: hidden; padding-bottom: 0 !important; }

/* ── КАРТА: outline-стиль (полупрозрачные плашки + тонкий контур поверх светлых тайлов) ── */
.map-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(54px + env(safe-area-inset-top)) 12px 6px;
  background: transparent;
}
.map-search-wrap { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.map-search-ic { position: absolute; left: 14px; width: 16px; height: 16px; color: #8a98b8; pointer-events: none; }
.map-search {
  width: 100%; padding: 10px 14px 10px 38px;
  border: 1.5px solid rgba(255, 255, 255, .12); border-radius: 21px;
  font-size: 14.5px; font-weight: 500; color: #eaf0fb;
  background: rgba(16, 25, 46, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  outline: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.map-search::placeholder { color: #8a98b8; }

.map-filters, .map-quick {
  position: absolute; left: 0; right: 0; z-index: 20;
  display: flex; gap: 8px; padding: 2px 12px 6px;
  justify-content: flex-start; /* макет: чипы слева, не растянуты */
  overflow-x: auto; background: transparent;
}
.map-filters { top: calc(106px + env(safe-area-inset-top)); }
.map-quick   { top: calc(146px + env(safe-area-inset-top)); }
.map-filters::-webkit-scrollbar, .map-quick::-webkit-scrollbar { display: none; }

.filter-chip, .quick-chip {
  flex-shrink: 0; padding: 9px 17px; border-radius: 18px;
  font-size: 14px; font-weight: 650; color: #dfe7fb; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
  border: 1.5px solid rgba(255, 255, 255, .12);
  background: rgba(16, 25, 46, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all .15s;
}
/* В макете КАРТА чипы без цветных точек — простые пилюли */
/* Активный чип — светлая пилюля #DAE2FF, как в макете КАРТА (Figma); точка типа остаётся цветной */
.filter-chip.active, .quick-chip.on {
  background: var(--pill-active); border-color: transparent; color: #12336F; font-weight: 700;
}
.quick-more { font-weight: 700; }

/* Единственная плавающая кнопка — геолокация (outline-круг) */
.map-geo {
  position: absolute; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 22;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #dfe7fb;
  border: 1.5px solid rgba(255, 255, 255, .14);
  background: rgba(16, 25, 46, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45); cursor: pointer;
}
.map-geo svg { width: 25px; height: 25px; }
.map-geo:active { background: rgba(30, 43, 77, .95); }
/* Когда открыта карточка объекта — поднимаем геоточку над ней */
.screen-map:has(.map-poi.show) .map-geo { bottom: calc(305px + env(safe-area-inset-bottom)); }

/* Карточка объекта по тапу на метку — «С действиями»: фото/аватар + Открыть/♡/маршрут */
.map-poi {
  position: absolute; left: 12px; right: 12px; z-index: 21;
  bottom: calc(74px + env(safe-area-inset-bottom));
  padding: 0; border-radius: 22px; overflow: hidden;
  background: var(--bg2);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.map-poi[hidden] { display: none; }
/* Крестик закрытия — над карточкой справа, чтобы не спорить с сердцем и рейтингом на фото */
.poi-close {
  position: absolute; right: 10px; top: 10px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(10, 16, 30, .72); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent;
}
.poi-close svg { width: 16px; height: 16px; }
.poi-close:active { transform: scale(.92); }
/* У зала и площадки правый верх занят «сердцем» — сдвигаем крестик левее */
.map-poi:has(.poi-photo .poi-fav) .poi-close,
.map-poi:has(.poi-media .poi-fav) .poi-close { right: 58px; }
/* Отступы для «прямых» блоков карточки (тренер/площадка); у зала контент в .poi-body */
.map-poi > .poi-head  { padding: 16px 16px 0; }
.map-poi > .poi-stats { padding: 0 16px; }
.map-poi > .poi-foot  { padding: 14px 16px 16px; }

/* Зал: фото сверху во всю ширину + рейтинг/сердце поверх */
.poi-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #16233f center/cover no-repeat; }
.poi-photo-empty { display: flex; align-items: center; justify-content: center; }
.poi-photo-ico { font-size: 42px; opacity: .5; }
.poi-photo-rate { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(6, 10, 20, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.poi-photo .poi-fav, .poi-media .poi-fav { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px;
  background: rgba(255, 255, 255, .92); color: #0a0b10; }
.poi-photo .poi-fav.on, .poi-media .poi-fav.on { background: rgba(255, 106, 111, .95); color: #fff; }
.poi-body { padding: 14px 16px 16px; }

/* Пилюли (тип зала / бесплатно / покрытие) */
.poi-pills { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.poi-pill { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; color: #cdd8f0; background: rgba(177, 197, 255, .12); }
.poi-pill-hi { background: var(--blue-lt); color: #fff; }

/* Площадка: квадратное фото слева */
.poi-head-media { gap: 14px; }
.poi-media { position: relative; width: 118px; height: 118px; flex: 0 0 118px; border-radius: 16px;
  background: #16233f center/cover no-repeat; overflow: hidden; }
.poi-media-empty { display: flex; align-items: center; justify-content: center; }
.poi-media .poi-photo-rate { left: 8px; top: 8px; padding: 4px 9px; font-size: 12px; }
.poi-media .poi-fav { right: 8px; top: 8px; width: 32px; height: 32px; }
.poi-media .poi-fav svg { width: 17px; height: 17px; }

/* Тренер: круглый аватар с фото */
.poi-av { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: #16233f center/cover no-repeat; }
.poi-av-empty { display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255, 255, 255, .06); }
/* Инициалы в карточке (тренер без фото): зелёное кольцо + зелёные буквы (макет #143) */
.poi-av-ini { display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--green); background: rgba(0,229,160,.12); border: 1.5px solid rgba(0,229,160,.5); }

/* Метка-аватар на карте (объекты с фото): круг с цветным кольцом + хвост к точке */
.ymk-ava { position: absolute; left: -24px; top: -57px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #0f7a52; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.45); }
.ymk-ava-img { position: absolute; top: 2px; left: 2px; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #16233f; display: block; }
.ymk-ava-tail { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #0f7a52; }
/* Метка-аватар с инициалами (тренер без фото) */
.ymk-ava-txt { display: flex; align-items: center; justify-content: center; }
.ymk-ava-ini { font-size: 17px; font-weight: 800; color: #0a6b48; letter-spacing: .02em; }
/* Метка-замок: площадка заперта подпиской (видно, но заперто) */
.ymk-lock { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: #c2410c; box-shadow: 0 3px 12px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.poi-head { display: flex; gap: 14px; align-items: flex-start; }
.poi-ph {
  width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: rgba(255, 255, 255, .06); color: #9fb4d6; background-size: cover; background-position: center;
}
.poi-ph.ph-gym     { background: rgba(37, 99, 235, .3); }
.poi-ph.ph-trainer { background: rgba(34, 209, 101, .22); }
.poi-ph.ph-outdoor { background: rgba(245, 158, 11, .24); }
.poi-info { flex: 1; min-width: 0; }
.poi-type { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #9fb4d6; text-transform: uppercase; }
.poi-name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em; line-height: 1.2; margin-top: 2px; }
.poi-stars { font-size: 14px; margin-top: 5px; color: #cdd9ee; }
.poi-star { color: #2fd18a; }
.poi-stars b { color: #fff; font-weight: 800; }
.poi-rev { color: #9fb4d6; font-size: 12.5px; font-weight: 500; }
.poi-meta { font-size: 13px; margin-top: 5px; color: #9fb4d6; }
.poi-fav {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: none; color: #cdd9ee;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.poi-fav svg { width: 22px; height: 22px; }
.poi-fav.on { color: #ff6a6f; background: rgba(255, 106, 111, .16); }
.poi-fav.on svg { fill: #ff6a6f; }
.poi-stats { display: flex; gap: 9px; margin-top: 14px; }
.poi-stat { flex: 1; min-width: 0; background: rgba(255, 255, 255, .06); border-radius: 13px; padding: 10px 12px; }
.poi-stat-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: #9fb4d6; text-transform: uppercase; }
.poi-stat-v { font-size: 15px; font-weight: 800; color: #fff; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.poi-price-box { display: flex; flex-direction: column; }
.poi-price-lbl { font-size: 12px; color: #9fb4d6; }
.poi-price-val { font-size: 24px; font-weight: 800; color: #2fd18a; line-height: 1.1; }
/* Контурная кнопка по макету #140: синяя рамка, тёмная заливка, белый текст в верхнем регистре */
.poi-more {
  padding: 14px 28px; border-radius: 14px; border: 1.5px solid var(--blue-lt);
  background: rgba(10,110,255,.06); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.poi-more:active { background: rgba(10,110,255,.18); }

/* Расширенные фильтры («Ещё») — полноэкранный лист (дизайн Filters Coach.pdf) */
.map-ext-filters {
  position: fixed !important; inset: 0; z-index: 200;
  background: var(--grad-screen) !important; border: none !important; /* синий радиальный градиент вверху — как на профиле #142 */
  padding: 0 !important; box-shadow: none;
  flex-direction: column;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.map-ext-filters.open { display: flex !important; }

.map-container {
  position: fixed; inset: 0; z-index: 1;
  background: var(--bg2); overflow: hidden; /* fixed = карта на весь физический экран (под баром и безопасной зоной), без серой полосы внизу */
}
.ymap-frame { position: absolute; inset: 0; } /* заполняем .map-container (position:relative). translateZ НЕ ставим: на Safari/PWA он замораживает GPU-слой и тайлы не перерисовываются при зуме. Метки чинит снятие -webkit-overflow-scrolling у #app. */
/* Тёмная карта как в макете: инвертируем ТОЛЬКО слой тайлов (ground-pane),
   наши SVG-метки и балуны лежат в других слоях — их фильтр не трогает.
   Селектор по вхождению класса, чтобы пережить смену версии ymaps (ymaps-2-1-XX-ground-pane). */
.ymap-frame [class*="ground-pane"] {
  /* Упрощён до 2 операций (было 5) — фильтр пересчитывается на каждом кадре зума,
     чем меньше функций, тем меньше дёрганья. Дальше — миграция на Яндекс v3 (нативная тёмная). */
  filter: invert(1) hue-rotate(180deg);
  /* светлая подложка ВНУТРИ инвертируемого слоя: после invert станет тёмной —
     недогруженные тайлы больше не светятся квадратами на тёмной карте */
  background: #efeee9;
}
/* корень карты (вне фильтра) — тёмный: пустота при драге тёмная, не бежевая */
.ymap-frame [class*="-map"] { background: #0A0B10 !important; }
/* Кнопка гео: состояние поиска позиции */
.map-geo.busy svg { animation: geo-spin 1s linear infinite; opacity: .6; }
@keyframes geo-spin { to { transform: rotate(360deg); } }

/* Кнопки-иконки рядом с поиском (макет КАРТА): та же «стеклянная» пилюля, что и поле */
.search-ib {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 15px;
  border: 1.5px solid rgba(255,255,255,.12); background: rgba(16,25,46,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  color: #cdd8f0; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.search-ib svg { width: 20px; height: 20px; }
.search-ib:active { background: rgba(30,43,77,.95); }

.map-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 6px; color: var(--text2);
}
.map-placeholder-icon { font-size: 36px; }
.map-placeholder-text { font-size: 15px; font-weight: 600; color: var(--text); }
.map-placeholder-sub { font-size: 13px; }

/* ── Переключатель Карта / Список + список объектов (дизайн GYM List.pdf) ── */
.map-viewtabs {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 26; display: flex; gap: 3px; padding: 3px;
  background: rgba(16, 25, 46, .82); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.mv-tab {
  border: none; background: transparent; color: #dfe7fb; font-size: 14px; font-weight: 700;
  padding: 8px 24px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.mv-tab.active { background: #cdd6ff; color: #16203a; }

/* Список показывается только в режиме list-mode — оверлеем поверх карты */
.map-list { display: none; }
.screen-map.list-mode .map-list {
  display: block; position: absolute; inset: 0; z-index: 15;
  background: var(--bg2);
  padding-top: calc(190px + env(safe-area-inset-top));
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.screen-map.list-mode .map-container,
.screen-map.list-mode .map-geo,
.screen-map.list-mode .map-poi { display: none !important; }
.map-list-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 16px 10px; font-size: 13px; color: var(--text2);
}
.map-sort-btn { background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.map-cards { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 14px; }
.map-loader, .map-empty { padding: 32px 16px; text-align: center; color: var(--text2); font-size: 15px; }

/* Карточка списка (фото сверху + рейтинг/♡/бейдж, имя, цена, Подробнее) */
.ls-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: transform .12s;
}
.ls-card:active { transform: scale(.99); }
.ls-photo { position: relative; height: 180px; background-size: cover; background-position: center; background-color: #1a2740; }
/* Фото тренеров показываем ЦЕЛИКОМ (без обрезки): вписываем по размеру, тёмный фон по бокам.
   Залы/площадки (горизонтальные фото) остаются на cover по центру. */
.ls-photo.ph-trainer:not(.ls-photo-empty) {
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #0c1526;
}
.ls-photo-empty { display: flex; align-items: center; justify-content: center; }
.ls-photo.ph-gym     { background-color: rgba(37, 99, 235, .2); }
.ls-photo.ph-trainer { background-color: rgba(34, 209, 101, .16); }
.ls-photo.ph-outdoor { background-color: rgba(245, 158, 11, .18); }
.ls-photo-ic { font-size: 46px; opacity: .55; }
.ls-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10, 16, 30, .5); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ls-fav svg { width: 20px; height: 20px; }
.ls-fav.on { color: #ff6a6f; }
.ls-fav.on svg { fill: #ff6a6f; }
/* Статус-бейдж (открыт сейчас / топ рейтинг) — левый верхний угол фото, пилюля */
.ls-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; color: #fff;
}
.ls-badge-open { background: var(--green); color: #06231a; }
.ls-badge-top  { background: rgba(10, 16, 30, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ls-body { padding: 15px 16px 16px; }
.ls-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ls-head-l { min-width: 0; }
.ls-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.ls-rate { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #fff; margin-top: 6px; }
.ls-rate .ls-star { color: var(--green); }
.ls-rate .ls-rev { color: var(--text2); font-weight: 600; }
.ls-price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.ls-price .ls-price-v { font-size: 20px; font-weight: 800; color: var(--green); line-height: 1; }
.ls-price .ls-price-u { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); margin-top: 3px; }
.ls-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--text2); margin-top: 12px; }
.ls-meta-i { display: inline-flex; align-items: center; gap: 5px; }
.ls-pin { display: inline-flex; width: 15px; height: 15px; color: var(--blue-soft); }
.ls-pin svg { width: 15px; height: 15px; }
.ls-open {
  width: 100%; margin-top: 14px; padding: 13px; border: 1.5px solid var(--blue-lt); border-radius: 14px;
  background: rgba(10,110,255,.06); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
/* CTA «Посмотреть на карте» в конце каталога */
.ls-mapcta { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 20px; background: rgba(177,197,255,.06); border: 1px solid var(--border); }
.ls-mapcta-l { flex: 1 1 auto; min-width: 0; }
.ls-mapcta-t { font-size: 15px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.ls-mapcta-s { font-size: 12.5px; color: var(--text2); margin-top: 4px; }
.ls-mapcta-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 11px 15px; border: 1.5px solid var(--blue-lt); border-radius: 13px; background: rgba(10,110,255,.08); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ls-mapcta-btn svg { width: 16px; height: 16px; }

.map-card {
  display: flex; gap: 12px; background: var(--bg2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; cursor: pointer; transition: transform .15s;
}
.map-card:active { transform: scale(.98); }
.card-photo {
  width: 88px; height: 88px; object-fit: cover; flex-shrink: 0;
}
.card-photo-empty {
  width: 88px; height: 88px; display: flex;
  align-items: center; justify-content: center;
  background: var(--bg); font-size: 32px; flex-shrink: 0;
}
.card-body { flex: 1; padding: 10px 12px 10px 0; min-width: 0; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: .4px;
}
.badge-gym     { background: var(--blue); color: var(--white); }
.badge-trainer { background: var(--green); color: var(--navy); }
.badge-outdoor { background: var(--orange); color: var(--navy); }
.card-stars { font-size: 12px; color: var(--orange); }
.card-rating-num { color: var(--text2); margin-left: 2px; }
.card-name  { font-size: 15px; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-metro { font-size: 12px; color: var(--text2); margin-bottom: 2px; }
.card-address { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-price { font-size: 13px; font-weight: 600; color: var(--green); margin-top: 4px; }

/* ── Detail pages ───────────────────────────────────── */
.screen-detail { flex-direction: column; background: var(--grad-screen); background-attachment: local; padding-bottom: 84px; }

.detail-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: var(--bg2);
  position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow);
}
.detail-back {
  background: none; border: none; font-size: 15px;
  color: var(--primary); cursor: pointer; font-weight: 600; padding: 4px 0;
}
.detail-fav {
  background: none; border: none; font-size: 22px; cursor: pointer; line-height: 1;
}

/* Галерея */
.detail-gallery { position: relative; height: 240px; overflow: hidden; background: var(--navy-mid); }
.gallery-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.gallery-slide.active { opacity: 1; }
.gallery-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.gallery-dot.active { background: #fff; }
.detail-photo-empty {
  height: 200px; display: flex; align-items: center;
  justify-content: center; font-size: 64px; background: var(--bg);
}

/* Контент */
.detail-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.detail-name { font-size: 20px; font-weight: 800; line-height: 1.2; flex: 1; }
.detail-rating {
  font-size: 14px; font-weight: 800; color: #2fd18a; white-space: nowrap;
  background: rgba(47, 209, 138, .14); border: 1px solid rgba(47, 209, 138, .3);
  border-radius: 999px; padding: 4px 11px; flex-shrink: 0;
}
.detail-metro, .detail-address, .detail-schedule { font-size: 14px; color: var(--text2); }
.detail-phone a { font-size: 14px; color: var(--primary); text-decoration: none; font-weight: 600; }
.detail-desc { font-size: 14px; line-height: 1.6; color: var(--text); }

.detail-section { display: flex; flex-direction: column; gap: 8px; }
.detail-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); }

.amenities-list { display: flex; flex-wrap: wrap; gap: 6px; }
.amenity-tag {
  padding: 4px 10px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 13px; color: var(--text);
}
.amenity-tag-blue { background: var(--blue-bg); border-color: transparent; color: var(--white); }

/* Footer с кнопкой */
.detail-footer {
  padding: 16px; background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  /* Над глобальным нижним баром (≈56px + safe-area), а не под ним */
  position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 30;
}
.detail-price { font-size: 18px; font-weight: 800; color: var(--green); white-space: nowrap; }
.detail-footer .btn { flex: 1; margin: 0; }

/* Тренер */
.trainer-hero {
  display: flex; gap: 16px; padding: 16px;
  background: var(--bg2); align-items: center;
}
.trainer-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.trainer-photo-empty {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: 40px; flex-shrink: 0;
}
.trainer-hero-info { flex: 1; min-width: 0; }
.trainer-name-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.badge-pro { background: var(--orange); color: var(--navy); }

.trainer-stats {
  display: flex; gap: 16px;
  padding: 14px 16px; background: var(--bg2);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.trainer-stat { flex: 1; text-align: center; }
.trainer-stat-val { font-size: 22px; font-weight: 800; color: var(--primary); }
.trainer-stat-label { font-size: 12px; color: var(--text2); margin-top: 2px; }

.trainer-gym-card {
  padding: 12px 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
.trainer-gym-name { font-size: 15px; font-weight: 700; }
.trainer-gym-addr { font-size: 13px; color: var(--text2); }
.trainer-gym-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text2); font-size: 18px; }

/* ── Booking ────────────────────────────────────────── */
.screen-booking { flex-direction: column; background: var(--bg); }
.booking-nav-title { font-size: 16px; font-weight: 700; }

.booking-dates {
  display: flex; gap: 8px; padding: 12px 16px;
  overflow-x: auto; background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.booking-dates::-webkit-scrollbar { display: none; }
.date-chip {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg2); cursor: pointer; gap: 2px; min-width: 48px;
  transition: all .15s;
}
.date-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.date-chip-day { font-size: 11px; opacity: .7; text-transform: uppercase; }
.date-chip-num { font-size: 18px; font-weight: 800; line-height: 1; }
.date-chip-mon { font-size: 11px; opacity: .7; }

.booking-slots-wrap { flex: 1; padding: 16px 16px calc(150px + env(safe-area-inset-bottom)); overflow-y: auto; }
.booking-slots-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text2); }
.booking-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 8px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg2); cursor: pointer; gap: 4px; transition: all .15s;
}
.slot-btn.active  { border-color: var(--blue-lt); background: var(--blue-bg); }
.slot-btn.slot-booked { background: var(--bg); opacity: .4; cursor: default; }
.slot-time  { font-size: 15px; font-weight: 700; }
.slot-price { font-size: 12px; color: var(--green); font-weight: 600; }

.booking-footer {
  padding: 14px 16px; background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  /* Сидит НАД глобальным нижним баром (≈56px + safe-area), а не под ним */
  position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 30;
}
.booking-summary { flex: 1; min-width: 0; }
.booking-time  { font-size: 14px; font-weight: 700; }
.booking-price-display { font-size: 16px; font-weight: 800; color: var(--green); margin-top: 2px; }
.booking-footer .btn { flex-shrink: 0; width: auto; padding: 14px 24px; }

.booking-success {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 24px; gap: 12px; text-align: center;
}
.booking-success.hidden { display: none; }
.success-icon { font-size: 64px; color: var(--green); }
.success-title { font-size: 22px; font-weight: 800; }
.success-sub   { font-size: 15px; color: var(--text2); margin-bottom: 8px; }

/* ── Bottom navigation ──────────────────────────────── */
/* Нижняя навигация — синяя подложка по макету ТЗ (на всех экранах, включая карту) */
.bottom-nav {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-top: 1px solid rgba(177,197,255,.14); box-shadow: 0 -6px 22px rgba(8, 20, 60, .4);
  border-radius: 22px 22px 0 0;
  z-index: 100; padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav.hidden { display: none; }
/* На карте фон body тёмный navy — чтобы под безопасной зоной не было чужой полосы */
body:has(.screen-map.active), body.on-map-screen { background: var(--bg2); }
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px 6px; background: none; border: none;
  cursor: pointer; gap: 3px; transition: color .15s;
  color: rgba(255, 255, 255, .62);
}
.nav-btn.active { color: #fff; }
.nav-icon  { font-size: 22px; line-height: 1; display: flex; }
.nav-icon svg { width: auto; height: 23px; display: block; } /* иконки Figma разного viewBox — фиксируем высоту, ширина по пропорции */
.nav-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }

/* Отступ снизу для контента (не перекрывать навигацией) */
.screen-map, .screen-my-bookings, .screen-favorites { padding-bottom: 60px; }

/* ── Общие стили списков (брони, избранное) ─────────── */
.list-header {
  padding: calc(16px + env(safe-area-inset-top)) 16px 8px; background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.list-title  { font-size: 20px; font-weight: 800; }
.list-body   { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.list-loader { padding: 32px; text-align: center; color: var(--text2); }
.list-empty  { padding: 48px 16px; text-align: center; color: var(--text2); font-size: 15px; line-height: 1.6; }

/* ── Карточки броней ────────────────────────────────── */
.booking-card {
  background: var(--bg2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.booking-card-top { display: flex; justify-content: space-between; align-items: center; }
.booking-card-date { font-size: 15px; font-weight: 700; }
.booking-card-obj  { font-size: 13px; color: var(--text2); }
.booking-card-amount { font-size: 16px; font-weight: 800; color: var(--green); }
.booking-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.status-pending  { background: var(--orange-lt); color: var(--orange); }
.status-paid     { background: var(--green-lt); color: var(--green); }
.status-cancelled{ background: var(--red-lt); color: var(--red); }
.btn-sm { padding: 10px 16px; font-size: 14px; margin-top: 4px; }

/* ── Карточки избранного ────────────────────────────── */
.fav-card {
  display: flex; gap: 12px; background: var(--bg2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; cursor: pointer; align-items: center;
  position: relative;
}
.fav-photo { width: 72px; height: 72px; object-fit: cover; flex-shrink: 0; }
.fav-photo-empty {
  width: 72px; height: 72px; display: flex; align-items: center;
  justify-content: center; font-size: 28px; background: var(--bg); flex-shrink: 0;
}
.fav-info  { flex: 1; padding: 10px 0; min-width: 0; }
.fav-name  { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-addr  { font-size: 12px; color: var(--text2); margin-top: 2px; }
.fav-price { font-size: 13px; font-weight: 600; color: var(--green); margin-top: 4px; }
.fav-remove {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 18px; color: var(--text2);
  cursor: pointer; padding: 4px;
}

/* ── Select Role (макет «ВЫБЕРИ РОЛЬ», Reg-2) ────────── */
.screen-select-role {
  flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--grad-screen); background-attachment: local; overflow-y: auto;
}
.role-wrap { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }

.role-head { display: flex; flex-direction: column; gap: 8px; }
.role-brand { font-size: 15px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.role-brand .logo-ds { color: var(--blue-lt); }
.role-brand .logo-sport { color: var(--text); }
.role-step { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--text2); }
.role-progress { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.role-progress span { display: block; height: 100%; border-radius: 4px; background: var(--grad-card); }
.role-title { font-size: 38px; font-weight: 800; line-height: 1.02; letter-spacing: -.01em; margin: 2px 0 6px; text-wrap: balance; }
.role-title span { color: var(--blue-lt); }

.role-cards { display: flex; flex-direction: column; gap: 12px; }
.role-card  {
  position: relative; display: block; padding: 0; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg2); cursor: pointer; text-align: left; transition: border-color .15s, transform .12s;
  min-height: 180px;
}
.role-card:active { transform: scale(.995); }
.role-card__photo {
  position: absolute; inset: 0; z-index: 0;
  background: var(--grad-card); background-size: cover; background-position: center top;
}
.role-card__photo[data-role-photo="client"]  { background-image: url("../img/role-athlete.png"); }
.role-card__photo[data-role-photo="trainer"] { background-image: url("../img/role-trainer.png"); }
/* Затемнение поверх фото для читаемости текста */
.role-card__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,16,.15) 0%, rgba(10,11,16,.82) 78%);
}
.role-card__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 16px; min-height: 180px; justify-content: flex-end;
}
.role-badge {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; border: none; padding: 4px 11px; border-radius: 999px;
  color: var(--text); background: rgba(10,110,255,.28);
}
/* Разные бейджи как в макете: Клиент — светлый, Специалист — синий */
.role-card[data-role="client"]  .role-badge { background: #E8ECFF; color: var(--blue); }
.role-card[data-role="trainer"] .role-badge { background: var(--blue-lt); color: #fff; }
.role-name  { font-size: 20px; font-weight: 800; letter-spacing: .01em; color: var(--text); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.role-desc  { font-size: 13px; line-height: 1.35; color: var(--text2); max-width: 30ch; }

/* Состояние выбора */
.role-card.active { border-color: var(--blue-lt); }
.role-check {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--blue-lt); color: #fff; font-size: 14px; font-weight: 900;
}
.role-card.active .role-check { display: grid; }

.role-hint { font-size: 13px; color: var(--text2); text-align: center; margin: 2px 0 0; }
.role-next {
  width: 100%; padding: 15px; border: 2px solid var(--blue-lt); border-radius: var(--radius);
  background: rgba(10,110,255,.10); color: #fff; font-size: 16px; font-weight: 800;
  cursor: pointer; transition: background .15s, opacity .15s;
}
.role-next:hover:not(:disabled) { background: rgba(10,110,255,.20); }
.role-next:disabled { opacity: .45; cursor: default; }

/* ── Формы тренера (общие; раньше стили жили только в trainer.profile) ─── */
/* Выносим в общий css, чтобы поля были в теме и на отдельных страницах
   (trainer-pricing грузился без стилей → белые инпуты). Добавлен select. */
.tp-form { padding: 16px; max-width: 480px; margin: 0 auto; }
.tp-row  { margin-bottom: 14px; }
.tp-row label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 5px; }
.tp-row input, .tp-row textarea, .tp-row select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; background: var(--bg2); color: var(--text);
  -webkit-appearance: none; appearance: none; font-family: inherit;
}
.tp-row input:focus, .tp-row textarea:focus, .tp-row select:focus {
  outline: none; border-color: var(--blue-lt);
}
.tp-row textarea { min-height: 90px; resize: vertical; }
/* Стрелка для select (нативная убрана appearance:none) */
.tp-row select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C2C6D8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.tp-row select option { background: var(--bg2); color: var(--text); }

/* ── Profile ────────────────────────────────────────── */
.screen-profile { flex-direction: column; background: var(--grad-screen); background-attachment: local; padding-bottom: 60px; }
.profile-body   { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
/* Синий герой профиля + цветные карточки-метрики (макет Profile.pdf) */
.profile-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  background: transparent;
  margin: 0 0 2px; padding: 8px 16px 14px;
}
.profile-hero .profile-avatar { width: 90px; height: 90px; border: 3px solid rgba(255,255,255,.3); }
.profile-hero .profile-name { color: #fff; font-size: 22px; }
.profile-hero .profile-role-sub { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.profile-hero .profile-phone { color: rgba(255,255,255,.72); }
.profile-hero .profile-edit-link { color: rgba(255,255,255,.88); }
.profile-hero .profile-name-edit { background: rgba(255,255,255,.16); color: #fff; }
.profile-hero .profile-name-edit svg { color: #fff; }
.cl-metrics { display: flex; gap: 12px; }
.cl-mcard { flex: 1; display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,110,255,.30), rgba(0,65,158,.30)); border: 1px solid rgba(177,197,255,.12); }
.cl-mic { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); }
.cl-mic svg { width: 26px; height: auto; } /* гантель (25×25) и люди (30×15) — фикс ширины, высота по пропорции */
.cl-mcard { padding: 16px 16px; }
.cl-mic { width: 30px; height: 30px; flex: 0 0 30px; }
.cl-mval { color: #fff; font-size: 30px; font-weight: 800; line-height: 1; }
.cl-mlbl { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.profile-card   {
  display: flex; gap: 16px; align-items: center;
  background: var(--bg2); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.profile-avatar {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; flex-shrink: 0;
  overflow: hidden; cursor: pointer;
  transition: opacity .2s;
}
.profile-avatar-char { line-height: 1; }
.profile-avatar-sil  { width: 62%; height: 62%; display: block; color: #cbd6e6; }
.profile-avatar-img  { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Оверлей «Сменить» — в покое скрыт, всплывает при наведении/фокусе.
   На телефоне тап по аватару и так открывает выбор файла. */
.profile-avatar-ov {
  position: absolute; inset: 0;
  background: rgba(6,10,20,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  opacity: 0; transition: opacity .18s ease;
}
.profile-avatar-ov svg  { width: 20px; height: 20px; color: #fff; }
.profile-avatar-ov span { font-size: 8.5px; font-weight: 700; letter-spacing: .03em; color: #eaf0fb; }
.profile-avatar:hover .profile-avatar-ov,
.profile-avatar:focus-within .profile-avatar-ov { opacity: 1; }
.profile-avatar.is-loading { opacity: .5; pointer-events: none; }
.profile-photo-err {
  color: var(--red); font-size: 13px; margin: 8px 4px 0;
}
.profile-name  { font-size: 18px; font-weight: 700; }
.profile-phone { font-size: 14px; color: var(--text2); margin-top: 2px; }
/* Редактирование имени */
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name-edit { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: none;
  background: rgba(255,255,255,.08); color: var(--text2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.profile-name-edit svg { width: 15px; height: 15px; }
.profile-name-edit:active { background: rgba(255,255,255,.16); }
.profile-name-box { display: flex; gap: 8px; align-items: center; }
.profile-name-box.hidden, .profile-name-row.hidden { display: none; }
.profile-name-input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; outline: none; }
.profile-name-save { flex-shrink: 0; padding: 8px 16px; border-radius: 10px; border: none;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.profile-name-save:disabled { opacity: .5; }
/* Бейдж камеры на аватаре — сразу понятно, что фото можно сменить */
.profile-avatar { position: relative; }
.profile-avatar-cam {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg2);
}
.profile-avatar-cam svg { width: 13px; height: 13px; }
/* Понятные текст-кнопки редактирования вместо непонятного карандаша */
.profile-edit-links { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.profile-edit-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer;
}
.profile-edit-link svg { width: 15px; height: 15px; }
/* Иконки в пунктах меню профиля (как в нижнем баре) */
.pmi-l { display: inline-flex; align-items: center; gap: 13px; }
.pmi-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: rgba(177,197,255,.14); display: flex; align-items: center; justify-content: center; }
.pmi-ic svg { width: auto; height: 20px; max-width: 22px; color: var(--blue-soft); }
.pmi-arr { color: var(--text2); }
.profile-role  { font-size: 12px; color: var(--primary); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.profile-section { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 14px; }
.profile-menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 16px; border: 1px solid rgba(177,197,255,.10); border-radius: 16px;
  background: rgba(40,90,200,.30); cursor: pointer; font-size: 15px;
}

/* ── Профиль: центрированный герой + секции (дизайн Profile.pdf) ── */
.profile-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 8px 0 2px;
}
.profile-hero .profile-avatar {
  width: 92px; height: 92px; font-size: 34px; margin-bottom: 8px;
  border: 3px solid var(--blue-lt);
  background: linear-gradient(160deg, #2a5fd6, #123a8f);
}
/* Синяя галочка «телефон подтверждён» в углу аватара (как в макете) */
.profile-verified {
  position: absolute; right: 2px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-lt); border: 3px solid #0d2c66;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.profile-verified svg { width: 14px; height: 14px; }
.profile-hero .profile-name { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.profile-hero .profile-name-box { justify-content: center; width: 100%; max-width: 320px; }
.profile-role-sub {
  font-size: 12.5px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .12em;
}
.profile-hero .profile-phone { margin-top: 2px; }
.profile-hero .profile-edit-links { justify-content: center; margin-top: 8px; }

/* Кнопка справа сверху: колокольчик уведомлений */
.profile-auth-btn {
  background: none; border: none; color: var(--primary); font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 6px; display: flex; align-items: center; justify-content: center;
}
.profile-auth-btn.is-bell { color: var(--text2); }
.profile-auth-btn svg { width: 22px; height: 22px; }

/* Группа секций с заголовком */
.profile-group { display: flex; flex-direction: column; gap: 14px; }
.profile-group-title {
  font-size: 21px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: .01em; padding: 8px 2px 4px;
}
.profile-menu-item .pmi-l svg { color: var(--blue-soft); }
.pmi-arr { color: var(--text2); display: inline-flex; }
.pmi-arr svg { width: 18px; height: 18px; }

/* Красная кнопка выхода внизу профиля (как в макете) */
.profile-logout {
  margin-top: 8px; width: 100%; padding: 15px; border-radius: var(--radius);
  background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .28);
  color: #ff6a6f; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.profile-logout svg { width: 19px; height: 19px; }
.profile-logout:active { background: rgba(239, 68, 68, .2); }

/* Тост */
.ds-toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  max-width: 82%; padding: 12px 18px; border-radius: 14px;
  background: rgba(20, 30, 52, .96); color: #eaf0fb; font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .1);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; text-align: center;
}
.ds-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Статистика тренера в профиле (реальные данные: рейтинг/записи/опыт) */
.trainer-stats-row {
  display: flex; gap: 10px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 12px; box-shadow: var(--shadow);
}
.tr-stat { flex: 1; text-align: center; }
.tr-stat + .tr-stat { border-left: 1px solid var(--border); }
.tr-stat-val { font-size: 22px; font-weight: 800; color: #fff; }
.tr-stat-lbl { font-size: 11px; color: var(--text2); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.tr-fill-btn {
  width: 100%; padding: 14px; border: 1px dashed rgba(90, 160, 255, .4); border-radius: var(--radius);
  background: rgba(47, 107, 255, .08); color: #5aa0ff; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* ── ИИ-заглушки (C-07…C-10) ── */
.ai-stub { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 28px; gap: 14px; max-width: 420px; margin: 0 auto; }
.ai-stub-badge { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #cddbff; background: rgba(47,107,255,.18); border: 1px solid rgba(90,160,255,.4); padding: 5px 14px; border-radius: 999px; }
.ai-stub-icon { width: 88px; height: 88px; border-radius: 26px; margin-top: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(47,107,255,.22), rgba(47,107,255,.05)); border: 1px solid var(--border); color: #5aa0ff; }
.ai-stub-icon svg { width: 42px; height: 42px; }
.ai-stub-title { font-size: 20px; font-weight: 800; }
.ai-stub-text { font-size: 14.5px; color: var(--text2); line-height: 1.6; }
.ai-stub-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.ai-stub-tags span { font-size: 13px; color: var(--text2); background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; }

/* ── Инфо-экраны: уведомления / соглашение / поддержка ── */
.info-row { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.info-row-main { flex: 1; min-width: 0; }
.info-row-t { font-size: 15px; font-weight: 700; }
.info-row-s { font-size: 13px; color: var(--text2); margin-top: 3px; line-height: 1.4; }
.info-switch { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(90,160,255,.5); background: rgba(47,107,255,.12); color: #5aa0ff; font-size: 14px; font-weight: 700; cursor: pointer; }
.info-switch:disabled { opacity: .7; }
.notif-empty { text-align: center; padding: 48px 24px; color: var(--text2); }
.notif-empty-ic { font-size: 44px; opacity: .6; }
.notif-empty-t { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 12px; }
.notif-empty-s { font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.agr-h1 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.agr-intro { font-size: 14.5px; color: var(--text2); line-height: 1.6; margin: 6px 0 8px; }
.agr-sec { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; margin-top: 10px; }
.agr-sec h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.agr-sec p { font-size: 14px; color: #c3cee6; line-height: 1.6; }
.agr-note { font-size: 12.5px; color: var(--text2); margin-top: 16px; line-height: 1.5; }
.sup-lead { font-size: 14.5px; color: var(--text2); line-height: 1.5; }
.sup-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.sup-row { display: flex; flex-direction: column; gap: 7px; }
.sup-row label { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .07em; }
.sup-form select, .sup-form textarea { width: 100%; padding: 13px 14px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); color: var(--text); font-size: 15px; outline: none; font-family: inherit; }
.sup-form textarea { resize: vertical; }
.sup-msg-status { font-size: 14px; text-align: center; }
.sup-msg-status.ok { color: #2fd18a; } .sup-msg-status.err { color: #ff6a6f; }
.sup-contacts { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text2); line-height: 1.8; }
.sup-contacts a { color: #5aa0ff; text-decoration: none; font-weight: 600; }

/* ── Абонементы (P-06) и Мои подписки (C-06) ── */
.plans-list { display: flex; flex-direction: column; gap: 10px; }
.plan-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-title { font-size: 16px; font-weight: 800; }
.plan-price { font-size: 18px; font-weight: 800; color: #2fd18a; white-space: nowrap; }
.plan-feats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.plan-feat { font-size: 12.5px; color: var(--text2); background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; }
.plan-buy { width: 100%; padding: 12px; border: none; border-radius: 13px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.plan-buy:disabled { opacity: .6; }
.sub-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-title { font-size: 16px; font-weight: 700; }
.sub-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sub-badge.sub-active { color: #9cebc6; background: rgba(47,209,138,.15); border: 1px solid rgba(47,209,138,.3); }
.sub-badge.sub-expired { color: #ffd98a; background: rgba(245,181,58,.14); border: 1px solid rgba(245,181,58,.3); }
.sub-badge.sub-cancelled { color: #ffbfc1; background: rgba(242,106,111,.15); border: 1px solid rgba(242,106,111,.3); }
.sub-meta { font-size: 13.5px; color: var(--text2); margin-top: 8px; }

/* ── Вкладки детальной (Обзор/Услуги/Отзывы, P-04) ── */
.detail-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; margin: 4px 0 14px; }
.dtab { flex: 1; padding: 10px; border: none; background: transparent; color: var(--text2); font-size: 14px; font-weight: 700; border-radius: 11px; cursor: pointer; }
.dtab.active { background: var(--primary); color: #fff; }
.dtab-panel { display: flex; flex-direction: column; gap: 12px; }
.dtab-panel.hidden { display: none; }

/* Форма отзыва (P-07) */
.review-form { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rf-title { font-size: 15px; font-weight: 700; }
.rf-stars { display: flex; gap: 4px; font-size: 30px; color: rgba(255,255,255,.2); cursor: pointer; }
.rf-stars span.on { color: #F59E0B; }
.rf-text { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); color: var(--text); font-size: 15px; outline: none; font-family: inherit; resize: vertical; }
.rf-status { font-size: 14px; text-align: center; }
.rf-status.ok { color: #2fd18a; } .rf-status.err { color: #ff6a6f; }

/* Редактирование профиля (C-02/S-03) */
.ep-form { display: flex; flex-direction: column; gap: 16px; }
.ep-row { display: flex; flex-direction: column; gap: 7px; }
.ep-row label { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .07em; }
.ep-form input, .ep-form textarea { width: 100%; padding: 13px 14px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); color: var(--text); font-size: 15px; outline: none; font-family: inherit; }
.ep-form textarea { resize: vertical; }
.ep-goals { display: flex; flex-wrap: wrap; gap: 8px; }
.ep-goals button { padding: 10px 15px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); color: var(--text2); font-size: 14px; font-weight: 600; cursor: pointer; }
.ep-goals button.on { background: rgba(47,107,255,.18); border-color: rgba(90,160,255,.5); color: #cddbff; }
.ep-status { font-size: 14px; text-align: center; }
.ep-status.ok { color: #2fd18a; } .ep-status.err { color: #ff6a6f; }

/* ── Программы тренировок (ds:program.list) ────────────── */
.program-list { display: flex; flex-direction: column; gap: 10px; }
.program-card {
  padding: 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 4px;
}
.program-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.program-name { font-size: 15px; font-weight: 700; }
.program-level {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; background: rgba(139,92,246,0.2); color: #A78BFA;
  text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.program-meta { font-size: 13px; color: var(--text2); }
.program-price { font-size: 14px; font-weight: 700; color: var(--green); margin-top: 2px; }
.program-desc { font-size: 13px; color: var(--text); }

/* ── Отзывы ─────────────────────────────────────────────── */
.reviews-summary { font-size: 12px; font-weight: 700; color: #F5B301; margin-left: 6px; letter-spacing: 0; text-transform: none; }
.reviews-list { display: flex; flex-direction: column; gap: 8px; }
.review-card {
  padding: 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 4px;
}
.review-head { display: flex; align-items: center; gap: 6px; }
.review-author { font-size: 14px; font-weight: 700; }
.review-verified {
  font-size: 11px; font-weight: 700; color: var(--green);
  background: rgba(34,197,94,0.15); border-radius: 8px; padding: 1px 5px;
}
.review-date { font-size: 12px; color: var(--text2); margin-left: auto; }
.review-stars { font-size: 13px; color: #F5B301; letter-spacing: 1px; }
.review-text { font-size: 13px; line-height: 1.5; color: var(--text); }

/* ── Расписание тренера ─────────────────────────────────── */
.schedule-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sched-stat {
  font-size: 13px; color: var(--text2);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px 10px;
}
.sched-stat b { color: var(--text); font-weight: 700; }
.sched-stat--booked b { color: var(--text2); }
.sched-day-count { font-size: 11px; font-weight: 600; color: var(--text2); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.tp-links { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pricing-hint { font-size: 12px; color: var(--text2); margin: -4px 0 12px; line-height: 1.5; }
.sched-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-slots .slot-btn { min-width: 84px; flex: 0 0 auto; }
.schedule-empty { padding: 24px 12px; text-align: center; color: var(--text2); font-size: 14px; line-height: 1.6; }

/* ── Уличная площадка ───────────────────────────────────── */
.outdoor-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.outdoor-route-link { font-size: 14px; color: var(--primary); text-decoration: none; font-weight: 600; }
.profile-menu-item:active { background: var(--bg); }

/* ── Десктоп: приложение в рамке телефона (прототип, 430px) ──
   Должно идти в конце файла — иначе базовые .bottom-nav { left:0 } перебьют.
   Порог 700px: на iOS PWA медиа 500px ловил телефоны и раздувал layout до 430
   → вся страница масштабировалась, бар «висел» над низом (ih=932 при sh=852). */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  body { display: flex; justify-content: center; background: #05060a; }
  #app {
    width: 430px; max-width: 100%;
    box-shadow: 0 0 60px rgba(0,0,0,.6);
  }
  .bottom-nav {
    left: 50%; right: auto;
    width: 430px; max-width: 100%;
    transform: translateX(-50%);
  }
}