html[data-tma-app-boot='true'],
html[data-tma-app-boot='true'] body {
  min-height: 100%;
  margin: 0;
  background: #f8fbff;
}

html[data-tma-app-boot='true'] body > a[href='#main-content']:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-tma-app-boot='true'] #root:empty {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(191, 219, 254, 0.42), transparent 25%),
    linear-gradient(160deg, #ffffff 0%, #f8fbff 58%, #edf6ff 100%);
}

html[data-tma-app-boot='true'] #root:empty::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 176px;
  height: 100px;
  content: '';
  background: url('/assets/login_logo.png') center / contain no-repeat;
  transform: translate(-50%, -65%);
  animation: tma-app-boot-pulse 1.25s ease-in-out infinite;
}

html[data-tma-app-boot='true'] #root:empty::after {
  position: absolute;
  top: calc(50% + 44px);
  left: 50%;
  width: 136px;
  height: 4px;
  content: '';
  border-radius: 999px;
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 52%, #dbeafe 52%, #dbeafe 100%);
  background-size: 200% 100%;
  transform: translateX(-50%);
  animation: tma-app-boot-progress 1.25s ease-in-out infinite;
}

@keyframes tma-app-boot-pulse {
  0%, 100% { opacity: 0.84; transform: translate(-50%, -65%) scale(0.97); }
  50% { opacity: 1; transform: translate(-50%, -65%) scale(1); }
}

@keyframes tma-app-boot-progress {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tma-app-boot='true'] #root:empty::before,
  html[data-tma-app-boot='true'] #root:empty::after {
    animation: none;
  }
}