* { box-sizing: border-box; }
/* Same stack as :root { --tt-font-sans } in src/darkMode.css — avoids FOUC. */
body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }

/* Boot fallback — visible from first paint until React mounts and
   replaces #root's children. On a slow/flaky connection the JS
   bundle can take seconds to arrive; without this the user stares
   at a blank white page (the "is this a scam site?" moment). React
   clears these nodes on its first render, so there's nothing to
   tear down in JS. */
#tt-boot {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: linear-gradient(160deg, #14213A 0%, #1B3A6B 100%);
  color: rgba(255,255,255,0.85);
  text-align: center; padding: 24px;
}
#tt-boot .tt-boot-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.85);
  animation: tt-boot-spin 0.8s linear infinite;
}
#tt-boot .tt-boot-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
/* Swapped in by the watchdog if the app never boots. */
#tt-boot.tt-boot-stalled .tt-boot-spinner { display: none; }
#tt-boot .tt-boot-stalled-msg { display: none; max-width: 320px; line-height: 1.5; font-size: 14px; }
#tt-boot.tt-boot-stalled .tt-boot-stalled-msg { display: block; }
#tt-boot.tt-boot-stalled .tt-boot-label { display: none; }
#tt-boot .tt-boot-retry {
  display: none; margin-top: 4px; padding: 10px 20px; min-height: 44px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: #fff; color: #1B3A6B; font: inherit; font-weight: 600; font-size: 14px;
}
#tt-boot.tt-boot-stalled .tt-boot-retry { display: inline-block; }
#tt-boot .tt-boot-clear {
  display: none; margin-top: 4px; padding: 9px 20px; min-height: 44px;
  border: 1.5px solid rgba(255,255,255,0.35); border-radius: 8px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.7);
  font: inherit; font-weight: 500; font-size: 13px;
}
@keyframes tt-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #tt-boot .tt-boot-spinner { animation: none; } }

/* noscript fallback (only rendered by browsers with JS disabled) */
.tt-noscript {
  max-width: 420px; margin: 15vh auto; padding: 0 24px; text-align: center; color: #14213A;
}
.tt-noscript h1 { font-size: 18px; }
.tt-noscript p { font-size: 14px; line-height: 1.5; color: #4A5568; }