/* Custom Aesthetics */
        body {
            background-color: #FAFAFA;
            color: #1F2937;
            overflow-x: hidden;
        }

        .gradient-bg {
            background: radial-gradient(circle at 10% 20%, rgb(255, 239, 234) 0%, rgb(240, 240, 255) 40%, rgb(235, 250, 255) 90%);
        }

        .text-gradient {
            background: linear-gradient(to right, #6366f1, #ec4899, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
        }
        
        .glass-input {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .glass-nav {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.6;
            z-index: -1;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c7c7ff;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a5a5f3;
        }

        /* Modal Transitions */
        .modal {
            transition: opacity 0.3s ease, visibility 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }
        .modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .job-card-hover:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
        }
    <style>
    .nav-link {
        @apply text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors cursor-pointer;
    }
    .btn-login {
        @apply text-sm font-bold text-slate-700 hover:text-indigo-600 transition-colors cursor-pointer;
    }
    .btn-join {
        @apply px-5 py-2.5 rounded-full bg-slate-900 text-white text-sm font-medium 
               hover:bg-slate-800 hover:shadow-lg hover:shadow-indigo-200 transition-all duration-300 transform hover:-translate-y-0.5;
    }
    .avatar-btn {
        @apply w-10 h-10 rounded-full bg-gradient-to-r from-indigo-400 to-pink-300 border-2 border-white shadow-md;
    }
    .logout-btn {
        @apply text-xs font-semibold text-slate-400 hover:text-red-400 transition-colors;
    }
    .mobile-link {
        @apply text-slate-700 font-medium text-base py-2 border-b border-slate-200/60 cursor-pointer;
    }
    .mobile-btn {
        @apply px-4 py-2 rounded-lg bg-slate-100 text-slate-700 font-medium hover:bg-slate-200 transition;
    }
    .mobile-btn-primary {
        @apply px-4 py-2 rounded-lg bg-slate-900 text-white font-medium hover:bg-slate-800 transition;
    }
</style>