renders correctly for non-JS crawlers AND for JS-enabled users during the ~200ms before Vue mounts. Vue takes over #app on mount (see src-vue/main.ts) — everything below only affects the shell + fallback content. Do NOT put component styles here; use scoped styles in .vue files or the Tailwind pipeline. ─────────────────────────────────────────────────────────────────── */ /* Global shell */ html { scroll-behavior: smooth; overflow-y: auto; height: 100%; } body { margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow-y: auto; height: 100%; scroll-behavior: smooth; background: #1e293b; } #app { min-height: 100vh; display: block; overflow-y: auto; scroll-behavior: smooth; } /* Modal backdrop fix — scoped to specific modal patterns to avoid affecting non-modal fixed-position elements. */ .fixed.inset-0.bg-black, .fixed.inset-0.bg-opacity-50, .fixed.inset-0[class*="bg-black"] { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; } .fixed.inset-0.flex.items-center.justify-center { display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem !important; overflow-y: auto !important; } body.modal-open { overflow: hidden !important; } /* Loading spinner (legacy pre-Vue placeholder, kept for any code path that still renders .app-loading before mount). */ .app-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; text-align: center; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid white; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────────────────── Static SEO fallback styles Applies to the semantic markup inside

that renders for non-JS crawlers and briefly during Vue mount. Kept minimal so the flash isn't jarring; Vue overwrites everything on mount. Hide-during-flash: index.html inlines a