
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Bookmark Refiner - 苹果级书签整理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        apple: {
                            blue: '#007AFF',
                            gray: '#8E8E93',
                            lightBg: '#F5F7FA',
                            darkBg: '#000000',
                            card: '#FFFFFF',
                            darkCard: '#1C1C1E',
                            border: 'rgba(0,0,0,0.05)',
                            darkBorder: 'rgba(255,255,255,0.1)'
                        }
                    },
                    borderRadius: {
                        'apple-lg': '16px',
                        'apple-md': '12px'
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased;
            transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .apple-blur {
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .segmented-control-bg {
            background-color: rgba(118, 118, 128, 0.12);
        }
        
        .dark .segmented-control-bg {
            background-color: rgba(118, 118, 128, 0.24);
        }
        
        input::placeholder {
            color: #8E8E93;
            opacity: 0.6;
        }
        
        .progress-bar-shine {
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            background-size: 200% 100%;
            animation: shine 2s infinite;
        }
        
        @keyframes shine {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
    </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",
    "lucide-react": "https://esm.sh/lucide-react@^0.562.0",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "@google/genai": "https://esm.sh/@google/genai@^1.37.0"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-D0yKI1H_.js"></script>
</head>
<body class="bg-apple-lightBg dark:bg-apple-darkBg text-[#1D1D1F] dark:text-[#F5F5F7] selection:bg-apple-blue/20">
    <div id="root"></div>
</body>
</html>
