"""
CSS styles and themes
"""

CUSTOM_CSS = """
/* Main container */
.gradio-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Headers */
h1, h2, h3, h4 {
    color: #1a365d !important;
    font-weight: 600 !important;
}

h1 {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px !important;
}

/* Buttons */
.gradio-button.primary {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.gradio-button.primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.gradio-button.secondary {
    background: linear-gradient(90deg, #4ECDC4 0%, #44A08D 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
}

/* Tabs */
.gradio-tab {
    border-bottom: 2px solid transparent !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
}

.gradio-tab.selected {
    border-bottom: 2px solid #667eea !important;
    color: #667eea !important;
    font-weight: 600 !important;
}

/* JSON