/* ===== RESET & ROOT ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal:       #1D9E75;
  --teal-light: #E1F5EE;
  --teal-mid:   #5DCAA5;
  --teal-dark:  #0F6E56;
  --green-light:#EAF3DE;
  --gold:       #E6A23C;
  --gray-50:    #F8F8F6;
  --gray-100:   #F2F2EE;
  --gray-200:   #E4E4DE;
  --gray-400:   #9A9A94;
  --gray-600:   #5A5A56;
  --gray-700:   #444441;
  --gray-900:   #1A1A18;
  --radius:     14px;
  --radius-sm:  8px;
  --font-body:  'Inter', -apple-system, sans-serif;
  --font-display: 'Unbounded', sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: #EEF3F0;
  color: var(--gray-900);
  min-height: 100vh;
  overflow-x: hidden;
  display: flow-root; /* BFC: отступы .app не «вытекают» из body и не создают лишний скролл */
  -webkit-font-smoothing: antialiased;
}

/* ===== APP SHELL ===== */
.app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ===== NOT FOUND ===== */
.app:has(.not-found) main.main-content {
  display: flex;
  padding-bottom: 0;
}
.not-found {
  flex: 1;
  min-width: 0;
  padding: clamp(48px, 10vh, 100px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, var(--teal-light), transparent 65%);
}
.not-found-code {
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 156px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--teal-dark);
  margin: 0;
}
.not-found h1 {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.4;
  margin: 0;
}
.not-found .not-found-home {
  max-width: 280px;
  background: var(--teal-dark);
  color: #fff;
  transition: background .15s;
}
.not-found-home:hover { background: var(--teal); }
.not-found-home:focus-visible { outline: 3px solid var(--teal-mid); outline-offset: 4px; }

/* ===== TOP NAV ===== */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-dark);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo span { color: var(--gray-400); font-weight: 400; }
.logo-mark { height: 26px; width: auto; display: block; flex-shrink: 0; margin-right: 8px; }
.nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--gray-400);
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background .15s;
}
.nav-btn:hover { background: var(--gray-100); }
/* ===== NOTIFICATIONS (колокол в шапке) ===== */
/* Бадж лежит поверх иконки, поэтому у него белая обводка: без неё цифра
   сливается с линиями колокольчика. */
.nav-bell { position: relative; }
.nav-bell-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  border: 2px solid #fff;
  background: var(--teal-dark);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notifications-clear {
  display: block;
  margin: 0 0 10px auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-600);
  font-family: var(--font-body);
  font-size: 13px;
}
.notifications-clear:hover { color: var(--teal-dark); text-decoration: underline; }
.notifications-list { display: flex; flex-direction: column; gap: 6px; }
.notification-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: #fff;
}
/* Непрочитанные подсвечены до закрытия модалки: бадж гаснет сразу, а понять,
   что именно было новым, участник должен успеть. */
.notification-row.unread { background: var(--teal-light); border-color: var(--teal-mid); }
.notification-main {
  flex: 1;
  display: grid;
  /* minmax(0, 1fr), а не голый 1fr: без этого трек по умолчанию не может
     сжаться уже min-content, и название партнёра без пробелов (до 64
     символов) раздвигало бы карточку — по горизонтали .modal-card не режет. */
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray-900);
}
.notification-main i { font-size: 18px; color: var(--teal-dark); }
.notification-text { overflow-wrap: anywhere; }
.notification-time { grid-column: 2; font-size: 12px; color: var(--gray-600); }
.notification-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 16px;
  padding: 0 10px;
}
.notification-remove:hover { color: var(--gray-700); }
/* ===== NAV SEARCH (поиск по партнёрам в шапке) ===== */
/* На десктопе поле раскрывается прямо в строке шапки слева от лупы (место
   позволяет), а вниз выпадает только список результатов. Поле вынесено из
   потока и центрировано по вертикали: пилюля выше кнопок шапки, и, встань
   она в строку, открытие поиска меняло бы высоту шапки. */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-panel {
  position: absolute; right: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  /* 360px = лого + кнопки шапки + отступы с запасом: поле не должно
     доставать до логотипа даже на узких десктопных/планшетных окнах */
  width: min(340px, calc(100vw - 360px));
}
.nav-search-results {
  position: absolute; top: calc(100% + 12px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(15,110,86,0.4);
  padding: 10px; z-index: 200;
  max-height: 320px; overflow-y: auto;
}
/* До десктопного брейкпоинта (900px — как у остальной вёрстки) контент идёт
   узкой мобильной колонкой и в строке шапки места нет — поле выпадает
   панелью-карточкой на всю ширину шапки (якорь — сама .top-nav: на мобильном
   она sticky, т.е. позиционирована), а список результатов — внутри панели. */
@media (max-width: 899px) {
  .nav-search { position: static; }
  .nav-search-panel {
    position: absolute; left: 12px; right: 12px; top: calc(100% - 8px);
    width: auto; transform: none;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: 0 24px 60px -20px rgba(15,110,86,0.4);
    padding: 10px; z-index: 200;
  }
  .nav-search-results {
    position: static; margin-top: 8px; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
}
.nav-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.nav-search-item:hover, .nav-search-item:focus-visible { background: var(--gray-100); }
.nav-search-item-logo {
  width: 36px; height: 36px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.nav-search-item-logo img { width: 100%; height: 100%; object-fit: cover; }
.nav-search-item-text { min-width: 0; }
.nav-search-item-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-item-deal { font-size: 12px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-empty { padding: 12px 10px; font-size: 13px; color: var(--gray-400); text-align: center; }

/* ===== MAIN ===== */
.main-content {
  flex: 1;
  overflow-y: auto;
  /* overflow-x задан явно по той же причине, что и overflow-y у .editor-tabs:
     при `auto` по одной оси вторая вычисляется не в `visible`, а в `auto`, и
     .main-content молча становится горизонтальным скролл-контейнером. Палец
     таскал содержимое вбок в обход `overflow-x: hidden` у body. */
  overflow-x: hidden;
  padding-bottom: 16px;
}
 /* Запас снизу для нижней навигации. */
   .app:has(.bottom-nav) .main-content { padding-bottom: 96px; }
   .app:not(:has(.bottom-nav)) .main-content { padding-bottom: 56px; }
   
   /* Нижняя навигация */
   .bottom-bar {
     display: flex;
     flex-direction: column;
     position: sticky;
     bottom: 0;
     z-index: 100;
   }
   
   /*КОНТАКТЫ ПОДДЕРЖКИ */
   .site-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 6px 18px;
     padding: 10px 16px;
     background: #fff;
     color: var(--gray-400);
     font-size: 15px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
   }
   .site-footer-title { color: var(--gray-400);; font-weight: 500; }
   .site-footer-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: var(--gray-400);
     text-decoration: none;
     font-weight: 500;
     transition: color .15s;
   }
   .site-footer-link i { font-size: 14px; color: var(--gray-400); }
   .site-footer-link:hover { color: var(--teal-mid); } 

/* ===== BOTTOM NAV ===== */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  padding: 8px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
/* Пункты делят ширину поровну и сжимаются вместе с экраном. Раньше ширину
   задавал `padding: 6px 24px`, а `min-width: auto` не давал флекс-элементу
   ужаться: пять пунктов админской панели занимали 456 px и распирали
   документ шире экрана на любом телефоне (у участника — 368 px, то есть
   с 360 px и уже). */
.bnav-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  border-radius: 10px;
  text-decoration: none;
  transition: color .15s;
}
.bnav-item i { font-size: 22px; }
.bnav-item.active { color: var(--teal-dark); }
/* Подпись не выталкивает пункт: на самых узких экранах обрежется многоточием,
   а не разложит панель по горизонтали. */
.bnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== HERO ===== */
.hero {
  background: linear-gradient(155deg, var(--teal-dark) 0%, var(--teal) 55%, var(--teal-mid) 100%);
  padding: 44px 24px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 12px;
}
.hero p {
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto 28px;
}
.btn-primary {
  display: block;
  width: 100%;
  background: #fff;
  color: var(--teal-dark);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn-secondary {
  display: block;
  width: 100%;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,0.5);
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
  text-decoration: none;
}

/* ===== SECTIONS ===== */
.section { padding: 24px 20px 0; }
.section:last-child { padding-bottom: 32px; }
.section-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}

.feature-card {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.feature-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--teal-dark);
  flex-shrink: 0;
}
.feature-text h3 { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.feature-text p { font-size: 13px; color: var(--gray-400); line-height: 1.5; }

/* ===== AUTH ===== */
.auth-wrap { padding: 32px 20px 24px; }
.auth-tabs {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  padding: 11px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-400);
  border-radius: 6px;
  cursor: pointer;
  border: none;
  background: none;
  transition: all .2s;
  font-family: var(--font-body);
}
.auth-tab.active {
  background: #fff;
  color: var(--teal-dark);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
.form-input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gray-900);
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.form-input:focus { border-color: var(--teal); }
.form-select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gray-900);
  background: #fff;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.btn-submit {
  width: 100%;
  padding: 15px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: 8px;
  transition: background .2s;
}
.btn-submit:hover { background: var(--teal-dark); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }
.auth-note {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}

/* ===== MEMBER CARD ===== */
.card-page { padding: 20px; }
.member-card {
  background: linear-gradient(145deg, var(--teal-dark), var(--teal));
  border-radius: 20px;
  padding: 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.card-org { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.8px; opacity: .7; text-transform: uppercase; }
.card-status {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 20px; padding: 5px 10px;
  font-size: 11px; font-weight: 600;
}
.card-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6EE7B7; }
.card-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.card-role { font-size: 13px; opacity: .75; margin-bottom: 14px; }
.card-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.card-num { font-size: 12px; opacity: .65; font-family: monospace; letter-spacing: 1px; }
.card-date { font-size: 11px; opacity: .55; margin-top: 4px; }

.pending-banner {
  background: #FEF3CD;
  border: 1px solid #F59E0B;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 20px;
}
.pending-banner i { color: #D97706; font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.pending-banner p, .pending-banner div p { font-size: 13px; color: #92400E; line-height: 1.5; margin-top: 4px; }
.pending-banner strong { color: #78350F; }
.rejected-banner { background: #FCEBEB; border-color: #E24B4A; }
.rejected-banner i { color: #A32D2D; }
.rejected-banner strong { color: #501313; }
.rejected-banner p, .rejected-banner div p { color: #791F1F; }

.deals-grid { display: flex; flex-direction: column; gap: 12px; }
.deal-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; gap: 14px; align-items: center;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.deal-card:hover { border-color: var(--teal-mid); box-shadow: 0 10px 24px -14px rgba(15,110,86,0.28); }
.deal-card:active { transform: scale(.99); }
.deal-info { flex: 1; min-width: 0; }
.deal-chevron { color: var(--gray-400); font-size: 18px; flex-shrink: 0; }
.deal-logo {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
/* Длинные тексты обрезаются с многоточием — полное описание видно в бонусной карте */
.deal-info h4 {
  font-size: 14px; font-weight: 600; margin-bottom: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.deal-info p {
  font-size: 12px; color: var(--gray-400);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Номинал скидки — та же плашка, что .partner-discount на /partners */
.deal-badge {
  align-self: center; flex-shrink: 0; margin-left: auto;
  font-size: 22px; font-weight: 900; color: var(--teal-dark);
  background: var(--teal-light); padding: 8px 14px; border-radius: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Составная скидка: пометка «до» — мелкой капс-надписью над числом (ценниковый
   приём); в плашках компенсируем выросшую высоту уменьшенными отступами */
.badge-upto-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.05; vertical-align: middle; }
.badge-upto { font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; opacity: .7; }
/* Значок «по промокоду» рядом с номиналом в списке партнёров панели редактора */
.badge-promo-ico { font-size: 13px; margin-left: 4px; }
.deal-badge:has(.badge-upto-stack), .partner-discount:has(.badge-upto-stack) { padding-top: 5px; padding-bottom: 7px; }

/* Метка «Нужен госномер» — предупреждает участника заранее, до открытия
   пропуска, т.к. добавить номер можно только через заявку куратору */
.plate-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  background: var(--teal-light); color: var(--teal-dark);
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm);
}
.plate-badge i { font-size: 13px; }
.partner-plate-note { padding: 0 22px 4px; }
/* Если у партнёра нет ни одного контакта, .pass-contacts не рендерится и
   плашка остаётся последним блоком карточки — 4px снизу читались бы как
   обрезанный край на фоне ритма 18-22px во всей карточке. */
.partner-plate-note:last-child { padding-bottom: 20px; }

/* Лого + бейдж оценки под ним (карточки на /card, /partners и пропуск акции) */
.deal-logo-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.rating-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--teal-light); color: var(--teal-dark);
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.rating-badge .rating-star { color: var(--teal-dark); flex-shrink: 0; }
.rating-badge-empty { background: var(--gray-100); color: var(--gray-400); }
.rating-badge-empty .rating-star { color: var(--gray-600); }

/* Бейдж рейтинга на сетке /reviews и в шапке карточки «только отзывы» —
   заменяет собой .deal-badge/.pass-discount, когда карточка ведёт не к
   погашению акции, а к отзывам о партнёре. Крупное число + подпись снизу. */
.review-card-badge {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex-shrink: 0; margin-left: auto;
}
.review-card-badge-value {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 20px; font-weight: 900; color: var(--teal-dark);
  background: var(--teal-light); padding: 6px 12px; border-radius: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.review-card-badge-value .rating-star { color: var(--teal-dark); flex-shrink: 0; }
.review-card-badge-empty .review-card-badge-value { background: var(--gray-100); color: var(--gray-400); }
.review-card-badge-empty .review-card-badge-value .rating-star { color: var(--gray-600); }
.review-card-badge-count { font-size: 11px; color: var(--gray-400); white-space: nowrap; }

/* ===== EDITOR ===== */
.editor-header { padding: 20px 20px 0; }
.editor-header h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.editor-header p { font-size: 13px; color: var(--gray-400); }

/* minmax(0,…), а не 1fr: у `1fr` автоминимум трека — min-content, и длинная
   подпись плитки распирала ряд до 353 px на экране в 320 px. */
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px; }
.stat-card { background: var(--gray-100); border-radius: var(--radius-sm); padding: 14px 16px; }
.stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--teal-dark); }
.stat-label { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

.editor-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--gray-200);
  padding: 0 12px;
  gap: 2px;
  overflow-x: auto;
  /* overflow-y без явного hidden вычисляется в auto, и отрицательный
     margin кнопок делает ряд прокручиваемым на 1.5px по вертикали —
     колесо/свайп над вкладками дёргали панель */
  overflow-y: hidden;
  scrollbar-width: none;
}
.editor-tabs::-webkit-scrollbar { display: none; }
.etab {
  padding: 12px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--gray-400);
  border: none; background: none;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  font-family: var(--font-body);
  transition: color .15s;
}
.etab.active { color: var(--teal-dark); border-bottom-color: var(--teal); }

.etab-content { padding: 16px 20px; }

.member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}
/* Строка с data-row-edit-* открывает карточку редактирования по клику */
.member-row[data-row-edit-user], .company-row[data-row-edit-company] { cursor: pointer; }
.member-row[data-row-edit-user]:hover, .company-row[data-row-edit-company]:hover { background: var(--gray-50); }
.member-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--teal-dark);
  flex-shrink: 0;
}
.member-info { flex: 1; min-width: 0; }
.member-info h4 { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-info p { font-size: 12px; color: var(--gray-400); }

.status-badge {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px; white-space: nowrap;
  /* флекс-центровка: значок промокода стоит по центру строки, а не ниже числа */
  display: inline-flex; align-items: center;
}
.status-active { background: var(--teal-light); color: var(--teal-dark); }
.status-pending { background: #FEF3CD; color: #92400E; }

.action-btn {
  width: 38px; height: 36px; padding: 0;
  border-radius: 8px;
  font-size: 16px; font-weight: 600;
  border: 1.5px solid; cursor: pointer; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.btn-approve { border-color: var(--teal); color: var(--teal); }
.btn-approve:hover { background: var(--teal-light); }
.btn-reject { border-color: #E24B4A; color: #E24B4A; }
.btn-reject:hover { background: #FCEBEB; }
.btn-edit { border-color: var(--teal); color: var(--teal); }
.btn-edit:hover { background: var(--teal-light); }
.action-btn:disabled { opacity: .35; cursor: not-allowed; }
.action-btn:disabled:hover { background: none; }
.btn-promote { border-color: var(--teal-mid); color: var(--teal); }   /* сделать редактором — светло-зелёный */
.btn-promote:hover { background: var(--teal-light); }
.btn-demote { border-color: #C2410C; color: #C2410C; }    /* снять редактора — щит с крестом */
.btn-demote:hover { background: #FFF1E9; }

.add-form { background: var(--gray-100); border-radius: var(--radius); padding: 16px; }
.add-form-title {
  font-size: 14px; font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.btn-add {
  width: 100%;
  padding: 13px;
  background: var(--teal); color: #fff;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; margin-top: 8px;
  transition: background .2s;
}
.btn-add:hover { background: var(--teal-dark); }

.company-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}
.company-logo {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
  flex-shrink: 0;
}
.company-info { flex: 1; min-width: 0; }
.company-info h4 { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-info p { font-size: 12px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-views { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-400); }
.company-views i { font-size: 13px; }

.empty-msg { color: var(--gray-400); font-size: 14px; text-align: center; padding: 28px 0; }

/* Блок «не удалось загрузить» с кнопкой повтора — вместо ложного пустого списка.
   .btn-secondary по умолчанию рассчитан на тёмный hero (белый текст) —
   здесь фон светлый, переопределяем как у .btn-reset-password. */
.load-error { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 24px; grid-column: 1 / -1; }
.load-error .empty-msg { padding: 12px 0 4px; }
.load-error .btn-secondary {
  display: inline-flex; align-items: center; gap: 6px; width: auto;
  border: 1.5px solid var(--gray-200); border-radius: 10px; background: #fff;
  color: var(--gray-700); font-size: 14px; font-weight: 600; padding: 10px 16px; margin-top: 0;
}
.load-error .btn-secondary:hover { background: var(--gray-100, #F2F2EE); }
.nav-actions { display: flex; align-items: center; gap: 4px; }
.auth-back { width: auto; padding: 10px 16px; margin-bottom: 20px; }
.muted { color: var(--gray-400); font-weight: 400; }
.row-actions { display: flex; gap: 6px; align-items: center; }
.add-form-title i { color: var(--teal); font-size: 18px; }

/* Форма добавления города над списком: на мобильном заголовок сверху,
   инпут и кнопка «+» одной строкой; на десктопе всё в одну строку. */
.add-form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.add-form-inline .add-form-title { flex: 1 1 100%; margin-bottom: 0; }
.add-form-inline .form-group { flex: 1; margin-bottom: 0; }
.add-form-inline .form-label { display: none; }
/* margin-top из базового .btn-add ронял кнопку ниже оси строки */
.add-form-inline .btn-add { width: 56px; flex: 0 0 auto; margin-top: 0; padding: 13px 0; display: inline-flex; align-items: center; justify-content: center; }
.add-form-inline .btn-add i { font-size: 18px; }
@media (min-width: 900px) {
  .add-form-inline { flex-wrap: nowrap; padding: 12px 16px; }
  .add-form-inline .add-form-title { flex: 0 0 auto; white-space: nowrap; }
  .add-form-inline .btn-add { width: 74px; }
}
/* Составной селектор — иначе десктопный .section-title (12px) из @media перебьёт размер */
.section-title.editor-section-title { font-size: 14px; text-align: center; margin-bottom: 12px; }
.card-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.5);
  margin-bottom: 10px;
}
.card-info {
  background: #E1F5EE;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #0F6E56;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.card-info i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.card-section-title { margin-bottom: 12px; }
/* Тулбар каталога акций: поиск + фильтр города (та же пилюля, что на /partners),
   в один ряд и на мобильном — поиск чуть шире поля города */
.deals-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.deals-search { flex: 1 1 52%; min-width: 0; position: relative; }
.deals-city-filter { flex: 1 1 48%; min-width: 0; }
.deals-city-filter .city-combo-input { text-overflow: ellipsis; }
.deals-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--teal); font-size: 17px; pointer-events: none;
}
.deals-search-input {
  width: 100%; padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--teal-mid); border-radius: 24px;
  font-family: var(--font-body); font-size: 14px; color: var(--gray-900);
  background: #fff; outline: none; transition: border-color .2s;
  text-overflow: ellipsis;
}
.deals-search-input:focus { border-color: var(--teal); }
/* На узких экранах ужимаем отступы и шрифт пилюль тулбара, чтобы в ряд влезали
   плейсхолдер поиска и название города */
@media (max-width: 899px) {
  .deals-search-icon, .deals-toolbar .city-combo-pin { left: 11px; font-size: 15px; }
  .deals-search-input { padding: 10px 12px 10px 31px; font-size: 13px; }
  .deals-toolbar .city-combo-input { padding: 10px 28px 10px 31px; font-size: 13px; }
  .deals-toolbar .city-combo-toggle { right: 2px; font-size: 14px; }
}
.toast-root {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: #0F6E56;
  color: #fff;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  animation: fadeInUp .25s ease;
}
.toast-error { background: #A32D2D; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== RESPONSIVE (MOBILE) ===== */
@media (max-width: 430px) {
  .hero h1 { font-size: 22px; }
  .card-name { font-size: 16px; }
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(20, 30, 25, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: fadeInUp .18s ease;
}
.modal-card {
  background: #fff; border-radius: 18px; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px -20px rgba(15,110,86,0.4);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px;
}
.modal-head h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.modal-close {
  background: none; border: none; cursor: pointer; font-size: 22px;
  color: var(--gray-400); padding: 4px; border-radius: 8px; display: flex;
}
.modal-close:hover { background: var(--gray-100); }
.modal-body { padding: 0 20px 20px; }
/* Шапка карточки партнёра: только крестик, ниже обычной modal-head;
   pass-deal ниже даёт свои 18px отступа */
.partner-pass-head { justify-content: flex-end; padding: 10px 12px 0; }

/* Красное предупреждение в карточке партнёра для неавторизованного гостя
   (открывается из поиска в шапке) */
.guest-warning {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 22px 20px;
  background: #A32D2D; color: #fff;
  border-radius: 10px; padding: 12px 14px;
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.guest-warning i { font-size: 18px; flex-shrink: 0; }

/* ===== DEAL PASS (карта участника по акции) ===== */
/* overflow-x hidden держит скруглённые углы шапки/лого; overflow-y скроллится
   (наследуется от .modal-card) — понадобилось, когда добавили блок отзывов,
   который на некоторых партнёрах не помещается в 90vh */
.pass-modal { max-width: 360px; padding: 0; position: relative; overflow-x: hidden; }
.pass-close {
  background: rgba(255, 255, 255, 0.16); border: none; cursor: pointer;
  color: #fff; font-size: 18px; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pass-close:hover { background: rgba(255, 255, 255, 0.3); }
.deal-pass { display: flex; flex-direction: column; }
.pass-member {
  background: linear-gradient(150deg, var(--teal-dark) 0%, var(--teal) 100%);
  color: #fff; padding: 22px 22px 20px;
}
.pass-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.pass-top-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pass-org { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; opacity: .9; }
.pass-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pass-photo {
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.pass-photo img { width: 100%; height: 100%; object-fit: cover; }
.pass-identity-text { min-width: 0; }
.pass-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.15; }
/* Ряд госномеров. Переносится, а не сжимается: при длинном ФИО
   или узком экране плашка уходит на вторую строку целиком — номер обязан
   оставаться читаемым с чужого экрана, это его единственная задача. */
.pass-plate-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.pass-plate {
  display: inline-flex; margin-top: 6px;
  background: #fff; color: var(--gray-900);
  border-radius: 7px; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.pass-plate-num, .pass-plate-region {
  padding: 3px 8px; font-size: 13px; font-weight: 700; letter-spacing: 1px;
}
/* Разделитель номера и региона. Никаких «RUS» и обозначений страны. */
.pass-plate-region { border-left: 1.5px solid rgba(26, 26, 24, 0.35); }
/* Плашка-кнопка при двух номерах: сброс браузерной кнопки, курсор.
   font: inherit — это шорткат, он же сбрасывает font-variant-numeric,
   унаследованный от .pass-plate, поэтому моноширинность цифр (tabular-nums)
   возвращаем отдельной строкой — иначе один и тот же номер в span- и
   button-варианте рисуется разной шириной цифр. */
.pass-plate-switch { border: 0; padding: 0; font: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
/* Визуально скрытый текст для скринридеров — доступен, но не занимает
   место в layout. Клип-паттерн вместо display:none/visibility:hidden,
   которые убрали бы текст и из accessibility tree. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Тёмный сегмент-подсказка «⇄ 1/2» — единственный контрастный элемент
   ряда: видно, что плашка нажимается. Без обозначений страны. */
.pass-plate-count {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; font-size: 11px; font-weight: 600;
  background: var(--gray-900); color: #fff;
}
.pass-plate-count i { font-size: 13px; }
.pass-no-plate {
  background: rgba(255, 255, 255, 0.15); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.pass-no-plate strong { display: block; font-size: 13px; font-weight: 600; }
.pass-no-plate span { display: block; font-size: 12px; opacity: .92; margin-top: 2px; }
.pass-valid {
  font-size: 12px; display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.13); padding: 9px 12px; border-radius: 10px;
}
.pass-valid b { font-variant-numeric: tabular-nums; font-weight: 600; }
.pass-deal { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.pass-deal-logo {
  width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.pass-deal-logo img { width: 100%; height: 100%; object-fit: cover; }
.pass-deal-info { flex: 1; min-width: 0; }
.pass-deal-name { font-size: 15px; font-weight: 600; }
.pass-deal-desc { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.pass-discount { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--teal-dark); flex-shrink: 0; }
.pass-contacts { display: flex; flex-direction: column; gap: 10px; padding: 0 22px 20px; }

.partner-reviews { padding: 4px 22px 20px; border-top: 1px solid var(--gray-100, #F2F2EE); }
/* Шапка — кнопка-тоггл: блок отзывов свёрнут по умолчанию, стрелка-галка
   справа поворачивается при раскрытии */
.partner-reviews-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 0 12px; flex-wrap: wrap;
  width: 100%; padding: 0; background: none; border: none; cursor: pointer; font: inherit; text-align: left;
}
.partner-reviews-title { margin: 0; }
.partner-reviews-head-right { display: inline-flex; align-items: center; gap: 8px; }
.partner-reviews-chevron { font-size: 16px; color: var(--gray-400); transition: transform 0.15s; }
.partner-reviews-head[aria-expanded="true"] .partner-reviews-chevron { transform: rotate(180deg); }
.partner-reviews-avg { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--teal-dark); white-space: nowrap; }
/* Статичная шапка блока отзывов на странице «Отзывы» (карточка «только
   отзывы») — без кнопки-тоггла, список сразу развёрнут под ней. */
.partner-reviews-static-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 0 12px; flex-wrap: wrap;
}
.partner-reviews-list { display: flex; flex-direction: column; gap: 10px; }
.partner-review-row { background: var(--gray-50, #FAFAF8); border-radius: 12px; padding: 12px 14px; }
.partner-review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.partner-review-author { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.partner-review-meta { font-size: 12px; color: var(--gray-400, #9A9A94); margin-top: 3px; }
.partner-review-text { font-size: 13px; color: var(--gray-600, #5A5A56); margin-top: 6px; overflow-wrap: anywhere; }
.pass-contact {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--gray-900); text-decoration: none;
  transition: background 0.15s;
}
a.pass-contact:hover { background: var(--gray-50); }
.pass-contact .ti { font-size: 18px; color: var(--teal-dark); flex-shrink: 0; }
.pass-contact-gis { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
.pass-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-addresses { position: relative; }
.pass-contact-btn { width: 100%; background: #fff; cursor: pointer; font-family: inherit; }
.pass-contact-btn:hover { background: var(--gray-50); }

/* Кнопка промокода: после раскрытия — код моноширинным на зелёной плашке */
.promo-btn.promo-revealed { border-color: var(--teal-mid); background: var(--teal-light); color: var(--teal-dark); }
.promo-btn.promo-revealed:hover { background: var(--teal-light); }
.promo-btn.promo-revealed [data-promo-text] {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700; letter-spacing: 1.5px;
}
.pass-addresses-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 10;
  background: #fff; border: 1.5px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(15, 110, 86, 0.35);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
/* display: flex выше перебил бы UA-правило [hidden]{display:none} — возвращаем */
.pass-addresses-pop[hidden] { display: none; }
.pass-addresses-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; text-align: left; }
.pass-addresses-item .ti { font-size: 15px; color: var(--teal-dark); flex-shrink: 0; margin-top: 1px; }

/* ===== PHOTO UPLOAD ===== */
.photo-field { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.photo-preview {
  width: 64px; height: 64px; border-radius: 14px; object-fit: cover;
  background: var(--teal-light); display: flex; align-items: center; justify-content: center;
  color: var(--teal-dark); font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload-btn {
  font-size: 13px; font-weight: 500; color: var(--teal-dark);
  border: 1.5px dashed var(--teal-mid); background: var(--teal-light);
  padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer;
}
.photo-upload-btn input { display: none; }
.photo-remove-btn { font-size: 13px; color: var(--teal-dark); background: none; border: 0; padding: 9px 0; cursor: pointer; text-decoration: underline; }

/* ===== AVATAR IMG (фото в списках) ===== */
.member-avatar img, .company-logo img, .deal-logo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.member-avatar { overflow: hidden; }

/* ===== ROLE BADGE ===== */
.role-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.role-member { background: var(--gray-100); color: var(--gray-600); }
/* Имя + бейдж роли: в одну строку, если влезает; иначе бейдж переносится на новую строку */
.member-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}
.member-name-row h4 { min-width: 0; }

/* ===== SUB-TABS (Добавить) ===== */
.subtabs {
  display: flex; gap: 6px; background: var(--gray-100);
  border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px;
}
.subtab {
  flex: 1; padding: 10px; text-align: center; font-size: 13px; font-weight: 500;
  color: var(--gray-400); border: none; background: none; border-radius: 6px;
  cursor: pointer; font-family: var(--font-body); transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.subtab.active { background: #fff; color: var(--teal-dark); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ============================================================
   DESKTOP ADAPTATION  (≥ 900px)
   Тот же стиль, адаптированный под ПК. Все правила выше —
   мобильные и НЕ изменяются. Здесь только надстройка для
   больших экранов: раскладка-дашборд, сетки, ховеры.
   ============================================================ */
@media (min-width: 900px) {

  /* Атмосферный фон вместо плоского серого */
  body {
    background:
      radial-gradient(1100px 560px at 100% -8%, rgba(29,158,117,0.10), transparent 60%),
      radial-gradient(900px 520px at -8% 112%, rgba(93,202,165,0.13), transparent 55%),
      #E7EFEB;
  }

  /* Приложение — «парящая» карточка по центру экрана */
  .app {
    max-width: 1180px;
    margin: 28px auto;
    min-height: calc(100vh - 56px);
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(15,110,86,0.07);
    box-shadow:
      0 34px 80px -34px rgba(15,110,86,0.40),
      0 6px 20px rgba(20,30,25,0.05);
  }

  /* Шапка крупнее и просторнее */
  .top-nav { padding: 17px 30px; }
  .logo { font-size: 18px; }

  /* ---- ВАРИАНТ 1: залогинен → дашборд с боковым меню ---- */
  .app:has(.bottom-nav) {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "nav  nav"
      "side main";
    height: calc(100vh - 56px);
    min-height: auto;
  }
  .app:has(.bottom-nav) .top-nav { grid-area: nav; position: static; }
  .app:has(.bottom-nav) .main-content {
    grid-area: main;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 32px;
  }


  .app:has(.bottom-nav) .bottom-bar { display: contents; }
    /* Центрирование подвала*/
  .app:has(.bottom-nav) .site-footer { justify-content: center; padding: 12px 30px; }

  /* Нижняя навигация → вертикальный боковой рельс */
  .app:has(.bottom-nav) .bottom-nav {
    grid-area: side;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 22px 14px;
    border-top: none;
    border-right: 1px solid var(--gray-200);
    background: linear-gradient(180deg, var(--gray-50), #fff 70%);
  }
  .app:has(.bottom-nav) .bnav-item {
    /* Рельс вертикальный: мобильное `flex: 1 1 0` растянуло бы пункты
       на всю его высоту. */
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 12px;
    transition: background .15s, color .15s;
  }
  .app:has(.bottom-nav) .bnav-item i { font-size: 20px; }
  .app:has(.bottom-nav) .bnav-item:hover { background: var(--gray-100); color: var(--gray-700); }
  .app:has(.bottom-nav) .bnav-item.active { background: var(--teal-light); color: var(--teal-dark); }

  /* ---- ВАРИАНТ 2: лендинг/логин → карточка растёт по контенту ---- */
  .app:not(:has(.bottom-nav)) .main-content { overflow: visible; }

  /* Логин — компактная сфокусированная карточка: растёт по контенту,
     иначе min-height у .app растягивает её на весь экран и под формой
     остаётся огромная пустая зона */
  .app:has(.auth-wrap) { max-width: 560px; min-height: auto; }
  .app:has(.auth-wrap) .main-content { padding-bottom: 0; }
  .auth-wrap { max-width: 420px; margin: 0 auto; padding: 36px 24px 40px; }

  /* ===== ЛЕНДИНГ ===== */
  .hero { padding: 76px 64px 70px; text-align: left; }
  .hero::after {
    content: '';
    position: absolute;
    bottom: -90px; left: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    /* декоративный круг лежит поверх кнопок и перехватывал их клики */
    pointer-events: none;
  }
  .hero h1 { font-size: 46px; line-height: 1.12; max-width: 15ch; margin-bottom: 16px; }
  .hero p { font-size: 17px; max-width: 48ch; margin: 0 0 32px; }
  .hero .btn-primary,
  .hero .btn-secondary {
    display: inline-block;
    width: auto;
    padding: 15px 34px;
    margin: 0;
    transition: transform .18s, box-shadow .18s;
  }
  .hero .btn-secondary { margin-left: 12px; }
  .hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.35); }
  .hero .btn-secondary:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(0,0,0,0.25);
  }

  /* Секции лендинга в сетку: фичи 3-в-ряд, чипы партнёров на всю ширину.
     align-items не задаём — дефолтный stretch выравнивает карточки ряда по высоте. */
  .section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 44px 64px 0;
  }
  .section:last-child { padding-bottom: 52px; }
  .section-title { grid-column: 1 / -1; font-size: 12px; margin-bottom: 4px; }

  /* Карусель спонсоров — не дробим на колонки грида, растягиваем на всю ширину */
  .sponsors-section .carousel { grid-column: 1 / -1; }
  .feature-card {
    margin-bottom: 0;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
  }
  .feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(15,110,86,0.28); }

  /* ===== СТРАНИЦА БИЛЕТА — сфокусированный «кошелёк» ===== */
  .card-page { max-width: 960px; margin: 0 auto; padding: 48px 24px; }
  .pending-banner, .card-page > .feature-card { max-width: 600px; margin-left: auto; margin-right: auto; }
  .deals-toolbar { gap: 12px; }
  .deals-toolbar .deals-city-filter { flex: 0 0 220px; }
  .deals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .deal-card { transition: transform .18s, box-shadow .18s; }
  .deal-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(15,110,86,0.22); }

  /* ===== ПАНЕЛЬ РЕДАКТОРА — широкий дашборд ===== */
  .editor-header { padding: 32px 40px 0; }
  .editor-header h2 { font-size: 24px; }
  .editor-header p { font-size: 14px; }
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 24px 40px;
  }
  .stat-num { font-size: 28px; }
  .editor-tabs { padding: 0 40px; }
  .etab { font-size: 14px; padding: 14px 18px; }
  .etab-content { padding: 24px 40px; max-width: 960px; }

  /* Списки участников / партнёров — мягкий ховер */
  .member-row, .company-row {
    padding-left: 10px; padding-right: 10px;
    border-radius: 10px;
    transition: background .15s;
  }
  .member-row:hover, .company-row:hover { background: var(--gray-50); }

  /* Вкладка «Добавить» — под-вкладки и форма одной центрированной колонкой.
     Однострочную форму городов (.add-form-inline) не сжимаем — ей нужна вся ширина. */
  .etab-content:has(.add-form:not(.add-form-inline)) {
    max-width: 460px;
    margin: 0 auto;
  }
}

/* Тонкая настройка под очень широкие экраны */
@media (min-width: 1280px) {
  .hero h1 { font-size: 52px; }
  .card-page { max-width: 1140px; }
}

.photo-hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--gray-400, #9A9A94);
  margin: -8px 0 16px;
}

.role-chief { background: #F7ECD9; color: #A76F16; }
.role-curator { background: var(--green-light); color: #5C7A2E; }
/* Во всю строку, с боковыми отступами как у stats-row/editor-tabs.
   Десктопный override — здесь же: базовое правило стоит в файле позже
   медиаблока редактора (min-width: 900px) и иначе перебивало бы его. */
.city-filter { padding: 0 20px; margin-bottom: 14px; }
@media (min-width: 900px) { .city-filter { padding: 0 40px; margin-bottom: 18px; } }
.form-input-static { background: var(--gray-100, #F2F2EE); color: var(--gray-600, #5A5A56); }
/* Иконочная кнопка экспорта — размером с .action-btn, чтобы в тулбаре
   выравниваться по кнопкам действий в строках списка */
.btn-export { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; padding: 0; border: 1px solid var(--teal-mid, #1D9E75); background: #fff; color: var(--teal-dark, #0F6E56); border-radius: 10px; font-size: 17px; cursor: pointer; flex-shrink: 0; }
.btn-export:hover { background: var(--teal-light); }
.members-search { display: block; resize: vertical; min-height: 48px; margin-bottom: 10px; }
.modal-role-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-100, #F2F2EE); }
/* .btn-secondary по умолчанию рассчитан на тёмный hero (белый текст) — здесь
   модалка белая, переопределяем как в .confirm-actions .btn-secondary. */
.btn-reset-password.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px; width: auto;
  border: 1.5px solid var(--gray-200); border-radius: 10px; background: #fff;
  color: var(--gray-700); font-size: 14px; font-weight: 600; padding: 10px 16px; margin-top: 0;
}
.btn-reset-password.btn-secondary:hover { background: var(--gray-100, #F2F2EE); }
.temp-password-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--gray-50, #FAFAF8); border: 1.5px dashed var(--gray-200); border-radius: 10px;
  padding: 14px 16px; margin: 12px 0 4px;
}
.temp-password-value { font-family: var(--font-mono, monospace); font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--gray-900); }
.temp-password-box .btn-secondary {
  display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0;
  border: 1.5px solid var(--gray-200); border-radius: 10px; background: #fff;
  color: var(--gray-700); font-size: 13px; font-weight: 600; padding: 8px 14px; white-space: nowrap;
}
.temp-password-box .btn-secondary:hover { background: var(--gray-200, #EDEDE8); }

.address-row { display: flex; gap: 8px; margin-bottom: 8px; }
.address-row .form-input { flex: 1; }

/* Скидка: число + иконочный переключатель типа (%/₽) в одной строке */
.discount-row { display: flex; gap: 8px; align-items: stretch; }
.discount-row .form-input { flex: 1; }
/* Для типа «спецусловия» поле числа заблокировано (текст в описании акции) */
.discount-row .form-input:disabled { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.discount-type-toggle { display: flex; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.dt-btn { display: flex; align-items: center; justify-content: center; width: 40px; border: none; background: #fff; color: var(--gray-400); font-size: 18px; cursor: pointer; transition: background .15s, color .15s; }
.dt-btn + .dt-btn { border-left: 1.5px solid var(--gray-200); }
.dt-btn.active { background: var(--teal, #1D9E75); color: #fff; }
/* Кнопка составной скидки — текст «до» вместо иконки */
.dt-btn-text { font-size: 13px; font-weight: 700; }

/* Срок действия акции и архив в списке партнёров редактора */
.company-validity { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.company-validity.expired { color: #C0392B; font-weight: 600; }
.company-row-archived { opacity: .65; }
.btn-archive { border-color: #A76F16; color: #A76F16; }
.btn-archive:hover { background: #F7ECD9; }

/* Мультивыбор пользователей и архив */
/* min-height 36px (высота .btn-export и .bulk-bar): высота ряда одинакова
   с баром выбора и без него — список участников не сдвигается */
.members-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; min-height: 36px; }
.select-all { display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.select-all input, .member-check input { width: 17px; height: 17px; accent-color: var(--teal, #1D9E75); cursor: pointer; }
.select-all input:disabled, .member-check input:disabled { cursor: not-allowed; }
.member-check { display: flex; align-items: center; cursor: pointer; }
.member-row-archived { opacity: .65; }
.member-archived-note { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
/* Компактный бар (36px, как .btn-export): его появление при выборе чекбокса
   не увеличивает высоту тулбара */
.bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 3px 12px; min-height: 36px; background: var(--green-light, #EAF5E2); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
/* Бар выбора встаёт между select-all и кнопкой экспорта в один ряд на всех
   ширинах: ширина — по содержимому, авто-маргины центрируют его в свободном
   пространстве; min-width:0 позволяет сжиматься на узких экранах, не перенося
   кнопку экспорта на новую строку */
.members-toolbar .bulk-bar { margin-left: auto; margin-right: auto; min-width: 0; }
/* На узких экранах ужимаем шрифт и отступы, чтобы «Выбрано: N», «В архив»
   и «Сброс» умещались в одну строку бара (иначе он растёт по высоте) */
@media (max-width: 899px) {
  .bulk-bar { gap: 8px; padding: 3px 8px; font-size: 12px; }
  .btn-bulk, .btn-bulk-clear { font-size: 12px; padding: 4px 8px; }
}
@media (min-width: 900px) {
  /* Боковые отступы 10px — как у .member-row на ПК: чекбокс select-all
     встаёт по вертикали над чекбоксами строк, экспорт — над кнопками действий */
  .members-toolbar { padding: 0 10px; }
}
.btn-bulk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #A76F16; background: #fff; color: #A76F16; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-bulk:hover { background: #F7ECD9; }
/* Кнопка сброса — той же формы, что .btn-bulk, но в серых тонах и без иконки */
.btn-bulk-clear { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--gray-400); background: #fff; color: var(--gray-600); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-bulk-clear:hover { background: var(--gray-100); }

/* Модалка подтверждения изменений */
.confirm-modal { max-width: 420px; }
.confirm-desc { font-size: 14px; color: var(--gray-700); margin-bottom: 10px; }
.confirm-desc b { color: var(--gray-900); }
.confirm-list { margin: 0 0 10px; padding-left: 18px; font-size: 14px; color: var(--gray-900); }
.confirm-list li { margin-bottom: 4px; }
.diff-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
.diff-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); padding: 6px 8px; border-bottom: 1px solid var(--gray-200); }
.diff-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-100, #F2F2EE); vertical-align: top; word-break: break-word; }
.diff-table td:first-child { color: var(--gray-400); white-space: nowrap; }
/* flex-wrap — аварийный запас для ~320px: подписи кнопок держим короткими,
   чтобы ряд оставался одной строкой (см. спеку модалки ошибок) */
.confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* .btn-secondary рассчитан на тёмный hero (белый текст) — в белой модалке нужен свой вид */
.confirm-actions .btn-secondary { margin: 0; width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 10px 16px; border: 1.5px solid var(--gray-200); border-radius: 10px; background: #fff; color: var(--gray-700); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.confirm-actions .btn-secondary:hover { background: var(--gray-100, #F2F2EE); }
/* margin-top из базового .btn-add опускал кнопку ниже «Отмены», а прозрачная
   рамка 1.5px уравнивает высоту с .btn-secondary (у той рамка видимая) */
.confirm-actions .confirm-ok { margin: 0; width: auto; padding: 10px 18px; border: 1.5px solid transparent; border-radius: 10px; white-space: nowrap; }
.btn-danger { padding: 10px 18px; border: 1.5px solid transparent; border-radius: 10px; background: #E24B4A; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-danger:hover { background: #C93F3E; }
.btn-add-address { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px; border: 1px dashed var(--teal-mid, #1D9E75); background: #fff; color: var(--teal-dark, #0F6E56); border-radius: 10px; font-size: 13px; cursor: pointer; }

/* ===== Модалка ошибок (спека: docs/superpowers/specs/2026-08-05-error-modal-design.md) ===== */
.error-modal { max-width: 400px; }
.error-head { justify-content: flex-start; align-items: flex-start; gap: 12px; }
/* padding-top выравнивает однострочный заголовок по центру плашки 40px */
.error-head h3 { flex: 1; min-width: 0; text-wrap: balance; padding-top: 8px; }
.error-head .modal-close { margin-left: auto; }
.error-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.error-icon.tone-red { background: #FCEBEB; color: #E24B4A; }
.error-icon.tone-warn { background: #FEF3CD; color: #D97706; }
.error-icon.tone-teal { background: var(--teal-light); color: var(--teal-dark); }
.error-icon.tone-gray { background: var(--gray-100); color: var(--gray-600); }
.error-text { font-size: 14px; color: var(--gray-700); }
.error-hint { margin-top: 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: 9px; }
.error-hint i { color: var(--gray-400); }
.error-tech { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--gray-400); }
.error-tech button { background: none; border: none; cursor: pointer; color: var(--gray-400); padding: 3px; border-radius: 6px; display: flex; }
.error-tech button:hover { background: var(--gray-100); color: var(--gray-600); }
.confirm-actions .confirm-ok:disabled { opacity: .6; cursor: not-allowed; }
.confirm-actions .confirm-ok:disabled:hover { background: var(--teal); }

.partners-page { padding: 20px; }
.partners-title { text-align: center; font-size: 18px; }
.partners-city-filter { max-width: 320px; margin: 0 auto 16px; }

/* ===== Комбобокс города (пилюля с поиском) ===== */
.city-combo { position: relative; }
.city-combo-pin {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--teal); font-size: 17px; pointer-events: none;
}
.city-combo-input {
  width: 100%; padding: 10px 40px 10px 38px;
  border: 1.5px solid var(--teal-mid); border-radius: 24px;
  font-family: var(--font-body); font-size: 14px; color: var(--gray-900);
  background: #fff; outline: none; transition: border-color .2s;
}
.city-combo-input:focus { border-color: var(--teal); }
.city-combo-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--gray-400);
  font-size: 16px; padding: 6px; display: flex; border-radius: 50%;
}
.city-combo-toggle:hover { background: var(--gray-100); }
.city-combo-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  box-shadow: 0 12px 28px -12px rgba(15,110,86,0.3);
  max-height: 240px; overflow-y: auto; padding: 6px;
}
.city-combo-option {
  padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.city-combo-option:hover, .city-combo-option.highlighted { background: var(--gray-100); }
.city-combo-option.selected { background: var(--teal-light); color: var(--teal-dark); font-weight: 600; }
.city-combo-option.selected i { font-size: 15px; }
.city-combo-empty { padding: 10px 12px; font-size: 13px; color: var(--gray-400); }
/* Desktop: заголовок слева, выбор города справа; мобильная раскладка выше не меняется */
@media (min-width: 900px) {
  .partners-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .partners-head .partners-title { text-align: left; margin-bottom: 0; margin-left: 16px; }
  .partners-head .partners-city-filter { margin: 0 16px 0 0; width: 240px; }
}
/* align-items не задаём: карточки грида растягиваются на высоту ряда — равная высота */
/* minmax(0,1fr) нужен и одной колонке, не только двум: у `1fr` автоминимум
   трека — min-content карточки (лого 64 + несжимаемый бейдж скидки + текст),
   это 337 px, и на экранах уже 377 px список вылезал за край. */
.partners-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* 2 колонки только с 900px — до этого .app зажат до 430px (мобильная карточка),
   и грид не влезает */
@media (min-width: 900px) { .partners-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partners-list .empty-msg { grid-column: 1 / -1; }
/* Карточка: лого | текстовый столбец | номинал скидки — всё по центру по высоте */
.partner-card {
  background: #fff; border: 1px solid var(--gray-100, #F2F2EE); border-radius: 16px; padding: 16px;
  display: flex; align-items: center; gap: 14px;
}
/* Кликабельна только у авторизованных (атрибут не рендерится гостям) */
.partner-card[data-open-partner] { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.partner-card[data-open-partner]:hover {
  border-color: var(--teal-mid);
  box-shadow: 0 10px 26px -16px rgba(15, 110, 86, 0.4);
}
.partner-card .deal-logo { width: 64px; height: 64px; font-size: 14px; }
/* Тело растягивается на высоту карточки, контент центрируется — блоки текста
   выглядят одинаково при любой высоте ряда */
.partner-card-body {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.partner-card-body h3 { font-size: 17px; font-weight: 600; }
/* Название + город в одну строку (город по центру строки названия);
   если не влезает — город переносится вниз */
.partner-card-title { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }
.partner-card-title h3 { min-width: 0; }
.partner-discount {
  align-self: center; flex-shrink: 0; margin-left: auto;
  font-size: 22px; font-weight: 900; color: var(--teal-dark, #0F6E56);
  background: var(--teal-light, #E1F5EE); padding: 8px 14px; border-radius: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.partner-city { font-size: 13px; color: var(--gray-400, #9A9A94); display: inline-flex; align-items: center; gap: 4px; }
/* Описание: максимум 2 строки, лишнее обрезается — карточки не разъезжаются по высоте */
.partner-deal {
  margin-top: 6px; color: var(--gray-600, #5A5A56); font-size: 15px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
/* Слово-ссылка внутри заголовка секции («Наши спонсоры») */
.title-link { color: var(--teal, #1D9E75); font-weight: 700; text-decoration: none; }
.title-link:hover { color: var(--teal-dark, #0F6E56); }

.sponsors-section { text-align: center; }
/* «Как это работает» на главной — заголовок по центру, как «Наши партнёры»
   (тот центрируется через text-align у .sponsors-section). */
.how-title { text-align: center; }
/* container-type: карусель — сама себе точка отсчёта. Соседние карточки
   должны включаться по ширине, которая у карусели реально есть, а не по
   ширине окна: .app зажат до 430px до 900px, а у залогиненного с 900px ещё
   и 250px уходит на боковой рельс. */
.carousel { display: flex; align-items: center; justify-content: center; gap: 16px; container-type: inline-size; }
.carousel-arrow {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gray-100, #F2F2EE); background: #fff; color: var(--teal-dark, #0F6E56);
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.carousel-arrow:hover { background: var(--gray-100, #F2F2EE); }
.carousel-track {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  /* Без min-width: 0 трек не ужимается ниже min-content, и стрелки
     (2×40px + 2×16px зазора) выдавливаются за края экрана. */
  min-width: 0;
  animation: carousel-in .22s ease;
}
@keyframes carousel-in { from { opacity: 0; transform: translateY(4px); } }
.sponsor-card {
  flex: 0 0 auto; background: #fff; border: 1px solid var(--gray-100, #F2F2EE);
  border-radius: 18px; padding: 20px; box-shadow: 0 8px 24px -12px rgba(15,110,86,0.25);
  transition: transform .2s ease, opacity .2s ease;
}
/* max-width по треку, а не по 78vw: доля окна не знала про стрелки и
   отступы страницы, и на 375px карточка выпихивала стрелки за экран. */
.sponsor-card.active { width: 260px; max-width: 100%; cursor: pointer; }
/* На самых узких экранах из ширины карусели 112px забирают стрелки с
   зазорами, и «СпортЛайф» (134px) переносился посреди слова — ужимаем
   боковые отступы, как у .side/.far ниже. */
@container (max-width: 300px) { .sponsor-card.active { padding-left: 12px; padding-right: 12px; } }
/* Цепочка coverflow: соседи полупрозрачны и кликабельны, дальние — мельче и
   бледнее. По умолчанию (узкая карусель) видна только активная карточка,
   соседей открывают контейнерные запросы ниже — «если места хватает». */
.sponsor-card.side, .sponsor-card.far { display: none; cursor: pointer; }
/* У узких карточек ужимаем боковые отступы — иначе длинное слово
   («СпортЛайф») не влезает по ширине и срезается overflow'ом. */
.sponsor-card.side { width: 150px; padding: 16px 10px; transform: scale(0.92); opacity: 0.55; }
.sponsor-card.far { width: 130px; padding: 16px 8px; transform: scale(0.84); opacity: 0.28; }
.sponsor-card.side p, .sponsor-card.far p { display: none; }
.sponsor-card.side h3 { font-size: 14px; }
.sponsor-card.far h3 { font-size: 13px; }
.sponsor-card.side:hover, .sponsor-card.side:focus-visible { opacity: 0.85; transform: scale(0.95); }
.sponsor-card.far:hover, .sponsor-card.far:focus-visible { opacity: 0.6; transform: scale(0.87); }
/* Пороги — точный бюджет ширины карусели, а не «на глаз» по окну:
   соседи   = 2×40 стрелки + 2×16 зазора + (150 + 14 + 260 + 14 + 150) = 700px
   дальние  = те же 112 + (130 + 14 + 150 + 14 + 260 + 14 + 150 + 14 + 130) = 988px
   Прежние @media 760px/1140px мерили окно: на планшете .app всё ещё 430px,
   и соседние карточки вылезали за белую карточку приложения. */
@container (min-width: 700px) { .sponsor-card.side { display: block; } }
@container (min-width: 988px) { .sponsor-card.far { display: block; } }
.sponsor-logo {
  width: 72px; height: 72px; border-radius: 16px; margin: 0 auto 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 22px;
}
.sponsor-logo img { width: 100%; height: 100%; object-fit: cover; }
/* Название и описание занимают фиксированные 2 строки (лишнее обрезается) —
   карточки одного размера при любой длине текста. */
.sponsor-card h3, .sponsor-card p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; /* слово длиннее строки переносится, а не срезается */
}
.sponsor-card h3 { font-family: var(--font-display, inherit); font-size: 17px; line-height: 1.25; height: 2.5em; margin-bottom: 6px; }
.sponsor-card p { font-size: 14px; line-height: 1.45; height: 2.9em; color: var(--gray-600, #5A5A56); }
.form-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; cursor: pointer; font-size: 14px; }
.form-checkbox input { width: 18px; height: 18px; accent-color: var(--teal-mid, #1D9E75); }
/* Чекбокс согласия на регистрации: подпись в 2–3 строки, поэтому галка прижата
   к первой строке, а не к середине блока; ссылки — в цвет проекта. */
.form-checkbox-consent { align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.form-checkbox-consent input { flex-shrink: 0; margin-top: 1px; }
.form-checkbox-consent a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }

.review-form-company { color: var(--gray-600, #5A5A56); font-weight: 700; text-align: center; margin-bottom: 12px; }
/* «Вы воспользовались акцией?»: галка (да) и крест (нет — закрывает форму) вместо селекта.
   Цвета лежат на review-btn-*, а не на review-used-*, — историческое разделение,
   когда review-used-* были заняты бейджами отзывов в панели редактора */
.review-used-buttons { display: flex; gap: 10px; }
.review-used-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px 0; border: none; border-radius: 10px; cursor: pointer;
  font-size: 20px; color: #fff; transition: background .3s;
}
.review-used-btn:active { transform: scale(.98); }
.review-btn-yes { background: var(--teal); }
.review-btn-yes:hover { background: var(--teal-dark); }
/* «нажато»: темнее ховера, чтобы клик был виден даже под курсором */
.review-btn-yes.selected { background: #0A5240; }
.review-btn-no { background: #E24B4A; }
.review-btn-no:hover { background: #C93F3E; }
.stars { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.star { background: none; border: none; cursor: pointer; font-size: 30px; line-height: 1; color: var(--gray-400, #9A9A94); padding: 2px; }
.star.filled { color: var(--teal); }
.review-comment { width: 100%; resize: vertical; margin-bottom: 14px; }

.reviews-filter { margin-bottom: 14px; }
.reviews-partner-select { max-width: 320px; cursor: pointer; }

/* Компактный селект ГОСБ в строке города на /editor — .form-select по
   умолчанию width:100%, здесь он делит строку с кнопкой удаления. */
.city-gosb-select { width: auto; max-width: 180px; padding: 8px 30px 8px 12px; font-size: 13px; }
.gosb-section-title { margin-top: 28px; }
/* Кнопка «Редактировать контакты» на вкладке «Поддержка» — тёмно-зелёный
   контур и иконка в палитре проекта */
.btn-support { border-color: var(--teal-dark); color: var(--teal-dark); }
.btn-support:hover { background: var(--teal-light); }
/* Строка ГОСБ кликабельна целиком, но без подсветки при наведении
   (перекрываем и десктопный серый ховер всех .member-row) */
.gosb-support-row { cursor: pointer; }
.member-row.gosb-support-row:hover { background: none; }
.hint-text { font-size: 12px; color: var(--gray-400); line-height: 1.5; margin: -6px 0 14px; }

.review-row { background: #fff; border: 1px solid var(--gray-100, #F2F2EE); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.review-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-row-head h4 { font-weight: 600; }
.review-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--teal-dark); white-space: nowrap; }
.review-star { display: inline-flex; }
.review-star-empty { color: var(--gray-200); }
.review-meta { font-size: 12px; color: var(--gray-400, #9A9A94); margin-top: 4px; }
/* overflow-wrap: отзыв из одного длинного «слова» не должен распирать карточку */
.review-text { font-size: 14px; color: var(--gray-600, #5A5A56); margin-top: 8px; overflow-wrap: anywhere; }

/* Модерация отзывов: бейджи статуса и кнопки одобрить/отклонить */
.review-status { display: inline-flex; align-items: center; font-size: 12px; margin-top: 6px; padding: 2px 8px; border-radius: 20px; }
.review-status-pending { color: #8A6D1A; background: #FBF3D9; }
.review-status-rejected { color: #B3403F; background: #FCEBEB; }
.review-moderation-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Тумблер «Модерация отзывов» — виден только главному куратору */
.moderation-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; cursor: pointer; font-size: 14px; }
.moderation-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.moderation-switch { width: 38px; height: 22px; border-radius: 22px; background: var(--gray-200); position: relative; transition: background .15s; flex-shrink: 0; }
.moderation-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.moderation-toggle input:checked + .moderation-switch { background: var(--teal); }
.moderation-toggle input:checked + .moderation-switch::after { left: 19px; }
.moderation-hint { font-size: 12px; color: var(--gray-400, #9A9A94); }

.log-hint { font-size: 13px; color: var(--gray-400, #9A9A94); margin: -6px 0 14px; }
.log-row { background: #fff; border: 1px solid var(--gray-100, #F2F2EE); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; }
.log-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.log-actor { font-weight: 600; font-size: 14px; }
.log-time { font-size: 12px; color: var(--gray-400, #9A9A94); margin-left: auto; white-space: nowrap; }
.log-desc { font-size: 13px; color: var(--gray-700, #444441); margin-top: 6px; }
.log-city { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-400, #9A9A94); margin-top: 6px; }
.entity-link { color: var(--teal-dark); font-weight: 600; cursor: pointer; }
.entity-link:hover { text-decoration: underline; }
.entity-summary-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
/* Аватар в краткой карточке — вдвое больше, чем в строках списков (38px) */
.entity-summary-head .member-avatar { width: 76px; height: 76px; font-size: 26px; }
.entity-summary-title { display: flex; flex-direction: column; gap: 4px; }
.entity-summary-title h4 { margin: 0; font-size: 16px; }

/* ===== Страница «Профиль» ===== */
.profile-page { padding: 20px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--teal-light); color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 24px;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-head-info h2 { font-size: 20px; margin-bottom: 4px; }
.profile-meta { font-size: 13px; color: var(--gray-400); margin-top: 4px; }
.profile-section-title { margin: 18px 0 12px; font-size: 16px; text-align: center; }
/* Загрузка фото кликом по аватару: бейдж с камерой виден всегда (тач-экраны),
   подсказка-оверлей появляется при наведении/фокусе */
.profile-avatar-upload { position: relative; display: block; cursor: pointer; flex-shrink: 0; }
.profile-avatar-upload input[type="file"] { display: none; }
.profile-avatar-badge {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--teal); color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.profile-avatar-hint {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(15, 110, 86, 0.75); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center;
  display: flex; align-items: center; justify-content: center; padding: 8px;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.profile-avatar-upload:hover .profile-avatar-hint { opacity: 1; }
.profile-form { background: #fff; border: 1px solid var(--gray-100); border-radius: 16px; padding: 16px; }
.profile-request-banner .diff-table { margin-top: 8px; }
.profile-request-banner .confirm-desc { margin-top: 6px; font-size: 13px; }
.btn-cancel-request { margin-top: 10px; padding: 8px 14px; font-size: 13px; }

/* ===== Заявки: строки и карточка ===== */
.request-row { cursor: pointer; }
.request-row:hover { border-color: var(--teal-mid); }
.request-card-head { text-align: center; margin-bottom: 14px; }
.request-card-head h4 { font-size: 16px; margin-top: 8px; }
.request-card-meta { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.request-photo {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0 auto;
  background: var(--teal-light); color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px;
}
.request-photo img { width: 100%; height: 100%; object-fit: cover; }
.request-field {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px;
}
.request-field span { color: var(--gray-400); font-size: 13px; flex-shrink: 0; }
.request-field b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.photo-diff { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.photo-diff-item { text-align: center; }
.photo-diff-item p { font-size: 12px; color: var(--gray-400); margin-bottom: 6px; }
.photo-diff > i { color: var(--gray-400); font-size: 18px; }

/* Мультивыбор городов партнёра в формах */
.city-checklist { display: flex; flex-wrap: wrap; gap: 8px; max-height: 180px; overflow-y: auto; padding: 4px 0; }
.city-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border, #d8e0dc); border-radius: 999px; cursor: pointer; font-size: 14px; }
.city-check:has(input:checked) { background: #e7f5f0; border-color: #1d9e75; }
.city-check input { accent-color: #1d9e75; }

@media (min-width: 900px) {
  .profile-page { max-width: 600px; margin: 0 auto; padding: 48px 24px; }
}

/* Конструктор импорта партнёров */
.modal-card--wide { max-width: 1140px; width: calc(100vw - 32px); max-height: 88vh; display: flex; flex-direction: column; }
.import-summary { padding: 8px 20px; color: #56655f; font-size: 14px; border-bottom: 1px solid #edf1ef; }
.import-table-wrap { overflow: auto; flex: 1; padding: 0 8px; }
.import-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.import-table th { position: sticky; top: 0; background: #fff; text-align: left; padding: 8px 6px; border-bottom: 1px solid #dde5e1; white-space: nowrap; z-index: 1; }
.import-table td { padding: 6px; border-bottom: 1px solid #f0f4f2; vertical-align: top; max-width: 220px; }
.imp-num { color: #9aa7a1; }
.imp-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.imp-status-new { background: #e7f5f0; color: #10775c; }
.imp-status-upd { background: #e8f0fb; color: #1d5eab; }
.imp-status-restore { background: #f1e9fb; color: #7440ad; }
.imp-status-same { background: #eef1f0; color: #7b8781; }
.imp-status-err { background: #fdeaea; color: #b3261e; }
.imp-warn { color: #d8a413; margin-left: 4px; }
.imp-old { color: #9aa7a1; margin-right: 4px; }
.imp-empty { color: #c2ccc7; }
.import-row-muted td { opacity: 0.55; }
.import-row-error td { background: #fff7f7; }
.import-error-row td { color: #b3261e; font-size: 12px; padding-top: 0; }
.import-gosb-row td { padding-top: 0; }
.import-gosb-pick { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; font-size: 13px; }
.import-gosb-pick .form-select { width: auto; padding: 4px 28px 4px 10px; }
.import-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid #edf1ef; flex-wrap: wrap; }
.imp-cell[data-editing] input, .imp-cell[data-editing] select { font-size: 13px; padding: 4px 6px; }
.spin { display: inline-block; animation: imp-spin 1s linear infinite; }
@keyframes imp-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .modal-card--wide { width: calc(100vw - 8px); } }

/* ===== ЮРИДИЧЕСКИЕ СТРАНИЦЫ (/privacy, /consent) ===== */
/* Длинный юридический текст: читаемая ширина строки, спокойная типографика,
   списки с тире как в исходном документе. Разметка приезжает из
   static/privacy.html и static/consent.html (см. loadLegalPage в app.js). */
.legal-page {
  padding: 24px 20px 36px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-700);
  overflow-wrap: anywhere; /* адреса вроде https://профскидки.рф на 320 px */
}
.legal-page h1 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--gray-900);
  margin-bottom: 20px;
}
.legal-page h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gray-900);
  margin: 28px 0 10px;
}
.legal-page p { margin: 0 0 10px; }
.legal-meta { color: var(--gray-400); font-size: 13px; margin: -8px 0 18px; }
.legal-page ul { list-style: none; margin: 0 0 12px; padding: 0; }
.legal-page li { margin-bottom: 6px; }
.legal-page ul li { position: relative; padding-left: 20px; }
.legal-page ul li::before { content: '—'; position: absolute; left: 0; color: var(--gray-400); }
.legal-page ol { margin: 0 0 12px; padding-left: 22px; }
.legal-page ol li { padding-left: 4px; }
.legal-page a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 16px;
  font-size: 14px;
}
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
}
.legal-table th { width: 36%; font-weight: 600; background: var(--gray-50); color: var(--gray-900); }
.legal-table ul { margin: 0; }
.legal-table li:last-child { margin-bottom: 0; }
/* На телефоне двум колонкам тесно: «Персональные» не влезает в 36 % ширины и
   рвётся посреди слова. Складываем строку в «подпись над значением». */
@media (max-width: 599px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table tr { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
  .legal-table th, .legal-table td { border: 0; }
  .legal-table th { padding: 8px 12px; }
  .legal-table td { padding: 8px 12px 10px; }
}
@media (min-width: 900px) {
  .legal-page { max-width: 1040px; margin: 0 auto; padding: 48px 24px 64px; font-size: 16px; }
  .legal-page h1 { font-size: 28px; margin-bottom: 28px; }
  .legal-page h2 { font-size: 18px; margin-top: 34px; }
}

/* Ссылка на Политику в подвале: мельче контактов и на своей строке, когда
   контакты есть; без них — единственный элемент подвала. */
.site-footer-legal { font-size: 13px; text-align: center; }
.site-footer-title ~ .site-footer-legal { flex-basis: 100%; justify-content: center; }