<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#8b5cf6" />
    <meta name="description" content="CCP Event Calendar - Manage and view community events" />
    
    <!-- Resource Hints for Performance -->
    <link rel="dns-prefetch" href="https://supabase.co" />
    <link rel="preconnect" href="https://supabase.co" crossorigin />
    
    <title>CCP Event Calendar</title>
    
    <!-- Inline Critical CSS for Above-the-Fold Content -->
    <style>
      /* Critical CSS - prevents FOUC (Flash of Unstyled Content) */
      body {
        margin: 0;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background-color: #F1F5F9;
        color: #0F172A;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      #root {
        min-height: 100vh;
      }
      
      /* Loading state */
      .app-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      .app-loading::after {
        content: '';
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255,255,255,0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      
      /* Hide scrollbar utility */
      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    </style>
  <script type="module" crossorigin src="/assets/main-DIQHfMG9.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-CMKNiKqm.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-D_iOwayF.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-lucide-9SIYvMOP.js">
  <link rel="stylesheet" crossorigin href="/assets/main-DIMQR_gk.css">
</head>
  <body class="bg-slate-50 text-slate-900 antialiased">
    <div id="root"></div>
  </body>
</html>