html, body { margin: 0; background: #f2f7fa; color: #102c43; font-family: Arial, sans-serif; }
#loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px; box-sizing: border-box; }
#loading h1 { margin: 20px 0 12px; font-size: 30px; }
#loading p { max-width: 420px; line-height: 1.6; color: #52717e; }
.spinner { width: 28px; height: 28px; border: 3px solid #bddaE5; border-top-color: #007f87; border-radius: 50%; animation: spin 1s linear infinite; margin: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }