/* The first thing on screen while the app's JavaScript downloads. Replaced the moment Vue mounts. Kept as
   a static file so it works under a strict Content-Security-Policy, and styled for both themes. */
#app:empty::before,
#app-splash { display: none; }
#app-splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #f8fafc; color: #64748b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }
html.dark #app-splash { background: #0b0f14; color: #94a3b8; }
#app-splash .ring { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(100, 116, 139, .25); border-top-color: var(--splash-accent, #2563eb); animation: splash-spin .9s linear infinite; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #app-splash .ring { animation: none; border-top-color: rgba(100, 116, 139, .25); } }

/* A thin bar along the top while a page's code is still downloading after a click. */
html.route-loading::after { content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 30%; background: var(--splash-accent, #2563eb); z-index: 9999; animation: route-bar 1s ease-in-out infinite; }
@keyframes route-bar { 0% { left: -30%; } 100% { left: 100%; } }
#app-splash .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }