/* ═══════════════════════════════════════════════════════════════
   MONO — токены, сброс, фон
   Монохромная палитра: цвет только один — уровень серого.

   Правило слоёв (важно для плавности прокрутки):
     • --glass-*   — только для плавающих элементов с backdrop-filter
                     (таб-бар, прилипшая шапка, шторка, тост, панель заказа).
     • --surface-* — для всего, что прокручивается: карточки, строки,
                     чипы, поля. Тот же вид стекла, но без размытия фона,
                     поэтому прокрутка остаётся на композиторе.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* поверхности */
  --bg: #ececed;
  --bg-2: #f7f7f8;
  --bg-3: #e2e2e4;
  --ink: #0b0b0c;
  /* Уровни серого для текста подобраны по контрасту, а не на глаз:
     --ink-2 и --ink-3 обязаны держать 4.5:1 на фоне приложения, потому
     что ими набраны подписи, плейсхолдеры и неактивные вкладки.
     --ink-faint — только для нетекстовых деталей (оси, засечки, иконки
     пустых состояний), к нему требование контраста не применяется. */
  --ink-2: rgba(11, 11, 12, 0.72);
  --ink-3: rgba(11, 11, 12, 0.6);
  --ink-faint: rgba(11, 11, 12, 0.34);
  --ink-4: rgba(11, 11, 12, 0.13);
  --hair: rgba(11, 11, 12, 0.1);

  /* стекло с размытием — только плавающие слои */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.7);
  --glass-stroke: rgba(255, 255, 255, 0.8);
  --glass-edge: rgba(11, 11, 12, 0.07);
  --glass-blur: 28px;
  --glass-sat: 180%;
  /* Подложка стекла приводится к яркости темы ДО тонировки. Без этого
     светлая картинка, проезжающая под шапкой в тёмной теме, высветляла
     панель, и почти белый заголовок на ней переставал читаться. */
  --glass-bright: 1.08;

  /* «стекло» без размытия — прокручиваемый контент */
  --surface: rgba(255, 255, 255, 0.62);
  --surface-2: rgba(255, 255, 255, 0.78);
  --surface-weak: rgba(255, 255, 255, 0.4);
  --surface-sunken: rgba(11, 11, 12, 0.045);

  /* блики: тонкая световая кромка сверху, приглушённая снизу */
  --spec: rgba(255, 255, 255, 0.95);
  --spec-2: rgba(255, 255, 255, 0.3);
  --inner-top: rgba(255, 255, 255, 0.7);
  --inner-bottom: rgba(11, 11, 12, 0.05);

  --shadow-1: 0 1px 2px rgba(11, 11, 12, 0.045), 0 8px 24px -14px rgba(11, 11, 12, 0.32);
  --shadow-2: 0 2px 6px rgba(11, 11, 12, 0.07), 0 20px 48px -20px rgba(11, 11, 12, 0.42);
  --shadow-3: 0 30px 80px -28px rgba(11, 11, 12, 0.5);

  /* инверсные (кнопка-акцент) */
  --solid: #0b0b0c;
  --solid-ink: #fbfbfc;

  /* радиусы — «сквиркл»-ощущение за счёт крупных значений */
  --r-xs: 12px;
  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* движение: одно затухание на весь интерфейс.
     Кривая монотонная, без заброса за конечное значение — предметы
     тормозят плавно, а не подпрыгивают. */
  --out-expo: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: cubic-bezier(0.25, 0.9, 0.25, 1);
  --t-fast: 0.16s;
  --t: 0.28s;
  --t-slow: 0.46s;

  /* отступы под системные зоны Telegram */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 68px;
  --gutter: 16px;
  /* Ширина «телефона». Приложение живёт в Telegram, где ширина всегда
     телефонная; на широком экране мы держим ту же колонку по центру,
     чтобы десктоп и мобильный показывали одну и ту же вёрстку. */
  --app-w: 460px;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #08080a;
  --bg-2: #131316;
  --bg-3: #050506;
  --ink: #f4f4f6;
  --ink-2: rgba(244, 244, 246, 0.72);
  --ink-3: rgba(244, 244, 246, 0.54);
  --ink-faint: rgba(244, 244, 246, 0.34);
  --ink-4: rgba(244, 244, 246, 0.14);
  --hair: rgba(244, 244, 246, 0.11);

  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.13);
  --glass-stroke: rgba(255, 255, 255, 0.18);
  --glass-edge: rgba(0, 0, 0, 0.5);
  --glass-blur: 32px;
  --glass-sat: 160%;
  --glass-bright: 0.4;

  --surface: rgba(255, 255, 255, 0.062);
  --surface-2: rgba(255, 255, 255, 0.095);
  --surface-weak: rgba(255, 255, 255, 0.038);
  --surface-sunken: rgba(0, 0, 0, 0.3);

  --spec: rgba(255, 255, 255, 0.44);
  --spec-2: rgba(255, 255, 255, 0.1);
  --inner-top: rgba(255, 255, 255, 0.13);
  --inner-bottom: rgba(0, 0, 0, 0.3);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -16px rgba(0, 0, 0, 0.9);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 60px -24px rgba(0, 0, 0, 0.95);
  --shadow-3: 0 34px 90px -30px rgba(0, 0, 0, 1);

  --solid: #f4f4f6;
  --solid-ink: #0b0b0c;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Смена темы: красим только то, что действительно меняется.
   transition на body целиком заставлял перерисовывать всё дерево. */
body,
.bg {
  transition: background-color var(--t) var(--ease);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button { cursor: pointer; }
/* важнее любых display: grid/flex у компонентов */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 0; height: 0; }

/* Видимый фокус с клавиатуры — на мыши и тапе не мешает.
   Радиус здесь не задаём: обводка и так повторяет скругление элемента,
   а заданный радиус переписал бы собственное скругление при фокусе. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* У полей ввода фокус показывает контейнер (.field / .search) — он и есть
   видимая рамка. Обводка на самом input рисовалась бы внутри его отступов,
   мимо контура поля, поэтому её снимаем. */
.field :focus-visible,
.search :focus-visible,
.field input:focus,
.field textarea:focus,
.field select:focus,
.search input:focus {
  outline: none;
}

/* ── типографика ─────────────────────────────────────────────── */
.t-hero { font-size: 32px; line-height: 1.04; font-weight: 700; letter-spacing: -0.038em; }
.t-title { font-size: 21px; line-height: 1.2; font-weight: 650; letter-spacing: -0.028em; }
.t-sub { font-size: 17px; line-height: 1.3; font-weight: 620; letter-spacing: -0.022em; }
.t-body { font-size: 15px; }
.t-cap { font-size: 13px; color: var(--ink-2); letter-spacing: -0.005em; }
.t-micro { font-size: 11px; color: var(--ink-3); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 650; }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.center { text-align: center; }
.strike { text-decoration: line-through; color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.balance { text-wrap: balance; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ── иконки ──────────────────────────────────────────────────── */
.ic {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ic.sm { width: 18px; height: 18px; stroke-width: 1.9; }
.ic.xs { width: 15px; height: 15px; stroke-width: 2; }
.ic.lg { width: 26px; height: 26px; }
.ic.solid { fill: currentColor; stroke: currentColor; }

/* эмодзи приводим к ч/б, чтобы не выбивались из монохрома */
.emo { filter: grayscale(1) contrast(1.15); opacity: 0.85; font-style: normal; }

/* ── фон ─────────────────────────────────────────────────────────
   Три мягких световых пятна, от которых стекло преломляет свет.
   Никакого filter: blur() — градиенты и так с мягким краем, а blur
   заставлял браузер перерисовывать полэкрана на каждом кадре.
   Осталось только движение transform: это чистый композитор.
   ─────────────────────────────────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% -12%, var(--bg-2) 0%, transparent 58%),
    radial-gradient(100% 60% at 50% 112%, var(--bg-3) 0%, transparent 60%),
    var(--bg);
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.75;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.b1 {
  width: 78vmax; height: 78vmax;
  left: -30vmax; top: -30vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.34) 34%, transparent 68%);
  animation: drift1 34s var(--ease) infinite alternate;
}
.b2 {
  width: 70vmax; height: 70vmax;
  right: -28vmax; top: 16vh;
  background: radial-gradient(circle at 50% 50%, rgba(11, 11, 12, 0.13) 0%, rgba(11, 11, 12, 0.05) 38%, transparent 70%);
  animation: drift2 44s var(--ease) infinite alternate;
}
.b3 {
  width: 62vmax; height: 62vmax;
  left: 2vw; bottom: -28vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.26) 36%, transparent 66%);
  animation: drift3 52s var(--ease) infinite alternate;
}
:root[data-theme='dark'] .b1 {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 36%, transparent 68%);
}
:root[data-theme='dark'] .b2 {
  background: radial-gradient(circle at 50% 50%, rgba(150, 150, 175, 0.13) 0%, rgba(120, 120, 145, 0.04) 38%, transparent 70%);
}
:root[data-theme='dark'] .b3 {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 36%, transparent 66%);
}

/* Зерно: ровно один экран и повтор плиткой.
   Раньше слой был 4× площади экрана и зря занимал память. */
.bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

@keyframes drift1 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(12vw, 8vh, 0); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-13vw, -10vh, 0); }
}
@keyframes drift3 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(9vw, -12vh, 0); }
}

/* ── загрузочный экран ───────────────────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  gap: 22px;
  justify-items: center;
  background: var(--bg);
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.boot.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-mark {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  animation: breathe 2.4s var(--ease) infinite;
}
.boot-bar {
  width: 120px; height: 2px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.boot-bar i {
  display: block; height: 100%; width: 40%;
  background: var(--ink);
  border-radius: 2px;
  animation: slide 1.15s var(--ease) infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}