/* Заставка и базовые настройки страницы. Цвета — из tokens.dart:
   AppColors.bgTop / bgBottom, AppGradients.background. */

:root {
  --bg-top: #FBECF4;
  --bg-bottom: #D6D5FA;
  /* Экспорт существующих токенов до запуска Flutter: textDark,
     textPrimary, surfaceWhite, AppSpacing.md/sm, AppRadii.md. */
  --splash-text: #525064;
  --splash-action: #615B9A;
  --splash-surface: #FFFFFF;
  --splash-space: 16px;
  --splash-inset: 12px;
  --splash-radius: 16px;
  /* Отступы под вырез и «домашний индикатор». Приложение читает их из
     вычисленного стиля (shared/app_viewport.dart): Flutter на вебе
     сам их в MediaQuery не кладёт. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg-bottom);
  /* Без «резинки» и обновления жестом: это приложение, а не страница. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--splash-space);
  box-sizing: border-box;
  padding: max(var(--splash-space), var(--safe-top))
    max(var(--splash-space), var(--safe-right))
    max(var(--splash-space), var(--safe-bottom))
    max(var(--splash-space), var(--safe-left));
  background: linear-gradient(7.42deg, var(--bg-top) 2.16%, var(--bg-bottom) 97.68%);
  transition: opacity 240ms ease-out;
  z-index: 10;
}

.splash-error {
  color: var(--splash-text);
  font: 0.875rem/1.45 system-ui, sans-serif; /* AppText.body: 14 px */
  text-align: center;
  max-width: 100%;
}

.splash-error[hidden] {
  display: none;
}

.splash-error p {
  margin: 0 0 var(--splash-space);
  overflow-wrap: anywhere;
}

.splash-error button {
  font: inherit;
  font-weight: 500; /* AppText.button */
  line-height: 1.2;
  color: var(--splash-action);
  background: var(--splash-surface);
  border: 0;
  border-radius: var(--splash-radius);
  padding: var(--splash-inset) var(--splash-space);
  min-height: calc(3 * var(--splash-space)); /* область нажатия 48 px */
  cursor: pointer;
}

#splash.has-error .splash-mark {
  animation: none;
}

#splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-mark {
  width: 72px;
  height: auto;
  animation: splash-pulse 1400ms ease-in-out infinite;
}

@keyframes splash-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-mark { animation: none; }
  #splash { transition: none; }
}
/* Уведомление не перекрывает поля и не перехватывает фокус. */
.pwa-update { position: fixed; inset: auto 0 0; z-index: 100; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: #FBECF4; color: #382B42; font: 14px/1.4 sans-serif; text-align: center; pointer-events: none; }