.gradio-container {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    font-family: 'Inter', sans-serif;
}

.tab-nav {
    background: rgba(51, 65, 85, 0.8) !important;
    border-radius: 12px !important;
    padding: 4px !important;
}

.tab-nav button {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.tab-nav button.selected {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* .panel { THIS CAUSES ISSUES
    background: rgba(30, 41, 59, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(71, 85, 105, 0.3);
    backdrop-filter: blur(10px);
} */

.gr-button {
    background: linear-gradient(135deg, #059669, #047857) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.gr-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4) !important;
}

.secondary-btn {
    background: linear-gradient(135deg, #475569, #334155) !important;
}

.danger-btn {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

.gr-textbox, .gr-dropdown {
    background: rgba(51, 65, 85, 0.6) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
    border-radius: 8px !important;
    color: white !important;
}

/* Ensure dropdown options appear correctly */
.gr-dropdown {
    position: relative !important; /* Ensure dropdown options are positioned relative to this */
}
/* More robust selector for dropdown options, targeting the 'options' class */
.options {
    background: rgba(51, 65, 85, 0.95) !important; /* Slightly darker background for options */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}


.gr-file {
    background: rgba(51, 65, 85, 0.6) !important;
    border: 2px dashed rgba(71, 85, 105, 0.4) !important;
    border-radius: 12px !important;
}

/* Existing custom classes, ensure they are compatible or overridden */
.learnflow-button-large {
    min-height: 40px !important; /* Increase height */
    font-size: 1.2em !important; /* Increase font size */
    padding: 15px 30px !important; /* Adjust padding */
}

.learnflow-button-rounded {
    border-radius: 20px !important; /* Apply rounded corners */
}

.quiz-section {
    background: rgba(51, 65, 85, 0.6) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.correct-feedback {
    color: #10b981 !important;
    font-weight: bold !important;
}

.incorrect-feedback {
    color: #dc2626 !important;
    font-weight: bold !important;
}