DYNAMAXD/ExplainabilityOnModel

1:root {2    --bg-dark: #3A2525;3    --card-bg: rgba(20, 10, 10, 0.65);4    --primary-accent: #9E2A3A;5    --primary-accent-hover: #FF0000;6    --secondary-accent: #000080;7    --text-main: #f0f4f8;8    --text-muted: #d0c0c0;9    --border-color: rgba(255, 255, 255, 0.08);10}11 12* {13    box-sizing: border-box;14    margin: 0;15    padding: 0;16}17 18body {19    font-family: 'Outfit', -apple-system, sans-serif;20    background-color: var(--bg-dark);21    color: var(--text-main);22    min-height: 100vh;23    position: relative;24    overflow-x: hidden;25}26 27/* Background Blobs for Glassmorphism Context */28.blob-wrapper {29    position: fixed;30    top: 0; left: 0; right: 0; bottom: 0;31    overflow: hidden;32    z-index: -1;33    pointer-events: none;34}35.blob {36    position: absolute;37    border-radius: 50%;38    filter: blur(80px);39    opacity: 0.5;40    animation: float 20s infinite ease-in-out;41}42.blob1 {43    top: -10%; left: -10%;44    width: 500px; height: 500px;45    background: radial-gradient(circle, var(--primary-accent), transparent 70%);46    animation-delay: 0s;47}48.blob2 {49    bottom: -20%; right: -10%;50    width: 600px; height: 600px;51    background: radial-gradient(circle, var(--secondary-accent), transparent 70%);52    animation-delay: -5s;53}54.blob3 {55    top: 40%; left: 40%;56    width: 400px; height: 400px;57    background: radial-gradient(circle, rgba(255, 0, 0, 0.3), transparent 70%);58    animation-delay: -10s;59}60 61@keyframes float {62    0%, 100% { transform: translate(0, 0) scale(1); }63    33% { transform: translate(30px, -50px) scale(1.1); }64    66% { transform: translate(-20px, 20px) scale(0.9); }65}66 67.container {68    max-width: 1200px;69    margin: 0 auto;70    padding: 3rem 1.5rem;71}72 73header {74    text-align: center;75    margin-bottom: 3rem;76}77 78h1 {79    font-size: 3.5rem;80    font-weight: 800;81    letter-spacing: -1px;82    margin-bottom: 0.5rem;83}84 85.accent {86    background: linear-gradient(135deg, #FF0000, #9E2A3A);87    -webkit-background-clip: text;88    -webkit-text-fill-color: transparent;89}90 91header p {92    color: var(--text-muted);93    font-size: 1.1rem;94    max-width: 600px;95    margin: 0 auto;96}97 98/* Glass Panels */99.glass-panel {100    background: var(--card-bg);101    backdrop-filter: blur(16px);102    -webkit-backdrop-filter: blur(16px);103    border: 1px solid var(--border-color);104    border-radius: 16px;105    padding: 2rem;106    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);107    transition: transform 0.3s ease, box-shadow 0.3s ease;108}109 110/* Upload Section */111.upload-section {112    max-width: 600px;113    margin: 0 auto 3rem;114    display: flex;115    flex-direction: column;116    gap: 1.5rem;117    align-items: center;118}119 120.upload-area {121    width: 100%;122    height: 250px;123    border: 2px dashed var(--border-color);124    border-radius: 12px;125    display: flex;126    justify-content: center;127    align-items: center;128    cursor: pointer;129    transition: all 0.3s ease;130    overflow: hidden;131    position: relative;132    background: rgba(0,0,0,0.2);133}134 135.upload-area:hover, .upload-area.dragover {136    border-color: var(--primary-accent);137    background: rgba(158, 42, 58, 0.1);138}139 140.upload-content {141    text-align: center;142    pointer-events: none;143    display: flex;144    flex-direction: column;145    align-items: center;146    gap: 0.5rem;147}148 149.upload-icon {150    width: 48px;151    height: 48px;152    color: var(--text-muted);153    margin-bottom: 0.5rem;154    transition: color 0.3s ease;155}156 157.upload-area:hover .upload-icon {158    color: var(--primary-accent);159}160 161.upload-text {162    font-size: 1.1rem;163    font-weight: 600;164}165 166.upload-hint {167    font-size: 0.85rem;168    color: var(--border-color);169    color: #718096;170}171 172#imagePreview {173    width: 100%;174    height: 100%;175    object-fit: contain;176    position: absolute;177    top: 0; left: 0;178}179 180.hidden {181    display: none !important;182}183 184/* Button */185.btn {186    padding: 0.8rem 2.5rem;187    font-size: 1.1rem;188    font-weight: 600;189    font-family: inherit;190    border: none;191    border-radius: 8px;192    cursor: pointer;193    transition: all 0.3s ease;194    display: flex;195    justify-content: center;196    align-items: center;197    gap: 0.5rem;198    outline: none;199}200 201.primary-btn {202    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));203    color: white;204    box-shadow: 0 4px 15px rgba(158, 42, 58, 0.4);205    min-width: 220px;206}207 208.primary-btn:hover:not(:disabled) {209    transform: translateY(-2px);210    box-shadow: 0 6px 20px rgba(158, 42, 58, 0.6);211}212 213.primary-btn:active:not(:disabled) {214    transform: translateY(1px);215}216 217.primary-btn.disabled {218    opacity: 0.5;219    cursor: not-allowed;220    background: #4a5568;221    box-shadow: none;222}223 224.spinner {225    width: 20px;226    height: 20px;227    border: 3px solid rgba(255,255,255,0.3);228    border-top: 3px solid white;229    border-radius: 50%;230    animation: spin 1s linear infinite;231}232 233@keyframes spin {234    0% { transform: rotate(0deg); }235    100% { transform: rotate(360deg); }236}237 238/* Results section */239.results-container {240    animation: fadeIn 0.8s ease forwards;241}242 243@keyframes fadeIn {244    from { opacity: 0; transform: translateY(20px); }245    to { opacity: 1; transform: translateY(0); }246}247 248.prediction-panel {249    text-align: center;250    margin-bottom: 3rem;251    max-width: 600px;252    margin-left: auto;253    margin-right: auto;254    background: rgba(158, 42, 58, 0.15);255    border-color: rgba(158, 42, 58, 0.3);256}257 258.sub-title {259    font-size: 1.5rem;260    color: var(--text-muted);261    font-weight: 400;262    margin-bottom: 1rem;263}264 265.pred-details {266    display: flex;267    flex-wrap: wrap;268    justify-content: center;269    gap: 2rem;270}271 272.pred-class-wrapper, .pred-conf-wrapper {273    display: flex;274    flex-direction: column;275    align-items: center;276}277 278.label {279    font-size: 0.9rem;280    color: var(--text-muted);281    text-transform: uppercase;282    letter-spacing: 1px;283    margin-bottom: 0.3rem;284}285 286.value {287    font-size: 2rem;288    font-weight: 800;289}290 291.primary-value {292    color: #FF0000;293    text-transform: capitalize;294}295 296/* Output grid */297.maps-grid {298    display: grid;299    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));300    gap: 2rem;301    margin-top: 2rem;302}303 304.map-card {305    padding: 1.5rem;306    display: flex;307    flex-direction: column;308    align-items: center;309    gap: 1rem;310}311 312.map-card:hover {313    transform: translateY(-5px);314    box-shadow: 0 12px 40px rgba(0,0,0,0.4);315    border-color: rgba(255,255,255,0.15);316}317 318.map-card h3 {319    font-size: 1.2rem;320    font-weight: 600;321    color: #e2e8f0;322}323 324.image-wrapper {325    width: 100%;326    aspect-ratio: 1 / 1;327    border-radius: 8px;328    overflow: hidden;329    background: #000;330    border: 1px solid var(--border-color);331}332 333.image-wrapper img {334    width: 100%;335    height: 100%;336    object-fit: cover;337    display: block;338}339 340@media (max-width: 768px) {341    h1 {342        font-size: 2.5rem;343    }344    .maps-grid {345        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));346    }347}348