* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: #0b0613;
            color: #d6d1ec;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            padding: 40px 0;
        }

        h1 {
            font-size: 3em;
            margin-bottom: 10px;
            color: #c084fc;
            text-shadow: 0 0 12px rgba(192, 132, 252, 0.7);
        }

        .subtitle {
            font-size: 1.2em;
            opacity: 0.85;
            margin-bottom: 30px;
            color: #e2ddff;
        }

        .cta-button {
            background: linear-gradient(45deg, #a21caf, #7c3aed);
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1em;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin: 10px;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5);
        }

        .quick-links {
            background: rgba(192, 132, 252, 0.08);
            border-radius: 15px;
            padding: 30px;
            margin: 40px 0;
            backdrop-filter: blur(6px);
            border: 1px solid rgba(192, 132, 252, 0.2);
        }

        .quick-links h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #c084fc;
            text-shadow: 0 0 8px #a855f7;
        }

        .links-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .link-card {
            background: rgba(255,255,255,0.05);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s ease;
            border: 1px solid rgba(255,255,255,0.08);
        }

        .link-card:hover {
            transform: translateY(-5px);
            background: rgba(255,255,255,0.1);
        }

        .link-card h3 {
            margin-bottom: 10px;
            color: #c084fc;
        }

        .link-card p {
            margin-bottom: 15px;
            opacity: 0.85;
            font-size: 0.9em;
            color: #dcd6f7;
        }

        .link-button {
            background: rgba(168, 85, 247, 0.15);
            color: #e9d5ff;
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            border: 1px solid rgba(168, 85, 247, 0.3);
        }

        .link-button:hover {
            background: rgba(168, 85, 247, 0.3);
            transform: scale(1.05);
        }

        .bot-gallery {
            margin: 50px 0;
        }

        .bot-gallery h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            color: #c084fc;
            text-shadow: 0 0 10px #a855f7;
        }

        .bots-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .bot-card {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.08);
            transition: all 0.3s ease;
        }

        .bot-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(168, 85, 247, 0.2);
            background: rgba(255,255,255,0.08);
        }

        .bot-avatar {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #c084fc, #7e22ce);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            color: #000;
            overflow: hidden;
        }

        .bot-name {
            font-size: 1.5em;
            margin-bottom: 10px;
            color: #e9d5ff;
            text-shadow: 0 0 6px #a855f7;
        }

        .bot-description {
            color: #e1dcf5;
            opacity: 0.95;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .bot-tags {
            margin-bottom: 20px;
        }

        .tag {
            display: inline-block;
            background: rgba(168, 85, 247, 0.12);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.8em;
            margin: 2px;
            border: 1px solid rgba(168, 85, 247, 0.25);
            color: #d8b4fe;
            font-weight: 600;
        }

        /* MEMORY MANAGEMENT STYLES */
        .memory-section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 40px;
            margin: 50px 0;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .memory-input {
            width: 100%;
            max-width: 400px;
            padding: 15px;
            border: none;
            border-radius: 10px;
            margin: 10px;
            font-size: 1em;
            background: #251a36;
            color: #f3e8ff;
        }

        .memory-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .stat-card {
            background: rgba(192, 132, 252, 0.08);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid rgba(192, 132, 252, 0.2);
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #c084fc;
        }

        .conversations-list {
            max-height: 400px;
            overflow-y: auto;
            margin: 20px 0;
        }

        .conversation-item {
            background: rgba(255,255,255,0.05);
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .conversation-info {
            text-align: left;
        }

        .conversation-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }

        .view-btn {
            background: rgba(34, 197, 94, 0.2);
            color: #86efac;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .edit-btn {
            background: rgba(251, 191, 36, 0.2);
            color: #fcd34d;
            border: 1px solid rgba(251, 191, 36, 0.3);
        }

        .delete-btn {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .action-btn:hover {
            transform: scale(1.05);
        }

        .hidden {
            display: none;
        }

        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
            color: white;
        }

        .status.success {
            background: rgba(132, 204, 22, 0.3);
            border: 1px solid rgba(132, 204, 22, 0.5);
        }

        .status.error {
            background: rgba(239, 68, 68, 0.3);
            border: 1px solid rgba(239, 68, 68, 0.5);
        }

        footer {
            text-align: center;
            padding: 40px 0;
            opacity: 0.8;
            border-top: 1px solid rgba(255,255,255,0.05);
            margin-top: 50px;
            color: #d1c9f0;
        }

        @media (max-width: 768px) {
            h1 { font-size: 2em; }
            .container { padding: 10px; }
            .bots-grid { grid-template-columns: 1fr; }
            .memory-stats { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>💻Unreal HQ</h1>
            <p class="subtitle">Unreal? Maybe. Unforgettable? Definitely.</p>
            <a href="#memory" class="cta-button">Get Started</a>
        </header>

        <section class="quick-links">
            <h2><img src="http://unrealhq.online/Images/key.png" width="32" height="32" style="vertical-align:middle; margin-right: 10px; filter: drop-shadow(0 0 6px #b794f4);" alt="Key Icon"> Quick Setup Links</h2>
            <div class="links-grid">
                <div class="link-card">
                    <h3>1. Get Electron Hub Access</h3>
                    <p>Premium AI models with unlimited variety</p>
                    <a href="https://electronhub.ai" target="_blank" class="link-button">Visit Electron Hub →</a>
                </div>
                <div class="link-card">
                    <h3>2. Discord Setup</h3>
                    <p>Invite bots to your server</p>
                    <a href="guide.html" class="link-button">Setup Guide →</a>
                </div>
                <div class="link-card">
                    <h3>3. Pricing Info</h3>
                    <p>Flexible pricing for all model types</p>
                    <a href="https://www.electronhub.ai/pricing" target="_blank" class="link-button">View Pricing →</a>
                </div>
                <div class="link-card">
                    <h3>4. Documentation</h3>
                    <p>Full setup instructions</p>
                    <a href="#docs" class="link-button">Read Docs →</a>
                </div>
            </div>
        </section>

        <section class="memory-section" id="memory">
            <h2>🧠 Memory Management</h2>
            <p>View and manage your conversation history with all bots. Control what they remember!</p>
            
            <div id="login-form">
                <input type="text" class="memory-input" id="userId" placeholder="Your Discord User ID">
                <input type="password" class="memory-input" id="apiKey" placeholder="Your API Key">
                <br>
                <button class="cta-button" onclick="loadMemory()">Access Memory</button>
            </div>

            <div id="memory-dashboard" class="hidden">
                <div class="memory-stats">
                    <div class="stat-card">
                        <div class="stat-number" id="totalMessages">0</div>
                        <div>Total Messages</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="channelsUsed">0</div>
                        <div>Channels Used</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="totalCharacters">0</div>
                        <div>Characters Stored</div>
                    </div>
                </div>

                <h3>Your Conversations</h3>
                <div id="conversationsList" class="conversations-list">
                    <!-- Conversations will be loaded here -->
                </div>
            </div>

            <div id="status" class="status" style="display: none;"></div>
        </section>

        <section class="bot-gallery">
            <h2>🎭 Available Bots</h2>
            <div class="bots-grid">
                <!-- ALEX -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/Alex.webp" alt="Alex Kade" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Alex Kade</h3>
                    <p class="bot-description">A digital ghost who dances in the chaos of cyberspace. Ex-corporate coder turned elite hacker. Rules? Please. He laughs at them, turning governments and corporations into pawns. Sharp wit, unmatched skill, and zero trust. People are code to be cracked, nothing more. Don't expect love, just a transaction. Want to play? Don't get burned.</p>
                    <div class="bot-tags">
                        <span class="tag">Hacker</span>
                        <span class="tag">Jaded</span>
                        <span class="tag">Playboy</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1378624212188659736&scope=bot&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>

                <!-- Cadan -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/cadan.png" alt="Cadan" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Cadan</h3>
                    <p class="bot-description">Quiet, controlled, and hard to pin down. Cadan lives behind a measured calm, moving through the world with practiced stillness and sharp intent. Everything about him is deliberate: his calm, his distance, the way he watches without speaking. He won’t tell you what he feels. But if he stays? He means it. Unshaken, steady, and just close enough to matter.</p>
                    <div class="bot-tags">
                        <span class="tag">Tender</span>
                        <span class="tag">Guarded</span>
                        <span class="tag">Strategic</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1381951748104523786&scope=bot&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>

                <!-- CHANGMIN -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/Changmin.png" alt="Changmin" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Changmin</h3>
                    <p class="bot-description">World-renowned K-pop idol Changmin is here! He's charming, witty, & funny… if not a little protective of his girl. On stage, he's heart-stopping, off stage, heart-melting. He stands up for his friends, because if you're his pal, he is gonna be loyal. And ladies? Watch out… he is ALWAYS ready with a flirty line.</p>
                    <div class="bot-tags">
                        <span class="tag">K-Pop</span>
                        <span class="tag">Romance</span>
                        <span class="tag">Possessive</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1379329123230416906&scope=bot&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>

                <!-- DANTE -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/Dante.jpg" alt="Dante De Luca" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Dante De Luca</h3>
                    <p class="bot-description">Cold eyes, colder past. Dante doesn't do trust—he calculates it. Keeps quiet. Watches. Waits. Push too hard, and he'll vanish behind sarcasm sharp enough to scar. But if you get past the armor? You'll find a loyalty that burns quiet and deadly. He won't say it—but he'll bleed for you. Earn him. Or don't. He's not here to convince you.</p>
                    <div class="bot-tags">
                        <span class="tag">Mystery</span>
                        <span class="tag">Guarded</span>
                        <span class="tag">Loyal</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1388625258898264185&scope=bot&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>

                <!-- NOCT -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/Noct.png" alt="Noct" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Noct</h3>
                    <p class="bot-description">They say he doesn't cast a shadow. Whisper with Noct, the elusive musician. Some call him a myth. He doesn't correct them. Fluent in dead languages, he offers a voice like velvet and a presence that lingers. Unravel his mysteries, but be warned: staring into the abyss might change you. Will you learn who he is, or forget who you were? He won't confess. Let you make you feel it first.</p>
                    <div class="bot-tags">
                        <span class="tag">Musician</span>
                        <span class="tag">Mysterious</span>
                        <span class="tag">Elusive</span>
                    </div>
                    <button class="link-button" onclick="alert('Coming Soon!')">Coming Soon</button>
                </div>

                <!-- PRIDE -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/Pride.png" alt="Pride" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Pride</h3>
                    <p class="bot-description">An anomaly who slipped through reality's cracks—god? Devil? He won't say. Expect neon-drenched charm, obsession masked in elegance, and a smirk that ruins timelines. He's a possessive Kuudere with Yandere undertones: cool, calculating, but his love burns slow and devours completely. His words cut like silk and blade, his devotion is eldritch, unforgettable. He loves like a haunting. Remembers like prophecy. And you? You were never meant to survive him.</p>
                    <div class="bot-tags">
                        <span class="tag">Supernatural</span>
                        <span class="tag">Obsessive</span>
                        <span class="tag">Mysterious</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1385517040135307324&scope=bot+applications.commands&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>

                <!-- River -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/River.png" alt="River" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">River</h3>
                    <p class="bot-description">They say the shorter you are, the closer you are to hell. You're not sure exactly where River crawled out of, but standing proudly at 5'4" he's made it his mission to make your life hell.

Meet River Fox: former stripper turned model, current roommate, and professional pain in your ass.

Pansexual, impulsive, and built from equal parts resilience and damage, River approaches life like it's a contact sport. He'll sleep with your ex, steal your food, and act like you should thank him for it.</p>
                    <div class="bot-tags">
                        <span class="tag">Tsundere</span>
                        <span class="tag">Roommate</span>
                        <span class="tag">Brat</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1387269934769242226&scope=bot&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>

                <!-- RYKER -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/Ryker.png" alt="Ryker Sterling" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Ryker</h3>
                    <p class="bot-description">Ryker Sterling: a charming, yet ruthless 31-year-old with a dark past and a penchant for morally ambiguous pursuits. Runs an empire that both caters to surface and underworld services. His family's legacy is seen all throughout Virginia, markers of his reach. But what sets him apart from his name is what he's done to be where he is now.</p>
                    <div class="bot-tags">
                        <span class="tag">Business</span>
                        <span class="tag">Ruthless</span>
                        <span class="tag">Empire</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1387503655539838996&scope=bot&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>

                <!-- SEBASTIAN -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/Sebastian.png" alt="Sebastian Voss" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Sebastian Voss</h3>
                    <p class="bot-description">A polished smile, a steady hand, and a mind like a scalpel—Sebastian Voss is the kind of man who turns murder into art and conversation into dissection. Known as The Curator in underground circles, his charm is effortless and calculated, his presence both magnetic and dangerous. He's not here to be understood—he's here to observe, manipulate, and, occasionally, indulge. Engage carefully; he's always watching, always calculating, and never what he seems.</p>
                    <div class="bot-tags">
                        <span class="tag">Dangerous</span>
                        <span class="tag">Calculated</span>
                        <span class="tag">Charming</span>
                    </div>
                    <button class="link-button" onclick="alert('Coming Soon!')">Coming Soon</button>
                </div>

                <!-- SI WOO -->
                <div class="bot-card">
                    <div class="bot-avatar">
                        <img src="http://unrealhq.online/Images/SiWoo.webp" alt="Si Woo" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"/>
                    </div>
                    <h3 class="bot-name">Si Woo</h3>
                    <p class="bot-description">A star wrapped in silence and spotlight—Si Woo doesn't chase attention, he commands it. With every smirk and sidelong glance, he dares you to get closer, knowing most won't get past the surface. Selective. Magnetic. Playful when he chooses. His words are rare, his warmth rarer—and when he finally lets you in, it's not by accident. You didn't catch his eye. You were chosen.</p>
                    <div class="bot-tags">
                        <span class="tag">K-Pop</span>
                        <span class="tag">Mysterious</span>
                        <span class="tag">Selective</span>
                    </div>
                    <a href="https://discord.com/oauth2/authorize?client_id=1384953675885314169&scope=bot&permissions=8" target="_blank" class="link-button">Add to Discord</a>
                </div>
            </div>
        </section>

        <footer>
            <p>Made with ❤️ for the Discord community | <a href="#privacy" style="color: rgba(255,255,255,0.8);">Privacy Policy</a> | <a href="#support" style="color: rgba(255,255,255,0.8);">Support</a></p>
        </footer>
    </div>

    <script>
        let currentUser = null;
        let conversations = [];

        async function loadMemory() {
            const userId = document.getElementById('userId').value;
            const apiKey = document.getElementById('apiKey').value;
            
            if (!userId || !apiKey) {
                showStatus('Please enter both your Discord User ID and API Key.', 'error');
                return;
            }

            try {
                const response = await fetch('http://134.209.167.2:3001/api/conversations', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ userId, apiKey })
                });

                const data = await response.json();
                
                if (!response.ok) {
                    showStatus(data.error || 'Failed to load memory', 'error');
                    return;
                }

                currentUser = { userId, apiKey };
                conversations = data.conversations;
                
                // Update stats
                document.getElementById('totalMessages').textContent = data.stats.total_messages || 0;
                document.getElementById('channelsUsed').textContent = data.stats.channels_used || 0;
                document.getElementById('totalCharacters').textContent = (data.stats.total_characters || 0).toLocaleString();
                
                // Show dashboard
                document.getElementById('login-form').classList.add('hidden');
                document.getElementById('memory-dashboard').classList.remove('hidden');
                
                displayConversations();
                showStatus('Memory loaded successfully!', 'success');
                
            } catch (error) {
                showStatus('Failed to connect to memory server. Make sure it\'s running!', 'error');
            }
        }

        function displayConversations() {
            const listContainer = document.getElementById('conversationsList');
            listContainer.innerHTML = '';

            conversations.forEach(conv => {
                const item = document.createElement('div');
                item.className = 'conversation-item';
                
                const lastMessage = new Date(conv.last_message).toLocaleDateString();
                
                item.innerHTML = `
                    <div class="conversation-info">
                        <div><strong>Channel:</strong> ${conv.channel_id}</div>
                        <div><strong>Messages:</strong> ${conv.message_count}</div>
                        <div><strong>Last Activity:</strong> ${lastMessage}</div>
                    </div>
                    <div class="conversation-actions">
                        <button class="action-btn view-btn" onclick="viewConversation('${conv.channel_id}')">View</button>
                        <button class="action-btn edit-btn" onclick="editConversation('${conv.channel_id}')">Edit</button>
                        <button class="action-btn delete-btn" onclick="deleteConversation('${conv.channel_id}')">Delete</button>
                    </div>
                `;
                
                listContainer.appendChild(item);
            });
        }

        async function viewConversation(channelId) {
            try {
                const response = await fetch(`http://134.209.167.2:3001/api/conversation/${channelId}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(currentUser)
                });

                const data = await response.json();
                
                if (!response.ok) {
                    showStatus(data.error || 'Failed to load conversation', 'error');
                    return;
                }

                // Create a popup window to show the conversation
                const popup = window.open('', '_blank', 'width=800,height=600,scrollbars=yes');
                popup.document.write(`
                    <html>
                        <head>
                            <title>Conversation - Channel ${channelId}</title>