"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Error 500 - BerryViral</title>\n    <meta name=\"description\" content=\"Could not load the shared review.\">\n    \n    <!-- Open Graph / Facebook -->\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:url\" content=\"\">\n    <meta property=\"og:title\" content=\"Error 500 - BerryViral\">\n    <meta property=\"og:description\" content=\"Could not load the shared review.\">\n    <meta property=\"og:image\" content=\"/static/berryviral-logo.png\">\n\n    <!-- Twitter -->\n    <meta name=\"twitter:card\" content=\"summary_large_image\">\n    <meta name=\"twitter:url\" content=\"\">\n    <meta name=\"twitter:title\" content=\"Error 500 - BerryViral\">\n    <meta name=\"twitter:description\" content=\"Could not load the shared review.\">\n    <meta name=\"twitter:image\" content=\"/static/berryviral-logo.png\">\n    \n    <!-- Canonical -->\n    <link rel=\"canonical\" href=\"\">\n    \n    <link rel=\"icon\" type=\"image/png\" href=\"/static/berryviral-favicon.png\"/>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"/static/css/berryviral-theme.css\">\n    <style>\n        body {\n            background-color: var(--bg-app);\n            color: var(--text-primary);\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            overflow-x: hidden;\n            font-family: var(--font-family-primary);\n        }\n        \n        .error-container {\n            width: 100vw;\n            min-height: 100vh;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            margin-top: 72px;\n            padding: 2rem;\n            box-sizing: border-box;\n            background: linear-gradient(135deg, #02010aff 0%, #14042eff 50%, #000f58ff 100%);\n            position: relative;\n        }\n\n        .error-container::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-image: url('https://berryviral-static.s3.us-west-2.amazonaws.com/hero-background-compressed.webp');\n            background-size: cover;\n            background-position: top;\n            opacity: 0.1;\n            pointer-events: none;\n        }\n        \n        .error-content {\n            max-width: 600px;\n            text-align: center;\n            background: rgba(20, 4, 46, 0.8);\n            backdrop-filter: blur(20px);\n            -webkit-backdrop-filter: blur(20px);\n            padding: 4rem 3rem;\n            border-radius: 1.5rem;\n            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);\n            border: 1px solid rgba(126, 7, 237, 0.3);\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .error-content::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: radial-gradient(circle at 50% 20%, rgba(107, 70, 193, 0.05) 0%, transparent 50%);\n            pointer-events: none;\n        }\n        \n        .error-icon {\n            font-size: 5rem;\n            margin-bottom: 1.5rem;\n            color: var(--mint);\n            position: relative;\n            z-index: 1;\n            text-shadow: 0 0 30px rgba(14, 185, 130, 0.3);\n        }\n        \n        .error-title {\n            font-size: 3rem;\n            font-weight: 800;\n            background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            margin-bottom: 1.5rem;\n            position: relative;\n            z-index: 1;\n            line-height: 1.2;\n        }\n        \n        .error-message {\n            font-size: 1.25rem;\n            color: #E2E8F0;\n            margin-bottom: 2.5rem;\n            line-height: 1.6;\n            position: relative;\n            z-index: 1;\n        }\n        \n        .error-code {\n            font-size: 0.9rem;\n            color: #94A3B8;\n            margin-bottom: 2.5rem;\n            font-family: 'Courier New', monospace;\n            background: rgba(0, 15, 88, 0.5);\n            padding: 0.5rem 1.5rem;\n            border-radius: 0.5rem;\n            display: inline-block;\n            border: 1px solid rgba(126, 7, 237, 0.2);\n            position: relative;\n            z-index: 1;\n        }\n        \n        .action-buttons {\n            display: flex;\n            gap: 1rem;\n            justify-content: center;\n            flex-wrap: wrap;\n        }\n        \n        .button {\n            background: linear-gradient(135deg, #7e07edff 0%, #6b06c7 100%);\n            color: white;\n            padding: 1rem 2rem;\n            border: none;\n            border-radius: 0.75rem;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 1rem;\n            transition: all 0.25s ease;\n            display: inline-block;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n            position: relative;\n            z-index: 1;\n        }\n        \n        .button:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 0 20px rgba(126, 7, 237, 0.15);\n        }\n        \n        .button-secondary {\n            background: transparent;\n            color: #a855f7;\n            border: 2px solid #a855f7;\n        }\n        \n        .button-secondary:hover {\n            background: linear-gradient(135deg, #7e07edff 0%, #6b06c7 100%);\n            color: white;\n            border-color: transparent;\n        }\n        \n        .error-details {\n            margin-top: 2.5rem;\n            padding: 1.5rem;\n            background: rgba(0, 15, 88, 0.3);\n            border-radius: 0.75rem;\n            border-left: 4px solid var(--berry-primary-500);\n            text-align: left;\n            font-size: 0.95rem;\n            color: #E2E8F0;\n            position: relative;\n            z-index: 1;\n        }\n        \n        .site-footer {\n            background: var(--bg-surface);\n            border-top: 1px solid var(--border-subtle);\n            color: var(--text-secondary);\n            padding: var(--space-2xl) 0 var(--space-lg) 0;\n            margin-top: var(--space-3xl);\n            font-size: 1rem;\n        }\n        .footer-content {\n            max-width: 1100px;\n            margin: 0 auto;\n            display: flex;\n            flex-wrap: wrap;\n            align-items: center;\n            justify-content: space-between;\n            gap: 18px;\n            padding: 0 24px;\n        }\n        .footer-links {\n            display: flex;\n            gap: 24px;\n        }\n        .footer-link {\n            color: var(--text-secondary);\n            text-decoration: none;\n            font-weight: 500;\n            transition: var(--transition-fast);\n        }\n        .footer-link:hover {\n            color: var(--berry-primary-400);\n            text-decoration: none;\n        }\n        .footer-org {\n            font-weight: 600;\n            letter-spacing: 0.5px;\n        }\n        \n        @media (max-width: 768px) {\n            .navbar ul {\n                display: none;\n                flex-direction: column;\n                width: 100%;\n            }\n            .navbar ul.active {\n                display: flex;\n                position: absolute;\n                top: 100%;\n                left: 0;\n                color: white;\n                background-color: #db3232;\n                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n                z-index: 1;\n                padding: 0px 20px;\n                padding-bottom: 20px;\n            }\n            .navbar .menu-icon {\n                display: block;\n                cursor: pointer;\n            }\n            \n            .error-container {\n                padding: 1rem;\n            }\n            \n            .error-content {\n                padding: 2rem 1.5rem;\n            }\n            \n            .error-title {\n                font-size: 2rem;\n            }\n            \n            .action-buttons {\n                flex-direction: column;\n                align-items: center;\n            }\n            \n            .button {\n                width: 100%;\n                max-width: 250px;\n            }\n            \n            .footer-content {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 10px;\n                padding: 0 12px;\n            }\n            .footer-links {\n                gap: 16px;\n            }\n            .footer-org {\n                margin: 8px 0;\n            }\n        }\n        \n        #main-logo{\n            background-color: rgba(0, 0, 0, 0) !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            height: auto !important;\n            cursor: pointer;\n        }\n        #main-logo:hover{\n            background-color: rgba(0, 0, 0, 0) !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            height: auto !important;\n            cursor: pointer;\n        }\n    </style>\n    <link href=\"/static/css/tailwind-optimized.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-app-bg page-font\">\n    <!-- Navbar -->\n    <div id=\"navbar-container\"></div>\n\n    <div class=\"error-container\">\n        <div class=\"error-content\">\n            <div class=\"error-icon\">⚠️</div>\n            <h1 class=\"error-title\" id=\"errorTitle\">Oops! Something went wrong</h1>\n            <p class=\"error-message\" id=\"errorMessage\">\n                We encountered an unexpected error while processing your request. \n                Don't worry, our team has been notified and we're working to fix it.\n            </p>\n            <div class=\"error-code\" id=\"errorCode\">Error Code: 500</div>\n            \n            <div class=\"action-buttons\">\n                <a href=\"/\" class=\"button\">Go Home</a>\n                <a href=\"javascript:history.back()\" class=\"button button-secondary\">Go Back</a>\n            </div>\n            \n        </div>\n    </div>\n\n    <!-- Footer -->\n    <div id=\"footer-container\"></div>\n\n    <script>\n        // Load Navbar and Footer\n        function loadComponent(containerId, url) {\n            fetch(url)\n                .then(res => res.text())\n                .then(html => {\n                    document.getElementById(containerId).innerHTML = html;\n                });\n        }\n\n        document.addEventListener('DOMContentLoaded', function() {\n            loadComponent('navbar-container', '/static/components/navbar.html');\n            loadComponent('footer-container', '/static/components/footer.html');\n        });\n\n        // Get error details from URL parameters\n        const urlParams = new URLSearchParams(window.location.search);\n        const errorType = urlParams.get('type') || '500';\n        const errorMsg = urlParams.get('message');\n        \n        // Update error content based on type\n        const errorTitle = document.getElementById('errorTitle');\n        const errorMessage = document.getElementById('errorMessage');\n        const errorCode = document.getElementById('errorCode');\n        const errorDetails = document.getElementById('errorDetails');\n        \n        switch(errorType) {\n            case '404':\n                errorTitle.textContent = 'Page Not Found';\n                errorMessage.textContent = 'The page you\\'re looking for doesn\\'t exist or has been moved.';\n                errorCode.textContent = 'Error Code: 404';\n                break;\n            case '403':\n                errorTitle.textContent = 'Access Forbidden';\n                errorMessage.textContent = 'You don\\'t have permission to access this resource.';\n                errorCode.textContent = 'Error Code: 403';\n                break;\n            case '429':\n                errorTitle.textContent = 'Too Many Requests';\n                errorMessage.textContent = 'You\\'ve made too many requests. Please wait a moment and try again.';\n                errorCode.textContent = 'Error Code: 429';\n                break;\n            case '503':\n                errorTitle.textContent = 'Service Unavailable';\n                errorMessage.textContent = 'Our service is temporarily unavailable. Please try again in a few minutes.';\n                errorCode.textContent = 'Error Code: 503';\n                break;\n            default:\n                errorCode.textContent = `Error Code: ${errorType}`;\n                if (errorMsg) {\n                    errorMessage.textContent = decodeURIComponent(errorMsg);\n                }\n        }\n        \n        // Show error details\n        errorDetails.style.display = 'block';\n    </script>\n</body>\n</html>"