/* Shown until the app has loaded; React replaces it */
.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fff; font-family: Inter, system-ui, sans-serif; }
.boot-circle { position: relative; width: 72px; height: 72px; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#e53935 0deg 80deg, #f9b800 90deg 170deg, #1fa58a 180deg 260deg, #1d4f9c 270deg 350deg, #e53935 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: boot-spin 1.1s linear infinite; }
.boot-logo { position: absolute; inset: 4px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); display: flex; align-items: center; justify-content: center; padding: 8px; }
.boot-logo img { width: 100%; height: 100%; object-fit: contain; }
.boot-text { font-size: 12px; font-weight: 500; color: #475569; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
/* Dark mode (the theme is set in index.html before this is drawn): same colours as the app's dark theme */
.dark body { background: hsl(222 47% 9%); }
.dark .boot { background: hsl(222 47% 9%); }
.dark .boot-text { color: hsl(215 20% 65%); }