<style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Montserrat:ital,wght@0,700;0,900;1,900&display=swap');

        :root {
            --glass: rgba(10, 15, 30, 0.6);
            --glass-border: rgba(255, 255, 255, 0.08);
            --accent-cyan: #00d2ff;
            --accent-purple: #9d50bb;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #02040a;
            color: #e2e8f0;
            background-image:
                radial-gradient(circle at 15% 15%, rgba(0, 210, 255, 0.08) 0%, transparent 35%),
                radial-gradient(circle at 85% 85%, rgba(157, 80, 187, 0.08) 0%, transparent 35%);
            background-attachment: fixed;
            overflow-x: hidden;
        }

        .title-font {
            font-family: 'Montserrat', sans-serif;
        }

        #form-response {
            transition: all 0.3s ease-in-out;
        }

        /* Animații de intrare */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-view {
            animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Glassmorphism avansat */
        .glass-panel {
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }

        /* Server Cards cu animație de Glow */
        .server-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        .server-card:hover {
            background: rgba(255, 255, 255, 0.07);
            border-color: var(--accent-cyan);
            transform: scale(1.02) translateY(-5px);
            box-shadow: 0 10px 30px -10px rgba(0, 210, 255, 0.3);
        }

        /* Indicator de Rank */
        .rank-badge {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Buton stilizat */
        .btn-primary {
            background: linear-gradient(90deg, #00d2ff, #3a7bd5);
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            filter: brightness(1.1);
            box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
            transform: translateY(-2px);
        }

        /* Imagine Hartă cu overlay */
        .map-preview {
            width: 130px;
            height: 80px;
            background-color: #1a1a1a;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .map-overlay {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            border-radius: 16px;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #02040a;
        }

        ::-webkit-scrollbar-thumb {
            background: #1e293b;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-cyan);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
                filter: blur(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        @keyframes pulse-glow {
            0% {
                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
            }

            100% {
                transform: translateY(0px) rotate(0deg);
            }
        }

        /* CLASE NOI PE CARE LE VOM FOLOSI ÎN JS */
        .stagger-item {
            opacity: 0;
            animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .floating-blob {
            position: fixed;
            z-index: -1;
            filter: blur(80px);
            opacity: 0.12;
            animation: float 10s ease-in-out infinite;
        }

        .online-pulse {
            animation: pulse-glow 2s infinite;
            border: none !important;
        }

        /* Micro-interacțiuni butoane */
        .btn-primary:active {
            transform: scale(0.95);
        }

        .server-card:active {
            transform: scale(0.99);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
                filter: blur(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        @keyframes pulse-glow {
            0% {
                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
            }

            100% {
                transform: translateY(0px) rotate(0deg);
            }
        }

        /* CLASE NOI PE CARE LE VOM FOLOSI ÎN JS */
        .stagger-item {
            opacity: 0;
            animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .floating-blob {
            position: fixed;
            z-index: -1;
            filter: blur(80px);
            opacity: 0.12;
            animation: float 10s ease-in-out infinite;
        }

        .online-pulse {
            animation: pulse-glow 2s infinite;
            border: none !important;
        }

        /* Micro-interacțiuni butoane */
        .btn-primary:active {
            transform: scale(0.95);
        }

        .server-card:active {
            transform: scale(0.99);
        }

        select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20
20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 1rem center;
                    background-repeat: no-repeat;
                    background-size: 1.5em 1.5em;
                    padding-right: 2.5rem;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
            }

            /* Efect de focus pentru input-uri */
            .filter-input {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.05);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .filter-input:focus {
                background: rgba(255, 255, 255, 0.07);
                border-color: var(--accent-cyan);
                box-shadow: 0 0 15px rgba(0, 210, 255, 0.1);
            }

            @keyframes boost-glow-purple {
                0% {
                    box-shadow: 0 0 5px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.3);
                }

                50% {
                    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5); border-color: rgba(168, 85, 247, 0.8);
                }

                100% {
                    box-shadow: 0 0 5px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.3);
                }
            }

            @keyframes shine-purple {
                from {
                    left: -100%;
                }

                to {
                    left: 100%;
                }
            }

            .boost-card-purple {
                animation: boost-glow-purple 3s infinite ease-in-out;
                background: linear-gradient(90deg, rgba(168, 85, 247, 0.08) 0%, rgba(0, 0, 0, 0) 50%) !important;
                border-color: rgba(168, 85, 247, 0.4) !important;
            }

            .boost-badge-purple {
                background: linear-gradient(90deg, #a855f7, #c084fc);
                color: white;
                position: relative;
                overflow: hidden;
                box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
            }

            .boost-badge-purple::after {
                content: '';
                position: absolute;
                top: 0; left: -100%;
                width: 50%; height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                animation: shine-purple 2s infinite;
            }

            @keyframes pulse-glow-red {
                0% {
                    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
                }

                70% {
                    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
                }

                100% {
                    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
                }
            }

            .offline-pulse {
                animation: pulse-glow-red 2s infinite;
            }

            #dropdown-menu {
                transition: all 0.3s ease-in-out;
            }

    </style>