/* Loader styles — extracted from index.html for CSP compliance (no unsafe-inline in style-src) */
:root { --lb: #fff; --lt: #374151; --ls: #6b7280; --lc: #ca8a04; }
:root.dark { --lb: #111827; --lt: #e5e7eb; --ls: #9ca3af; }
:root[data-accent="blue"] { --lc: #3b82f6; }
:root[data-accent="green"] { --lc: #10b981; }
:root[data-accent="orange"] { --lc: #f97316; }
:root[data-accent="pink"] { --lc: #ec4899; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes delayedFadeIn { 0%, 99% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: auto; } }
#loader { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--lb); z-index:99999; }
#loader svg { animation: spin 1s linear infinite; height:48px; width:48px; margin:0 auto 16px; color:var(--lc); }
#loader .t { font-size:18px; font-weight:500; color:var(--lt); margin-bottom:8px; }
#loader .s { font-size:14px; color:var(--ls); }
#loader .recovery { opacity:0; animation: delayedFadeIn 0s 8s forwards; margin-top:24px; font-size:13px; color:var(--ls); text-align:center; }
#loader .recovery a { color:var(--lc); text-decoration:underline; cursor:pointer; }
#loader .recovery a:hover { opacity:0.8; }
#loader .loader-inner { text-align:center; }
#loader .spinner-ring { opacity:0.25; }
#loader .spinner-arc { opacity:0.75; }
#root { opacity: 0; }
#root.ready { animation: fadeIn 0.3s ease-out forwards; }