/* Оформление мини-приложения Vibe.
 *
 * Принципы:
 *   - тёмная тема: карточка с фото светится на глубоком фоне;
 *   - полноэкранная колода, свайп за палец, крупные штампы;
 *   - безопасные зоны телефона: «чёлка» сверху, жесты снизу;
 *   - крупные кнопки под палец, минимум мелкого текста.
 */

:root {
  --bg: #080410;
  --bg-deep: #05020a;
  --bg-soft: #10071c;
  --card: #160c24;
  --surface: #1d102e;
  --surface-2: #24163b;
  --text: #f4efff;
  --text-dim: #b8a8d4;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --accent: #ff4d8d;
  --accent-2: #a855f7;
  --accent-glow: rgba(168, 85, 247, .45);
  --like: #22ffa3;
  --nope: #ff5c8a;
  --good: #35e08b;
  --bad: #ff5c8a;
  --super: #ffc247;
  --bubble-mine: linear-gradient(135deg, #ff4d8d, #b13cff);
  --bubble-mine-text: #ffffff;
  --bubble-theirs: #241a36;
  --danger: #ff6b6b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 15% -10%, rgba(168, 85, 247, .30), transparent 62%),
    radial-gradient(900px 620px at 105% 8%, rgba(255, 77, 141, .22), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(59, 130, 246, .10), transparent 65%),
    var(--bg-deep);
  color: var(--text);
  font: 15px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior: none;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
}

/* Верхняя панель. Отступы сверху — под «чёлку», иначе заголовок
   уезжает под статус-бар. */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  background: rgba(11, 7, 19, .55);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  z-index: 10;
}

.topbar .titles { flex: 1; min-width: 0; }

.topbar h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.subtitle {
  color: var(--text-dim);
  font-size: 12px;
  min-height: 14px;
}

.round-btn,
.back,
.reload {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 2px;
}
.back { font-size: 30px; }
.reload { font-size: 19px; }
.round-btn:active { background: rgba(255, 255, 255, .14); }

/* Экран занимает всё место между панелью и вкладками. */
.screen {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px);
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.screen.chat-open {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.loader, .empty, .error {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-dim);
}
.empty .big { font-size: 52px; margin-bottom: 6px; }
.empty h2 { margin: 0 0 8px; font-size: 20px; color: var(--text); }
.empty p { margin: 0 auto 18px; max-width: 300px; }
.empty.gate { padding-top: 22vh; }
.error { color: var(--danger); }

/* Нижняя навигация — плавающая тёмная пилюля. v157: иконки заливные,
   в градиенте логотипа Vibe (розовый -> фиолетовый), как у конкурентов.
   Неактивные приглушены, активная — яркая со свечением. */
.tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 0;
  margin: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
  padding: 5px 4px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(16, 9, 26, .9);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

.tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 10px;
  padding: 6px 0 4px;
  border-radius: 16px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.tab-icon-wrap {
  position: relative;
  display: block;
  line-height: 0;
}

.tab-icon {
  display: block;
  width: 21px;
  height: 21px;
  opacity: .5;
  filter: saturate(.3) brightness(.9);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.tab-icon svg {
  display: block;
  width: 21px;
  height: 21px;
}

.tab-label {
  letter-spacing: .1px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab.active {
  background: none;
  box-shadow: none;
}
.tab.active .tab-icon {
  opacity: 1;
  filter: saturate(1) brightness(1.05) drop-shadow(0 0 7px rgba(255, 77, 141, .55));
  transform: translateY(-1px);
}
.tab.active .tab-label { color: #fff; font-weight: 700; }

.tab-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff4d8d, #a63cff);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  border: 1.5px solid rgba(16, 9, 26, .95);
  pointer-events: none;
}
.tab-badge[hidden] { display: none; }

/* ------------------------------------------------------------------ лента */

.deck-mode .topbar { display: none; }
.deck-mode .screen {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.deck-screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 0;
}

.deck-top {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 7;
  pointer-events: none;
}
.brand-pill {
  pointer-events: auto;
  padding: 6px 13px;
  border-radius: 20px;
  background: rgba(10, 6, 17, .5);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #fff;
}
.deck-top .icon-btn {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(10, 6, 17, .45);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* Колода растягивается на всё свободное место — без магических
   «100dvh - 228px»: раньше из-за этой формулы кнопки уезжали под навигацию. */
.deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

.card {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .45);
  transform-origin: 50% 100%;
  will-change: transform;
  touch-action: pan-y;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .04) 0%, transparent 30%),
    linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 100%);
}
.card.second { transform: translateY(11px) scale(.962); z-index: 2; }
.card.third { transform: translateY(22px) scale(.924); z-index: 1; }
.card.top { z-index: 3; }
.card.flying { pointer-events: none; }
.card.will-like { box-shadow: 0 0 0 4px rgba(34, 255, 163, .85), 0 22px 60px rgba(0, 0, 0, .55); }
.card.will-nope { box-shadow: 0 0 0 4px rgba(255, 92, 138, .85), 0 22px 60px rgba(0, 0, 0, .55); }

.card.will-like::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(34, 255, 163, .10);
  pointer-events: none;
}
.card.will-nope::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 92, 138, .10);
  pointer-events: none;
}

.card-img, .card .ph-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 84px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ff4d8d);
}
/* Аватар и фото анкеты — не на весь экран, а в своём круге/квадрате. */
.avatar.ph-fallback,
.me-photo.ph-fallback {
  position: static;
  width: 100%;
  height: 100%;
  background: var(--surface-2);
  color: var(--accent);
}
.avatar.ph-fallback { font-size: 20px; }
.me-photo.ph-fallback { font-size: 34px; }

.card-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(5, 3, 10, .38) 0%, transparent 24%),
    linear-gradient(to top, rgba(5, 3, 10, .96) 0%, rgba(5, 3, 10, .72) 26%,
                    rgba(5, 3, 10, .12) 58%, transparent 100%);
  pointer-events: none;
}

.card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 20px 26px;
  color: #fff;
}

/* Карма в карточке: спокойная строка над именем, без абсолютного
   позиционирования — не перекрывает штампы и не ломает колоду. */
.card-karma {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(8, 5, 14, .45);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .92);
}
.karma-star {
  color: #ff7ab2;
  font-size: 13px;
  text-shadow: 0 0 8px rgba(255, 77, 141, .6);
}

.card-name {
  font-size: 31px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.6px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.card-city {
  font-size: 14px;
  opacity: .92;
  margin-top: 5px;
}
.card-about {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  text-shadow: none;
}

.card-menu {
  position: absolute;
  top: 62px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 6, 17, .42);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 7px;
  cursor: pointer;
  z-index: 5;
}

/* Штампы. Крупные, как у конкурента: «ДА» зелёный, «НЕТ» розовый. */
.stamp {
  position: absolute;
  top: 14%;
  padding: 4px 13px 6px;
  border: 5px solid currentColor;
  border-radius: 20px;
  background: rgba(8, 5, 14, .30);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity .12s linear;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.45));
}
.stamp b {
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 900;
  letter-spacing: 2.5px;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}
.stamp.like {
  left: 18px;
  color: #22ffa3;
  transform: rotate(-14deg);
  text-shadow: 0 0 30px rgba(34, 255, 163, .75);
}
.stamp.nope {
  right: 18px;
  color: #ff5c8a;
  transform: rotate(14deg);
  text-shadow: 0 0 30px rgba(255, 92, 138, .75);
}

.deck-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  /* T-164: ряд опущен максимально вниз — над навигацией остаётся
     12 px, карточка за счёт этого только растёт. */
  padding: 10px 0 2px;
  margin-bottom: 0;
}

/* Tinder-стиль (T-161/T-164): две голые иконки — крестик и сердце.
   Тёмный «ореол» вокруг них нужен, чтобы иконки читались и на фото,
   и на тёмной полосе под карточкой: без ореола они там просто теряются. */
.act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.act svg {
  display: block;
  width: 30px;
  height: 30px;
  transition: transform .12s ease;
}
.act:active svg { transform: scale(.86); }

.act.nope { color: #ffffff; }
.act.nope svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .95))
          drop-shadow(0 2px 8px rgba(0, 0, 0, .85));
}

.act.like svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .95))
          drop-shadow(0 3px 12px rgba(255, 77, 141, .85));
}

/* Кнопка «📷 N» на карточке: открыть все фото человека (T-159).
   Слева под логотипом Vibe — там же, где «⋯» справа, ничего не закрывает. */
.card-photos {
  position: absolute;
  top: 62px;
  left: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(8, 5, 14, .5);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.card-photos:active { transform: scale(.94); }

/* Полноэкранный просмотр фото: оверлей поверх всего, колоду не трогает. */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4, 2, 8, .96);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-viewer .pv-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.pv-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  z-index: 3;
}
.pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.pv-prev { left: 10px; }
.pv-next { right: 10px; }
.pv-dots {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 46px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}
.pv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.pv-dot.active { background: #ff4d8d; width: 14px; border-radius: 5px; }
.pv-count {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
}

.deck-empty {
  margin: auto;
  padding: 40px 26px;
  text-align: center;
  color: var(--text-dim);
}
.deck-empty .big { font-size: 58px; }
.deck-empty h2 { color: var(--text); margin: 8px 0 8px; font-size: 22px; }
.deck-empty p { max-width: 300px; margin: 0 auto 20px; }

/* ------------------------------------------------------------------- чаты */

.chat-list { padding: 6px 10px 0; }

.chat {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 6px;
  border-radius: 18px;
  background: rgba(30, 20, 48, .58);
  border: 1px solid var(--line);
  cursor: pointer;
}
.chat:active { background: var(--surface-2); }

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  flex: 0 0 50px;
  object-fit: cover;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  font-weight: 600;
}

.chat-body { flex: 1; min-width: 0; }

.chat-name {
  font-weight: 700;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge { font-size: 13px; }

.chat-preview {
  color: var(--text-dim);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-time { color: var(--text-dim); font-size: 11px; flex: 0 0 auto; align-self: flex-start; margin-top: 3px; }

.closed-tag {
  font-size: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 1px 6px;
}

.status-online,
.status-recent {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 6px;
  letter-spacing: 0.2px;
}
.status-online {
  color: #22ffa3;
  background: rgba(34, 255, 163, .14);
  border: 1px solid rgba(34, 255, 163, .35);
}
.status-recent {
  color: var(--text-dim);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
}

/* Карма собеседника в списке чатов: маленькая строка рядом с именем. */
.chat-karma {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #ff9ec7;
  letter-spacing: .2px;
}

/* Мои лайки (T-178): список симпатий в кабинете. Компактнее чата,
   потому что это просмотр, а не переписка. */
.seg button b {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .16);
  font-size: 11px;
  font-weight: 800;
}

.like-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.like-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(30, 20, 48, .58);
}
/* Звёздный (супер)лайк помечен рамкой: он виден и так, и в ленте. */
.like-row.sup { border-color: rgba(255, 215, 110, .45); }

.like-photo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

.like-info { flex: 1; min-width: 0; }

.like-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.like-meta {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.like-go {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.like-go:active { transform: scale(.9); }
.like-go:disabled { opacity: .45; cursor: default; }

.like-wait {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .2px;
}

/* Обращения в поддержку (T-159): карточка обращения с цепочкой сообщений. */
.report-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 10px;
}
.rep-head {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rep-thread {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  max-height: 220px;
  overflow-y: auto;
}
.rep-thread.modal-thread { max-height: 40vh; }
.rep-msg {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 92%;
  white-space: pre-wrap;
  word-break: break-word;
}
.rep-msg.theirs {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.rep-msg.mine {
  align-self: flex-end;
  background: rgba(255, 77, 141, .14);
  border: 1px solid rgba(255, 77, 141, .3);
}
.btn.small {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 12px;
}

.msgs {
  padding: 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.msgs .empty.small { padding: 32px 24px; }

.msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 18px;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.msg.mine {
  align-self: flex-end;
  background: var(--bubble-mine);
  color: var(--bubble-mine-text);
  border-bottom-right-radius: 5px;
}
.msg.theirs {
  align-self: flex-start;
  background: var(--bubble-theirs);
  border-bottom-left-radius: 5px;
}
.msg.photo { color: var(--text-dim); font-style: italic; }

.day {
  align-self: center;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .06);
  padding: 3px 10px;
  border-radius: 10px;
  margin: 8px 0;
}

.person-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(19, 12, 32, .6);
  flex: 0 0 auto;
}
.person-head .meta { color: var(--text-dim); font-size: 13px; margin-top: 2px; }

.composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: rgba(19, 12, 32, .9);
  flex: 0 0 auto;
}
.composer input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 22px;
  padding: 11px 15px;
  font: inherit;
  outline: none;
}
.composer input:focus { border-color: var(--accent); }
.send {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff4d8d, #a63cff);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.send:disabled { opacity: .5; }

.moderation-note {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 2px 12px calc(env(safe-area-inset-bottom) + 8px);
  background: rgba(19, 12, 32, .9);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------- моя анкета */

.me-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 6px 12px 14px;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(300px 160px at 100% 0%, rgba(255, 77, 141, .28), transparent 70%),
    linear-gradient(135deg, rgba(124, 58, 237, .28), rgba(30, 20, 48, .85));
  border: 1px solid var(--line);
}
.me-photo {
  width: 84px; height: 84px;
  flex: 0 0 84px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--accent);
  font-weight: 700;
  border: 1px solid var(--line-strong);
}
.me-photo img { width: 100%; height: 100%; object-fit: cover; }
.me-title { min-width: 0; }
.me-name { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.me-title .meta { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.pill {
  display: inline-block;
  margin-top: 7px;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg-soft);
  color: var(--text-dim);
}
.pill.on { background: rgba(53, 224, 139, .14); color: #74e6ad; }
.pill.off { background: rgba(255, 194, 71, .14); color: #ffcf7a; }

.block {
  padding: 16px;
  border-top: 8px solid rgba(255, 255, 255, .035);
}
.block-title { font-weight: 800; font-size: 15px; margin-bottom: 11px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid transparent;
  cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.main { border-color: var(--accent); }
.thumb-tag {
  position: absolute;
  left: 5px; bottom: 5px;
  font-size: 10px;
  background: rgba(0, 0, 0, .66);
  color: #fff;
  border-radius: 8px;
  padding: 2px 7px;
}
.thumb-del {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.thumb.add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px dashed var(--line-strong);
  color: var(--text-dim);
  font-size: 26px;
}
.thumb.add span { font-size: 11px; }

.field { display: block; margin-bottom: 12px; }
.field span {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 13px;
  font: inherit;
  outline: none;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }

.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary {
  background: linear-gradient(135deg, #ff4d8d, #a63cff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 77, 141, .25);
}
.btn.danger { color: var(--danger); border-color: rgba(255, 107, 107, .5); background: transparent; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; }

.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}
.switch-row > span:first-child { flex: 1; }
.switch-row input { display: none; }
.switch {
  width: 48px; height: 28px;
  flex: 0 0 48px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  position: relative;
  transition: background .18s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .18s ease;
}
.switch-row input:checked + .switch {
  background: linear-gradient(135deg, #ff4d8d, #a63cff);
  border-color: transparent;
}
.switch-row input:checked + .switch::after { transform: translateX(20px); }

.hintline, .note {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 8px;
}
.note {
  margin: 0 12px 10px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
}

/* Карма в личном кабинете */
.karma-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.karma-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 77, 141, .18), rgba(166, 60, 255, .18));
  border: 1px solid rgba(255, 122, 178, .35);
  white-space: nowrap;
}
.karma-score b { font-size: 24px; line-height: 1; }
.karma-score small { color: var(--text-dim); font-size: 12px; }
.karma-note { font-size: 13px; color: var(--text-dim); line-height: 1.35; }

/* Кого ищу: три кнопки + возраст в ряд */
.seg {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.seg button {
  flex: 1;
  padding: 9px 4px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.seg button.active {
  background: linear-gradient(135deg, #ff4d8d, #a63cff);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 77, 141, .28);
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats {
  display: flex;
  gap: 8px;
  text-align: center;
}.stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 11px 4px;
}
.stat b { display: block; font-size: 20px; }
.stat span { font-size: 10px; color: var(--text-dim); }

.footer-note {
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 22px);
  color: var(--text-dim);
  font-size: 12px;
}

/* ------------------------------------------------------------- регистрация */

.register-mode .topbar,
.register-mode .tabs { display: none; }
.register-mode .screen {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.reg {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.reg-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 22px 18px;
  -webkit-overflow-scrolling: touch;
}
.consent-scroll { padding-top: calc(env(safe-area-inset-top) + 18px); }

.reg-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 12px;
}
.reg-back-spacer { width: 38px; flex: 0 0 38px; }
.reg-progress {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.reg-progress span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #ff4d8d, #a63cff);
  transition: width .3s ease;
}
.reg-step-label {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 28px;
  text-align: right;
}

.reg h2 {
  margin: 8px 0 8px;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.6px;
}
.reg-sub {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 20px;
}
.reg-fine {
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.45;
  margin: 14px 0 0;
}

.brand {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff9fc2, #c9a7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.consent-art {
  font-size: 48px;
  line-height: 1;
  margin: 10px 0 4px;
}

.rule-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.rule-list > div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 15px;
  background: rgba(30, 20, 48, .64);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-dim);
}
.rule-list b { flex: 0 0 auto; font-size: 16px; color: var(--text); min-width: 26px; }

.doc-link {
  width: 100%;
  padding: 13px 14px;
  border-radius: 15px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.reg-footer {
  flex: 0 0 auto;
  padding: 12px 22px calc(env(safe-area-inset-bottom) + 14px);
  background: linear-gradient(to top, rgba(8, 5, 15, .98) 62%, rgba(8, 5, 15, 0));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reg-cta {
  width: 100%;
  min-height: 54px;
  border-radius: 17px;
  border: none;
  background: linear-gradient(135deg, #ff4d8d, #a63cff);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(255, 77, 141, .3);
}
.reg-cta:disabled { opacity: .45; box-shadow: none; }
.reg-cta:active:not(:disabled) { transform: scale(.985); }
.reg-skip {
  width: 100%;
  min-height: 42px;
  border: none;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.reg-field { display: block; margin: 4px 0 10px; }
.reg-field > span {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.reg-field input, .reg-field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: rgba(30, 20, 48, .8);
  color: var(--text);
  border-radius: 16px;
  padding: 14px 15px;
  font: inherit;
  font-size: 16px;
  outline: none;
  resize: none;
}
.reg-field input:focus, .reg-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 141, .14);
}
.reg-field .counter {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 5px;
}

.suggest {
  border: 1px dashed var(--line-strong);
  background: none;
  color: var(--text);
  border-radius: 12px;
  padding: 9px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.date-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 16px;
}
.select { flex: 0 0 28%; display: flex; flex-direction: column; gap: 5px; }
.select.month { flex: 1 1 auto; }
.select > span { font-size: 11px; color: var(--text-dim); padding-left: 2px; }
.select select {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: rgba(30, 20, 48, .8);
  color: var(--text);
  border-radius: 14px;
  padding: 13px 10px;
  font: inherit;
  font-size: 15px;
  outline: none;
  appearance: none;
}
.select select:focus { border-color: var(--accent); }

.age-hint {
  padding: 13px 15px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 14px;
}
.age-hint.good { color: #8ff0bd; border-color: rgba(53, 224, 139, .35); background: rgba(53, 224, 139, .08); }
.age-hint.bad { color: #ff9db8; border-color: rgba(255, 92, 138, .35); background: rgba(255, 92, 138, .08); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 16px; }
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 22px 10px;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: rgba(30, 20, 48, .66);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.choice-emoji { font-size: 40px; line-height: 1.1; }
.choice b { font-size: 16px; }
.choice small { color: var(--text-dim); font-size: 11px; text-align: center; }
.choice.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(255, 77, 141, .12);
}

.city-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.city-chip {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border-radius: 20px;
  padding: 8px 13px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.city-chip:active { background: var(--accent-soft); border-color: var(--accent); }

.photo-pick {
  display: block;
  margin: 8px 0 4px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(30, 20, 48, .66);
  border: 2px dashed var(--line-strong);
}
.photo-preview {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 46vh;
  object-fit: cover;
}
.photo-preview.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 48px;
  border: none;
}
.photo-preview.empty b { color: var(--text); font-size: 16px; }
.photo-preview.empty small { font-size: 11px; }

.reg-error {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 92, 138, .1);
  border: 1px solid rgba(255, 92, 138, .34);
  color: #ffadc5;
  font-size: 13px;
  line-height: 1.4;
}

/* --------------------------------------------------------- модалка и тост */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 2, 8, .68);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}
.modal[hidden] { display: none; }

.modal-box {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 20px;
  width: 100%;
  max-width: 460px;
  max-height: 84vh;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.modal-box h2 { margin: 0 0 10px; font-size: 20px; }
.modal-body p { margin: 0 0 10px; }
.modal-body .muted { color: var(--text-dim); }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.modal-actions .btn { width: 100%; }
.doc-text { font-size: 13px; line-height: 1.55; color: #d9d1e8; }
.doc-text b { color: #fff; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(24, 16, 37, .97);
  border: 1px solid var(--line-strong);
  color: #fff;
  font-size: 13px;
  padding: 11px 17px;
  border-radius: 15px;
  z-index: 120;
  max-width: 88vw;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.toast[hidden] { display: none; }

@media (max-width: 360px) {
  .card-name { font-size: 27px; }
  .stamp b { font-size: 28px; }
  .deck-actions { gap: 40px; }
}

/* «Мои лайки»: строка симпатии кликабельна — открывает карточку человека. */
.like-open {
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.like-row:active {
  background: rgba(255, 255, 255, .07);
}

/* Карточка пользователя, открываемая из «Моих лайков» (T-180). */
.profile-view {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}
.profile-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 36px;
  padding-bottom: 3px;
}
.profile-close:active { transform: scale(.94); }
.profile-title { font-size: 17px; font-weight: 800; color: #fff; }
.profile-photo {
  position: relative;
  width: 170px;
  height: 210px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
  align-self: center;
  flex: 0 0 auto;
}
.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-photo .ph-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--accent);
}
.profile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-karma {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(8, 5, 14, .45);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  width: -moz-fit-content;
  width: fit-content;
}
.profile-name {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.4px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.profile-city { font-size: 14px; opacity: .92; }
.profile-about {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.profile-act {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.profile-act:active { transform: scale(.97); }
.profile-wait {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-meta { color: var(--text-dim); font-size: 12px; margin-top: 4px; }


/* ============================================================ T-181 РЕДИЗАЙН
   Фирменная дизайн-система VIBE (палитра и компоненты из макета владельца):
   bg #170f20, surface #211429, card #291631, pink #f45d91, purple #b76ae2,
   lav #c7a0e8, muted #c7b9ce, green #55d6a0; шрифт Manrope.
   Всё ниже — переопределение прежних правил (идёт последним, поэтому
   выигрывает при равной специфичности). Разметка и логика не меняются. */

:root {
  --bg: #fffafd;
  --bg-deep: #f5f2f6;
  --bg-soft: #f9f3f8;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5eff7;
  --text: #292638;
  --text-dim: #6f6578;
  --line: #ede3ee;
  --line-strong: #ded0e2;
  --accent: #b82870;
  --accent-2: #7955c1;
  --accent-glow: rgba(183, 106, 226, .45);
  --like: #55d6a0;
  --nope: #f45d91;
  --good: #18764f;
  --bad: #a82d55;
  --super: #ffc247;
  --bubble-mine: linear-gradient(135deg, #b82870, #8847ad);
  --bubble-mine-text: #ffffff;
  --bubble-theirs: #f0e9fa;
  --danger: #a82d55;
}

body {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(180, 87, 157, .14), transparent 35%),
    radial-gradient(ellipse at 90% 10%, rgba(244, 93, 145, .10), transparent 40%),
    var(--bg-deep);
  color: var(--text);
  font-family: Manrope, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* ---- шапка ---- */
.topbar {
  background: rgba(23, 15, 32, .93);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-weight: 800; letter-spacing: -.3px; }
.subtitle { color: var(--text-dim); }
.round-btn, .back, .reload {
  border: 1px solid var(--line);
  background: var(--surface);
  color: #fff;
}
.round-btn:active { background: var(--surface-2); }

/* ---- нижняя навигация ---- */
.tabs {
  background: rgba(27, 17, 34, .95);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.tab { color: #9c8ca5; }
.tab.active { color: var(--accent); }
.tab.active .tab-label { color: var(--accent); font-weight: 700; }
.tab-label { font-weight: 700; }
.tab-badge {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* ---- колода / карточка ---- */
.card {
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.card-info {
  padding: 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(16, 8, 18, .55) 45%, rgba(16, 8, 18, .95) 100%);
}
.card-karma {
  background: rgba(26, 16, 42, .66);
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 25px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
}
.karma-star { color: var(--accent); }
.card-name { font-size: 27px; font-weight: 800; }
.card-city { font-size: 12px; }
.card-about { font-size: 12px; line-height: 1.5; }
.chips { gap: 7px; }
.chip {
  font-size: 10px;
  background: rgba(183, 106, 226, .22);
  border: 1px solid rgba(209, 155, 239, .19);
  border-radius: 25px;
  padding: 7px 10px;
  color: var(--text);
}

/* Кнопки действий — круглые, как в макете: пропуск/возврат тёмные, лайк розовый. */
.deck-actions { gap: 18px; }
.act {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: #382642;
  display: flex;
  align-items: center;
  justify-content: center;
}
.act svg { width: 24px; height: 24px; }
.act.nope { color: #fff; }
.act.nope svg { width: 24px; height: 24px; filter: none; }
.act.like {
  width: 59px;
  height: 59px;
  background: linear-gradient(135deg, var(--accent), #d83e85);
  box-shadow: 0 8px 24px rgba(244, 93, 145, .28);
}
.act.like svg { width: 30px; height: 30px; filter: none; }

/* ---- чаты: список ---- */
.chat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.chat:active { background: var(--surface-2); }
.avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, #e58aab, #8554a9);
  color: #fff;
}
.chat-name { font-size: 13px; }
.chat-preview { color: var(--text-dim); font-size: 11px; }
.chat-time { color: var(--text-dim); font-size: 10px; }
.chat-karma { color: var(--accent); }
.status-online { color: var(--good); background: rgba(85, 214, 160, .14); border-color: rgba(85, 214, 160, .35); }
.status-recent { color: var(--text-dim); background: rgba(255, 255, 255, .06); border-color: var(--line); }
.closed-tag { background: var(--bg-soft); border-color: var(--line); color: var(--text-dim); }

/* ---- чаты: переписка ---- */
.person-head {
  background: rgba(23, 15, 32, .6);
  border-bottom: 1px solid var(--line);
}
.person-head .meta { color: var(--text-dim); }
.msg.mine {
  background: var(--bubble-mine);
  color: var(--bubble-mine-text);
  border-radius: 18px 18px 6px 18px;
}
.msg.theirs {
  background: var(--bubble-theirs);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
}
.day { background: rgba(255, 255, 255, .06); color: var(--text-dim); }
.composer {
  background: rgba(23, 15, 32, .92);
  border-top: 1px solid var(--line);
}
.composer input {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 25px;
  color: var(--text);
}
.emoji-btn {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  flex: 0 0 auto;
}
.send {
  background: linear-gradient(135deg, var(--accent), #d83e85);
  border-radius: 50%;
  color: #fff;
}
.quick-chips {
  display: flex;
  gap: 8px;
  padding: 6px 12px 2px;
  overflow-x: auto;
}
.quick-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.quick-chip:active { background: var(--surface-2); }
.moderation-note { color: var(--text-dim); }

/* ---- мой профиль: блоки как панели ---- */
.block, .me-hero + .note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  margin: 12px 12px;
}
.block-title { font-size: 14px; font-weight: 700; }
.me-hero {
  background: linear-gradient(120deg, #482454, #291631);
  border: 1px solid rgba(198, 130, 221, .22);
  border-radius: 20px;
}
.me-photo { border-radius: 20px; }
.pill.on { color: var(--good); background: rgba(85, 214, 160, .12); }
.pill.off { color: var(--text-dim); background: rgba(255, 255, 255, .06); }
.karma-score {
  background: linear-gradient(135deg, rgba(244, 93, 145, .18), rgba(183, 106, 226, .18));
  border: 1px solid rgba(244, 122, 178, .35);
}
.karma-note, .hintline, .note { color: var(--text-dim); }
.field input, .field textarea {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
}
.btn.primary, .btn.primary.wide {
  background: linear-gradient(135deg, var(--accent), #d83e85);
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
}
.seg { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.seg button { color: var(--text-dim); font-weight: 700; }
.seg button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.seg button b { background: rgba(255, 255, 255, .16); }
.switch-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.switch { background: var(--surface-2); border: 1px solid var(--line); }
.switch-row input:checked + .switch { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }

/* ---- мои лайки ---- */
.like-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.like-row.sup { border-color: rgba(255, 194, 71, .45); }
.like-photo { border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.like-name { font-weight: 700; }
.like-meta { color: var(--text-dim); }
.like-go {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .06);
  border-radius: 50%;
}
.like-wait { color: var(--text-dim); }

/* ---- обращения ---- */
.report-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.rep-msg.mine { background: var(--bubble-mine); }
.rep-msg.theirs { background: var(--surface-2); }
.pill.on { color: var(--good); }
.pill.off { color: var(--text-dim); }

/* ---- карточка из лайков ---- */
.profile-view { gap: 10px; }
.profile-close { background: var(--surface); border: 1px solid var(--line); color: #fff; }
.profile-photo { border-radius: 20px; background: var(--surface-2); }
.profile-karma { background: rgba(26, 16, 42, .66); border: 1px solid rgba(255, 255, 255, .21); border-radius: 25px; }
.profile-name { font-weight: 800; }
.profile-act {
  background: linear-gradient(135deg, var(--accent), #d83e85);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
}
.profile-wait { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--text-dim); }
.profile-meta { color: var(--text-dim); }

/* ---- модалка / тост ---- */
.modal-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.modal-actions .btn { border-radius: 12px; }
.toast {
  background: #402247;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 25px;
}

/* ---- просмотр фото ---- */
.photo-viewer { background: rgba(16, 11, 22, .96); }
.pv-close, .pv-nav { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }
.pv-dot.active { background: var(--accent); }

/* ---- экран взаимности (две фотографии) ---- */
.match-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244, 93, 145, .30), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(183, 106, 226, .28), transparent 55%),
    linear-gradient(160deg, #3a1740, #170f20);
  overflow: hidden;
}
.match-hearts span {
  position: absolute;
  color: rgba(244, 93, 145, .5);
  font-size: 20px;
  animation: floatHeart 4s linear infinite;
}
.match-hearts span:nth-child(1) { left: 12%; animation-delay: 0s; }
.match-hearts span:nth-child(2) { left: 30%; animation-delay: .8s; }
.match-hearts span:nth-child(3) { left: 50%; animation-delay: 1.6s; }
.match-hearts span:nth-child(4) { left: 68%; animation-delay: 2.4s; }
.match-hearts span:nth-child(5) { left: 84%; animation-delay: 3.2s; }
.match-hearts span:nth-child(6) { left: 40%; animation-delay: 1.2s; }
@keyframes floatHeart {
  0% { transform: translateY(110vh) scale(.6); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateY(-10vh) scale(1.1); opacity: 0; }
}
.match-box {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  width: min(92vw, 420px);
}
.match-title { font-size: 30px; font-weight: 800; margin: 0 0 6px; }
.match-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 22px; }
.match-photos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 26px;
}
.match-photo {
  width: 130px;
  height: 160px;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  background: var(--surface-2);
}
.match-photo.left { transform: rotate(-6deg); margin-right: -14px; z-index: 1; }
.match-photo.right { transform: rotate(6deg); z-index: 2; }
.match-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.match-photo .ph-fallback {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 40px; color: var(--accent);
}
.match-heart {
  position: relative;
  z-index: 3;
  color: var(--accent);
  font-size: 34px;
  text-shadow: 0 0 24px rgba(244, 93, 145, .8);
  margin: 0 -6px;
}
.match-cta {
  display: block;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #d83e85);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(244, 93, 145, .35);
  margin-bottom: 10px;
}
.match-alt {
  display: block;
  width: 100%;
  height: 44px;
  border: 1px solid rgba(244, 93, 145, .5);
  border-radius: 14px;
  background: transparent;
  color: #ffc0d6;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}


/* ==================================================== T-182 ТОЧНОСТЬ ПО МАКЕТАМ
   Второй проход: приводим ключевые поверхности к пропорциям и формам
   фирменных макетов (полноширинная нижняя панель, колода во весь экран,
   круглый аватар профиля, ряд действий по центру). Логика и хуки не меняются. */

/* Нижняя навигация — полноширинная панель с blur, как в макете, а не пилюля. */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 78px;
  padding: 8px 22px calc(8px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--line);
  background: rgba(27, 17, 34, .95);
  backdrop-filter: blur(18px);
  box-shadow: none;
}
.tab {
  position: relative;
  min-width: 75px;
  border: none;
  background: none;
  color: #9c8ca5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
}
.tab-icon-wrap { position: static; }
.tab-icon { width: 25px; height: 25px; }
.tab-icon svg { width: 25px; height: 25px; }
.tab-label { font-size: 10px; font-weight: 700; }
.tab.active { color: var(--accent); }
.tab.active .tab-icon { filter: none; }
.tab.active .tab-label { color: var(--accent); }
.tab-badge {
  position: absolute;
  top: 2px;
  right: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  border-radius: 20px;
  padding: 2px 5px;
  border: none;
}

/* Колода: карточка во весь доступный экран, скругление 26 px. */
.deck { padding: 0 12px; }
.deck .card { border-radius: 26px; }
.deck-actions {
  position: static;
  justify-content: center;
  gap: 18px;
  padding: 14px 0 6px;
  margin: 0;
}
.act { width: 49px; height: 49px; border-radius: 50%; background: #382642; }
.act.like {
  width: 59px;
  height: 59px;
  background: linear-gradient(135deg, var(--accent), #d83e85);
  box-shadow: 0 8px 24px rgba(244, 93, 145, .28);
}

/* Профиль: круглый аватар с бейджем правки, как в макете. */
.me-hero {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 16px;
}
.me-photo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}
.me-photo img { width: 100%; height: 100%; object-fit: cover; }
.me-title { text-align: center; }
.me-name { font-size: 21px; font-weight: 800; }

/* Чаты: список и шапка переписки в формах макета. */
.chat-list { padding: 4px 12px 0; }
.person-head { padding: 11px 14px; }
.msgs { padding: 10px 12px; }
.msg { max-width: 78%; padding: 10px 13px; font-size: 13px; }

/* Карточка из лайков и модалки — единые скругления дизайн-системы. */
.profile-photo { border-radius: 20px; }
.modal-box { border-radius: 20px; }


/* =============================================== T-183 ЭЛЕМЕНТЫ МАКЕТА (онлайн, аватар, карма-бар) */

/* Пилюля «Онлайн» на карточке колоды (как в макете, справа сверху фото). */
.online-pill {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  font-size: 10px;
  font-weight: 700;
  color: var(--good);
  background: rgba(26, 16, 42, .66);
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 25px;
  padding: 8px 11px;
  backdrop-filter: blur(10px);
}

/* Третья круглая кнопка в ряду действий — обновить (↻), как в макете. */
.act.undo { color: #fff; }
.act.undo svg { width: 22px; height: 22px; }

/* Шапка колоды: только логотип слева (кнопка обновить уехала в ряд действий). */
.deck-top { justify-content: flex-start; }

/* Профиль: круглый аватар с бейджем правки и строкой «В поиске». */
.me-avatar-wrap { position: relative; width: 92px; height: 92px; }
.me-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 13px;
  border: 2px solid var(--bg);
  z-index: 2;
}
.me-seeking {
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

/* Карма-панель со звездой и прогресс-баром, как в макете. */
.karma-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(244, 93, 145, .16), rgba(183, 106, 226, .16));
  border: 1px solid rgba(244, 122, 178, .3);
  margin-bottom: 8px;
}
.karma-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 16px;
}
.karma-main { flex: 1; min-width: 0; }
.karma-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.karma-top b { font-size: 13px; color: #fff; }
.karma-bar {
  height: 8px;
  border-radius: 20px;
  background: #49354e;
  overflow: hidden;
}
.karma-bar i {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}


/* ============================================== T-184 ФИКС: навигация не перекрывает контент
   Навигация стала position:fixed (T-182), поэтому выпала из потока и
   накрывала низ экрана: ряд действий колоды и композер чата уходили под неё.
   Резервируем высоту панели снизу у экрана и центрируем панель по ширине app. */
.screen {
  padding-bottom: calc(env(safe-area-inset-bottom) + 86px);
}
.screen.chat-open {
  padding-bottom: calc(env(safe-area-inset-bottom) + 86px);
}
.tabs {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(100%, 560px);
}
/* Ряд действий колоды гарантированно над навигацией. */
.deck-actions {
  padding: 12px 0 4px;
}


/* ============================================ T-185 ФИКС: панель в потоке, бейдж на иконке
   T-182 сделал навигацию position:fixed — она выпала из flex-колонки #app, экран
   вырос на её высоту, и нижняя часть карточки + ряд действий ушли под панель,
   а бейдж-уведомление перепрыжал на правый край широкой вкладки. Возвращаем
   панель в поток (сохраняя вид цельной полосы) и сажаем бейдж на иконку. */

.tabs {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(27, 17, 34, .96);
  backdrop-filter: blur(18px);
  box-shadow: none;
}

/* Экран больше не резервирует место под fixed-панель — она снова в потоке. */
.screen { padding-bottom: calc(env(safe-area-inset-bottom) + 8px); }
.screen.chat-open { padding-bottom: 0; }

/* Карточка приподнята: между фото и рядом действий есть воздух, кнопки точно видно. */
.deck { min-height: 0; }
.deck-actions { padding: 12px 0 6px; margin-bottom: 2px; }

/* Бейдж-уведомление — на иконке вкладки, а не на краю широкой кнопки. */
.tab { min-width: 0; }
.tab-icon-wrap { position: relative; display: inline-flex; }
.tab-badge {
  position: absolute;
  top: -6px;
  right: -11px;
  left: auto;
  margin: 0;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  border-radius: 20px;
  padding: 3px 5px;
  border: none;
}


/* ============================================ T-186 поле чата растёт вверх (как iPhone)
   Композер: textarea вместо input — при длинном тексте поле увеличивается по
   высоте, а не уводит строку вбок. Кнопки прижаты к нижней кромке, поэтому
   растут вместе с полем. После ~5 строк скроллит внутри себя. */
.composer {
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 22px;
  padding: 11px 15px;
  font: inherit;
  outline: none;
  resize: none;
  line-height: 1.35;
  max-height: 120px;
  overflow-y: hidden;
  -webkit-appearance: none;
}
.composer textarea:focus { border-color: var(--accent); }


/* Vibe Light */
body { background: var(--bg-deep); }
#app {
  max-width: 480px;
  background: var(--bg);
  box-shadow: 0 0 40px #39283b14;
}
.topbar, .tabs, .person-head, .composer { background: var(--bg); }
.topbar { padding-inline: 18px; }
.round-btn, .back, .reload { background: #fff0f6; color: var(--accent); }
.tabs { padding-top: 10px; }
.tab { color: var(--text-dim); padding: 5px 0; }
.tab.active { border-radius: 16px; background: #fff0f6; }
.tab-badge { color: white; }
.deck-screen { padding-inline: 18px; }
.deck-top {
  position: static;
  padding: 4px 0 12px;
}
.brand-pill {
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 27px;
  letter-spacing: -1.3px;
}
.brand-pill::first-letter { color: var(--accent); }
.card { box-shadow: 0 10px 24px #39283b26; }
.card .chip { color: white; }
.online-pill { color: #a4f6ce; }
.act.nope, .act.undo { background: #f3edf5; color: #675871; }
.act.like { background: linear-gradient(135deg, #ee5da6, #c93280); }
.act.like path { fill: white; }
.me-hero { background: linear-gradient(125deg, #fff0f6, #f1ebff); }
.me-photo { box-shadow: 0 6px 20px #39283b26; }
.karma-bar { background: #e6daee; }
.karma-top b, .profile-title, .profile-close, .doc-text, .doc-text b {
  color: var(--text);
}
.age-hint.good { color: var(--good); }
.age-hint.bad { color: var(--bad); }
.toast { background: #402247; color: white; }
.match-overlay { background: linear-gradient(160deg, #fff0f6, #eee5ff); }
.match-alt { color: var(--accent); }
.rep-msg.mine { color: white; }

.deck .card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.deck .card .photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.card-shade {
  background: linear-gradient(to top, #160e20cf, transparent 67%);
}
.card-info { background: none; }
.card .card-about {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px;
  color: var(--text-dim);
  text-shadow: none;
  line-height: 1.45;
  -webkit-line-clamp: unset;
  max-height: 74px;
  overflow-y: auto;
}
.moderation-note { background: var(--bg); }

/* Light surfaces for secondary views and interactive states. */
.like-go { color: var(--accent); background: #fff0f6; }
.profile-about { color: var(--text-dim); }
.status-recent, .day, .pill.off, .profile-wait,
.reg-progress, .doc-link, .city-chip, .like-row:active {
  background: var(--surface-2);
}
.reg-error { color: var(--bad); }
.round-btn:active { background: var(--surface-2); }
.card .chip {
  background: #ffffff26;
  border-color: #ffffff55;
}
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.like-open { display: flex; align-items: center; gap: 10px; }
.like-photo { width: 52px; height: 52px; flex-basis: 52px; }
.deck-screen { padding-inline: 12px; padding-bottom: 8px; }
.deck .card.second, .deck .card.third { transform: none; }
.deck .card-info { bottom: 76px; padding: 12px 16px; }
.deck .deck-actions {
  position: absolute;
  z-index: 6;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  gap: 10px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  background: #fffafd80;
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  box-shadow: 0 4px 18px #160e2033, inset 0 1px 0 #ffffff80;
}
.deck .act.nope, .deck .act.undo { background: #fffafdbe; }
.deck .act.like { width: 52px; height: 52px; }


/* MAX WebView light theme, including hidden navigation states. */
[hidden] { display: none !important; }
:root {
  --bg: #fffafd;
  --bg-deep: #f6f2f7;
  --bg-soft: #fff3f9;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f2f8;
  --text: #292638;
  --text-dim: #746d7b;
  --line: #eee6ee;
  --line-strong: #ded2e0;
  --accent: #c83380;
  --accent-2: #8660c9;
  --good: #18764f;
  --bad: #a82d55;
}
body { font-family: Manrope, -apple-system, "Segoe UI", sans-serif; }
#app { width: 100%; max-width: 480px; }
.topbar { min-height: 64px; }
.topbar h1 { font-size: 21px; }
.subtitle { color: var(--text-dim); }
.round-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.tab { color: #a49ba9; }
.tab-icon { opacity: 1; filter: none; transform: none; }
.tab-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.active .tab-icon { filter: none; transform: none; }
.tab.active .tab-label { color: var(--accent); }
.tab.active { background: #fff0f6; }
.tab-badge { box-shadow: 0 2px 7px #783b6640; }
.chat-list { padding: 14px 16px; }
.chat { border-radius: 22px; padding: 14px; box-shadow: 0 5px 18px #39283b0b; }
.chat-name { color: var(--text); font-size: 15px; }
.chat-preview { font-size: 12px; }
.chat-karma { color: var(--accent); }
.person-head { background: var(--bg); }
.composer, .moderation-note { background: var(--bg); }
.msg.theirs { color: var(--text); }
.quick-chip, .block, .like-row, .report-card, .modal-box {
  background: #fff;
  box-shadow: 0 5px 18px #39283b0a;
}
.like-row { padding: 12px; }
.like-open { overflow: hidden; }
.like-info { overflow: hidden; }
.like-go { flex: 0 0 40px; }
.block, .me-hero + .note { margin-inline: 14px; }
.reg-field input, .reg-field textarea, .select select, .choice {
  background: var(--surface);
}
.choice.selected { background: #fff0f6; }
.doc-text { color: var(--text-dim); }
.profile-view { color: var(--text); }
.profile-karma { background: #fff0f6; border-color: #f2d6e4; color: var(--accent); }
.profile-name, .profile-title { color: var(--text); }
.profile-about { color: var(--text-dim); }
.profile-close { background: #fff0f6; color: var(--accent); }
.pill.off { color: var(--text-dim); }
.karma-panel { background: linear-gradient(120deg, #fff1f7, #f1ebff); }
.karma-top b { color: var(--text); }
.karma-bar { background: #e8daed; }
.deck-screen { padding-inline: 14px; }
.deck .card { box-shadow: 0 12px 28px #39283b22; }
.deck .card-info { bottom: 78px; }
.deck .card .photo { min-height: 0; }
.deck .card .card-about { padding: 13px 18px; }
.deck .deck-actions { bottom: 11px; }
@media (max-height: 660px) {
  .deck .card-info { bottom: 72px; padding-bottom: 5px; }
  .deck .card .card-about { max-height: 54px; }
  .deck .deck-actions { transform: translateX(-50%) scale(.88); transform-origin: center bottom; }
}

.ui-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.send .ui-icon { color: white; }
.reg-footer { background: linear-gradient(to top, #fffafd 72%, #fffafd00); }
.rule-list > div { background: var(--surface); }
.reg-progress { background: var(--surface-2); }
.reg-back, .reg-top .round-btn { background: #fff0f6; color: var(--accent); }
.reg-cta { background: linear-gradient(135deg, #e64b9b, #9a64d0); }
.age-hint.good { color: var(--good); }
.age-hint.bad { color: var(--bad); }
.choice, .doc-link, .city-chip { background: var(--surface); }


/* Vibe approved mobile design */
:root {
  --bg: #F5F5F7;
  --bg-deep: #F5F5F7;
  --bg-soft: #FCE4EF;
  --card: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --text: #24212B;
  --text-dim: #85838D;
  --line: #E7E7EB;
  --line-strong: #E7E7EB;
  --accent: #E83E8C;
  --accent-2: #D82B77;
  --bubble-mine: #FBD6E7;
  --bubble-mine-text: #24212B;
  --bubble-theirs: #EDEDF1;
}
html, body { background: var(--bg); }
body { color: var(--text); font-family: Manrope, -apple-system, "Segoe UI", sans-serif; }
#app { max-width: 520px; background: var(--bg); box-shadow: none; }
.splash {
  position: absolute;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #f7f7f9, #fff 35%, #fce4ef);
  transition: opacity .3s ease, visibility .3s ease;
}
.splash.finished { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-brand {
  position: absolute;
  z-index: 2;
  top: calc(env(safe-area-inset-top) + 7%);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text);
}
.splash-heart { font-size: 62px; line-height: .9; color: var(--accent); }
.splash-brand strong { font-size: 48px; line-height: 1; letter-spacing: -3px; }
.splash-brand > span:last-child { font-size: 17px; font-weight: 700; margin-top: 18px; line-height: 1.4; }
.splash-photo { width: 100%; height: 78%; margin-top: auto; object-fit: cover; object-position: center 65%; mask-image: linear-gradient(transparent, #000 20%); }
.splash-loading { position: absolute; z-index: 3; bottom: calc(env(safe-area-inset-bottom) + 34px); display: flex; flex-direction: column; align-items: center; gap: 7px; color: #fff; text-shadow: 0 1px 5px #24212b8a; font-size: 12px; }
.splash-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #ffffff77; border-top-color: white; animation: splash-spin .85s linear infinite; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
.topbar { min-height: 62px; padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; background: var(--bg); border-bottom: none; }
.topbar h1 { font-size: 22px; letter-spacing: -.8px; }
.round-btn, .back, .reload { background: none; border: none; color: var(--text); }
.round-btn svg { width: 24px; height: 24px; }
#reload { color: var(--text); }
.screen { background: var(--bg); }
.tabs {
  min-height: 62px;
  padding: 7px 3px calc(7px + env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px #24212b08;
}
.tab { min-width: 0; padding: 3px 1px; gap: 4px; color: #585865; }
.tab.active { background: none; color: var(--accent); }
.tab-icon, .tab-icon svg { width: 28px; height: 28px; }
.tab-icon svg { stroke-width: 1.8; }
.tab-label { font-size: 9px; letter-spacing: -.2px; }
.tab-badge { background: var(--accent); border: 1px solid white; }
.deck-screen { padding: calc(env(safe-area-inset-top) + 8px) 12px 8px; }
.deck-top { padding: 4px 2px 10px; }
.brand-pill { font-size: 25px; color: var(--accent); letter-spacing: -1.3px; }
.brand-pill::first-letter { color: var(--accent); }
.deck .card { border-radius: 20px; background: #fff; box-shadow: 0 10px 26px #24212b20; }
.deck .card .photo { flex: 1 1 auto; }
.card-shade { background: linear-gradient(to top, #15121acc, #15121a00 52%); }
.deck .card-info { bottom: 66px; padding: 15px 16px; background: none; }
.card-karma, .online-pill { border: none; background: #a72666cd; color: white; }
.card-name { font-size: clamp(23px, 6vw, 29px); }
.card-city { color: white; }
.card .chip { background: #ffffff42; border: 1px solid #ffffff65; color: white; }
.deck .card .card-about { max-height: 66px; padding: 12px 16px; color: var(--text-dim); font-size: 12px; }
.deck .deck-actions { bottom: 8px; background: #ffffffb5; border: 1px solid #fff; box-shadow: 0 6px 18px #24212b42; }
.deck .act.nope, .deck .act.undo { background: #fff; color: #66636e; }
.deck .act.like { background: linear-gradient(180deg, #fa6ca9, #df2b77); }
.deck .act.like path { fill: #fff; }
.likes-page { padding: 10px 14px 24px; }
.likes-page .seg { background: #fff; border: 1px solid var(--line); border-radius: 24px; margin-bottom: 16px; }
.likes-page .seg button.active { background: linear-gradient(180deg, #f267a3, #df2b77); border-radius: 22px; color: #fff; }
.likes-page .like-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.likes-page .like-row { position: relative; display: block; height: 225px; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #e7e7eb; }
.likes-page .like-open { display: block; width: 100%; height: 100%; }
.likes-page .like-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.likes-page .like-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 11px 14px; background: linear-gradient(transparent, #15121aca); }
.likes-page .like-name, .likes-page .like-meta { color: #fff; text-shadow: 0 1px 2px #24212b88; }
.likes-page .like-go, .likes-page .like-wait { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; background: #fff; color: var(--accent); border: 0; border-radius: 50%; }
.likes-page .like-name { padding-right: 36px; }
.likes-page .like-meta { padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.chat-list { padding: 8px 12px 20px; }
.chat { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 2px; box-shadow: none; background: transparent; }
.chat-name { font-size: 14px; }
.chat-preview { color: var(--text-dim); }
.chat-time { font-size: 10px; }
.person-head { background: var(--bg); }
.msg.mine { background: #FBD6E7; color: var(--text); }
.msg.theirs { background: #EDEDF1; color: var(--text); }
.composer { background: #fff; }
.composer textarea { background: #F5F5F7; }
.send { background: linear-gradient(180deg, #f267a3, #df2b77); }
.me-hero { background: none; border: none; box-shadow: none; }
.me-photo { width: 104px; height: 104px; border: 0; box-shadow: none; }
.me-avatar-wrap { width: 104px; height: 104px; }
.me-name { font-size: 21px; }
.me-seeking { color: var(--text-dim); }
.block, .me-hero + .note { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.block-title { color: var(--text); }
.karma-panel { background: #FCE4EF; border: 0; }
.karma-ico { background: var(--accent); }
.btn.primary, .reg-cta, .profile-act { background: linear-gradient(180deg, #f266a2, #df2b77); color: #fff; }
.reg { background: var(--bg); }
.reg-top { padding-top: calc(env(safe-area-inset-top) + 16px); }
.reg-progress { height: 6px; background: #D5D5DA; }
.reg-progress span { background: var(--accent); }
.reg-scroll h2 { color: var(--text); font-size: 26px; letter-spacing: -1px; }
.reg-sub, .reg-fine { color: var(--text-dim); }
.reg-footer { background: linear-gradient(to top, var(--bg) 75%, #f5f5f700); }
.reg-field input, .reg-field textarea, .select select { background: #fff; color: var(--text); border: 1px solid var(--line); }
.choice, .rule-list > div { background: #fff; border-color: var(--line); }
.interest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 20px; }
.interest-option { min-height: 48px; border: 1px solid var(--line); border-radius: 24px; background: #fff; color: var(--text); font: 600 13px Manrope, sans-serif; }
.interest-option.selected { background: #FCE4EF; color: #C72A73; border-color: #F9A9CB; }
.welcome { background: radial-gradient(circle at 50% 0, #fff, var(--bg) 70%); }
.welcome .reg-scroll { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(env(safe-area-inset-top) + 58px); }
.welcome-mark { color: var(--accent); font-size: 64px; line-height: 1; }
.welcome .brand { font-size: 45px; }
.welcome .reg-scroll h2 { margin-top: 22px; font-size: 26px; line-height: 1.05; }
.welcome-benefits { width: 100%; margin-top: 24px; text-align: left; }
.welcome-benefits > div { display: flex; gap: 15px; align-items: center; padding: 9px 20px; font-size: 17px; color: var(--accent); }
.welcome-benefits span { color: var(--text); font-size: 14px; font-weight: 700; }
.events-page { padding: 12px 18px 28px; }
.events-page h2 { margin: 0 0 8px; font-size: 22px; }
.events-page > p { color: var(--text-dim); font-size: 13px; }
.event-idea { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; align-items: center; margin: 10px 0; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.event-idea span { grid-row: span 2; color: var(--accent); font-size: 25px; }
.event-idea b { font-size: 14px; }
.event-idea small { color: var(--text-dim); }
@media (max-width: 350px) {
  .tab-label { font-size: 8px; }
  .likes-page .like-row { height: 190px; }
  .deck .card-info { bottom: 62px; }
}
@media (max-height: 640px) {
  .welcome .reg-scroll { padding-top: calc(env(safe-area-inset-top) + 20px); }
  .welcome-benefits { margin-top: 8px; }
  .likes-page .like-row { height: 180px; }
}

.profile-shortcuts { display: flex; flex-direction: column; margin: 8px 14px 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.profile-shortcuts button { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 10px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: 700 13px Manrope, sans-serif; text-align: left; }
.profile-shortcuts button:last-child { border-bottom: 0; }
.profile-shortcuts span { color: var(--text-dim); font-size: 21px; }

.profile-progress { margin: 0 18px 14px; font-size: 11px; }
.profile-progress > div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.profile-progress b { color: var(--text); }
.profile-progress i { display: block; height: 6px; border-radius: 8px; background: #E7E7EB; overflow: hidden; }
.profile-progress i span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

#city-events { margin-bottom: 24px; }
#events-city { width: 100%; margin: 8px 0; padding: 8px; }
#events-free { width: auto; }
.event-card { margin: 12px 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.event-cover { display: block; position: relative; aspect-ratio: 16 / 9; background: #EEEEF2; overflow: hidden; }
.event-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-cover-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--accent); font-size: 34px; }
.event-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px 16px 16px; }
.event-body b { font-size: 15px; line-height: 1.25; }
.event-body small { color: var(--text-dim); }
.event-body a { color: var(--accent); }

/* T-192: ровная стрелка «назад» и отмена своего лайка. */
.back { width: 44px; height: 44px; flex-basis: 44px; padding: 0; font-size: 0; }
.back svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.likes-page .like-actions { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.likes-page .like-actions .like-go { position: static; width: 34px; height: 34px; }
.likes-page .like-cancel { position: static; min-width: 86px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: #fff; color: var(--accent); font: 700 11px Manrope, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px #15121a2e; }
.likes-page .like-row[data-lt="out"] .like-name { padding-right: 96px; }
.likes-page .like-row[data-lt="out"] .like-meta { padding-right: 90px; }
.profile-out { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.profile-out .profile-wait { width: 100%; }
.profile-dual { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.profile-dual .profile-act, .profile-dual .profile-cancel { width: 100%; }
.profile-cancel { width: 100%; height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--text); font: 700 14px Manrope, sans-serif; cursor: pointer; }
.profile-cancel:active { transform: scale(.97); }

/* VIBE supplied brand mark; embedded to work without an extra asset route. */
:root { --vibe-brand-mark: url("/vibe-heart.png"); }
.brand-pill { display: inline-flex; align-items: center; gap: 8px; }
.brand-pill::before,
.reg:not(.welcome) .brand::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 30px;
  flex: 0 0 auto;
  background: var(--vibe-brand-mark) center / contain no-repeat;
  vertical-align: middle;
}
.reg:not(.welcome) .brand::before { width: 25px; height: 22px; margin-right: 7px; }
.splash-heart,
.welcome-mark {
  display: block;
  width: 80px;
  height: 70px;
  flex: 0 0 auto;
  font-size: 0;
  background: var(--vibe-brand-mark) center / contain no-repeat;
}

/* Rounded two-tone bottom navigation icons. */
.tab-icon svg .nav-body { fill: currentColor; fill-opacity: .08; }
.tab-icon svg .nav-soft { opacity: .55; }
.tab.active .tab-icon svg .nav-body { fill-opacity: 1; }
.tab.active .tab-icon svg .nav-detail { stroke: #fff; }
.tab-icon svg .nav-detail { fill: none; }
.tab-badge { top: -5px; right: -9px; }

/* ===== Логотип Vibe одной картинкой (2026-11-08) ===== */
.splash-logo {
  display: block;
  width: min(52vw, 215px);
  height: auto;
  margin: 0 auto 6px;
}
.brand-logo { display: block; height: 24px; width: auto; }
.brand-pill .brand-logo { height: 26px; }
.welcome-logo { display: block; height: 60px; width: auto; margin: 0 auto; }
/* В полном логотипе сердце уже есть — отдельная иконка перед ним не нужна. */
.brand-pill::before,
.reg:not(.welcome) .brand::before { display: none; }

/* City choices use ordinary buttons supported by MAX WebView. */
.city-suggestions { margin: -4px 0 12px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.city-suggestions button { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; font: inherit; }
.city-suggestions button:last-child { border-bottom: 0; }
.city-suggestions button:focus, .city-suggestions button:hover { background: #fce4ef; outline: 2px solid var(--accent); outline-offset: -2px; }