/* B-08: extracted from client/index.html so the production CSP can run
   without 'unsafe-inline' for <style> elements. */
html, body { margin: 0; padding: 0; height: 100%; height: 100dvh; width: 100%; overflow: hidden; background-color: #fbfaf9; color: #2b2d31; }
#root { height: 100%; width: 100%; overflow: clip; }
#loki-preloader { display: flex; align-items: center; justify-content: center; height: 100vh; height: 100dvh; flex-direction: column; gap: 16px; font-family: 'Inter', 'DM Sans', system-ui, sans-serif; }
#loki-preloader .spinner { width: 32px; height: 32px; border: 3px solid #e5e3e0; border-top-color: #5a57d8; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loki-preloader .text { font-size: 14px; color: #8a8886; }
#loki-preloader .retry-section { display: none; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
#loki-preloader .retry-section.visible { display: flex; }
#loki-preloader .retry-btn { padding: 10px 24px; background-color: #5a57d8; color: white; border: none; border-radius: 6px; font-size: 14px; font-family: inherit; cursor: pointer; min-height: 44px; }
#loki-preloader .retry-hint { font-size: 12px; color: #a09e9b; text-align: center; max-width: 280px; }
.loki-noscript { display: flex; align-items: center; justify-content: center; height: 100vh; font-family: system-ui, sans-serif; text-align: center; padding: 20px; }
.loki-noscript h1 { color: #2b2d31; margin-bottom: 8px; }
.loki-noscript p { color: #8a8886; }