<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com https://telegram.org; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; worker-src 'self' blob:; frame-src 'self' https:; object-src 'none'; base-uri 'self';">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>МастерПро РФ</title>
    <link rel="stylesheet" href="/index.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://telegram.org/js/telegram-web-app.js" defer></script>
    <script>
      // Wait for Tailwind to be loaded
      if (typeof tailwind !== 'undefined') {
        tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#007AFF',
              'primary-dark': '#005BBB',
              secondary: '#F2F2F7',
              surface: '#FFFFFF',
              background: '#F0F2F5',
            },
            fontFamily: {
              sans: ['SF Pro Display', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
            },
            boxShadow: {
              '3d': '0 10px 20px -5px rgba(0, 122, 255, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
              '3d-hover': '0 20px 25px -5px rgba(0, 122, 255, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
              'card': '0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
              'float': '0 20px 40px -10px rgba(0,0,0,0.1)',
              'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.07)',
            },
            keyframes: {
              zoomIn: {
                '0%': { opacity: '0', transform: 'scale(0.95)' },
                '100%': { opacity: '1', transform: 'scale(1)' },
              },
              fadeIn: {
                '0%': { opacity: '0', transform: 'translateY(-10px)' },
                '100%': { opacity: '1', transform: 'translateY(0)' },
              },
              float: {
                '0%, 100%': { transform: 'translateY(0)' },
                '50%': { transform: 'translateY(-15px)' },
              }
            },
            animation: {
              zoomIn: 'zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards',
              fadeIn: 'fadeIn 0.4s ease-out forwards',
              float: 'float 6s ease-in-out infinite',
            }
          }
        }
      }
    </script>
    <style>
      body {
        background-color: #F0F2F5;
        -webkit-tap-highlight-color: transparent;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
      }
      
      .glass-panel {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
      }
    </style>

<link rel="stylesheet" href="/index.css">
  <script type="importmap">
{
  "imports": {
    "react/": "https://esm.sh/react@^19.2.3/",
    "react": "https://esm.sh/react@^19.2.3",
    "react-router-dom": "https://esm.sh/react-router-dom@^7.12.0",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "lucide-react": "https://esm.sh/lucide-react@^0.562.0"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-CmF3ur3u.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-BQu2XVky.js">
</head>
  <body>
    <div id="root"></div>
</body>
</html>