/* stepforge_site/assets/css/marketplace.css
 *
 * Стили, специфичные для веб-маркетплейса (stepforge_site/marketplace/) —
 * сетки, навигация, формы, состояние disabled-кнопок и т.п., то есть всё,
 * что осмысленно только на широком веб-вьюпорте, а не на телефоне.
 * Использует токены из sf-tokens.css, НЕ переопределяет их (design/MARKETPLACE_SPEC.md §1) —
 * подключать ПОСЛЕ sf-tokens.css и sf-fonts.css.
 *
 * Контракт имён классов — таблица §5 в design/MARKETPLACE_SPEC.md.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sf-bg);
  color: var(--sf-ink);
  font-family: var(--sf-font-body);
  line-height: 1.5;
}

a { color: inherit; }

.mk-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sf-space-5) var(--sf-space-4);
}

.mk-main { min-height: 60vh; }

/* ── Шапка ── */
.mk-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--sf-surface);
  box-shadow: var(--sf-shadow-flat);
}
.mk-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sf-space-3) var(--sf-space-4);
  display: flex;
  align-items: center;
  gap: var(--sf-space-5);
}
.mk-header__wordmark {
  font-family: var(--sf-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--sf-primary-deep);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sf-space-1);
}
.mk-header__logo-mark {
  display: block;
  border-radius: 22%;
}
.mk-header__nav {
  flex: 1;
  display: flex;
  gap: var(--sf-space-4);
}
.mk-header__nav a {
  text-decoration: none;
  color: var(--sf-ink);
  font-weight: 500;
}
.mk-header__auth { display: flex; align-items: center; }

.mk-user-menu { position: relative; }
.mk-user-menu__toggle {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sf-font-body);
  font-size: 14px;
  color: var(--sf-ink);
  padding: var(--sf-space-2);
}
.mk-user-menu__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--sf-font-display);
}
.mk-user-menu__dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 200px;
  background: var(--sf-surface);
  border: var(--sf-border);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-pop);
  padding: var(--sf-space-2);
}
.mk-user-menu:hover .mk-user-menu__dropdown,
.mk-user-menu:focus-within .mk-user-menu__dropdown {
  display: block;
}
.mk-user-menu__dropdown a {
  display: block;
  padding: var(--sf-space-2) var(--sf-space-3);
  text-decoration: none;
  border-radius: var(--sf-radius-xs);
}
.mk-user-menu__dropdown a:hover { background: var(--sf-bg-2); }
.mk-user-menu__logout {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sf-space-2) var(--sf-space-3);
  font-family: var(--sf-font-body);
  font-size: 14px;
  color: var(--sf-ink);
  border-radius: var(--sf-radius-xs);
}
.mk-user-menu__logout:hover { background: var(--sf-bg-2); }

/* ── Подвал ── */
.mk-footer {
  background: var(--sf-bg-2);
  color: var(--sf-ink-soft);
  margin-top: var(--sf-space-7);
}
.mk-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sf-space-6) var(--sf-space-4);
}
.mk-footer__wordmark {
  font-family: var(--sf-font-display);
  font-weight: 700;
  color: var(--sf-ink);
  font-size: 18px;
}
.mk-footer__tagline { margin: var(--sf-space-2) 0 var(--sf-space-5); }
.mk-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sf-space-4);
}
.mk-footer__columns h3 {
  color: var(--sf-ink);
  font-size: 14px;
  margin: 0 0 var(--sf-space-2);
}
.mk-footer__columns ul { list-style: none; margin: 0; padding: 0; }
.mk-footer__columns li { margin-bottom: var(--sf-space-2); }
.mk-footer__columns a { text-decoration: none; }
.mk-footer__soon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sf-ink-soft);
  opacity: .7;
}
.mk-footer__soon-tag {
  font-size: 10px;
  border: 1px solid var(--sf-ink-soft);
  border-radius: var(--sf-radius-pill);
  padding: 0 6px;
}
.mk-footer__bottom {
  margin-top: var(--sf-space-6);
  font-size: 12px;
}

/* ── Табы кабинета разработчика (контекст приложения) ── */
.mk-tabs {
  display: flex;
  gap: var(--sf-space-5);
  border-bottom: 1px solid var(--sf-bg-2);
  margin: var(--sf-space-4) 0 var(--sf-space-5);
}
.mk-tabs__item {
  padding: var(--sf-space-2) 0 var(--sf-space-3);
  text-decoration: none;
  color: var(--sf-ink-soft);
  font-weight: 500;
  border-bottom: 3px solid transparent;
}
.mk-tabs__item--active {
  color: var(--sf-ink);
  border-bottom-color: var(--sf-primary);
}

/* ── Верхний саб-навигатор кабинета разработчика ── */
.mk-dev-subnav {
  display: flex;
  gap: var(--sf-space-5);
  margin-bottom: var(--sf-space-4);
}
.mk-dev-subnav__item {
  text-decoration: none;
  color: var(--sf-ink-soft);
  font-weight: 600;
}
.mk-dev-subnav__item--active { color: var(--sf-primary-deep); }

/* ── Пилюли категорий ── */
.mk-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-2);
  margin: var(--sf-space-4) 0 var(--sf-space-5);
}
.mk-pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--sf-radius-pill);
  border: var(--sf-border-width) solid var(--sf-line);
  background: var(--sf-surface);
  color: var(--sf-ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.mk-pill--active {
  background: var(--sf-primary);
  border-color: var(--sf-line);
  color: #fff;
}

/* ── Сетка карточек приложений ── */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sf-space-5);
}
.mk-app-card {
  display: block;
  padding: var(--sf-space-4);
  text-decoration: none;
  color: var(--sf-ink);
}
.mk-app-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--sf-radius-md);
  object-fit: cover;
  margin-bottom: var(--sf-space-3);
}
.mk-app-card__name { font-weight: 700; font-family: var(--sf-font-display); }
.mk-app-card__tagline {
  color: var(--sf-ink-soft);
  font-size: 13px;
  margin-top: var(--sf-space-1);
}

.mk-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-bg-2);
  color: var(--sf-ink-soft);
  font-family: var(--sf-font-display);
  font-weight: 700;
  font-size: 24px;
}

/* ── Значок категории (нейтральный, не цветной) ── */
.mk-category-tag {
  display: inline-block;
  margin-top: var(--sf-space-2);
  padding: 2px 10px;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-xs);
  background: transparent;
  color: var(--sf-ink-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Статусный бейдж (кабинет разработчика — единственное место с цветным
   статусом, см. §4.1) ── */
.mk-badge {
  display: inline-block;
  margin-left: var(--sf-space-2);
  padding: 2px 10px;
  border-radius: var(--sf-radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--sf-bg-2);
  color: var(--sf-ink-soft);
}
.mk-badge--draft { background: var(--sf-bg-2); color: var(--sf-ink-soft); }
.mk-badge--pending { background: var(--sf-accent-amber); color: var(--sf-ink); }
.mk-badge--published { background: var(--sf-accent-green); color: #fff; }
.mk-badge--suspended { background: var(--sf-danger); color: #fff; }

/* ── Пагинация ── */
.mk-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sf-space-4);
  margin-top: var(--sf-space-6);
  font-size: 14px;
}
.mk-pagination a { text-decoration: none; color: var(--sf-primary-deep); font-weight: 600; }
.mk-pagination__disabled { color: var(--sf-ink-soft); opacity: .5; }

/* ── Пустые состояния ── */
.mk-empty-state {
  text-align: left;
  color: var(--sf-ink-soft);
  padding: var(--sf-space-5) 0;
}
.mk-empty-state--centered {
  text-align: center;
  padding: var(--sf-space-7) 0;
}
.mk-empty-state a { margin-top: var(--sf-space-3); display: inline-block; }

/* ── Страница приложения (/apps/{slug}) ── */
.mk-app-detail__head {
  display: flex;
  gap: var(--sf-space-5);
  align-items: flex-start;
  flex-wrap: wrap;
}
.mk-app-detail__icon {
  width: 96px;
  height: 96px;
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-card);
  object-fit: cover;
  font-size: 36px;
}
.mk-app-detail__meta { flex: 1; min-width: 200px; }
.mk-app-detail__tagline { color: var(--sf-ink-soft); margin: var(--sf-space-1) 0; }
.mk-app-detail__section { margin-top: var(--sf-space-6); }
.mk-app-detail__section h2 {
  font-size: 16px;
  border-bottom: 1px solid var(--sf-bg-2);
  padding-bottom: var(--sf-space-2);
}
.mk-app-detail__developer {
  margin-top: var(--sf-space-6);
  color: var(--sf-ink-soft);
}

.mk-external-links { display: flex; gap: var(--sf-space-2); flex-wrap: wrap; }
.mk-external-link {
  width: 36px;
  height: 36px;
  border-radius: var(--sf-radius-pill);
  border: 1px solid var(--sf-line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--sf-surface);
}

.mk-screenshots {
  display: flex;
  gap: var(--sf-space-3);
  overflow-x: auto;
  padding-bottom: var(--sf-space-2);
}
.mk-screenshots img {
  height: 200px;
  border-radius: var(--sf-radius-sm);
  border: 1px solid var(--sf-bg-2);
}

/* ── Тизер-панель нереализованных виджетов на странице приложения ── */
.mk-placeholder-panel {
  margin-top: var(--sf-space-6);
  border: 2px dashed var(--sf-line);
  border-radius: var(--sf-radius-md);
  background: var(--sf-bg-2);
  color: var(--sf-ink-soft);
  padding: var(--sf-space-5);
  text-align: center;
}
.mk-placeholder-panel p:first-child { font-weight: 600; margin-top: 0; }

/* ── Полноценная стаб-страница кабинета разработчика ── */
.mk-placeholder-page {
  max-width: 480px;
  margin: var(--sf-space-6) auto;
  background: var(--sf-bg-2);
  border-radius: var(--sf-radius-md);
  padding: var(--sf-space-7) var(--sf-space-5);
  text-align: center;
  color: var(--sf-ink);
}
.mk-placeholder-page__icon { font-size: 40px; margin-bottom: var(--sf-space-3); }
.mk-placeholder-page p { color: var(--sf-ink-soft); }
.mk-placeholder-page .sf-btn { margin-top: var(--sf-space-4); }

/* ── Строка приложения в кабинете разработчика ── */
.mk-dev-app-row {
  display: flex;
  gap: var(--sf-space-4);
  align-items: center;
  padding: var(--sf-space-4);
  margin-bottom: var(--sf-space-4);
}
.mk-dev-app-row__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--sf-radius-md);
  object-fit: cover;
  flex-shrink: 0;
  font-size: 22px;
}
.mk-dev-app-row__title { font-weight: 700; font-family: var(--sf-font-display); }
.mk-dev-app-row__stats { color: var(--sf-ink-soft); font-size: 13px; margin: var(--sf-space-1) 0; }
.mk-dev-app-row__tabs { font-size: 13px; }
.mk-dev-app-row__tabs a { text-decoration: none; color: var(--sf-primary-deep); }

.mk-dev-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sf-space-4);
  flex-wrap: wrap;
}

/* ── Daylight-конверсия developer_dashboard.php (2026-07-20, dl.css §19) —
   .mk-dev-app-tile__footer сам по себе никогда не имел CSS (badge+ссылки
   просто «висели» прямо под плиткой .mk-app-card--tile безо всякого
   отступа) — минимальный, специфичный для этой страницы штрих: небольшой
   отступ сверху + вертикальный gap между чипом статуса и рядом ссылок,
   переиспользует --dl-* токены напрямую (см. комментарий выше про
   .mk-container.mk-account/.mk-dev-dashboard — токены доступны на каждой
   странице безусловно). Сама плитка (.mk-app-card--tile, _cards.php) —
   вне скоупа, не трогается. ── */
.mk-dev-app-tile__footer {
  margin-top: var(--dl-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-2);
}

/* ── Формы кабинета разработчика ── */
.mk-form { max-width: 640px; margin-top: var(--sf-space-5); }
.mk-field { margin-bottom: var(--sf-space-4); }
.mk-field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sf-space-1);
  font-size: 14px;
}
.mk-field__hint {
  font-size: 12px;
  color: var(--sf-ink-soft);
  margin: var(--sf-space-1) 0 0;
}
.mk-input, .mk-textarea, .mk-select {
  width: 100%;
  font-family: var(--sf-font-body);
  font-size: 14px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  padding: var(--sf-space-2) var(--sf-space-3);
  background: var(--sf-surface);
  color: var(--sf-ink);
}
.mk-input:focus, .mk-textarea:focus, .mk-select:focus {
  outline: 2px solid var(--sf-primary);
  outline-offset: 1px;
}
.mk-textarea { resize: vertical; min-height: 120px; }
.mk-field__with-preview { display: flex; align-items: center; gap: var(--sf-space-3); }
.mk-icon-preview {
  width: 40px;
  height: 40px;
  border-radius: var(--sf-radius-sm);
  object-fit: cover;
  border: 1px solid var(--sf-bg-2);
}
.mk-field__screenshot-row {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
  margin-bottom: var(--sf-space-2);
}
.mk-field__screenshot-row .mk-input { flex: 1; }
.mk-field__screenshot-index { color: var(--sf-ink-soft); font-size: 12px; width: 16px; }

.mk-field-group {
  border: none;
  padding: 0;
  margin: var(--sf-space-5) 0;
}
.mk-field-group legend {
  font-weight: 700;
  font-family: var(--sf-font-display);
  margin-bottom: var(--sf-space-3);
  padding: 0;
}

.mk-form__errors {
  background: rgba(255, 107, 107, .1);
  border: 1px solid var(--sf-danger);
  border-radius: var(--sf-radius-sm);
  padding: var(--sf-space-3) var(--sf-space-4);
  margin-bottom: var(--sf-space-4);
  color: var(--sf-danger);
}
.mk-form__errors ul { margin: 0; padding-left: var(--sf-space-4); }

.mk-form__actions {
  display: flex;
  gap: var(--sf-space-3);
  margin-top: var(--sf-space-5);
  flex-wrap: wrap;
}

/* Кнопка "Отправить на модерацию" — контурный вариант .sf-btn. Не в
   sf-tokens.css: это web-only компонент кабинета разработчика, а не
   переиспользуемый в приложении вариант кнопки. */
.mk-btn-outline {
  background: transparent;
  color: var(--sf-primary-deep);
}
.mk-btn-outline:active { box-shadow: 0 1px 0 rgba(30,51,84,.18); }

.mk-form__danger-zone {
  margin-top: var(--sf-space-6);
  padding-top: var(--sf-space-4);
  border-top: 1px solid var(--sf-bg-2);
}
.mk-danger-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sf-danger);
  text-decoration: underline;
  font-family: var(--sf-font-body);
  font-size: 14px;
  padding: 0;
}

/* ── Логин ── */
.mk-login {
  display: flex;
  justify-content: center;
  padding: var(--sf-space-7) var(--sf-space-4);
}
.mk-login__card {
  max-width: 400px;
  width: 100%;
  padding: var(--sf-space-6) var(--sf-space-5);
  text-align: center;
}
.mk-login__title {
  font-family: var(--sf-font-display);
  color: var(--sf-primary-deep);
  margin: 0;
}
.mk-login__subtitle { color: var(--sf-ink-soft); margin: var(--sf-space-1) 0 var(--sf-space-5); }
.mk-login__error {
  background: rgba(255, 107, 107, .1);
  color: var(--sf-danger);
  border-radius: var(--sf-radius-sm);
  padding: var(--sf-space-2) var(--sf-space-3);
  font-size: 13px;
}
.mk-login__divider {
  display: flex;
  align-items: center;
  color: var(--sf-ink-soft);
  font-size: 12px;
  margin: var(--sf-space-5) 0;
}
.mk-login__divider::before, .mk-login__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sf-bg-2);
}
.mk-login__divider span { padding: 0 var(--sf-space-3); }
.mk-login__card form { margin-top: 0; }

/* Кнопки OAuth — единственное намеренно-постоянное disabled-состояние в
   маркетплейсе (§6): честно показываем кнопку, но она неактивна, с причиной
   под ней, а не прячем/имитируем рабочую ссылку. */
.mk-oauth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  font-family: var(--sf-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  margin-top: var(--sf-space-4);
  border-radius: var(--sf-radius-pill);
  border: var(--sf-border-width) solid var(--sf-line);
  background: var(--sf-surface);
  color: var(--sf-ink);
}
.mk-oauth-btn[disabled] {
  opacity: .45;
  filter: grayscale(70%);
  cursor: not-allowed;
}
.mk-oauth-note {
  font-size: 12px;
  color: var(--sf-ink-soft);
  margin: var(--sf-space-1) 0 0;
}

.mk-page-subtitle { color: var(--sf-ink-soft); margin-top: 0; }

/* ── 404 ── */
.mk-notfound {
  text-align: center;
  padding: var(--sf-space-7) var(--sf-space-4);
  color: var(--sf-ink-soft);
}
.mk-notfound .sf-btn { margin-top: var(--sf-space-4); display: inline-block; }

/* ═══════════════════════════════════════════════════════════════════════
 * FOUNDRY-СЛОЙ (design/MARKETPLACE_SPEC.md §8) + КАТАЛОГ «Полки» (Concept C)
 *
 * Дописано отдельной секцией (2026-07-19, задача редизайна каталога): всё
 * ниже — на токенах-источнике --mk-* (см. mk-tokens.css), а не на legacy
 * --sf-*. Здесь впервые определяются классы, на которые разметка ссылалась
 * давно, но CSS под них не существовал: .mk-btn-foundry, .mk-hero*,
 * .mk-showcase*, .mk-eyebrow, единая «тайл»-карточка .mk-app-card--tile*
 * (из _cards.php) и структура Concept C (герой-спотлайт + горизонтальные
 * полки-shelf + полоса-побег в полный каталог).
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Кнопка Foundry — скруглённый прямоугольник, НЕ «конфетная» таблетка
     игры (§8.0). Дефолт: заливка --mk-accent-deep, белый текст. ── */
.mk-btn-foundry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-2);
  font-family: var(--mk-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  background: var(--mk-accent-deep);
  border: none;
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-sm);
  padding: 11px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease-out, box-shadow .12s ease-out, transform .06s ease-out;
}
.mk-btn-foundry:hover { background: #A83610; box-shadow: var(--mk-shadow-md); }
.mk-btn-foundry:active { transform: translateY(1px); }
.mk-btn-foundry:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* Вторичная (контурная) и «призрак»-кнопки Foundry */
.mk-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-1);
  font-family: var(--mk-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--mk-accent-deep);
  background: none;
  border: none;
  border-radius: var(--mk-radius-sm);
  padding: 6px 8px;
  text-decoration: none;
  cursor: pointer;
}
.mk-btn-ghost:hover { color: var(--mk-accent); background: var(--mk-accent-soft); }

/* ── Надзаголовок-«бровь»: подпись капсом над заголовком секции. Фирменный
     типографический приём Foundry, заменяющий декоративный градиент (§8.1). ── */
.mk-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mk-accent-deep);
  margin: 0 0 var(--mk-space-2);
}

/* Заголовочный блок каталога/секции (бровь + h1/h2 + подзаголовок) */
.mk-catalog-head { margin: var(--mk-space-2) 0 var(--mk-space-6); }
.mk-catalog-head h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--mk-ink);
}
.mk-catalog-head__subtitle {
  color: var(--mk-ink-soft);
  font-size: 15px;
  margin: var(--mk-space-2) 0 0;
  max-width: 60ch;
}

/* ── Единая «тайл»-карточка приложения (_cards.php): баннер сверху, иконка
     «аватаркой» внахлёст на нижний край баннера, ниже — имя и счётчик
     пользователей. До этой задачи класс не имел ни строчки CSS. ── */
.mk-app-card--tile {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--mk-surface);
  border: var(--mk-border-width) solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-md);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
/* Баннер: фиксированное соотношение сторон 16:9 задаётся заранее — так грид
   не «прыгает» при догрузке картинок (CLS). object-fit:cover не искажает. */
.mk-app-card--tile .mk-app-card__banner {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mk-surface-2);
  overflow: hidden;
}
.mk-app-card--tile .mk-app-card__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease-out;
}
/* Пустой баннер (у приложения нет app_media banner) — плоская плашка того же
   размера, чтобы высота карточек в гриде не «рвалась» (§1.4). */
.mk-app-card--tile .mk-app-card__banner--empty { background: var(--mk-surface-2); }

.mk-app-card--tile .mk-app-card__icon-wrap {
  display: flex;
  padding: 0 var(--mk-space-4);
  margin-top: -28px; /* иконка 56px наполовину заходит на нижний край баннера */
}
.mk-app-card--tile .mk-app-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--mk-radius-md);
  object-fit: cover;
  margin: 0;
  border: 2px solid var(--mk-surface);
  box-shadow: var(--mk-shadow-sm);
  background: var(--mk-surface-2);
}
.mk-app-card--tile .mk-icon-placeholder {
  font-size: 22px;
  color: var(--mk-ink-soft);
}
.mk-app-card--tile .mk-app-card__tile-body {
  padding: var(--mk-space-3) var(--mk-space-4) var(--mk-space-4);
}
.mk-app-card--tile .mk-app-card__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--mk-ink);
}
.mk-app-card--tile .mk-app-card__name a {
  color: inherit;
  text-decoration: none;
}
/* Растянутая ссылка: псевдоэлемент ссылки в имени покрывает всю карточку —
   кликается вся плитка, но в DOM это семантический <article> с заголовком и
   единственной осмысленной ссылкой (доступность + SEO), а не <a> вокруг всего. */
.mk-app-card--tile .mk-app-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mk-app-card--tile .mk-app-card__users {
  margin-top: var(--mk-space-1);
  font-size: 12px;
  font-weight: 500;
  color: var(--mk-ink-soft);
}
/* Подъём при наведении — только для указательных устройств; никакого
   «пружинного» баунса игры, только мягкий лифт (§1.4). */
@media (hover: hover) {
  .mk-app-card--tile:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-lg); }
  .mk-app-card--tile:hover .mk-app-card__banner img { transform: scale(1.03); }
}

/* ── Главная (home.php): full-bleed полоса-герой + витрина ── */
.mk-hero {
  background: var(--mk-surface-2);
  padding: var(--mk-space-8) var(--mk-space-4);
  text-align: center;
}
.mk-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mk-accent-deep);
  margin: 0 0 var(--mk-space-3);
}
.mk-hero__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0 auto;
  max-width: 18ch;
  color: var(--mk-ink);
}
.mk-hero__subtitle {
  color: var(--mk-ink-soft);
  font-size: 16px;
  margin: var(--mk-space-4) auto 0;
  max-width: 60ch;
}
.mk-hero__ctas {
  display: flex;
  justify-content: center;
  gap: var(--mk-space-3);
  margin-top: var(--mk-space-5);
  flex-wrap: wrap;
}
.mk-showcase { margin-top: var(--mk-space-7); }
.mk-showcase__heading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 var(--mk-space-5);
  color: var(--mk-ink);
}

/* ═══════ Concept C — «Полки»: герой-спотлайт + горизонтальные полки ═══════ */

/* ── Спотлайт-герой: реальный баннер одного приложения + функциональный
     scrim под текст (НЕ декоративный градиент, §1.3/Concept C). Вся плитка —
     одна ссылка на страницу приложения; «Открыть →» — визуальная кнопка
     внутри той же ссылки (без вложенных интерактивных элементов). ── */
.mk-spotlight {
  position: relative;
  display: block;
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
  box-shadow: var(--mk-shadow-md);
  background: var(--mk-surface-2);
  color: #fff;
  text-decoration: none;
  margin-bottom: var(--mk-space-7);
}
.mk-spotlight__media { position: relative; aspect-ratio: 3 / 1; }
.mk-spotlight__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-spotlight__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(23,27,35,.80) 0%,
    rgba(23,27,35,.42) 42%,
    rgba(23,27,35,0) 72%);
}
.mk-spotlight__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--mk-space-6);
  max-width: 680px;
}
.mk-spotlight__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  margin: 0 0 var(--mk-space-2);
}
.mk-spotlight__name {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 var(--mk-space-2);
}
.mk-spotlight__tagline {
  color: rgba(255,255,255,.92);
  font-size: 16px;
  margin: 0 0 var(--mk-space-4);
  max-width: 52ch;
}
.mk-spotlight__cta { margin-top: 0; }
@media (hover: hover) {
  .mk-spotlight:hover .mk-spotlight__img { transform: scale(1.02); transition: transform .3s ease-out; }
}

/* ── Полка (shelf): заголовок + горизонтальный рельс карточек со scroll-snap ── */
.mk-shelf { margin-bottom: var(--mk-space-7); }
.mk-shelf__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mk-space-4);
  margin-bottom: var(--mk-space-4);
}
.mk-shelf__titles { min-width: 0; }
.mk-shelf__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--mk-ink);
}
.mk-shelf__actions { display: flex; align-items: center; gap: var(--mk-space-2); flex-shrink: 0; }

/* Рельс: нативный горизонтальный скролл + мягкий scroll-snap (proximity, не
   mandatory — mandatory даёт «дёрганый» снап, owner: без глитчей/лагов).
   Отрицательные поля растягивают рельс до боков контейнера, чтобы следующая
   карточка «выглядывала» и подсказывала прокрутку; padding возвращает контент
   внутрь и оставляет место под тень-лифт при наведении. */
.mk-shelf__rail {
  display: flex;
  gap: var(--mk-space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--mk-space-4);
  padding: var(--mk-space-2) var(--mk-space-4) var(--mk-space-4);
  margin: 0 calc(-1 * var(--mk-space-4));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--mk-border) transparent;
}
.mk-shelf__rail::-webkit-scrollbar { height: 8px; }
.mk-shelf__rail::-webkit-scrollbar-thumb { background: var(--mk-border); border-radius: var(--mk-radius-pill); }
.mk-shelf__rail::-webkit-scrollbar-track { background: transparent; }
.mk-shelf__rail > .mk-app-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

/* Стрелки прокрутки — только на устройствах с указателем (на тач — нативный
   свайп). Управляются вручную из marketplace.js (scrollBy). */
.mk-shelf__arrow {
  width: 36px;
  height: 36px;
  border-radius: var(--mk-radius-pill);
  border: var(--mk-border-width) solid var(--mk-border);
  background: var(--mk-surface);
  color: var(--mk-ink);
  box-shadow: var(--mk-shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.mk-shelf__arrow:hover { background: var(--mk-surface-2); }
.mk-shelf__arrow:disabled { opacity: .35; cursor: default; }
.mk-shelf__arrow:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
@media (hover: none) {
  .mk-shelf__actions .mk-shelf__arrow { display: none; }
}

/* ── Полоса-«побег» в полный каталог (Весь каталог →) ── */
.mk-catalog-escape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-4);
  flex-wrap: wrap;
  background: var(--mk-surface-2);
  border-radius: var(--mk-radius-lg);
  padding: var(--mk-space-6);
  margin-top: var(--mk-space-6);
}
.mk-catalog-escape__text { font-size: 16px; font-weight: 700; color: var(--mk-ink); margin: 0; }

/* ── Сортировочный/сервисный ряд над гридом (режим «полный каталог»/категория) ── */
.mk-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--mk-space-4);
}
.mk-catalog-toolbar__count { color: var(--mk-ink-soft); font-size: 13px; margin: 0; }

/* ── Активный чип-фильтр категории: тинт-подсветка (не сплошная оранжевая
     заливка) — держит чипы «тихими» (Concept A компоненты). Перекрывает
     legacy-правило .mk-pill--active выше в этом файле. ── */
.mk-pill--active {
  background: var(--mk-accent-soft);
  border-color: var(--mk-accent);
  color: var(--mk-accent-deep);
}

/* ── Адаптив (§1.2, 4 полосы; всё на intrinsic sizing) ── */
@media (max-width: 900px) {
  .mk-spotlight__media { aspect-ratio: 2 / 1; }
  .mk-spotlight__name { font-size: 32px; }
}
@media (max-width: 600px) {
  .mk-hero { padding: var(--mk-space-7) var(--mk-space-4); }
  .mk-hero__title { font-size: 30px; }
  .mk-spotlight__media { aspect-ratio: 16 / 9; }
  .mk-spotlight__content { padding: var(--mk-space-4); }
  .mk-spotlight__name { font-size: 26px; }
  .mk-spotlight__tagline { font-size: 14px; }
  .mk-shelf__rail > .mk-app-card { flex-basis: 78vw; }  /* ~1.2 карточки: следующая выглядывает, подсказывая свайп */
  .mk-catalog-escape { padding: var(--mk-space-5); }
}

/* Уважать prefers-reduced-motion: убрать hover-трансформации/плавный скролл. */
@media (prefers-reduced-motion: reduce) {
  .mk-app-card--tile,
  .mk-app-card--tile .mk-app-card__banner img,
  .mk-spotlight__img,
  .mk-btn-foundry { transition: none; }
  .mk-shelf__rail { scroll-behavior: auto; }
}

/* ── Личный кабинет: account.php (n/n2.md, пункт 4, 2026-07-19) — "мой
   аккаунт", не кабинет разработчика: переиспользует .sf-card/.mk-docs-block/
   .mk-field__hint/.mk-danger-link/.mk-btn-ghost/.mk-icon-placeholder, здесь
   только то, для чего ещё нет готовых классов. ── */

/* ── Daylight chrome alignment fix (owner фидбек 2026-07-20, "личный кабинет
   уехал") — .mk-header/.mk-footer (общий chrome, ВСЕ страницы сайта)
   перекрашены и сужены dl.css §1 до --dl-content-max (1080px) + --dl-space-5
   (24px) горизонтальный паддинг (мобильный брейкпоинт: --dl-space-4=16px),
   а .mk-container выше в этом файле остался на старых Foundry-значениях
   (1100px + --sf-space-4=16px паддинг) — на страницах вне скоупа Daylight
   (эта страница — одна из них, см. докблок dl.css "ГРАНИЦА СКОУПА") это
   давало ~18px горизонтальный разъезд между текстом шапки/подвала и
   контентом страницы ниже. Токены --dl-* подключены БЕЗУСЛОВНО на каждой
   странице (dl-tokens.css грузится в _chrome.php вне зависимости от
   $bodyClass/.dl-page — см. её докблок), поэтому их можно использовать
   здесь напрямую. Изначально скоуплено на .mk-account/.mk-dev-dashboard/
   .mk-dev-forum-posts/.mk-dev-forum-threads, дополнено 2026-07-20 (тем же днём,
   Daylight-конверсия login/account/кабинета разработчика целиком, §10 в
   design/redesign_v2_light_simple.md) классами для всех остальных
   developer_*.php-страниц — теперь список покрывает 100% .mk-container'ов
   кабинета разработчика, "ещё не сконвертированных" страниц с этим классом
   не осталось. .mk-account сохранён (не заменён на .dl-container) по
   решению §10 per-page mapping — у него уже был этот мост, менять код без
   необходимости незачем. ── */
.mk-container.mk-account,
.mk-container.mk-dev-dashboard,
.mk-container.mk-dev-forum-posts,
.mk-container.mk-dev-forum-threads,
.mk-container.mk-dev-billing,
.mk-container.mk-dev-app-form,
.mk-container.mk-dev-app-stats {
  max-width: var(--dl-content-max);
  padding-left: var(--dl-space-5);
  padding-right: var(--dl-space-5);
}
@media (max-width: 767px) {
  .mk-container.mk-account,
  .mk-container.mk-dev-dashboard,
  .mk-container.mk-dev-forum-posts,
  .mk-container.mk-dev-forum-threads,
  .mk-container.mk-dev-billing,
  .mk-container.mk-dev-app-form,
  .mk-container.mk-dev-app-stats {
    padding-left: var(--dl-space-4);
    padding-right: var(--dl-space-4);
  }
}

.mk-account .mk-docs-block { margin-top: var(--sf-space-5); }
.mk-user-menu__account {
  display: block;
  font-size: 14px;
  color: var(--sf-ink);
}

.mk-account-profile__row {
  display: flex;
  align-items: center;
  gap: var(--sf-space-4);
  flex-wrap: wrap;
}
.mk-account-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--sf-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  font-size: 26px;
  background: var(--sf-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--sf-font-display);
}
.mk-account-profile__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sf-space-3) var(--sf-space-5);
  flex: 1;
  margin: 0;
}
.mk-account-profile__facts dt {
  font-size: 12px;
  color: var(--sf-ink-soft);
  margin: 0;
}
.mk-account-profile__facts dd {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.mk-identity-row {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  padding: var(--sf-space-3) 0;
  border-top: 1px solid var(--sf-bg-2);
}
.mk-identity-row:first-of-type { border-top: none; }
.mk-identity-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--sf-radius-pill);
  border: 1px solid var(--sf-line);
  background: var(--sf-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mk-identity-row__meta { flex: 1; min-width: 160px; }
.mk-identity-row__name { font-weight: 600; font-size: 14px; }
.mk-identity-row__action { margin-left: auto; }

.mk-account-app {
  padding: var(--sf-space-4) 0;
  border-top: 1px solid var(--sf-bg-2);
}
.mk-account-app:first-of-type { border-top: none; padding-top: 0; }
.mk-account-app__head {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  margin-bottom: var(--sf-space-2);
}
.mk-account-app__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--sf-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  font-size: 18px;
}
.mk-account-app__title {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  flex-wrap: wrap;
}
.mk-account-app__open { font-size: 13px; }
.mk-account-app__manage { font-size: 13px; }
.mk-account-app__progress {
  margin: 0;
  padding-left: var(--sf-space-4);
  font-size: 13px;
  color: var(--sf-ink-soft);
}
.mk-account-app__progress li { margin-bottom: 2px; }

.mk-flash {
  border-radius: var(--sf-radius-sm);
  padding: var(--sf-space-3) var(--sf-space-4);
  margin: var(--sf-space-4) 0;
  font-size: 14px;
  font-weight: 600;
}
.mk-flash--success {
  background: rgba(46, 176, 106, .12);
  border: 1px solid var(--sf-accent-green);
  color: var(--sf-accent-green);
}
.mk-flash--error {
  background: rgba(255, 107, 107, .1);
  border: 1px solid var(--sf-danger);
  color: var(--sf-danger);
}