
        /* Custom Font Imports */
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

        body {
            font-family: 'Space Grotesk', system-ui, sans-serif;
            background-color: #0E1525;
            color: #E2E8F0;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Outfit', sans-serif;
        }

        pre, code, .code-editor {
            font-family: 'Fira Code', monospace;
        }

        .btn-text {
            font-family: 'DM Sans', sans-serif;
            font-weight: 500;
        }

        /* Text gradient effects */
        .text-gradient-blue {
            background: linear-gradient(135deg, #1E88E5 0%, #29B6F6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
        }

        .text-gradient-purple {
            background: linear-gradient(135deg, #9333EA 0%, #D946EF 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
        }
        
        .text-gradient-green {
            background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
        }

        .text-gradient-orange {
            background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
        }

        /* Scrollbar styles */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #1C2333;
        }

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

        ::-webkit-scrollbar-thumb:hover {
            background: #3E4A60;
        }

        /* Code editor styles */
        .code-editor {
            background-color: #0E1525;
            background-image: linear-gradient(to bottom, #0E1525, #0F1729);
            color: #E2E8F0;
            line-height: 1.6;
            border: 1px solid #1E2D3D;
        }

        .line-numbers {
            color: #6C7A94;
            text-align: right;
            padding-right: 12px;
            user-select: none;
        }

        .code-line {
            padding: 0 10px;
            white-space: pre;
        }

        /* Syntax highlighting */
        .token-keyword {
            color: #8B5CF6;
        }

        .token-function {
            color: #22D3EE;
        }

        .token-string {
            color: #10B981;
        }

        .token-comment {
            color: #6C7A94;
            font-style: italic;
        }

        .token-number {
            color: #F59E0B;
        }

        /* File explorer styles */
        .file-type-lua {
            color: #22D3EE;
        }

        .file-type-folder {
            color: #93A4C5;
        }

        /* Discord button styles */
        .discord-btn {
            background-color: #5865F2;
            transition: background-color 0.2s;
        }

        .discord-btn:hover {
            background-color: #4752C4;
        }

        /* Custom selects and inputs */
        .custom-select, .custom-input {
            background-color: #1C2333;
            border: 1px solid #1E2D3D;
            color: #E2E8F0;
            border-radius: 4px;
        }

        .custom-select:focus, .custom-input:focus {
            outline: none;
            border-color: #1E88E5;
        }

                             /* System message styles */
.system-message {
  border-left: 4px solid;
  transition: all 0.2s ease;
}

.system-message-info {
  border-left-color: #1E88E5;
  background-color: rgba(30, 136, 229, 0.1);
}

.system-message-warning {
  border-left-color: #F97316;
  background-color: rgba(249, 115, 22, 0.1);
}

.system-message-danger {
  border-left-color: #EF4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.system-message-success {
  border-left-color: #10B981;
  background-color: rgba(16, 185, 129, 0.1);
}
        

        /* Custom button styles */
        .btn-primary {
            background-color: #1E88E5;
            color: white;
            transition: all 0.2s;
        }

        .btn-primary:hover {
            background-color: #42A5F5;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .btn-secondary {
            background-color: #1C2333;
            color: #E2E8F0;
            border: 1px solid #1E2D3D;
            transition: all 0.2s;
        }

        .btn-secondary:hover {
            background-color: #2E3A50;
            transform: translateY(-1px);
        }

        .btn-danger {
            background-color: #991B1B;
            color: white;
            transition: all 0.2s;
        }

        .btn-danger:hover {
            background-color: #B91C1C;
            transform: translateY(-1px);
        }

        .folder-item {
            border-left: 2px solid transparent;
        }

        .folder-item:hover {
            background-color: #1C2333;
        }

        .folder-item.active {
            border-left: 2px solid #1E88E5;
            background-color: #1C2333;
        }

        /* Admin badge */
        .admin-badge {
            background-color: #D946EF;
            color: white;
            font-size: 0.7rem;
            padding: 0.1rem 0.5rem;
            border-radius: 9999px;
            font-weight: bold;
        }

        .dev-badge {
            background-color: #EC4899;
            color: white;
            font-size: 0.7rem;
            padding: 0.1rem 0.5rem;
            border-radius: 9999px;
            font-weight: bold;
        }

        /* Avatar image styles */
        .avatar-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #1E88E5;
        }

        .avatar-image.error {
            display: none;
        }

        .avatar-fallback {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #1E88E5;
            color: white;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #1E88E5;
        }

        .avatar-image.error + .avatar-fallback {
            display: flex;
        }

        /* Blur effect styles */
        .blur-sm {
            filter: blur(4px);
        }

        .blur-none {
            filter: blur(0);
        }

        /* Animation for email visibility toggle */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        /* Toggle switch */
        .toggle-dot {
            transition: transform 0.3s ease-in-out;
        }

        input[type="checkbox"]:checked ~ .toggle-dot {
            transform: translateX(100%);
        }

        /* Light mode styles */
        body.light {
            background-color: #F8F9FA;
            color: #1A202C;
        }

        body.light .custom-select, 
        body.light .custom-input {
            background-color: #EDF2F7;
            border-color: #CBD5E0;
            color: #1A202C;
        }

        body.light .btn-secondary {
            background-color: #EDF2F7;
            color: #1A202C;
            border-color: #CBD5E0;
        }

        body.light .btn-secondary:hover {
            background-color: #E2E8F0;
        }

        body.light .code-editor {
            background-color: #F7FAFC;
            background-image: none;
            color: #1A202C;
            border-color: #CBD5E0;
        }

        body.light .line-numbers {
            color: #718096;
        }

        /* Card hover effects */
        .hover-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hover-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        /* Loading spinner */
        .loading-spinner {
            border: 3px solid rgba(59, 130, 246, 0.2);
            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); }
        }