/*
 * Reset + base layout (Phase 8A, раздел 4/8/25 задачи).
 * Mobile-first: 360-430px основной target, safe-area для Telegram Mini App,
 * без горизонтального overflow.
 */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-value);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* Сам фон — на body::before ниже, а не здесь. Причина (найденный баг): html,body
     выше получают height:100% — это ФИКСИРУЕТ высоту body ровно в один viewport,
     хотя контент (длинная форма) выше него в несколько раз. background на body без
     явного background-repeat:no-repeat при этом тайлился заново каждый viewport при
     скролле (background-size:auto для градиента по умолчанию равен размеру самого
     background positioning area — то есть один "тайл" = одна высота body = один
     экран), что и давало видимую границу-повтор. */
}

/* Mesh-gradient/light-flare background (final correction pass, раздел 18 задачи —
   заменяет единый симметричный radial gradient из correction pass №2). Три
   CSS-слоя на одном элементе (comma-separated background-image), без PNG/SVG/JS:
     1) мягкий curved glow в верхнем левом углу (electric blue, затухает к 60% —
        "transparent", не жёсткая граница);
     2) более широкий glow в правом нижнем углу (та же идея, другой цвет/радиус —
        визуально отличим от первого, не симметричная копия);
     3) базовая vignette-подложка: глубокий indigo в центре -> чуть темнее у самых
        углов — держит общий "premium tech marketplace" тон и не даёт flare'ам
        выглядеть как отдельные пятна на плоском фоне.
   --bg-base СВЕТЛЕЕ прежнего near-black центра (раздел 18: "фон должен быть светлее
   и глубже, не превращать UI в почти чёрный") — тон стал заметно синее/глубже, а не
   просто "темнее". Fields/cards (--color-graphite) по-прежнему заметно контрастнее
   фона на глаз — не проверяется программно, но проверено вручную в browser preview
   (см. PROJECT_STATUS.md).

   position:fixed + фиксированный inset:0 (не высота документа) — та же причина, что
   раньше (Phase 8A background fix, commit 4925cdb): гарантирует отсутствие повтора/шва
   на длинной странице независимо от прокрутки; iOS Safari/WKWebView ненадёжно
   поддерживает background-attachment:fixed на скроллящемся body, обычная fixed-
   раскладка — надёжно везде, включая Telegram Mini App. z-index:-1 держит слой позади
   контента; pointer-events:none не даёт ему перехватывать тапы/скролл.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 16% 12%, var(--bg-flare-primary) 0%, transparent 60%),
    radial-gradient(ellipse 85% 75% at 88% 92%, var(--bg-flare-secondary) 0%, transparent 62%),
    radial-gradient(ellipse 150% 130% at 50% 50%, var(--bg-base) 0%, var(--bg-deep) 100%);
  background-repeat: no-repeat;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Telegram Mini App safe-area (раздел 8 задачи) */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

.view-root {
  flex: 1 1 auto;
  padding: var(--space-4);
  padding-bottom: var(--space-7);
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* Desktop — вторичный режим (раздел 8 задачи): просто ограничиваем ширину контента,
   без отдельной desktop-раскладки. */
@media (min-width: 720px) {
  .view-root {
    max-width: 560px;
    padding-top: var(--space-6);
  }
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Гарантирует, что el.hidden реально скрывает элемент даже если какой-то компонент
   (например .price-payout { display: flex }) задаёт свой display — без этого
   правила author-стиль компонента побеждает UA-стиль [hidden] в каскаде. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}