/* =========================================================
           ALAPOK
        ========================================================= */

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


        :root {

            --bg:
                #07080d;

            --card:
                rgba(17, 18, 27, 0.78);

            --card-border:
                rgba(255, 255, 255, 0.08);

            --text:
                #f5f7ff;

            --muted:
                #8d92a5;

            --discord:
                #5865f2;

            --roblox:
                #e63946;

            --success:
                #43d17b;

            --danger:
                #ff4d5a;

        }


        body {

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            color:
                var(--text);

            background:

                radial-gradient(
                    circle at 20% 20%,
                    rgba(
                        88,
                        101,
                        242,
                        0.12
                    ),
                    transparent 30%
                ),

                radial-gradient(
                    circle at 80% 80%,
                    rgba(
                        230,
                        57,
                        70,
                        0.08
                    ),
                    transparent 30%
                ),

                var(--bg);

            overflow-x:
                hidden;

        }


        /* =========================================================
           HÁTTÉR
        ========================================================= */

        .background {

            position:
                fixed;

            inset:
                0;

            pointer-events:
                none;

            overflow:
                hidden;

            z-index:
                -1;

        }


        .orb {

            position:
                absolute;

            width:
                400px;

            height:
                400px;

            border-radius:
                50%;

            filter:
                blur(120px);

            opacity:
                0.12;

            animation:
                float
                12s
                ease-in-out
                infinite;

        }


        .orb.one {

            background:
                var(--discord);

            top:
                -200px;

            left:
                -150px;

        }


        .orb.two {

            background:
                var(--roblox);

            bottom:
                -200px;

            right:
                -150px;

            animation-delay:
                -5s;

        }


        @keyframes float {

            0%,
            100% {

                transform:
                    translate(
                        0,
                        0
                    );

            }

            50% {

                transform:
                    translate(
                        40px,
                        -30px
                    );

            }

        }


        /* =========================================================
           FŐ KONTÉNER
        ========================================================= */

        .container {

            width:
                min(
                    900px,
                    calc(
                        100% - 32px
                    )
                );

            padding:
                40px 0;

        }


        /* =========================================================
           FEJLÉC
        ========================================================= */

        .header {

            text-align:
                center;

            margin-bottom:
                28px;

            animation:
                fadeUp
                0.7s
                ease
                forwards;

        }


        .badge {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            padding:
                7px 12px;

            margin-bottom:
                18px;

            border:
                1px solid
                rgba(
                    255,
                    255,
                    255,
                    0.08
                );

            border-radius:
                999px;

            color:
                #aeb4c9;

            background:
                rgba(
                    255,
                    255,
                    255,
                    0.035
                );

            font-size:
                12px;

            font-weight:
                600;

            letter-spacing:
                0.08em;

            text-transform:
                uppercase;

        }


        .badge-dot {

            width:
                7px;

            height:
                7px;

            border-radius:
                50%;

            background:
                var(--success);

            box-shadow:
                0 0 12px
                rgba(
                    67,
                    209,
                    123,
                    0.7
                );

        }


        h1 {

            font-size:
                clamp(
                    32px,
                    5vw,
                    50px
                );

            letter-spacing:
                -0.04em;

            margin-bottom:
                12px;

        }


        .subtitle {

            color:
                var(--muted);

            max-width:
                560px;

            margin:
                auto;

            line-height:
                1.6;

            font-size:
                15px;

        }


        /* =========================================================
           FŐ KÁRTYA
        ========================================================= */

        .verification-card {

            position:
                relative;

            padding:
                20px;

            border:
                1px solid
                var(--card-border);

            border-radius:
                26px;

            background:

                linear-gradient(
                    145deg,
                    rgba(
                        255,
                        255,
                        255,
                        0.055
                    ),
                    rgba(
                        255,
                        255,
                        255,
                        0.018
                    )
                ),

                var(--card);

            backdrop-filter:
                blur(30px);

            -webkit-backdrop-filter:
                blur(30px);

            box-shadow:

                0 30px 80px
                rgba(
                    0,
                    0,
                    0,
                    0.45
                ),

                inset
                0 1px 0
                rgba(
                    255,
                    255,
                    255,
                    0.04
                );

            animation:
                fadeUp
                0.8s
                0.1s
                ease
                both;

            /*
                Fontos:
                A belső magasság animációját
                JavaScript kezeli.
            */

            overflow:
                hidden;

        }


        /* =========================================================
           PROFILOK
        ========================================================= */

        .profiles {

            display:
                grid;

            grid-template-columns:

                minmax(
                    0,
                    1fr
                )

                60px

                minmax(
                    0,
                    1fr
                );

            align-items:
                center;

            gap:
                14px;

        }


        /* =========================================================
           PROFILKÁRTYA
        ========================================================= */

        .profile-box {

            position:
                relative;

            height:
                auto;

            min-height:
                0;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                flex-start;

            padding:
                22px;

            border-radius:
                20px;

            border:
                1px solid
                rgba(
                    255,
                    255,
                    255,
                    0.07
                );

            background:
                rgba(
                    255,
                    255,
                    255,
                    0.025
                );

            /*
                A magasságot nem fixáljuk.
                A JS animálja a wrapper
                magasságát állapotváltáskor.
            */

            transition:

                border-color
                0.35s ease,

                transform
                0.35s ease,

                box-shadow
                0.35s ease;

        }


        .profile-box:hover {

            transform:
                translateY(-3px);

            border-color:
                rgba(
                    255,
                    255,
                    255,
                    0.13
                );

        }


        .profile-box.discord:hover {

            box-shadow:

                0 20px 60px
                rgba(
                    88,
                    101,
                    242,
                    0.12
                );

        }


        .profile-box.roblox:hover {

            box-shadow:

                0 20px 60px
                rgba(
                    230,
                    57,
                    70,
                    0.10
                );

        }


        /* =========================================================
           PLATFORM FEJLÉC
        ========================================================= */

        .platform {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;

            color:
                #b6bbca;

            font-size:
                11px;

            font-weight:
                700;

            text-transform:
                uppercase;

            letter-spacing:
                0.1em;

            margin-bottom:
                18px;

        }


        .platform-icon {

            width:
                32px;

            height:
                32px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                9px;

            font-size:
                14px;

            font-weight:
                800;

            flex-shrink:
                0;

        }


        .discord
        .platform-icon {

            background:
                rgba(
                    88,
                    101,
                    242,
                    0.15
                );

            color:
                #7c87ff;

        }


        .roblox
        .platform-icon {

            background:
                rgba(
                    230,
                    57,
                    70,
                    0.12
                );

            color:
                #ff6873;

        }


        /* =========================================================
           X / LEVÁLASZTÁS

           Most a platform név mellett van.
        ========================================================= */

        .remove-btn {

            width:
                25px;

            height:
                25px;

            display:
                none;

            align-items:
                center;

            justify-content:
                center;

            margin-left:
                2px;

            border:
                1px solid
                rgba(
                    255,
                    77,
                    90,
                    0.25
                );

            border-radius:
                7px;

            background:
                rgba(
                    255,
                    77,
                    90,
                    0.07
                );

            color:
                var(--danger);

            font-size:
                16px;

            font-weight:
                500;

            line-height:
                1;

            cursor:
                pointer;

            transition:

                background
                0.2s ease,

                border-color
                0.2s ease,

                color
                0.2s ease,

                transform
                0.2s ease,

                box-shadow
                0.2s ease;

        }


        /*
            Csak hitelesített állapotban látható.
        */

        .profile-box.connected
        .remove-btn {

            display:
                flex;

        }


        .remove-btn:hover {

            background:
                rgba(
                    255,
                    77,
                    90,
                    0.18
                );

            border-color:
                rgba(
                    255,
                    77,
                    90,
                    0.5
                );

            color:
                #ff7b84;

            transform:
                rotate(90deg)
                scale(1.05);

            box-shadow:

                0 0 18px
                rgba(
                    255,
                    77,
                    90,
                    0.15
                );

        }


        .remove-btn:active {

            transform:
                rotate(90deg)
                scale(0.92);

        }


        /* =========================================================
           ISMERETLEN ÁLLAPOT
        ========================================================= */

        .unknown-state {

            text-align:
                center;

            padding:
                4px 0 2px;

            transition:

                opacity
                0.3s ease,

                transform
                0.3s ease;

        }


        .avatar-wrapper {

            width:
                74px;

            height:
                74px;

            margin:
                0 auto 14px;

            border-radius:
                50%;

            overflow:
                hidden;

            position:
                relative;

        }


        .avatar-placeholder {

            width:
                100%;

            height:
                100%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-size:
                30px;

            background:

                linear-gradient(
                    135deg,
                    rgba(
                        255,
                        255,
                        255,
                        0.13
                    ),
                    rgba(
                        255,
                        255,
                        255,
                        0.035
                    )
                );

            filter:
                blur(7px);

            transform:
                scale(1.15);

            color:
                rgba(
                    255,
                    255,
                    255,
                    0.5
                );

        }


        .unknown-state h2 {

            font-size:
                15px;

            margin-bottom:
                5px;

        }


        .unknown-state p {

            color:
                var(--muted);

            font-size:
                12px;

            margin-bottom:
                16px;

        }


        /* =========================================================
           BEJELENTKEZÉS GOMB
        ========================================================= */

        .login-btn {

            width:
                100%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                10px;

            padding:
                11px 16px;

            border:
                none;

            border-radius:
                10px;

            color:
                white;

            font-size:
                12px;

            font-weight:
                700;

            cursor:
                pointer;

            transition:

                transform
                0.25s ease,

                box-shadow
                0.25s ease,

                filter
                0.25s ease;

        }


        .login-btn:hover {

            transform:
                translateY(-2px);

            filter:
                brightness(1.08);

        }


        .login-btn:active {

            transform:
                scale(0.97);

        }


        .discord-btn {

            background:
                var(--discord);

            box-shadow:

                0 8px 25px
                rgba(
                    88,
                    101,
                    242,
                    0.2
                );

        }


        .discord-btn:hover {

            box-shadow:

                0 12px 35px
                rgba(
                    88,
                    101,
                    242,
                    0.35
                );

        }


        .roblox-btn {

            background:
                var(--roblox);

            box-shadow:

                0 8px 25px
                rgba(
                    230,
                    57,
                    70,
                    0.18
                );

        }


        .roblox-btn:hover {

            box-shadow:

                0 12px 35px
                rgba(
                    230,
                    57,
                    70,
                    0.3
                );

        }


        /* =========================================================
           HITELESÍTETT ÁLLAPOT
        ========================================================= */

        .connected-state {

            display:
                none;

        }


        .profile-top {

            display:
                flex;

            align-items:
                center;

            gap:
                14px;

            margin:
                0;

        }


        .real-avatar {

            width:
                62px;

            height:
                62px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            font-size:
                21px;

            font-weight:
                800;

            flex-shrink:
                0;

        }


        .discord
        .real-avatar {

            background:

                linear-gradient(
                    135deg,
                    #5865f2,
                    #7983f5
                );

        }


        .roblox
        .real-avatar {

            background:

                linear-gradient(
                    135deg,
                    #e63946,
                    #ff6570
                );

        }


        /* =========================================================
           FELHASZNÁLÓI ADATOK
        ========================================================= */

        .user-info {

            min-width:
                0;

            display:
                flex;

            flex-direction:
                column;

            align-items:
                flex-start;

            gap:
                3px;

        }


        .display-name {

            position:
                relative;

            display:
                inline-block;

            color:
                #f5f7ff;

            font-size:
                17px;

            line-height:
                1.2;

            font-weight:
                700;

            cursor:
                help;

            max-width:
                180px;

            overflow:
                hidden;

            text-overflow:
                ellipsis;

            white-space:
                nowrap;

        }


        .username {

            position:
                relative;

            display:
                inline-block;

            color:
                var(--muted);

            font-size:
                12px;

            line-height:
                1.2;

            cursor:
                help;

            max-width:
                180px;

            overflow:
                hidden;

            text-overflow:
                ellipsis;

            white-space:
                nowrap;

        }


        .user-id {

            position:
                relative;

            display:
                inline-block;

            color:
                #626879;

            font-family:
                monospace;

            font-size:
                9px;

            line-height:
                1.2;

            cursor:
                help;

            margin-top:
                3px;

            max-width:
                180px;

            overflow:
                hidden;

            text-overflow:
                ellipsis;

            white-space:
                nowrap;

        }


        /* =========================================================
           TOOLTIP
        ========================================================= */

        [data-tooltip] {

            position:
                relative;

        }


        [data-tooltip]::after {

            content:
                attr(data-tooltip);

            position:
                absolute;

            left:
                50%;

            bottom:
                calc(
                    100% + 9px
                );

            transform:

                translateX(-50%)
                translateY(4px);

            padding:
                6px 9px;

            border-radius:
                7px;

            background:
                #191b25;

            border:
                1px solid
                rgba(
                    255,
                    255,
                    255,
                    0.08
                );

            color:
                #e8eaf2;

            font-family:

                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            font-size:
                10px;

            font-weight:
                500;

            white-space:
                nowrap;

            opacity:
                0;

            pointer-events:
                none;

            transition:

                opacity
                0.2s ease,

                transform
                0.2s ease;

            box-shadow:

                0 8px 25px
                rgba(
                    0,
                    0,
                    0,
                    0.3
                );

            z-index:
                20;

        }


        [data-tooltip]::before {

            content:
                "";

            position:
                absolute;

            left:
                50%;

            bottom:
                calc(
                    100% + 3px
                );

            transform:
                translateX(-50%);

            border:
                5px solid transparent;

            border-top-color:
                #191b25;

            opacity:
                0;

            pointer-events:
                none;

            transition:
                opacity
                0.2s ease;

            z-index:
                20;

        }


        [data-tooltip]:hover::after {

            opacity:
                1;

            transform:

                translateX(-50%)
                translateY(0);

        }


        [data-tooltip]:hover::before {

            opacity:
                1;

        }


        /* =========================================================
           KAPCSOLATJELZŐ
        ========================================================= */

        .connector {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

        }


        .connector-circle {

            width:
                46px;

            height:
                46px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            border:
                1px solid
                rgba(
                    255,
                    255,
                    255,
                    0.08
                );

            background:
                rgba(
                    255,
                    255,
                    255,
                    0.035
                );

            color:
                #646a7c;

            font-size:
                17px;

            transition:

                color
                0.4s ease,

                border-color
                0.4s ease,

                background
                0.4s ease,

                box-shadow
                0.4s ease;

        }


        .connector.active
        .connector-circle {

            color:
                var(--success);

            border-color:
                rgba(
                    67,
                    209,
                    123,
                    0.35
                );

            background:
                rgba(
                    67,
                    209,
                    123,
                    0.08
                );

            box-shadow:

                0 0 0 6px
                rgba(
                    67,
                    209,
                    123,
                    0.04
                ),

                0 0 30px
                rgba(
                    67,
                    209,
                    123,
                    0.15
                );

            animation:
                pulse
                2s
                infinite;

        }


        @keyframes pulse {

            0%,
            100% {

                box-shadow:

                    0 0 0 6px
                    rgba(
                        67,
                        209,
                        123,
                        0.04
                    ),

                    0 0 30px
                    rgba(
                        67,
                        209,
                        123,
                        0.15
                    );

            }


            50% {

                box-shadow:

                    0 0 0 12px
                    rgba(
                        67,
                        209,
                        123,
                        0.01
                    ),

                    0 0 45px
                    rgba(
                        67,
                        209,
                        123,
                        0.25
                    );

            }

        }


        /* =========================================================
           PRIVACY POLICY
        ========================================================= */

        .footer {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            margin-top:
                16px;

        }


        .privacy-link {

            color:
                #666b7b;

            font-size:
                11px;

            text-decoration:
                none;

            transition:
                color
                0.2s ease;

        }


        .privacy-link:hover {

            color:
                #aeb4c9;

            text-decoration:
                underline;

        }


        /* =========================================================
           LOADING
        ========================================================= */

        .loading {

            pointer-events:
                none;

            opacity:
                0.7;

        }


        .loading::after {

            content:
                "";

            width:
                13px;

            height:
                13px;

            border:
                2px solid
                rgba(
                    255,
                    255,
                    255,
                    0.25
                );

            border-top-color:
                white;

            border-radius:
                50%;

            animation:
                spin
                0.7s
                linear
                infinite;

        }


        @keyframes spin {

            to {

                transform:
                    rotate(360deg);

            }

        }


        /* =========================================================
           ANIMÁCIÓK
        ========================================================= */

        @keyframes fadeUp {

            from {

                opacity:
                    0;

                transform:
                    translateY(20px);

            }


            to {

                opacity:
                    1;

                transform:
                    translateY(0);

            }

        }


        @keyframes profileReveal {

            from {

                opacity:
                    0;

                transform:

                    translateY(8px)
                    scale(0.98);

            }


            to {

                opacity:
                    1;

                transform:

                    translateY(0)
                    scale(1);

            }

        }


        .hidden {

            display:
                none !important;

        }


        /* =========================================================
           MOBIL
        ========================================================= */

        @media (
            max-width: 720px
        ) {


            body {

                align-items:
                    flex-start;

            }


            .container {

                padding:
                    30px 0;

            }


            .verification-card {

                padding:
                    14px;

                border-radius:
                    22px;

            }


            .profiles {

                grid-template-columns:
                    1fr;

                gap:
                    12px;

            }


            .connector {

                transform:
                    rotate(90deg);

                margin:
                    -2px 0;

            }


            .profile-box {

                padding:
                    20px;

            }


            .header {

                margin-bottom:
                    22px;

            }


            h1 {

                font-size:
                    34px;

            }


            .profile-top {

                gap:
                    12px;

            }


            .real-avatar {

                width:
                    58px;

                height:
                    58px;

            }

        }