body {
    font-family: 'Inter', system-ui, sans-serif;
}

.hero-pattern {
    background-image: radial-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.category-btn {
    transition: all 0.2s ease;
}

.category-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#email-output {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

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

/* On mobile: hide top error, show near-button error */
@media (max-width: 767px) {
    #error-message:not(.hidden) {
        display: none;
    }
}
/* On desktop: hide near-button error, show top error */
@media (min-width: 768px) {
    #error-message-mobile:not(.hidden) {
        display: none;
    }
}