/* ============================================================================
   geoweta.com — дизайн-система (фундамент для всех страниц)
   Стиль Notion: белые поверхности, тонкие рамки, много воздуха, почти нет теней,
   синий акцент #2383E2 только на активном и на главной кнопке.
   Тема одна — светлая. Тёмной темы и переключателя нет.

   ШПАРГАЛКА ПО КОМПОНЕНТАМ (эти классы гарантированы, на них можно опираться):

   Каркас
     .container                — центрирующая обёртка: артборд 1440, поля 40 → контент 1360
     .header .header__inner    — шапка сайта (рендерит app.js: mountHeader)
     .logo                     — вордмарк «geoweta» (квадрата с «g» в макете сайта нет)
     .nav  .nav a              — навигация в шапке; активный пункт — .nav a.is-active
     .footer                   — подвал (рендерит app.js: mountFooter)

   Кнопки
     .btn                      — база (белая с рамкой)
     .btn--primary             — синяя акцентная
     .btn--ghost               — прозрачная, без рамки
     .btn--danger              — красная
     .btn--dark                — тёмная (#1A1917), для CTA на светлом
     .btn--yandex              — «Войти с Яндекс ID» (квадрат #FC3F1D)
     .btn--sm .btn--lg         — размеры (36 / 50px)
     .btn--icon .btn--block    — квадратная под иконку / во всю ширину
     [disabled] / .is-loading  — состояния

   Поверхности
     .card                     — карточка (белая + рамка + радиус + паддинг)
     .surface                  — поверхность без паддинга

   Формы
     .field .label .input .textarea .select .field__hint(.is-error)
     .input--search            — поле поиска (серый фон)
     .segmented                — переключатель-сегмент

   Текст
     .h1 .h2 .h3 .lead .muted .small .mono .faint

   Чипы и бейджи
     .badge .badge--accent/--ok/--danger/--hit/--new/--vision/--think/--expensive
     .pill (.is-active)        — фильтр-таблетка
     .gift-pill                — «30 ₽ в подарок за регистрацию»

   Продуктовые блоки
     .model-row                — строка модели 64px (монограмма/имя/бейджи/цена)
     .balance-widget           — баланс + кнопка «Пополнить» (.is-low — красный)
     .balance-pill             — пилюля с балансом в шапке
     .guest-banner             — плашка гостя (.guest-banner--soft — серая с CTA)
     .model-error              — «модель не ответила» + повтор
     .trust-line               — моно-строка «0,04 ₽ · 312 токенов · осталось …»

   Раскладка
     .grid .grid--2 .grid--3 .stack .row .spacer .divider .section

   Оверлеи
     .modal .modal__backdrop .modal__box
     .toast-host .toast .toast--ok .toast--err

   Состояния и мелочи
     .skeleton .spinner .avatar .empty-state .scroll-area

   Утилиты
     .hidden .center .text-right .nowrap .truncate .sr-only .no-scroll

   Правила проекта: только системные шрифты, ноль внешних ресурсов,
   анимации — исключительно transform/opacity, prefers-reduced-motion уважается.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */

:root {
  /* поверхности и рамки */
  --surface: #FFFFFF;
  --surface-2: #F7F7F5;
  --surface-3: #F1F1EF;
  --border: #E3E2DF;
  --border-2: #EDECE9;
  --border-soft: #EDECE9;      /* синоним border-2 для старой разметки */
  --bg: #FFFFFF;
  --bg-soft: #FBFBFA;

  /* текст */
  --text: #37352F;
  --text-2: #57564F;
  --muted: #787774;
  --faint: #9B9A97;
  --hair: #D3D2CE;             /* разделители-точки, тонкие линии */

  /* акценты */
  --accent: #2383E2;
  --accent-hover: #1B6FC4;
  --accent-tint: #E7F0FB;
  --accent-ink: #FFFFFF;
  --danger: #DC2626;
  --danger-tint: #FEF2F2;
  --danger-border: #F3D5D5;
  --warn: #B45309;
  --warn-tint: #FBF3E7;
  --warn-border: #F0E2C6;
  --ok: #15803D;
  --ok-tint: #E7F5EC;
  --ink: #1A1917;              /* «чёрный» для тёмных плашек и CTA */

  /* вендоры */
  --openai: #10A37F;
  --anthropic: #C96442;
  --gemini: #1A73E8;
  --deepseek: #4D6BFE;
  --grok: #0F172A;
  --purple: #7B54C4;
  --yandex: #FC3F1D;

  /* геометрия */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 15, 15, .04);
  --shadow-md: 0 6px 20px rgba(15, 15, 15, .08);
  --shadow-lg: 0 0 0 1px rgba(15, 15, 15, .03), 0 26px 64px rgba(15, 15, 15, .16);

  --container: 1440px;
  --header-h: 64px;
  --gap: 16px;

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Сброс и база
   -------------------------------------------------------------------------- */

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

/* Атрибут hidden даёт display:none из браузерных стилей, и ЛЮБОЕ наше правило с display
   (а таких десятки: .card, .row, .pay-card) его молча перебивает. На hidden в проекте
   завязано под две сотни мест — от гостевых плашек до состояний оплаты, поэтому правило
   живёт здесь, в базе, а не копируется по страничным файлам. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Полоса прокрутки занимает место всегда. Иначе при переходе с /chat (там страница
     не прокручивается) на любую длинную страницу весь макет скачет вбок на ширину
     полосы — около 15px.
     Почему именно overflow-y на html, а не только scrollbar-gutter: у чата стоит
     body { overflow: hidden }, а это значение ПРОБРАСЫВАЕТСЯ на область просмотра,
     если у html overflow остаётся visible — и резерв пропадает. Явное значение
     у html отменяет проброс, поэтому ширина контента одинакова на всех страницах. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 600; }

::selection { background: var(--accent-tint); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* --------------------------------------------------------------------------
   3. Типографика
   -------------------------------------------------------------------------- */

.h1, .h2, .h3 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.h1 { font-size: clamp(30px, 5vw, 56px); letter-spacing: -.03em; }
.h2 { font-size: clamp(24px, 3.4vw, 32px); }
.h3 { font-size: clamp(18px, 2vw, 23px); font-weight: 700; line-height: 1.25; }

.lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.mono {
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Каркас: container / header / nav / footer
   -------------------------------------------------------------------------- */

/* Артборд макета — ровно 1440 с полями по 40, то есть контент 1360.
   max-width 1440 + padding 40 даёт на 1440-экране пиксель в пиксель, а на широких
   мониторах контент не расползается шире 1360. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 900px) { .container { padding-inline: 24px; } }
@media (max-width: 520px) { .container { padding-inline: 16px; } }

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: calc(var(--header-h) - 1px);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #111111;
  flex: none;
}
/* Квадрат с «g» был только в шапке холста Claude Design, на экранах сайта его нет —
   везде чистый вордмарк. Правило оставлено на случай возврата, но по умолчанию скрыт. */
.logo__mark { display: none; }
.logo--sm { font-size: 15px; }


.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  /* в макете у блока навигации свой отступ от вордмарка поверх зазора шапки (28+12) */
  margin-left: 12px;
  list-style: none;
}
.nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  transition: color .16s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a.is-active { color: var(--text); font-weight: 500; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
/* главная кнопка шапки в макете — 38px с паддингом 18 */
.header__actions .btn--primary { padding: 0 18px; }

@media (max-width: 860px) {
  .header__inner { flex-wrap: wrap; gap: 12px; padding-block: 10px; min-height: 0; }
  .nav {
    order: 3;
    margin-left: 0;
    width: 100%;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
}

.footer {
  margin-top: 80px;
  padding: 40px 0 28px;
  border-top: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 13px;
  background: var(--surface);
}
.footer a { color: var(--faint); transition: color .16s var(--ease); }
.footer a:hover { color: var(--text); }
.footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
}
.footer__links { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.footer__links a { display: inline-block; padding: 5px 0; }
@media (pointer: coarse) { .footer__links a { padding: 9px 0; } }
.footer__bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  color: var(--faint);
}
@media (max-width: 720px) {
  .footer { margin-top: 56px; }
  .footer__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* --------------------------------------------------------------------------
   5. Кнопки
   -------------------------------------------------------------------------- */

.btn {
  --btn-h: 40px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              opacity .16s var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost { border-color: transparent; background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-3); }

.btn--link { border-color: transparent; background: transparent; color: var(--accent); }
.btn--link:hover { background: var(--accent-tint); }

.btn--danger {
  border-color: transparent;
  background: var(--danger);
  color: #fff;
  font-weight: 600;
}
.btn--danger:hover { background: #B91C1C; }

.btn--dark {
  border-color: transparent;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.btn--dark:hover { background: #37352F; }

/* «Войти с Яндекс ID»: белая кнопка с фирменным красным квадратом внутри */
.btn--yandex {
  --btn-h: 54px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.btn__ya {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--yandex);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.btn--dark .btn__ya, .btn--primary .btn__ya { background: var(--yandex); }

.btn--sm { --btn-h: 32px; padding: 0 12px; font-size: 14px; border-radius: var(--radius-sm); }
.btn--lg { --btn-h: 50px; padding: 0 24px; font-size: 16px; border-radius: var(--radius-md); font-weight: 600; }

.btn--icon { padding: 0; width: var(--btn-h); }
.btn--round { border-radius: var(--radius-pill); }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-disabled {
  background: var(--surface-2);
  border-color: #EAE9E6;
  color: #B9B8B4;
  cursor: not-allowed;
}

/* .is-loading прячет содержимое и показывает крутилку */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: gw-spin .7s linear infinite;
}
.btn--primary.is-loading::after,
.btn--danger.is-loading::after,
.btn--dark.is-loading::after { border-color: rgba(255, 255, 255, .8); border-top-color: transparent; }

/* --------------------------------------------------------------------------
   6. Поверхности
   -------------------------------------------------------------------------- */

.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.card {
  background: var(--surface);
  border: 1px solid #E9E9E7;
  border-radius: var(--radius-lg);
  padding: 20px;
}
.card--pad-sm { padding: 14px; }
.card--lg { border-radius: 16px; padding: 32px; }
.card--hover { transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.card--hover:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.card--muted { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   7. Формы
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; }

.label { font-size: 13px; font-weight: 500; color: var(--muted); }

.input, .textarea, .select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--hair); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 131, 226, .12);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }

.input--search { background: var(--surface-2); padding-left: 36px; }

.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

/* стрелка селекта — data-URI, чтобы не тянуть внешних картинок */
.select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9A97' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.field__hint { font-size: 12px; color: var(--faint); }
.field__hint.is-error { color: var(--danger); }

/* переключатель-сегмент (вход/регистрация, вкладки кода) */
.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.segmented button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.segmented button:hover { color: var(--text-2); }
.segmented button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 15, 15, .06);
}

/* --------------------------------------------------------------------------
   8. Бейджи, пилюли, аватар
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: #6B6A66;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.badge--accent { background: var(--accent-tint); color: var(--accent); }
.badge--ok { background: var(--ok-tint); color: var(--ok); }
.badge--danger { background: var(--danger-tint); color: var(--danger); }

/* бейджи моделей — цвета один в один из макета */
.badge--hit { background: #FDEBEC; color: #C0392B; }
.badge--new { background: var(--accent-tint); color: var(--accent); }
.badge--vision { background: var(--surface-3); color: #6B6A66; }
.badge--think { background: #F0EBF7; color: var(--purple); }
.badge--expensive { background: var(--warn-tint); color: var(--warn); }

/* крупная бейдж-таблетка над заголовком секции */
.badge--pill {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

/* фильтр-таблетки */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.pill:hover { background: #E9E8E5; }
.pill.is-active {
  background: var(--text);
  color: #fff;
  font-weight: 500;
}

/* подарочная плашка «30 ₽ за регистрацию» */
.gift-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: #FBF8F0;
  border: 1px solid #EFE6D3;
  color: #8A5A12;
  font-size: 13px;
  font-weight: 500;
}
.gift-pill svg { width: 15px; height: 15px; flex: none; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. Баланс, строка модели, гостевые плашки
   -------------------------------------------------------------------------- */

.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.balance-pill:hover { background: var(--surface-2); }
.balance-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.balance-pill.is-low { border-color: #F3D5D5; color: var(--danger); }
.balance-pill.is-low .balance-pill__dot { background: var(--danger); }

/* виджет баланса (сайдбар чата, аккаунт) */
.balance-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-2);
  padding-top: 12px;
}
.balance-widget__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.balance-widget__label { font-size: 13px; color: var(--muted); }
.balance-widget__value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.balance-widget .btn { --btn-h: 32px; }
.balance-widget.is-low .balance-widget__value { color: var(--danger); font-weight: 700; }

/* строка модели — 64px, как в макете */
.model-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 64px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s var(--ease);
}
.model-row:hover { background: var(--surface-2); }
.model-row.is-selected { background: rgba(35, 131, 226, .07); }
.model-row + .model-row { border-top: 1px solid var(--border-2); }

.model-row__mono {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--muted);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.model-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.model-row__top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.model-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-row__desc {
  font-size: 12px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-row__price {
  flex: none;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.model-row__price small { display: block; font-size: 11px; color: var(--faint); }
.model-row__fav {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--hair);
  cursor: pointer;
}
.model-row__fav.is-on { color: #E0A82E; }

/* плашка гостя: сколько бесплатных сообщений осталось */
.guest-banner {
  background: var(--warn-tint);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  color: #8A5A12;
}
/* серый вариант с призывом зарегистрироваться */
.guest-banner--soft {
  background: var(--surface-2);
  border-color: #E9E9E7;
  color: var(--text);
  font-size: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guest-banner__head { display: flex; gap: 10px; align-items: flex-start; }
.guest-banner__head svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ошибка модели */
.model-error {
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.model-error__head { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #7F1D1D; }
.model-error__head svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.model-error .btn {
  --btn-h: 34px;
  align-self: flex-start;
  border-color: #E3B7B7;
  color: #B91C1C;
  background: var(--surface);
}
.model-error .btn:hover { background: #FFF7F7; }

/* моно-строка под ответом: цена, токены, остаток */
.trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.trust-line__sep { color: var(--hair); }

/* --------------------------------------------------------------------------
   10. Раскладка
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack--sm { --gap: 8px; }
.stack--lg { --gap: 28px; }

.row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}
.row--tight { --gap: 8px; }
.row--top { align-items: flex-start; }

.spacer { flex: 1 1 auto; min-width: 0; }

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--border-2);
}

.section { padding: clamp(48px, 7vw, 80px) 0; }
.section--soft { background: var(--bg-soft); border-top: 1px solid var(--border-2); }

/* --------------------------------------------------------------------------
   11. Модалка
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal[hidden], .modal.hidden { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, .38);
  animation: gw-fade .18s var(--ease);
}

.modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 32px 32px 24px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(15, 15, 15, .04), 0 12px 40px rgba(15, 15, 15, .14);
  animation: gw-pop .2s var(--ease);
}
.modal__box--wide { max-width: 640px; }
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
}

@media (max-width: 480px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__box {
    max-width: none;
    padding: 24px 20px 20px;
    border-radius: 16px 16px 0 0;
    max-height: 94vh;
    animation: gw-slide-up .22s var(--ease);
  }
}

/* модалка входа */
.auth__head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.auth__title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.auth__note { text-align: center; font-size: 13px; color: var(--faint); }
.auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--faint);
}
.auth__or::before, .auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}
.auth__legal {
  text-align: center;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.5;
}
.auth__legal a { color: var(--text-2); border-bottom: 1px solid var(--hair); }
.auth__safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.auth__safe svg { width: 15px; height: 15px; flex: none; }

/* --------------------------------------------------------------------------
   12. Тосты
   -------------------------------------------------------------------------- */

.toast-host {
  position: fixed;
  z-index: 120;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  line-height: 1.45;
  animation: gw-toast-in .22s var(--ease);
}
.toast.is-out { animation: gw-toast-out .18s var(--ease) forwards; }
.toast--ok { border-left-color: var(--ok); }
.toast--err { border-left-color: var(--danger); }
.toast a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.toast__close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

@media (max-width: 520px) {
  .toast-host { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* --------------------------------------------------------------------------
   13. Загрузка, пустые состояния, прокрутка
   -------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, #EDECEA, #F5F5F4, #EDECEA);
  background-size: 200% 100%;
  animation: gw-shimmer 1.4s linear infinite;
  border-radius: 4px;
  min-height: 12px;
}
.skeleton--circle { border-radius: 50%; }

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gw-spin .7s linear infinite;
  vertical-align: -3px;
}
.spinner--lg { width: 30px; height: 30px; border-width: 3px; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-state__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--muted);
}
.empty-state__title { color: var(--text); font-weight: 600; font-size: 17px; }

.scroll-area {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #DCDBD7 transparent;
  -webkit-overflow-scrolling: touch;
}
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #DCDBD7;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }

/* --------------------------------------------------------------------------
   14. Утилиты
   -------------------------------------------------------------------------- */

.hidden { display: none !important; }
.center { text-align: center; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   15. Анимации
   -------------------------------------------------------------------------- */

@keyframes gw-spin { to { transform: rotate(360deg); } }
@keyframes gw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gw-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes gw-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes gw-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes gw-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes gw-toast-out {
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}
@keyframes gw-blink {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Модалка пополнения (openTopupModal в app.js)
   Живёт в базе, потому что вызывается откуда угодно: из чата, из кабинета,
   из плашки «не хватает баланса».
   -------------------------------------------------------------------------- */

.topup__presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.topup__presets .pill {
  justify-content: center;
  width: 100%;
  height: 38px;
  font-variant-numeric: tabular-nums;
}

.topup__methods { display: grid; gap: 8px; }
.topup__method {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.topup__method:hover { border-color: var(--hair); }
.topup__method.is-active {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.topup__method-name { font-size: 14px; font-weight: 500; }
.topup__method-sub { font-size: 12px; color: var(--faint); }

@media (max-width: 420px) {
  .topup__presets { grid-template-columns: repeat(2, 1fr); }
}