:root {
            --primary: #00c6ff;
            --secondary: #1a1a1a;
            --text: #f5f5f5;
            --text-muted: #cccccc;
            --bg: #101010;
            --accent: #ffe000;
            --glow-primary: rgba(0, 198, 255, 0.4);
            --glow-accent: rgba(255, 224, 0, 0.5);
            --shadow-light: rgba(0, 0, 0, 0.3);
            --shadow-medium: rgba(0, 0, 0, 0.6);
            --red-color: #ff4d4d; /* Use theme red */
            --glow-red: rgba(255, 77, 77, 0.7); /* Use theme glow red */
            --font-main: 'Cairo', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; width: 100%; overflow: hidden; background-color: var(--bg); }

        body {
            font-family: var(--font-main); color: var(--text);
            display: flex; justify-content: center; align-items: center;
            text-align: center; perspective: 1000px; cursor: none;
        }

        /* Use the same cursor style as the main site/404 */
        .cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 9999; pointer-events: none; transition: opacity 0.3s ease, transform 0.1s ease-out, width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; will-change: transform; mix-blend-mode: screen; }
        .cursor-dot { width: 10px; height: 10px; background-color: var(--accent); box-shadow: 0 0 10px var(--glow-accent); }
        .cursor-outline { width: 45px; height: 45px; background-color: transparent; border: 2px solid var(--primary); transition-duration: 0.2s; opacity: 0.5; }
        body:has(a:hover) .cursor-dot { opacity: 0.8; transform: translate(-50%, -50%) scale(1.8); background-color: var(--primary); box-shadow: 0 0 12px var(--glow-primary); }
        body:has(a:hover) .cursor-outline { transform: translate(-50%, -50%) scale(0.85); opacity: 0.8; border-color: var(--accent); border-width: 3px; background-color: rgba(255, 224, 0, 0.1); }
        @media (hover: none) { .cursor-dot, .cursor-outline { display: none; } body { cursor: auto; } a { cursor: pointer; } }

        /* Background pattern (subtle) */
        #background-pattern {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 20px),
                              repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 20px);
            opacity: 0.5;
            z-index: 0;
        }

        .container { position: relative; z-index: 1; padding: 20px; animation: float-subtle 10s infinite ease-in-out; }

        .icon-wrapper {
            margin-bottom: 25px;
            animation: pulse-error 2s infinite ease-in-out;
        }

        .error-icon {
            font-size: clamp(5rem, 15vw, 10rem);
            color: var(--red-color);
            text-shadow: 0 0 15px var(--glow-red), 0 0 30px var(--glow-red);
        }

        .error-code {
            font-size: clamp(5rem, 18vw, 15rem);
            font-weight: 900;
            line-height: 1;
            color: var(--text);
            margin-bottom: 15px;
            text-shadow: 0 0 10px var(--shadow-light), 0 0 20px var(--glow-red), -2px 2px 0 rgba(255, 77, 77, 0.3);
            animation: text-flicker-error 6s infinite linear;
            will-change: text-shadow, opacity;
        }

        .message {
            font-size: clamp(1.2rem, 3vw, 1.8rem);
            font-weight: 700;
            margin-bottom: 40px;
            color: var(--text-muted);
            text-shadow: 0 0 5px var(--shadow-light);
            opacity: 0;
            animation: fade-in 1s ease-out 0.5s forwards;
            max-width: 550px; margin-left: auto; margin-right: auto; line-height: 1.7;
        }

        .back-link {
            display: inline-block; padding: 12px 35px;
            font-size: 1.1rem; font-weight: 700;
            color: var(--text); /* White text */
            background: transparent;
            border: 2px solid var(--primary); /* Primary border */
            border-radius: 6px; text-decoration: none; cursor: none;
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 0 10px var(--glow-primary), inset 0 0 8px rgba(0, 198, 255, 0.2);
            animation: fade-in 1s ease-out 0.8s backwards;
            will-change: transform, box-shadow, background-color, color;
        }

        .back-link:hover {
            background-color: var(--primary);
            color: var(--bg); /* Dark text on hover */
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 5px 18px var(--glow-primary), inset 0 0 10px rgba(0, 0, 0, 0.1);
        }

        @keyframes pulse-error {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.08); opacity: 1; }
        }

        @keyframes text-flicker-error {
            0%, 16%, 21%, 27%, 52%, 59%, 100% { opacity: 1; text-shadow: 0 0 10px var(--shadow-light), 0 0 20px var(--glow-red), -2px 2px 0 rgba(255, 77, 77, 0.3); }
            18%, 24%, 55% { opacity: 0.7; text-shadow: 0 0 5px var(--shadow-light), 0 0 10px var(--glow-red); }
        }

        @keyframes fade-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

        @keyframes float-subtle {
            50% { transform: translateY(-5px); }
        }