styles.css

/* Main App Background */
.stApp {
    background-color: #0E1117;
    color: #FAFAFA;
}

/* Sidebar Styling */
section[data-testid="stSidebar"] {
    background-color: #262730;
    border-right: 1px solid #333;
}

/* Metrics and Cards */
div[data-testid="stMetric"], div.stInfo, div.stSuccess, div.stWarning, div.stError {
    background-color: #1E1E1E;
    border: 1px solid #333;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Buttons */
.stButton>button {
    background-color: #4CAF50;
    color: white;
    border-radius: 8px;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.stButton>button:hover {
    background-color: #45a049;
    transform: scale(1.02);
}

/* Stop Button Needs to be Red */
div.stButton > button:first-child:contains('Stop') {
    background-color: #ff4b4b !important;
}

/* Simulation Video Container */
.video-container {
    border: 2px solid #333;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.2);
}

/* Confusion Meter (Custom Gauge Style) */
.confusion-meter-low {
    color: #4CAF50; /* Green */
    font-size: 24px;
    font-weight: bold;
}
.confusion-meter-med {
    color: #FFC107; /* Yellow */
    font-size: 24px;
    font-weight: bold;
}
.confusion-meter-high {
    color: #FF5252; /* Red */
    font-size: 24px;
    font-weight: bold;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Headers */
h1, h2, h3 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #E0E0E0;
}