/* ═══════════════════════════════════════════════════════════════════════
   Тема «Киберпанк» для activateggsel.ru (#210)
   Палитра и эффекты (неон, сканлайны, шум, поток данных, глитч заголовка,
   рубленые углы) — по мотивам CYBERCORE CSS; главная кнопка — glitch-кнопка
   из Uiverse. Переписано под разметку сайта, без @layer: стили сайта не
   перебиваются непредсказуемо, а фреймворк целиком (с его reset) не нужен.
   Шрифты (Exo 2, JetBrains Mono — с кириллицей) подключаются в <head>.

   ---------------------------------------------------------------------
   CYBERCORE CSS — MIT License. Copyright (c) 2026 sebyx07
   Uiverse.io glitch button — MIT License. Copyright (c) Uiverse.io contributors

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
   DEALINGS IN THE SOFTWARE.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --cy-cyan: #00f0ff;
    --cy-cyan-soft: #87eaf2;
    --cy-magenta: #ff2a6d;
    --cy-yellow: #fcee0a;
    --cy-green: #05ffa1;
    --cy-red: #ff013c;
    --cy-void-900: #010204;
    --cy-void-700: #07080c;
    --cy-void-500: #0d0e14;
    --cy-void-400: #12141d;
    --cy-void-300: #181a25;
    --cy-void-200: #1f2230;
    --cy-void-100: #2a2d3a;
    --cy-chrome-100: #f0f1f5;
    --cy-chrome-300: #b2b7c7;
    --cy-chrome-500: #8a93ad;

    /* токены сайта */
    --xbox-green: var(--cy-cyan);
    --xbox-green-hover: var(--cy-cyan-soft);
    --bg-glass: rgba(13, 14, 20, 0.92);
    --border-glass: var(--cy-void-100);
    --text-main: var(--cy-chrome-100);
    --text-muted: var(--cy-chrome-500);
    --card-bg: var(--cy-void-400);
    --info-cyan: var(--cy-cyan);
    --error-red: var(--cy-magenta);
    --warn-yellow: var(--cy-yellow);
}

/* ── Фон: сетка, неоновое зарево, сканлайны и шум поверх всего ─────────── */
body { font-family: "Exo 2", "Segoe UI", system-ui, sans-serif; background: var(--cy-void-900); }
#dynamic-bg {
    background-image:
        linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        radial-gradient(900px 520px at 15% -5%, rgba(0, 240, 255, 0.18), transparent 65%),
        radial-gradient(800px 560px at 100% 105%, rgba(255, 42, 109, 0.18), transparent 65%),
        radial-gradient(600px 400px at 80% 20%, rgba(252, 238, 10, 0.05), transparent 70%) !important;
    background-size: 40px 40px, 40px 40px, auto, auto, auto !important;
    background-color: var(--cy-void-900);
}
.bg-overlay {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px);
}
body::after {                      /* шум — едва заметная «зернистость» экрана */
    content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Главная карточка: рубленые углы, уголки-акценты, неоновая рамка ──── */
.container {
    border-radius: 0; border: 1px solid var(--cy-void-100);
    background: rgba(13, 14, 20, 0.94);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    /* БЕЗ clip-path: внутри карточки лежат боковые панели «Последние активации» и
       «Отзывы», на ПК они вынесены за её края (left/right: -340px) — обрезка срезала бы их. */
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.container::before, .container::after {
    content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none; z-index: 2;
    border: 2px solid var(--cy-cyan);
}
.container::before { top: -1px; left: -1px; border-right: none; border-bottom: none; box-shadow: -4px -4px 16px rgba(0, 240, 255, 0.35); }
.container::after { right: -1px; bottom: -1px; border-top: none; border-left: none; border-color: var(--cy-magenta); box-shadow: 4px 4px 16px rgba(255, 42, 109, 0.35); }
.header { border-bottom: 1px solid var(--cy-void-100); }

/* ── Заголовок: неон + хроматический глитч (data-text ставит скрипт темы) ─ */
.title {
    font-family: "Exo 2", sans-serif; font-weight: 900; font-size: 21px; letter-spacing: 1.5px;
    text-transform: uppercase; position: relative; color: var(--cy-chrome-100);
}
.title span { color: var(--cy-cyan); text-shadow: 0 0 10px var(--cy-cyan), 0 0 22px rgba(0, 240, 255, 0.55); }
.title[data-text]::before, .title[data-text]::after {
    content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0.8;
}
.title[data-text]::before { color: var(--cy-magenta); animation: cy-glitch-a 7s infinite linear alternate-reverse; z-index: -1; }
.title[data-text]::after { color: var(--cy-cyan-soft); animation: cy-glitch-b 5s infinite linear alternate; z-index: -1; }
@keyframes cy-glitch-a {
    0%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 95% 0); }
    20% { transform: translate(2px, 0); clip-path: inset(30% 0 40% 0); }
    40% { transform: translate(-1px, 0); clip-path: inset(70% 0 10% 0); }
    60% { transform: translate(2px, 0); clip-path: inset(20% 0 55% 0); }
    80% { transform: translate(-2px, 0); clip-path: inset(45% 0 35% 0); }
}
@keyframes cy-glitch-b {
    0%, 100% { transform: translate(2px, 0); clip-path: inset(95% 0 0 0); }
    25% { transform: translate(-2px, 0); clip-path: inset(40% 0 30% 0); }
    50% { transform: translate(1px, 0); clip-path: inset(10% 0 70% 0); }
    75% { transform: translate(-1px, 0); clip-path: inset(60% 0 10% 0); }
}
.xbox-logo { border-radius: 4px; border-color: var(--cy-cyan); box-shadow: 0 0 14px rgba(0, 240, 255, 0.55); }

/* ── Переключатель языка ─────────────────────────────────────────────── */
.lang-switch { border-radius: 0; background: var(--cy-void-700); border-color: var(--cy-void-100); }
.lang-btn { border-radius: 0; font-family: "JetBrains Mono", monospace; }
.lang-btn.active { background: var(--cy-cyan); color: var(--cy-void-900); box-shadow: 0 0 12px rgba(0, 240, 255, 0.6); }

/* ── Поля: терминальный вид ──────────────────────────────────────────── */
label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.2px; color: var(--cy-chrome-300); }
label::before { content: "> "; color: var(--cy-cyan); }
/* Галочка в блоке оплаты — не подпись поля: обычный шрифт и без «> » */
#payBlock label.pay-chk { font-family: "Exo 2", sans-serif; font-size: 13px; letter-spacing: 0; color: var(--cy-chrome-100); }
#payBlock label.pay-chk::before { content: none; }
input, select, .xcombo-input {
    border-radius: 0; background: var(--cy-void-300); color: var(--cy-chrome-100);
    border: 1px solid var(--cy-void-100); border-left: 3px solid var(--cy-cyan);
}
input:focus, select:focus, .xcombo-input:focus {
    border-color: var(--cy-cyan); background: var(--cy-void-300);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.18), inset 0 0 15px rgba(0, 240, 255, 0.08);
}
input::placeholder { color: #5c647a; }
#key { font-family: "JetBrains Mono", monospace; }   /* код заказа — обычным шрифтом, иначе подсказка обрезается */
.xcombo-list { border-radius: 0; background: var(--cy-void-400); border-color: var(--cy-cyan); }

/* ── Главная кнопка: glitch-кнопка (Uiverse, MIT), подпись берётся из data-text ─ */
.btn-submit {
    position: relative; border: 0; border-radius: 0; padding: 18px 20px;
    font-family: "Exo 2", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: 3px; line-height: 1;
    color: #fff; background: linear-gradient(45deg, transparent 5%, var(--cy-red) 5%);
    box-shadow: 6px 0 0 var(--cy-cyan); transition: transform .15s;
}
.btn-submit:hover:not(:disabled) { background: linear-gradient(45deg, transparent 5%, var(--cy-red) 5%);
                                    box-shadow: 6px 0 0 var(--cy-cyan); transform: none; }
.btn-submit[data-text]::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    content: attr(data-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(45deg, transparent 3%, var(--cy-cyan) 3%, var(--cy-cyan) 5%, var(--cy-red) 5%);
    text-shadow: -3px -3px 0 var(--cy-yellow), 3px 3px 0 var(--cy-cyan);
    clip-path: var(--slice-0);
}
/* Глитч — ТОЛЬКО по нажатию (владелец 29.09): скрипт ставит класс .cy-glitch на 1 с.
   :active не годится — короткое касание пальцем обрывало бы анимацию. */
.btn-submit.cy-glitch[data-text]::after { animation: cy-btn-glitch 1s steps(2, end); }
/* «Оплатить» — жёлтая кнопка кассы: и глитч у неё в жёлтой гамме, не в красной */
#payBlock #payBtn[data-text]::after {
    color: var(--cy-void-900);
    background: linear-gradient(45deg, transparent 3%, var(--cy-cyan) 3%, var(--cy-cyan) 5%, var(--cy-yellow) 5%);
    text-shadow: -3px -3px 0 var(--cy-magenta), 3px 3px 0 var(--cy-cyan);
}
.btn-submit:disabled { background: var(--cy-void-200); color: #5c647a; box-shadow: 6px 0 0 var(--cy-void-100); }
.btn-submit:disabled::after { display: none; }
@keyframes cy-btn-glitch {
    0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); }
    10% { clip-path: var(--slice-3); transform: translate(10px, 10px); }
    20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); }
    30% { clip-path: var(--slice-3); transform: translate(0, 5px); }
    40% { clip-path: var(--slice-2); transform: translate(-5px, 0); }
    50% { clip-path: var(--slice-3); transform: translate(5px, 0); }
    60% { clip-path: var(--slice-4); transform: translate(5px, 10px); }
    70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); }
    80% { clip-path: var(--slice-5); transform: translate(20px, -10px); }
    90% { clip-path: var(--slice-1); transform: translate(-10px, 0); }
    100% { clip-path: var(--slice-1); transform: translate(0); }
}
.btn-sm { border-radius: 0; font-family: "JetBrains Mono", monospace; }
.btn-sm:hover { border-color: var(--cy-cyan); color: var(--cy-cyan); }

/* ── Карточки: рубленые углы ─────────────────────────────────────────── */
#recent-box, .faq-section, #reviews-box, #payBlock, .mk-tile, .otp-area, #consent-area, .result-area, .status-area {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
#recent-box { background: rgba(18, 20, 29, 0.92); border: 1px solid var(--cy-void-100); border-left: 2px solid var(--cy-cyan); }
#recent-box .rc-head b { color: var(--cy-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.6); font-family: "JetBrains Mono", monospace; }
#recent-box .rc-live i { background: var(--cy-green); box-shadow: 0 0 8px var(--cy-green); }
.rc-list li { border-top-color: var(--cy-void-200); }
.tour-help { color: var(--cy-yellow); }

/* ── Оплата: жёлтый кибер-цвет совпадает с фирменным жёлтым кассы ─────── */
#payBlock { background: rgba(252, 238, 10, 0.035); border: 1px solid rgba(252, 238, 10, 0.28); border-left: 2px solid var(--cy-yellow); }
#payBlock .pay-title { color: var(--cy-yellow); font-family: "JetBrains Mono", monospace; letter-spacing: 0.3px; }
#payBlock .pay-sum b { font-family: "Exo 2", sans-serif; font-weight: 900; text-shadow: 0 0 14px rgba(252, 238, 10, 0.35); }
#payBlock #payBtn {
    border-radius: 0; background: var(--cy-yellow); color: var(--cy-void-900); font-family: "Exo 2", sans-serif;
    font-weight: 800; letter-spacing: 1.5px; box-shadow: 0 0 18px rgba(252, 238, 10, 0.35);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
#payBlock #payBtn:hover:not(:disabled) { background: #fff45c; }
#payBlock .pay-methods span { border-radius: 0; }
#payBlock select { border-left-color: var(--cy-yellow); }

/* ── FAQ, отзывы ──────────────────────────────────────────────────────── */
.faq-section { background: rgba(18, 20, 29, 0.92); border: 1px solid var(--cy-void-100); }
.faq-title { font-family: "Exo 2", sans-serif; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
#reviews-box { background: rgba(18, 20, 29, 0.92); border: 1px solid var(--cy-void-100); border-right: 2px solid var(--cy-magenta); }
.rv-list .rv-src { border-radius: 0; }

/* ── Идёт активация: «поток данных» по статусу ─────────────────────────── */
.status-area { border: 1px solid var(--cy-cyan); background: var(--cy-void-400); position: relative; overflow: hidden;
               box-shadow: inset 0 0 22px rgba(0, 240, 255, 0.12); }
.status-area::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 240, 255, 0.22) 50%, transparent 100%);
    background-size: 100% 200%; animation: cy-datastream 2.6s linear infinite;
}
@keyframes cy-datastream { 0% { background-position: 0 0; } 100% { background-position: 0 200%; } }
.status-spinner { border-top-color: var(--cy-cyan); border-right-color: var(--cy-magenta); }
.status-text { font-family: "JetBrains Mono", monospace; }

/* ── Итог: зелёный неон / маджента ─────────────────────────────────────── */
.result-success { border-color: var(--cy-green); box-shadow: inset 0 0 26px rgba(5, 255, 161, 0.12); }
.result-success .result-header { color: var(--cy-green); text-shadow: 0 0 12px rgba(5, 255, 161, 0.5); }
.result-error { border-color: var(--cy-magenta); box-shadow: inset 0 0 26px rgba(255, 42, 109, 0.12); }
.mk-tile.ok { border-color: var(--cy-green); }
.mk-tile.fail { border-color: var(--cy-magenta); }

/* ── Меньше движения — по настройке системы ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .title[data-text]::before, .title[data-text]::after { animation: none; opacity: 0; }
    .btn-submit[data-text]::after, .status-area::before { animation: none !important; }
}