/* Shared by the HTML startup placeholder and the React Telegram launch screen. */
.launch-splash {
  --splash-bg: #FBF8F2;
  --splash-text: #12143A;
  --splash-muted: #5F6291;
  --splash-accent: #3F43B8;
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  min-block-size: var(--tg-viewport-stable-height, 100svh);
  padding: max(48px, env(safe-area-inset-top)) 24px max(72px, env(safe-area-inset-bottom));
  background: var(--splash-bg);
  color: var(--splash-text);
  font-family: Vazirmatn, system-ui, sans-serif;
  text-align: center;
  isolation: isolate;
}
.launch-splash[hidden] { display: none; }
[data-theme="dark"] .launch-splash {
  --splash-bg: #0D0F2B;
  --splash-text: #F7F4EC;
  --splash-muted: #A7AAD8;
  --splash-accent: #A9AEEA;
}
.launch-splash::before {
  content: "";
  position: absolute;
  inline-size: min(70vw, 360px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--splash-accent) 10%, transparent);
  border-radius: 50%;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -68%);
  z-index: -1;
  pointer-events: none;
}
[dir="ltr"] .launch-splash::before { transform: translate(-50%, -68%); }
.launch-splash__content { inline-size: min(100%, 360px); }
.launch-splash__logo { display: block; inline-size: 112px; block-size: 112px; margin: 0 auto 24px; }
.launch-splash__title { margin: 0; font-size: 36px; line-height: 1.4; font-weight: 900; }
.launch-splash__tagline { margin: 10px 0 0; color: var(--splash-muted); font-size: 15px; line-height: 1.9; }
.launch-splash__status { margin-block-start: 56px; color: var(--splash-muted); font-size: 13px; }
.launch-splash__status p { margin: 16px 0 0; }
.launch-splash__dots { display: flex; gap: 7px; justify-content: center; }
.launch-splash__dots i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--splash-accent); animation: splash-breathe 1.5s ease-in-out infinite; }
.launch-splash__dots i:nth-child(2) { animation-delay: .15s; }
.launch-splash__dots i:nth-child(3) { animation-delay: .3s; }
.launch-splash__feedback { display: grid; justify-items: center; gap: 20px; margin-block-start: 36px; }
.launch-splash__footer { position: absolute; inset-block-end: max(24px, env(safe-area-inset-bottom)); margin: 0; color: var(--splash-muted); font-size: 11px; letter-spacing: .08em; }
@keyframes splash-breathe { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .launch-splash__dots i { animation: none; } }