<!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="#007b91" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="application-name" content="BoxOffice" />
    <meta name="apple-mobile-web-app-title" content="BoxOffice" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Favicons (all generated from /public/logo.png) -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="48x48" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
    <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />

    <!-- Apple touch icons (all generated from /public/logo.png) -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />

    <title>BoxOffice</title>

    <!-- Primary Meta Tags -->
    <meta name="title" content="BoxOffice" />
    <meta name="description" content="BoxOffice is a modern cinema management dashboard for showtimes, ticketing, subscriptions, and box-office analytics — built for BoxOffice." />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="BoxOffice" />
    <meta property="og:title" content="BoxOffice" />
    <meta property="og:description" content="Modern cinema management dashboard for showtimes, ticketing, subscriptions, and box-office analytics." />
    <meta property="og:image" content="/og.png" />
    <meta property="og:image:secure_url" content="/og.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="BoxOffice — cinema management dashboard" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="BoxOffice" />
    <meta name="twitter:description" content="Modern cinema management dashboard for showtimes, ticketing, subscriptions, and box-office analytics." />
    <meta name="twitter:image" content="/og.png" />
    <meta name="twitter:image:alt" content="BoxOffice — cinema management dashboard" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script>
      // Apply dark mode immediately to prevent flash
      (function() {
        var theme = localStorage.getItem('theme');
        var isDark = theme === 'dark';
        if (isDark) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      })();
    </script>
    <style>
      /* Set background immediately to prevent white flash */
      html, body, #root {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: #F4F4F6;
      }
      .dark body, .dark #root, html.dark, html.dark body, html.dark #root {
        background: #0F1117;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-DiycqDnk.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-CCT_m2FY.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-query-CY2EB5AH.js">
    <link rel="modulepreload" crossorigin href="/assets/preload-helper-DnS4x6tA.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-firebase-BKm6pDJE.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-RZ4utubf.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-ui-DjhLdEJI.js">
    <link rel="modulepreload" crossorigin href="/assets/dist-D-4o9762.js">
    <link rel="modulepreload" crossorigin href="/assets/x-V_jIbnGs.js">
    <link rel="modulepreload" crossorigin href="/assets/toast-C2JQtD53.js">
    <link rel="stylesheet" crossorigin href="/assets/index-Ck7N2J18.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
