body {
  margin: 0;
}

.app-loading {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  background: #f8faff;
  color: #17243d;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.app-loading__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 360px);
  padding: 32px 20px;
  text-align: center;
  transform: translateY(-3vh);
}

.app-loading__icon {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.app-loading__brand {
  margin-top: 15px;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.3;
}

.app-loading__brand-cn {
  margin-top: 3px;
  color: #6b7992;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.5;
}

.app-loading__track {
  display: block;
  width: 180px;
  height: 3px;
  margin-top: 29px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce7fa;
}

.app-loading__bar {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: #3a70e8;
  animation: app-loading-travel 1.8s ease-in-out infinite alternate;
}

.app-loading__text {
  margin-top: 16px;
  color: #687891;
  font-size: 13px;
  line-height: 1.5;
}

@keyframes app-loading-travel {
  from { transform: translateX(0); }
  to { transform: translateX(163%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading__bar { animation: none; }
}

.dark .app-loading {
  background: #111826;
  color: #edf3ff;
}

.dark .app-loading__brand-cn,
.dark .app-loading__text {
  color: #a1b0c7;
}

.dark .app-loading__track {
  background: #273e63;
}