/* 🎯 КРИТИЧНЫЕ СТИЛИ ДЛЯ МГНОВЕННОЙ ЗАГРУЗКИ */
/* Базовая настройка - 0 layout shift */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  margin:0;padding:0;min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.5;color:#2d3748;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  overflow-x:hidden
}

/* 📱 Мобильная оптимизация */
.onboarding-container{
  min-height:100vh;display:flex;flex-direction:column;
  padding:20px;max-width:400px;margin:0 auto;
  position:relative
}

/* 🎨 Основная карточка */
.onboarding-card{
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  border-radius:24px;padding:40px 30px;
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
  flex:1;display:flex;flex-direction:column;
  margin:20px 0
}

/* 📊 Прогресс бар */
.progress-container{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0.9);padding:10px 20px;
  backdrop-filter:blur(10px)
}
.progress-bar{
  height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden
}
.progress-fill{
  height:100%;background:linear-gradient(90deg,#667eea,#764ba2);
  border-radius:2px;transition:width 0.3s ease
}

/* 🔢 Заголовки и текст */
h1{font-size:28px;font-weight:700;margin:0 0 16px;text-align:center;color:#1a202c}
h2{font-size:24px;font-weight:600;margin:0 0 12px;color:#2d3748}
p{margin:0 0 20px;color:#4a5568;text-align:center;line-height:1.6}

/* 🎯 Кнопки - критично для UX */
.btn{
  display:block;width:100%;padding:16px;margin:16px 0;
  border:none;border-radius:12px;font-size:16px;font-weight:600;
  text-decoration:none;text-align:center;cursor:pointer;
  transition:all 0.2s ease;user-select:none;
  -webkit-tap-highlight-color:transparent
}
.btn-primary{
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:white;box-shadow:0 4px 12px rgba(102,126,234,0.3)
}
.btn-primary:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(102,126,234,0.4)}
.btn-secondary{
  background:rgba(255,255,255,0.8);color:#4a5568;
  border:2px solid rgba(102,126,234,0.2)
}

/* 🖼️ Изображения */
.hero-image{
  width:120px;height:120px;margin:0 auto 20px;
  border-radius:20px;object-fit:cover;
  box-shadow:0 8px 20px rgba(0,0,0,0.1)
}

/* ⚡ Критично - скрытые элементы для prefetch */
.prefetch-link{position:absolute;left:-9999px;opacity:0}

/* 🔄 Загрузка */
.loading{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border:3px solid #e2e8f0;
  border-top:3px solid #667eea;border-radius:50%;
  animation:spin 1s linear infinite;z-index:200
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* 📱 Мобильные медиа запросы */
@media (max-width:374px){
  .onboarding-container{padding:15px}
  .onboarding-card{padding:30px 20px}
  h1{font-size:24px}
  .btn{padding:14px;font-size:15px}
}
@media (min-width:401px){
  .onboarding-container{max-width:420px}
}

/* 🎯 Веб-фонты с fallback */
@media (min-width:768px){
  body{font-size:18px}
  .onboarding-container{max-width:500px}
}