.page-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .content-wrapper {
            flex: 1;
        }
        .minecraft-bg {
            background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 50%, #2d5a27 100%);
        }
        .grass-block {
            background: linear-gradient(to bottom, #7cb342 0%, #689f38 100%);
            border: 2px solid #558b2f;
        }
        
        /* Dark theme only - removed light theme styles */
        
        /* Mobile Menu Animations */
        #mobile-menu {
            transition: all 0.3s ease-in-out;
        }
        
        /* Dropdown hover effects */
        .group:hover .group-hover\:opacity-100 {
            opacity: 1;
        }
        
        .group:hover .group-hover\:visible {
            visibility: visible;
        }
        
        /* Better responsive breakpoints */
        @media (max-width: 1024px) {
            /* Tablet adjustments */
            .max-w-7xl {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }
        
        /* Mobile responsive improvements */
        @media (max-width: 768px) {
            .page-container {
                min-height: 100vh;
            }
            
            /* Ensure mobile menu doesn't interfere with content */
            .content-wrapper {
                position: relative;
                z-index: 1;
            }
            
            /* Mobile notification dropdown positioning */
            #notifications-panel {
                right: 0;
                left: auto;
                width: 90vw;
                max-width: 320px;
            }
            
            /* Improve mobile touch targets */
            #mobile-menu a {
                min-height: 44px;
                display: flex;
                align-items: center;
            }
            
            /* Better mobile navigation */
            .max-w-7xl {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }
            
            /* Improve mobile menu */
            #mobile-menu {
                padding: 0.5rem;
            }
            
            #mobile-menu a {
                padding: 0.75rem;
                margin-bottom: 0.25rem;
                border-radius: 0.5rem;
                font-size: 0.875rem;
            }
            
            /* User dropdown adjustments */
            #user-dropdown-panel {
                width: 90vw;
                right: -1rem;
                max-width: 280px;
            }
            
            /* Improve touch targets */
            button, a {
                min-height: 44px;
                min-width: 44px;
            }
            
            /* Better spacing for mobile */
        }
        
        /* Image Loading Animations */
        .lazy-load {
            transition: opacity 0.5s ease-in-out, filter 0.3s ease;
            filter: blur(5px);
        }
        
        .lazy-load.loaded {
            filter: blur(0);
        }
        
        .loading-placeholder {
            background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }
        
        /* Smooth image transitions */
        .aspect-square img {
            transition: opacity 0.5s ease-in-out, transform 0.3s ease;
        }
        
        .aspect-square img.loaded {
            opacity: 1 !important;
        }
        
        /* Loading spinner animation */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        .animate-spin {
            animation: spin 1s linear infinite;
        }
        
        /* Image hover effects */
        .group:hover img {
            transform: scale(1.05);
        }
        
        /* Progressive image loading */
        .progressive-image {
            position: relative;
            overflow: hidden;
        }
        
        .progressive-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, #374151 25%, transparent 25%), 
                        linear-gradient(-45deg, #374151 25%, transparent 25%), 
                        linear-gradient(45deg, transparent 75%, #374151 75%), 
                        linear-gradient(-45deg, transparent 75%, #374151 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            opacity: 0.1;
            z-index: 1;
        }
        .space-x-2 > * + * {
            margin-left: 0.25rem;
        }
        
        @media (max-width: 640px) {
            /* Stack mobile menu items better */
            #mobile-menu a {
                display: flex;
                align-items: center;
                padding: 1rem 0.75rem;
            }
            
            /* Better mobile header */
            .flex.justify-between.h-16 {
                padding: 0 0.5rem;
            }
            
            /* Improve mobile dropdowns */
            #notifications-panel,
            #user-dropdown-panel {
                width: 95vw;
                left: 50%;
                transform: translateX(-50%);
                right: auto;
            }
        }
        
        @media (max-width: 480px) {
            /* Better mobile navigation title */
            h1.text-xl {
                font-size: 1rem;
            }
            
            /* Improve mobile menu spacing */
            #mobile-menu {
                padding: 0.25rem;
            }
            
            #mobile-menu a {
                padding: 0.875rem 0.5rem;
                font-size: 0.8rem;
            }
            
            /* Better mobile buttons */
            .bg-blue-600,
            .bg-green-600 {
                padding: 0.5rem 0.75rem;
                font-size: 0.875rem;
            }
            
            /* Prevent zoom on input focus */
            input, select, textarea {
                font-size: 16px;
            }
        }
        
        /* Smooth transitions for menu icon */
        #mobile-menu-icon {
            transition: transform 0.2s ease-in-out;
        }
        
        /* Image Viewer Styles */
        .image-viewer-active {
            overflow: hidden;
        }
        
        .image-viewer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            color: white;
        }
        
        .image-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        
        .image-container img {
            max-width: 90vw;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        
        /* Toast Notification Styles */
        .toast {
            opacity: 0;
            transform: translateX(100%);
            animation: slideIn 0.3s ease-out forwards;
        }
        
        .toast.fade-out {
            animation: slideOut 0.3s ease-in forwards;
        }
        
        @keyframes slideIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideOut {
            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }
        
        /* Copy button hover effects */
        .copy-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }
        
        /* Mobile responsive adjustments for image viewer */
        @media (max-width: 768px) {
            .image-container img {
                max-width: 95vw;
                max-height: 70vh;
            }
            
            .image-viewer-overlay .p-4 {
                padding: 1rem;
            }
            
            .image-viewer-overlay .space-x-4 > * + * {
                margin-left: 0.5rem;
            }
            
            .image-viewer-overlay .space-x-2 > * + * {
                margin-left: 0.25rem;
            }
        }