/* ============================================================
   Глобальные стили
   ============================================================ */

:root {
  /* Брендовые цвета — из логотипа Magister Market */
  --brand-blue: #2b5f82; /* основной (ссылки, акценты, активные элементы) */
  --brand-blue-dark: #04385d;
  --brand-light: #759fb8;
  --brand-ink: #04385d; /* заголовки — тёмно-синий из логотипа */
  --brand-tint: rgba(43, 95, 130, 0.09); /* фон мягких кнопок */
  --brand-tint-strong: rgba(43, 95, 130, 0.17);
  /* Градиент как у логотипа: светлая сталь → тёмно-синий */
  --brand-gradient: linear-gradient(135deg, #5b88a4 0%, #2b5f82 45%, #04385d 100%);
  --brand-gradient-h: linear-gradient(90deg, #759fb8 0%, #04385d 100%);
  --brand-orange: #ed8936; /* статус «В обработке» */
  --accent-red: #ed2727; /* сердечко */

  /* Поверхности — берём из Telegram, фолбэки для светлой темы. */
  --bg: var(--tg-theme-bg-color, #fafafa);
  --bg-secondary: var(--tg-theme-secondary-bg-color, #f1f1f1);
  --card-bg: var(--tg-theme-secondary-bg-color, #ffffff);
  /* Поверхности, которые ОБЯЗАНЫ быть непрозрачными (футер, фикс-блоки)
     — иначе сквозь них просвечивает контент позади. */
  --surface-solid: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111);
  --text-hint: var(--tg-theme-hint-color, #999);
  --text-muted: var(--tg-theme-hint-color, #6b7280);
  --link: var(--tg-theme-link-color, var(--brand-blue));
  --border: rgba(127, 127, 127, 0.18);
  --border-strong: rgba(127, 127, 127, 0.3);

  --radius-sm: 8px;
  --radius: 22px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);

  --footer-h: 56px;
}

/* На тёмной теме делаем карточки чуть светлее фона */
html.tg-dark,
body.tg-dark {
  --card-bg: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --shadow-card: none;
  /* Тёмно-синий плохо читается на тёмном фоне — берём светлую сталь */
  --brand-blue: #8db3cb;
  --brand-ink: #b4cfe0;
  --brand-tint: rgba(141, 179, 203, 0.12);
  --brand-tint-strong: rgba(141, 179, 203, 0.22);
  /* Футер на тёмной теме — твёрдый чёрный, иначе через rgba просвечивает контент */
  --surface-solid: var(--tg-theme-bg-color, #000000);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", Inter, Arial,
    sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}
input,
textarea {
  font-family: inherit;
  font-size: inherit;
}
a {
  color: var(--link);
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}

/* ============================================================
   Layout
   ============================================================ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
}

/* Шапка: «MAGISTER MARKET / Мини-приложение» в цветах логотипа */
.header {
  padding: 14px 16px 4px;
  text-align: center;
  flex-shrink: 0;
}
.header__title {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
  background: var(--brand-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.header__subtitle {
  color: var(--brand-light);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 2px;
  line-height: 1.2;
}
.header__h2 {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 14px 0 0;
  color: var(--brand-ink);
  flex-shrink: 0;
}
html.tg-dark .header__title,
body.tg-dark .header__title {
  background-image: linear-gradient(90deg, #b4cfe0 0%, #5b88a4 100%);
}

/* Контейнер контента под шапкой - занимает оставшееся место.
   Используется для вертикального центрирования (Поддержка, пустая корзина,
   пустое избранное, пустая история заказов). */
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.page-content--center {
  justify-content: center;
}

/* ============================================================
   Search bar
   ============================================================ */

.search-row {
  display: flex;
  gap: 10px;
  padding: 8px 16px 4px;
  align-items: center;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  color: var(--brand-blue);
  font-size: 15px;
  font-weight: 500;
}
.back-btn:active {
  opacity: 0.6;
}

.back-btn--inline {
  padding: 4px 8px;
  color: var(--text);
}

.cat-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  gap: 8px;
}
.cat-title {
  flex: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.search {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  gap: 10px;
  box-shadow: var(--shadow-card);
}
.search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  /* На iOS у type=search есть встроенная иконка лупы слева и крестик справа.
     Они конфликтуют с нашей лупой; отключаем. */
  -webkit-appearance: none;
  appearance: none;
}
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-results-button,
.search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}
.search input::placeholder {
  color: var(--text-hint);
}
.search__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.1s;
}
.icon-btn:active {
  transform: scale(0.94);
}

/* ============================================================
   Promo slider (homepage)
   ============================================================ */

.slider {
  margin: 12px 16px 0;
  position: relative;
}
.slider__track {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 19 / 6; /* формат баннеров 19:6, например 1900×600 */
  position: relative;
  background: var(--card-bg);
}
.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
.slider__slide--active {
  opacity: 1;
}
.slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.slider__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition:
    width 0.2s,
    background 0.2s;
}
.slider__dot--active {
  background: var(--brand-blue);
  width: 20px;
  border-radius: 4px;
}

/* Видео-баннер на главной (вместо слайдера). Пропорции задаются инлайном
   из BRAND.heroVideoRatio; фон — как у роликов, чтобы не мелькало при загрузке.
   Ролики лежат друг над другом, виден только текущий (.is-active). */
.hero-video {
  position: relative;
  margin: 12px 16px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #2e3344;
}
.hero-video--link {
  cursor: pointer;
}
.hero-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-video video.is-active {
  opacity: 1;
}

/* ============================================================
   Section header
   ============================================================ */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 16px 12px;
}
.section-head__title {
  font-weight: 800;
  font-size: 22px;
  color: var(--brand-ink);
}
.section-head__link {
  color: var(--brand-blue);
  font-size: 15px;
  font-weight: 500;
}

/* ============================================================
   Channel card
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
  padding-top: 12px;
  margin-bottom: 15px;
}

/* Hits row: горизонтальный скролл, узкие карточки */
.hits {
  display: flex;
  gap: 12px;
  padding: 0 16px 16px;
  margin-left: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hits::-webkit-scrollbar {
  display: none;
}
.hits > .card {
  scroll-snap-align: start;
  width: 50%;
  min-width: 175px;
  max-width: 180px;
  flex-shrink: 0;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.card__top {
  padding: 10px 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card__messenger {
  width: 20px;
  height: 20px;
  display: block;
}
.card__fav-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.card__fav-btn svg {
  width: 20px;
  height: 20px;
}

.card__avatar {
  width: 96px;
  height: 96px;
  margin: 6px auto 0;
  background: var(--bg-secondary);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 14px;
  overflow: hidden;
}
.card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.card__title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  /* Ограничиваем длинные названия до 2 строк, иначе карточки разной высоты
     и цена/кнопка съезжают на разные уровни между карточками в одной сетке. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(15px * 1.2 * 2); /* резервируем место под 2 строки */
}
.card__handle {
  color: var(--brand-blue);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__stats {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}
.card__stats b {
  color: var(--text);
  font-weight: 600;
}
.card__desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  background: rgba(127, 127, 127, 0.12);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: none;
}
/* У интеграций описание показываем — это их основная информация */
.card__desc--visible {
  display: -webkit-box;
  -webkit-line-clamp: 4;
}
.card__price {
  font-weight: 800;
  font-size: 18px;
  margin-top: auto; /* прижимаем цену к низу карточки */
  padding-top: 10px;
  text-align: center;
}
/* ============================================================
   Action Button / "В корзину" 
   ============================================================ */

.card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-tint); /* Полупрозрачный фирменный фон */
  color: var(--brand-blue); /* Фирменный цвет текста и иконок */
  font-weight: 600;
  text-align: center;
  font-size: 15px;
  padding: 11px 16px;
  border-radius: 12px; /* Мягкое скругление углов, как на референсе */
  border: none;
  width: 100%;
  margin-top: 12px;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.card__action:active {
  background: var(--brand-tint-strong); /* Более насыщенный отклик при тапе */
}

/* Состояние «В корзине» — меняется на нейтральный светло-серый */
.card__action--in {
  background: var(--bg-secondary);
  color: var(--text-hint);
}

.card__action--in:active {
  background: var(--border-strong);
}

/* Иконка внутри кнопки */
.card__action-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* ============================================================
   Category page
   ============================================================ */

/* Три вкладки в ряд (Max | Telegram | Интеграции): иконка сверху, подпись снизу */
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 16px 4px;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  text-align: center;
  color: var(--text);
  min-width: 0;
}
/* Текстовый контейнер */
.tab__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  max-width: 100%;
}

/* Заголовок (Max / Telegram / Интеграции) */
.tab__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Подзаголовок (Каналы) */
.tab__subtitle {
  font-size: 11px;
  font-weight: 400;
  color: #8e8e93; /* Серый цвет субтитра */
  margin-top: 1px;
}
.tab--active {
  background: var(--brand-gradient);
  color: #fff;
  border-color: transparent;
}
.tab--active .tab__title {
  color: #fff;
}

.tab--active .tab__subtitle {
  color: rgba(255, 255, 255, 0.7); /* Белый полупрозрачный цвет текста */
}
.tab__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tab__icon img {
  width: 100%;
  height: 100%;
}
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px 0;
  margin-bottom: 15px;
}
.cat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: inherit;
  cursor: pointer;
}
.cat-card__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}
.cat-card__accent {
  width: 40%;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-gradient-h);
}
/* ============================================================
   Bottom navigation
   ============================================================ */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface-solid);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: 4px 0;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
  z-index: 100;
}
.bottom-nav__item {
  display: grid;
  place-items: center;
  position: relative;
  padding: 4px 8px;
  width: 48px;
  height: 44px;
}
.bottom-nav__item img {
  max-width: 36px;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bottom-nav__badge {
  position: absolute;
  top: 0;
  right: 6px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* ============================================================
   Cart / Favorites
   ============================================================ */

.empty-state {
  text-align: center;
  padding: 24px;
}
.empty-state img {
  width: 140px;
  margin: 0 auto 24px;
}
.empty-state__title {
  font-size: 24px;
  font-weight: 800;
  margin-top: 16px;
}
.empty-state__text {
  color: var(--text-muted);
  margin-top: 16px;
  line-height: 1.5;
}
.empty-state__btn {
  display: inline-block;
  margin-top: 24px;
  padding: 18px 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-weight: 700;
  color: var(--text);
  background: var(--card-bg);
}

.cart-list {
  padding: 0 16px 290px; /* место под фиксированный блок оформления */
  flex: 1;
}

.list {
  padding: 8px 16px 16px;
}

.checkout-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
  background: var(--surface-solid);
  border-top: 1px solid var(--border);
}
/* Желаемая дата/время размещения — над промокодом, в том же сером блоке */
.schedule-row {
  padding: 12px 16px 0;
  background: var(--bg-secondary);
}
.schedule-row__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 4px 8px;
}
.schedule-row__label span {
  font-weight: 400;
  color: var(--text-hint);
  margin-left: 4px;
}
.schedule-row__fields {
  display: flex;
  gap: 10px;
  align-items: center;
}
.schedule-field {
  position: relative;
  flex: 1.2;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  height: 46px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
}
.schedule-field--time {
  flex: 1;
}
.schedule-field--disabled {
  opacity: 0.5;
}
.schedule-field input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  padding: 0;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
html.tg-dark .schedule-field input,
body.tg-dark .schedule-field input {
  color-scheme: dark; /* светлая иконка календаря на тёмной теме */
}
.schedule-field input::-webkit-date-and-time-value {
  text-align: left;
}
/* Пустое поле: прячем маску «дд.мм.гггг» и показываем свою подпись.
   При фокусе маску возвращаем, чтобы на десктопе было видно ввод. */
.schedule-field__placeholder {
  position: absolute;
  left: 16px;
  color: var(--text-hint);
  pointer-events: none;
  display: none;
}
.schedule-field--empty .schedule-field__placeholder {
  display: block;
}
.schedule-field--empty input:not(:focus) {
  color: transparent;
}
.schedule-field--empty:focus-within .schedule-field__placeholder {
  display: none;
}
.schedule-row__clear {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
}

.promo-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary);
}
.promo-row input {
  flex: 1;
  min-width: 0; /* иначе input не сжимается и выталкивает кнопку за экран */
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
}
.promo-row button {
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-weight: 700;
}

.checkout-bar {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cart-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.cart-item__avatar {
  width: 96px;
  height: 96px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 14px;
  overflow: hidden;
}
.cart-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cart-item__title {
  font-weight: 700;
  font-size: 16px;
}
.cart-item__handle {
  font-size: 14px;
  color: var(--brand-blue);
}
.cart-item__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.cart-item__messenger {
  width: 22px;
  height: 22px;
}
.cart-item__price {
  font-weight: 700;
  font-size: 15px;
}
.cart-item__remove {
  padding: 4px;
  color: var(--text-muted);
}
.cart-item__remove svg {
  width: 20px;
  height: 20px;
}

.checkout-bar__total {
  font-size: 13px;
  color: var(--text-muted);
}
.checkout-bar__amount {
  font-size: 22px;
  font-weight: 800;
}
.checkout-bar__cpm {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 600;
}
.checkout-bar__count {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 4px;
}
.btn-primary {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 18px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 16px;
}
.btn-primary:active {
  transform: scale(0.98);
}
.btn-primary:disabled {
  opacity: 0.5;
}

/* ============================================================
   Support
   ============================================================ */

.support {
  padding: 24px;
  text-align: center;
}
.support__hint {
  color: var(--text-muted);
  font-size: 16px;
}
.support__title {
  font-size: 26px;
  font-weight: 800;
  margin: 24px 0 16px;
  line-height: 1.25;
}
.support__sub {
  color: var(--text-muted);
}
.support__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}
.support__btn {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 22px 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.support__btn-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.support__btn-icon svg {
  width: 100%;
  height: 100%;
}
.support__btn-text {
  flex: 1;
  text-align: left;
  line-height: 1.2;
}
/* «Перейти на сайт» — на всю ширину под кнопками мессенджеров */
.support__btn--site {
  grid-column: 1 / -1;
  padding: 18px 16px;
  transition: transform 0.1s;
}
.support__btn--site:active {
  transform: scale(0.98);
}
.support__btn-arrow {
  color: var(--text-hint);
  font-size: 22px;
  line-height: 1;
}
/* ============================================================
   Profile
   ============================================================ */

.profile {
  padding: 0 16px;
}
.profile__title {
  text-align: center;
  font-size: 22px;
  margin: 24px 0 16px;
  color: var(--text);
}
.profile__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bg-secondary);
  margin: 0 auto;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  overflow: hidden;
}
.profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile__name {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  margin: 14px 0 24px;
}
.profile__menu {
  border-top: 1px solid var(--border);
}
.profile__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  color: var(--text);
}
.profile__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 40px auto 8px;
}
.profile__logo {
  width: 72px;
  height: 60px;
  object-fit: contain;
}
.profile__brand-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

/* ============================================================
   Splash screen с анимацией
   ============================================================ */

.splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}
.splash--fading {
  opacity: 0;
}

/* Плавный макро-масштаб всей композиции на 3 секунды */
.splash__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -60px;
  animation: splash-content-zoom 3s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

/* Логотип: выплывает снизу с лёгким перелётом по масштабу */
.splash__logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  animation: splash-logo-up 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
}

/* Название бренда под логотипом */
.splash__text-wrap {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  perspective: 1000px; /* мягкий 3D-наклон текста */
}
.splash__text {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--brand-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(60px) rotateX(-20deg);
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  animation: splash-text-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

html.tg-dark .splash__text,
body.tg-dark .splash__text {
  background-image: linear-gradient(90deg, #b4cfe0 0%, #5b88a4 100%);
}

/* 1. Общий медленный наплыв камеры */
@keyframes splash-content-zoom {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* 2. Мягкое появление логотипа с затухающим покачиванием */
@keyframes splash-logo-up {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  60% {
    transform: translateY(-4px) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3. Появление текста из глубины с постепенным фокусом (размытием) */
@keyframes splash-text-in {
  0% {
    opacity: 0;
    transform: translateY(60px) rotateX(-20deg);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0px);
  }
}

/* ============================================================
   Ads / "под ключ"
   ============================================================ */

.ads-page {
  padding: 16px;
  margin-top: auto;
  margin-bottom: auto;
}
.ads-banner {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.ads-banner img {
  width: 100%;
}
.ads-title {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin: 8px 0 8px;
  color: var(--brand-ink);
}
.ads-text {
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  padding: 0 16px;
}
.ads-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 18px;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius);
  text-align: center;
}

/* ============================================================
   Orders list
   ============================================================ */

.order-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 12px 16px;
  padding: 14px 16px;
}
.order-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.order-card__id {
  font-weight: 700;
}
.order-card__date {
  color: var(--text-muted);
  font-size: 13px;
}
.order-card__status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-muted);
  margin-top: 4px;
}
.order-card__status--pending {
  background: rgba(237, 137, 54, 0.12);
  color: var(--brand-orange);
}
.order-card__status--completed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.order-card__status--in_progress {
  background: rgba(234, 179, 8, 0.15);
  color: #b45309;
}
.order-card__status--cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.order-card__channels {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 6px;
}
.order-card__placement {
  font-size: 14px;
  margin-top: 6px;
}
.order-card__total {
  font-weight: 700;
  margin-top: 8px;
}
/* ============================================================
   Session expired overlay
   ============================================================ */
.session-expired {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.session-expired__box {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.session-expired__icon {
  font-size: 56px;
  margin-bottom: 16px;
}
.session-expired__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}
.session-expired__text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 24px;
}
.session-expired__btn {
  display: inline-block;
  background: var(--brand-gradient);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.session-expired__btn:active { opacity: 0.85; }
/* ============================================================
   Adaptive: small screens (<400px)
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  padding: 6px 16px;
  margin: 8px 0 4px;
  cursor: pointer;
  font-family: inherit;
}
.back-link:active {
  opacity: 0.6;
}

@media (max-width: 400px) {
  .checkout-bar .btn-primary {
    padding: 12px 18px;
    font-size: 15px;
  }
}