:root {
  /* Семантические токены являются алиасами live Telegram theme params. */
  --bg-color: var(--tg-theme-bg-color, #17212b);
  --font-family: -apple-system, "SF Pro Text", "SF Pro", system-ui, "Roboto", sans-serif;
  --font-family-alt: var(--font-family);
  --first_layer: cubic-bezier(0.2, 0, 0, 1);
  --scrollbar-width: 0px;

  /* Нативная grouped-схема Telegram: страница — secondary_bg_color, секции —
     section_bg_color (до Bot API 7.0 — bg_color). В реальных клиентах
     section_bg_color обычно равен bg_color, поэтому страница на bg_color давала
     «белые карточки на белом» в светлой теме. */
  --surface-0: var(--tg-theme-secondary-bg-color, #232e3c);
  --surface-1: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #17212b));
  /* Полупрозрачная заливка контролов (track, chips) читается на любом фоне. */
  --surface-2: color-mix(in srgb, var(--tg-theme-text-color, #f5f5f5) 7%, transparent);
  --surface-2-active: color-mix(in srgb, var(--tg-theme-text-color, #f5f5f5) 12%, transparent);
  --surface-2-selected: color-mix(in srgb, var(--tg-theme-button-color, #3390ec) 16%, transparent);
  --surface-input: color-mix(in srgb, var(--tg-theme-text-color, #f5f5f5) 6%, var(--surface-1));
  --surface-contrast: color-mix(in srgb, var(--tg-theme-text-color, #f5f5f5) 5%, var(--surface-0));

  --text-primary: var(--tg-theme-text-color, #f5f5f5);
  /* Telegram hint/accent colors are presentation hints, not guaranteed WCAG-AA
     text colors. Mix them with the current foreground so both Telegram themes
     retain their character without dropping below readable contrast. */
  --text-secondary: color-mix(
    in srgb,
    var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #708499)) 65%,
    var(--text-primary)
  );
  --text-inverse: var(--tg-theme-button-text-color, #ffffff);

  --accent-primary: var(--tg-theme-button-color, #3390ec);
  --accent-secondary: color-mix(
    in srgb,
    var(--tg-theme-accent-text-color, var(--accent-primary)) 70%,
    var(--text-primary)
  );
  --link-color: color-mix(
    in srgb,
    var(--tg-theme-link-color, var(--accent-primary)) 70%,
    var(--text-primary)
  );

  --stroke-weak: var(--tg-theme-section-separator-color, color-mix(in srgb, var(--text-primary) 8%, transparent));
  --stroke-mid: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --toggle-track: color-mix(in srgb, var(--text-secondary) 28%, transparent);
  --status-success: color-mix(in srgb, #31b96b 48%, var(--text-primary));
  --status-warning: color-mix(in srgb, #d59b24 50%, var(--text-primary));
  --status-danger: color-mix(
    in srgb,
    var(--tg-theme-destructive-text-color, #ec3942) 50%,
    var(--text-primary)
  );
  --chart-primary: var(--accent-secondary);
  --chart-secondary: var(--text-secondary);
  --chart-grid: var(--stroke-weak);

  /* Базовые Telegram defaults нужны только для обязательных core-параметров.
     Не объявляем optional section/accent/subtitle vars: если Telegram их не
     прислал, semantic tokens должны наследовать core light/dark palette. */
  --tg-theme-bg-color: #17212B;
  --tg-theme-secondary-bg-color: #232E3C;
  --tg-theme-text-color: #F5F5F5;
  --tg-theme-hint-color: #708499;
  --tg-theme-link-color: #6AB3F3;
  --tg-theme-button-color: #5288C1;
  --tg-theme-button-text-color: #FFFFFF;

  color-scheme: light dark;
}

html,
body {
  max-width: 100vw;
  height: 100%;
  overscroll-behavior: none;

  &.noscroll {
    position: fixed;
    overflow-y: hidden;
    width: 100%;
    padding-right: var(--scrollbar-width);
  }
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: var(--tg-viewport-stable-height, 100dvh);
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--surface-0);
  padding-right: var(--scrollbar-width);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.twaBody {
  height: var(--tg-viewport-height, 100dvh);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

#root {
  height: 100%;
  min-height: 0;
}

button,
[role="button"] {
  -webkit-touch-callout: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  user-select: text;
}

.appLoader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  z-index: 100;
  opacity: 1;
  will-change: transform;
  transform: translateZ(0);
  transition: opacity 160ms var(--first_layer);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.appLoader__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: var(--text-inverse);
  background: var(--accent-primary);
  font-size: 25px;
  font-weight: 750;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-primary) 28%, transparent);
}

.appLoader__name {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

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