:root {
  /* Цветовая схема */
  --color-primary: #2B9CFF;
  --color-secondary: #FF69B4;
  --color-accent1: #8A2BE2;
  --color-accent2: #4CAF50;
  --color-text: #333333;
  --color-text-rgb: 51, 51, 51;
  --color-text-secondary: #666666;
  --color-background: #F5F5F5;
  --color-background-rgb: 245, 245, 245;
  --color-surface: #FFFFFF;
  --color-surface-rgb: 255, 255, 255;
  --color-border: #E5E5E5;

  /* Размеры */
  --border-radius: 12px;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  
  /* Безопасные области */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

#root {
  min-height: 100vh;
  background-color: var(--color-background);
  overflow: hidden; /* Изменено с overflow-y: auto */
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Базовые стили */
html {
  -webkit-tap-highlight-color: transparent;
  overflow: hidden; /* Изменено с overflow-y: scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  overscroll-behavior: none; /* Предотвращает "резиновый" эффект на iOS */
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
  -webkit-perspective: 1000px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; /* Предотвращает "резиновый" эффект на iOS */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Утилиты */
.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* Скроллбар */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* Общие компоненты */
.button {
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  border: none;
  background: var(--color-primary);
  color: white;
  cursor: pointer;
  transition: transform 0.2s;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(1px);
}

.card {
  background: var(--color-surface);
  border-radius: var(--border-radius);
  padding: var(--spacing-medium);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
