<!DOCTYPE html>
<html lang="ru" data-theme="neutral">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    
    <!-- FAVICON -->
    <link rel="icon" type="image/png" href="https://staticonline.duckdns.org/api/public/dl/ВАШ_FAVICON?inline=true">
    <link rel="shortcut icon" href="https://staticonline.duckdns.org/api/public/dl/ВАШ_FAVICON?inline=true">
    
    <title>404</title>

    <style>
        :root {
            --bg: #12121a;
            --card-bg: rgba(26, 26, 36, 0.75);
            --text: #e0e0e0;
            --sub: #a0a0b0;
            --accent-blue: #7aa2f7;
            --accent-pink: #c084fc;
            --border: rgba(255, 255, 255, 0.12);
            --input-bg: rgba(18, 18, 26, 0.85);
            --mono: 'Courier New', 'Consolas', 'Liberation Mono', monospace;
            --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            --radius: 6px;
            --transition: 0.2s ease;
        }

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

        html { font-size: 16px; background: var(--bg); -webkit-font-smoothing: antialiased; }

        body {
            font-family: var(--font);
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: var(--text);
            position: relative;
            background: url('https://staticonline.duckdns.org/api/public/dl/K_naZzYv?inline=true') center/cover no-repeat fixed;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: rgba(10, 10, 20, 0.55);
            z-index: 0;
            pointer-events: none;
        }

        .card {
            position: relative;
            z-index: 1;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            padding: 2.8rem 2.2rem;
            text-align: center;
            width: 100%;
            max-width: 500px;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            animation: cardIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
        }

        @keyframes cardIn {
            from { opacity: 0; transform: translateY(20px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .code-block { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-bottom: 0.5rem; }

        .digit {
            font-family: var(--mono);
            font-size: 6rem;
            font-weight: 700;
            line-height: 1;
            color: var(--text);
            text-shadow: 0 0 12px rgba(122, 162, 247, 0.4);
            animation: gentleFloat 4s ease-in-out infinite;
        }

        .digit:nth-child(2) { animation-delay: 0.2s; color: var(--accent-blue); text-shadow: 0 0 16px rgba(122, 162, 247, 0.6); }
        .digit:nth-child(3) { animation-delay: 0.4s; color: var(--accent-pink); text-shadow: 0 0 16px rgba(192, 132, 252, 0.6); }

        @keyframes gentleFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        .divider-dot { width: 10px; height: 10px; background: var(--accent-blue); border-radius: 50%; opacity: 0.5; }
        .divider-dot:nth-child(4) { background: var(--accent-pink); }

        .title { font-family: var(--mono); font-size: 1.2rem; margin-bottom: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase; }
        
        .desc { font-size: 0.85rem; color: var(--sub); max-width: 380px; margin: 0 auto 1.8rem; line-height: 1.6; }

        .search-section { text-align: left; }
        
        .search-label {
            font-family: var(--mono);
            font-size: 0.65rem;
            color: var(--accent-blue);
            display: block;
            margin: 0 0 8px 4px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.9;
        }

        .search-box {
            display: flex;
            background: var(--input-bg);
            border-radius: var(--radius);
            padding: 3px 3px 3px 14px;
            border: 1px solid var(--border);
            transition: var(--transition);
        }

        .search-box:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.2); }

        .search-box input {
            flex: 1;
            background: transparent;
            border: none;
            padding: 0.55rem 0;
            font-size: 0.8rem;
            outline: none;
            color: var(--text);
            font-family: var(--mono);
            min-width: 0;
        }

        .search-box input::placeholder { color: var(--sub); opacity: 0.6; }

        .search-box button {
            display: flex;
            align-items: center;
            gap: 5px;
            background: rgba(122, 162, 247, 0.1);
            color: var(--accent-blue);
            border: 1px solid var(--accent-blue);
            border-radius: var(--radius);
            padding: 0.5rem 1.2rem;
            font: 500 0.75rem var(--mono);
            cursor: pointer;
            transition: var(--transition);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .search-box button:hover { background: rgba(122, 162, 247, 0.2); box-shadow: 0 0 12px rgba(122, 162, 247, 0.3); color: #fff; }

        .toast {
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translate(-50%, 10px);
            background: var(--card-bg);
            color: var(--accent-blue);
            padding: 10px 24px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            font-size: 0.72rem;
            z-index: 9999;
            pointer-events: none;
            max-width: 90vw;
            text-align: center;
            transition: opacity 0.3s ease, transform 0.3s ease;
            opacity: 0;
            font-family: var(--mono);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            backdrop-filter: blur(4px);
        }

        .toast.show { opacity: 1; transform: translate(-50%, 0); }

        .shake { animation: shake 0.4s ease; }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-5px); }
            40% { transform: translateX(5px); }
            60% { transform: translateX(-4px); }
            80% { transform: translateX(3px); }
        }

        @media (max-width: 520px) {
            .card { padding: 2rem 1rem; }
            .digit { font-size: 4rem; }
            .search-box button { padding: 0.45rem 0.8rem; font-size: 0.7rem; }
        }

        @media (max-width: 380px) {
            .digit { font-size: 3rem; }
            .title { font-size: 1rem; }
            .desc { font-size: 0.75rem; }
        }
    </style>
</head>

<body>

<div class="card">
    <div class="code-block">
        <span class="digit">4</span>
        <span class="divider-dot"></span>
        <span class="digit">0</span>
        <span class="divider-dot"></span>
        <span class="digit">4</span>
    </div>

    <h1 class="title" id="titleText">Страница не найдена</h1>
    <p class="desc" id="descText">Похоже, этой страницы больше нет или она перемещена. Проверьте адрес или воспользуйтесь поиском.</p>

    <div class="search-section">
        <span class="search-label" id="searchLabel">✦ Поиск через SearXNG</span>
        
        <!-- Заменено на форму для нативной поддержки клавиши Enter -->
        <form class="search-box" id="searchForm">
            <input type="text" id="searchInput" placeholder="Введите запрос..." autocomplete="off">
            <button type="submit" id="searchBtn">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <span id="searchBtnLabel">Найти</span>
            </button>
        </form>
    </div>
</div>

<div class="toast" id="toast"></div>

<script>
(function () {
    const SEARXNG_BASE = 'https://searx.be/search?q=';
    const browserLang = (navigator.language || 'en').split('-')[0];
    const lang = ['ru', 'en', 'lt', 'es'].includes(browserLang) ? browserLang : 'ru';

    const translations = {
        ru: { title: 'Страница не найдена', desc: 'Похоже, этой страницы больше нет или она перемещена. Проверьте адрес или воспользуйтесь поиском.', searchLabel: '✦ Поиск через SearXNG', searchPlaceholder: 'Введите запрос...', searchBtn: 'Найти', empty: 'Введите поисковый запрос' },
        en: { title: 'Page not found', desc: 'This page seems to be missing or moved. Double-check the URL or use the search.', searchLabel: '✦ Search via SearXNG', searchPlaceholder: 'Enter your query...', searchBtn: 'Search', empty: 'Enter a search query' },
        lt: { title: 'Puslapis nerastas', desc: 'Atrodo, šio puslapio nebėra arba jis perkeltas. Patikrinkite adresą arba naudokitės paieška.', searchLabel: '✦ Paieška per SearXNG', searchPlaceholder: 'Įveskite užklausą...', searchBtn: 'Ieškoti', empty: 'Įveskite paieškos užklausą' },
        es: { title: 'Página no encontrada', desc: 'Esta página parece haber desaparecido o haberse movido. Verifica la URL o usa la búsqueda.', searchLabel: '✦ Buscar con SearXNG', searchPlaceholder: 'Ingresa tu búsqueda...', searchBtn: 'Buscar', empty: 'Ingresa una búsqueda' }
    };

    const t = translations[lang] || translations.ru;

    // Кэшируем DOM-элементы
    const els = {
        title: document.getElementById('titleText'),
        desc: document.getElementById('descText'),
        label: document.getElementById('searchLabel'),
        input: document.getElementById('searchInput'),
        btnLabel: document.getElementById('searchBtnLabel'),
        form: document.getElementById('searchForm'),
        toast: document.getElementById('toast')
    };

    // Применяем переводы
    els.title.textContent = t.title;
    els.desc.textContent = t.desc;
    els.label.textContent = t.searchLabel;
    els.input.placeholder = t.searchPlaceholder;
    els.btnLabel.textContent = t.searchBtn;

    let toastTimer;

    function showToast(message, duration = 2400) {
        els.toast.textContent = message;
        els.toast.classList.add('show');
        clearTimeout(toastTimer);
        toastTimer = setTimeout(() => els.toast.classList.remove('show'), duration);
    }

    // Обработчик отправки формы (обрабатывает и клик по кнопке, и Enter)
    els.form.addEventListener('submit', (e) => {
        e.preventDefault();
        const query = els.input.value.trim();

        if (!query) {
            els.input.focus();
            // Перезапуск анимации
            els.input.classList.remove('shake');
            void els.input.offsetWidth; // Магия для перерисовки (reflow)
            els.input.classList.add('shake');
            showToast(t.empty);
            return;
        }

        window.open(SEARXNG_BASE + encodeURIComponent(query), '_blank');
    });
})();
</script>

</body>
</html>
