:root {
            --primary: #3b82f6;
            --secondary: #10b981;
            --accent: #f59e0b;
            --dark: #1f2937;
            --light: #f9fafb;
        }
        
        * {
            transition: all 0.3s ease;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .sidebar {
            min-height: 100vh;
            position: fixed;
            width: 280px;
            z-index: 40;
            background: white;
        }
        
        .main-content {
            margin-left: 280px;
            min-height: 100vh;
            background: #f9fafb;
        }
        
        @media (max-width: 768px) {
            .sidebar {
                width: 280px;
                position: fixed;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 30;
                display: none;
            }
            
            .overlay.active {
                display: block;
            }
        }
        
        .editor-content {
            min-height: 300px;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1rem;
            background: white;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .post-card {
            border-left: 4px solid var(--primary);
        }
        
        .stats-card {
            background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
            color: white;
        }
        
        .tag {
            display: inline-block;
            background: #e5e7eb;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.875rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        .section {
            display: none;
        }
        
        .section.active {
            display: block;
            animation: fadeIn 0.5s ease-in;
        }
        
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            color: white;
            z-index: 1000;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        
        .toast.show {
            transform: translateX(0);
        }
        
        .toast.success {
            background: #10b981;
        }
        
        .toast.error {
            background: #ef4444;
        }
        
        .toast.info {
            background: #3b82f6;
        }
        
        /* Dark mode styles */
        .dark-mode {
            background-color: #1a202c !important;
            color: #e2e8f0 !important;
        }
        
        .dark-mode .bg-white {
            background-color: #2d3748 !important;
        }
        
        .dark-mode .bg-gray-50 {
            background-color: #2d3748 !important;
        }
        
        .dark-mode .bg-gray-100 {
            background-color: #4a5568 !important;
        }
        
        .dark-mode .text-gray-800 {
            color: #e2e8f0 !important;
        }
        
        .dark-mode .text-gray-600 {
            color: #a0aec0 !important;
        }
        
        .dark-mode .text-gray-700 {
            color: #e2e8f0 !important;
        }
        
        .dark-mode .border {
            border-color: #4a5568 !important;
        }
        
        .dark-mode input,
        .dark-mode textarea,
        .dark-mode select {
            background-color: #2d3748 !important;
            color: #e2e8f0 !important;
            border-color: #4a5568 !important;
        }
        
        .dark-mode .shadow-sm {
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
        }
        
        .dark-mode .stats-card {
            background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%) !important;
        }