.grid-preview{display:grid;gap:0.5rem;min-height:200px;width:100%;border:2px dashed #9ca3af;transition:all 0.3s ease;background-image:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(147,197,253,0.3) 19px,rgba(147,197,253,0.3) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(147,197,253,0.3) 19px,rgba(147,197,253,0.3) 20px);background-size:20px 20px;overflow:auto;max-height:500px;position:relative}
        .loading-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(2px)}
        .spinner{border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;width:40px;height:40px;animation:spin 0.8s linear infinite}
        @keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
        .grid-item{background:linear-gradient(135deg,#60a5fa 0%,#3b82f6 100%);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;border-radius:0.375rem;min-height:80px;text-align:center;transition:all 0.2s;cursor:pointer;user-select:none;box-shadow:0 2px 4px rgba(0,0,0,0.1);font-size:1.5rem;position:relative;border:2px solid rgba(255,255,255,0.3);padding:8px}
        .grid-item:hover{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);transform:scale(1.02);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
        .grid-item::after{content:attr(data-info);position:absolute;bottom:4px;right:4px;font-size:0.6rem;opacity:0.9;background:rgba(0,0,0,0.5);padding:2px 4px;border-radius:3px;white-space:nowrap}
        .code-output::-webkit-scrollbar{height:8px}
        .code-output::-webkit-scrollbar-thumb{background:#93c5fd;border-radius:10px}
        .overflow-y-auto::-webkit-scrollbar{width:8px}
        .overflow-y-auto::-webkit-scrollbar-thumb{background:#93c5fd;border-radius:10px}
        #line-numbers{line-height:1.5;user-select:none}
        #analyze-input{line-height:1.5}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Make columns stack on mobile */
    .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Prevent individual sections from being too tall on mobile */
    .overflow-y-auto.max-h-\[800px\] {
        max-height: 70vh !important;
    }
    
    /* Ensure main content area doesn't create nested scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Fix grid preview on mobile */
    .grid-preview {
        max-height: 300px !important;
        overflow: auto;
    }
}

/* Ensure Tailwind arbitrary values work */
[class*="max-h-["] {
    overflow-y: auto;
}

/* Dark mode logo support */
@media (prefers-color-scheme: dark) {
    /* Make logo text white in dark mode */
    img[src="/logo.jpg"], 
    img[src="logo.jpg"],
    header img[alt*="Gridlock Holmes"] {
        filter: brightness(0) invert(1);
    }
}

/* Full dark mode support for entire page */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1f2937 !important;
        color: #f3f4f6;
    }
    
    /* Adapt text colors */
    .text-gray-600 {
        color: #d1d5db !important;
    }
    
    .text-gray-700 {
        color: #e5e7eb !important;
    }
    
    .text-gray-800 {
        color: #f3f4f6 !important;
    }
    
    .text-gray-900 {
        color: #ffffff !important;
    }
    
    /* Adapt backgrounds */
    .bg-white {
        background-color: #374151 !important;
        color: #f3f4f6;
    }
    
    .bg-gray-50 {
        background-color: #1f2937 !important;
    }
    
    .bg-gray-100 {
        background-color: #4b5563 !important;
    }
    
    /* Adapt borders */
    .border {
        border-color: #4b5563 !important;
    }
    
    /* Adapt inputs */
    input, textarea, select {
        background-color: #374151 !important;
        color: #f3f4f6 !important;
        border-color: #4b5563 !important;
    }
    
    input:disabled, textarea:disabled, select:disabled {
        background-color: #1f2937 !important;
        color: #6b7280 !important;
    }
}

/* Dark mode logo - CSS fallback for older browsers */
@media (prefers-color-scheme: dark) {
    .logo-image {
        content: url('/logo-dark.jpg');
    }
}

/* Tutorial modal mobile fixes - more aggressive */
@media (max-width: 640px) {
    #tutorial-modal > div {
        max-width: calc(100vw - 2rem) !important;
        margin: 0 1rem !important;
        padding: 1rem !important;
    }
    
    #tutorial-modal button {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    #tutorial-modal .flex.justify-between {
        gap: 0.5rem !important;
    }
}