styles.css

/* CSS Variables */
:root {
    --plot-padding: 10%;
}

/* Global styles */
.gradio-container {
    background-color: #000000 !important;
    color: white !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(145deg, #111111, #1a1a1a) !important;
    padding: 15px !important;
    height: 100vh !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 300px !important;
    overflow-y: auto !important;
}

.sidebar-title {
    background: linear-gradient(45deg, #74b9ff, #a29bfe) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    font-family: monospace !important;
}

.sidebar-description {
    text-align: center !important;
    font-size: 14px !important;
    font-family: monospace !important;
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
}

.sidebar-description strong {
    color: #74b9ff !important;
    font-weight: 600 !important;
}

.sidebar-description em {
    color: #a29bfe !important;
    font-style: normal !important;
    opacity: 0.9 !important;
}

/* Summary button */
.summary-button {
    background: linear-gradient(135deg, #4a4a4a, #3e3e3e) !important;
    color: white !important;
    border: 2px solid #555555 !important;
    border-radius: 5px !important;
    padding: 12px 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    font-family: monospace !important;
    height: 60px !important;
    width: 100% !important;
}

.summary-button:hover {
    background: linear-gradient(135deg, #5a5a5a, #4e4e4e) !important;
    color: #74b9ff !important;
}

/* Main content */
.main-content {
    background-color: #000000 !important;
    margin-left: 300px !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Plot container */
.plot-container {
    background-color: #000000 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    padding: var(--plot-padding) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Plot elements */
.gr-plot {
    background-color: #000000 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.gr-plot img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Remove borders globally */
* {
    border-color: transparent !important;
}

/* Force black backgrounds */
.plot-container *,
.gr-plot * {
    background-color: #000000 !important;
}