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

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f1115;
            /* Deep tactical dark */
            color: #e5e7eb;
        }

        .glow-input:focus {
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
            border-color: #3b82f6;
        }

        .tactical-card {
            background-color: #1a1d24;
            border: 1px solid #2d3748;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .badge-red {
            background: rgba(220, 38, 38, 0.2);
            color: #f87171;
            border: 1px solid rgba(220, 38, 38, 0.3);
        }

        .badge-green {
            background: rgba(5, 150, 105, 0.2);
            color: #34d399;
            border: 1px solid rgba(5, 150, 105, 0.3);
        }

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

        ::-webkit-scrollbar-track {
            background: #0f1115;
        }

        ::-webkit-scrollbar-thumb {
            background: #374151;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #4b5563;
        }

        .spinner {
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top: 3px solid #3b82f6;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* -------------------------------------
           PREMIUM TACTICAL UI UPGRADES
           ------------------------------------- */

        /* Animated Grid Background for Auth Modals */
        .auth-backdrop {
            background-color: #050b14;
            background-image: 
                linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            animation: gridMove 20s linear infinite;
        }

        @keyframes gridMove {
            0% { background-position: 0 0; }
            100% { background-position: 40px 40px; }
        }

        /* Glassmorphism Auth Card */
        .glass-card {
            background: rgba(10, 15, 25, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.05);
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 255, 255, 0.1);
            border: 1px solid rgba(0, 255, 255, 0.4);
        }

        /* Cyan/Neon focus inputs */
        .glow-input-cyan:focus {
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
            border-color: #00ffff;
            background-color: rgba(0, 255, 255, 0.05);
        }

        /* Tactical Button Hover */
        .btn-tactical {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .btn-tactical::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease;
        }
        .btn-tactical:hover::after {
            transform: translate(-50%, -50%) scale(1);
        }
        .btn-tactical:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -10px rgba(0, 255, 255, 0.5);
        }

        /* Security disc trick for the master key so Chrome ignores it */
        .secure-text {
            -webkit-text-security: disc;
            font-family: text-security-disc, "Inter", sans-serif;
        }

        /* Flip Animation Classes */
        .auth-container {
            perspective: 1000px;
        }
        
        .auth-flipper {
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
            position: relative;
        }
        
        .auth-front, .auth-back {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .auth-back {
            transform: rotateY(180deg);
        }
        
        .auth-flipped {
            transform: rotateY(180deg);
        }

        /* -------------------------------------
           GLOBAL TACTICAL STYLES
           ------------------------------------- */
        
        .app-backdrop {
            background-color: #050b14;
            background-image: 
                linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 30px 30px;
            animation: gridMove 30s linear infinite;
        }

        .glass-panel {
            background: rgba(15, 20, 25, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            transition: all 0.2s ease-in-out;
        }

        /* Color-coded input glows */
        .glow-input-red:focus { box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); border-color: #ef4444; background-color: rgba(239, 68, 68, 0.05); }
        .glow-input-green:focus { box-shadow: 0 0 12px rgba(34, 197, 94, 0.4); border-color: #22c55e; background-color: rgba(34, 197, 94, 0.05); }
        .glow-input-yellow:focus { box-shadow: 0 0 12px rgba(234, 179, 8, 0.4); border-color: #eab308; background-color: rgba(234, 179, 8, 0.05); }
        .glow-input-orange:focus { box-shadow: 0 0 12px rgba(249, 115, 22, 0.4); border-color: #f97316; background-color: rgba(249, 115, 22, 0.05); }
        .glow-input-purple:focus { box-shadow: 0 0 12px rgba(168, 85, 247, 0.4); border-color: #a855f7; background-color: rgba(168, 85, 247, 0.05); }

        /* Color-coded tactical buttons */
        .btn-tactical-blue { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
            border: 1px solid rgba(59, 130, 246, 0.3); 
        }
        .btn-tactical-blue::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; }
        .btn-tactical-blue:hover::after { transform: translate(-50%, -50%) scale(1); }
        .btn-tactical-blue:hover { transform: translateY(-2px); box-shadow: 0 8px 15px -5px rgba(59, 130, 246, 0.4); }

        .btn-tactical-green { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
            border: 1px solid rgba(34, 197, 94, 0.3); 
        }
        .btn-tactical-green::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; }
        .btn-tactical-green:hover::after { transform: translate(-50%, -50%) scale(1); }
        .btn-tactical-green:hover { transform: translateY(-2px); box-shadow: 0 8px 15px -5px rgba(34, 197, 94, 0.4); }

        .btn-tactical-red { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
            border: 1px solid rgba(239, 68, 68, 0.3); 
        }
        .btn-tactical-red::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; }
        .btn-tactical-red:hover::after { transform: translate(-50%, -50%) scale(1); }
        .btn-tactical-red:hover { transform: translateY(-2px); box-shadow: 0 8px 15px -5px rgba(239, 68, 68, 0.4); }
        
        .btn-tactical-yellow { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
            border: 1px solid rgba(234, 179, 8, 0.3); 
        }
        .btn-tactical-yellow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; }
        .btn-tactical-yellow:hover::after { transform: translate(-50%, -50%) scale(1); }
        .btn-tactical-yellow:hover { transform: translateY(-2px); box-shadow: 0 8px 15px -5px rgba(234, 179, 8, 0.4); }

        .btn-tactical-orange { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
            border: 1px solid rgba(249, 115, 22, 0.3); 
        }
        .btn-tactical-orange::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; }
        .btn-tactical-orange:hover::after { transform: translate(-50%, -50%) scale(1); }
        .btn-tactical-orange:hover { transform: translateY(-2px); box-shadow: 0 8px 15px -5px rgba(249, 115, 22, 0.4); }
        
        .btn-tactical-purple { 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
            border: 1px solid rgba(168, 85, 247, 0.3); 
        }
        .btn-tactical-purple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; }
        .btn-tactical-purple:hover::after { transform: translate(-50%, -50%) scale(1); }
        .btn-tactical-purple:hover { transform: translateY(-2px); box-shadow: 0 8px 15px -5px rgba(168, 85, 247, 0.4); }