style.css

:root{
    --card-back: #060c17;
    --btn-color: #2d1668;
    --bright-lavender: #a66ff2;
    --size-8: 20px;
    --size-4: 0px;
    --block-padding: 0px
}
:root .dark{
    --layout-gap: 20px;
    --neutral-100: #BBC2CFff;
    --body-text-color: var(--neutral-100);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(5,8,18,.75), rgba(5,8,18,.75)),
        url("/gradio_api/file=assets/space_1.jpg") center/cover no-repeat;
    z-index: 0;
}

.gradio-container-6-20-0 {
    --primary-400: #aa92e8;
    --primary-500: #9070e1;
    --primary-600: #754eda;
    --primary-700: #5b2dd2;
    --color-accent: var(--primary-500);
    --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600))
}

.gradio-container {
    max-width: 1500px !important;
    gap: 24px;
    font-family: sans-serif;
}

.column.card > .block {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

.column.card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    background-color: var(--card-back);
    padding:18px;
    border-radius:15px;
    border: var(--block-border-width) solid var(--border-color-primary)
}
.block-label{
    padding:4px 10px !important;
    font-size:13px !important;
}

.title-text.prose h3{
    font-weight: 600 !important;
    color: var(--bright-lavender) !important;
    font-size: 1.17em
}
.image-frame img {
    object-fit: contain !important;
}

#navbar-block .html-container{
    padding: 0px
}

#prediction-card .html-container,
#prediction-card .html-container .prose{
    padding: 0px;
    height: stretch;
}
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color: var(--card-back);
    margin-top: calc(-1 * var(--size-4));
    margin-left: calc(-1 * var(--size-8));
    margin-right: calc(-1 * var(--size-8));
    border-radius: 0px;
    padding: 15px 28px;
    border-bottom: var(--block-border-width) solid var(--border-color-primary);
}
.nav-links{
    margin-left: auto;
}

#model_row{
    gap: 10px
}
#model_dropdown{
    padding: 0px !important;
}

#classify-btn{
    padding: 0px !important;
    font-size:16px !important;
    background-color: var(--btn-color) !important;
    color: var(--body-text-color) !important;
}

.gradcam-desc.prose{
    padding: 10px;
    border: 1px dashed var(--border-color-primary) ;
    border-radius: 8px;
}
.pred-row{
    align-content: flex-start !important;
    flex-grow: 0 !important;
}
.prediction-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background-color: #27272a;
    padding: 16px;
    border-radius: 8px;
    gap: 8px;
}

.section-title{
    margin: 0px;
}

.prediction-name, .confidence-value{
    font-size:30px;
    font-weight:700;
    color: var(--bright-lavender);
}

.prediction-type{
    font-size:15px;
    color:var(--body-text-color);

}

.confidence-bar{
    width:100%;
    height:10px;
    background:#333;
    border-radius:999px;
    overflow:hidden;
}
.confidence-fill{
    height:100%;
    background:var(--stat-background-fill);
    border-radius:999px;
}
.confidence-scale{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:var(--body-text-color);
}
.prediction-card hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.12);
    margin:5px 0;
}

#result-md{
    max-height:420px;
    overflow:auto;
    background: #27272a;
    border-radius: 8px;
    padding: 1rem;
}

#project-notes button span{
    font-size: 1.17em;  
    font-weight: 600;
    color: var(--bright-lavender) !important;
}

#footer{
    background-color: var(--card-back);
    padding:20px;
    border-radius:15px;
    border: var(--block-border-width) solid var(--border-color-primary);
    margin-bottom: 16px;
} 

#footer .styler {
    background: var(--card-back);
}