/* Custom styles for the AI Website Builder */
.dark {
    color-scheme: dark;
}

#previewContainer {
    position: relative;
    background: #f5f5f5;
    border-radius: 0.5rem;
}

#loadingIndicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#previewFrame {
    background: white;
    border-radius: 0.5rem;
}

textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .grid-cols-1 {
        gap: 1.5rem;
    }
}