/* Shared by the HTML bootstrap and React Router's initial fallback. */
.app-loading {
  --loading-ink: #10234e;
  --loading-muted: #536785;
  --loading-card: rgb(255 255 255 / 76%);
  --loading-border: rgb(255 255 255 / 85%);
  box-sizing: border-box;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at 18% 20%, #eaf5ff 0, transparent 55%),
    radial-gradient(ellipse at 85% 80%, #c2d4fa 0, transparent 55%), #cde2f8;
  color: var(--loading-ink);
  font-family: "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}
.app-loading-card {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 38px 32px 28px;
  border: 1px solid var(--loading-border);
  border-radius: 28px;
  background: var(--loading-card);
  box-shadow: 0 24px 70px rgb(40 77 138 / 12%), inset 0 1px 0 rgb(255 255 255 / 30%);
  backdrop-filter: blur(20px);
}
.app-loading-logo { display: block; width: 156px; height: 64px; object-fit: contain; margin: 0 auto 32px; }
.app-loading-checklist {
  position: relative;
  box-sizing: border-box;
  width: 92px;
  margin: 0 auto 28px;
  padding: 25px 15px 16px;
  border: 1px solid rgb(96 146 228 / 24%);
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #e7efff);
  box-shadow: 0 12px 24px rgb(37 99 235 / 12%);
  transform: rotate(-5deg);
}
.app-loading-clip { position: absolute; top: -6px; left: 29px; width: 32px; height: 13px; border-radius: 5px; background: #2563eb; }
.app-loading-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.app-loading-row:last-child { margin-bottom: 0; }
.app-loading-check { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; background: #dbeafe; color: #2563eb; font-size: 12px; font-weight: 700; animation: app-loading-check 1.8s ease-in-out infinite; }
.app-loading-row:nth-child(3) .app-loading-check { animation-delay: .2s; }
.app-loading-row:nth-child(4) .app-loading-check { animation-delay: .4s; }
.app-loading-line { flex: 1; height: 5px; border-radius: 5px; background: #bccded; }
.app-loading-row:last-child .app-loading-line { flex: none; width: 22px; }
.app-loading-eyebrow { margin: 0 0 9px; color: #2563eb; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.app-loading-title { margin: 0; font-size: clamp(23px, 5vw, 28px); font-weight: 700; letter-spacing: -.04em; line-height: 1.3; }
.app-loading-description { margin: 12px 0 25px; color: var(--loading-muted); font-size: 14px; line-height: 1.6; }
.app-loading-track { height: 4px; max-width: 210px; margin: 0 auto; overflow: hidden; border-radius: 10px; background: rgb(96 146 228 / 18%); }
.app-loading-track span { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #2563eb); animation: app-loading-slide 1.6s ease-in-out infinite; }
.app-loading-caption { margin: 25px 0 0; color: var(--loading-muted); font-size: 11px; letter-spacing: .025em; line-height: 1.6; }
.dark .app-loading { --loading-ink: #f1f5f9; --loading-muted: #b1c3df; --loading-card: rgb(25 43 76 / 76%); --loading-border: rgb(165 193 240 / 18%); background: radial-gradient(ellipse at 18% 20%, #18345e 0, transparent 55%), radial-gradient(ellipse at 85% 80%, #182851 0, transparent 55%), #0b1834; }
.dark .app-loading-eyebrow { color: #93c5fd; }
@keyframes app-loading-slide { from { transform: translateX(-110%); } to { transform: translateX(325%); } }
@keyframes app-loading-check { 0%, 100% { opacity: .45; } 45%, 65% { opacity: 1; background: #2563eb; color: white; } }
@media (max-width: 380px) { .app-loading { padding: 16px; } .app-loading-card { padding: 30px 20px 24px; } }
@media (prefers-reduced-motion: reduce) { .app-loading-check, .app-loading-track span { animation: none; } .app-loading-track span { width: 100%; } }