:root {
  /* Base */
  --bg-color: #1B222B;
  --font-family: -apple-system, "SF Pro Text", "SF Pro", system-ui, "Roboto", sans-serif;
  --font-family-alt: 'Product Sans', system-ui, "Roboto", sans-serif;
  --first_layer: ease;
  --scrollbar-width: 0px;

  /* Мобильный viewport — устанавливается из JS (init.ts) */
  --telegram-header-height: 0px;

  /* Telegram Dark Surfaces */
  --surface-0: #1B222B;
  /* page bg (also sent to TWA header/bg) */
  --surface-1: #1B222B;
  /* panels/cards */
  --surface-2: #212A33;
  /* list rows, list containers */
  --surface-2-active: #626367;
  /* active row */
  --surface-2-selected: #626367;
  /* selected row/menus */
  --surface-input: #1B222B;
  /* inputs, tags */
  --surface-contrast: #11161C;
  /* deep contrasts */

  /* Content */
  --text-primary: #E6EDF3;
  --text-secondary: #8794A1;
  --text-inverse: #FFFFFF;

  /* Accents / Links */
  --accent-primary: #2998FF;
  /* primary actions */
  --accent-secondary: #6AB3F3;
  /* confirmations / ticks */
  --link-color: #4DB2FF;

  /* Dividers & Strokes */
  --stroke-weak: rgba(255, 255, 255, 0.06);
  --stroke-mid: rgba(255, 255, 255, 0.08);

  /* Controls */
  --toggle-track: #2A3441;
}

html,
body {
  max-width: 100vw;
  user-select: none;

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

* {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  background: var(--bg-color);
  padding-right: var(--scrollbar-width);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.twaBody {
  height: 100vh;
  overflow: hidden;
  -webkit-text-size-adjust: none;
}

.twaBody * {
  -webkit-user-select: none;
  user-select: none;
}

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

.appLoader__logo {
  will-change: filter;
  animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(41, 152, 255, 0.6))
            drop-shadow(0 0 20px rgba(0, 229, 255, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(41, 152, 255, 0.85))
            drop-shadow(0 0 40px rgba(0, 229, 255, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .appLoader__logo {
    animation: none;
    filter: drop-shadow(0 0 10px rgba(41, 152, 255, 0.7))
            drop-shadow(0 0 28px rgba(0, 229, 255, 0.3));
  }
}