/* ════════════════════════════════════════════════════════════════════════════
   CALDERA — style system для rebase
   forge fire on warm limestone. Плоско, без теней; ultrabold condensed type
   на тёплой плашке; ember-оранжевый — единственный агрессивный акцент.
   Токены взяты из DESIGN.md 1:1.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ─────────────────────────────────────────────────────────────── */
  --color-ember:          #fc5000;
  --color-plasma-violet:  #524ae9;
  --color-sulfur:         #f5f28e;
  --color-limestone:      #f7f6f2;
  --color-pumice:         #e2e2df;
  --color-obsidian:       #070607;
  --color-chalk:          #ffffff;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --surface-0: var(--color-pumice);        /* канва страницы                 */
  --surface-1: var(--color-limestone);     /* карточки, контент-блоки        */
  --surface-2: var(--color-ember);         /* featured stat surfaces         */
  --surface-3: var(--color-plasma-violet); /* halftone на экране входа       */

  /* ── Type families ──────────────────────────────────────────────────────── */
  /* Oswald — substitute для PP Neue Corp Compact (нужна кириллица)          */
  --font-display: 'Oswald', 'Bebas Neue', 'PP Neue Corp Compact',
                  'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  /* Inter — разрешённый substitute для DM Sans                              */
  --font-body:    'Inter', 'DM Sans', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI', Roboto, sans-serif;
  --font-caption: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Type scale ─────────────────────────────────────────────────────────── */
  --text-caption:      12px;  --leading-caption:      1.2;
  --text-body-sm:      14px;  --leading-body-sm:      1.2;
  --text-body:         16px;  --leading-body:         1.55;
  --text-subheading:   26px;  --leading-subheading:   1.2;
  --text-heading-sm:   30px;  --leading-heading-sm:   1.5;
  --text-heading:      32px;  --leading-heading:      1;
  --text-heading-lg:   48px;  --leading-heading-lg:   1;
  --text-heading-2xl:  80px;  --leading-heading-2xl:  1.1;
  --text-heading-3xl:  96px;  --leading-heading-3xl:  0.95;
  --text-display:     189px;  --leading-display:      0.94;

  --tracking-display: 0.02em;   /* положительный трекинг — никогда не минус  */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-display: 700;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-9: 9px;   --spacing-10: 10px;
  --spacing-12: 12px; --spacing-16: 16px; --spacing-18: 18px; --spacing-20: 20px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px;
  --spacing-56: 56px; --spacing-64: 64px; --spacing-80: 80px; --spacing-92: 92px;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --page-max-width: 1280px;
  --section-gap:    80px;
  --card-padding:   40px;
  --element-gap:    16px;

  /* ── Radii — triple-radius system ───────────────────────────────────────── */
  --radius-small:   16px;
  --radius-medium:  20px;
  --radius-cards:   40px;
  --radius-buttons: 40px;
  --radius-inputs:  100px;
  --radius-pills:   800px;

  --hairline: 1.5px;
}

/* ════════════════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface-0);
  color: var(--color-obsidian);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* скроллбар в тон канвы */
* { scrollbar-color: var(--color-obsidian) var(--color-pumice); scrollbar-width: thin; }

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-20) var(--spacing-24) var(--spacing-80);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ── Typography helpers ─────────────────────────────────────────────────────
   Display-гарнитура работает только на архитектурном масштабе: 26px и выше. */

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  font-feature-settings: 'ss06', 'ss10';
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: clamp(var(--text-heading), 5vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
}

.lede {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 46ch;
}

.caption {
  font-family: var(--font-caption);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.eyebrow {
  font-family: var(--font-caption);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }

/* Инлайн-код — sulfur как «small highlight wash» */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-sulfur);
  color: var(--color-obsidian);
  padding: 1px 7px;
  border-radius: var(--radius-pills);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   SIGNATURE MOTIF — halftone
   Оранжевые точки на градиенте violet → ember, сплошной ember в правом
   верхнем углу. Чистый CSS: градиент + растр из radial-gradient + маска.
   ════════════════════════════════════════════════════════════════════════════ */

.halftone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-cards);
  background:
    linear-gradient(145deg,
      var(--color-plasma-violet) 0%,
      var(--color-plasma-violet) 34%,
      #8a44b6 58%,
      #d14a37 82%,
      var(--color-ember) 100%);
}

/* сплошная заливка ember, расцветающая из правого верхнего угла */
.halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-ember);
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, #000 22%, transparent 56%);
          mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, #000 22%, transparent 56%);
}

/* высокоплотная точечная сетка в два шага — растр читается «пиксельно» */
.halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(var(--color-ember) 46%, transparent 48%),
    radial-gradient(var(--color-ember) 30%, transparent 32%);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 0, 8px 8px;
  -webkit-mask-image: radial-gradient(135% 125% at 100% 0%, #000 18%, rgba(0,0,0,.55) 48%, transparent 80%);
          mask-image: radial-gradient(135% 125% at 100% 0%, #000 18%, rgba(0,0,0,.55) 48%, transparent 80%);
}

/* контент поверх растра */
.halftone > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   DOTTED DIVIDERS — подпись системы: именно dotted, не dashed и не solid
   ════════════════════════════════════════════════════════════════════════════ */

.divider-v {
  display: block;
  width: 0;
  align-self: stretch;
  min-height: 20px;
  border-left: var(--hairline) dotted var(--color-obsidian);
}

.divider-h {
  height: 0;
  border-top: var(--hairline) dotted var(--color-obsidian);
}

.divider-h--chalk { border-top-color: var(--color-chalk); }
.divider-v--chalk { border-left-color: var(--color-chalk); }

/* ════════════════════════════════════════════════════════════════════════════
   CONTROLS — pill-геометрия обязательна, прямоугольных кнопок в системе нет
   ════════════════════════════════════════════════════════════════════════════ */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  line-height: 1.2;
  padding: var(--spacing-12) var(--spacing-24);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-pills);
  background: transparent;
  color: var(--color-obsidian);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, filter .16s ease;
}

.pill:disabled { opacity: .45; cursor: default; }

.pill:focus-visible {
  outline: var(--hairline) solid var(--color-obsidian);
  outline-offset: 3px;
}

/* Primary CTA — единственное агрессивное пятно */
.pill--ember {
  background: var(--color-ember);
  color: var(--color-obsidian);
  border-color: var(--color-ember);
}
.pill--ember:hover:not(:disabled) { filter: brightness(.92); }

/* Secondary — контурная */
.pill--outline {
  border-color: var(--color-obsidian);
  color: var(--color-obsidian);
}
.pill--outline:hover:not(:disabled) {
  background: var(--color-obsidian);
  color: var(--color-limestone);
}

/* Ghost — нав и инлайн-ссылки: только цвет и позиция */
.pill--ghost {
  padding: var(--spacing-8) var(--spacing-12);
  border-color: transparent;
}
.pill--ghost:hover { background: var(--color-pumice); }

/* Для тёмных секций */
.pill--chalk {
  border-color: var(--color-chalk);
  color: var(--color-chalk);
}
.pill--chalk:hover:not(:disabled) {
  background: var(--color-chalk);
  color: var(--color-obsidian);
}
.pill--chalk:focus-visible { outline-color: var(--color-chalk); }

/* Мелкие кнопки в карточках */
.pill--sm {
  font-size: var(--text-body-sm);
  padding: var(--spacing-10) var(--spacing-18);
}

/* Взведённое удаление: подтверждение светится ember, без лишних цветов */
.pill--armed {
  background: var(--color-ember);
  border-color: var(--color-ember);
  color: var(--color-obsidian);
}

/* ── Category tag badge — единственный жёлтый элемент системы ─────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  background: var(--color-sulfur);
  color: var(--color-obsidian);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-caption);
  line-height: 1.2;
  padding: var(--spacing-4) var(--spacing-10);
  border-radius: var(--radius-pills);
  width: fit-content;
  max-width: 100%;
}

.tag--lg { font-size: var(--text-body-sm); padding: 6px var(--spacing-12); }

/* ── Inputs — радиус 100px, всегда таблетка ──────────────────────────────── */

.field {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  border: var(--hairline) solid var(--color-obsidian);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-24);
  background: transparent;
  max-width: 100%;
}

.field input {
  flex: 1 1 auto;
  min-width: 80px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--color-obsidian);
  padding: var(--spacing-8) 0;
}
.field input::placeholder { color: var(--color-obsidian); opacity: .45; }
.field input:focus { outline: none; }
.field:focus-within { outline: var(--hairline) solid var(--color-obsidian); outline-offset: 3px; }

.field-affix {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  opacity: .5;
  white-space: nowrap;
}

/* Вариант для тёмных секций: прозрачный фон, chalk-контур */
.field--dark { border-color: var(--color-chalk); }
.field--dark input { color: var(--color-chalk); }
.field--dark input::placeholder { color: var(--color-chalk); opacity: .5; }
.field--dark .field-affix { color: var(--color-chalk); }
.field--dark:focus-within { outline-color: var(--color-chalk); }

/* ════════════════════════════════════════════════════════════════════════════
   NAV — ряд навигации внутри limestone-таблетки (подпись системы)
   ════════════════════════════════════════════════════════════════════════════ */

.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-9);
  background: var(--surface-1);
  border-radius: var(--radius-pills);
  padding: var(--spacing-12) var(--spacing-20);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  padding-right: var(--spacing-4);
}

.brand-mark { width: 26px; height: 26px; display: block; flex: none; }

.brand-word {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-subheading);
  line-height: 1;
}

.nav-domain {
  font-family: var(--font-caption);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  opacity: .6;
  padding: 0 var(--spacing-4);
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-9);
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   STAT ROW — ember-карточки, самая доминирующая поверхность экрана
   ════════════════════════════════════════════════════════════════════════════ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--element-gap);
}

.stat {
  background: var(--surface-2);
  color: var(--color-chalk);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: 0;
}

/* Подпись — obsidian, а не chalk: белый 14px на ember даёт лишь 3.4:1.
   Крупное значение остаётся chalk, как и предписывает DESIGN.md.          */
.stat-label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-obsidian);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  font-size: clamp(48px, 5.4vw, var(--text-heading-2xl));
  line-height: var(--leading-heading-2xl);
}

.stat-value small {
  font-size: 0.34em;
  letter-spacing: 0.04em;
  opacity: .8;
  margin-left: .12em;
}

/* ════════════════════════════════════════════════════════════════════════════
   FORGE — тёмная секция создания сайта (Obsidian + chalk pill input)
   ════════════════════════════════════════════════════════════════════════════ */

.forge {
  background: var(--color-obsidian);
  color: var(--color-chalk);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.forge-head { display: flex; flex-direction: column; gap: var(--spacing-12); }
.forge-head .section-title { color: var(--color-chalk); }
.lede--dark { color: var(--color-chalk); opacity: .78; }

/* Зона дропа: dotted-контур в chalk — тот же сигнатурный штрих */
.drop {
  border: var(--hairline) dotted var(--color-chalk);
  border-radius: var(--radius-cards);
  padding: var(--spacing-56) var(--spacing-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  text-align: center;
  transition: background-color .16s ease, border-color .16s ease;
}

.drop.over {
  border-color: var(--color-ember);
  background: rgba(252, 80, 0, .14);
}

.drop-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--text-subheading);
  line-height: 1.1;
  color: var(--color-chalk);
}

.drop-or {
  font-family: var(--font-caption);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-chalk);
  opacity: .5;
}

.drop-file { min-height: 22px; }

.forge-row {
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  flex-wrap: wrap;
}

.forge-row .field { flex: 1 1 380px; }

.forge-foot {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  color: var(--color-chalk);
}
.forge-foot .caption { opacity: .62; }

/* ════════════════════════════════════════════════════════════════════════════
   MESSAGES — без красного и зелёного: ошибка = ember, успех = sulfur
   ════════════════════════════════════════════════════════════════════════════ */

.msg {
  border-radius: var(--radius-pills);
  padding: var(--spacing-16) var(--spacing-32);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  margin-top: calc(var(--section-gap) * -0.5);
  overflow-wrap: anywhere;
}

.msg.ok    { background: var(--color-sulfur); color: var(--color-obsidian); }
.msg.error { background: var(--color-ember);  color: var(--color-obsidian); }

.err {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  min-height: 18px;
  color: var(--color-ember);
}

/* ════════════════════════════════════════════════════════════════════════════
   SITE LIST — Content Cards
   ════════════════════════════════════════════════════════════════════════════ */

.list-head {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  margin-bottom: calc(var(--section-gap) * -0.5);
}

.list-count {
  font-family: var(--font-caption);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .55;
}

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--element-gap);
}

.site {
  background: var(--surface-1);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

/* Image area сверху: витрина, если снята, иначе — сплошной ember-блок */
.site-shot {
  border-radius: var(--radius-medium);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16);
}

/* contain, а не cover: витрина — цельная сцена, кадрировать её нельзя.
   Ember-подложка работает как паспарту для любого формата.              */
.site-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.site-shot-word {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: clamp(var(--text-heading), 4.4vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  color: var(--color-chalk);
  text-align: center;
  overflow-wrap: anywhere;
}

.site-head { display: flex; flex-direction: column; gap: var(--spacing-10); }

.site-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--text-subheading);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.site-url {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  overflow-wrap: anywhere;
  border-bottom: var(--hairline) dotted var(--color-obsidian);
  width: fit-content;
  max-width: 100%;
  padding-bottom: 2px;
}
.site-url:hover { background: var(--color-sulfur); }

.site-meta { display: flex; flex-direction: column; gap: var(--spacing-12); }
.site-meta .caption { opacity: .62; }
.site-meta .caption.warn { opacity: 1; }

.site-actions { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-top: auto; }

.list-empty {
  background: var(--surface-1);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  align-items: flex-start;
}
.list-empty h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--text-subheading);
  line-height: 1.1;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.foot { display: flex; flex-direction: column; gap: var(--spacing-20); }
.foot-row { display: flex; gap: var(--spacing-24); flex-wrap: wrap; }
.foot .caption { opacity: .55; }

/* ════════════════════════════════════════════════════════════════════════════
   ВИТРИНА (shot overlay) — плоский pumice-экран, без затемнения и теней
   ════════════════════════════════════════════════════════════════════════════ */

.shot {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
}

.shot-head, .shot-foot {
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  padding: var(--spacing-20) var(--spacing-24);
  flex-wrap: wrap;
  flex: none;
}

.shot-title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }

.shot-title strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--text-subheading);
  line-height: 1.1;
}
.shot-title span { font-size: var(--text-body-sm); opacity: .6; overflow-wrap: anywhere; }

/* Сегментированный переключатель внутри limestone-таблетки */
.views {
  display: flex;
  gap: var(--spacing-4);
  background: var(--surface-1);
  border-radius: var(--radius-pills);
  padding: var(--spacing-4);
  flex-wrap: wrap;
}
.views button {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  line-height: 1.2;
  padding: var(--spacing-10) var(--spacing-18);
  border: 0;
  border-radius: var(--radius-pills);
  background: transparent;
  color: var(--color-obsidian);
  cursor: pointer;
  transition: background-color .16s ease;
}
.views button:hover { background: var(--color-pumice); }
.views button.active { background: var(--color-ember); color: var(--color-obsidian); }
.views button:focus-visible { outline: var(--hairline) solid var(--color-obsidian); outline-offset: 2px; }

.shot-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-24) var(--spacing-8);
  overflow: hidden;
}

/* Картинка занимает весь свободный бокс, а вписывается внутрь него через
   object-fit. Процентный max-height здесь не срабатывал: высота flex-бокса
   для него недостаточно определена, и витрина 3200px уезжала за экран.    */
.shot-body img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
}

.spinner {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  font-size: var(--text-body);
}
.spinner i {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px dotted var(--color-obsidian);
  border-top-color: var(--color-ember);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.shot-foot .caption { opacity: .62; margin-left: var(--spacing-8); }
.shot-foot .tag { flex: none; }

/* ════════════════════════════════════════════════════════════════════════════
   ВХОД — тёмная секция, сигнатурный display + chalk pill input
   ════════════════════════════════════════════════════════════════════════════ */

/* align-content, а не place-items: при justify-items:center колонка грида
   сжимается по контенту и width:100% у .auth-grid разрешается в auto —
   поле ввода схлопывалось до ширины кнопки.                              */
.auth {
  min-height: 100vh;
  background: var(--color-obsidian);
  color: var(--color-chalk);
  display: grid;
  align-content: center;
  padding: var(--spacing-24);
}

.auth-grid {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--spacing-56);
  align-items: center;
}

.auth-copy { display: flex; flex-direction: column; gap: var(--spacing-32); align-items: flex-start; }
.auth-copy .eyebrow { opacity: .55; }
.auth-title { font-size: clamp(56px, 8vw, 140px); }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  align-self: stretch;
  max-width: 520px;
}
.auth-form .field { width: 100%; }
.auth-art { min-height: 460px; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  :root { --section-gap: 56px; --card-padding: 24px; }
  .auth-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); }
  .auth-art { display: none; }
  .list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .page { padding: var(--spacing-16) var(--spacing-16) var(--spacing-56); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .nav { border-radius: var(--radius-cards); }
  .nav-right { margin-left: 0; width: 100%; }
  .nav .divider-v { display: none; }
  .drop { padding: var(--spacing-32) var(--spacing-20); }
  .field { padding-left: var(--spacing-16); }
  /* на узком экране префикс https:// съедает всю таблетку */
  .forge-row .field-affix:first-of-type { display: none; }
  .msg { border-radius: var(--radius-cards); padding: var(--spacing-16) var(--spacing-20); }
  .shot-head, .shot-foot { padding: var(--spacing-16); }
  .shot-body { padding: 0 var(--spacing-16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ошибка рендера витрины: модалка непрозрачная и лежит выше #msg,
   поэтому сообщение показываем прямо внутри неё. */
.shot-err {
  max-width: 46ch;
  text-align: center;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-obsidian);
  background: var(--color-ember);
  border-radius: var(--radius-cards);
  padding: var(--spacing-16) var(--spacing-24);
  overflow-wrap: anywhere;
}