<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      // Apply saved theme before paint so dark mode survives reload (no flash).
      try { if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark') } catch (e) {}
      // Mirror AppShell's persisted sidebar state onto <html> so the boot skeleton
      // below reserves the SAME 260px the real shell will. Without this the content
      // column jumps sideways the moment React mounts. Rule copied verbatim from
      // AppShell: open unless explicitly 'false', and never below the lg breakpoint.
      try {
        if (localStorage.getItem('sidebar:open') !== 'false' && window.innerWidth >= 1024) {
          document.documentElement.classList.add('boot-nav')
        }
      } catch (e) {}
    </script>
    <title>Skinlab | Medical Spa Management Platform</title>
    <!--
      Warm the Supabase connection while the HTML is still parsing, so DNS + TCP + TLS
      to the database origin overlap the JS download instead of running after it.
      Every page's first query pays that handshake today: measured against prod
      2026-08-26, the first request costs ~1,030ms while a warm one on the same
      connection is ~225ms. Vite substitutes https://wbglznwydsxqitwaiaiu.supabase.co at build time, so this
      follows whichever database the bundle was built against (never hardcode the ref —
      local dev points elsewhere).
    -->
    <link rel="preconnect" href="https://wbglznwydsxqitwaiaiu.supabase.co" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:wght@400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
    <style>
      /*
        First-paint skeleton. #root used to be EMPTY, so every hard refresh painted a
        WHITE page until the JS parsed and React mounted — a few hundred ms of nothing,
        which is the flash Som reported on 2026-08-26. This markup is in the HTML, so
        it paints on the first frame, before any JavaScript runs.

        It uses the app's own CSS custom properties (defined in index.css, which is a
        render-blocking <link> above, so they ARE resolved by first paint) and is
        therefore correct in dark mode too — the theme script above has already run.

        React's createRoot() clears #root on its first render, so this disappears on
        its own. Keep its geometry in step with AppShell / AppShellSkeleton: 260px
        sidebar, 64px topbar.
      */
      #boot { display: flex; min-height: 100vh; background: hsl(var(--background)); }
      #boot .b-side {
        position: fixed; inset: 0 auto 0 0; width: 260px; display: none;
        flex-direction: column; padding: 0 12px;
        background: hsl(var(--sidebar-bg)); border-right: 1px solid hsl(var(--sidebar-border));
      }
      html.boot-nav #boot .b-side { display: flex; }
      html.boot-nav #boot .b-main { margin-left: 260px; }
      #boot .b-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
      #boot .b-top {
        height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 28px;
        background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
      }
      #boot .b-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
      #boot .blk { background: hsl(var(--muted)); border-radius: 6px; }
      #boot .b-card { border: 1px solid hsl(var(--border)); border-radius: 8px; }
      #boot .b-row {
        display: flex; align-items: center; gap: 16px;
        padding: 12px 16px; border-top: 1px solid hsl(var(--border));
      }
      #boot .b-row:first-child { border-top: 0; }
      @media (prefers-reduced-motion: no-preference) {
        #boot .blk { animation: bootpulse 2s cubic-bezier(.4,0,.6,1) infinite; }
      }
      @keyframes bootpulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
    </style>
    <script type="module" crossorigin src="/assets/index-YJu11lQE.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-BE76Jxm_.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-CVkrZrL3.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-icons-B1CHgQmT.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DTGiAugT.css">
  </head>
  <body>
        <div id="root">
      <!-- Replaced by React on mount; see the #boot notes in <style> above. -->
      <div id="boot" role="status" aria-label="Loading your workspace">
        <div class="b-side">
          <div style="height:64px;display:flex;align-items:center"><div class="blk" style="height:20px;width:96px"></div></div>
          <div style="display:flex;flex-direction:column;gap:6px;padding-top:8px">
            <div class="blk" style="height:10px;width:64px;margin:8px"></div>
            <div class="blk" style="height:32px"></div><div class="blk" style="height:32px"></div>
            <div class="blk" style="height:32px"></div><div class="blk" style="height:32px"></div>
            <div class="blk" style="height:10px;width:72px;margin:16px 8px 8px"></div>
            <div class="blk" style="height:32px"></div><div class="blk" style="height:32px"></div>
          </div>
        </div>
        <div class="b-main">
          <div class="b-top">
            <div class="blk" style="height:12px;width:112px"></div>
            <div style="flex:1"></div>
            <div class="blk" style="height:32px;width:32px;border-radius:9999px"></div>
          </div>
          <div class="b-body">
            <div class="blk" style="height:28px;width:192px"></div>
            <div class="blk" style="height:36px;width:100%;max-width:384px"></div>
            <div class="b-card">
              <div class="b-row"><div class="blk" style="height:12px;width:96px"></div><div class="blk" style="height:12px;flex:1"></div></div>
              <div class="b-row"><div class="blk" style="height:12px;width:96px"></div><div class="blk" style="height:12px;flex:1"></div></div>
              <div class="b-row"><div class="blk" style="height:12px;width:96px"></div><div class="blk" style="height:12px;flex:1"></div></div>
              <div class="b-row"><div class="blk" style="height:12px;width:96px"></div><div class="blk" style="height:12px;flex:1"></div></div>
              <div class="b-row"><div class="blk" style="height:12px;width:96px"></div><div class="blk" style="height:12px;flex:1"></div></div>
              <div class="b-row"><div class="blk" style="height:12px;width:96px"></div><div class="blk" style="height:12px;flex:1"></div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
