/* Loaded before JavaScript so startup never begins with an empty screen. */
.wn-boot-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  color: #0d1b4c;
  background: radial-gradient(ellipse at 35% 35%, #eaf0ff 0, transparent 48%), radial-gradient(ellipse at 75% 75%, #fff0e8 0, transparent 38%), #f6f8fd;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
.wn-boot-content { width: min(100%, 360px); text-align: center; }
.wn-boot-mark { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 28px; }
.wn-boot-mark::before { content: ''; position: absolute; inset: 13px; border-radius: 26px; background: #fff; box-shadow: 0 12px 35px #0d1b4c0d; transform: rotate(-8deg); }
.wn-boot-mark svg { position: relative; width: 48px; height: 48px; }
.wn-boot-orbit { position: absolute; inset: 0; border: 2px solid #2f5cff16; border-radius: 50%; border-top-color: #2f5cff; border-right-color: #ff6a2b; animation: wn-spin 1.8s linear infinite; }
.wn-boot-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; top: 12px; right: 12px; border-radius: 50%; background: #ff6a2b; box-shadow: 0 0 0 5px #ff6a2b12; }
.wn-boot-wordmark { margin: 0; font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -1.2px; }
.wn-boot-wordmark span { color: #ff6a2b; }
.wn-boot-title { margin: 14px 0 0; font-size: 14px; font-weight: 700; }
.wn-boot-detail { margin: 8px 0 0; color: #5d6680; font-size: 12px; line-height: 1.6; }
.wn-boot-meter { position: relative; overflow: hidden; width: 140px; height: 3px; margin: 24px auto 0; border-radius: 8px; background: #e4e8f2; }
.wn-boot-meter span { position: absolute; inset: 0; width: 55%; border-radius: inherit; background: linear-gradient(90deg, #2f5cff, #ff6a2b); animation: wn-progress 1.6s ease-in-out infinite; }
.wn-boot-retry { margin-top: 24px; border: 0; border-radius: 12px; background: #ff6a2b; color: #fff; padding: 12px 24px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wn-boot-retry:focus-visible { outline: 3px solid #2f5cff; outline-offset: 4px; }
.wn-boot-failed .wn-boot-orbit { animation: none; border-color: #ff6a2b40; }
.wn-boot-failed .wn-boot-orbit::after, .wn-boot-failed .wn-boot-meter { display: none; }
.wn-global-loader { position: fixed; inset: 0; z-index: 10001; pointer-events: none; }
.wn-loading-track { position: absolute; top: 0; right: 0; left: 0; height: 3px; overflow: hidden; background: #2f5cff12; }
.wn-loading-track span { display: block; width: 45%; height: 100%; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, #2f5cff, #2f5cff 65%, #ff6a2b); box-shadow: 0 0 12px #2f5cff55; animation: wn-progress 1.6s ease-in-out infinite; }
.wn-loading-pill { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid #e4e8f2; border-radius: 999px; background: #fffffff5; color: #0d1b4c; box-shadow: 0 4px 20px #0d1b4c12; font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; }
.wn-loading-spinner { width: 14px; height: 14px; border: 2px solid #eaf0ff; border-top-color: #2f5cff; border-right-color: #ff6a2b; border-radius: 50%; animation: wn-spin .9s linear infinite; }
.wn-loading-enter-active, .wn-loading-leave-active { transition: opacity .15s ease; }
.wn-loading-enter-from, .wn-loading-leave-to { opacity: 0; }
@keyframes wn-spin { to { transform: rotate(360deg); } }
@keyframes wn-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .wn-boot-orbit, .wn-boot-meter span, .wn-loading-track span, .wn-loading-spinner { animation: none; }
  .wn-boot-meter span, .wn-loading-track span { width: 65%; }
  .wn-loading-enter-active, .wn-loading-leave-active { transition: none; }
}