@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html { 
    scroll-behavior: smooth; 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; 
    color: #1f2937;
}

.container { 
    max-width: 960px; 
    position: relative; 
}

.btn { 
    transition: all 0.2s ease; 
}

.btn:hover { 
    transform: translateY(-2px); 
}

.btn:disabled { 
    transform: none; 
    opacity: 0.5; 
    cursor: not-allowed; 
}

.btn-primary { background-color: #4f46e5; }
.btn-primary:hover { background-color: #4338ca; }
.btn-secondary { background-color: #6b7280; }
.btn-secondary:hover { background-color: #4b5563; }
.btn-tertiary { background-color: #dc2626; }
.btn-tertiary:hover { background-color: #b91c1c; }
.btn-tertiary:disabled { background-color: #9ca3af; }
.btn-quaternary { background-color: #f97316; }
.btn-quaternary:hover { background-color: #ea580c; }
.btn-quaternary:disabled { background-color: #fdba74; }
.btn-quintenary { background-color: #10b981; }
.btn-quintenary:hover { background-color: #059669; }
.btn-sidenary { background-color: #8b5cf6; }
.btn-sidenary:hover { background-color: #7c3aed; }
.btn-heptanary { background-color: #0891b2; }
.btn-heptanary:hover { background-color: #0e7490; }

#image-container img, 
#detail-image-container img, 
#uploaded-image-preview, 
#i2i-generated-image, 
#lineart-upload-generated-image, 
#bg-generated-image, 
#fs-generated-image {
    max-width: 100%; 
    height: auto; 
    border-radius: 0.75rem; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.modal { 
    background-color: rgba(0, 0, 0, 0.5); 
}

#notebook-toggle, 
#encyclopedia-toggle {
    position: absolute; 
    top: 1rem; 
    z-index: 20;
}

#notebook-toggle { 
    right: 1rem; 
}

#encyclopedia-toggle { 
    left: 1rem; 
}

.upload-zone { 
    border: 2px dashed #cbd5e1; 
    transition: all 0.2s ease; 
}

.upload-zone:hover { 
    border-color: #8b5cf6; 
    background-color: #f5f3ff; 
}

.upload-zone.dragging-over { 
    border-color: #8b5cf6; 
    background-color: #f5f3ff; 
    border-style: solid; 
}

.upload-zone.has-image { 
    border-color: #10b981; 
}

/* Styles for login modal */
#auth-modal-overlay { 
    background-color: rgba(0, 0, 0, 0.75); 
}

#app-container.blurred { 
    filter: blur(5px); 
    transition: filter 0.3s ease-in-out; 
}

.spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    border-radius: 50%;
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    border-width: 4px;
    border-color: #d1d5db; /* gray-300 */
    border-top-color: #4f46e5; /* indigo-600 */
}

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

#notebook-panel {
    position: absolute;
    top: 4.5rem;
    right: 1rem;
}

#notebook-header {
    cursor: move;
}

.history-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}