@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

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

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0a0a0f;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* ===== ANIMATED GRID BACKGROUND ===== */
        .cyber-grid {
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 0, 60, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 0, 60, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: gridMove 20s linear infinite;
            z-index: 0;
        }

        @keyframes gridMove {
            0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
            100% { transform: perspective(500px) rotateX(60deg) translateY(60px); }
        }

        /* ===== FLOATING PARTICLES ===== */
        .particles {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #ff003c;
            border-radius: 50%;
            box-shadow: 0 0 6px #ff003c, 0 0 12px #ff003c88;
            animation: floatUp linear infinite;
            opacity: 0;
        }

        @keyframes floatUp {
            0% { transform: translateY(100vh) scale(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-10vh) scale(1); opacity: 0; }
        }

        /* ===== SCAN LINE ===== */
        .scanline {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, #ff003c, #ff003c, transparent);
            box-shadow: 0 0 20px #ff003c, 0 0 60px #ff003c55;
            animation: scanDown 4s ease-in-out infinite;
            z-index: 1;
            opacity: 0.6;
        }

        @keyframes scanDown {
            0% { top: -4px; }
            100% { top: 100%; }
        }

        /* ===== RADIAL GLOW ===== */
        .radial-glow {
            position: fixed;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 0, 60, 0.08) 0%, transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
            animation: pulseGlow 4s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
            50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
        }

        /* ===== MAIN CARD ===== */
        .main-card {
            position: relative;
            z-index: 10;
            width: 520px;
            max-width: 95vw;
            padding: 50px 40px;
            background: rgba(12, 12, 20, 0.85);
            border: 1px solid rgba(255, 0, 60, 0.15);
            border-radius: 20px;
            backdrop-filter: blur(30px);
            text-align: center;
            animation: cardAppear 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
            transform: translateY(40px) scale(0.95);
        }

        .main-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 20px;
            padding: 1px;
            background: linear-gradient(135deg, #ff003c55, transparent 40%, transparent 60%, #ff003c33);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: borderPulse 3s ease-in-out infinite;
        }

        @keyframes borderPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes cardAppear {
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ===== LOCK ICON ===== */
        .lock-container {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 30px;
        }

        .lock-ring {
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            border-top-color: #ff003c;
            border-right-color: #ff003c88;
            border-radius: 50%;
            animation: spinRing 3s linear infinite;
        }

        .lock-ring:nth-child(2) {
            inset: 8px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #ff003c66;
            border-left-color: #ff003c44;
            animation: spinRing 2s linear infinite reverse;
        }

        .lock-ring:nth-child(3) {
            inset: 16px;
            border-top-color: #ff003c33;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            animation: spinRing 4s linear infinite;
        }

        @keyframes spinRing {
            to { transform: rotate(360deg); }
        }

        .lock-icon {
            position: absolute;
            inset: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: #ff003c;
            filter: drop-shadow(0 0 10px #ff003c88);
            animation: lockPulse 2s ease-in-out infinite;
        }

        @keyframes lockPulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px #ff003c88); }
            50% { transform: scale(1.08); filter: drop-shadow(0 0 20px #ff003ccc); }
        }

        /* ===== GLITCH TITLE ===== */
        .glitch-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 28px;
            font-weight: 900;
            color: #fff;
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .glitch-title::before,
        .glitch-title::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch-title::before {
            color: #ff003c;
            animation: glitch1 3s infinite;
            clip-path: inset(0 0 60% 0);
        }

        .glitch-title::after {
            color: #00d4ff;
            animation: glitch2 3s infinite;
            clip-path: inset(60% 0 0 0);
        }

        @keyframes glitch1 {
            0%, 90%, 100% { transform: translate(0); }
            92% { transform: translate(-4px, 2px); }
            94% { transform: translate(4px, -1px); }
            96% { transform: translate(-2px, 1px); }
            98% { transform: translate(2px, -2px); }
        }

        @keyframes glitch2 {
            0%, 88%, 100% { transform: translate(0); }
            90% { transform: translate(3px, -1px); }
            93% { transform: translate(-3px, 2px); }
            95% { transform: translate(2px, 1px); }
            97% { transform: translate(-2px, -1px); }
        }

        /* ===== DESCRIPTION ===== */
        .description {
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 28px;
            font-style: italic;
            animation: fadeInUp 1s 0.3s both;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== ADMIN LINK ===== */
        .admin-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #00d4ff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 8px 20px;
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 30px;
            background: rgba(0, 212, 255, 0.05);
            transition: all 0.3s ease;
            margin-bottom: 30px;
            animation: fadeInUp 1s 0.5s both;
        }

        .admin-link:hover {
            background: rgba(0, 212, 255, 0.15);
            border-color: rgba(0, 212, 255, 0.5);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
            transform: translateY(-2px);
            color: #fff;
        }

        .admin-link i {
            font-size: 18px;
            animation: telegramBounce 2s ease-in-out infinite;
        }

        @keyframes telegramBounce {
            0%, 100% { transform: translateY(0) rotate(0); }
            25% { transform: translateY(-3px) rotate(-5deg); }
            75% { transform: translateY(1px) rotate(3deg); }
        }

        /* ===== DIVIDER ===== */
        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 0, 60, 0.3), transparent);
            margin: 0 -10px 28px;
            animation: fadeInUp 1s 0.6s both;
        }

        /* ===== BUTTONS ===== */
        .btn-group {
            display: flex;
            gap: 14px;
            justify-content: center;
            margin-bottom: 28px;
            animation: fadeInUp 1s 0.7s both;
        }

        .btn-cyber {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 36px;
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-decoration: none;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-cyber::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
            transform: translateX(-100%);
            transition: transform 0.6s;
        }

        .btn-cyber:hover::before {
            transform: translateX(100%);
        }

        .btn-login {
            background: linear-gradient(135deg, #ff003c, #cc0030);
            color: #fff;
            box-shadow: 0 4px 20px rgba(255, 0, 60, 0.3);
        }

        .btn-login:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 30px rgba(255, 0, 60, 0.5);
        }

        .btn-login:active {
            transform: translateY(0) scale(0.98);
        }

        .btn-register {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .btn-register:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            color: #fff;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .btn-register:active {
            transform: translateY(0) scale(0.98);
        }

        /* ===== BACK LINK ===== */
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: rgba(255, 255, 255, 0.35);
            text-decoration: none;
            font-size: 13px;
            font-weight: 400;
            transition: all 0.3s ease;
            animation: fadeInUp 1s 0.9s both;
        }

        .back-link:hover {
            color: #ff003c;
            gap: 10px;
        }

        .back-link i {
            transition: transform 0.3s ease;
        }

        .back-link:hover i {
            transform: translateX(-4px);
        }

        /* ===== CORNER DECORATIONS ===== */
        .corner-decor {
            position: absolute;
            width: 20px;
            height: 20px;
            z-index: 2;
        }

        .corner-decor::before,
        .corner-decor::after {
            content: '';
            position: absolute;
            background: #ff003c;
        }

        .corner-tl { top: -1px; left: -1px; }
        .corner-tl::before { top: 0; left: 0; width: 20px; height: 2px; }
        .corner-tl::after { top: 0; left: 0; width: 2px; height: 20px; }

        .corner-tr { top: -1px; right: -1px; }
        .corner-tr::before { top: 0; right: 0; width: 20px; height: 2px; }
        .corner-tr::after { top: 0; right: 0; width: 2px; height: 20px; }

        .corner-bl { bottom: -1px; left: -1px; }
        .corner-bl::before { bottom: 0; left: 0; width: 20px; height: 2px; }
        .corner-bl::after { bottom: 0; left: 0; width: 2px; height: 20px; }

        .corner-br { bottom: -1px; right: -1px; }
        .corner-br::before { bottom: 0; right: 0; width: 20px; height: 2px; }
        .corner-br::after { bottom: 0; right: 0; width: 2px; height: 20px; }

        /* ===== STATUS BAR ===== */
        .status-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 24px;
            animation: fadeInUp 1s 0.2s both;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: #ff003c;
            border-radius: 50%;
            animation: statusBlink 1.5s ease-in-out infinite;
        }

        .status-text {
            font-family: 'Orbitron', sans-serif;
            font-size: 10px;
            color: rgba(255, 0, 60, 0.6);
            letter-spacing: 4px;
            text-transform: uppercase;
        }

        @keyframes statusBlink {
            0%, 100% { opacity: 1; box-shadow: 0 0 8px #ff003c; }
            50% { opacity: 0.3; box-shadow: none; }
        }

        /* ===== MODAL ===== */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-box {
            width: 400px;
            max-width: 90vw;
            padding: 40px;
            background: rgba(15, 15, 25, 0.95);
            border: 1px solid rgba(255, 0, 60, 0.2);
            border-radius: 20px;
            transform: scale(0.8) translateY(30px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
        }

        .modal-overlay.active .modal-box {
            transform: scale(1) translateY(0);
        }

        .modal-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            background: rgba(255, 0, 60, 0.2);
            border-color: rgba(255, 0, 60, 0.4);
            color: #ff003c;
        }

        .input-group {
            margin-bottom: 18px;
        }

        .input-group label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 8px;
        }

        .input-group input {
            width: 100%;
            padding: 14px 16px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            color: #fff;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: all 0.3s ease;
        }

        .input-group input:focus {
            border-color: rgba(255, 0, 60, 0.5);
            background: rgba(255, 0, 60, 0.05);
            box-shadow: 0 0 20px rgba(255, 0, 60, 0.1);
        }

        .input-group input::placeholder {
            color: rgba(255, 255, 255, 0.2);
        }

        .modal-submit {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #ff003c, #cc0030);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 8px;
        }

        .modal-submit:hover {
            box-shadow: 0 6px 25px rgba(255, 0, 60, 0.4);
            transform: translateY(-2px);
        }

        .modal-submit:active {
            transform: translateY(0);
        }

        /* ===== HEX DECORATIONS ===== */
        .hex-bg {
            position: fixed;
            z-index: 0;
            opacity: 0.03;
        }

        .hex-bg svg {
            width: 100%;
            height: 100%;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 480px) {
            .main-card { padding: 35px 25px; }
            .glitch-title { font-size: 20px; }
            .btn-group { flex-direction: column; }
            .btn-cyber { width: 100%; }
        }

  /* Modal title */
        .modal-title {
            text-align: center;
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 4px;
            letter-spacing: -0.3px;
        }

        .modal-subtitle {
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 22px;
            font-weight: 500;
        }

        /* Form alerts */
        .form-alert {
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 16px;
        }

        .form-alert-info {
            background: rgba(56, 189, 248, 0.1);
            border: 1px solid rgba(56, 189, 248, 0.2);
            color: #7dd3fc;
        }

        .form-alert-error {
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.25);
            color: #fca5a5;
            margin-top: 12px;
            margin-bottom: 0;
        }

 
        /* Form divider */
        .form-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 4px;
        }

        .form-divider-line {
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, 0.08);
        }

        .form-divider-text {
            color: rgba(255, 255, 255, 0.25);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Register button */
        .form-register-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 24px;
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(16, 185, 129, 0.08));
            border: 1px solid rgba(74, 222, 128, 0.2);
            color: #86efac;
            border-radius: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            letter-spacing: 0.3px;
        }

        .form-register-btn:hover {
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.25), rgba(16, 185, 129, 0.15));
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(74, 222, 128, 0.2);
        }

        .form-register-btn .submit-arrow {
            transition: transform 0.3s ease;
        }

        .form-register-btn:hover .submit-arrow {
            transform: translateX(4px);
        }

        /* Form */
        .modal-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .modal-form.hidden {
            display: none;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-label {
            font-size: 12px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.3px;
        }

        .input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-icon {
            position: absolute;
            left: 14px;
            font-size: 14px;
            pointer-events: none;
            z-index: 1;
        }

        .form-input {
            width: 100%;
            padding: 13px 16px 13px 42px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 500;
            outline: none;
            transition: all 0.3s ease;
        }

        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.2);
        }

        .form-input:focus {
            border-color: rgba(124, 58, 237, 0.4);
            background: rgba(124, 58, 237, 0.06);
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }

        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .form-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            user-select: none;
        }

        .form-checkbox input {
            display: none;
        }

        .checkmark {
            width: 16px;
            height: 16px;
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .form-checkbox input:checked + .checkmark {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            border-color: #7c3aed;
        }

        .form-checkbox input:checked + .checkmark::after {
            content: 'вњ“';
            font-size: 10px;
            color: #fff;
            font-weight: 700;
        }

        .form-link {
            font-size: 12px;
            color: #a78bfa;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .form-link:hover {
            color: #c4b5fd;
        }

        .form-submit {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 24px;
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 4px;
            letter-spacing: 0.3px;
        }

        .form-submit:hover {
            background: linear-gradient(135deg, #6d28d9, #9333ea);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
        }

        .form-submit:active {
            transform: translateY(0);
        }

        .form-submit-reg {
            background: linear-gradient(135deg, #059669, #10b981);
        }

        .form-submit-reg:hover {
            background: linear-gradient(135deg, #047857, #059669);
            box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
        }

        .submit-arrow {
            transition: transform 0.3s ease;
        }

        .form-submit:hover .submit-arrow {
            transform: translateX(4px);
        }

        .modal-footer {
            text-align: center;
            margin-top: 18px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.2);
        }

        .modal-footer a {
            color: #a78bfa;
            text-decoration: none;
        }

        .modal-footer a:hover {
            text-decoration: underline;
        }

        /* Social login section */
        .social-login-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .social-label-text {
            font-size: 11px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.3);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .auth-social-list {
            display: flex;
            gap: 10px;
            justify-content: center;
            width: 100%;
        }

        .tg-auth-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 13px 28px;
            background: linear-gradient(135deg, rgba(0, 136, 204, 0.18), rgba(0, 136, 204, 0.06));
            border: 1px solid rgba(0, 136, 204, 0.2);
            border-radius: 12px;
            color: #7dd3fc;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            letter-spacing: 0.3px;
        }

        .tg-auth-btn:hover {
            background: linear-gradient(135deg, rgba(0, 136, 204, 0.3), rgba(0, 136, 204, 0.12));
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 136, 204, 0.2);
            color: #bae6fd;
        }

        .tg-auth-btn:active {
            transform: translateY(0);
        }

        .tg-icon {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
        }

        /* Toast notification */
        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            padding: 14px 24px;
            border-radius: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            z-index: 2000;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
        }

        .toast-success {
            background: linear-gradient(135deg, #059669, #10b981);
            box-shadow: 0 8px 30px rgba(16, 185, 129, 0.3);
        }

        .toast-error {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            box-shadow: 0 8px 30px rgba(239, 68, 68, 0.3);
        }

  .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.35s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            position: relative;
            background: linear-gradient(145deg, #16151f, #0f0e17);
            border: 1px solid rgba(124, 58, 237, 0.15);
            border-radius: 22px;
            padding: 32px 28px 24px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(124, 58, 237, 0.08);
            transform: translateY(30px) scale(0.95);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-overlay.active .modal {
            transform: translateY(0) scale(1);
        }

        .modal-close {
            position: absolute;
            top: 14px;
            right: 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.4);
            width: 32px;
            height: 32px;
            border-radius: 10px;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            font-family: 'Inter', sans-serif;
        }

        .modal-close:hover {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.3);
            color: #fca5a5;
            transform: rotate(90deg);
        }

        .modal-icon {
            text-align: center;
            font-size: 36px;
            margin-bottom: 8px;
            animation: iconFloat 3s ease-in-out infinite;
        }

        /* Modal title */
        .modal-title {
            text-align: center;
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 4px;
            letter-spacing: -0.3px;
        }

        .modal-subtitle {
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 22px;
            font-weight: 500;
        }