body#page-top {
            min-height: 100vh;
            min-height: 100dvh;
            margin: 0;
        }

        html.htmlmain:has(.front-page) {
            width: 100%;
            height: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            background-image: url('../img/main/bg_scan.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
            background-position: center center;
        }

        .front-page {
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        .front-page::before,
        .front-page::after {
            content: none;
            display: none;
        }

        .front-bubbles {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .front-bubble {
            position: absolute;
            bottom: -12px;
            border-radius: 50%;
            background: radial-gradient(
                circle at 32% 28%,
                rgba(255, 255, 255, 0.65) 0%,
                rgba(140, 245, 255, 0.38) 28%,
                rgba(80, 210, 255, 0.16) 62%,
                rgba(40, 170, 255, 0.04) 100%
            );
            border: 1px solid rgba(120, 235, 255, 0.42);
            box-shadow:
                inset -1px -1px 2px rgba(255, 255, 255, 0.18),
                0 0 5px rgba(102, 240, 255, 0.22);
            opacity: 0;
            animation: it-bubble-rise linear infinite;
        }

        .front-bubble--1 {
            left: 14%;
            width: 7px;
            height: 7px;
            --bubble-drift: -10px;
            animation-duration: 8.5s;
            animation-delay: 0s;
        }

        .front-bubble--2 {
            left: 31%;
            width: 5px;
            height: 5px;
            --bubble-drift: 8px;
            animation-duration: 10s;
            animation-delay: 2.2s;
        }

        .front-bubble--3 {
            left: 48%;
            width: 6px;
            height: 6px;
            --bubble-drift: -6px;
            animation-duration: 9s;
            animation-delay: 4.5s;
        }

        .front-bubble--4 {
            left: 64%;
            width: 4px;
            height: 4px;
            --bubble-drift: 12px;
            animation-duration: 11s;
            animation-delay: 1s;
        }

        .front-bubble--5 {
            left: 78%;
            width: 6px;
            height: 6px;
            --bubble-drift: -9px;
            animation-duration: 9.5s;
            animation-delay: 6s;
        }

        .front-bubble--6 {
            left: 89%;
            width: 5px;
            height: 5px;
            --bubble-drift: 6px;
            animation-duration: 10.5s;
            animation-delay: 3.5s;
        }

        @keyframes it-bubble-rise {
            0% {
                transform: translate(0, 0) scale(0.85);
                opacity: 0;
            }
            12% {
                opacity: 0.75;
            }
            55% {
                transform: translate(calc(var(--bubble-drift) * 0.45), -32vh) scale(1);
                opacity: 0.55;
            }
            100% {
                transform: translate(var(--bubble-drift), -62vh) scale(0.9);
                opacity: 0;
            }
        }

        .front-logo-wrap {
            flex-shrink: 0;
            text-align: center;
            padding: 2.5rem 1rem 1rem;
        }

        .front-logo-wrap img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .front-page .captionsearch {
            position: static !important;
            top: auto !important;
            right: auto !important;
            width: 100%;
            margin-top: auto;
            padding: 0;
            z-index: 1;
        }

        .front-page .form-group {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .front-buttons {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-end;
            gap: 3.6rem;
            padding: 1rem 1.5rem 2.75rem;
        }

        .it-btn {
            --it-accent: #66f0ff;
            --it-accent-soft: rgba(102, 240, 255, 0.36);
            --it-accent-glow: rgba(102, 240, 255, 0.55);
            --it-ring-color: #00ffff;
            --it-ring-hot: #f7ffff;
            --it-ring-soft: rgba(0, 242, 255, 0.75);
            --it-ring-faint: rgba(0, 242, 255, 0.45);
            --it-ring-neon:
                0 0 1px 0 var(--it-ring-hot),
                0 0 3px 0 var(--it-ring-color),
                0 0 10px 0 rgba(0, 255, 255, 0.9),
                0 0 18px 0 rgba(0, 242, 255, 0.55);
            --it-neon-glow:
                0 0 1px 0 var(--it-accent),
                0 0 5px 0 var(--it-accent-glow),
                0 0 13px 0 var(--it-accent-soft),
                inset 0 0 1px 0.15px var(--it-accent),
                inset 0 0 10px 0 var(--it-accent-glow),
                inset 0 0 16px 0 var(--it-accent-soft);
            --it-neon-glow-strong:
                0 0 2px 0 var(--it-accent),
                0 0 7px 0 var(--it-accent-glow),
                0 0 20px 0 var(--it-accent-soft),
                inset 0 0 2px 0.25px var(--it-accent),
                inset 0 0 12px 0 var(--it-accent-glow),
                inset 0 0 22px 0 var(--it-accent-soft);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.9rem;
            width: 234px;
            text-decoration: none !important;
            color: #fff;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        .it-btn--search {
            --it-accent: #66f0ff;
            --it-accent-soft: rgba(102, 240, 255, 0.36);
            --it-accent-glow: rgba(102, 240, 255, 0.55);
            --it-ring-color: #00ffff;
            --it-ring-hot: #f7ffff;
            --it-ring-soft: rgba(0, 242, 255, 0.75);
            --it-ring-faint: rgba(0, 242, 255, 0.45);
            --it-ring-neon:
                0 0 1px 0 var(--it-ring-hot),
                0 0 3px 0 var(--it-ring-color),
                0 0 10px 0 rgba(0, 255, 255, 0.9),
                0 0 18px 0 rgba(0, 242, 255, 0.55);
        }

        .it-btn__hud {
            position: relative;
            width: 234px;
            height: 234px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: it-float 5s ease-in-out infinite;
            transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .it-btn:nth-child(2) .it-btn__hud {
            animation-delay: 1s;
        }

        .it-btn__ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2px dashed var(--it-ring-hot);
            opacity: 0.9;
            box-shadow:
                0 0 6px 0 var(--it-ring-hot),
                0 0 14px 0 var(--it-ring-color),
                0 0 26px 0 var(--it-ring-soft),
                inset 0 0 6px 0 var(--it-ring-color),
                inset 0 0 14px 0 var(--it-ring-soft);
            animation: it-spin 14s linear infinite;
        }

        .it-btn__ring--2 {
            inset: 10px;
            border-style: solid;
            border-width: 3px;
            border-color: transparent;
            border-top-color: #ffffff;
            border-right-color: var(--it-ring-hot);
            border-bottom-color: var(--it-ring-color);
            opacity: 1;
            box-shadow:
                0 0 4px 0 #ffffff,
                0 0 10px 0 var(--it-ring-hot),
                0 0 22px 0 var(--it-ring-color),
                0 0 40px 0 var(--it-ring-soft),
                0 0 60px 0 var(--it-ring-faint),
                inset 0 0 6px 0 var(--it-ring-hot),
                inset 0 0 16px 0 var(--it-ring-soft);
            filter: brightness(1.3);
            animation: it-spin-rev 7s linear infinite;
        }

        .it-btn__ring--3 {
            inset: 22px;
            border: 3px solid var(--it-ring-color);
            opacity: 1;
            box-shadow:
                0 0 2px 0 var(--it-ring-hot),
                0 0 8px 0 var(--it-ring-color),
                0 0 18px 0 var(--it-ring-soft),
                0 0 30px 0 var(--it-ring-faint),
                inset 0 0 4px 0 var(--it-ring-hot),
                inset 0 0 12px 0 var(--it-ring-soft);
            animation: it-pulse-ring 2.8s ease-in-out infinite;
        }

        .it-btn__core {
            position: relative;
            z-index: 2;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            overflow: hidden;
            perspective: 720px;
            transform-style: preserve-3d;
            background:
                radial-gradient(circle at 50% 0%, rgba(102, 240, 255, 0.14) 0%, transparent 55%),
                linear-gradient(180deg, rgba(8, 24, 52, 0.92) 0%, rgba(4, 12, 32, 0.96) 100%);
            border: 1px solid var(--it-accent);
            box-shadow:
                var(--it-neon-glow),
                0 12px 32px rgba(0, 0, 0, 0.45);
            transition:
                transform 0.14s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.14s ease,
                border-color 0.14s ease,
                filter 0.14s ease;
        }

        .it-btn__core::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 68%);
            opacity: 0;
            transform: scale(0.55);
            pointer-events: none;
            z-index: 3;
        }

        .it-btn--search .it-btn__core {
            background:
                radial-gradient(circle at 50% 0%, rgba(102, 240, 255, 0.14) 0%, transparent 55%),
                linear-gradient(180deg, rgba(8, 24, 52, 0.92) 0%, rgba(4, 12, 32, 0.96) 100%);
        }

        .it-btn__grid {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-image:
                linear-gradient(rgba(102, 240, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(102, 240, 255, 0.1) 1px, transparent 1px);
            background-size: 13px 13px;
            opacity: 0.55;
            pointer-events: none;
        }

        .it-btn--search .it-btn__grid {
            background-image:
                linear-gradient(rgba(102, 240, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(102, 240, 255, 0.1) 1px, transparent 1px);
        }

        .it-btn__scanline {
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--it-accent), transparent);
            box-shadow: 0 0 4px var(--it-accent-glow);
            opacity: 0.75;
            animation: it-scan 3s ease-in-out infinite;
            pointer-events: none;
        }

        .it-btn__icon {
            position: relative;
            z-index: 1;
            width: 86px;
            height: 86px;
            color: var(--it-accent);
            filter: drop-shadow(0 0 5px var(--it-accent-glow));
            transform-style: preserve-3d;
            backface-visibility: visible;
            animation: it-icon-spin-depth 18s linear infinite;
            transition: filter 0.14s ease;
        }

        .it-btn:nth-child(2) .it-btn__icon {
            animation-name: it-icon-spin-depth-rev;
            animation-duration: 22s;
        }

        .it-btn__label {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 180px;
            padding: 0.5rem 0.9rem;
            font-family: "Prompt-Bold", "Consolas", monospace;
            font-size: 0.81rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.25;
            color: var(--it-accent);
            background: rgba(4, 14, 34, 0.82);
            border: 1px solid var(--it-accent);
            clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
            box-shadow: var(--it-neon-glow);
            text-shadow: 0 0 8px var(--it-accent-glow);
            transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
        }

        .it-btn__label::before,
        .it-btn__label::after {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            border-color: var(--it-accent);
            border-style: solid;
            opacity: 1;
            filter:
                drop-shadow(0 0 2px var(--it-accent))
                drop-shadow(0 0 5px var(--it-accent-glow));
        }

        .it-btn__label::before {
            top: -2px;
            left: -2px;
            border-width: 3px 0 0 3px;
        }

        .it-btn__label::after {
            right: -2px;
            bottom: -2px;
            border-width: 0 3px 3px 0;
        }

        .front-buttons .it-btn__label {
            flex-direction: column;
            min-width: 212px;
            padding: 0.62rem 1.1rem 0.52rem;
            background: rgba(2, 8, 22, 0.82);
            border: 1px solid var(--it-accent);
            clip-path: polygon(
                14px 0, calc(100% - 14px) 0, 100% 14px,
                100% calc(100% - 14px), calc(100% - 14px) 100%,
                14px 100%, 0 calc(100% - 14px), 0 14px
            );
            box-shadow:
                0 0 1px var(--it-accent),
                0 0 8px var(--it-accent-glow),
                0 0 18px var(--it-accent-soft),
                inset 0 0 8px rgba(255, 255, 255, 0.08);
        }

        .front-buttons .it-btn__label::before {
            content: "";
            position: absolute;
            inset: 4px;
            border: 1px solid var(--it-accent-soft);
            clip-path: polygon(
                11px 0, calc(100% - 11px) 0, 100% 11px,
                100% calc(100% - 11px), calc(100% - 11px) 100%,
                11px 100%, 0 calc(100% - 11px), 0 11px
            );
            opacity: 0.7;
            pointer-events: none;
            width: auto;
            height: auto;
            border-width: 1px;
            filter: none;
        }

        .front-buttons .it-btn__label::after {
            display: none;
        }

        .it-btn__label-title {
            display: block;
            font-size: clamp(1rem, 2.2vw, 1.15rem);
            line-height: 1.05;
            letter-spacing: 0.08em;
            color: #f7ffff;
            text-shadow:
                0 0 6px var(--it-accent),
                0 0 14px var(--it-accent-glow);
        }

        .it-btn__label-sub {
            display: block;
            margin-top: 0.28rem;
            font-family: "Prompt-Regular", "Consolas", monospace;
            font-size: clamp(0.5rem, 1.35vw, 0.58rem);
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--it-accent);
            text-shadow: 0 0 8px var(--it-accent-glow);
        }

        .it-btn__dots {
            position: absolute;
            inset: 31px;
            border-radius: 50%;
            pointer-events: none;
        }

        .it-btn__dots span {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--it-accent);
            box-shadow: 0 0 4px var(--it-accent-glow);
            animation: it-blink 2s ease-in-out infinite;
        }

        .it-btn__dots span:nth-child(1) { top: 0; left: 50%; margin-left: -2px; }
        .it-btn__dots span:nth-child(2) { bottom: 12%; right: 8%; animation-delay: 0.4s; }
        .it-btn__dots span:nth-child(3) { bottom: 12%; left: 8%; animation-delay: 0.8s; }
        .it-btn__dots span:nth-child(4) { top: 50%; right: 0; margin-top: -2px; animation-delay: 1.2s; }

        .it-btn:hover .it-btn__hud {
            animation-play-state: paused;
        }

        .it-btn:hover .it-btn__core {
            transform: scale(1.05);
            box-shadow:
                var(--it-neon-glow-strong),
                0 16px 40px rgba(0, 0, 0, 0.5);
        }

        .it-btn:hover .it-btn__icon {
            animation-play-state: paused;
            filter: drop-shadow(0 0 5px var(--it-accent-glow));
        }

        .it-btn:hover .it-btn__label {
            border-color: var(--it-accent);
            box-shadow: var(--it-neon-glow-strong);
        }

        .it-btn:active .it-btn__hud,
        .it-btn.is-pressed .it-btn__hud {
            animation-play-state: paused;
            transform: translateY(12px) scale(0.92);
        }

        .it-btn:active .it-btn__core,
        .it-btn.is-pressed .it-btn__core {
            transform: scale(0.88);
            filter: brightness(0.88);
            border-color: rgba(255, 255, 255, 0.45);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.2) inset,
                0 0 10px var(--it-accent-soft),
                0 2px 6px rgba(0, 0, 0, 0.55),
                inset 0 10px 24px rgba(0, 0, 0, 0.5),
                inset 0 -2px 8px rgba(255, 255, 255, 0.06);
        }

        .it-btn:active .it-btn__core::after,
        .it-btn.is-pressed .it-btn__core::after {
            animation: it-press-flash 0.4s ease-out;
        }

        .it-btn:active .it-btn__icon,
        .it-btn.is-pressed .it-btn__icon {
            animation-play-state: paused;
            filter: drop-shadow(0 0 6px var(--it-accent-soft));
        }

        .it-btn:active .it-btn__ring,
        .it-btn.is-pressed .it-btn__ring {
            opacity: 0.25;
        }

        .it-btn:active .it-btn__ring--2,
        .it-btn:active .it-btn__ring--3,
        .it-btn.is-pressed .it-btn__ring--2,
        .it-btn.is-pressed .it-btn__ring--3 {
            animation-play-state: paused;
            opacity: 0.5;
        }

        .it-btn:active .it-btn__scanline,
        .it-btn.is-pressed .it-btn__scanline {
            opacity: 0.35;
        }

        .it-btn:active .it-btn__label,
        .it-btn.is-pressed .it-btn__label {
            transform: translateY(4px);
            opacity: 0.75;
            box-shadow: 0 0 8px var(--it-accent-soft);
        }

        @keyframes it-press-flash {
            0% {
                opacity: 0.75;
                transform: scale(0.55);
            }
            100% {
                opacity: 0;
                transform: scale(1.15);
            }
        }

        @keyframes it-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        @keyframes it-icon-spin-depth {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(360deg); }
        }

        @keyframes it-icon-spin-depth-rev {
            from { transform: rotateY(360deg); }
            to { transform: rotateY(0deg); }
        }

        @keyframes it-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes it-spin-rev {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }

        @keyframes it-pulse-ring {
            0%, 100% { transform: scale(1); opacity: 0.9; }
            50% { transform: scale(1.03); opacity: 1; }
        }

        @keyframes it-scan {
            0% { top: 8%; opacity: 0; }
            15% { opacity: 0.85; }
            85% { opacity: 0.85; }
            100% { top: 88%; opacity: 0; }
        }

        @keyframes it-blink {
            0%, 100% { opacity: 0.35; transform: scale(0.85); }
            50% { opacity: 1; transform: scale(1); }
        }

        @media (max-width: 640px) {
            .front-logo-wrap {
                padding: 1.5rem 0.75rem 0.5rem;
            }

            .front-buttons {
                gap: 1.5rem;
                justify-content: center;
                padding: 0.75rem 0.5rem 1.75rem;
            }

            .it-btn {
                width: 178px;
            }

            .it-btn__hud {
                width: 178px;
                height: 178px;
            }

            .it-btn__core {
                width: 135px;
                height: 135px;
            }

            .it-btn__icon {
                width: 65px;
                height: 65px;
            }

            .it-btn__label {
                min-width: 144px;
                font-size: 0.65rem;
                padding: 0.4rem 0.68rem;
            }

            .front-buttons .it-btn__label {
                min-width: 158px;
                padding: 0.5rem 0.6rem 0.42rem;
            }

            .it-btn__label-title {
                font-size: 0.82rem;
            }

            .it-btn__label-sub {
                font-size: 0.44rem;
                letter-spacing: 0.05em;
            }
        }

/* Search page */
.search-page {
    --it-accent: #66f0ff;
    --it-accent-soft: rgba(102, 240, 255, 0.36);
    --it-accent-glow: rgba(102, 240, 255, 0.55);
    --it-neon-glow:
        0 0 1px 0 var(--it-accent),
        0 0 5px 0 var(--it-accent-glow),
        0 0 13px 0 var(--it-accent-soft),
        inset 0 0 1px 0.15px var(--it-accent),
        inset 0 0 10px 0 var(--it-accent-glow),
        inset 0 0 16px 0 var(--it-accent-soft);
    --it-neon-glow-strong:
        0 0 2px 0 var(--it-accent),
        0 0 7px 0 var(--it-accent-glow),
        0 0 20px 0 var(--it-accent-soft),
        inset 0 0 2px 0.25px var(--it-accent),
        inset 0 0 12px 0 var(--it-accent-glow),
        inset 0 0 22px 0 var(--it-accent-soft);
}

.search-page .captionsearch {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 0 0 clamp(6rem, 16vh, 10rem);
}

.search-page .front-logo-wrap {
    padding-bottom: 0.25rem;
}

.search-panel {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.search-panel__back {
    display: inline-flex;
    flex-shrink: 0;
    text-decoration: none !important;
}

.search-panel__back .it-btn__label {
    min-width: 72px;
    padding: 1.15rem 0.85rem;
    min-height: 58px;
    font-size: clamp(0.78rem, 1.8vw, 0.88rem);
    transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.search-panel__back:active .it-btn__label,
.search-panel__back.is-pressed .it-btn__label {
    transform: translateY(5px) scale(0.97);
    opacity: 0.78;
    box-shadow: 0 0 10px var(--it-accent-soft);
}

.search-panel__title-wrap {
    margin-bottom: 1.75rem;
}

.search-panel__heading {
    margin: 0;
    font-family: "Prompt-Bold", "Consolas", monospace;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--it-accent);
    text-shadow: 0 0 10px var(--it-accent-glow);
}

.search-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
}

.search-form__input-wrap {
    position: relative;
    width: 100%;
}

.search-form__input-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    color: var(--it-accent);
    filter: drop-shadow(0 0 5px var(--it-accent-glow));
    pointer-events: none;
}

.search-form__input {
    width: 100%;
    padding: 1.3rem 1.25rem 1.3rem 3.75rem;
    font-family: "Prompt-Regular", "SukhumvitSet", sans-serif;
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    color: #fff;
    text-align: left;
    background: rgba(2, 8, 22, 0.75);
    border: 1px solid var(--it-accent);
    border-radius: 999px;
    box-shadow: var(--it-neon-glow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.search-form__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.search-form__input:focus {
    outline: none;
    border-color: var(--it-accent);
    box-shadow: var(--it-neon-glow-strong);
}

.search-form__actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 520px;
}

.search-form__submit {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--it-accent);
    cursor: pointer;
    padding: 1.15rem 2rem;
    min-height: 58px;
    font-size: clamp(1.05rem, 2.8vw, 1.25rem);
    letter-spacing: 0.16em;
    box-shadow: var(--it-neon-glow);
    text-shadow: 0 0 8px var(--it-accent-glow);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.search-form__submit:hover {
    border-color: var(--it-accent);
    box-shadow: var(--it-neon-glow-strong);
}

.search-panel__back:hover .it-btn__label {
    border-color: var(--it-accent);
    box-shadow: var(--it-neon-glow-strong);
}

.search-form__submit:active,
.search-form__submit.is-pressed {
    transform: translateY(5px) scale(0.97);
    opacity: 0.78;
    box-shadow: 0 0 10px var(--it-accent-soft);
}

@media (max-width: 640px) {
    .search-panel {
        padding: 0 1rem;
    }

    .search-page .captionsearch {
        padding-bottom: clamp(4.5rem, 12vh, 7rem);
    }

    .search-panel__heading {
        letter-spacing: 0.16em;
    }

    .search-form__input {
        padding: 1.05rem 1rem 1.05rem 3.3rem;
        font-size: 1rem;
    }

    .search-form__input-icon {
        width: 24px;
        height: 24px;
        margin-top: -12px;
        left: 1rem;
    }

    .search-form__actions {
        max-width: 100%;
        gap: 0.65rem;
    }

    .search-panel__back .it-btn__label {
        min-width: 64px;
        min-height: 52px;
        padding: 1rem 0.7rem;
    }

    .search-form__submit {
        min-height: 52px;
        padding: 1rem 1.4rem;
        font-size: 1rem;
    }
}

/* Check-in success page */
.checkin-success-page {
    --it-accent: #66f0ff;
    --it-accent-soft: rgba(102, 240, 255, 0.36);
    --it-accent-glow: rgba(102, 240, 255, 0.55);
    --it-neon-glow:
        0 0 1px 0 var(--it-accent),
        0 0 5px 0 var(--it-accent-glow),
        0 0 13px 0 var(--it-accent-soft),
        inset 0 0 1px 0.15px var(--it-accent),
        inset 0 0 10px 0 var(--it-accent-glow),
        inset 0 0 16px 0 var(--it-accent-soft);
    --it-neon-glow-strong:
        0 0 2px 0 var(--it-accent),
        0 0 7px 0 var(--it-accent-glow),
        0 0 20px 0 var(--it-accent-soft),
        inset 0 0 2px 0.25px var(--it-accent),
        inset 0 0 12px 0 var(--it-accent-glow),
        inset 0 0 22px 0 var(--it-accent-soft);
}

.checkin-success-page .captionsearch {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    padding: 0.5rem 1.5rem 2.5rem;
}

.checkin-success-page .front-logo-wrap {
    padding-bottom: 0.25rem;
}

.checkin-success-form {
    width: 100%;
}

.checkin-success-panel {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2rem;
    text-align: center;
}

.checkin-success-panel__status {
    position: relative;
    width: 136px;
    height: 136px;
    margin: 0 auto 1.25rem;
}

.checkin-success-panel__status-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--it-accent);
    box-shadow: var(--it-neon-glow);
    animation: it-spin 8s linear infinite;
}

.checkin-success-panel__status-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px dashed var(--it-accent-soft);
}

.checkin-success-panel__status-icon {
    position: absolute;
    inset: 0;
    width: 76px;
    height: 76px;
    margin: auto;
    color: var(--it-accent);
    filter: drop-shadow(0 0 6px var(--it-accent-glow));
}

.checkin-success-panel__badge {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.35rem 1rem;
    font-family: "Consolas", "Prompt-Bold", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--it-accent);
    background: rgba(4, 14, 34, 0.72);
    border: 1px solid var(--it-accent);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    box-shadow: var(--it-neon-glow);
}

.checkin-success-panel__welcome {
    margin: 0 0 1rem;
    font-family: "Prompt-Bold", "Consolas", sans-serif;
    font-size: clamp(2.2rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow:
        0 0 10px var(--it-accent-glow),
        0 2px 0 rgba(0, 0, 0, 0.35);
}

.checkin-success-panel__name {
    margin: 0 0 0.75rem;
    font-family: "Prompt-Bold", sans-serif;
    font-size: clamp(2.25rem, 6.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--it-accent);
    text-shadow: 0 0 8px var(--it-accent-glow);
    word-break: break-word;
}

.checkin-success-panel__meta {
    margin: 0;
    font-family: "Prompt-Regular", sans-serif;
    font-size: clamp(1.5rem, 4.2vw, 2.25rem);
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}

.checkin-success-panel__meta + .checkin-success-panel__meta {
    margin-top: 0.45rem;
}

.checkin-success-panel__meta--org {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1.35rem, 3.8vw, 2rem);
}

.checkin-success-panel__actions {
    margin-top: 2.25rem;
    display: flex;
    justify-content: center;
}

.checkin-success-panel__done {
    display: inline-flex;
    text-decoration: none !important;
}

.checkin-success-panel__done .it-btn__label {
    min-width: 260px;
    padding: 1.25rem 3.5rem;
    min-height: 68px;
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    letter-spacing: 0.16em;
}

.checkin-success-panel__done:hover .it-btn__label {
    border-color: var(--it-accent);
    box-shadow: var(--it-neon-glow-strong);
}

.checkin-success-panel__done:active .it-btn__label,
.checkin-success-panel__done.is-pressed .it-btn__label {
    transform: translateY(5px) scale(0.97);
    opacity: 0.78;
    box-shadow: 0 0 10px var(--it-accent-soft);
}

@media (max-width: 640px) {
    .checkin-success-page .captionsearch {
        padding: 0.25rem 1rem 2rem;
    }

    .checkin-success-panel {
        padding: 1rem 0.5rem 1.5rem;
    }

    .checkin-success-panel__status {
        width: 112px;
        height: 112px;
        margin-bottom: 1rem;
    }

    .checkin-success-panel__status-icon {
        width: 62px;
        height: 62px;
    }

    .checkin-success-panel__done .it-btn__label {
        min-width: 210px;
        min-height: 60px;
        padding: 1.1rem 2.75rem;
        font-size: 1.05rem;
    }
}

/* Check-in scan page */
.checkin-scan-page {
    --it-accent: #66f0ff;
    --it-accent-soft: rgba(102, 240, 255, 0.36);
    --it-accent-glow: rgba(102, 240, 255, 0.55);
    --it-neon-glow:
        0 0 1px 0 var(--it-accent),
        0 0 5px 0 var(--it-accent-glow),
        0 0 13px 0 var(--it-accent-soft),
        inset 0 0 1px 0.15px var(--it-accent),
        inset 0 0 10px 0 var(--it-accent-glow),
        inset 0 0 16px 0 var(--it-accent-soft);
    --it-neon-glow-strong:
        0 0 2px 0 var(--it-accent),
        0 0 7px 0 var(--it-accent-glow),
        0 0 20px 0 var(--it-accent-soft),
        inset 0 0 2px 0.25px var(--it-accent),
        inset 0 0 12px 0 var(--it-accent-glow),
        inset 0 0 22px 0 var(--it-accent-soft);
    overflow-x: hidden;
}

html:has(.checkin-scan-page) {
    overflow-x: hidden;
}

body:has(.checkin-scan-page) {
    overflow-x: hidden;
    max-width: 100%;
}

.checkin-scan-page .captionsearch {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0 0 2rem;
}

.checkin-scan-page .front-logo-wrap {
    padding: 0.75rem 1rem 0.25rem;
}

.checkin-scan-panel {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.checkin-scan-panel__heading {
    margin: 0 0 0.65rem;
    font-family: "Prompt-Bold", "Consolas", monospace;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--it-accent);
    text-shadow: 0 0 10px var(--it-accent-glow);
}

.checkin-scan-panel__subtitle {
    margin: 0 0 1.35rem;
    font-family: "Prompt-Regular", sans-serif;
    font-size: clamp(0.92rem, 2.1vw, 1.05rem);
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.72);
}

.checkin-scan-panel__error {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    font-family: "Prompt-Bold", sans-serif;
    font-size: 0.88rem;
    color: #ffb4b4;
    background: rgba(36, 8, 12, 0.62);
    border: 1px solid rgba(255, 96, 96, 0.45);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.18);
}

.checkin-scan-panel__viewport {
    position: relative;
    width: min(50%, 420px);
    margin: 0 auto 1.5rem;
    padding: 0.6rem;
    background: rgba(2, 8, 22, 0.78);
    border: 1px solid var(--it-accent);
    clip-path: polygon(
        12px 0, calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px), 0 12px
    );
    box-shadow: var(--it-neon-glow);
}

.checkin-scan-panel__guide {
    pointer-events: none;
    position: absolute;
    inset: 14%;
    z-index: 2;
    border: 2px solid rgba(102, 240, 255, 0.55);
    box-shadow:
        inset 0 0 12px rgba(102, 240, 255, 0.2),
        0 0 10px rgba(102, 240, 255, 0.15);
}

.checkin-scan-panel__guide::before,
.checkin-scan-panel__guide::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--it-accent);
    border-style: solid;
}

.checkin-scan-panel__guide::before {
    top: -2px;
    left: -2px;
    border-width: 3px 0 0 3px;
}

.checkin-scan-panel__guide::after {
    right: -2px;
    bottom: -2px;
    border-width: 0 3px 3px 0;
}

.checkin-scan-panel__viewport::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--it-accent-soft);
    clip-path: polygon(
        10px 0, calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px), 0 10px
    );
    pointer-events: none;
    z-index: 1;
}

.checkin-scan-page .wrap-qrcode-scanner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.checkin-scan-page .checkin-scan-panel__camera {
    position: relative;
    width: 100%;
    line-height: 0;
}

.checkin-scan-page #preview {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    background: rgba(2, 8, 22, 0.55);
}

.checkin-scan-page #overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.checkin-scan-page #loadingMessage {
    margin: 0;
    padding: 2.25rem 1rem;
    text-align: center;
    font-family: "Prompt-Regular", sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--it-accent);
    background: rgba(2, 8, 22, 0.55);
    text-shadow: 0 0 8px var(--it-accent-glow);
}

.checkin-scan-page #loadingMessage.is-hidden {
    display: none;
}

.checkin-scan-page #output {
    margin: 0;
    padding: 0;
    background: transparent;
}

.checkin-scan-panel__actions {
    display: flex;
    justify-content: center;
}

.checkin-scan-panel__back {
    display: inline-flex;
    text-decoration: none !important;
}

.checkin-scan-panel__back .it-btn__label {
    min-width: 120px;
    padding: 1.15rem 2rem;
    min-height: 58px;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    letter-spacing: 0.16em;
    transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.checkin-scan-panel__back:hover .it-btn__label {
    border-color: var(--it-accent);
    box-shadow: var(--it-neon-glow-strong);
}

.checkin-scan-panel__back:active .it-btn__label,
.checkin-scan-panel__back.is-pressed .it-btn__label {
    transform: translateY(5px) scale(0.97);
    opacity: 0.78;
    box-shadow: 0 0 10px var(--it-accent-soft);
}

@media (max-width: 640px) {
    .checkin-scan-page .captionsearch {
        margin-top: 0.35rem;
        padding-bottom: 1.5rem;
    }

    .checkin-scan-panel {
        padding: 0 1rem;
    }

    .checkin-scan-panel__viewport {
        width: min(65%, 380px);
    }

    .checkin-scan-panel__guide {
        inset: 12%;
    }

    .checkin-scan-panel__back .it-btn__label {
        min-width: 100px;
        min-height: 52px;
        padding: 1rem 1.5rem;
    }
}