/* STARTAPIX — специфика страниц поверх библиотеки design-export.
   Только то, чего нет в components.css. Все значения — через переменные TOKENS.css. */

/* Атрибут hidden должен побеждать display у компонентов (.modal-overlay — display:flex),
   иначе скрытые модалки и панели видны при загрузке страницы. */
[hidden] { display: none !important; }

/* ---------- Шапка: бургер и мобильное меню ---------- */
.site-header__burger { display: none; }

@media (max-width: 1024px) {
  .site-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    border-radius: var(--radius-m);
    border: var(--border-width) solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--fs-body);
    cursor: pointer;
  }
  .site-header__burger[aria-expanded="true"] {
    border-color: var(--color-accent);
    background: var(--color-accent-tint-10);
    color: var(--color-accent);
  }
  .site-header__actions .btn { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-bg);
  overflow: auto;
  padding: var(--space-9) var(--space-7);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-10); }
.mobile-menu__item {
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  border-radius: var(--radius-m);
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
}
.mobile-menu__item:hover { color: var(--color-text); }
.mobile-menu__item--active {
  background: var(--color-accent-tint-10);
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}
.mobile-menu__actions { display: flex; flex-direction: column; gap: var(--space-4); }

/* Карточка-ссылка не должна краситься в акцент: по макету её текст белый,
   зелёный остаётся только у сумм (.project-card__amount / __price). */
.project-card, .project-card:hover { color: var(--color-text); }
.project-card .t-secondary, .project-card__goal, .project-card__note, .project-card__stat-label { color: var(--color-text-secondary); }

/* ---------- Витрина: сортировка и мобильная шторка фильтров ---------- */
.filters-toggle { display: none; }

@media (max-width: 1024px) {
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    min-height: var(--tap-target);
    flex: none;
    border-radius: var(--radius-m);
    border: var(--border-width) solid var(--color-accent);
    background: var(--color-accent-tint-10);
    color: var(--color-accent);
    font-size: var(--fs-body-s);
    cursor: pointer;
  }
  /* Фильтры превращаются в шторку снизу */
  .filters { display: none; }
  .filters--open {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    z-index: var(--z-modal);
    max-height: 88%;
    overflow: auto;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    border-bottom: none;
  }
  .filters--open .card__body { padding-bottom: var(--space-11); }
}
.filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-toolbar);
  background: var(--overlay-modal);
}
.filters-backdrop[hidden] { display: none; }
.sheet-grip {
  display: none;
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  margin: 0 auto var(--space-8);
}
@media (max-width: 1024px) { .filters--open .sheet-grip { display: block; } }
.filters-apply { display: none; }
@media (max-width: 1024px) { .filters--open .filters-apply { display: flex; margin-top: var(--space-7); } }

/* ---------- Страница проекта ---------- */
/* колонки грида не должны распираться содержимым (галерея, таблицы) */
.project > *, .split > *, .app__main { min-width: 0; }
@media (max-width: 768px) {
  /* лента миниатюр прокручивается внутри себя, а не тянет страницу */
  .gallery__thumbs { overflow-x: auto; }
  .gallery__thumb { flex: none; }
}

.deal-sums { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-ui); }
.deal-sums__row { display: flex; justify-content: space-between; gap: var(--space-5); }
.deal-sums__row--total { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.deal-hint { margin-top: var(--space-5); font-size: var(--fs-ui-s); text-align: center; color: var(--color-text-secondary); }
.deal-hint--warning { color: var(--color-warning); }

/* кнопка сделки: на широком экране одна, на узком — с иконкой сообщения слева (как в мобильном макете) */
.deal-actions { display: flex; gap: var(--space-4); }
.deal-actions__msg { display: none; }
.deal-actions .btn--large { min-height: var(--control-height-l); }

@media (max-width: 768px) {
  /* Прилипший низ сделки: по мобильному макету остаются только сумма сбора,
     прогресс, кнопка и строка баланса. Поле ввода и расчёт комиссии —
     в окне подтверждения, оно открывается той же кнопкой. */
  .deal-box--sticky-mobile {
    background: var(--color-surface);
    border-top: var(--border-width) solid var(--color-border);
    /* без сброса top блок растягивается от 120px до низа экрана:
       position:fixed наследует top из .project__deal (sticky top: 120px) */
    top: auto;
  }
  .deal-box--sticky-mobile .card__body { padding: var(--space-6) var(--space-7) var(--space-8) !important; }
  .deal-box--sticky-mobile .deal-amount-label,
  .deal-box--sticky-mobile .input--amount,
  .deal-box--sticky-mobile .deal-sums--detail,
  .deal-box--sticky-mobile .deal-hint { display: none; }
  .deal-box--sticky-mobile .progress { margin-top: var(--space-4) !important; }
  .deal-box--sticky-mobile .deal-actions { margin-top: var(--space-6) !important; }
  .deal-box--sticky-mobile .deal-actions__msg { display: inline-flex; width: var(--control-height-l); min-height: var(--control-height-l); }
  /* строка баланса — по центру под кнопкой, вторая пара кнопок не нужна */
  .deal-box--sticky-mobile .deal-balance {
    margin-top: var(--space-5) !important;
    padding-top: var(--space-5) !important;
    justify-content: center;
    gap: var(--space-2);
  }
  .deal-box--sticky-mobile .deal-secondary { display: none; }
  /* контент не должен уезжать под прилипший блок */
  .project { padding-bottom: 220px; }
}

/* ---------- Выбор роли на регистрации ---------- */
.pick-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  padding: var(--space-13);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.pick-card--active { border-color: var(--color-accent); background: var(--color-accent-tint-06); }
.pick-card__title { font-family: var(--font-display); font-size: var(--fs-num-s); font-weight: var(--fw-semibold); }
.pick-card__lead { margin-top: var(--space-4); font-size: var(--fs-body-s); color: var(--color-text-secondary); line-height: var(--lh-body); }
.pick-card__list { margin-top: var(--space-8); font-size: var(--fs-ui-s); color: var(--color-text-secondary); line-height: var(--lh-list); }

/* ---------- Правила и FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-17); align-items: start; }
.faq-nav { position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-ui); }
@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Мобильный таб-бар кабинета ---------- */
.tabbar { display: none; }
@media (max-width: 768px) {
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    border-top: var(--border-width) solid var(--color-border);
    background: var(--color-surface-sunken);
    padding: var(--space-2) var(--space-3) var(--space-8);
  }
  .app__main { padding-bottom: var(--space-20); }
}
.tabbar__item {
  flex: 1;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--fs-body-s);
  color: var(--color-text-muted);
}
.tabbar__item span { font-size: var(--fs-micro); }
.tabbar__item--active { color: var(--color-accent); }

/* ---------- Админка: список + карточка справа ---------- */
.admin-split {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-9);
  align-items: start;
}
.admin-split--narrow { grid-template-columns: 1fr 360px; }
.admin-split > * { min-width: 0; }
@media (max-width: 1024px) {
  .admin-split, .admin-split--narrow { grid-template-columns: 1fr; }
  .admin-split__aside { position: static !important; }
}

/* панель поиска и фильтров над таблицей */
.toolbar { display: flex; gap: var(--space-5); margin-bottom: var(--space-8); flex-wrap: wrap; }
.toolbar .input { flex: 1; min-width: 220px; }
@media (max-width: 768px) {
  .toolbar .select { width: 100%; }
}

/* ---------- Мелочи ---------- */
.hidden { display: none !important; }
.divider-or {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-11) 0;
  color: var(--color-text-dim);
  font-size: var(--fs-ui-s);
}
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: var(--border-width); background: var(--color-border); }

.author-box { display: flex; align-items: center; gap: var(--space-9); }
.author-box__meta { flex: 1; min-width: 0; }
@media (max-width: 768px) {
  /* на узком экране кнопка автора уходит на свою строку */
  .author-box { flex-wrap: wrap; }
  .author-box .btn { width: 100%; }
}

.qr-stub {
  width: 130px;
  height: 130px;
  border-radius: var(--radius-m);
  background: repeating-conic-gradient(var(--color-chip) 0 25%, var(--color-border) 0 50%);
  background-size: 16px 16px;
}