:root {
    /* Material Design 3 Color Tokens */
    --m3-primary: #6750a4;
    --m3-on-primary: #ffffff;
    --m3-primary-container: #eaddff;
    --m3-on-primary-container: #21005d;

    --m3-secondary: #625b71;
    --m3-on-secondary: #ffffff;
    --m3-secondary-container: #e8def8;
    --m3-on-secondary-container: #1d192b;

    --m3-tertiary: #7d5260;
    --m3-on-tertiary: #ffffff;
    --m3-tertiary-container: #ffd8e4;
    --m3-on-tertiary-container: #31111d;

    --m3-surface: #fffbfe;
    --m3-on-surface: #1c1b1f;
    --m3-surface-variant: #e7e0ec;
    --m3-on-surface-variant: #49454f;

    --m3-error: #ba1a1a;
    --m3-on-error: #ffffff;
    --m3-error-container: #ffdad6;
    --m3-on-error-container: #410002;
}

@media (prefers-color-scheme: dark) {
    :root {
        --m3-primary: #d0bcff;
        --m3-on-primary: #381e72;
        --m3-primary-container: #4f378b;
        --m3-on-primary-container: #eaddff;

        --m3-secondary: #ccc2dc;
        --m3-on-secondary: #332d41;
        --m3-secondary-container: #4a4458;
        --m3-on-secondary-container: #e8def8;

        --m3-tertiary: #efb8c8;
        --m3-on-tertiary: #492532;
        --m3-tertiary-container: #633b48;
        --m3-on-tertiary-container: #ffd8e4;

        --m3-surface: #1c1b1f;
        --m3-on-surface: #e6e1e5;
        --m3-surface-variant: #49454f;
        --m3-on-surface-variant: #cac4d0;

        --m3-error: #ffb4ab;
        --m3-on-error: #690005;
        --m3-error-container: #93000a;
        --m3-on-error-container: #ffdad6;
    }
}

body {
    padding: 40px;
    font-family: 'Roboto', sans-serif;
    background-color: #fafafa;
    color: #263238;
}

.container {
    max-width: 900px;
    margin: auto;
}

.btn-container {
    margin-bottom: 20px;
}

#processBtn.highlighted md-icon {
    /* Add your desired styles for the highlighted state here */
    color: var(--m3-primary)
}

/* Map panel */
.map-panel {
    margin-top: 18px;
}

#map {
    width: 100%;
    height: 360px;
    border-radius: 6px;
    background: #f5f7fb;
    min-height: 320px;
}

.map-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.map-sliders {
    display: grid;
    grid-template-columns: 200px 1fr 100px;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -1px 4px rgba(60, 64, 67, 0.04);
    font-size: 0.95rem;
    color: #607d8b;
    padding: 8px 40px;
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    max-width: none;
    margin: 0;
    padding: 0;
}

.fade-in {
    animation: fadeIn 0.36s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header styles */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.run-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#processBtn {
    --md-icon-button-icon-size: 32px;
    --md-icon-button-state-layer-size: 56px;
    animation: throb 1.5s ease-in-out infinite;
}